Showing first scatter plot demo

package.json

@@ -40,6 +40,9 @@
     "jasmine-core": "^2.5.2",
     "karma-jasmine": "^1.1.0",
 
-    "jsdoc": "^3.4.3"
+    "jsdoc": "^3.4.3",
+
+    "d3": "^4.7.4",
+    "d3-tip": "^0.7.1"
   }
 }
\ No newline at end of file

src/components/DataBox.vue

 <template>
-  <div>
+  <div id="data-box">
     <label for="data-container" :tooltip="tooltip">{{ header }}</label>
-    <div id="data-container">
+    <div id="data-container" style="height: 80%;">
       <div class="data-item" v-for="(item, index) in items">
         <input type="checkbox"
                :id="'data-check-' + index"
@@ -51,11 +51,13 @@
 </script>
 
 <style scoped>
+  #data-box {
+    width: 30%;
+  }
+
   #data-container {
     border: 1px solid #ccc;
     border-radius: 8px;
-    width: 300px;
-    height: 200px;
     overflow-y: scroll;
     padding: 5px 5px 5px 5px;
   }

src/components/charts/CorrelationAnalysis.vue

 <template>
-  <div>
-    <div class="data-box-container">
+  <div style="height: 100%; width: 100%">
+
+    <div id="data-box-section" style="height: 25%;">
       <data-box header="X and Y variables"
                 dataType="numerical"
                 v-on:update="update_xyData">
@@ -10,12 +11,21 @@
                 v-on:update="update_annotationData">
       </data-box>
     </div>
-    <input
-        id="run-analysis-btn"
-        type="button"
-        @click="createPlot"
-        value="Run Analysis"
-        :disabled="disabled"/>
+
+    <input id="run-analysis-btn"
+           type="button"
+           @click="runAnalysisWrapper"
+           value="Run Analysis"
+           :disabled="disabled"/>
+
+    <div id="visualisation-section" style="height: 75%;">
+      <svg width="100%" height="100%">
+        <g :style="{transform: `translate(${margin.left}px, ${margin.top}px)`}">
+          <circle :cx="scales.x(point.x)" :cy="scales.y(point.y)" r="4" v-for="point in points"></circle>
+        </g>
+      </svg>
+    </div>
+
   </div>
 </template>
 
@@ -23,10 +33,13 @@
 <script>
   import DataBox from '../DataBox.vue'
   import requestHandling from '../mixins/request-handling'
+  import * as d3 from 'd3'
   export default {
     name: 'correlation-analysis',
     data () {
       return {
+        width: 0,
+        height: 0,
         xyData: [],
         annotationData: [],
         get args () {
@@ -34,14 +47,43 @@
             x: `$${this.xyData[0]}$`,
             y: `$${this.xyData[1]}$`
           }
-        }
+        },
+        margin: {
+          left: 50,
+          top: 50,
+          right: 50,
+          bottom: 50
+        },
+        analysisResults: {},
+        scales: {
+          x: null,
+          y: null
+        },
+        points: []
       }
     },
     computed: {
       disabled () {
         return this.xyData.length !== 2
+      },
+      padded () {
+        const width = this.width - this.margin.left - this.margin.right
+        const height = this.height - this.margin.top - this.margin.bottom
+        return { width, height }
+      }
+    },
+    watch: {
+      analysisResults: function () {
+        this.updateChart()
       }
     },
+    mounted() {
+      window.addEventListener('resize', this.onResize)
+      this.onResize() // initial call
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.onResize)
+    },
     components: {
       DataBox
     },
@@ -49,21 +91,41 @@
       requestHandling
     ],
     methods: {
-      createPlot () {
+      runAnalysisWrapper () {
         // function made available via requestHandling mixin
         this.runAnalysis({job_name: 'compute-correlation', args: this.args})
           .then(response => {
-            console.log(response)
-          })
-          .catch(error => {
-            console.error(error)
+            const results = JSON.parse(response)
+            results.data = JSON.parse(results.data)
+            this.analysisResults = results
           })
+          .catch(error => console.error(error))
+      },
+      onResize () {
+        const section = this.$el.querySelector('#visualisation-section')
+        this.height = section.clientHeight
+        this.width = section.clientWidth
       },
       update_xyData (ids) {
         this.xyData = ids
       },
       update_annotationData (ids) {
         this.annotationData = ids
+      },
+      updateChart () {
+        this.points = Object.keys(this.analysisResults.data.id).map(key => {
+          return {
+            x: this.analysisResults.data[this.analysisResults.x_label][key],
+            y: this.analysisResults.data[this.analysisResults.y_label][key],
+            id: this.analysisResults.data.id[key]
+          }
+        })
+        this.scales.x = d3.scaleLinear()
+          .domain(d3.extent(this.points.map(d => d.x)))
+          .range([0, this.padded.width])
+        this.scales.y = d3.scaleLinear()
+          .domain(d3.extent(this.points.map(d => d.y)))
+          .range([this.padded.height, 0])
       }
     }
   }
@@ -71,7 +133,7 @@
 
 
 <style scoped>
-  .data-box-container {
+  #data-box-section {
     display: flex;
     flex-direction: row;
     justify-content: space-around;

src/components/mixins/request-handling.js

@@ -6,11 +6,13 @@ export default {
       function timeout (ms) {
         return new Promise(resolve => setTimeout(resolve, ms))
       }
-      const jobID = await store.getters.requestManager.createAnalysis({job_name, args})
+      const rv1 = await store.getters.requestManager.createAnalysis({job_name, args})
+      const jobID = rv1.data.job_id
       let counter = 0
       while (counter < 1000) {
         await timeout(++counter * 200)
-        const jobInfo = await store.getters.requestManager.getAnalysisStatus({jobID})
+        const rv2 = await store.getters.requestManager.getAnalysisStatus({jobID})
+        const jobInfo = rv2.data
         if (jobInfo.state === 'SUCCESS') {
           return jobInfo.result
         } else if (jobInfo.state === 'FAILURE') {

test/charts/test-chart.html

@@ -6,7 +6,9 @@
 </head>
 
 <body>
+<div style="height: 1000px; width: 1000px">
   <div id="placeholder"></div>
+</div>
 </body>
 
 <script>
@@ -15,8 +17,8 @@
     thisBaseURL: 'http://10.79.2.192:8080',
     fractalisBaseURL: 'http://127.0.0.1:5000',
     getAuth () {
-        return credentials
-      }
+      return credentials
+    }
   })
   fjs.loadData([
     {