INT-404: Make everything fast and synchronized

Author: imlucas

src/app.js

@@ -62,22 +62,6 @@ var Application = View.extend({
   events: {
     'click a': 'onLinkClick'
   },
-  derived: {
-    /**
-     * Based on the active connection, this is how models will talk to `scout-server`.
-     * @see scout-client
-     */
-    client: {
-      deps: ['connection.uri'],
-      fn: function() {
-        var c = createClient({
-          seed: this.connection.uri
-        });
-        debug('created scout client', c);
-        return c;
-      }
-    }
-  },
   /**
    * We have what we need, we can now start our router and show the appropriate page!
    */

src/field-list/index.js

@@ -1,10 +1,11 @@
 var View = require('ampersand-view');
 var TypeListView = require('./type-list');
 var MinichartView = require('../minicharts');
-var FieldCollection = require('mongodb-schema').FieldCollection;
 var ViewSwitcher = require('ampersand-view-switcher');
 var $ = require('jquery');
+var debug = require('debug')('scout:field-list');
 var _ = require('lodash');
+var SampledSchema = require('../models/sampled-schema');
 
 function handleCaret(el) {
   var $el = $(el);
@@ -20,11 +21,15 @@ function handleCaret(el) {
 var FieldListView;
 
 var FieldView = View.extend({
-  props: {
-    minichartModel: 'state',
+  session: {
     expanded: {
       type: 'boolean',
       default: false
+    },
+    type_model: 'state',
+    visible: {
+      type: 'boolean',
+      default: false
     }
   },
   bindings: {
@@ -43,6 +48,10 @@ var FieldView = View.extend({
       type: 'booleanClass',
       yes: 'expanded',
       no: 'collapsed'
+    },
+    visible: {
+      type: 'booleanClass',
+      no: 'hidden'
     }
   },
   events: {
@@ -52,11 +61,12 @@ var FieldView = View.extend({
   subviews: {
     types: {
       hook: 'types-subview',
+      waitFor: 'visible',
       prepareView: function(el) {
         return new TypeListView({
           el: el,
           parent: this,
-          collection: this.model.types
+          collection: this.model.types.sort()
         });
       }
     },
@@ -84,50 +94,55 @@ var FieldView = View.extend({
     }
   },
   initialize: function() {
-    var that = this;
-    // debounce prevents excessive rendering
-    this.model.on('change:count', _.debounce(function() {
-      // pick first type initially
-      that.switchView(that.model.types.at(0));
-    }, 300));
+    this.listenTo(this, 'change:visible', this.renderMinicharts);
   },
   render: function() {
     this.renderWithTemplate(this);
     this.viewSwitcher = new ViewSwitcher(this.queryByHook('minichart-container'));
-    if (this.model.types.length > 0) {
-      this.switchView(this.model.types.at(0));
-    }
   },
-  switchView: function(typeModel) {
-    var type = typeModel.getId().toLowerCase();
-
-    // @todo currently only support boolean, number, date, category
-    if (['objectid', 'boolean', 'number', 'date', 'string'].indexOf(type) === -1) return;
+  renderMinicharts: function() {
+    this.type_model = this.type_model || this.model.types.at(0);
 
-    this.minichartModel = typeModel;
+    debug('setting miniview for type_model_id `%s`', this.type_model.getId());
     var miniview = new MinichartView({
-      model: typeModel
+      model: this.type_model
     });
     this.viewSwitcher.set(miniview);
+
+    // _.each(this._subviews, function(subview) {
+    //   subview.visible = true;
+    //   debugger;
+    // });
   },
   click: function(evt) {
-    // @todo: persist state of open nodes
     this.toggle('expanded');
-
     evt.preventDefault();
     evt.stopPropagation();
-    return false;
   }
 });
 
 FieldListView = View.extend({
-  collections: {
-    collection: FieldCollection
+  session: {
+    field_collection_view: 'view'
   },
   template: require('./index.jade'),
+  initialize: function() {
+    if (this.collection.parent instanceof SampledSchema) {
+      this.listenTo(this.collection.parent, 'sync', this.makeFieldVisible);
+    } else {
+      this.listenTo(this.parent, 'change:visible', this.makeFieldVisible);
+    }
+  },
+  makeFieldVisible: function() {
+    var views = this.field_collection_view.views;
+    _.each(views, function(field_view) {
+      field_view.visible = true;
+    });
+  },
   render: function() {
     this.renderWithTemplate();
-    this.renderCollection(this.collection, FieldView, this.queryByHook('fields'));
+    this.field_collection_view = this.renderCollection(this.collection,
+      FieldView, this.queryByHook('fields'));
   }
 });
 

src/field-list/type-list-item.js

@@ -1,9 +1,7 @@
 var View = require('ampersand-view');
 var format = require('util').format;
-var _ = require('lodash');
 var numeral = require('numeral');
 var tooltipMixin = require('../tooltip-mixin');
-var $ = require('jquery');
 
 module.exports = View.extend(tooltipMixin, {
   template: require('./type-list-item.jade'),
@@ -19,35 +17,46 @@ module.exports = View.extend(tooltipMixin, {
           el.classList.add('schema-field-type-' + this.model.getId().toLowerCase());
         }
       }
-    ]
+    ],
+    probability_percentage: {
+      hook: 'bar',
+      type: function(el) {
+        el.style.width = this.probability_percentage;
+      }
+    },
+    tooltip_message: {
+      type: function() {
+        // need to set `title` and `data-original-title` due to bug in bootstrap's tooltip
+        // @see https://github.com/twbs/bootstrap/issues/14769
+        this.tooltip({
+          title: this.tooltip_message
+        }).attr('data-original-title', this.tooltip_message);
+      }
+    }
+  },
+  derived: {
+    probability_percentage: {
+      deps: ['model.probability'],
+      fn: function() {
+        return numeral(this.model.probability).format('%');
+      }
+    },
+    tooltip_message: {
+      deps: ['probability_percentage'],
+      fn: function() {
+        return format('%s (%s)', this.model.getId(), this.probability_percentage);
+      }
+    }
   },
   events: {
     'click .schema-field-wrapper': 'typeClicked'
   },
-  initialize: function() {
-    this.listenTo(this.model, 'change:probability', _.debounce(this.update.bind(this), 300));
-  },
-  update: function() {
-    var tooltext = format('%s (%s)', this.model.getId(),
-      numeral(this.model.probability).format('%'));
-    // need to set `title` and `data-original-title` due to bug in bootstrap's tooltip
-    // @see https://github.com/twbs/bootstrap/issues/14769
-    this.tooltip({
-      title: tooltext
-    }).attr('data-original-title', tooltext);
-    $(this.queryByHook('bar')).css({
-      width: Math.floor(this.model.probability * 100) + '%'
-    });
-  },
   typeClicked: function() {
-    var fieldList = this.parent.parent;
-    if (!fieldList.minichartModel || fieldList.minichartModel.modelType !== this.model.modelType) {
-      fieldList.switchView(this.model);
-    }
+    var fieldView = this.parent.parent;
+    fieldView.type_model = this.model;
+    fieldView.renderMinicharts();
   },
   render: function() {
     this.renderWithTemplate(this);
-    this.update();
-    return this;
   }
 });

src/field-list/type-list.js

@@ -4,8 +4,7 @@ var TypeListItem = require('./type-list-item');
 module.exports = View.extend({
   template: require('./type-list.jade'),
   render: function() {
-    this.renderWithTemplate({});
-    this.collection.sort();
+    this.renderWithTemplate();
     this.renderCollection(this.collection, TypeListItem, this.queryByHook('types'));
   }
 });

src/home/index.js

@@ -18,7 +18,6 @@ var HomeView = View.extend({
     }
   },
   initialize: function() {
-    app.statusbar.watch(this, app.instance);
     this.listenTo(app.instance, 'sync', this.onInstanceFetched);
     this.listenTo(app.connection, 'change:name', this.updateTitle);
     this.once('change:rendered', this.onRendered);