From 376fa8a3afbd1634c53352fae44242b110b0c62d Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Thu, 11 Jun 2015 20:24:51 +1000
Subject: [PATCH 1/9] WIP: added refine query model and view

refine view validates objects on input changes, updates the refineQuery state on Refine button click, which triggers a new schema.fetch(..).
---
 scout-ui/src/home/collection.jade   |  1 +
 scout-ui/src/home/index.js          | 29 ++++++++++----
 scout-ui/src/index.js               |  3 ++
 scout-ui/src/index.less             |  1 +
 scout-ui/src/models/index.js        |  4 +-
 scout-ui/src/models/refine.js       | 38 ++++++++++++++++++
 scout-ui/src/refine-view/index.jade |  6 +++
 scout-ui/src/refine-view/index.js   | 60 +++++++++++++++++++++++++++++
 scout-ui/src/refine-view/index.less |  9 +++++
 9 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 scout-ui/src/models/refine.js
 create mode 100644 scout-ui/src/refine-view/index.jade
 create mode 100644 scout-ui/src/refine-view/index.js
 create mode 100644 scout-ui/src/refine-view/index.less

diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade
index 0daa241e994..6f177db2eb5 100644
--- a/scout-ui/src/home/collection.jade
+++ b/scout-ui/src/home/collection.jade
@@ -3,4 +3,5 @@
     .panel-heading
       h3(data-hook='name')
     .panel-body
+      div(data-hook='refine-bar')
       div(data-hook='fields-container')
diff --git a/scout-ui/src/home/index.js b/scout-ui/src/home/index.js
index a53dbd43f63..b404702cb9c 100644
--- a/scout-ui/src/home/index.js
+++ b/scout-ui/src/home/index.js
@@ -5,8 +5,8 @@ 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 RefineBarView = require('../refine-view');
 
 require('bootstrap/js/dropdown');
 require('bootstrap/js/collapse');
@@ -26,23 +26,38 @@ var CollectionView = AmpersandView.extend({
 
     this.schema.ns = this.model._id;
     this.listenTo(this.schema, 'error', this.onError);
-    this.schema.fetch();
+    this.listenTo(app.refineQuery, 'change:query', this.onRefine);
+    this.schema.fetch(app.refineQuery.serialize());
   },
   template: require('./collection.jade'),
   onError: function(schema, err) {
     // @todo: Figure out a good way to handle this (server is probably crashed).
     console.error('Error getting schema: ', err);
   },
+  onRefine: function(evt) {
+    debug('sample refined, query is now:', JSON.stringify(app.refineQuery.serialize()));
+    this.schema.fetch(app.refineQuery.serialize());
+  },
   subviews: {
+    refinebar: {
+      hook: 'refine-bar',
+      prepareView: function(el) {
+        return new RefineBarView({
+          el: el,
+          parent: this,
+          model: app.refineQuery
+        });
+      }
+    },
     fields: {
       waitFor: 'schema.fields',
       hook: 'fields-container',
       prepareView: function(el) {
         return new FieldListView({
-            el: el,
-            parent: this,
-            collection: this.schema.fields
-          });
+          el: el,
+          parent: this,
+          collection: this.schema.fields
+        });
       }
     }
   }
@@ -76,7 +91,7 @@ module.exports = AmpersandView.extend({
       this.showCollection(current);
     });
 
-    this.listenTo(this, 'change:rendered', this.onRendered);
+    this.once('change:rendered', this.onRendered);
     this.model.fetch();
   },
   onRendered: function() {
diff --git a/scout-ui/src/index.js b/scout-ui/src/index.js
index df86be14527..35e4f3be398 100644
--- a/scout-ui/src/index.js
+++ b/scout-ui/src/index.js
@@ -10,6 +10,7 @@ var domReady = require('domready');
 var ViewSwitcher = require('ampersand-view-switcher');
 var qs = require('qs');
 var Router = require('./router');
+var RefineQuery = require('./models/refine');
 
 var PageContainer = AmpersandView.extend({
   template: '<div id="application"><div class="page-container" data-hook="page-container"></div></div>',
@@ -48,12 +49,14 @@ var PageContainer = AmpersandView.extend({
 });
 
 var StatusbarView = require('./statusbar');
+
 app.extend({
   /**
    * init URL handlers and the history tracker.
    */
   router: new Router(),
   statusbar: new StatusbarView(),
+  refineQuery: new RefineQuery(),
   currentPage: null,
   init: function() {
     domReady(function() {
diff --git a/scout-ui/src/index.less b/scout-ui/src/index.less
index 428d3226761..d3ec30bb514 100644
--- a/scout-ui/src/index.less
+++ b/scout-ui/src/index.less
@@ -4,3 +4,4 @@
 // Components
 @import "./src/home/index.less";
 @import "./src/minicharts/index.less";
+@import "./src/refine-view/index.less";
diff --git a/scout-ui/src/models/index.js b/scout-ui/src/models/index.js
index 305bd99cf6e..156dae4a763 100644
--- a/scout-ui/src/models/index.js
+++ b/scout-ui/src/models/index.js
@@ -12,6 +12,7 @@ var types = brain.types;
 var _ = require('underscore');
 var es = require('event-stream');
 var Schema = require('mongodb-schema').Schema;
+var RefineQuery = require('./refine');
 
 // Yay!  Use the API from the devtools console.
 window.scout = client;
@@ -149,5 +150,6 @@ module.exports = {
     }
   }, WithScout),
   SampledDocumentCollection: SampledDocumentCollection,
-  SampledSchema: SampledSchema
+  SampledSchema: SampledSchema,
+  RefineQuery: RefineQuery
 };
diff --git a/scout-ui/src/models/refine.js b/scout-ui/src/models/refine.js
new file mode 100644
index 00000000000..0bc992648a5
--- /dev/null
+++ b/scout-ui/src/models/refine.js
@@ -0,0 +1,38 @@
+var AmpersandState = require('ampersand-state');
+var app = require('ampersand-app');
+
+module.exports = AmpersandState.extend({
+  props: {
+    query: {
+      type: 'object',
+      default: function() {
+        return {};
+      }
+    },
+    sort: {
+      type: 'object',
+      default: function() {
+        return {
+          '_id': -1
+        };
+      }
+    },
+    limit: {
+      type: 'number',
+      default: 10000,
+    },
+    skip: {
+      type: 'number',
+      default: 0
+    }
+  },
+  derived: {
+    queryString: {
+      deps: ['query'],
+      fn: function() {
+        return JSON.stringify(this.query);
+      }
+    }
+  }
+});
+
diff --git a/scout-ui/src/refine-view/index.jade b/scout-ui/src/refine-view/index.jade
new file mode 100644
index 00000000000..c92847d0285
--- /dev/null
+++ b/scout-ui/src/refine-view/index.jade
@@ -0,0 +1,6 @@
+.refine-view-container
+  form
+    .input-group
+      input#refineInput.form-control(type='text', data-hook='refine-input')
+      span.input-group-btn
+        button.btn.btn-default(type='button', data-hook='refine-button') Refine
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
new file mode 100644
index 00000000000..b732293bd5d
--- /dev/null
+++ b/scout-ui/src/refine-view/index.js
@@ -0,0 +1,60 @@
+var AmpersandView = require('ampersand-view');
+var debug = require('debug')('scout-ui:refine-view:index');
+var $ = require('jquery');
+var app = require('ampersand-app');
+
+module.exports = AmpersandView.extend({
+  template: require('./index.jade'),
+  props: {
+    valid: {
+      type: 'boolean',
+      default: true
+    }
+  },
+  bindings: {
+    'model.queryString': {
+      type: 'value',
+      hook: 'refine-input'
+    },
+    'valid': [
+      // red input border while query is invalid
+      {
+        type: 'booleanClass',
+        hook: 'refine-input',
+        yes: 'valid',
+        no: 'invalid'
+      },
+      // disable button while query is invalid
+      {
+        type: 'booleanAttribute',
+        hook: 'refine-button',
+        no: 'disabled',
+        yes: null
+      }
+    ]
+  },
+  events: {
+    'click [data-hook=refine-button]': 'buttonClicked',
+    'input [data-hook=refine-input]': 'inputChanged'
+  },
+  inputChanged: function(evt) {
+    // validate user input on the fly
+    var queryStr = $(this.queryByHook('refine-input')).val();
+    try {
+      JSON.parse(queryStr);
+    } catch (e) {
+      this.valid = false;
+      return;
+    }
+    this.valid = true;
+  },
+  buttonClicked: function(evt) {
+    var queryStr = $(this.queryByHook('refine-input')).val();
+    // make sure it's a valid query (@todo use EJSON)
+    var queryObj = JSON.parse(queryStr);
+    // remove current collection view?
+    // app.currentPage.switcher.current.remove();
+
+    app.refineQuery.query = queryObj;
+  }
+});
diff --git a/scout-ui/src/refine-view/index.less b/scout-ui/src/refine-view/index.less
new file mode 100644
index 00000000000..f30b82488f8
--- /dev/null
+++ b/scout-ui/src/refine-view/index.less
@@ -0,0 +1,9 @@
+.refine-view-container {
+  input {
+    font-family: "Source Code Pro", sans-serif;
+  }
+
+  input.invalid {
+    border-color: @alertRed;
+  }
+}

From 3a0aa90b3c3289062a97eb838c2522ceeb08818e Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Fri, 12 Jun 2015 10:23:57 +0800
Subject: [PATCH 2/9] renamed refineQuery to queryOptions

---
 scout-ui/src/home/index.js                          | 10 +++++-----
 scout-ui/src/index.js                               |  7 +++++--
 scout-ui/src/models/index.js                        |  4 ++--
 scout-ui/src/models/{refine.js => query-options.js} | 10 ++++------
 scout-ui/src/refine-view/index.js                   |  2 +-
 5 files changed, 17 insertions(+), 16 deletions(-)
 rename scout-ui/src/models/{refine.js => query-options.js} (84%)

diff --git a/scout-ui/src/home/index.js b/scout-ui/src/home/index.js
index b404702cb9c..5093ecb0f88 100644
--- a/scout-ui/src/home/index.js
+++ b/scout-ui/src/home/index.js
@@ -26,8 +26,8 @@ var CollectionView = AmpersandView.extend({
 
     this.schema.ns = this.model._id;
     this.listenTo(this.schema, 'error', this.onError);
-    this.listenTo(app.refineQuery, 'change:query', this.onRefine);
-    this.schema.fetch(app.refineQuery.serialize());
+    this.listenTo(app.queryOptions, 'change:query', this.onRefine);
+    this.schema.fetch(app.queryOptions.serialize());
   },
   template: require('./collection.jade'),
   onError: function(schema, err) {
@@ -35,8 +35,8 @@ var CollectionView = AmpersandView.extend({
     console.error('Error getting schema: ', err);
   },
   onRefine: function(evt) {
-    debug('sample refined, query is now:', JSON.stringify(app.refineQuery.serialize()));
-    this.schema.fetch(app.refineQuery.serialize());
+    debug('sample refined, query is now:', JSON.stringify(app.queryOptions.serialize()));
+    this.schema.fetch(app.queryOptions.serialize());
   },
   subviews: {
     refinebar: {
@@ -45,7 +45,7 @@ var CollectionView = AmpersandView.extend({
         return new RefineBarView({
           el: el,
           parent: this,
-          model: app.refineQuery
+          model: app.queryOptions
         });
       }
     },
diff --git a/scout-ui/src/index.js b/scout-ui/src/index.js
index 35e4f3be398..70f28c79fe1 100644
--- a/scout-ui/src/index.js
+++ b/scout-ui/src/index.js
@@ -10,7 +10,7 @@ var domReady = require('domready');
 var ViewSwitcher = require('ampersand-view-switcher');
 var qs = require('qs');
 var Router = require('./router');
-var RefineQuery = require('./models/refine');
+var QueryOptions = require('./models/query-options');
 
 var PageContainer = AmpersandView.extend({
   template: '<div id="application"><div class="page-container" data-hook="page-container"></div></div>',
@@ -56,7 +56,7 @@ app.extend({
    */
   router: new Router(),
   statusbar: new StatusbarView(),
-  refineQuery: new RefineQuery(),
+  queryOptions: new QueryOptions(),
   currentPage: null,
   init: function() {
     domReady(function() {
@@ -102,4 +102,7 @@ app.extend({
   }
 });
 
+// for debugging purposes
+window.app = app;
+
 module.exports = app.init();
diff --git a/scout-ui/src/models/index.js b/scout-ui/src/models/index.js
index 156dae4a763..21d8800a311 100644
--- a/scout-ui/src/models/index.js
+++ b/scout-ui/src/models/index.js
@@ -12,7 +12,7 @@ var types = brain.types;
 var _ = require('underscore');
 var es = require('event-stream');
 var Schema = require('mongodb-schema').Schema;
-var RefineQuery = require('./refine');
+var QueryOptions = require('./query-options');
 
 // Yay!  Use the API from the devtools console.
 window.scout = client;
@@ -151,5 +151,5 @@ module.exports = {
   }, WithScout),
   SampledDocumentCollection: SampledDocumentCollection,
   SampledSchema: SampledSchema,
-  RefineQuery: RefineQuery
+  QueryOptions: QueryOptions
 };
diff --git a/scout-ui/src/models/refine.js b/scout-ui/src/models/query-options.js
similarity index 84%
rename from scout-ui/src/models/refine.js
rename to scout-ui/src/models/query-options.js
index 0bc992648a5..450e67290c9 100644
--- a/scout-ui/src/models/refine.js
+++ b/scout-ui/src/models/query-options.js
@@ -1,14 +1,9 @@
 var AmpersandState = require('ampersand-state');
 var app = require('ampersand-app');
+var TheQueryBar = require('the-query-bar/models');
 
 module.exports = AmpersandState.extend({
   props: {
-    query: {
-      type: 'object',
-      default: function() {
-        return {};
-      }
-    },
     sort: {
       type: 'object',
       default: function() {
@@ -26,6 +21,9 @@ module.exports = AmpersandState.extend({
       default: 0
     }
   },
+  children: {
+    query: TheQueryBar.Query
+  },
   derived: {
     queryString: {
       deps: ['query'],
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
index b732293bd5d..7950c456cae 100644
--- a/scout-ui/src/refine-view/index.js
+++ b/scout-ui/src/refine-view/index.js
@@ -55,6 +55,6 @@ module.exports = AmpersandView.extend({
     // remove current collection view?
     // app.currentPage.switcher.current.remove();
 
-    app.refineQuery.query = queryObj;
+    app.queryOptions.query = queryObj;
   }
 });

From abb4e547e2924495322253da65b5bda00003d2bc Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Fri, 12 Jun 2015 10:26:06 +0800
Subject: [PATCH 3/9] removing dependencies on the-query-bar for now

---
 scout-ui/src/models/query-options.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/scout-ui/src/models/query-options.js b/scout-ui/src/models/query-options.js
index 450e67290c9..0bc992648a5 100644
--- a/scout-ui/src/models/query-options.js
+++ b/scout-ui/src/models/query-options.js
@@ -1,9 +1,14 @@
 var AmpersandState = require('ampersand-state');
 var app = require('ampersand-app');
-var TheQueryBar = require('the-query-bar/models');
 
 module.exports = AmpersandState.extend({
   props: {
+    query: {
+      type: 'object',
+      default: function() {
+        return {};
+      }
+    },
     sort: {
       type: 'object',
       default: function() {
@@ -21,9 +26,6 @@ module.exports = AmpersandState.extend({
       default: 0
     }
   },
-  children: {
-    query: TheQueryBar.Query
-  },
   derived: {
     queryString: {
       deps: ['query'],

From 1ba0ba2ac68f0be8f79507ae0fb9200ade90dc2c Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Wed, 17 Jun 2015 11:02:17 +1000
Subject: [PATCH 4/9] use bootstrap's has-error class instead of homemade

---
 scout-ui/src/refine-view/index.jade | 2 +-
 scout-ui/src/refine-view/index.js   | 6 +++---
 scout-ui/src/refine-view/index.less | 4 ----
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/scout-ui/src/refine-view/index.jade b/scout-ui/src/refine-view/index.jade
index c92847d0285..37e0ae66403 100644
--- a/scout-ui/src/refine-view/index.jade
+++ b/scout-ui/src/refine-view/index.jade
@@ -1,6 +1,6 @@
 .refine-view-container
   form
-    .input-group
+    .input-group(data-hook='refine-input-group')
       input#refineInput.form-control(type='text', data-hook='refine-input')
       span.input-group-btn
         button.btn.btn-default(type='button', data-hook='refine-button') Refine
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
index 7950c456cae..7e782590ae7 100644
--- a/scout-ui/src/refine-view/index.js
+++ b/scout-ui/src/refine-view/index.js
@@ -20,9 +20,9 @@ module.exports = AmpersandView.extend({
       // red input border while query is invalid
       {
         type: 'booleanClass',
-        hook: 'refine-input',
-        yes: 'valid',
-        no: 'invalid'
+        hook: 'refine-input-group',
+        yes: '',
+        no: 'has-error'
       },
       // disable button while query is invalid
       {
diff --git a/scout-ui/src/refine-view/index.less b/scout-ui/src/refine-view/index.less
index f30b82488f8..34939ce14c7 100644
--- a/scout-ui/src/refine-view/index.less
+++ b/scout-ui/src/refine-view/index.less
@@ -2,8 +2,4 @@
   input {
     font-family: "Source Code Pro", sans-serif;
   }
-
-  input.invalid {
-    border-color: @alertRed;
-  }
 }

From 05e9861aa29422af5b1a33b096dfd23abdcdbfcb Mon Sep 17 00:00:00 2001
From: Lucas Hrabovsky <hrabovsky.lucas@gmail.com>
Date: Thu, 18 Jun 2015 18:31:05 -0400
Subject: [PATCH 5/9] fix(models): docs + trying to wedge in refine view

---
 scout-ui/package.json             |  1 +
 scout-ui/src/home/collection.jade |  1 +
 scout-ui/src/home/collection.js   | 41 ++++++++++++------
 scout-ui/src/home/index.js        |  1 -
 scout-ui/src/models/index.js      | 71 ++++++++++++++++++++++---------
 scout-ui/src/refine-view/index.js | 12 +++---
 6 files changed, 88 insertions(+), 39 deletions(-)

diff --git a/scout-ui/package.json b/scout-ui/package.json
index e5b0c953146..dcdff8fda6c 100644
--- a/scout-ui/package.json
+++ b/scout-ui/package.json
@@ -64,6 +64,7 @@
     "jquery": "^2.1.1",
     "lodash": "^3.8.0",
     "moment": "^2.8.2",
+    "mongodb-extended-json": "^1.3.1",
     "mongodb-schema": "^2.1.0",
     "numeral": "^1.5.3",
     "octicons": "https://github.com/github/octicons/archive/v2.2.0.tar.gz",
diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade
index 9506aa56281..774c39a6653 100644
--- a/scout-ui/src/home/collection.jade
+++ b/scout-ui/src/home/collection.jade
@@ -4,6 +4,7 @@
     div(data-hook='stats-subview')
   .column-container
     .column.main
+      div(data-hook='refine-bar')
       div(data-hook='fields-subview')
     .column.side
       .splitter
diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js
index 6a82bd3437e..9490331ac67 100644
--- a/scout-ui/src/home/collection.js
+++ b/scout-ui/src/home/collection.js
@@ -4,6 +4,8 @@ var AmpersandView = require('ampersand-view');
 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');
 
@@ -46,8 +48,14 @@ module.exports = AmpersandView.extend({
 
     this.schema.ns = this.model._id;
     this.listenTo(this.schema, 'error', this.onError);
+
     this.schema.fetch();
     this.model.fetch();
+
+    this.listenTo(app.queryOptions, 'change', this.onQueryChanged);
+  },
+  onQueryChanged: function() {
+    schema.fetch(app.queryOptions.serialize());
   },
   onSplitterClick: function() {
     this.toggle('open');
@@ -61,10 +69,10 @@ module.exports = AmpersandView.extend({
       hook: 'stats-subview',
       prepareView: function(el) {
         return new CollectionStatsView({
-          el: el,
-          parent: this,
-          model: this.model
-        });
+            el: el,
+            parent: this,
+            model: this.model
+          });
       }
     },
     fields: {
@@ -72,10 +80,19 @@ module.exports = AmpersandView.extend({
       hook: 'fields-subview',
       prepareView: function(el) {
         return new FieldListView({
-          el: el,
-          parent: this,
-          collection: this.schema.fields
-        });
+            el: el,
+            parent: this,
+            collection: this.schema.fields
+          });
+      }
+    },
+    fields: {
+      hook: 'refine-bar',
+      prepareView: function(el) {
+        return new RefineBarView({
+            el: el,
+            parent: this
+          });
       }
     },
     documents: {
@@ -83,10 +100,10 @@ module.exports = AmpersandView.extend({
       hook: 'documents-subview',
       prepareView: function(el) {
         return new DocumentListView({
-          el: el,
-          parent: this,
-          collection: this.model.documents
-        });
+            el: el,
+            parent: this,
+            collection: this.model.documents
+          });
       }
     }
   }
diff --git a/scout-ui/src/home/index.js b/scout-ui/src/home/index.js
index 49b5eeb530c..03333ef9a90 100644
--- a/scout-ui/src/home/index.js
+++ b/scout-ui/src/home/index.js
@@ -6,7 +6,6 @@ var app = require('ampersand-app');
 var format = require('util').format;
 var SidebarView = require('../sidebar');
 var FieldListView = require('../field-list');
-var RefineBarView = require('../refine-view');
 var CollectionView = require('./collection');
 
 require('bootstrap/js/dropdown');
diff --git a/scout-ui/src/models/index.js b/scout-ui/src/models/index.js
index a16573cf6bb..e4bed5c6405 100644
--- a/scout-ui/src/models/index.js
+++ b/scout-ui/src/models/index.js
@@ -17,10 +17,6 @@ var QueryOptions = require('./query-options');
 // Yay!  Use the API from the devtools console.
 window.scout = client;
 
-// Handy debugging! Just type `data` in the devtools console to see the array
-// of documents currently in the schema.
-window.data = [];
-
 // The currently active schema.
 window.schema = null;
 
@@ -35,6 +31,52 @@ client.on('error', function(err) {
 });
 
 var SampledSchema = Schema.extend({
+  /**
+   * Clear any data accumulated from sampling.
+   */
+  reset: function(options) {
+    this.fields.reset();
+    if (this.parent && this.parent.model && this.parent.model.documents) {
+      this.parent.model.documents.reset();
+    }
+  },
+  /**
+   * After you fetch an initial sample, next you'll want to drill-down to a
+   * smaller slice or drill back up to look at a larger slice.
+   *
+   * @example
+   * schema.fetch({});
+   * schema.refine({a: 1});
+   * schema.refine({a: 1, b: 1});
+   * schema.refine({a: 2});
+   */
+  refine: function(options) {
+    this.reset();
+    this.fetch(options);
+  },
+  /**
+   * Take another sample on top of what you currently have.
+   *
+   * @example
+   * schema.fetch({limit: 100});
+   * // schema.documents.length is now 100
+   * schema.more({limit: 100});
+   * // schema.documents.length is now 200
+   * schema.more({limit: 10});
+   * // schema.documents.length is now 210
+   */
+  more: function(options) {
+    this.fetch(options);
+  },
+  /**
+   * Get a sample of documents for a collection from the server.
+   * Really this should only be called directly from the `initialize` function
+   *
+   * @param {Object} [options]
+   * @option {Number} [size=100] Number of documents the sample should contain.
+   * @option {Object} [query={}]
+   * @option {Object} [fields=null]
+   */
   fetch: function(options) {
     options = _.defaults((options || {}), {
       size: 100,
@@ -45,15 +87,8 @@ var SampledSchema = Schema.extend({
     wrapError(this, options);
 
     var model = this;
-    var collection;
-    if (this.parent && this.parent.model && this.parent.model.documents) {
-      collection = this.parent.model.documents;
-      collection.reset();
-    }
-
-
     window.schema = this;
-    window.data = [];
+
     var parser = this.stream()
       .on('error', function(err) {
         options.error(err, 'error', err.message);
@@ -65,17 +100,13 @@ var SampledSchema = Schema.extend({
         }
       })
       .on('end', function() {
-        process.nextTick(function() {
-          model.trigger('sync', model, model.serialize(), options);
-        });
+        model.trigger('sync', model, model.serialize(), options);
       });
 
     model.trigger('request', model, {}, options);
-    process.nextTick(function() {
-      client.sample(model.ns, options)
-        .on('error', parser.emit.bind(parser, 'error'))
-        .pipe(parser);
-    });
+    client.sample(model.ns, options)
+      .on('error', parser.emit.bind(parser, 'error'))
+      .pipe(parser);
   }
 });
 
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
index 7e782590ae7..cba03a2b0eb 100644
--- a/scout-ui/src/refine-view/index.js
+++ b/scout-ui/src/refine-view/index.js
@@ -2,6 +2,7 @@ var AmpersandView = require('ampersand-view');
 var debug = require('debug')('scout-ui:refine-view:index');
 var $ = require('jquery');
 var app = require('ampersand-app');
+var EJSON = require('mongodb-extended-json');
 
 module.exports = AmpersandView.extend({
   template: require('./index.jade'),
@@ -41,7 +42,7 @@ module.exports = AmpersandView.extend({
     // validate user input on the fly
     var queryStr = $(this.queryByHook('refine-input')).val();
     try {
-      JSON.parse(queryStr);
+      EJSON.parse(queryStr);
     } catch (e) {
       this.valid = false;
       return;
@@ -50,11 +51,10 @@ module.exports = AmpersandView.extend({
   },
   buttonClicked: function(evt) {
     var queryStr = $(this.queryByHook('refine-input')).val();
-    // make sure it's a valid query (@todo use EJSON)
-    var queryObj = JSON.parse(queryStr);
-    // remove current collection view?
-    // app.currentPage.switcher.current.remove();
-
+    var queryObj = EJSON.parse(queryStr);
     app.queryOptions.query = queryObj;
+
+    // Modifying the query will reset field-list#schema and because we're using
+    // good ampersand, outgoing views will be removed for us automatically.
   }
 });

From 02eb1a55b95adef01f190a423aced896f2bdb4ca Mon Sep 17 00:00:00 2001
From: Lucas Hrabovsky <hrabovsky.lucas@gmail.com>
Date: Thu, 18 Jun 2015 18:41:19 -0400
Subject: [PATCH 6/9] fix(ui): more docs

---
 scout-ui/src/models/index.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/scout-ui/src/models/index.js b/scout-ui/src/models/index.js
index e4bed5c6405..74daf03228e 100644
--- a/scout-ui/src/models/index.js
+++ b/scout-ui/src/models/index.js
@@ -89,14 +89,24 @@ var SampledSchema = Schema.extend({
     var model = this;
     window.schema = this;
 
+    /**
+     * Collection of sampled documents someone else wants to keep track of.
+     *
+     * {@see scout-ui/src/home/collection.js#model}
+     * @todo (imlucas): Yes this is a crappy hack.
+     */
+    var documents;
+    if (this.parent && this.parent.model && this.parent.model.documents) {
+      documents = this.parent.model.documents;
+    }
+
     var parser = this.stream()
       .on('error', function(err) {
         options.error(err, 'error', err.message);
       })
       .on('data', function(doc) {
-        window.data.push(doc);
-        if (collection) {
-          collection.add(doc);
+        if (documents) {
+          documents.add(doc);
         }
       })
       .on('end', function() {

From 9b176b56aa20aa1ab77d8559c02ccdfddb9900cf Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Fri, 19 Jun 2015 10:27:58 +1000
Subject: [PATCH 7/9] refine sample on input submit or button click.

---
 scout-ui/src/home/collection.js   | 4 ++--
 scout-ui/src/refine-view/index.js | 7 ++++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js
index 9490331ac67..0367cda936a 100644
--- a/scout-ui/src/home/collection.js
+++ b/scout-ui/src/home/collection.js
@@ -55,7 +55,7 @@ module.exports = AmpersandView.extend({
     this.listenTo(app.queryOptions, 'change', this.onQueryChanged);
   },
   onQueryChanged: function() {
-    schema.fetch(app.queryOptions.serialize());
+    this.schema.refine(app.queryOptions.serialize());
   },
   onSplitterClick: function() {
     this.toggle('open');
@@ -86,7 +86,7 @@ module.exports = AmpersandView.extend({
           });
       }
     },
-    fields: {
+    refinebar: {
       hook: 'refine-bar',
       prepareView: function(el) {
         return new RefineBarView({
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
index cba03a2b0eb..17d13b04ced 100644
--- a/scout-ui/src/refine-view/index.js
+++ b/scout-ui/src/refine-view/index.js
@@ -36,7 +36,8 @@ module.exports = AmpersandView.extend({
   },
   events: {
     'click [data-hook=refine-button]': 'buttonClicked',
-    'input [data-hook=refine-input]': 'inputChanged'
+    'input [data-hook=refine-input]': 'inputChanged',
+    'submit form': 'submit',
   },
   inputChanged: function(evt) {
     // validate user input on the fly
@@ -56,5 +57,9 @@ module.exports = AmpersandView.extend({
 
     // Modifying the query will reset field-list#schema and because we're using
     // good ampersand, outgoing views will be removed for us automatically.
+  },
+  submit: function (evt) {
+    evt.preventDefault();
+    this.buttonClicked();
   }
 });

From b52cc4079cae143d88b5a2f68399ba3c17d6beb1 Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Fri, 19 Jun 2015 10:37:43 +1000
Subject: [PATCH 8/9] placing query bar in header and making header height
 variable

---
 scout-ui/src/home/collection.jade | 11 ++++++++---
 scout-ui/src/home/index.less      |  8 +++++---
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/scout-ui/src/home/collection.jade b/scout-ui/src/home/collection.jade
index 774c39a6653..adbead08b20 100644
--- a/scout-ui/src/home/collection.jade
+++ b/scout-ui/src/home/collection.jade
@@ -1,10 +1,15 @@
 .collection-view
   .header
-    h3(data-hook='name')
-    div(data-hook='stats-subview')
+    .container-fluid
+      h3(data-hook='name')
+      .row
+        .col-md-12
+          div(data-hook='stats-subview')
+      .row
+        .col-md-12
+          div(data-hook='refine-bar')
   .column-container
     .column.main
-      div(data-hook='refine-bar')
       div(data-hook='fields-subview')
     .column.side
       .splitter
diff --git a/scout-ui/src/home/index.less b/scout-ui/src/home/index.less
index d5cc1cf4c47..287c4d4db95 100644
--- a/scout-ui/src/home/index.less
+++ b/scout-ui/src/home/index.less
@@ -54,12 +54,14 @@
 
 .collection-view {
 
+  @header-height: 120px;
+
   .header {
     padding-left: 20px;
     display: flex;
     position: relative;
     z-index: 10;
-    height: 100px;
+    height: @header-height;
   }
 
   .column-container {
@@ -67,8 +69,8 @@
     display: flex;
     overflow: hidden;
     height: 100vh;
-    margin-top: -100px;
-    padding-top: 100px;
+    margin-top: -@header-height;
+    padding-top: @header-height;
     position: relative;
     width: 100%;
   }

From 8225a01986627ad28b835e8263e82edecb5dfe87 Mon Sep 17 00:00:00 2001
From: Thomas Rueckstiess <thomas@rueckstiess.net>
Date: Fri, 19 Jun 2015 12:31:21 +1000
Subject: [PATCH 9/9] remove app from refine view, inject dependency in
 collection view

---
 scout-ui/src/home/collection.js   | 3 ++-
 scout-ui/src/refine-view/index.js | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/scout-ui/src/home/collection.js b/scout-ui/src/home/collection.js
index 0367cda936a..d318e222910 100644
--- a/scout-ui/src/home/collection.js
+++ b/scout-ui/src/home/collection.js
@@ -91,7 +91,8 @@ module.exports = AmpersandView.extend({
       prepareView: function(el) {
         return new RefineBarView({
             el: el,
-            parent: this
+            parent: this,
+            model: app.queryOptions
           });
       }
     },
diff --git a/scout-ui/src/refine-view/index.js b/scout-ui/src/refine-view/index.js
index 17d13b04ced..72d6411c069 100644
--- a/scout-ui/src/refine-view/index.js
+++ b/scout-ui/src/refine-view/index.js
@@ -1,7 +1,6 @@
 var AmpersandView = require('ampersand-view');
 var debug = require('debug')('scout-ui:refine-view:index');
 var $ = require('jquery');
-var app = require('ampersand-app');
 var EJSON = require('mongodb-extended-json');
 
 module.exports = AmpersandView.extend({
@@ -53,7 +52,7 @@ module.exports = AmpersandView.extend({
   buttonClicked: function(evt) {
     var queryStr = $(this.queryByHook('refine-input')).val();
     var queryObj = EJSON.parse(queryStr);
-    app.queryOptions.query = queryObj;
+    this.model.query = queryObj;
 
     // Modifying the query will reset field-list#schema and because we're using
     // good ampersand, outgoing views will be removed for us automatically.