Commit 52c3d8aa authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Added switch feature for control panel

parent e2c766cf
......@@ -73,5 +73,13 @@ export default {
*/
unsetTask: (context, {taskID}) => {
context.commit(types.UNSET_TASK, {taskID})
},
/**
* Commits a control panel vm for keeping track of all such instances.
* @param context The context of the action.
* @param taskID The id of the task to remove.
*/
addControlPanel: (context, vm) => {
context.commit(types.ADD_CONTROL_PANEL, {vm})
}
}
......@@ -3,5 +3,6 @@ export default {
tasks: state => state.tasks,
subsets: state => state.subsets,
requestManager: state => state.requestManager,
controlPanels: state => state.controlPanels,
filter: state => name => state.filters[name]
}
......@@ -4,5 +4,6 @@ export default {
SET_SUBSETS: 'SET_SUBSETS',
SET_FILTER: 'SET_FILTER',
SET_TASK: 'SET_TASK',
UNSET_TASK: 'UNSET_TASK'
UNSET_TASK: 'UNSET_TASK',
ADD_CONTROL_PANEL: 'ADD_CONTROL_PANEL'
}
......@@ -27,5 +27,8 @@ export default {
},
[types.UNSET_TASK] (state, {taskID}) {
Vue.delete(state.tasks, taskID)
},
[types.ADD_CONTROL_PANEL] (state, {vm}) {
state.controlPanels.push(vm)
}
}
......@@ -10,6 +10,7 @@ const state = {
data: [],
tasks: {},
requestManager: null,
controlPanels: [],
subsets: [],
filters: {
ids: []
......
<template>
<div class="fjs-boxplot">
<div class="fjs-boxplot" @click="$emit('focus')">
<control-panel class="fjs-control-panel">
<control-panel class="fjs-control-panel" focus="focus">
<data-box class="fjs-data-box"
header="Numerical Variables"
dataType="numerical"
......@@ -23,6 +23,7 @@
<input id="fjs-show-kde-check" type="checkbox" v-model="params.showKDE"/>
<label for="fjs-show-kde-check">Show Density Est.</label>
</div>
<task-view></task-view>
</control-panel>
<div class="fjs-vis-container">
......@@ -114,7 +115,6 @@
</g>
</svg>
</div>
<task-view></task-view>
</div>
</template>
......@@ -124,11 +124,11 @@
import runAnalysis from '../mixins/run-analysis'
import * as d3 from 'd3'
import { TweenLite } from 'gsap'
import TaskView from '../components/TaskView.vue'
import deepFreeze from 'deep-freeze-strict'
import { truncateTextUntil } from '../mixins/utils'
import tooltip from '../directives/tooltip'
import ControlPanel from '../components/ControlPanel.vue'
import TaskView from '../components/TaskView.vue'
export default {
name: 'boxplot',
data () {
......@@ -364,9 +364,9 @@
}
},
components: {
TaskView,
ControlPanel,
DataBox,
TaskView
DataBox
},
directives: {
tooltip
......
<template>
<div class="fjs-correlation-analysis">
<div class="fjs-correlation-analysis" @click="$emit('focus')">
<control-panel class="fjs-control-panel">
<control-panel class="fjs-control-panel" focus="focus">
<data-box class="fjs-data-box"
header="X and Y variables"
dataType="numerical"
......@@ -24,6 +24,7 @@
<input type="radio" id="fjs-param-method-3" value="kendall" v-model="params.method">
<label for="fjs-param-method-3">Kendall</label>
</fieldset>
<task-view></task-view>
</control-panel>
<div class="fjs-vis-container">
......@@ -121,6 +122,7 @@
import tooltip from '../directives/tooltip.js'
import deepFreeze from 'deep-freeze-strict'
import ControlPanel from '../components/ControlPanel.vue'
import TaskView from '../components/TaskView.vue'
export default {
name: 'correlation-analysis',
data () {
......@@ -450,6 +452,7 @@
window.removeEventListener('resize', this.handleResize)
},
components: {
TaskView,
ControlPanel,
DataBox
},
......
<template>
<div class="fjs-heatmap">
<control-panel>
<div class="fjs-heatmap" @click="$emit('focus')">
<control-panel focus="focus">
<data-box class="fjs-data-box"
header="Numerical Array Data"
dataType="numerical_array"
v-on:update="update_numericArrayData">
</data-box>
<task-view></task-view>
</control-panel>
<div class="fjs-vis-container">
......@@ -46,7 +47,6 @@
</g>
</svg>
</div>
<task-view></task-view>
</div>
</template>
......@@ -56,10 +56,10 @@
import runAnalysis from '../mixins/run-analysis'
import * as d3 from 'd3'
import tooltip from '../directives/tooltip.js'
import TaskView from '../components/TaskView.vue'
import deepFreeze from 'deep-freeze-strict'
import { truncateTextUntil } from '../mixins/utils'
import ControlPanel from '../components/ControlPanel.vue'
import TaskView from '../components/TaskView.vue'
export default {
name: 'heatmap',
data () {
......@@ -223,9 +223,9 @@
window.removeEventListener('resize', this.handleResize)
},
components: {
TaskView,
ControlPanel,
DataBox,
TaskView
DataBox
},
directives: {
tooltip
......
<template>
<div class="fjs-control-panel"
:style="{left: tweened.position.left + 'px'}"
@mouseover="showPanel"
@mouseout="hidePanel">
v-show="focused"
@mouseover="locked ? noop() : show()"
@mouseout="locked ? noop() : hide()">
<span class="fjs-lock-btn" v-html="lockIcon" @click="toggleLock"></span>
<slot></slot>
<task-view></task-view>
......@@ -13,11 +14,20 @@
<script>
import TaskView from './TaskView.vue'
import { TweenLite } from 'gsap'
import store from '../../store/store'
export default {
name: 'control-panel',
props: {
focus: {
type: String,
required: true
}
},
data () {
return {
focused: true,
locked: false,
expanded: false,
tweened: {
position: {
left: 0
......@@ -31,30 +41,58 @@
}
},
methods: {
noop () {},
toggleLock () {
this.locked = !this.locked
this.propagateState()
},
showPanel () {
if (this.locked) {
return
}
show (animate) {
animate = typeof animate === 'undefined' ? true : animate
const panelWidth = window.innerWidth - this.$el.getBoundingClientRect().width
return TweenLite.to(this.tweened.position, 0.75, {left: panelWidth})
this.expanded = true
this.propagateState()
return TweenLite.to(this.tweened.position, animate ? 0.75 : 0, {left: panelWidth})
},
hidePanel () {
if (this.locked) {
return
}
return TweenLite.to(this.tweened.position, 0.75, {left: window.innerWidth * 0.98})
hide (animate) {
animate = typeof animate === 'undefined' ? true : animate
this.expanded = false
this.propagateState()
return TweenLite.to(this.tweened.position, animate ? 0.75 : 0, {left: window.innerWidth * 0.98})
},
unFocus () {
this.focused = false
},
unfocusAll () {
store.getters.controlPanels.forEach(panel => {
panel.unFocus()
})
},
propagateState () {
store.getters.controlPanels.forEach(panel => {
panel.locked = this.locked
panel.expanded = this.expanded
})
}
},
mounted () {
window.addEventListener('resize', () => {
this.locked = false
this.hidePanel()
this.hide()
})
this.tweened.position.left = window.innerWidth
this.showPanel().eventCallback('onComplete', this.hidePanel)
this.show().eventCallback('onComplete', this.hide)
},
created () {
store.dispatch('addControlPanel', this)
this.$parent.$on(this.focus, () => {
this.unfocusAll()
this.focused = true
this.$nextTick(() => {
this.expanded ? this.show(false) : this.hide(false)
})
})
this.unfocusAll()
this.focused = true
},
components: {
TaskView
......@@ -75,7 +113,7 @@
height: 100%
min-width: 15vw
.fjs-lock-btn
margin-bottom: 50%
margin-bottom: 20%
cursor: pointer
.fjs-balancer
margin-top: auto
......
......@@ -11,6 +11,9 @@
<div style="height: 50%; width: 50%">
<div id="placeholder1"></div>
</div>
<div style="height: 50%; width: 50%">
<div id="placeholder2"></div>
</div>
</body>
<script>
......@@ -86,4 +89,5 @@
}
fjs.setChart({chart: 'correlation-analysis', selector: '#placeholder1'})
fjs.setChart({chart: 'boxplot', selector: '#placeholder2'})
</script>
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