Right now we have both (blank) andlinear

It's not even taking a default but just setting a completely empty field def. This should not be the case.

Reproduce:

• Drop a field
• Set some property (for example grid)
• Drop another field
• Property is set to false (default is true in schema!)

Running grunt serve

Running "compass:server" (compass) task
    directory .tmp/styles
        error app/styles/main.scss (/usr/local/lib/ruby/gems/2.1.0/gems/sass-3.4.6/lib/sass/selector/abstract_sequence.rb:96:in `block in _specificity': undefined method `specificity' for [:not(.button)]:Array)

• view domain #145
• histograms view (or at least show range of values for each field) #144
• filter #2
• sorting control #113

(let’s discuss at some point)

Basically all controllers, services, filters should have the follow filename format.

src: componentname.type.js
test: componentname.type.spec.js

(only directives has format directivename.js)

since we automatically inject everything under app and components. This is relatively easy.

From the vlplot test’s error, seems like tests are loaded twice….

PhantomJS 1.9.8 (Mac OS X) Directive: vlPlot should attach visualization FAILED
    Expected 0 to be 1.
        at /Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/src/components/vlplot/vlplot.spec.js:42
        at invoke (/Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/bower_components/angular/angular.js:4182)
        at workFn (/Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/bower_components/angular-mocks/angular-mocks.js:2350)
PhantomJS 1.9.8 (Mac OS X) Directive: vlPlot should attach visualization FAILED
    Expected 0 to be 1.
        at /Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/src/components/vlplot/vlplot.spec.js:42
        at invoke (/Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/bower_components/angular/angular.js:4182)
        at workFn (/Users/kanitw/Dropbox/_Projects/_idl/_visrec/vegalite-ui/bower_components/angular-mocks/angular-mocks.js:2350)

Something like this:

• popup
• clean the popup if click somewhere else
• disable popup if there is no property available no longer applicable

• Fix Style of the Dev Pane: Text Area, Stick at the bottom
• Error Message
• Configuration panes don't close when field is removed
• use flex layout for horizontal stuff too. (make vis fits vertically to the screen)

@domoritz not sure if calling toSpec(excludeConfig=true) is sufficient?

I’m thinking about adding

This module should be extensible to act as drag-and-drop item for Tableau-style UI and as checkbox list for faceted search UI.

• function selector

Should be spread across directives.

Enable Undo (and Redo?)

For example,

drag a quant field to one shelf, set the field to avg, cast the field to text … the avg would still be there.

We could have a special count field or just enable the dropdown even if there is no field (current option).

(Forked from #10)

From The Top 10 Mistakes AngularJS Developers Make and Best Practice Recommendations for Angular App Structure, there are a couple of things we should do:

(most importantly)

• group file by modules — this would make copying some component to facetedviz much easier.
• make sure we always use dependency injection for all dependencies.
  For example, right now we are still using _ (lodash) and papa from global scope, which makes testing more difficult?

(nice to do)

• group things by module

For example, it would be great if we can access polestar from
uwdata.github.io/polestar?shorthand=<shorthand> (for the github pages hosted app)

Although we won’t test for support in browsers other than chrome, it’s nice to use stuff from Compass so it will increase stylesheet compatibility coverage for us.

(Lower Priority — not important for user study at all)

Don’t include default value in the specification.
For example, axis grid is false by default.
Let’s not include axis.grid unless it’s true.
Otherwise, the spec will be quite verbose.

{
  "marktype": "point",
  "enc": {
    "x": {
      "name": "cyl",
      "type": "Q",
      "scale": {"reverse": false,"zero": false},
      "axis": {"grid": false}
    },
    "y": {
      "name": "mpg",
      "type": "Q",
      "scale": {"reverse": false,"zero": false},
      "axis": {"grid": false}
    }
  },
  "cfg": {
    "useVegaServer": false,
    "vegaServerUrl": "http://localhost:3001",
    "dataFormatType": null,
    "dataUrl": "data/cars.json",
    "vegaServerTable": "cars_json"
  }
}

I guess some dependencies are not included properly. Check http://uwdata.github.io/vegalite-ui/dist/.

O -> Ordinal
Q -> Quantitative
T -> Time

Based on conversation in #43, we need further discussion.

I’m listing potential refactor here:

• service/Vegalite.js —> this name is weird for me but I don’t have better suggestion yet. (Punting it for now)

consolidate vegalite spec related service in

• move everything to one file (right now we have to import so many similar files)
• should we name it spec.js (Spec service) — seems like everything here are related to spec
• remove load schema (since it’s now accessible from vl.schema.spec)

Note: we can distinguish between the following spec even though they are in one file

• spec = verbose spec that’s being edited
• vlSpec = compiled spec — this should be a concise version.

There is a way to use grunt watcher to do this.

Because we changed the schema and the instantiated schema doesn't include the field type or mark type any more. Maybe other things as well.

No cmd+A + cmd+C anymore!

Right now it’s always sorted by the original order of the data.

• Sort by Type
• Sort by Type, then by Name
• Sort by Type, then by Cardinality (for ordinal)
• Sort by Name

The following part of code in directives/vegaliteplot.js is setting global scope.

var update = function() {
          $scope.vegaSpec = Vegalite.vegaSpec;
          $scope.vlSpec = Vegalite.vlSpec;
          $scope.shorthand = Vegalite.shorthand;
        };

However, my popups are currently relying on values in global variables.

(Will fix this today … need to go outside for lunch first)

• Use description of property from schema where available could either be as very small text or tooltip
• type
• field name

Based on conversation in #30,

The way we structure fieldDefEditor to check if a field is empty by checking fieldDef.name==null instead of fieldDef==null makes the spec updates twice when a Field is dragged from one shelf to another.

In fieldDefEditor, it seems like ngDraggable doesn’t have eventListener for when the source draggable item’s model is updated.

For example, if I drag a field A from shelf X to shelf Y, X’s onDragStop() would be called before its ngModel is updated to null.

Therefore, I have to reset scope.fieldDef = {name: null, type: null}; using a watcher.

This will update the spec twice. We can need to either stop sending pulse through the data flow.
An alternative solution is to makes fieldDef = null or undefined by default.

@domoritz Here are my proposed change (I will do them) … but wanna run them by you first.

• make things smaller — so most of them fit on one screen 13fbce7
• make options popup instead.
• use flex layout instead
• move shorthand, vegalite, vega code block to become popups on the menu bar
• move server config to become popup
• dropdown for aggregate type
• disable text selection on field pill
• add move config, dev tool to the bottom (and enable toggle expand)
  - [ ] Use dropdown button for fields #37
• Only show things that are relevant/ usable

Sorted by when they should be addressed. I keep updating.

• Filter for scale type (O, Q, T) name
• Refactor marks and encoding service, needs vega/vega-lite#76
• Redraw when marktype changes
• Support empty functions
• Use directives
• Split code into modules

UX

• Hide mark options by default 5f9167a
• Remove field support

• log all encoding modifications
• log all points that users mouseover -- @domoritz -- this is probably the only thing left for this issue but doesn't make sense until we have tooltip

For example:

• dropping O on size (or we need to make vegalite support this)

Also, prevent using row and col on non-text marktype if both x and y haven’t been used.

• Color — where {"type": "string","role": "color","default": “steelblue”} — we want color picker
• Opacity — should be slider
• Size — should be slider if we have min-max

need to adjust fielddefeditor.html

From vega/vega-lite#46