INT-203 - arrays as types

scout-ui/gulpfile.js

@@ -71,7 +71,7 @@ gulp.task('testserver', function() {
 });
 
 gulp.task('develop', ['pages', 'assets', 'less'], function() {
-  gulp.watch(['src/{*,**/*}.less', '../scout-style/*.less'], ['less']);
+  gulp.watch(['src/{*,**}.less', '../scout-style/*.less'], ['less']);
   gulp.watch(['src/*.jade'], ['pages']);
   gulp.watch(['src/img/*', '../scout-style/images/*'], ['assets']);
 

scout-ui/package.json

@@ -49,7 +49,6 @@
     "ampersand-view-switcher": "^2.0.0",
     "bootstrap": "https://github.com/twbs/bootstrap/archive/v3.3.2.tar.gz",
     "d3": "^3.5.5",
-    "d3-tip": "^0.6.7",
     "debug": "^2.0.0",
     "domready": "^1.0.7",
     "event-stream": "^3.3.0",
@@ -61,7 +60,7 @@
     "lodash": "^3.8.0",
     "moment": "^2.8.2",
     "mongodb-extended-json": "^1.3.1",
-    "mongodb-schema": "^2.2.1",
+    "mongodb-schema": "git://github.com/mongodb-js/mongodb-schema.git#INT-203-arrays",
     "numeral": "^1.5.3",
     "octicons": "https://github.com/github/octicons/archive/v2.2.0.tar.gz",
     "phantomjs-polyfill": "0.0.1",

scout-ui/src/collection-stats/index.js

@@ -3,7 +3,7 @@ var numeral = require('numeral');
 
 var CollectionStatsView = AmpersandView.extend({
   bindings: {
-    'model._id': {
+    'model.name': {
       hook: 'name'
     },
     document_count: {

scout-ui/src/field-list/field.jade

@@ -0,0 +1,12 @@
+.schema-field.schema-field-basic
+  hr.field-divider
+  .row
+    .col-sm-4
+      .schema-field-name
+        span(data-hook='caret')
+        span(data-hook='name')
+      div(data-hook='types-subview')
+    .col-sm-7.col-sm-offset-1
+      div(data-hook='minichart-container')
+  div(data-hook='fields-subview')
+  div(data-hook='arrayfields-subview')

scout-ui/src/field-list/index.js

@@ -3,45 +3,90 @@ var TypeListView = require('./type-list');
 var MinichartView = require('../minicharts');
 var FieldCollection = require('mongodb-schema').FieldCollection;
 var ViewSwitcher = require('ampersand-view-switcher');
+var debug = require('debug')('scout-ui:field-list:index');
+var $ = require('jquery');
 var _ = require('lodash');
 
-var BasicFieldView = View.extend({
+function handleCaret(el, value, previousValue) {
+  var $el = $(el);
+  // only apply to own caret, not children carets
+  if ($el.next().text() !== this.model.name) return;
+  if (this.model.fields || this.model.arrayFields) {
+    $el.addClass('caret');
+  } else {
+    $el.removeClass('caret');
+  }
+}
+
+var FieldView = View.extend({
   props: {
-    minichartModel: 'state'
+    minichartModel: 'state',
+    expanded: {
+      type: 'boolean',
+      default: false
+    }
   },
   bindings: {
-    'model.name': [
-      {
-        hook: 'name'
-      },
-      {
-        hook: 'name',
-        type: function(el) {
-          if (this.model.getId() === '__basic__') {
-            el.classList.add('hidden');
-          }
-        }
-      }
-    ]
+    'model.name': {
+      hook: 'name'
+    },
+    'model.fields': {
+      type: handleCaret,
+      hook: 'caret'
+    },
+    'model.arrayFields': {
+      type: handleCaret,
+      hook: 'caret'
+    },
+    'expanded': {
+      type: 'booleanClass',
+      yes: 'expanded',
+      no: 'collapsed'
+    }
   },
-  template: require('./basic-field.jade'),
+  events: {
+    'click .schema-field-name': 'click',
+  },
+  template: require('./field.jade'),
   subviews: {
     types: {
-      hook: 'types-container',
+      hook: 'types-subview',
       prepareView: function(el) {
         return new TypeListView({
             el: el,
             parent: this,
             collection: this.model.types
           });
       }
+    },
+    fields: {
+      hook: 'fields-subview',
+      waitFor: 'model.fields',
+      prepareView: function(el) {
+        return new FieldListView({
+            el: el,
+            parent: this,
+            collection: this.model.fields
+          });
+      }
+    },
+    arrayFields: {
+      hook: 'arrayfields-subview',
+      waitFor: 'model.arrayFields',
+      prepareView: function(el) {
+        return new FieldListView({
+            el: el,
+            parent: this,
+            collection: this.model.arrayFields
+          });
+      }
     }
   },
   initialize: function() {
     var that = this;
     // debounce prevents excessive rendering
-    this.model.values.on('add', _.debounce(function(evt) {
-      // for now pick first type, @todo: make the type bars clickable and toggle chart
+    this.model.on('change:count', _.debounce(function() {
+      // pick first type initially
       that.switchView(that.model.types.at(0));
     }, 300));
   },
@@ -63,28 +108,6 @@ var BasicFieldView = View.extend({
       model: typeModel,
     });
     this.viewSwitcher.set(miniview);
-  }
-});
-
-var ExpandableFieldMixin = {
-  bindings: {
-    'model.name': {
-      hook: 'name'
-    },
-    'expanded': {
-      type: 'booleanClass',
-      yes: 'expanded',
-      no: 'collapsed'
-    }
-  },
-  events: {
-    'click .schema-field-name': 'click',
-  },
-  props: {
-    expanded: {
-      type: 'boolean',
-      default: false
-    }
   },
   click: function(evt) {
     // @todo: persist state of open nodes
@@ -93,27 +116,7 @@ var ExpandableFieldMixin = {
     evt.preventDefault();
     evt.stopPropagation();
     return false;
-  },
-  subviews: {
-    fields: {
-      hook: 'fields-container',
-      prepareView: function(el) {
-        return new FieldListView({
-            el: el,
-            parent: this,
-            collection: this.model.fields
-          });
-      }
-    }
   }
-};
-
-var EmbeddedArrayFieldView = View.extend(ExpandableFieldMixin, {
-  template: require('./array-field.jade')
-});
-
-var EmbeddedDocumentFieldView = View.extend(ExpandableFieldMixin, {
-  template: require('./object-field.jade')
 });
 
 var FieldListView = View.extend({
@@ -123,16 +126,7 @@ var FieldListView = View.extend({
   template: require('./index.jade'),
   render: function() {
     this.renderWithTemplate();
-    this.renderCollection(this.collection, function(options) {
-      var type = options.model.type;
-      if (type === 'Array') {
-        return new EmbeddedArrayFieldView(options);
-      }
-      if (type === 'Object') {
-        return new EmbeddedDocumentFieldView(options);
-      }
-      return new BasicFieldView(options);
-    }, this.queryByHook('fields'));
+    this.renderCollection(this.collection, FieldView, this.queryByHook('fields'));
   }
 });
 

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

@@ -42,16 +42,17 @@ module.exports = AmpersandView.extend({
     }
   },
   initialize: function() {
-    this.listenTo(this.model, 'change:probability', _.debounce(function() {
+    this.listenTo(this.model, 'change:count', _.debounce(function() {
       $(this.el).tooltip({
         title: format('%s (%s)', this.model.getId(), numeral(this.model.probability).format('%'))
       });
     }.bind(this), 300));
   },
   template: require('./type-list-item.jade'),
   typeClicked: function() {
-    if (this.parent.parent.minichartModel.cid !== this.model.cid) {
-      this.parent.parent.switchView(this.model);
+    var fieldList = this.parent.parent;
+    if (!fieldList.minichartModel || (fieldList.minichartModel.modelType !== this.model.modelType)) {
+      fieldList.switchView(this.model);
     }
   }
 

scout-ui/src/field-list/type-list.js

@@ -5,6 +5,6 @@ module.exports = AmpersandView.extend({
   template: require('./type-list.jade'),
   render: function() {
     this.renderWithTemplate({});
-    this.renderCollection(this.collection, TypeListItem, this.queryByHook('types'));
+    this.renderCollection(this.collection.sort(), TypeListItem, this.queryByHook('types'));
   }
 });

scout-ui/src/home/collection.js

@@ -5,7 +5,6 @@ var CollectionStatsView = require('../collection-stats');
 var FieldListView = require('../field-list');
 var DocumentListView = require('../document-view');
 var RefineBarView = require('../refine-view');
-
 var debug = require('debug')('scout-ui:home:collection');
 var $ = require('jquery');
 
@@ -32,7 +31,7 @@ module.exports = AmpersandView.extend({
     'click .splitter': 'onSplitterClick',
   },
   bindings: {
-    'model._id': {
+    'model.name': {
       hook: 'name'
     },
     'sidebarWidth': {

scout-ui/src/home/index.js

@@ -5,7 +5,6 @@ var debug = require('debug')('scout-ui:home');
 var app = require('ampersand-app');
 var format = require('util').format;
 var SidebarView = require('../sidebar');
-var FieldListView = require('../field-list');
 var CollectionView = require('./collection');
 
 require('bootstrap/js/dropdown');