Commit 8dfa6bfb authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Implemented cross chart filters

parent d060555c
......@@ -15,7 +15,7 @@
<div class="fjs-controls-section">
<button class="fjs-run-analysis-btn"
type="button"
@click="runAnalysisWrapper({init: true})"
@click="runAnalysisWrapper({init: true, args})"
:disabled="disabled">&#9654;</button><br/>
<br/>
<span>{{ error }}</span>
......@@ -105,6 +105,8 @@
<script>
import DataBox from '../DataBox.vue'
import store from '../../store/store'
import types from '../../store/mutation-types'
import requestHandling from '../mixins/request-handling'
import * as d3 from 'd3'
import svgtooltip from '../mixins/v-svgtooltip'
......@@ -119,14 +121,6 @@
height: 0,
xyData: [],
annotationData: [],
get args () {
return {
x: `$${this.xyData[0]}$`,
y: `$${this.xyData[1]}$`,
ids: this.selectedPoints.map(d => d.id)
}
},
shownAnalysisResults: {
init: true, // will disappear after being initially set
coef: 0,
......@@ -172,9 +166,19 @@
}
},
computed: {
idFilter () {
return store.getters.filter('ids')
},
disabled () {
return this.xyData.length !== 2
},
args () {
return {
x: `$${this.xyData[0]}$`,
y: `$${this.xyData[1]}$`,
ids: this.selectedPoints.map(d => d.id)
}
},
margin () {
const left = this.width / 3
const top = 50
......@@ -295,20 +299,21 @@
this.error = ''
if (!d3.event.selection) {
this.selectedPoints = []
this.runAnalysisWrapper({init: false})
return
}
const [[x0, y0], [x1, y1]] = d3.event.selection
this.selectedPoints = this.shownPoints.all.filter(d => {
const x = this.scales.x(d.x)
const y = this.scales.y(d.y)
return x0 <= x && x <= x1 && y0 <= y && y <= y1
})
if (this.selectedPoints.length > 0 && this.selectedPoints.length < 3) {
this.error = 'Selection must be zero (everything is selected) or greater than two.'
this.runAnalysisWrapper({init: false, args: this.args})
} else {
this.runAnalysisWrapper({init: false})
const [[x0, y0], [x1, y1]] = d3.event.selection
this.selectedPoints = this.shownPoints.all.filter(d => {
const x = this.scales.x(d.x)
const y = this.scales.y(d.y)
return x0 <= x && x <= x1 && y0 <= y && y <= y1
})
if (this.selectedPoints.length > 0 && this.selectedPoints.length < 3) {
this.error = 'Selection must be zero (everything is selected) or greater than two.'
} else {
this.runAnalysisWrapper({init: false, args: this.args})
}
}
store.commit(types.SET_FILTER, {filter: 'ids', value: this.selectedPoints.map(d => d.id)})
})
},
histograms () {
......@@ -407,12 +412,23 @@
TweenLite.to(yAttr, 0.5, yAttrTarget)
}
}
},
'idFilter': {
handler: function (newIDFilter) {
const isFiltered = (newIDFilter.length === this.selectedPoints.length) &&
this.selectedPoints.map(d => d.id).every(id => newIDFilter.indexOf(id) !== -1)
if (!isFiltered) {
const args = this.args
args.ids = newIDFilter
this.runAnalysisWrapper({init: false, args})
}
}
}
},
mounted () {
window.addEventListener('resize', this.onResize)
this.onResize() // initial call
// saves us one manual initialization
// saves us the manual initialization of tmpAnalysisResults
this.tmpAnalysisResults = JSON.parse(JSON.stringify(this.shownAnalysisResults))
},
beforeDestroy () {
......@@ -426,13 +442,9 @@
svgtooltip
],
methods: {
runAnalysisWrapper ({init}) {
let args = this.args
if (init) {
args.ids = []
}
runAnalysisWrapper ({init, args}) {
// function made available via requestHandling mixin
this.runAnalysis({task_name: 'compute-correlation', args: args})
this.runAnalysis({task_name: 'compute-correlation', args})
.then(response => {
const results = JSON.parse(response)
results.data = JSON.parse(results.data)
......
......@@ -17,5 +17,8 @@ export default {
context.dispatch('updateData')
}, 2000)
})
},
setFilter: (context, {filter, value}) => {
context.commit(types.SET_FILTER, {filter, value})
}
}
export default {
data: state => state.data,
loadedData: state => state.data.filter(d => d.loaded),
subsets: state => state.subsets,
requestManager: state => state.requestManager
requestManager: state => state.requestManager,
filter: state => name => state.filters[name]
}
export default {
SET_DATA: 'SET_DATA',
SET_REQUEST_MANAGER: 'SET_REQUEST_MANAGER',
SET_SUBSETS: 'SET_SUBSETS'
SET_SUBSETS: 'SET_SUBSETS',
SET_FILTER: 'SET_FILTER'
}
......@@ -9,5 +9,8 @@ export default {
},
[types.SET_SUBSETS] (state, subsets) {
state.subsets = subsets
},
[types.SET_FILTER] (state, {filter, value}) {
state.filters[filter] = value
}
}
......@@ -9,7 +9,10 @@ Vue.use(Vuex)
const state = {
data: [],
requestManager: null,
subsets: []
subsets: [],
filters: {
ids: []
}
}
export default new Vuex.Store({
......
......@@ -20,7 +20,7 @@
const fjs = fractal.init({
handler: 'ada',
thisBaseURL: 'https://ada.parkinson.lu',
fractalisBaseURL: 'https://fractalis.lcsb.uni.lu',
fractalisBaseURL: 'http://127.0.0.1:5000',
getAuth () {
return credentials1
}
......
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