Fixing brushing issues

.babelrc

@@ -8,7 +8,7 @@
           "safari >= 11"
         ]
       },
-      "modules": false
+      "modules": "commonjs"
     }]
   ],
   "plugins": [

package-lock.json

 {
   "name": "fractalis",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -3712,28 +3712,6 @@
         "xmlhttprequest": "1.8.0"
       }
     },
-    "d3-scale": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-2.0.0.tgz",
-      "integrity": "sha512-Sa2Ny6CoJT7x6dozxPnvUQT61epGWsgppFvnNl8eJEzfJBG0iDBBTJAtz2JKem7Mb+NevnaZiDiIDHsuWkv6vg==",
-      "requires": {
-        "d3-array": "1.2.1",
-        "d3-collection": "1.0.4",
-        "d3-format": "1.2.2",
-        "d3-interpolate": "1.1.6",
-        "d3-time": "1.0.8",
-        "d3-time-format": "2.1.1"
-      }
-    },
-    "d3-scale-chromatic": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-1.2.0.tgz",
-      "integrity": "sha512-qQUhLi8fPe/F0b0M46C6eFUbms5IIMHuhJ5DKjjzBUvm1b6aPtygJzGbrMdMUD/ckLBq+NdWwHeN2cpMDp4Q5Q==",
-      "requires": {
-        "d3-color": "1.0.3",
-        "d3-interpolate": "1.1.6"
-      }
-    },
     "d3-selection": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz",

package.json

@@ -64,6 +64,7 @@
     "webpack-dev-server": "3.1.0",
     "webpack-cli": "2.0.10",
     "yargs": "11.0.0",
-    "node-sass": "4.7.2"
+    "node-sass": "4.7.2",
+    "lodash": "4.17.5"
   }
 }

src/store/actions.js

@@ -78,11 +78,12 @@ export default {
   /**
    * Commits a filter mutation that will replace the specified filter with a new value.
    * @param context The action context.
+   * @param source The source of the action.
    * @param filter The filter to apply (e.g. 'ids').
    * @param value The value of the new filter (e.g. Array of ids).
    */
-  setFilter: (context, {filter, value}) => {
-    context.commit(types.SET_FILTER, {filter, value})
+  setFilter: (context, {source, filter, value}) => {
+    context.commit(types.SET_FILTER, {source, filter, value})
   },
   /**
    * Commits a tasks mutation that will add a new task to the store.

src/store/mutations.js

@@ -20,8 +20,8 @@ export default {
   [types.SET_SUBSETS] (state, subsets) {
     state.subsets = subsets
   },
-  [types.SET_FILTER] (state, {filter, value}) {
-    Vue.set(state.filters, filter, value)
+  [types.SET_FILTER] (state, {source, filter, value}) {
+    Vue.set(state.filters, filter, {source, value})
   },
   [types.SET_TASK] (state, {taskID, taskName, taskState, taskMessage}) {
     // avoid triggering possible watchers if task information remain the same

src/store/store.js

@@ -19,7 +19,7 @@ const state = {
   },
   subsets: [],
   filters: {
-    ids: []
+    ids: {source: null, value: []}
   },
   options: {
     controlPanelPosition: 'left'

src/vue/charts/Boxplot.vue

@@ -62,7 +62,7 @@
                 v-show="selectedLabel === label">
           </rect>
           <text text-anchor="middle"
-                :transform="`translate(${boxplotWidth / 1.8},${boxes[label].median})rotate(90)`">
+                :transform="`translate(${boxplotWidth / 1.8}, ${padded.height / 2})rotate(90)`">
             {{label}}
           </text>
           <line class="fjs-upper-whisker"
@@ -190,7 +190,7 @@
         return {
           features: this.numData,
           categories: this.catData,
-          id_filter: this.idFilter,
+          id_filter: this.idFilter.value,
           subsets: store.getters.subsets
         }
       },
@@ -231,7 +231,7 @@
             .filter(d => d.subset === subset &&
               d.feature === feature &&
               d.category === category &&
-              this.params.showOutliers ? true : !d.outlier &&
+              (this.params.showOutliers ? true : !d.outlier) &&
               typeof d.value === 'number')
             .map(d => {
               return {
@@ -376,14 +376,14 @@
         this.catData = ids
       },
       setIDFilter (label) {
-        store.dispatch('setFilter', {filter: 'ids', value: this.points[label].map(d => d.id)})
+        store.dispatch('setFilter', {source: this._uid, filter: 'ids', value: this.points[label].map(d => d.id)})
         this.selectedLabel = label
         this.hasSetFilter = true
       },
       resetFilter () {
-        store.dispatch('setFilter', {filter: 'ids', value: []})
+        store.dispatch('setFilter', {source: this._uid, filter: 'ids', value: []})
         this.selectedLabel = ''
-        this.hasSetFilter = true
+        this.hasSetFilter = false
       },
       drawPoints () {
         this.labels.forEach(label => {

src/vue/charts/CorrelationAnalysis.vue

@@ -113,6 +113,7 @@
   import Draggable from '../components/Draggable.vue'
   import getHDPICanvas from '../../utils/high-dpi-canvas'
   import StateSaver from '../mixins/state-saver'
+  import _ from 'lodash'
   export default {
     name: 'correlation-analysis',
     data () {
@@ -165,7 +166,7 @@
         return {
           x: this.xyData[0],
           y: this.xyData[1],
-          id_filter: this.idFilter,
+          id_filter: this.idFilter.value,
           method: this.params.method,
           subsets: store.getters.subsets,
           categories: this.categoryData
@@ -288,10 +289,10 @@
           .extent([[0, 0], [this.padded.width, this.padded.height]])
           .on('end', () => {
             this.error = ''
+            if (!d3.event.sourceEvent) {
+              return
+            }
             if (!d3.event.selection) {
-              if (this.selectedPoints.length === 0) {
-                return
-              }
               this.selectedPoints = []
             } else {
               const [[x0, y0], [x1, y1]] = d3.event.selection
@@ -302,9 +303,9 @@
                 this.error = 'Selection must be zero (everything is selected) or greater than two.'
                 return
               }
+              this.hasSetFilter = true
             }
-            store.dispatch('setFilter', {filter: 'ids', value: this.selectedPoints.map(d => d.id)})
-            this.hasSetFilter = true
+            store.dispatch('setFilter', {source: this._uid, filter: 'ids', value: this.selectedPoints.map(d => d.id)})
           })
       },
       histogramBins () {
@@ -369,7 +370,7 @@
         handler: function (newArgs, oldArgs) {
           const init = newArgs.x !== oldArgs.x ||
             newArgs.y !== oldArgs.y ||
-            JSON.stringify(newArgs.categories) !== JSON.stringify(oldArgs.categories) ||
+            !_.isEqual(newArgs.categories, oldArgs.categories) ||
             !this.hasSetFilter
           if (this.validArgs) {
             this.runAnalysisWrapper(init, newArgs)
@@ -394,6 +395,13 @@
           })
         }
       },
+      'idFilter': {
+        handler: function (newIdFilter) {
+          if (newIdFilter.source !== this._uid) {
+            this.brush.move(d3.select(this.$refs.brush), null)
+          }
+        }
+      },
       'points': {
         handler: function (newPoints) {
           this.$nextTick(() => this.drawPoints(newPoints))

src/vue/charts/Heatmap.vue

@@ -223,7 +223,7 @@
           numericals: [],
           categoricals: [],
           ranking_method: this.rankingMethod,
-          id_filter: this.idFilter,
+          id_filter: this.idFilter.value,
           max_rows: 100,
           subsets: store.getters.subsets
         }
@@ -558,6 +558,6 @@
       .fjs-cell:hover
         opacity: 0.4
       .fjs-sig-bar
-        stroke-width: none
+        stroke-width: 1px
         shape-rendering: crispEdges
 </style>

src/vue/charts/PCA.vue

@@ -172,7 +172,7 @@
           features: this.featureData,
           categories: this.categoryData,
           whiten: this.params.whiten,
-          id_filter: this.idFilter,
+          id_filter: this.idFilter.value,
           subsets: store.getters.subsets
         }
       },
@@ -303,19 +303,19 @@
         return d3.brush()
           .extent([[0, 0], [this.padded.width, this.padded.height]])
           .on('end', () => {
+            if (!d3.event.sourceEvent) {
+              return
+            }
             if (!d3.event.selection) {
-              if (this.selectedPoints.length === 0) {
-                return
-              }
               this.selectedPoints = []
             } else {
               const [[x0, y0], [x1, y1]] = d3.event.selection
               this.selectedPoints = this.points.filter(d => {
                 return x0 <= d.x && d.x <= x1 && y0 <= d.y && d.y <= y1
               })
+              this.hasSetFilter = true
             }
-            store.dispatch('setFilter', {filter: 'ids', value: this.selectedPoints.map(d => d.id)})
-            this.hasSetFilter = true
+            store.dispatch('setFilter', {source: this._uid, filter: 'ids', value: this.selectedPoints.map(d => d.id)})
           })
       }
     },
@@ -345,6 +345,13 @@
           })
         }
       },
+      'idFilter': {
+        handler: function (newIdFilter) {
+          if (newIdFilter.source !== this._uid) {
+            this.brush.move(d3.select(this.$refs.brush), null)
+          }
+        }
+      },
       'points': {
         handler: function (newPoints) {
           this.$nextTick(() => this.drawScatterPoints(newPoints))