[#145,widget/fields,model][m]: working fields widget with field summary data generated by Dataset.getFieldsSummary function.

* Layout is still not right -- need to put widget in sidebar (though looks a lot better)
* Datset.getFieldsSummary to compute facets for fields
* Remove facet usage in the demo

app/js/app.js

@@ -242,7 +242,6 @@ var ExplorerApp = Backbone.View.extend({
 // provide a demonstration in memory dataset
 function localDataset() {
   var dataset = Fixture.getDataset();
-  dataset.queryState.addFacet('country');
   return dataset;
 }
 

css/multiview.css

@@ -98,15 +98,39 @@
   * Fields Widget
   *********************************************************/
 
+.recline-fields-view {
+  width: 200px;
+}
+
+.recline-fields-view .fields-list {
+  padding: 0;
+}
+
 .recline-fields-view .fields-list .accordion-heading a,
-.recline-fields-view .fields-list .accordion-heading h3 {
+.recline-fields-view .fields-list .accordion-heading h4 {
   display: inline;
 }
 
-.recline-fields-view .fields-list .accordion-heading h3 {
+.recline-fields-view .fields-list .accordion-heading h4 {
   margin-left: 10px;
 }
 
+.recline-fields-view .clear {
+  clear: both;
+}
+
+.recline-fields-view .facet-items {
+  list-style-type: none;
+  margin-left: 0;
+}
+
+.recline-fields-view .facet-item .term {
+  font-weight: bold;
+}
+
+.recline-fields-view .facet-item .count {
+}
+
 /**********************************************************
   * Notifications
   *********************************************************/

src/model.js

@@ -111,6 +111,31 @@ my.Dataset = Backbone.Model.extend({
     return data;
   },
 
+  // Get a summary for each field in the form of a `Facet`.
+  // 
+  // @return null as this is async function. Provides deferred/promise interface.
+  getFieldsSummary: function() {
+    var self = this;
+    var query = new my.Query();
+    query.set({size: 0});
+    this.fields.each(function(field) {
+      query.addFacet(field.id);
+    });
+    var dfd = $.Deferred();
+    this.backend.query(this, query.toJSON()).done(function(queryResult) {
+      if (queryResult.facets) {
+        _.each(queryResult.facets, function(facetResult, facetId) {
+          facetResult.id = facetId;
+          var facet = new my.Facet(facetResult);
+          // TODO: probably want replace rather than reset (i.e. just replace the facet with this id)
+          self.fields.get(facetId).facets.reset(facet);
+        });
+      }
+      dfd.resolve(queryResult);
+    });
+    return dfd.promise();
+  },
+
   // ### _backendFromString(backendString)
   //
   // See backend argument to initialize for details
@@ -291,6 +316,7 @@ my.Field = Backbone.Model.extend({
     if (!this.renderer) {
       this.renderer = this.defaultRenderers[this.get('type')];
     }
+    this.facets = new my.FacetList();
   },
   defaultRenderers: {
     object: function(val, field, doc) {

src/widget.fields.js

@@ -22,24 +22,33 @@ this.recline.View = this.recline.View || {};
 (function($, my) {
 
 my.Fields = Backbone.View.extend({
-  className: 'recline-fields-view well', 
+  className: 'recline-fields-view', 
   template: ' \
-    <div class="accordion fields-list"> \
+    <div class="accordion fields-list well"> \
     {{#fields}} \
-      <div class="accordion-group"> \
+      <div class="accordion-group field"> \
         <div class="accordion-heading"> \
-          <h3> \
-            {{label}} ({{id}}) \
+          <h4> \
+            {{label}} \
             <small> \
               <i class="icon-file" title="Field type"></i> {{type}} \
-              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> More information &raquo; \
+              <a class="accordion-toggle" data-toggle="collapse" href="#collapse{{id}}"> &raquo; \
               </a> \
             </small> \
-          </h3> \
+          </h4> \
         </div> \
         <div id="collapse{{id}}" class="accordion-body collapse in"> \
           <div class="accordion-inner"> \
-            <i class="icon-file"></i> {{type}} \
+            {{#facets}} \
+            <div class="facet-summary" data-facet="{{id}}"> \
+              <ul class="facet-items"> \
+              {{#terms}} \
+                <li class="facet-item"><span class="term">{{term}}</span> <span class="count">[{{count}}]</span></li> \
+              {{/terms}} \
+              </ul> \
+            </div> \
+            {{/facets}} \
+            <div class="clear"></div> \
           </div> \
         </div> \
       </div> \
@@ -50,19 +59,33 @@ my.Fields = Backbone.View.extend({
   events: {
   },
   initialize: function(model) {
-    _.bindAll(this, 'render');
+    var self = this;
     this.el = $(this.el);
-    this.model.fields.bind('all', this.render);
+    _.bindAll(this, 'render');
+
+    this.model.fields.bind('all', function() {
+      // fields can get reset or changed in which case we need to recalculate
+      self.model.getFieldsSummary();
+      self.render();
+    });
+    this.model.fields.each(function(field) {
+      field.facets.bind('all', self.render);
+    });
     this.render();
   },
   render: function() {
+    var self = this;
     var tmplData = {
-      fields: this.model.fields.toJSON()
+      fields: []
     };
+    this.model.fields.each(function(field) {
+      var out = field.toJSON();
+      out.facets = field.facets.toJSON();
+      tmplData.fields.push(out);
+    });
     var templated = Mustache.render(this.template, tmplData);
     this.el.html(templated);
-    // this.el.hide();
-    this.el.find('.collapse').collapse()
+    this.el.find('.collapse').collapse();
   }
 });
 

test/model.test.js

@@ -125,6 +125,21 @@ test('Dataset _prepareQuery', function () {
   deepEqual(out, exp);
 });
 
+test('Dataset getFieldsSummary', function () {
+  var dataset = Fixture.getDataset();
+  dataset.getFieldsSummary().done(function() {
+    var countryField = dataset.fields.get('country');
+    var facet = countryField.facets.models[0];
+    equal(facet.get('terms').length, 3);
+    var exp = [
+      { count: 3, term: 'UK' },
+      { count: 2, term: 'DE' },
+      { count: 1, term: 'US' }
+    ];
+    deepEqual(facet.get('terms'), exp);
+  });
+});
+
 // =================================
 // Query