INT-1663: Reactify schema (#458)

* replace schema view with component

adding field and type components.
nested array fields working.
use native-parser stream directly
use schema stream ampersand model temporarily.
towards react minicharts…
progress on d3 component and d3 minichart fns
porting d3 functions to work with react.
store only runs one sampling process at a time
fix bug that prevented initial rendering of d3 components
sort undefined types last.
make subtypes work
array subtypes fully working now.
detect geo coordinates (use new module)
maps work, responsive minicharts.
Tooltips on types working.
use golden ratio for map dimensions.
QueryStore, set/clear/add/remove, unique mc query builder
more verbose comments for field.jsx
distinct queries with few and many.
correct range/single click queries on few/many.
performance could be better. also try react-d3-library.
move helpers to util
use throttled store methods to improve performance
fixed “many”. fully working for distinct queries.
fixed few.
re-enable brush background on “many” charts.
adding setRangeValue, setOrUnsetValue
bump [email protected], [email protected]
make unsetIfSet an option for query actions
implemented query building on ranges (numeric)
fix resizing bug in distinct many charts
  was re-creating many() charts on every redraw…
querybuilder for date/objectid and geo
fix svg unique bug, full path name for query building
adding internal status bar package
status component and early integration
progress bar for sampling. needs some work.
status / progress bar fixed for schema view.
remove old statusbar folder, schema model
added QueryBar component, moved query store + utils
query validation, query bar backwards pass.
apply and reset actions hooked up with status and schema
query bar: enter also applies valid queries.
make all query builder actions sync, better performance
clean up schema component.
status subview, schema actions, maxtimems

* rebased and using new hadron-app-registry

* getting StatusAction from appRegistry

* register QueryAction

* rename schema-store.jsx to index.jsx

* singular names for lib/* folders in status package

* QueryAction, file renames, cleanup

* handle error when stream ends.

* trigger filterChanged event on apply

* INT-1663: Move sampling message to query

* INT-1663: Use sampling message in schema view

* INT-1663: Expose Document component

INT-1663: Add indexes package

INT-1663: Adding initial indexes react package

INT-1663: Split index column components

INT-1663: Move index work to new view

INT-1663: Fixing tooltips

INT-1663: Allow document to not be editable

Upgrade react-bootstrap

* Revert "INT-1663: Expose Document component"

This reverts commit 57e644c.

* fix const/let bug in coordinates.js

* INT-1663: Split rendering between tabs on message

* INT-1663: Change sampling message based on tab

* fix single vs. double quotes linting issue

* adding “minicharts” for document and array.

* bump [email protected]

* fix edge case for empty subdocs with 0 fields.

* INT-1663: Sample didn't error with 0 sampled docs

* INT-1663: Ensure document list re-renders on collection change

* INT-1663: Show number of loaded documents in sample bar

* INT-1663: Update react-bootstrap

* INT-1663: Resize minicharts on schema tab click

Author: durran

package.json

@@ -98,6 +98,7 @@
     "debug": "mongodb-js/debug#v2.2.3",
     "debug-menu": "^0.3.0",
     "electron-squirrel-startup": "^1.0.0",
+    "detect-coordinates": "^0.1.0",
     "font-awesome": "https://github.com/FortAwesome/Font-Awesome/archive/v4.4.0.tar.gz",
     "get-object-path": "azer/get-object-path#74eb42de0cfd02c14ffdd18552f295aba723d394",
     "hadron-action": "^0.1.0",
@@ -124,7 +125,7 @@
     "mongodb-data-service": "^1.1.1",
     "mongodb-database-model": "^0.1.2",
     "mongodb-explain-plan-model": "^0.2.0",
-    "mongodb-extended-json": "^1.6.0",
+    "mongodb-extended-json": "^1.7.0",
     "mongodb-js-metrics": "^1.2.0",
     "mongodb-language-model": "^0.3.3",
     "mongodb-ns": "^1.0.3",
@@ -136,8 +137,12 @@
     "qs": "^5.2.0",
     "raf": "^3.1.0",
     "react": "^15.2.1",
-    "react-bootstrap": "0.29.5",
+    "react-bootstrap": "0.30.2",
     "react-dom": "^15.2.1",
+    "react-native-listener": "^1.0.1",
+    "react-tooltip": "^2.0.3",
+    "reflux": "0.4.1",
+    "reflux-state-mixin": "^0.7.0",
     "semver": "^5.1.0",
     "storage-mixin": "^0.8.0",
     "tunnel-ssh": "^3.2.1-beta",
@@ -147,10 +152,11 @@
     "uuid": "^2.0.1"
   },
   "devDependencies": {
+    "babel-eslint": "^6.0.4",
     "chai": "^3.4.1",
     "chai-as-promised": "^5.1.0",
     "electron-prebuilt": "1.2.8",
-    "eslint-config-mongodb-js": "^1.0.6",
+    "eslint-config-mongodb-js": "^2.0.1",
     "eslint-plugin-react": "^4.1.0",
     "hadron-build": "^0.7.2",
     "mocha": "^2.3.4",

src/app/connect/index.js

@@ -3,7 +3,6 @@ var ConnectFormView = require('./connect-form-view');
 var Connection = require('../models/connection');
 var ConnectionCollection = require('../models/connection-collection');
 var MongoDBConnection = require('mongodb-connection-model');
-
 var SidebarWrapperView = require('./sidebar');
 var View = require('ampersand-view');
 
@@ -38,6 +37,9 @@ var sslMethods = require('./ssl');
  */
 var sshTunnelMethods = require('./ssh-tunnel');
 
+
+var StatusAction = app.appRegistry.getAction('StatusAction');
+
 var ConnectView = View.extend({
   template: indexTemplate,
   screenName: 'Connect',
@@ -428,7 +430,7 @@ var ConnectView = View.extend({
       this.dispatch('error received');
       return;
     }
-    app.statusbar.show();
+    StatusAction.showIndeterminateProgressBar();
 
     var onSave = function() {
       this.connections.add(this.connection, { merge: true });
@@ -437,8 +439,8 @@ var ConnectView = View.extend({
     };
 
     connection.test(function(err) {
-      app.statusbar.hide();
       if (!err) {
+        StatusAction.hide();
         // now save connection
         this.connection = connection;
         this.connection.save({ last_used: new Date() }, { success: onSave.bind(this) });
@@ -459,7 +461,7 @@ var ConnectView = View.extend({
    */
   useConnection: function(connection) {
     connection = connection || this.connection;
-    app.statusbar.hide();
+    StatusAction.hide();
     metrics.track('Connection', 'used', {
       authentication: connection.authentication,
       ssl: connection.ssl,

src/app/home/collection.js

@@ -1,11 +1,13 @@
 var View = require('ampersand-view');
+var Action = require('hadron-action');
 var CollectionStatsView = require('../collection-stats');
 var DocumentView = require('../documents');
 var SchemaView = require('../schema');
 var IndexView = require('../indexes');
-var RefineBarView = require('../refine-view');
 var ExplainView = require('../explain-plan');
 var MongoDBCollection = require('../models/mongodb-collection');
+var React = require('react');
+var ReactDOM = require('react-dom');
 var NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 var _ = require('lodash');
 
@@ -15,6 +17,14 @@ var debug = require('debug')('mongodb-compass:home:collection');
 
 var collectionTemplate = require('./collection.jade');
 
+// map tab label to correct view and switch views
+var tabToViewMap = {
+  'DOCUMENTS': 'documentView',
+  'SCHEMA': 'schemaView',
+  'EXPLAIN PLAN': 'explainView',
+  'INDEXES': 'indexView'
+};
+
 var MongoDBCollectionView = View.extend({
   // modelType: 'Collection',
   template: collectionTemplate,
@@ -68,6 +78,7 @@ var MongoDBCollectionView = View.extend({
     },
     documentView: {
       hook: 'document-subview',
+      waitFor: 'ns',
       prepareView: function(el) {
         return new DocumentView({
           el: el,
@@ -78,6 +89,7 @@ var MongoDBCollectionView = View.extend({
     },
     schemaView: {
       hook: 'schema-subview',
+      waitFor: 'ns',
       prepareView: function(el) {
         return new SchemaView({
           el: el,
@@ -88,6 +100,7 @@ var MongoDBCollectionView = View.extend({
     },
     indexView: {
       hook: 'index-subview',
+      waitFor: 'ns',
       prepareView: function(el) {
         return new IndexView({
           el: el,
@@ -105,63 +118,69 @@ var MongoDBCollectionView = View.extend({
           model: this.model
         });
       }
-    },
-    refineBarView: {
-      hook: 'refine-bar-subview',
-      prepareView: function(el) {
-        var view = new RefineBarView({
-          el: el,
-          parent: this,
-          queryOptions: app.queryOptions,
-          volatileQueryOptions: app.volatileQueryOptions
-        });
-        view.on('submit', function() {
-          this.trigger('submit:query');
-        }.bind(this));
-        return view;
-      }
     }
+    // refineBarView: {
+    //   hook: 'refine-bar-subview',
+    //   prepareView: function(el) {
+    //     var view = new RefineBarView({
+    //       el: el,
+    //       parent: this,
+    //       queryOptions: app.queryOptions,
+    //       volatileQueryOptions: app.volatileQueryOptions
+    //     });
+    //     view.on('submit', function() {
+    //       this.trigger('submit:query');
+    //     }.bind(this));
+    //     return view;
+    //   }
+    // }
   },
   initialize: function() {
     this.model = new MongoDBCollection();
-    this.listenToAndRun(this.parent, 'change:ns', this.onCollectionChanged.bind(this));
+    NamespaceStore.listen( this.onCollectionChanged.bind(this) );
+    this.schemaActions = app.appRegistry.getAction('SchemaAction');
+    // this.listenToAndRun(this.parent, 'change:ns', this.onCollectionChanged.bind(this));
+  },
+  render: function() {
+    this.renderWithTemplate(this);
+    // render query bar here for now
+    var queryBarComponent = app.appRegistry.getComponent('App:QueryBar');
+    ReactDOM.render(React.createElement(queryBarComponent), this.queryByHook('refine-bar-subview'));
   },
   onTabClicked: function(e) {
     e.preventDefault();
     e.stopPropagation();
-
-    // map tab label to correct view and switch views
-    var tabToViewMap = {
-      'DOCUMENTS': 'documentView',
-      'SCHEMA': 'schemaView',
-      'EXPLAIN PLAN': 'explainView',
-      'INDEXES': 'indexView'
-    };
     this.switchView(tabToViewMap[e.target.innerText]);
   },
   switchView: function(viewStr) {
+    debug('switching to', viewStr);
     // disable all views but the active one
-    _.each(this._subviews, function(subview) {
-      subview.visible = false;
-    });
-    if (this[viewStr]) {
-      this[viewStr].visible = true;
-    }
     this.activeView = viewStr;
+    _.each(_.values(tabToViewMap), function(subview) {
+      if (!this[subview]) return;
+      if (subview === viewStr) {
+        this[viewStr].el.classList.remove('hidden');
+      } else {
+        this[subview].el.classList.add('hidden');
+      }
+    }.bind(this));
+    // Temporary hack to generate a resize when the schema is clicked.
+    if (viewStr === 'schemaView') {
+      this.schemaActions.resizeMiniCharts();
+    }
   },
   onCollectionChanged: function() {
-    this.ns = this.parent.ns;
+    this.ns = NamespaceStore.ns;
     if (!this.ns) {
       this.visible = false;
       debug('No active collection namespace so no schema has been requested yet.');
       return;
     }
     this.visible = true;
     this.model._id = this.ns;
-    // Need to keep the global state in sync.
-    NamespaceStore.ns = this.ns;
     this.model.once('sync', this.onCollectionFetched.bind(this));
     this.model.fetch();
+    Action.filterChanged(app.queryOptions.query.serialize());
   },
   onCollectionFetched: function(model) {
     this.switchView(this.activeView);

src/app/home/index.js

@@ -5,6 +5,7 @@ var IdentifyView = require('../identify');
 var CollectionView = require('./collection');
 var InstancePropertyView = require('./instance-properties');
 var CollectionListItemView = require('./collection-list-item');
+var NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 var TourView = require('../tour');
 var NetworkOptInView = require('../network-optin');
 var app = require('ampersand-app');
@@ -141,6 +142,7 @@ var HomeView = View.extend({
     }
 
     this.ns = model.getId();
+    NamespaceStore.ns = ns.ns;
     this.updateTitle(model);
     this.showNoCollectionsZeroState = false;
     this.showDefaultZeroState = false;

src/app/index.js

@@ -50,11 +50,13 @@ var Preferences = require('./models/preferences');
 var ApplicationStore = require('hadron-reflux-store').ApplicationStore;
 var User = require('./models/user');
 var Router = require('./router');
-var Statusbar = require('./statusbar');
+// var Statusbar = require('./statusbar');
 var migrateApp = require('./migrations');
 var metricsSetup = require('./metrics');
 var metrics = require('mongodb-js-metrics')();
 
+var React = require('react');
+var ReactDOM = require('react-dom');
 var AutoUpdate = require('../auto-update');
 
 var addInspectElementMenu = require('debug-menu').install;
@@ -254,15 +256,17 @@ var Application = View.extend({
       pushState: false,
       root: '/'
     });
-    app.statusbar.hide();
+    var StatusAction = app.appRegistry.getAction('StatusAction');
+    StatusAction.hide();
   },
   onFatalError: function(id, err) {
     debug('clearing client stall timeout...');
     clearTimeout(this.clientStalledTimeout);
 
     console.error('Fatal Error!: ', id, err);
     metrics.error(err);
-    app.statusbar.fatal(err);
+    var StatusAction = app.appRegistry.getAction('StatusAction');
+    StatusAction.setMessage(err);
   },
   // ms we'll wait for a `mongodb-scope-client` instance
   // to become readable before giving up and showing
@@ -317,10 +321,13 @@ var Application = View.extend({
     });
     debug('rendering statusbar...');
 
-    this.statusbar = new Statusbar({
-      el: this.queryByHook('statusbar')
-    });
-    this.statusbar.render();
+    // this.statusbar = new Statusbar({
+    //   el: this.queryByHook('statusbar')
+    // });
+    // this.statusbar.render();
+
+    this.statusComponent = app.appRegistry.getComponent('App:Status');
+    ReactDOM.render(React.createElement(this.statusComponent), this.queryByHook('statusbar'));
 
     this.autoUpdate = new AutoUpdate({
       el: this.queryByHook('auto-update')
@@ -376,10 +383,13 @@ app.extend({
       state.startRouter();
       return;
     }
-
-    app.statusbar.show({
+    var StatusAction = app.appRegistry.getAction('StatusAction');
+    StatusAction.configure({
+      visible: true,
       message: 'Retrieving connection details...',
-      staticSidebar: true
+      progressbar: true,
+      progress: 100,
+      sidebar: true
     });
 
     state.connection = new Connection({
@@ -392,9 +402,7 @@ app.extend({
         state.onFatalError('fetch connection', err);
         return;
       }
-      app.statusbar.show({
-        message: 'Connecting to MongoDB...'
-      });
+      StatusAction.setMessage('Connecting to MongoDB...');
 
       var DataService = require('mongodb-data-service');
       app.dataService = new DataService(state.connection)
@@ -434,11 +442,11 @@ app.extend({
   }
 });
 
-Object.defineProperty(app, 'statusbar', {
-  get: function() {
-    return state.statusbar;
-  }
-});
+// Object.defineProperty(app, 'statusbar', {
+//   get: function() {
+//     return state.statusbar;
+//   }
+// });
 
 Object.defineProperty(app, 'autoUpdate', {
   get: function() {

src/app/index.less

@@ -9,10 +9,7 @@
 @import "documents/index.less";
 @import "schema/index.less";
 @import "home/index.less";
-@import "minicharts/index.less";
-@import "refine-view/index.less";
 @import "sampling-message/index.less";
-@import "statusbar/index.less";
 @import "tour/index.less";
 @import "sidebar/index.less";
 @import "network-optin/index.less";
@@ -25,4 +22,9 @@
 @import "metrics/index.less";
 @import "./styles/mapbox-gl.css";
 
+// Packages
+// @todo don't hard-code these, style manager needs to handle package styles
 @import "../internal-packages/crud/styles/crud.less";
+@import "../internal-packages/status/styles/index.less";
+@import "../internal-packages/query/styles/index.less";
+@import "../internal-packages/schema/styles/index.less";

src/app/minicharts/d3fns/few.js

@@ -145,7 +145,14 @@ var minicharts_d3fns_few = function() {
 
   function chart(selection) {
     selection.each(function(data) {
-      var values = _.pluck(data, 'count');
+      var values = _.map(data, 'count');
+      _.each(data, (d, i) => {
+        data[i].xpos = _.sum(_(data)
+          .slice(0, i)
+          .map('count')
+          .value()
+        );
+      });
       var sumValues = d3.sum(values);
       var maxValue = d3.max(values);
       var percentFormat = shared.friendlyPercentFormat(maxValue / sumValues * 100);