extracted ui updates into own methods

Author: rueckstiess

src/minicharts/querybuilder.js

@@ -78,34 +78,10 @@ module.exports = {
   },
 
   /**
-   * Handler for query builder events that result in distinct selection, e.g. string and unique
-   * type. Single click selects individual element, shift-click adds to selection.
-   *
-   * For distinct-type minicharts, this.selectedValues contains an entry for each selected value.
-   *
-   * @param  {Object} data   contains information about the event, @see handleQueryBuilderEvent
+   * update the UI after a distinct query and mark appropriate elements with .select class.
+   * @param  {Object} data   data object of the event
    */
-  handleEvent_distinct: function(data) {
-    // update selectedValues
-    if (!data.evt[MODIFIERKEY]) {
-      if (this.selectedValues.length === 1 && this.selectedValues[0].value === data.d.value) {
-        // case where 1 element is selected and it is clicked again (need to unselect)
-        this.selectedValues = [];
-      } else {
-        // case where multiple or no elements are selected (need to select that one item)
-        this.selectedValues = [data.d];
-      }
-    } else if (_.contains(_.pluck(this.selectedValues, 'value'), data.d.value)) {
-      // case where selected element is shift-clicked (need to remove from selection)
-      _.remove(this.selectedValues, function(d) {
-        return d.value === data.d.value;
-      });
-    } else {
-      // case where unselected element is shift-clicked (need to add to selection)
-      this.selectedValues.push(data.d);
-    }
-
-    // visual updates
+  updateUI_distinct: function(data) {
     var uiElements = this.queryAll('.selectable');
     _.each(uiElements, function(el) {
       var elData = data.source === 'unique' ? el.innerText : d3.select(el).data()[0].value;
@@ -124,27 +100,10 @@ module.exports = {
   },
 
   /**
-   * Handler for query builder events that result in range selection, e.g. number type.
-   * single click selects individual element, shift-click extends to range (the single click is
-   * interpreted as one end of the range, shift-click as the other).
-   *
-   * For range-type minicharts, this.selectedValues contains two values, the lower and upper bound.
-   * The 0th value is the one selected via regular click, the 1st value is the shift-clicked one.
-   * If only a single value is selected ($eq), is stored at the 0th index.
-   *
-   * @param  {Object} data   the contains information about the event, @see handleQueryBuilderEvent
+   * update the UI after a range query and mark appropriate elements with .select class.
+   * @param  {Object} data   data object of the event
    */
-  handleEvent_range: function(data) {
-    if (data.evt[MODIFIERKEY]) {
-      // shift-click modifies the value at index 1
-      this.selectedValues[1] = data.d;
-    } else if (this.selectedValues[0] && this.selectedValues[0].value === data.d.value) {
-      // case where single selected item is clicked again (need to unselect)
-      this.selectedValues = [];
-    } else {
-      // case where multiple or no elements are selected (need to just select one item)
-      this.selectedValues = [data.d];
-    }
+  updateUI_range: function() {
     var firstSelected = this.selectedValues[0];
     // remove `.selected` class from all elements
     var uiElements = this.queryAll('.selectable');
@@ -168,8 +127,10 @@ module.exports = {
       // use getOrderedValue to determine what elements should be selected
       var lower = getOrderedValue(first);
       var upper = getOrderedValue(last);
-      if (this.model.getType() === 'Number') {
-        upper += last.dx;
+      var dx = d3.select(_.last(uiElements)).data()[0].dx;
+      var isBinned = this.model.getType() === 'Number' && dx;
+      if (isBinned) {
+        upper += dx;
       }
 
       /**
@@ -179,16 +140,68 @@ module.exports = {
        * inclusive ($lte).
        * This is indicated by the d.dx variable, which is only > 0 for binned ranges.
        */
-      var upperInclusive = last.dx === 0;
       _.each(uiElements, function(el) {
         var elData = getOrderedValue(d3.select(el).data()[0]);
-        if (elData >= lower && (upperInclusive ? elData <= upper : elData < upper)) {
+        if (elData >= lower && (isBinned ? elData < upper : elData <= upper)) {
           el.classList.add('selected');
           el.classList.remove('unselected');
         }
       });
     }
   },
+
+  /**
+   * Handler for query builder events that result in distinct selection, e.g. string and unique
+   * type. Single click selects individual element, shift-click adds to selection.
+   *
+   * For distinct-type minicharts, this.selectedValues contains an entry for each selected value.
+   *
+   * @param  {Object} data   contains information about the event, @see handleQueryBuilderEvent
+   */
+  handleEvent_distinct: function(data) {
+    // update selectedValues
+    if (!data.evt[MODIFIERKEY]) {
+      if (this.selectedValues.length === 1 && this.selectedValues[0].value === data.d.value) {
+        // case where 1 element is selected and it is clicked again (need to unselect)
+        this.selectedValues = [];
+      } else {
+        // case where multiple or no elements are selected (need to select that one item)
+        this.selectedValues = [data.d];
+      }
+    } else if (_.contains(_.pluck(this.selectedValues, 'value'), data.d.value)) {
+      // case where selected element is shift-clicked (need to remove from selection)
+      _.remove(this.selectedValues, function(d) {
+        return d.value === data.d.value;
+      });
+    } else {
+      // case where unselected element is shift-clicked (need to add to selection)
+      this.selectedValues.push(data.d);
+    }
+  },
+
+  /**
+   * Handler for query builder events that result in range selection, e.g. number type.
+   * single click selects individual element, shift-click extends to range (the single click is
+   * interpreted as one end of the range, shift-click as the other).
+   *
+   * For range-type minicharts, this.selectedValues contains two values, the lower and upper bound.
+   * The 0th value is the one selected via regular click, the 1st value is the shift-clicked one.
+   * If only a single value is selected ($eq), is stored at the 0th index.
+   *
+   * @param  {Object} data   the contains information about the event, @see handleQueryBuilderEvent
+   */
+  handleEvent_range: function(data) {
+    if (data.evt[MODIFIERKEY]) {
+      // shift-click modifies the value at index 1
+      this.selectedValues[1] = data.d;
+    } else if (this.selectedValues[0] && this.selectedValues[0].value === data.d.value) {
+      // case where single selected item is clicked again (need to unselect)
+      this.selectedValues = [];
+    } else {
+      // case where multiple or no elements are selected (need to just select one item)
+      this.selectedValues = [data.d];
+    }
+  },
   /**
    * Handler for query builder events created with a click-drag mouse action. The visual updates
    * are handled by d3 directly, so all we have to do is update the selected values based on the
@@ -256,5 +269,6 @@ module.exports = {
       this['handleEvent_' + queryType](data);
     }
     this['buildQuery_' + queryType]();
+    this['updateUI_' + queryType](data);
   }
 };