Some css and eye candy

src/assets/base.sass

@@ -6,3 +6,10 @@
   font-weight: 400
   font-size: 14px
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2')
+
+*
+  font-family: Roboto, sans-serif
+
+.fjs-seperator
+  width: 100%
+  margin: 20px 0 20px 0
\ No newline at end of file

src/vue/charts/Boxplot.vue

@@ -25,7 +25,7 @@
       </div>
     </control-panel>
 
-    <div class="fjs-vis-container">
+    <chart class="fjs-chart">
       <svg :width="width"
            :height="height">
         <g :transform="`translate(${margin.left}, ${margin.top})`">
@@ -113,12 +113,14 @@
           </g>
         </g>
       </svg>
-    </div>
+    </chart>
   </div>
 </template>
 
 <script>
   import DataBox from '../components/DataBox.vue'
+  import ControlPanel from '../components/ControlPanel.vue'
+  import Chart from '../components/Chart.vue'
   import store from '../../store/store'
   import runAnalysis from '../mixins/run-analysis'
   import * as d3 from 'd3'
@@ -126,7 +128,6 @@
   import deepFreeze from 'deep-freeze-strict'
   import { truncateTextUntil } from '../mixins/utils'
   import tooltip from '../directives/tooltip'
-  import ControlPanel from '../components/ControlPanel.vue'
   export default {
     name: 'boxplot',
     data () {
@@ -343,7 +344,7 @@
         this.catData = ids
       },
       handleResize () {
-        const container = this.$el.querySelector('.fjs-vis-container svg')
+        const container = this.$el.querySelector('.fjs-chart svg')
         // noinspection JSSuspiciousNameCombination
         this.height = container.getBoundingClientRect().width
         this.width = container.getBoundingClientRect().width
@@ -363,7 +364,8 @@
     },
     components: {
       ControlPanel,
-      DataBox
+      DataBox,
+      Chart
     },
     directives: {
       tooltip
@@ -381,19 +383,13 @@
 <style lang="sass" scoped>
   @import './src/assets/base.sass'
 
-  *
-    font-family: Roboto, sans-serif
-
   .fjs-boxplot
     height: 100%
     width: 100%
     display: flex
     flex-direction: column
     .fjs-control-panel
-      hr
-        width: 100%
-        margin: 20px 0 20px 0
-    .fjs-vis-container
+    .fjs-chart
       flex: 1
       display: flex
       .fjs-tooltip

src/vue/charts/CorrelationAnalysis.vue

@@ -26,7 +26,7 @@
       </fieldset>
     </control-panel>
 
-    <div class="fjs-vis-container">
+    <chart class="fjs-chart">
       <svg :height="height" :width="width">
         <g :transform="`translate(${margin.left}, ${margin.top})`">
           <g class="fjs-corr-axis fjs-x-axis-1" :transform="`translate(0, ${padded.height})`"></g>
@@ -108,19 +108,20 @@
           </tr>
         </table>
       </div>
-    </div>
+    </chart>
   </div>
 </template>
 
 <script>
   import DataBox from '../components/DataBox.vue'
+  import ControlPanel from '../components/ControlPanel.vue'
+  import Chart from '../components/Chart.vue'
   import store from '../../store/store'
   import runAnalysis from '../mixins/run-analysis'
   import * as d3 from 'd3'
   import { TweenLite } from 'gsap'
   import tooltip from '../directives/tooltip.js'
   import deepFreeze from 'deep-freeze-strict'
-  import ControlPanel from '../components/ControlPanel.vue'
   export default {
     name: 'correlation-analysis',
     data () {
@@ -451,7 +452,8 @@
     },
     components: {
       ControlPanel,
-      DataBox
+      DataBox,
+      Chart
     },
     directives: {
       tooltip
@@ -475,7 +477,7 @@
           .catch(error => console.error(error))
       },
       handleResize () {
-        const container = this.$el.querySelector(`.fjs-vis-container svg`)
+        const container = this.$el.querySelector(`.fjs-chart svg`)
         // noinspection JSSuspiciousNameCombination
         this.height = container.getBoundingClientRect().width
         this.width = container.getBoundingClientRect().width
@@ -494,18 +496,12 @@
 <style lang="sass" scoped>
   @import './src/assets/base.sass'
 
-  *
-    font-family: Roboto, sans-serif
-
   .fjs-correlation-analysis
     height: 100%
     width: 100%
     display: flex
     flex-direction: column
     .fjs-control-panel
-      hr
-        width: 100%
-        margin: 20px 0 20px 0
     .fjs-correlation-method
       white-space: nowrap
       border: solid 1px #fff
@@ -513,7 +509,7 @@
       border-radius: 8px
       margin: 1%
 
-    .fjs-vis-container
+    .fjs-chart
       flex: 1
       display: flex
       svg
@@ -540,7 +536,6 @@
         flex-direction: column
         .fjs-stats-table
           width: 100%
-          margin: 1%
           border-spacing: 0
           border-collapse: collapse
           font-size: 0.875rem

src/vue/charts/Heatmap.vue

@@ -7,9 +7,10 @@
                 v-on:update="update_numericArrayData">
       </data-box>
       <hr class="fjs-seperator"/>
+
     </control-panel>
 
-    <div class="fjs-vis-container">
+    <chart class="fjs-chart">
       <svg height="100%" width="100%">
         <g :transform="`translate(${margin.left}, ${margin.top})`">
           <text class="fjs-id-label"
@@ -46,19 +47,20 @@
           </rect>
         </g>
       </svg>
-    </div>
+    </chart>
   </div>
 </template>
 
 <script>
   import DataBox from '../components/DataBox.vue'
+  import ControlPanel from '../components/ControlPanel.vue'
+  import Chart from '../components/Chart.vue'
   import store from '../../store/store'
   import runAnalysis from '../mixins/run-analysis'
   import * as d3 from 'd3'
   import tooltip from '../directives/tooltip.js'
   import deepFreeze from 'deep-freeze-strict'
   import { truncateTextUntil } from '../mixins/utils'
-  import ControlPanel from '../components/ControlPanel.vue'
   export default {
     name: 'heatmap',
     data () {
@@ -80,12 +82,16 @@
           numerical_arrays: this.numericArrayDataIds,
           numericals: [],
           categoricals: [],
+          id_filter: this.idFilter,
           subsets: store.getters.subsets
         }
       },
       validArgs () {
         return this.numericArrayDataIds.length > 0
       },
+      idFilter () {
+        return store.getters.filter('ids')
+      },
       margin () {
         const left = this.width / 5
         const top = this.height / 10
@@ -197,7 +203,7 @@
           })
       },
       handleResize () {
-        const container = this.$el.querySelector('.fjs-vis-container svg')
+        const container = this.$el.querySelector('.fjs-chart svg')
         this.height = container.getBoundingClientRect().height
         this.width = container.getBoundingClientRect().width
       },
@@ -223,7 +229,8 @@
     },
     components: {
       ControlPanel,
-      DataBox
+      DataBox,
+      Chart
     },
     directives: {
       tooltip
@@ -234,9 +241,6 @@
 <style lang="sass" scoped>
   @import './src/assets/base.sass'
 
-  *
-    font-family: Roboto, sans-serif
-
   .fjs-heatmap
     height: 100%
     width: 100%
@@ -244,11 +248,8 @@
     flex-direction: column
 
     .fjs-control-panel
-      hr
-        width: 100%
-        margin: 20px 0 20px 0
 
-    .fjs-vis-container
+    .fjs-chart
       flex: 1
       display: flex
       svg

src/vue/components/Chart.vue

+<template>
+  <div class="fjs-chart">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'chart'
+  }
+</script>
+
+<style lang="sass" scoped>
+  .fjs-chart
+    border: 2px solid rgba(0, 0, 0, 0)
+    &:hover
+      border: 2px solid #29d5ff
+</style>

src/vue/components/ControlPanel.vue

@@ -100,6 +100,8 @@
 </script>
 
 <style lang="sass" scoped>
+  @import './src/assets/base.sass'
+
   .fjs-control-panel
     background: rgba(0, 0, 0, 0.8)
     color: white
@@ -111,9 +113,7 @@
     padding: 20px
     height: 100%
     min-width: 15vw
-    hr
-      width: 100%
-      margin: 20px 0 20px 0
+
     .fjs-lock-btn
       margin-bottom: 5vh
       cursor: pointer

src/vue/components/DataBox.vue

@@ -69,8 +69,6 @@
         handler: function (newItems) {
           const existingIDs = newItems.map(d => d.task_id)
           // this removes selected IDs when they expired in the back end
-          console.log(existingIDs)
-          console.log(this.selectedIDs.filter(id => existingIDs.indexOf(id) !== -1))
           this.selectedIDs = this.selectedIDs.filter(id => existingIDs.indexOf(id) !== -1)
         }
       }

src/vue/components/TaskView.vue

@@ -40,10 +40,13 @@
 </script>
 
 <style lang="sass" scoped>
+  @import './src/assets/base.sass'
+
   .fjs-task-view
     display: flex
     flex-direction: column
     justify-content: flex-start
+
     .fjs-state-container
       width: 100%
       display: flex

test/charts/heatmap/heatmap.html

@@ -25,7 +25,7 @@
     }
   })
 
-  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']])
+  fjs.setSubsets([['5983aef1f70000250130194a', '5983aef1f70000250130194b', '5983aef1f70000250130194c', '5983aef1f70000250130194d', '5983aef1f70000250130194e', '5983aef1f70000250130194f', '5983aef1f700002501301950', '5983aef1f700002501301951', '5983aef1f700002501301952', '5983aef1f700002501301953', '5983aef1f700002501301954', '5983aef1f700002501301955', '5983aef1f700002501301956', '5983aef1f700002501301957', '5983aef1f700002501301958', '5983aef1f700002501301959', '5983aef1f70000250130195a', '5983aef1f70000250130195b', '5983aef1f70000250130195c', '5983aef1f70000250130195d', '5983aef1f70000250130195e', '5983aef1f70000250130195f', '5983aef1f700002501301960', '5983aef1f700002501301961', '5983aef1f700002501301962', '5983aef1f700002501301963', '5983aef1f700002501301964', '5983aef1f700002501301965', '5983aef1f700002501301966', '5983aef1f700002501301967', '5983aef1f700002501301968', '5983aef1f700002501301969', '5983aef1f70000250130196a', '5983aef1f70000250130196b'], ['5983aef1f70000250130196c', '5983aef1f70000250130196d', '5983aef1f70000250130196e', '5983aef1f70000250130196f', '5983aef1f700002501301970', '5983aef1f700002501301971', '5983aef1f700002501301972', '5983aef1f700002501301973', '5983aef1f700002501301974', '5983aef1f700002501301975', '5983aef1f700002501301976', '5983aef1f700002501301977', '5983aef1f700002501301978', '5983aef1f700002501301979', '5983aef1f70000250130197a', '5983aef1f70000250130197b', '5983aef1f70000250130197c', '5983aef1f70000250130197d', '5983aef1f70000250130197e', '5983aef1f70000250130197f', '5983aef1f700002501301980', '5983aef1f700002501301981', '5983aef1f700002501301982', '5983aef1f700002501301983', '5983aef1f700002501301984', '5983aef1f700002501301985', '5983aef1f700002501301986', '5983aef1f700002501301987', '5983aef1f700002501301988', '5983aef1f700002501301989', '5983aef1f70000250130198a', '5983aef1f70000250130198b', '5983aef1f70000250130198c', '5983aef1f70000250130198d', '5983aef1f70000250130198e', '5983aef1f70000250130198f', '5983aef1f700002501301990', '5983aef1f700002501301991', '5983aef1f700002501301992', '5983aef1f700002501301993']])
 
   function loadData () {
     fjs.loadData([

test/charts/multi/multi-chart.html

+<!doctype html>
+
+<head>
+  <script src="http://localhost:8080/credentials.js"></script>
+  <script src="http://localhost:8080/fractal.js"></script>
+</head>
+
+<body>
+<input type="button" onclick="loadData()" value="load data"/>
+<input type="button" onclick="deleteData()" value="delete data"/>
+<div style="height: 50%; width: 50%">
+  <div id="placeholder1"></div>
+</div>
+<div style="height: 50%; width: 50%">
+  <div id="placeholder2"></div>
+</div>
+<div style="height: 50%; width: 50%">
+  <div id="placeholder3"></div>
+</div>
+</body>
+
+<script>
+  /* eslint-disable */
+
+  const fjs = fractal.init({
+    handler: 'ada',
+    thisBaseURL: 'https://ada.parkinson.lu',
+    fractalisBaseURL: 'http://127.0.0.1:5000',
+    getAuth () {
+      return credentials1
+    }
+  })
+  function loadData () {
+    fjs.loadData([
+      {
+        dictionary: {
+          name: 'cadenceR',
+          projection: 'cadenceR',
+          label: 'Cadence Right',
+          fieldType: 'Double',
+          isArray: false
+        },
+        data_set: 'egait.features'
+      },
+      {
+        dictionary: {
+          name: 'cadenceL',
+          projection: 'cadenceL',
+          label: 'Cadence Left',
+          fieldType: 'Double',
+          isArray: false
+        },
+        data_set: 'egait.features'
+      },
+      {
+        dictionary: {
+          name: 'entropyR',
+          projection: 'entropyR',
+          label: 'Entropy Right',
+          fieldType: 'Double',
+          isArray: true
+        },
+        data_set: 'egait.features'
+      },
+      {
+        dictionary: {
+          name: 'entropyL',
+          projection: 'entropyL',
+          label: 'Entropy Left',
+          fieldType: 'Double',
+          isArray: true
+        },
+        data_set: 'egait.features'
+      }
+    ])
+  }
+
+  function deleteData () {
+    fjs.clearCache()
+  }
+
+  fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
+  fjs.setChart({chart: 'boxplot', selector: '#placeholder2'})
+  fjs.setChart({chart: 'heatmap', selector: '#placeholder3'})
+</script>