From f32f7ed54122a569cdf2bbd5c7b8639671dc9719 Mon Sep 17 00:00:00 2001 From: Lucas Hrabovsky Date: Fri, 10 Jul 2015 20:19:12 -0400 Subject: [PATCH 1/4] Add raf + minichart speedups - @see http://npm.im/raf - Add function names to make flame graphs easier to read - date minicharts were each always re-listing weekdays which are a const - date mini charts embed two other mini charts, each of which can be rendered on their own animation frames - defer rendering of minichart subviews and defer again before calling d3 --- package.json | 1 + src/minicharts/d3fns/boolean.js | 3 ++- src/minicharts/d3fns/date.js | 39 +++++++++++++++++++-------------- src/minicharts/d3fns/many.js | 3 ++- src/minicharts/d3fns/shared.js | 3 ++- src/minicharts/index.js | 6 +++-- src/minicharts/viz.js | 22 +++++-------------- 7 files changed, 40 insertions(+), 37 deletions(-) diff --git a/package.json b/package.json index 41ef0d0b976..abf8ff73302 100644 --- a/package.json +++ b/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", diff --git a/src/minicharts/d3fns/boolean.js b/src/minicharts/d3fns/boolean.js index bc04139a1c4..a4266536e00 100644 --- a/src/minicharts/d3fns/boolean.js +++ b/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; diff --git a/src/minicharts/d3fns/date.js b/src/minicharts/d3fns/date.js index 56c01a53306..12d7c34e5d8 100644 --- a/src/minicharts/d3fns/date.js +++ b/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; diff --git a/src/minicharts/d3fns/many.js b/src/minicharts/d3fns/many.js index 5f9f7ee8afd..c9d860abaaa 100644 --- a/src/minicharts/d3fns/many.js +++ b/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; diff --git a/src/minicharts/d3fns/shared.js b/src/minicharts/d3fns/shared.js index af1ef1801a5..5e68b7258c5 100644 --- a/src/minicharts/d3fns/shared.js +++ b/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; diff --git a/src/minicharts/index.js b/src/minicharts/index.js index 6318c0d0202..9062b2fb3e8 100644 --- a/src/minicharts/index.js +++ b/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)); } }); diff --git a/src/minicharts/viz.js b/src/minicharts/viz.js index 8577c789516..0a654e7ebf0 100644 --- a/src/minicharts/viz.js +++ b/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; From 7857e89df6329f660d03fe78eb637ebaafe4d5f1 Mon Sep 17 00:00:00 2001 From: Lucas Hrabovsky Date: Fri, 10 Jul 2015 21:13:56 -0400 Subject: [PATCH 2/4] serve frontend via file:// instead of http:// - puts much less pressure on the renderer processes - think of this like making nginx serve your static content instead of the application --- main.js | 9 +++------ src/electron/window-manager.js | 6 ++++-- src/index.jade | 4 ++-- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index 124d73ff0f8..1c245dcacec 100644 --- a/main.js +++ b/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 diff --git a/src/electron/window-manager.js b/src/electron/window-manager.js index 63880f8580e..387b590b1a2 100644 --- a/src/electron/window-manager.js +++ b/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; diff --git a/src/index.jade b/src/index.jade index dccfef5c5dc..322eab0d4e2 100644 --- a/src/index.jade +++ b/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') From 1ceafa8d33898ac8ff1fb8eb4f44b7ea07bc7596 Mon Sep 17 00:00:00 2001 From: Lucas Hrabovsky Date: Fri, 10 Jul 2015 21:15:07 -0400 Subject: [PATCH 3/4] Fix onClick bug that was making the app act crazy pants The click was bubbling all the way up to the router. --- src/sidebar/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/sidebar/index.js b/src/sidebar/index.js index 33c809fbfe0..97b90c2b84e 100644 --- a/src/sidebar/index.js +++ b/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); } }), From d0851226e92b98e7f2a8c9fad4192b33f925f9e7 Mon Sep 17 00:00:00 2001 From: Lucas Hrabovsky Date: Fri, 10 Jul 2015 21:18:18 -0400 Subject: [PATCH 4/4] fix font awesome config path MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit No idea how this has been working all this time… --- styles/index.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/index.less b/styles/index.less index 8ce3af9d4df..01f80703b85 100644 --- a/styles/index.less +++ b/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; -} \ No newline at end of file +}