fix(ui): mixed types tooltip

- debounce to add tooltip at the right time

Author: imlucas

scout-ui/package.json

@@ -51,23 +51,23 @@
     "ampersand-view": "^7.0.1",
     "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",
     "flatnest": "^0.2.2",
     "font-awesome": "https://github.com/FortAwesome/Font-Awesome/archive/v4.3.0.tar.gz",
     "jade": "^1.9.2",
     "jquery": "^2.1.1",
+    "lodash": "^3.8.0",
     "moment": "^2.8.2",
+    "mongodb-schema": "git://github.com/mongodb-js/mongodb-schema.git#ampersand",
     "numeral": "^1.5.3",
     "octicons": "https://github.com/github/octicons/archive/v2.2.0.tar.gz",
     "phantomjs-polyfill": "0.0.1",
     "qs": "^2.2.4",
-    "underscore": "^1.6.0",
-    "mongodb-schema": "git://github.com/mongodb-js/mongodb-schema.git#ampersand",
-    "d3": "^3.5.5",
-    "d3-tip": "^0.6.7",
-    "lodash": "^3.8.0"
+    "underscore": "^1.6.0"
   },
   "devDependencies": {
     "browserify": "^9.0.3",

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

@@ -4,7 +4,6 @@ var MinichartView = require('../minicharts');
 var FieldCollection = require('mongodb-schema').FieldCollection;
 var ViewSwitcher = require('ampersand-view-switcher');
 var _ = require('lodash');
-var debug = require('debug')('scout-ui:field-list');
 
 var BasicFieldView = View.extend({
   bindings: {
@@ -38,10 +37,10 @@ var BasicFieldView = View.extend({
   initialize: function() {
     var that = this;
     // the debounce cuts down computation time by a factor of 5-10 here
-    this.model.on('change', _.debounce(function(model) {
+    this.model.types.on('sync', _.debounce(function() {
       // for now pick first type, @todo: make the type bars clickable and toggle chart
-      that.switchView(model.types.at(0));
-    }, 100));
+      that.switchView(that.model.types.at(0));
+    }, 300));
   },
   render: function() {
     this.renderWithTemplate(this);

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

@@ -1,6 +1,8 @@
 var AmpersandView = require('ampersand-view');
 var $ = require('jquery');
 var format = require('util').format;
+var _ = require('underscore');
+var numeral = require('numeral');
 
 require('bootstrap/js/tooltip');
 
@@ -21,18 +23,27 @@ module.exports = AmpersandView.extend({
       {
         hook: 'bar',
         type: function(el) {
-          var percent = Math.min(this.model.probability * 100, 100);
           $(el).css({
-            width: percent + '%'
+            width: Math.floor(this.model.probability * 100) + '%'
           });
-          if (percent) {
-            $(el).tooltip({
-              title: format('%s (%d%)', this.model.getId(), percent)
-            });
-          }
         }
       }
     ]
   },
+  derived: {
+    percent: {
+      deps: ['model.probability'],
+      fn: function() {
+        return this.model.probability;
+      }
+    }
+  },
+  initialize: function() {
+    this.listenTo(this.model, 'change:probability', _.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')
 });

scout-ui/src/home/index.less

@@ -102,6 +102,10 @@
       display: inline-block;
     }
 
+    &.schema-field-basic {
+      min-height: 141px;
+    }
+
     &.schema-field-object, &.schema-field-array {
       .schema-field-name {
         cursor: pointer;