Merge pull request #106 from 10gen/INT-456-QB-backwards-pass

INT-456 QB improvements

Author: kangas

package.json

@@ -86,7 +86,7 @@
     "moment": "^2.10.3",
     "mongodb-extended-json": "^1.3.1",
     "mongodb-language-model": "^0.2.1",
-    "mongodb-schema": "^3.2.1",
+    "mongodb-schema": "^3.3.0",
     "mousetrap": "^1.5.3",
     "numeral": "^1.5.3",
     "octicons": "https://github.com/github/octicons/archive/v2.2.0.tar.gz",

src/app.js

@@ -57,9 +57,13 @@ var Application = View.extend({
      */
     instance: 'state',
     /**
-     * @see models/query-options.js
+     * query options in sync with the data, @see models/query-options.js
      */
     queryOptions: 'state',
+    /**
+     * temporary query options during query building, @see models/query-options.js
+     */
+    volatileQueryOptions: 'state',
     /**
      * @see http://learn.humanjavascript.com/react-ampersand/creating-a-router-and-pages
      */
@@ -148,6 +152,7 @@ app.extend({
     this.connection = new Connection();
     this.connection.use(uri);
     this.queryOptions = new QueryOptions();
+    this.volatileQueryOptions = new QueryOptions();
     this.instance = new MongoDBInstance();
 
     // feature flags

src/field-list/index.js

@@ -7,10 +7,6 @@ var debug = require('debug')('scout:field-list');
 var _ = require('lodash');
 var raf = require('raf');
 var SampledSchema = require('../models/sampled-schema');
-var app = require('ampersand-app');
-
-var LeafClause = require('mongodb-language-model').LeafClause;
-var Query = require('mongodb-language-model').Query;
 
 function handleCaret(el) {
   var $el = $(el);
@@ -41,9 +37,6 @@ var FieldView = View.extend({
     fieldListView: 'view',
     arrayFieldListView: 'view'
   },
-  children: {
-    refineClause: LeafClause
-  },
   bindings: {
     'model.name': {
       hook: 'name'
@@ -93,7 +86,6 @@ var FieldView = View.extend({
         }), {
           silent: true
         });
-        this.listenTo(this.fieldListView, 'change:refineQuery', this.onRefineClause);
         return this.fieldListView;
       }
     },
@@ -108,64 +100,26 @@ var FieldView = View.extend({
         }), {
           silent: true
         });
-        this.listenTo(this.arrayFieldListView, 'change:refineQuery', this.onRefineClause);
         return this.arrayFieldListView;
       }
     }
   },
   initialize: function() {
     this.listenTo(this, 'change:visible', this.renderMinicharts);
-    this.refineClause.key.content = this.model.name;
   },
   render: function() {
     this.renderWithTemplate(this);
     this.viewSwitcher = new ViewSwitcher(this.queryByHook('minichart-container'));
   },
-  onRefineClause: function(who) {
-    if (who.getType() === 'MinichartView') {
-      this.refineClause.value = who.refineValue;
-    }
-    this.parent.trigger('refine', this);
-  },
-  prefixClauseKey: function(clause) {
-    var newClause = new LeafClause();
-    newClause.key.content = this.model.name + '.' + clause.key.buffer;
-    newClause.value = clause.value;
-    return newClause;
-  },
-  getClauses: function() {
-    var clauses = [];
-    if (this.fieldListView) {
-      this.fieldListView.refineQuery.clauses.each(function(clause) {
-        if (clause.valid) {
-          clauses.push(this.prefixClauseKey(clause));
-        }
-      }.bind(this));
-    }
-    if (this.arrayFieldListView) {
-      this.arrayFieldListView.refineQuery.clauses.each(function(clause) {
-        if (clause.valid) {
-          clauses.push(this.prefixClauseKey(clause));
-        }
-      }.bind(this));
-    }
-    if (this.refineClause.valid) {
-      clauses.push(this.refineClause);
-    }
-    return clauses;
-  },
   renderMinicharts: function() {
     if (!this.type_model) {
       this.type_model = this.model.types.at(0);
     }
-
     debug('setting miniview for type_model_id `%s`', this.type_model.getId());
     this.minichartView = new MinichartView({
       model: this.type_model,
       parent: this
     });
-    this.refineClause.value = this.minichartView.refineValue;
-    this.listenTo(this.minichartView, 'change:refineValue', this.onRefineClause);
     this.viewSwitcher.set(this.minichartView);
   },
   click: function(evt) {
@@ -178,15 +132,7 @@ var FieldView = View.extend({
 FieldListView = View.extend({
   modelType: 'FieldListView',
   session: {
-    fieldCollectionView: 'view',
-    refineQuery: {
-      type: 'state',
-      required: true,
-      default: function() {
-        return new Query();
-      }
-    },
-    queryContext: 'object'
+    fieldCollectionView: 'view'
   },
   template: require('./index.jade'),
   initialize: function() {
@@ -195,36 +141,8 @@ FieldListView = View.extend({
     } else {
       this.listenTo(this.parent, 'change:visible', this.makeFieldVisible);
     }
-    this.on('refine', this.onRefineQuery);
-    if (this.parent.getType() === 'Collection') {
-      // I'm the global FieldListView, remembering query context
-      this.queryContext = _.clone(app.queryOptions.query);
-    }
-  },
-  onRefineQuery: function() {
-    var views = this.fieldCollectionView.views;
-    var clauses = _.flatten(_.map(views, function(view) {
-      return view.getClauses();
-    }));
-    this.refineQuery = new Query({
-      clauses: clauses
-    });
-    if (this.parent.getType() === 'Collection') {
-      // fill clauses with query context unless they are further refined by user
-      this.queryContext.clauses.each(function(clause) {
-        this.refineQuery.clauses.add(clause);
-        // if (!_.find(clauses, function(cl) {
-        //   return cl.id === clause.id;
-        // })) {
-        //   clauses.push(clause);
-        // }
-      }.bind(this));
-      // I'm the global FieldListView, changing query in app
-      app.queryOptions.query = this.refineQuery;
-    }
   },
   makeFieldVisible: function() {
-    this.queryContext = _.clone(app.queryOptions.query);
     var views = this.fieldCollectionView.views;
     _.each(views, function(field_view) {
       raf(function() {

src/home/collection.js

@@ -6,9 +6,10 @@ var RefineBarView = require('../refine-view');
 var SamplingMessageView = require('../sampling-message');
 var MongoDBCollection = require('../models/mongodb-collection');
 var SampledSchema = require('../models/sampled-schema');
-var debug = require('debug')('scout:home:collection');
 var app = require('ampersand-app');
 
+var debug = require('debug')('scout:home:collection');
+
 var MongoDBCollectionView = View.extend({
   modelType: 'Collection',
   template: require('./collection.jade'),
@@ -76,6 +77,7 @@ var MongoDBCollectionView = View.extend({
     }
     this.visible = true;
     app.queryOptions.reset();
+    app.volatileQueryOptions.reset();
 
     this.schema.ns = this.model._id = ns;
     debug('updating namespace to `%s`', ns);
@@ -90,6 +92,9 @@ var MongoDBCollectionView = View.extend({
     options.message = 'Analyzing documents...';
     this.schema.refine(options);
   },
+  /**
+   * handler for opening the document viewer sidebar.
+   */
   onSplitterClick: function() {
     this.toggle('sidebar_open');
   },
@@ -110,7 +115,8 @@ var MongoDBCollectionView = View.extend({
         var refineBarView = new RefineBarView({
           el: el,
           parent: this,
-          model: app.queryOptions
+          queryOptions: app.queryOptions,
+          volatileQueryOptions: app.volatileQueryOptions
         });
         this.listenTo(refineBarView, 'submit', this.onQueryChanged);
         return refineBarView;

src/minicharts/d3fns/boolean.js

@@ -2,43 +2,79 @@ var d3 = require('d3');
 var _ = require('lodash');
 var few = require('./few');
 var shared = require('./shared');
+// var debug = require('debug')('scout:minicharts:boolean');
 
-var minicharts_d3fns_boolean = function(opts) {
-  var values = opts.model.values.toJSON();
-
-  // group by true/false
-  var data = _(values)
-    .groupBy(function(d) {
-      return d;
-    })
-    .defaults({
-      false: [],
-      true: []
-    })
-    .map(function(v, k) {
-      return {
-        label: k,
-        value: k === 'true',
-        count: v.length
-      };
-    })
-    .sortByOrder('label', [false]) // order: false, true
-    .value();
-
+var minicharts_d3fns_boolean = function() {
+  // --- beginning chart setup ---
+  var width = 400;
+  var height = 100;
+  var options = {
+    view: null
+  };
+  var fewChart = few();
   var margin = shared.margin;
+  // --- end chart setup ---
+
+  function chart(selection) {
+    selection.each(function(data) {
+      var el = d3.select(this);
+      var innerWidth = width - margin.left - margin.right;
+      var innerHeight = height - margin.top - margin.bottom;
+
+      // group by true/false
+      var grouped = _(data)
+        .groupBy(function(d) {
+          return d;
+        })
+        .defaults({
+          false: [],
+          true: []
+        })
+        .map(function(v, k) {
+          return {
+            label: k,
+            value: k === 'true',
+            count: v.length
+          };
+        })
+        .sortByOrder('label', [false]) // order: false, true
+        .value();
+
+      fewChart
+        .width(innerWidth)
+        .height(innerHeight)
+        .options(options);
+
+      var g = el.selectAll('g').data([grouped]);
+
+      // append g element if it doesn't exist yet
+      g.enter()
+        .append('g')
+        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+      g.call(fewChart);
+    });
+  }
 
-  var width = opts.width - margin.left - margin.right;
-  var height = opts.height - margin.top - margin.bottom;
-  var el = opts.el;
+  chart.width = function(value) {
+    if (!arguments.length) return width;
+    width = value;
+    return chart;
+  };
 
-  // clear el first
-  d3.select(el).selectAll('*').remove();
+  chart.height = function(value) {
+    if (!arguments.length) return height;
+    height = value;
+    return chart;
+  };
 
-  var g = d3.select(el)
-    .append('g')
-    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+  chart.options = function(value) {
+    if (!arguments.length) return options;
+    _.assign(options, value);
+    return chart;
+  };
 
-  few(data, opts.view, g, width, height);
+  return chart;
 };
 
 module.exports = minicharts_d3fns_boolean;