Doc viewer perf

main.js

@@ -2,10 +2,7 @@ var server = require('scout-server');
 var debug = require('debug')('scout:main');
 
 var STATIC = process.env.WATCH_DIRECTORY || __dirname;
-debug('pointing scout-server static serving at `%s`', STATIC);
-server.start({
-  static: STATIC
-});
+server.start({});
 
 if (process.env.WATCH_DIRECTORY) {
   var watch = require('watch');
@@ -18,14 +15,14 @@ if (process.env.WATCH_DIRECTORY) {
 
   var livereload = tinyLR();
   livereload.listen(opts.port, opts.host);
-  console.log('Watching %s for changes', STATIC);
+  debug('Watching %s for changes', STATIC);
   watch.watchTree(STATIC, {
     filter: function(filename) {
       return !NODE_MODULES_REGEX.test(filename);
     },
     ignoreDotFiles: true
   }, function(files) {
-    console.log('File change detected!  Sending reload message');
+    debug('File change detected!  Sending reload message');
     livereload.changed({
       body: {
         files: files

package.json

@@ -82,6 +82,7 @@
     "octicons": "https://github.com/github/octicons/archive/v2.2.0.tar.gz",
     "phantomjs-polyfill": "0.0.1",
     "qs": "^3.1.0",
+    "raf": "^3.0.0",
     "scout-brain": "http://bin.mongodb.org/js/scout-brain/v0.0.2/scout-brain-0.0.2.tar.gz",
     "scout-client": "http://bin.mongodb.org/js/scout-client/v0.0.3/scout-client-0.0.3.tar.gz",
     "scout-server": "http://bin.mongodb.org/js/scout-server/v0.0.4/scout-server-0.0.4.tar.gz",

src/electron/window-manager.js

@@ -4,8 +4,10 @@ var BrowserWindow = require('browser-window');
 var app = require('app');
 var debug = require('debug')('scout-electron:window-manager');
 var attachMenu = require('./menu');
+var path = require('path');
 
-var DEFAULT_URL = 'http://localhost:29017/index.html#connect';
+var RESOURCES = path.resolve(__dirname, '../../');
+var DEFAULT_URL = 'file://' + path.join(RESOURCES, 'index.html#connect');
 
 var DEFAULT_WIDTH = 1024;
 var DEFAULT_HEIGHT = 700;
@@ -41,7 +43,7 @@ module.exports.create = function(opts) {
     debug('got new-window event!', event, url, frameName, disposition);
     event.preventDefault();
     module.exports.create({
-      url: url
+      url: 'file://' + RESOURCES + '/index.html' + url.replace('file://', '')
     });
   });
   return _window;

src/index.jade

@@ -5,7 +5,7 @@ html(lang='en')
     meta(http-equiv="Content-Security-Policy", content="default-src *; script-src 'self' http://localhost:35729; style-src 'self' 'unsafe-inline';")
 
     meta(name='viewport', content='initial-scale=1')
-    link(rel='stylesheet', href='index.css')
+    link(rel='stylesheet', href='index.css', charset='UTF-8')
   body
     #application
-    script(src='index.js')
+    script(src='index.js', charset='UTF-8')

src/minicharts/d3fns/boolean.js

@@ -3,7 +3,7 @@ var _ = require('lodash');
 var few = require('./few');
 var shared = require('./shared');
 
-module.exports = function(opts) {
+var minicharts_d3fns_boolean = function(opts) {
   var values = opts.data.values.toJSON();
 
   // group by true/false
@@ -41,3 +41,4 @@ module.exports = function(opts) {
   few(data, g, width, height);
 };
 
+module.exports = minicharts_d3fns_boolean;

src/minicharts/d3fns/date.js

@@ -3,6 +3,7 @@ var _ = require('lodash');
 var moment = require('moment');
 var shared = require('./shared');
 var many = require('./many');
+var raf = require('raf');
 
 require('../d3-tip')(d3);
 
@@ -14,7 +15,9 @@ function generateDefaults(n) {
   return doc;
 }
 
-module.exports = function(opts) {
+var weekdayLabels = moment.weekdays();
+
+var minicharts_d3fns_date = function(opts) {
   var values = opts.data.values.toJSON();
 
   // distinguish ObjectIDs from real dates
@@ -46,7 +49,6 @@ module.exports = function(opts) {
   var upperMargin = 20;
 
   // group by weekdays
-  var weekdayLabels = moment.weekdays();
   var weekdays = _(values)
     .groupBy(function(d) {
       return moment(d).weekday();
@@ -131,14 +133,16 @@ module.exports = function(opts) {
 
   var weekdayContainer = svg.append('g');
 
-  many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
-    bgbars: true,
-    labels: {
-      'text-anchor': 'middle',
-      text: function(d) {
-        return d.label[0];
+  raf(function() {
+    many(weekdays, weekdayContainer, width / (upperRatio + 1) - upperMargin, upperBarBottom, {
+      bgbars: true,
+      labels: {
+        'text-anchor': 'middle',
+        text: function(d) {
+          return d.label[0];
+        }
       }
-    }
+    });
   });
 
   // calendar icon
@@ -154,14 +158,15 @@ module.exports = function(opts) {
 
   var hourContainer = svg.append('g')
     .attr('transform', 'translate(' + (width / (upperRatio + 1) + upperMargin) + ', 0)');
-
-  many(hours, hourContainer, width / (upperRatio + 1) * upperRatio - upperMargin, upperBarBottom, {
-    bgbars: true,
-    labels: {
-      text: function(d, i) {
-        return i % 6 === 0 || i === 23 ? d.label : '';
+  raf(function() {
+    many(hours, hourContainer, width / (upperRatio + 1) * upperRatio - upperMargin, upperBarBottom, {
+      bgbars: true,
+      labels: {
+        text: function(d, i) {
+          return i % 6 === 0 || i === 23 ? d.label : '';
+        }
       }
-    }
+    });
   });
 
   // clock icon
@@ -175,3 +180,5 @@ module.exports = function(opts) {
     .attr('font-family', 'FontAwesome')
     .text('\uf017');
 };
+
+module.exports = minicharts_d3fns_date;

src/minicharts/d3fns/many.js

@@ -5,7 +5,7 @@ var shared = require('./shared');
 
 require('../d3-tip')(d3);
 
-module.exports = function(data, g, width, height, options) {
+var minicharts_d3fns_many = function(data, g, width, height, options) {
   options = _.defaults(options || {}, {
     bgbars: false,
     scale: false,
@@ -156,3 +156,4 @@ module.exports = function(data, g, width, height, options) {
       .text(labels.text);
   }
 };
+module.exports = minicharts_d3fns_many;

src/minicharts/d3fns/shared.js

@@ -5,7 +5,7 @@ function decimalPlaces(number) {
   return ((+number).toFixed(20)).replace(/^-?\d*\.?|0+$/g, '').length;
 }
 
-module.exports = {
+var minicharts_d3fns_shared = {
 
   margin: {
     top: 10,
@@ -33,3 +33,4 @@ module.exports = {
     };
   }
 };
+module.exports = minicharts_d3fns_shared;

src/minicharts/index.js

@@ -3,6 +3,7 @@ var AmpersandView = require('ampersand-view');
 var UniqueMinichartView = require('./unique');
 var vizFns = require('./d3fns');
 var _ = require('lodash');
+var raf = require('raf');
 
 // a wrapper around VizView to set common default values
 module.exports = AmpersandView.extend({
@@ -33,7 +34,8 @@ module.exports = AmpersandView.extend({
     } else {
       this.subview = new VizView(this.viewOptions);
     }
-
-    this.renderSubview(this.subview, this.queryByHook('minichart'));
+    raf(function() {
+      this.renderSubview(this.subview, this.queryByHook('minichart'));
+    }.bind(this));
   }
 });

src/minicharts/viz.js

@@ -1,5 +1,6 @@
 var AmpersandView = require('ampersand-view');
 var _ = require('lodash');
+var raf = require('raf');
 var $ = require('jquery');
 
 var VizView = AmpersandView.extend({
@@ -121,30 +122,19 @@ var VizView = AmpersandView.extend({
 
     // call viz function
     if (this.vizFn) {
-      this.vizFn({
+      var opts = {
         width: this.width,
         height: this.height,
         data: this.data,
         el: this.el
+      };
+      var vizFn = this.vizFn.bind(this, opts);
+      raf(function minicharts_viz_call_vizfn() {
+        vizFn();
       });
     }
     return this;
   }
-  // redraw: function() {
-  //   this._chooseDataSource();
-  //   this.data = this.transform(this.data);
-  //
-  //   this._measure();
-  //
-  //   if (this.vizFn) {
-  //     this.vizFn({
-  //       width: this.width,
-  //       height: this.height,
-  //       data: this.data,
-  //       el: this.el,
-  //     });
-  //   }
-  // }
 });
 
 module.exports = VizView;

src/sidebar/index.js

@@ -46,7 +46,9 @@ var CollectionListView = View.extend({
       click: '_onClick'
     },
     template: require('./collection-list-item.jade'),
-    _onClick: function() {
+    _onClick: function(event) {
+      event.preventDefault();
+      event.stopPropagation();
       this.parent.show(this.model);
     }
   }),

styles/index.less

@@ -7,6 +7,8 @@
 // @import "./variables.less";
 @octicons-font-path: "fonts";
 
+@fa-font-path: "fonts";
+
 // Tweaks to bootstrap
 @import "./10strap.less";
 @import "./grid-xl.less";
@@ -162,4 +164,4 @@ html, body{
 }
 .collection-stats-value {
   font-size: 14px;
-}
+}