INT-1663: Reactify schema

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);