Commit 0e956a41 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Showing first scatter plot demo

parent 9e5e6fb5
......@@ -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
<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;
}
......
<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;
......
......@@ -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') {
......
......@@ -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([
{
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment