INT-456 QB improvements

[rueckstiess]

• dynamic redraw instead of creating each chart from scratch
• click-drag range queries on strings/numbers/dates/objectids
• improved event handling in preparation for backward pass

And now for something mind-blowing:

[kangas]

First impression: this looks terrific! A few minor issues that I see:

1: When click-drag works, it's brilliant. Caveats:

• It doesn't work in the "bar.few" chart type (only shift-click works)
• Cannot initiate click-drag when the cursor is over a selectable element. I have to move the cursor to "blank" space in the chart before I can initiate click-drag.

Let's try to make click-drag work consistently in all the chart types. I think we should support click-drag as our primary "multiple selection" mechanism, and "shift/command click" as a secondary mechanism. IMO, click-drag is what people will try first. (User testing will be the final arbiter, of course.)

2: Bug? When I run this locally, I see that the "This report is based on a sample of 100 documents" is invisible until the minicharts load. Thus our "progress indicator" of an increasing document count is gone.

EDIT: per @imlucas 's comment, I now see this is also true in master. I'll add a ticket to re-add a progress indicator. We probably need to try a few different designs.

[imlucas]

2: Bug? When I run this locally, I see that the "This report is based on a sample of 100 documents" is invisible until the minicharts load. Thus our "progress indicator" of an increasing document count is gone.

@kangas has been like this for a while (removed as it's super expensive on perf). Perhaps we make the progress-bar at the top determinate by running an async count. This also addresses I refine a query; how many docs actually matched?

[imlucas]

@rueckstiess once #1 above resolved,

[rueckstiess]

Problem 1. is unfortunately not trivial to solve. As Mike Bostock explains himself here, the brush component (that does the drag selection behavior) and the onclick mouse handler for the individual items compete. When the elements are above the brush (current implementation), they can only handle the clicks, not the dragging behavior.

I can try one of the alternatives he suggests in that issue (e.g. manually passing events from one handler to another), but it's a question of time to get it work.

[rueckstiess]

One idea to solve this: remove click handler, and only use the drag handler. Measure the dragged extent distance, and if it's minimal, interpret as click, manually forward event to original click handler. I need to test if that works.

Don't merge this PR yet

[rueckstiess]

Latest update (d0e9dd5)

Click-drag behavior works in both cases now:

1. when initiated on the white background
2. when initiated on one of the blue elements

Click-drag and regular click (or shift-click) work interchangeably and can be combined, e.g. click-drag a range of string elements, then shift-click one individual to remove from the range. Note, this will not work with numbers, dates, objectids, because we only support continuous ranges on those types ($gte, $lt).

Click-drag works on the "few" charts now as well. While not as useful as for the histogram bars ("many"), it is now consistent behavior with the other charts.

The overall behavior feels very intuitive to me now. Nonetheless we should conduct more user tests with the new query builder and see if users have less issues building complex queries.

[rueckstiess]

Backwards pass implemented

This required a lot of changes (sorry but the code review will be substantial). I had to rewire the entire query builder up and down path.

This update also requires a minor addition in mongodb-schema, so test this PR with a npm link'ed local copy of the mongodb-schema#dotted-path-added branch.

Check out how the refine bar updates in realtime while dragging the range selection, and how the selection updates while typing the query...

[kangas]

Query builder not working for me when I build locally on INT-456-QB-backwards-pass @ a7a8ce1

EDIT: works well when I "npm link mongodb-schema#dotted-path-added" per above. Let's merge mongodb-js/mongodb-schema#25

"npm run check" reports 3 errors which are all "X is defined but never used". Please fix them before merging.

I noticed that "node_modules/pre-commit/hook" is running mocha, rather than ./node_modules/.bin/mongodb-js-precommit. This might explain how the above "run check" errors has crept in. Submitted #108 to resolve.

[kangas]

Modulo the "npm run check" errors,

[rueckstiess]

FYI @imlucas @kangas

"Partial" selections on ranges, when the minichart cannot correctly represent the query range because the bounds are half-way between a bar or the operator is $gt instead of $gte.