For MongoDB World, we've implemented a behavior in the query builder on "number" minicharts to create open ranges, e.g. {"$lt": 20} instead of {"$gt": 15, "$lt": 20} (special request from Dana for the demo). The behavior was to click-drag the selection box over the edge of the chart to trigger the open range, while still allowing closed ranges when dragging close to the edge.

This behavior got lost in the transition to the React version of the schema in the 1.4.0-beta cycle.

We want to re-implement it, and also add subtle visual feedback that indiciates to the user that they have reached/passed the threshold between open/close ranges (e.g. a faded background to the side when switching to open range).

The implementation for this behavior is available in the old code base, but it needs to be adjusted to the new query builder code.

Code Snippets:

• Detection of mouse outside chart in the old code base: https://github.com/10gen/compass/blob/1.3-releases/src/app/minicharts/d3fns/many.js#L89-L98 (openLeft, openRight boolean flags)

• Code in the old Query Builder to handle open ranges: https://github.com/10gen/compass/blob/1.3-releases/src/app/minicharts/querybuilder.js#L292-L306 (probably not relevant, just adding for completeness).

• Somewhere in here we need to add the "outside chart" detection and construct the open query, and pass it to the setRangeValue action, see below. https://github.com/10gen/compass/blob/master/src/internal-packages/schema/lib/d3/many.js#L85-L108

• New Query Builder action setRangeValue already supports open ranges, just need to be called correctly: https://github.com/10gen/compass/blob/f05b3acf40fe9e56691aedd83cd7d970a9a84420/src/internal-plugins/query/lib/store/query-store.js#L564-L593

Acceptance criteria:

• add "outside chart" implementation for minicharts
• call setRangeValue in query store