Commit 3dc51218 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Addressing some performance issues

parent 76e6049c
...@@ -4,7 +4,6 @@ module.exports = config => { ...@@ -4,7 +4,6 @@ module.exports = config => {
config.set({ config.set({
frameworks: ['jasmine'], frameworks: ['jasmine'],
files: [ files: [
'node_modules/babel-polyfill/dist/polyfill.js',
{pattern: 'test/**/*-test.js'} {pattern: 'test/**/*-test.js'}
], ],
browsers: ['Chrome'], browsers: ['Chrome'],
......
...@@ -25,8 +25,8 @@ ...@@ -25,8 +25,8 @@
"axios": "^0.16.1", "axios": "^0.16.1",
"d3": "^4.7.4", "d3": "^4.7.4",
"d3-tip": "^0.7.1", "d3-tip": "^0.7.1",
"gsap": "^1.19.1", "jquery": "^3.2.1",
"jquery": "^3.2.1" "deep-freeze-strict": "^1.1.1"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "7.0.0-alpha.3", "babel-core": "7.0.0-alpha.3",
......
<template>
<path class="fjs-icon" :d="path"></path>
</template>
<script>
export default {
name: 'icon',
props: {
shape: {
required: true
},
size: {
type: Number,
required: true
},
cx: {
type: Number,
required: true
},
cy: {
type: Number,
required: true
}
},
data () {
return {
shapes: {
'diamond': `M ${this.cx} ${this.cy} m 0 ${-0.5 * this.size} l ${0.5 * this.size} ${0.5 * this.size} l ${-0.5 * this.size} ${0.5 * this.size} l ${-0.5 * this.size} ${-0.5 * this.size} Z`,
'rectangle': `M ${this.cx} ${this.cy} m ${-0.5 * this.size} ${-0.5 * this.size} h ${this.size} v ${this.size} h ${-this.size} Z`,
'triangle': `M ${this.cx} ${this.cy} m 0 ${-0.5 * this.size} l ${0.5 * this.size} ${this.size} h ${-this.size} Z`
}
}
},
computed: {
path () {
if (isNaN(this.shape)) {
return this.shapes[this.shape]
} else {
return this.shapes[Object.keys(this.shapes)[parseInt(this.shape) % Object.keys(this.shapes).length]]
}
}
}
}
</script>
<style lang="sass" scoped>
</style>
...@@ -48,21 +48,20 @@ ...@@ -48,21 +48,20 @@
:transform="`rotate(90 ${padded.width + 10} ${padded.height / 2})`"> :transform="`rotate(90 ${padded.width + 10} ${padded.height / 2})`">
{{ shownAnalysisResults.y_label }} {{ shownAnalysisResults.y_label }}
</text> </text>
<icon class="fjs-scatterplot-point" <circle class="fjs-scatterplot-point"
:shape="point.subset" :cx="scales.x(point.x)"
:cx="scales.x(point.x)" :cy="scales.y(point.y)"
:cy="scales.y(point.y)" r="4"
:size="9" v-svgtooltip="point.tooltip"
v-svgtooltip="point.tooltip" :fill="annotationColors[annotations.indexOf(point.annotation) % annotationColors.length]"
:fill="annotationColors[annotations.indexOf(point.annotation) % annotationColors.length]" :stroke="subsetColors[point.subset]"
:key="`${point.id}-${scales.x(point.x)}-${scales.y(point.y)}`" v-for="point in shownPoints.all">
v-for="point in shownPoints.all"> </circle>
</icon>
<line class="fjs-lin-reg-line" <line class="fjs-lin-reg-line"
:x1="tweened.regLine.x1" :x1="regLine.x1"
:x2="tweened.regLine.x2" :x2="regLine.x2"
:y1="tweened.regLine.y1" :y1="regLine.y1"
:y2="tweened.regLine.y2" :y2="regLine.y2"
v-svgtooltip="regLine.tooltip"> v-svgtooltip="regLine.tooltip">
</line> </line>
<rect class="fjs-histogram-rect" <rect class="fjs-histogram-rect"
...@@ -70,14 +69,14 @@ ...@@ -70,14 +69,14 @@
:y="attr.y" :y="attr.y"
:width="attr.width" :width="attr.width"
:height="attr.height" :height="attr.height"
v-for="attr in tweened.histogramAttr.xAttr"> v-for="attr in histogramAttr.xAttr">
</rect> </rect>
<rect class="fjs-histogram-rect" <rect class="fjs-histogram-rect"
:x="attr.x" :x="attr.x"
:y="attr.y" :y="attr.y"
:width="attr.width" :width="attr.width"
:height="attr.height" :height="attr.height"
v-for="attr in tweened.histogramAttr.yAttr"> v-for="attr in histogramAttr.yAttr">
</rect> </rect>
</g> </g>
</svg> </svg>
...@@ -130,13 +129,12 @@ ...@@ -130,13 +129,12 @@
<script> <script>
import DataBox from '../DataBox.vue' import DataBox from '../DataBox.vue'
import Icon from '../Icon.vue'
import store from '../../store/store' import store from '../../store/store'
import requestHandling from '../methods/run-analysis' import requestHandling from '../methods/run-analysis'
import * as d3 from 'd3' import * as d3 from 'd3'
import svgtooltip from '../directives/v-svgtooltip' import svgtooltip from '../directives/v-svgtooltip'
import { TweenLite } from 'gsap'
import TaskView from '../TaskView.vue' import TaskView from '../TaskView.vue'
import deepFreeze from 'deep-freeze-strict'
export default { export default {
name: 'correlation-analysis', name: 'correlation-analysis',
data () { data () {
...@@ -147,6 +145,7 @@ ...@@ -147,6 +145,7 @@
xyData: [], xyData: [],
annotationData: [], annotationData: [],
annotationColors: d3.schemeCategory10, annotationColors: d3.schemeCategory10,
subsetColors: d3.schemeCategory10.slice().reverse(),
params: { params: {
method: 'pearson' method: 'pearson'
}, },
...@@ -184,14 +183,7 @@ ...@@ -184,14 +183,7 @@
} }
} }
}, },
selectedPoints: [], selectedPoints: []
tweened: {
regLine: {},
histogramAttr: {
xAttr: [],
yAttr: []
}
}
} }
}, },
computed: { computed: {
...@@ -437,38 +429,6 @@ ...@@ -437,38 +429,6 @@
d3.select(`.fjs-vm-uid-${this._uid} .fjs-brush`).call(newBrush) d3.select(`.fjs-vm-uid-${this._uid} .fjs-brush`).call(newBrush)
} }
}, },
'regLine': {
handler: function (newRegLine, oldRegLine) {
const coords = oldRegLine
const targetCoords = newRegLine
targetCoords.onUpdate = () => { this.tweened.regLine = coords }
TweenLite.to(coords, 0.5, targetCoords)
}
},
'histogramAttr': {
handler: function (newHistogramAttr, oldHistogramAttr) {
let i = Math.max.apply(null, [newHistogramAttr.xAttr.length, oldHistogramAttr.xAttr.length])
let j = Math.max.apply(null, [newHistogramAttr.yAttr.length, oldHistogramAttr.yAttr.length])
while (i--) {
const ii = i
let xAttr = oldHistogramAttr.xAttr[i] ? oldHistogramAttr.xAttr[i]
: { x: this.padded.width / 2, y: this.padded.height, width: 0, height: 0 }
const xAttrTarget = newHistogramAttr.xAttr[i] ? newHistogramAttr.xAttr[i] : { width: 0 }
xAttrTarget.onUpdate = () => { this.tweened.histogramAttr.xAttr[ii] = xAttr }
TweenLite.to(xAttr, 0.5, xAttrTarget)
}
while (j--) {
const jj = j
const yAttr = oldHistogramAttr.yAttr[j] ? oldHistogramAttr.yAttr[j]
: { x: 0, y: this.padded.height / 2, width: 0, height: 0 }
const yAttrTarget = newHistogramAttr.yAttr[j] ? newHistogramAttr.yAttr[j] : { height: 0 }
yAttrTarget.onUpdate = () => { this.tweened.histogramAttr.yAttr[jj] = yAttr }
TweenLite.to(yAttr, 0.5, yAttrTarget)
}
}
},
'idFilter': { 'idFilter': {
handler: function (newIDFilter) { handler: function (newIDFilter) {
const isFiltered = (newIDFilter.length === this.selectedPoints.length) && const isFiltered = (newIDFilter.length === this.selectedPoints.length) &&
...@@ -489,7 +449,6 @@ ...@@ -489,7 +449,6 @@
}, },
components: { components: {
DataBox, DataBox,
Icon,
TaskView TaskView
}, },
mixins: [ mixins: [
...@@ -504,6 +463,7 @@ ...@@ -504,6 +463,7 @@
const results = JSON.parse(response) const results = JSON.parse(response)
const data = JSON.parse(results.data) const data = JSON.parse(results.data)
results.data = Object.keys(data).map(key => data[key]) results.data = Object.keys(data).map(key => data[key])
deepFreeze(results) // massively improve performance by telling Vue that the objects properties won't change
if (init) { if (init) {
this.shownAnalysisResults = results this.shownAnalysisResults = results
this.tmpAnalysisResults = results this.tmpAnalysisResults = results
...@@ -512,7 +472,6 @@ ...@@ -512,7 +472,6 @@
} }
}) })
.catch(error => console.error(error)) .catch(error => console.error(error))
.then(this.handleResize)
}, },
handleResize () { handleResize () {
const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`) const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`)
...@@ -572,11 +531,10 @@ ...@@ -572,11 +531,10 @@
.fjs-histogram-rect .fjs-histogram-rect
stroke: #fff stroke: #fff
shape-rendering: crispEdges shape-rendering: crispEdges
stroke-width: 0px stroke-width: 1px
fill: #ffd100 fill: #ffd100
.fjs-scatterplot-point .fjs-scatterplot-point
stroke-width: 0 stroke-width: 2
shape-rendering: crispEdges
.fjs-scatterplot-point:hover .fjs-scatterplot-point:hover
fill: #f00 fill: #f00
.fjs-brush .fjs-brush
......
...@@ -26,8 +26,8 @@ export default { ...@@ -26,8 +26,8 @@ export default {
taskState: 'PENDING' taskState: 'PENDING'
}) })
let counter = 0 let counter = 0
while (counter < 1000) { while (counter++ < 1000) {
await timeout(++counter * 200) await timeout(400)
const rv2 = await store.getters.requestManager.getAnalysisStatus({taskID}) const rv2 = await store.getters.requestManager.getAnalysisStatus({taskID})
const taskInfo = rv2.data const taskInfo = rv2.data
if (taskInfo.state === 'SUCCESS') { if (taskInfo.state === 'SUCCESS') {
......
...@@ -92,7 +92,7 @@ export default class { ...@@ -92,7 +92,7 @@ export default class {
* @returns {AxiosPromise} An ES6 promise. * @returns {AxiosPromise} An ES6 promise.
*/ */
getAnalysisStatus ({taskID}) { getAnalysisStatus ({taskID}) {
return this._axios.get(`/analytics/${taskID}`) return this._axios.get(`/analytics/${taskID}?wait=1`)
} }
/** /**
......
...@@ -28,34 +28,18 @@ ...@@ -28,34 +28,18 @@
fjs.clearCache() fjs.clearCache()
.then(() => { .then(() => {
fjs.loadData([ fjs.loadData([
{
data_type: 'Enum',
data_set: 'denopa.clinical_baseline',
projection: 'Geschlecht',
get label () {
return `${this.projection} (${this.data_set})`
}
},
{ {
data_type: 'Integer', data_type: 'Integer',
data_set: 'denopa.clinical_baseline', data_set: 'ppmi.clinical_visit',
projection: 'a_Alter', projection: 'VITALHTCM',
get label () { get label () {
return `${this.projection} (${this.data_set})` return `${this.projection} (${this.data_set})`
} }
}, },
{ {
data_type: 'Double', data_type: 'Double',
data_set: 'denopa.clinical_baseline', data_set: 'ppmi.clinical_visit',
projection: 'a_AESD_I_mean', projection: 'VITALWGTKG',
get label () {
return `${this.projection} (${this.data_set})`
}
},
{
data_type: 'Enum',
data_set: 'foo',
projection: 'I don\'t exist',
get label () { get label () {
return `${this.projection} (${this.data_set})` return `${this.projection} (${this.data_set})`
} }
......
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