Trellis external filtering and broadcastingbrushable-trellis

This also adjusts the method for comparing filters, allowing a chart to
define a "filterCompare" method that will be used to compare filters if
available.
This finally removes the date chart special case for setting filters.

Array instance checking will now use foo instanceof Array instead of
typeof(foo) == "array", which was unreliable (sometimes it's "object").

Trellis chart brush containers will now redraw the brush when set
externally.

renderBrush no longer takes brushG as a parameter. I'm not sure what I
was thinking when I made it so.

The deselected area will not yet fade.

The trellis chart still requires substantial refactoring and consistency
fixes; I'm not sure that the parameter specifications are currently
correct.

3 files changed, 111 insertions, 30 deletions

diff --git a/public/js/mv/chart.js b/public/js/mv/chart.js
index d2eedd4..ebb62da 100644
--- a/public/js/mv/chart.js
+++ b/public/js/mv/chart.js
@@ -14,6 +14,21 @@ var mv = function(mv) {
         .xUnits(d3.time.hours)
         .xAxisPadding(2)
         ;
+      mv.charts.date.filterCompare = function(l, r) {
+        return ((l instanceof Date) ? l : new Date(l))
+            == ((r instanceof Date) ? r : new Date(r));
+      };
+      // Remember the old date filter
+      // FIXME: Find a more elegant way to do this
+      var innerDateFilter = mv.charts.date.filter;
+      mv.charts.date.filter = function(_) {
+        if (!arguments.length) return innerDateFilter();
+        if (!_) return innerDateFilter(_);
+        _ = _ instanceof Array
+          ? _.map(function(d) { return d instanceof Date ? d : new Date(d); })
+          : (_ instanceof Date ? _ : new Date(_));
+        return innerDateFilter(_);
+      }
       /* dc's default date format is M/D/Y, which is confusing and not ISO 8901 */
       dc.dateFormat = d3.time.format("%Y-%m-%d %H:%M");
       mv.charts.blvl = bar(monoGroup(med(dc.barChart("#blvl-chart")), "blvl"))
@@ -52,7 +67,34 @@ var mv = function(mv) {
         .title(function(d) { return "Map " + d.key + ":" + d.value.r; })
         .renderTitle(true)
         ;
-      mv.charts.stats = trellisChart("#stat-chart", ["str", "agi", "vit", "dex", "int", "luk"].map(function(d) { mv.heap[d].name = d; return mv.heap[d]; }));
+      var attrs = ["str", "agi", "vit", "dex", "int", "luk"];
+      mv.charts.stats = trellisChart("#stat-chart", attrs.map(function(d) { mv.heap[d].name = d; return mv.heap[d]; }));
+      mv.charts.stats.filterCompare = function(l, r) {
+        /* Compare each attribute in turn. FIXME: Duplicated code with connect.js */
+        if (l == null && r == null)
+          return true;
+        if (l == null || r == null)
+          return false;
+        for (var key in attrs) {
+          var attr = attrs[key];
+          if (attr in l && attr in r) {
+            if (l[attr] instanceof Array) {
+              /* Range filter */
+              if (!(r[attr] instanceof Array)
+               || l[attr][0] != r[attr][0]
+               || l[attr][1] != r[attr][1]) {
+                return false;
+              }
+            } else if ((r[attr] instanceof Array) || l[attr] != r[attr]) {
+              /* Exact filter */
+              return false;
+            }
+          } else if (attr in l || attr in r) {
+            return false;
+          }
+        }
+        return true;
+      }
       mv.charts.type.filter("KILLXP");
       var killxpShown = true;
       var killxpCharts = d3.select("#killxp-charts");
diff --git a/public/js/mv/connect.js b/public/js/mv/connect.js
index 6f3101f..a17febb 100644
--- a/public/js/mv/connect.js
+++ b/public/js/mv/connect.js
@@ -105,30 +105,30 @@ var mv = function(mv) {
     /* See if there's any difference - if there isn't, don't update. */
     var change = false;
     var key;
+    function filterCompare(key, l, r) {
+      return ("filterCompare" in mv.charts[key]) ? mv.charts[key].filterCompare(l, r) : l == r;
+    }
     /* Check for keys in the filters to apply which are not in our charts. */
     for (key in filters) {
-      if (key == "date") {
-        /*
-         * Special case! FIXME: Find a more elegant way to handle this
-         */
-        filters[key][0] = new Date(filters[key][0]);
-        filters[key][1] = new Date(filters[key][1]);
-      }
       if (!(key in mv.charts))
         continue;
-      var filter = mv.charts[key].filter();
-      if (typeof(filter) == "array") {
+      /* The two filters to compare. */
+      var l = mv.charts[key].filter();
+      var r = filters[key];
+      if (l instanceof Array) {
         /* Crossfilter uses arrays to filter ranges. Exactly the first two elements are significant. */
-        if (filter[0] == filters[key][0] &&
-            filter[1] == filters[key][1]) {
+        if ((r instanceof Array)
+         && filterCompare(key, l[0], r[0])
+         && filterCompare(key, l[1], r[1])) {
           continue;
         }
-      } else if (filter == filters[key]) {
+      } else if (!(r instanceof Array) && filterCompare(key, l, r)) {
+        /* Exact filter */
         continue;
       }
       /* This filter differs. Apply it. */
       change = true;
-      mv.charts[key].filter(filters[key]);
+      mv.charts[key].filter(r);
     }
     /* Check for keys in our charts which are not in the filters to apply. */
     for (key in mv.charts) {
diff --git a/public/js/util/trellis-chart.js b/public/js/util/trellis-chart.js
index 8b92344..473d7d3 100644
--- a/public/js/util/trellis-chart.js
+++ b/public/js/util/trellis-chart.js
@@ -31,14 +31,15 @@ function trellisChart(anchor, monoGroups) {
   var g = anchor.select("g");
 
   /* Main columns, one for each attr */
-  var columns;
   var colBodies;
+  var brushContainers;
 
   var _chart = function() {
     if (g.empty()) {
       renderBase();
     }
     colBodies.each(redrawCells);
+    brushContainers.each(redrawBrush);
   }
 
   function renderBase() {
@@ -157,19 +158,32 @@ function trellisChart(anchor, monoGroups) {
         ;
       })
     ;
-    dimLabelsG.selectAll("g.brush-container")
+    brushContainers = dimLabelsG.selectAll("g.brush-container")
       .data(monoGroups)
       .enter().append("g").attr("class", "brush-container")
       .attr("transform", function(d, i) { return "translate(" + (i * subChartLength) + ",0)"; })
       .each(function (d, i) {
         d.id = i;
         d.brush = d3.svg.brush();
+        d.brushRedrawNeeded = false;
         d.filter = function(_) {
           if (!arguments.length) return d._filter;
-          d.dim.filter(_);
-          d._filter = _;
+          if (_ != null) {
+            d._filter = _;
+            d.brush.extent(_);
+            d.dim.filter(_);
+            d.brushRedrawNeeded = true;
+          } else {
+            d.filterAll();
+          }
           return d;
         };
+        d.filterAll = function() {
+          d._filter = null;
+          d.brush.clear();
+          d.dim.filterAll();
+          d.brushRedrawNeeded = true;
+        }
       })
       .each(renderBrush)
     ;
@@ -179,7 +193,7 @@ function trellisChart(anchor, monoGroups) {
     * monoGroups is an array of each stat dimension. We can consider each column to have data in the following format:
     *  { group: function, dim: function, name: stat }
     */
-    columns = g.selectAll(".column")
+    var columns = g.selectAll(".column")
       .data(monoGroups);
     var colE = columns.enter().append("g").attr("class", "column")
       
@@ -253,7 +267,8 @@ function trellisChart(anchor, monoGroups) {
   }
 
   function renderBrush(d, i) {
-    var columnG = d3.select(this);
+    var columnGDOM = this;
+    var columnG = d3.select(columnGDOM);
     var brushG = columnG.select(".brush");
 
     d.brush
@@ -261,7 +276,7 @@ function trellisChart(anchor, monoGroups) {
       .on("brush", function () {
         var extent = extendBrush(d, brushG);
 
-        redrawBrush(d, i, brushG);
+        redrawBrush.call(columnGDOM, d, i);
 
         if (brushIsEmpty(extent, d.brush)) {
           dc.events.trigger(function () {
@@ -287,13 +302,20 @@ function trellisChart(anchor, monoGroups) {
     }
   }
 
-  function redrawBrush(d, i, brushG) {
-    if (d.filter() && d.brush.empty())
+  function redrawBrush(d, i) {
+    if (!d.brushRedrawNeeded) {
+      return;
+    }
+    if (d.filter() && d.brush.empty()) {
       d.brush.extent(d.filter());
+    }
 
+    var brushG = d3.select(this).select(".brush");
     brushG.call(d.brush.x(_scale));
     brushG.selectAll("rect").attr("height", chartLen);
 
+    d.brushRedrawNeeded = false;
+
     // TODO: fade the deselected area
   }
 
@@ -326,18 +348,35 @@ function trellisChart(anchor, monoGroups) {
          + "V" + (2 * y - 8);
   }
 
+  /*
+   * Interface assumptions:
+   *  - filter with one argument uses this argument as a filter in a manner defined by the chart.
+   *  - filter with no arguments returns a description of the chart's active filter(s) suitable for applying to a filter() function of the same chart type.
+   *
+   * Most chart's filter() uses the data type of crossfilter's filter(). The trellis chart, using multiple dimensions, cannot.
+   * Therefore, it uses the format { [name] -> filter } where filter is the format used by crossfilter's filter.
+   */
   _chart.filter = function(_) {
-    /*
-     * TODO:
-     * This is going to be interesting. As the chart is not charting a single
-     * monogroup, and most code is built around this assumption, this might
-     * well end up being a messy special case.
-     */
     if (!arguments.length) {
-      return null;
+      var ret = null;
+      for (var key in monoGroups) {
+        if (monoGroups[key].filter()) {
+          (ret || (ret = {}))[attrs[key]] = monoGroups[key].filter();
+        }
+      }
+      return ret;
+    }
+    for (key in _) {
+      monoGroups[attrsIdByName[key]].filter(_[key]);
     }
     return _chart;
   }
 
+  _chart.filterAll = function(_) {
+    for (var key in monoGroups) {
+      monoGroups[key].filterAll();
+    }
+  }
+
   return _chart;
 }