added significance meassure bar

src/main.js

@@ -25,7 +25,7 @@ class FractalJS {
   }
 
   // noinspection JSMethodCanBeStatic
-  setSubsets (...subsets) {
+  setSubsets (subsets) {
     store.dispatch('setSubsets', subsets)
   }
 

src/vue/charts/Boxplot.vue

@@ -30,41 +30,47 @@
           <g class="fjs-boxplot-axis fjs-y-axis"></g>
           <g class="fjs-box"
              :transform="`translate(${scales.x(label)}, 0)`"
-             v-tooltip="{title: label, options: {position: 'bottom'}}"
+             v-tooltip="{position: 'bottom'}"
+             :title="label"
              :data-label="label"
              @mouseenter="showTooltip(label)"
              @mouseleave="hideTooltip(label)"
              v-for="label in labels" >
             <line class="fjs-upper-whisker"
-                  v-tooltip="{title: results.statistics[label].u_wsk, options: {position: 'right'}}"
+                  :title="results.statistics[label].u_wsk"
+                  v-tooltip="{position: 'right'}"
                   :x1="- boxplotWidth / 6"
                   :y1="tweened.boxes[label].u_wsk"
                   :x2="boxplotWidth / 6"
                   :y2="tweened.boxes[label].u_wsk">
             </line>
             <line class="fjs-lower-whisker"
-                  v-tooltip="{title: results.statistics[label].l_wsk, options: {position: 'right'}}"
+                  :title="results.statistics[label].l_wsk"
+                  v-tooltip="{position: 'right'}"
                   :x1="- boxplotWidth / 6"
                   :y1="tweened.boxes[label].l_wsk"
                   :x2="boxplotWidth / 6"
                   :y2="tweened.boxes[label].l_wsk">
             </line>
             <line class="fjs-upper-quartile"
-                  v-tooltip="{title: results.statistics[label].u_qrt, options: {position: 'left'}}"
+                  :title="results.statistics[label].u_qrt"
+                  v-tooltip="{position: 'left'}"
                   :x1="- boxplotWidth / 2"
                   :y1="tweened.boxes[label].u_qrt"
                   :x2="boxplotWidth / 2"
                   :y2="tweened.boxes[label].u_qrt">
             </line>
             <line class="fjs-lower-quartile"
-                  v-tooltip="{title: results.statistics[label].l_qrt, options: {position: 'left'}}"
+                  :title="results.statistics[label].l_qrt"
+                  v-tooltip="{position: 'left'}"
                   :x1="- boxplotWidth / 2"
                   :y1="tweened.boxes[label].l_qrt"
                   :x2="boxplotWidth / 2"
                   :y2="tweened.boxes[label].l_qrt">
             </line>
             <line class="fjs-median"
-                  v-tooltip="{title: results.statistics[label].median, options: {position: 'right'}}"
+                  :title="results.statistics[label].median"
+                  v-tooltip="{position: 'right'}"
                   :x1="- boxplotWidth / 2"
                   :y1="tweened.boxes[label].median"
                   :x2="boxplotWidth / 2"
@@ -89,7 +95,8 @@
                   :height="tweened.boxes[label].l_qrt - tweened.boxes[label].median">
             </rect>
             <circle class="fjs-points"
-                    v-tooltip="{title: point.tooltip, options: {arrow: true, theme: 'light'}}"
+                    :title="point.tooltip"
+                    v-tooltip="{arrow: true, theme: 'light'}"
                     :cx="point.jitter"
                     :cy="scales.y(point.value)"
                     r="4"

src/vue/charts/CorrelationAnalysis.vue

@@ -53,11 +53,13 @@
                   r="4"
                   :fill="categoryColors[categories.indexOf(point.category) % categoryColors.length]"
                   :stroke="subsetColors[point.subset]"
-                  v-tooltip="{title: point.tooltip}"
+                  :title="point.tooltip"
+                  v-tooltip
                   v-for="point in shownPoints.all">
           </circle>
           <line class="fjs-lin-reg-line"
-                v-tooltip="{title: regLine.tooltip, options: {followCursor: true}}"
+                :title="regLine.tooltip"
+                v-tooltip="{followCursor: true}"
                 :x1="tweened.regLine.x1"
                 :x2="tweened.regLine.x2"
                 :y1="tweened.regLine.y1"

src/vue/charts/Heatmap.vue

@@ -26,18 +26,30 @@
                 v-for="label in labels.variables">
             {{ label.text }}
           </text>
+          <rect class="fjs-sig-bar"
+                :x="bar.x"
+                :y="bar.y"
+                :height="bar.height"
+                :width="bar.width"
+                :fill="bar.fill"
+                :title="bar.tooltip"
+                v-tooltip
+                v-for="bar in sigBars">
+          </rect>
           <rect class="fjs-cell"
                 :x="cell.x"
                 :y="cell.y"
                 :height="cell.height"
                 :width="cell.width"
                 :fill="cell.fill"
-                v-tooltip="{title: cell.tooltip}"
+                :title="cell.tooltip"
+                v-tooltip
                 v-for="cell in cells">
           </rect>
         </g>
       </svg>
     </div>
+    <task-view></task-view>
   </div>
 </template>
 
@@ -58,8 +70,10 @@
         height: 500,
         colorScale: d3.interpolateCool,
         numericArrayDataIds: [],
+        currentSigMeassure: 'logFC',
         results: {
-          data: []
+          data: [],
+          stats: []
         }
       }
     },
@@ -76,7 +90,7 @@
         return this.numericArrayDataIds.length > 0
       },
       margin () {
-        const left = 50
+        const left = this.width / 5
         const top = this.height / 10
         const right = this.width / 10
         const bottom = 50
@@ -108,6 +122,16 @@
           .range(this.uniqueVariables.map((d, i) => i * this.gridBox.height))
         return { x, y }
       },
+      currentStats () {
+        return this.results.stats.map(d => d[this.currentSigMeassure])
+      },
+      sigScales () {
+        const x =  d3.scaleLinear()
+          .domain(d3.extent(this.currentStats))
+          .range([0, this.margin.left])
+        const y = this.scales.y // has the same y scale than the heatmap grid
+        return { x, y }
+      },
       cells () {
         return this.results.data.map(d => {
           return {
@@ -127,6 +151,19 @@
           }
         })
       },
+      sigBars () {
+        return this.results.stats.map(d => {
+          return {
+            x: - this.sigScales.x(d[this.currentSigMeassure]),
+            y: this.sigScales.y(d.variable),
+            width: this.sigScales.x(d[this.currentSigMeassure]),
+            height: this.gridBox.height,
+            fill: d[this.currentSigMeassure] < 0 ? '#0072ff' : '#ff006a',
+            tooltip: `
+            `
+          }
+        })
+      },
       labels () {
         const ids = this.uniqueIds.map(id => {
           const transform = `translate(${this.scales.x(id) + this.gridBox.width / 2}, -10)rotate(-45)`
@@ -137,7 +174,7 @@
           return { transform, fontSize, text }
         })
         const variables = this.uniqueVariables.map(variable => {
-          const transform = `translate(${this.padded.width + 10}, ${this.scales.y(variable) + this.gridBox.height / 2})`
+          const transform = `translate(${this.padded.width + 10}, ${this.scales.y(variable) + this.gridBox.height})`
           const fontSize = `${this.gridBox.height}px`
           const text = truncateTextUntil(
             {text: variable, font: `${this.gridBox.height}px Roboto`, maxWidth: this.margin.right})
@@ -152,8 +189,11 @@
           .then(response => {
             const results = JSON.parse(response)
             const data = JSON.parse(results.data)
+            const stats = JSON.parse(results.stats)
             results.data = Object.keys(data).map(key => data[key])
+            results.stats = Object.keys(stats).map(key => stats[key])
             deepFreeze(results) // massively improve performance by telling Vue that the objects properties won't change
+            deepFreeze(stats) // massively improve performance by telling Vue that the objects properties won't change
             this.results = results
           })
       },
@@ -222,4 +262,7 @@
           shape-rendering: crispEdges
         .fjs-cell:hover
           opacity: 0.4
+        .fjs-sig-bar
+          stroke-width: none
+          shape-rendering: crispEdges
 </style>
\ No newline at end of file

src/vue/directives/tooltip.js

@@ -7,20 +7,13 @@ export default {
       vnode.context._tippyInstances = {}
     }
     const uuid = uuid4()
-    el.setAttribute('title', binding.value.title)
     el.setAttribute('data-uuid', uuid)
     const tip = tippy(el, Object.assign({
       performance: true,
       arrow: true,
-      theme: 'light'
-    }, binding.value.options))
+      theme: 'light',
+      dynamicTitle: true
+    }, binding.value))
     vnode.context._tippyInstances[uuid] = tip
-  },
-  update (el, binding, vnode) {
-    const uuid = el.getAttribute('data-uuid')
-    const tip = vnode.context._tippyInstances[uuid]
-    const popper = tip.getPopperElement(el)
-    el.setAttribute('title', binding.value.title)
-    tip.update(popper)
   }
 }

test/charts/heatmap/heatmap.html

@@ -24,6 +24,9 @@
       return credentials1
     }
   })
+
+  fjs.setSubsets([['59810bf1f700004b0430179f', '59810bf1f700004b043017a0', '59810bf1f700004b043017a1', '59810bf1f700004b043017a2', '59810bf1f700004b043017a3', '59810bf1f700004b043017a4', '59810bf1f700004b043017a5', '59810bf1f700004b043017a6', '59810bf1f700004b043017a7', '59810bf1f700004b043017a8', '59810bf1f700004b043017a9', '59810bf1f700004b043017aa', '59810bf1f700004b043017ab', '59810bf1f700004b043017ac', '59810bf1f700004b043017ad', '59810bf1f700004b043017ae', '59810bf1f700004b043017af', '59810bf1f700004b043017b0', '59810bf1f700004b043017b1', '59810bf1f700004b043017b2', '59810bf1f700004b043017b3', '59810bf1f700004b043017b4', '59810bf1f700004b043017b5'], ['59810bf1f700004b043017b6', '59810bf1f700004b043017b7', '59810bf1f700004b043017b8', '59810bf1f700004b043017b9', '59810bf1f700004b043017ba', '59810bf1f700004b043017bb', '59810bf1f700004b043017bc', '59810bf1f700004b043017bd', '59810bf1f700004b043017be', '59810bf1f700004b043017bf', '59810bf1f700004b043017c0', '59810bf1f700004b043017c1', '59810bf1f700004b043017c2', '59810bf1f700004b043017c3', '59810bf1f700004b043017c4', '59810bf1f700004b043017c5', '59810bf1f700004b043017c6', '59810bf1f700004b043017c7', '59810bf1f700004b043017c8', '59810bf1f700004b043017c9', '59810bf1f700004b043017ca', '59810bf1f700004b043017cb', '59810bf1f700004b043017cc', '59810bf1f700004b043017cd', '59810bf1f700004b043017ce', '59810bf1f700004b043017cf', '59810bf1f700004b043017d0', '59810bf1f700004b043017d1', '59810bf1f700004b043017d2', '59810bf1f700004b043017d3', '59810bf1f700004b043017d4', '59810bf1f700004b043017d5', '59810bf1f700004b043017d6', '59810bf1f700004b043017d7', '59810bf1f700004b043017d8', '59810bf1f700004b043017d9', '59810bf1f700004b043017da', '59810bf1f700004b043017db', '59810bf1f700004b043017dc', '59810bf2f700004b043017dd', '59810bf2f700004b043017de', '59810bf2f700004b043017df', '59810bf2f700004b043017e0', '59810bf2f700004b043017e1', '59810bf2f700004b043017e2', '59810bf2f700004b043017e3', '59810bf2f700004b043017e4', '59810bf2f700004b043017e5', '59810bf2f700004b043017e6', '59810bf2f700004b043017e7', '59810bf2f700004b043017e8']])
+
   function loadData () {
     fjs.loadData([
       {
@@ -47,6 +50,7 @@
         data_set: 'egait.features'
       }
     ])
+
   }
 
   function deleteData () {