Replaced querySelector with ref and fixed various small code issues

src/store/store.js

@@ -13,6 +13,7 @@ const state = {
   chartManager: null,
   stateManager: null,
   controlPanel: {
+    panels: [],
     locked: false,
     expanded: false
   },

src/vue/charts/Boxplot.vue

@@ -37,21 +37,21 @@
         <text :x="this.padded.width / 2"
               class="fjs-anova-results"
               v-if="Object.keys(this.results.anova).length">
-          ANOVA -- F-value: {{ this.results.anova.f_value.toFixed(4) }}
-          &nbsp p-value: {{ this.results.anova.p_value.toFixed(4) }}
+          ANOVA -- F-value: {{ anova.fValue }}
+          &nbsp p-value: {{ anova.pValue }}
         </text>
-        <g class="fjs-boxplot-axis fjs-x-axis" :transform="`translate(0, ${padded.height})`"></g>
-        <g class="fjs-boxplot-axis fjs-y-axis"></g>
+        <g class="fjs-boxplot-axis fjs-x-axis" ref="xAxis" :transform="`translate(0, ${padded.height})`"></g>
+        <g class="fjs-boxplot-axis fjs-y-axis" ref="yAxis"></g>
         <g class="fjs-box"
            :transform="`translate(${scales.x(label)}, 0)`"
            v-tooltip="{placement: 'bottom'}"
            :title="label"
-           :data-label="label"
            @click="setIDFilter(label)"
            @mouseenter="showTooltip(label)"
            @mouseleave="hideTooltip(label)"
-           v-for="label in labels" >
+           v-for="label in labels">
           <line class="fjs-upper-whisker"
+                :ref="`${label}-upper-whisker`"
                 :title="results.statistics[label].u_wsk"
                 v-tooltip="{placement: 'right'}"
                 :x1="- boxplotWidth / 6"
@@ -60,6 +60,7 @@
                 :y2="boxes[label].u_wsk">
           </line>
           <line class="fjs-lower-whisker"
+                :ref="`${label}-lower-whisker`"
                 :title="results.statistics[label].l_wsk"
                 v-tooltip="{placement: 'right'}"
                 :x1="- boxplotWidth / 6"
@@ -68,6 +69,7 @@
                 :y2="boxes[label].l_wsk">
           </line>
           <line class="fjs-upper-quartile"
+                :ref="`${label}-upper-quartile`"
                 :title="results.statistics[label].u_qrt"
                 v-tooltip="{placement: 'left'}"
                 :x1="- boxplotWidth / 2"
@@ -76,6 +78,7 @@
                 :y2="boxes[label].u_qrt">
           </line>
           <line class="fjs-lower-quartile"
+                :ref="`${label}-lower-quartile`"
                 :title="results.statistics[label].l_qrt"
                 v-tooltip="{placement: 'left'}"
                 :x1="- boxplotWidth / 2"
@@ -84,6 +87,7 @@
                 :y2="boxes[label].l_qrt">
           </line>
           <line class="fjs-median"
+                :ref="`${label}-median`"
                 :title="results.statistics[label].median"
                 v-tooltip="{placement: 'right'}"
                 :x1="- boxplotWidth / 2"
@@ -206,7 +210,7 @@
         const points = {}
         this.labels.forEach(label => {
           let [feature, category, subset] = label.split('//')
-          subset = parseInt(subset.substring(1)) - 1  // revert subset string formatting
+          subset = parseInt(subset.substring(1)) - 1 // revert subset string formatting
           points[label] = this.results.data
             .filter(d => d.subset === subset &&
               d.feature === feature &&
@@ -293,6 +297,11 @@
         const y = d3.axisRight(this.scales.y)
           .tickSizeInner(this.padded.width)
         return { x, y }
+      },
+      anova () {
+        let fValue = this.results.anova.f_value == null ? 'NaN' : this.results.anova.f_value.toFixed(4)
+        let pValue = this.results.anova.p_value == null ? 'NaN' : this.results.anova.p_value.toFixed(4)
+        return {pValue, fValue}
       }
     },
     // IMPORTANT: If the code within the watchers does interact with the DOM the code should be wrapped into a $nextTick
@@ -310,11 +319,11 @@
       'axis': {
         handler: function (newAxis) {
           this.$nextTick(() => {
-            d3.select(this.$el.querySelector('.fjs-x-axis'))
+            d3.select(this.$refs.xAxis)
               .call(newAxis.x)
               .selectAll('text')
               .attr('transform', 'rotate(20)')
-            d3.select(this.$el.querySelector('.fjs-y-axis'))
+            d3.select(this.$refs.yAxis)
               .call(newAxis.y)
           })
         }
@@ -335,11 +344,11 @@
         const event = document.createEvent('Event')
         event.initEvent('mouseover', true, true)
         return [
-          this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-whisker`),
-          this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-whisker`),
-          this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-upper-quartile`),
-          this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-lower-quartile`),
-          this.$el.querySelector(`.fjs-box[data-label="${label}"] .fjs-median`)
+          this.$refs[`${label}-upper-whisker`][0],
+          this.$refs[`${label}-lower-whisker`][0],
+          this.$refs[`${label}-upper-quartile`][0],
+          this.$refs[`${label}-lower-quartile`][0],
+          this.$refs[`${label}-median`][0]
         ].map(el => {
           el.dispatchEvent(event)
           return el._tippy
@@ -386,9 +395,9 @@
           this.$set(this.dataUrls, label, canvas.toDataURL())
         })
       },
-      resize ({height, width}) {
-        this.height = height
+      resize (width, height) {
         this.width = width
+        this.height = height
       },
       runAnalysisWrapper (args) {
         runAnalysis('compute-boxplot', args)

src/vue/charts/CorrelationAnalysis.vue

@@ -52,13 +52,13 @@
             </div>
           </draggable>
         </html2svg>
-        <g class="fjs-corr-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
-        <g class="fjs-corr-axis fjs-x-axis-2"></g>
-        <g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
-        <g class="fjs-corr-axis fjs-y-axis-1"></g>
+        <g class="fjs-corr-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g>
+        <g class="fjs-corr-axis" ref="xAxis2"></g>
+        <g class="fjs-corr-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g>
+        <g class="fjs-corr-axis" ref="yAxis1"></g>
         <crosshair :width="padded.width" :height="padded.height"/>
         <image :href="dataUrl" :width="padded.width" :height="padded.height"></image>
-        <g class="fjs-brush"></g>
+        <g class="fjs-brush" ref="brush"></g>
         <text class="fjs-axis-label"
               :x="padded.width / 2"
               :y="-margin.top / 2"
@@ -125,7 +125,7 @@
         params: {
           method: 'pearson'
         },
-        shownResults: {  // initially computed
+        shownResults: { // initially computed
           coef: 0,
           p_value: 0,
           slope: 0,
@@ -135,7 +135,7 @@
           y_label: '',
           data: []
         },
-        tmpResults: {  // on-the-fly computed
+        tmpResults: { // on-the-fly computed
           coef: 0,
           p_value: 0,
           slope: 0,
@@ -379,17 +379,17 @@
       'axis': {
         handler: function (newAxis) {
           this.$nextTick(() => {
-            d3.select(this.$el.querySelector('.fjs-y-axis-2')).call(newAxis.y2)
-            d3.select(this.$el.querySelector('.fjs-x-axis-2')).call(newAxis.x2)
-            d3.select(this.$el.querySelector('.fjs-x-axis-1')).call(newAxis.x1)
-            d3.select(this.$el.querySelector('.fjs-y-axis-1')).call(newAxis.y1)
+            d3.select(this.$refs.yAxis2).call(newAxis.y2)
+            d3.select(this.$refs.xAxis2).call(newAxis.x2)
+            d3.select(this.$refs.xAxis1).call(newAxis.x1)
+            d3.select(this.$refs.yAxis1).call(newAxis.y1)
           })
         }
       },
       'brush': {
         handler: function (newBrush) {
           this.$nextTick(() => {
-            d3.select(this.$el.querySelector('.fjs-brush')).call(newBrush)
+            d3.select(this.$refs.brush).call(newBrush)
           })
         }
       },
@@ -442,7 +442,7 @@
         })
         this.dataUrl = this.canvas.toDataURL('image/png')
       },
-      resize ({width, height}) {
+      resize (width, height) {
         this.width = width
         this.height = height
       },

src/vue/charts/Heatmap.vue

@@ -307,7 +307,7 @@
               range.push(i * this.grid.main.width)
             }
             range = range.concat([
-              (this.cols.length - 2) * this.grid.main.width,  // '$padding_col$'
+              (this.cols.length - 2) * this.grid.main.width, // '$padding_col$'
               (this.cols.length - 2) * this.grid.main.width + this.grid.padding.width // '$cluster_col$'
             ])
             return range
@@ -316,8 +316,8 @@
           .domain(this.rows)
           .range((() => {
             let range = [
-              0,  // '$cluster_row$'
-              this.grid.colCluster.height  // '$padding_row$'
+              0, // '$cluster_row$'
+              this.grid.colCluster.height // '$padding_row$'
             ]
             for (let i = 2; i < this.rows.length; i++) {
               range.push(this.grid.colCluster.height + this.grid.padding.height + (i - 2) * this.grid.main.height)
@@ -443,9 +443,9 @@
             this.cluster.results.cols = results['col_clusters']
           })
       },
-      resize ({height, width}) {
-        this.height = height
+      resize (width, height) {
         this.width = width
+        this.height = height
       },
       update_numericArrayData (ids) {
         this.numericArrayDataIds = ids

src/vue/charts/PCA.vue

@@ -54,13 +54,13 @@
             </div>
           </draggable>
         </html2svg>
-        <g class="fjs-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
-        <g class="fjs-axis fjs-x-axis-2"></g>
-        <g class="fjs-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
-        <g class="fjs-axis fjs-y-axis-1"></g>
+        <g class="fjs-axis" ref="yAxis2" :transform="`translate(${padded.width}, 0)`"></g>
+        <g class="fjs-axis" ref="xAxis2"></g>
+        <g class="fjs-axis" ref="xAxis1" :transform="`translate(0, ${padded.height})`"></g>
+        <g class="fjs-axis" ref="yAxis1"></g>
         <crosshair :width="padded.width" :height="padded.height"/>
         <image :href="dataUrls.main" :width="padded.width" :height="padded.height"></image>
-        <g class="fjs-brush"></g>
+        <g class="fjs-brush" ref="brush"></g>
         <text :x="padded.width / 2"
               :y="- margin.top / 2"
               text-anchor="middle"
@@ -330,17 +330,17 @@
       'axis': {
         handler: function (newAxis) {
           this.$nextTick(() => {
-            d3.select(this.$el.querySelector('.fjs-y-axis-2')).call(newAxis.y2)
-            d3.select(this.$el.querySelector('.fjs-x-axis-2')).call(newAxis.x2)
-            d3.select(this.$el.querySelector('.fjs-x-axis-1')).call(newAxis.x1)
-            d3.select(this.$el.querySelector('.fjs-y-axis-1')).call(newAxis.y1)
+            d3.select(this.$refs.yAxis2).call(newAxis.y2)
+            d3.select(this.$refs.xAxis2).call(newAxis.x2)
+            d3.select(this.$refs.xAxis1).call(newAxis.x1)
+            d3.select(this.$refs.yAxis1).call(newAxis.y1)
           })
         }
       },
       'brush': {
         handler: function (newBrush) {
           this.$nextTick(() => {
-            d3.select(this.$el.querySelector('.fjs-brush')).call(newBrush)
+            d3.select(this.$refs.brush).call(newBrush)
           })
         }
       },
@@ -395,9 +395,9 @@
         this.dataUrls.xDist = xCanvas.toDataURL()
         this.dataUrls.yDist = yCanvas.toDataURL()
       },
-      resize ({height, width}) {
-        this.height = height
+      resize (width, height) {
         this.width = width
+        this.height = height
       },
       update_featureData (ids) {
         this.featureData = ids

src/vue/components/Chart.vue

@@ -5,24 +5,31 @@
 </template>
 
 <script>
+  import ResizeObserver from 'resize-observer-polyfill'
   export default {
     name: 'chart',
+    data () {
+      return {
+        observer: null
+      }
+    },
     mounted () {
-      window.addEventListener('resize', this.resize)
+      this.observer = new ResizeObserver(this.resize)
+      this.observer.observe(this.$el)
       window.addEventListener('load', this.resize)
       this.resize()
     },
     beforeDestroy () {
-      window.removeEventListener('resize', this.resize)
+      this.observer.disconnect()
       window.removeEventListener('load', this.resize)
     },
     methods: {
       resize () {
-        const width = this.$parent.$el.parentNode.getBoundingClientRect().width
-        const height = this.$parent.$el.parentNode.getBoundingClientRect().height
+        const width = this.$el.getBoundingClientRect().width
+        const height = this.$el.getBoundingClientRect().height
         const fontSize = Math.ceil((height < width ? height : width) / 50)
         this.$el.style['font-size'] = fontSize + 'pt'
-        this.$emit('resize', {width, height})
+        this.$emit('resize', width, height)
       },
       focusControlPanel () {
         const controlPanel = this.$children.find(d => d.$options.name === 'control-panel')

src/vue/components/ControlPanel.vue

@@ -78,14 +78,18 @@
         this.focused = false
       },
       unfocusAll () {
-        Array.prototype.forEach.call(document.querySelectorAll('.fjs-control-panel'), panel => {
-          panel.__vue__.unFocus()
-        })
+        store.getters.controlPanel.panels.forEach(panel => panel.unFocus())
       }
     },
     mounted () {
       this.unfocusAll()
       this.focused = true
+      const panels = [...store.getters.controlPanel.panels, this]
+      store.dispatch('setControlPanel', {panels})
+    },
+    beforeDestroy () {
+      const panels = store.getters.controlPanel.panels.filter(panel => panel._uid !== this._uid)
+      store.dispatch('setControlPanel', {panels})
     },
     components: {
       TaskView

src/vue/components/DataBox.vue

@@ -18,7 +18,10 @@
           <span class="fjs-options" @click="toggleDataEntryBody(item.task_id)">&#9776;</span>
         </div>
 
-        <div class="fjs-data-entry-body" :data-state="item.etl_state" :data-id="item.task_id">
+        <div class="fjs-data-entry-body"
+             ref="${item.task_id}-data-entry-body"
+             :data-state="item.etl_state"
+             :data-id="item.task_id">
           <div class="fjs-action-btns">
             <span class="fjs-reload-btn" @click="reloadData(item.task_id)">&#8635;</span>
             <span class="fjs-delete-btn" @click="deleteData(item.task_id)">&#215;</span>
@@ -105,7 +108,7 @@
         }
       },
       toggleDataEntryBody (taskID) {
-        const $body = $(this.$el.querySelector(`.fjs-data-entry-body[data-id="${taskID}"]`))
+        const $body = $(this.$refs[`${taskID}-data-entry-body`])
         $body.slideToggle(500)
       },
       reloadData (taskID) {

src/vue/components/HTML2SVG.vue

@@ -84,11 +84,11 @@
       }
       vm.$el.appendChild(this.$refs.htmlContent)
       this.$nextTick(this.setPosition)
-      window.addEventListener('scroll', this.setPosition)
+      window.addEventListener('scroll', this.setPosition, true)
     },
     beforeDestroy () {
       this.$refs.htmlContent.remove()
-      window.removeEventListener('scroll', this.setPosition)
+      window.removeEventListener('scroll', this.setPosition, true)
     }
   }
 </script>