Commit e34f4b7b authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Improved task manager behavior and added collapse button

parent e2abee3f
<template>
<div :class="`fjs-vm-root fjs-vm-root-${_uid}`">
<div :class="`fjs-data-box fjs-vm-uid-${_uid}`">
<label :for="`fjs-data-window-${_uid}`" :tooltip="tooltip">{{ header }}</label>
<div :id="`fjs-data-window-${_uid}`" class="fjs-data-window">
<div class="fjs-data-entry-container"
......@@ -76,7 +76,7 @@
},
methods: {
toggleDataEntryBody (taskID) {
const $body = $(`.fjs-vm-root-${this._uid} .fjs-data-entry-body[data-id="${taskID}"]`)
const $body = $(`.fjs-vm-uid-${this._uid} .fjs-data-entry-body[data-id="${taskID}"]`)
$body.slideToggle(500)
},
reloadData (taskID) {
......@@ -90,7 +90,7 @@
</script>
<style lang="sass" scoped>
.fjs-vm-root
.fjs-data-box
text-align: center
width: 40%
height: 90%
......
<template>
<div class="fjs-task-state-container" v-if="pendingTasks.length || failedTasks.length">
<div class="fjs-task-state-element" v-for="task in pendingTasks">
<loader class="fjs-loader"></loader>
<span class="fjs-task-info">{{ task.taskName }}</span>
<span class="fjs-cancel-task-btn" @click="cancelTask(task.taskID)">&#215;</span>
</div>
<div class="fjs-task-state-element" v-for="task in failedTasks">
<span>{{ task.taskName }}</span>
<div :class="`fjs-task-view fjs-vm-uid-${_uid}`" v-if="pendingTasks.length || failedTasks.length">
<span class="fjs-toggle-btn" @click="toggleView" v-html="toggleButton"></span>
<div class="fjs-task-state-container">
<div class="fjs-task-state-element fjs-pending" :key="task" v-for="task in pendingTasks">
<loader class="fjs-loader"></loader>
<span class="fjs-task-name">{{ task.taskName }}</span>
<span class="fjs-cancel-task-btn" @click="cancelTask(task.taskID)">&#215;</span>
</div>
<div class="fjs-task-state-element fjs-failed" v-for="task in failedTasks">
<span class="fjs-task-name">{{ task.taskName }}</span>
<span class="fjs-cancel-task-btn" @click="cancelTask(task.taskID)">&#215;</span>
<span class="fjs-task-message">{{ task.taskMessage }}</span>
</div>
</div>
</div>
</template>
......@@ -14,6 +19,7 @@
<script>
import store from '../store/store'
import Loader from './Loader.vue'
import $ from 'jquery'
export default {
name: 'task-view',
components: {
......@@ -21,9 +27,13 @@
},
data () {
return {
isMinimized: false
}
},
computed: {
toggleButton () {
return this.isMinimized ? '&#9650;' : '&#9660;'
},
tasks () {
return store.getters.tasks
},
......@@ -41,33 +51,49 @@
methods: {
cancelTask (taskID) {
store.getters.requestManager.cancelAnalysis({taskID})
},
toggleView () {
this.isMinimized = !this.isMinimized
const $body = $(`.fjs-vm-uid-${this._uid} .fjs-task-state-container`)
$body.slideToggle(500)
}
}
}
</script>
<style lang="sass" scoped>
.fjs-task-state-container
display: flex
flex-direction: column
.fjs-task-view
z-index: 1
position: fixed
bottom: 0
right: 0
width: 300px
color: #fff
background-color: #000
opacity: 0.8
background-color: #333333
padding: 20px
border-radius: 15px 0 0 0
.fjs-task-state-element
.fjs-toggle-btn
cursor: pointer
.fjs-task-state-container
display: flex
align-items: center
.fjs-task-info
margin: 0 0 0 5px
.fjs-cancel-task-btn
cursor: pointer
margin: 0 0 0 20px
color: #f00
font-size: 30px
font-weight: bold
flex-direction: column
.fjs-task-state-element
display: flex
align-items: center
padding: 0 0 5px 0
.fjs-task-name
margin: 0 0 0 5px
.fjs-cancel-task-btn
cursor: pointer
margin: 0 0 0 20px
color: #f00
font-size: 30px
font-weight: bold
.fjs-failed
.fjs-task-name
color: #f00
.fjs-task-message
margin: 0 0 0 10px
font-size: 10px
</style>
<template>
<div :class="`fjs-vm-root fjs-vm-root-${this._uid}`">
<div :class="`fjs-correlation-analysis fjs-vm-uid-${this._uid}`">
<div class="fjs-data-box-container">
<data-box class="fjs-data-box"
header="X and Y variables"
......@@ -426,15 +426,15 @@
},
'axis': {
handler: function (newAxis) {
d3.select(`.fjs-vm-root-${this._uid} .fjs-x-axis-1`).call(newAxis.x1)
d3.select(`.fjs-vm-root-${this._uid} .fjs-x-axis-2`).call(newAxis.x2)
d3.select(`.fjs-vm-root-${this._uid} .fjs-y-axis-1`).call(newAxis.y1)
d3.select(`.fjs-vm-root-${this._uid} .fjs-y-axis-2`).call(newAxis.y2)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-x-axis-1`).call(newAxis.x1)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-x-axis-2`).call(newAxis.x2)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-y-axis-1`).call(newAxis.y1)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-y-axis-2`).call(newAxis.y2)
}
},
'brush': {
handler: function (newBrush) {
d3.select(`.fjs-vm-root-${this._uid} .fjs-brush`).call(newBrush)
d3.select(`.fjs-vm-uid-${this._uid} .fjs-brush`).call(newBrush)
}
},
'regLine': {
......@@ -515,7 +515,7 @@
.then(this.handleResize)
},
handleResize () {
const container = this.$el.querySelector(`.fjs-vm-root-${this._uid} .fjs-vis-container svg`)
const container = this.$el.querySelector(`.fjs-vm-uid-${this._uid} .fjs-vis-container svg`)
// noinspection JSSuspiciousNameCombination
this.height = container.clientWidth
this.width = container.clientWidth
......@@ -537,7 +537,7 @@
*
font-family: Roboto, sans-serif
.fjs-vm-root
.fjs-correlation-analysis
height: 100%
width: 100%
display: flex
......
......@@ -8,18 +8,36 @@ export default {
}
const rv1 = await store.getters.requestManager.createAnalysis({task_name, args})
const taskID = rv1.data.task_id
store.dispatch('setTask', {taskID, taskName: task_name, taskState: 'PENDING'})
store.dispatch('setTask', {
taskID,
taskName: task_name,
taskState: 'PENDING'
})
let counter = 0
while (counter < 1000) {
await timeout(++counter * 200)
const rv2 = await store.getters.requestManager.getAnalysisStatus({taskID})
const taskInfo = rv2.data
store.dispatch('setTask', {taskID, taskName: task_name, taskState: taskInfo.state})
if (taskInfo.state === 'SUCCESS') {
store.dispatch('setTask', {
taskID,
taskName: task_name,
taskState: taskInfo.state
})
return taskInfo.result
} else if (taskInfo.state === 'FAILURE') {
store.dispatch('setTask', {
taskID,
taskName: task_name,
taskState: taskInfo.state,
taskMessage: taskInfo.result
})
throw new Error(taskInfo.result)
} else if (taskInfo.state === 'PENDING') {
store.dispatch('setTask', {
taskID,
taskName: task_name,
taskState: taskInfo.state})
} else {
throw new Error(`Analysis Task has unknown state: ${taskInfo.state}`)
}
......
......@@ -22,8 +22,8 @@ export default {
setFilter: (context, {filter, value}) => {
context.commit(types.SET_FILTER, {filter, value})
},
setTask: (context, {taskID, taskName, taskState}) => {
context.commit(types.SET_TASK, {taskID, taskName, taskState})
setTask: (context, {taskID, taskName, taskState, taskMessage}) => {
context.commit(types.SET_TASK, { taskID, taskName, taskState, taskMessage })
},
unsetTask: (context, {taskID}) => {
context.commit(types.UNSET_TASK, {taskID})
......
import Vue from 'vue'
import types from './mutation-types'
export default {
......@@ -14,18 +15,17 @@ export default {
state.subsets = subsets
},
[types.SET_FILTER] (state, {filter, value}) {
state.filters[filter] = value
Vue.set(state.filters, filter, value)
},
[types.SET_TASK] (state, {taskID, taskName, taskState}) {
// assure to trigger possible external watchers by replacing the entire tasks object
const tasks = JSON.parse(JSON.stringify(state.tasks))
tasks[taskID] = {taskID, taskName, taskState}
state.tasks = tasks
[types.SET_TASK] (state, {taskID, taskName, taskState, taskMessage}) {
// avoid triggering possible watchers if task information remain the same
if (!state.tasks[taskID] ||
state.tasks[taskID].taskState !== taskState ||
state.tasks[taskID].taskMessage !== taskMessage) {
Vue.set(state.tasks, taskID, {taskID, taskName, taskState, taskMessage})
}
},
[types.UNSET_TASK] (state, {taskID}) {
// assure to trigger possible external watchers by replacing the entire tasks object
const tasks = JSON.parse(JSON.stringify(state.tasks))
delete tasks[taskID]
state.tasks = tasks
Vue.delete(state.tasks, taskID)
}
}
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