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

New code that handles state saving via the new back end API

parent c3b16f8d
Pipeline #3227 failed with stages
in 3 minutes and 27 seconds
......@@ -6296,6 +6296,11 @@
"integrity": "sha1-xUYBd4rVYPEULODgG8yotW0TQm0=",
"dev": true
},
"object-path": {
"version": "0.11.4",
"resolved": "https://registry.npmjs.org/object-path/-/object-path-0.11.4.tgz",
"integrity": "sha1-NwrnUvvzfePqcKhhwju6iRVpGUk="
},
"object.omit": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
......@@ -9026,6 +9031,11 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.2.tgz",
"integrity": "sha512-Au9rf8fPkBulFHfZ406UaQDd1jH9fqGRIM+0IHilrXnJ/0TeeMH4SBkNxWf2dGevl2S3aVeu0E/WklEv0/msag=="
},
"vue-async-computed": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/vue-async-computed/-/vue-async-computed-3.3.1.tgz",
"integrity": "sha512-k04X7FsyAu+Tmc40KDUFT22LRZNfgHqpsuCWNUnU2FubeyBlVFLuJkxEdvRZEPVOEWIQuazFzYR1N/whfVkqvQ=="
},
"vue-hot-reload-api": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz",
......
......@@ -28,7 +28,9 @@
"uuid": "^3.1.0",
"vue": "^2.5.2",
"vue-template-compiler": "^2.5.2",
"vuex": "^2.5.0"
"vue-async-computed": "^3.3.1",
"vuex": "^2.5.0",
"object-path": "^0.11.4"
},
"devDependencies": {
"babel-core": "7.0.0-alpha.3",
......
......@@ -7,17 +7,19 @@ import StateManager from './services/state-manager'
class FractalJS {
constructor (handler, dataSource, fractalisNode, getAuth, options) {
const requestManager = new RequestManager({handler, dataSource, fractalisNode, getAuth})
const chartManager = new ChartManager()
const stateManager = new StateManager()
store.dispatch('setRequestManager', requestManager)
store.dispatch('setChartManager', chartManager)
store.dispatch('setStateManager', stateManager)
store.dispatch('updateData')
store.dispatch('setOptions', options)
this._chartManager = new ChartManager()
this._stateManager = new StateManager()
this._versionCheck()
}
// noinspection JSMethodCanBeStatic
async _versionCheck () {
const rv = await store.state.requestManager.getVersion()
const rv = await store.getters.requestManager.getVersion()
const backendVersion = rv.data.version
if (backendVersion !== version) {
console.warn(`WARNING: The Fractalis backend is version ${backendVersion},
......@@ -27,16 +29,17 @@ class FractalJS {
// noinspection JSMethodCanBeStatic
loadData (descriptors) {
return store.state.requestManager.createData({descriptors})
return store.getters.requestManager.createData({descriptors})
}
// noinspection JSMethodCanBeStatic
setChart ({chart, selector}) {
return this._chartManager.setChart({chart, selector})
return store.getters.chartManager.setChart({chart, selector})
}
// noinspection JSMethodCanBeStatic
clearCache () {
return store.state.requestManager.deleteAllData()
return store.getters.requestManager.deleteAllData()
}
// noinspection JSMethodCanBeStatic
......@@ -50,13 +53,13 @@ class FractalJS {
}
// noinspection JSMethodCanBeStatic
chart2uri (selector) {
return this._stateManager.chart2uri(selector)
chart2id (selector, callback) {
return store.getters.stateManager.chart2id(selector, callback)
}
// noinspection JSMethodCanBeStatic
uri2chart (selector, uri) {
return this._stateManager.uri2chart(selector, uri)
id2chart (selector, id) {
return store.getters.stateManager.id2chart(selector, id)
}
}
......@@ -68,6 +71,7 @@ class FractalJS {
* @param dataSource: The base URL of the service in which this library is used. Example: 'https://my.service.org/'
* @param fractalisNode: The base URL of the fractalis back end that you want to use. 'http://fractalis.uni.lu/'
* @param getAuth: This MUST be a function that can be called at any time to retrieve credentials to authenticate with
* @param options: Optional object to configure fractal.js within the target UI.
* the API of the service specified in dataSource.
* @returns {FractalJS}: An instance of FractalJS.
*/
......
......@@ -121,4 +121,17 @@ export default class {
getVersion () {
return this._axios.get('/misc/version')
}
saveState (state) {
return this._axios.post('/state', state)
}
requestStateAccess (stateID) {
return this._axios.post(`/state/${stateID}`, {
auth: this._getAuth(),
handler: this._handler,
server: this._dataSource
})
}
getState (stateID) {
return this._axios.get(`/state/${stateID}`)
}
}
import types from './mutation-types'
import RequestManager from '../services/request-manager'
import ChartManager from '../services/chart-manager'
import StateManager from '../services/state-manager'
export default {
/**
......@@ -14,6 +16,20 @@ export default {
throw new Error('The dispatched value must be an instance of RequestManager.')
}
},
setChartManager: (context, manager) => {
if (manager instanceof ChartManager) {
context.commit(types.SET_CHART_MANAGER, manager)
} else {
throw new Error('The dispatched value must be an instance of ChartManager.')
}
},
setStateManager: (context, manager) => {
if (manager instanceof StateManager) {
context.commit(types.SET_STATE_MANAGER, manager)
} else {
throw new Error('The dispatched value must be an instance of StateManager.')
}
},
/**
* Commits subsets mutation that will overwrite the old value.
* @param context The context of the action.
......@@ -21,8 +37,8 @@ export default {
*/
setSubsets: (context, subsets) => {
if (subsets instanceof Array &&
((subsets.length > 0 && subsets[0] instanceof Array) || !subsets.length) &&
subsets.every(d => Array.isArray(d))) {
((subsets.length > 0 && subsets[0] instanceof Array) || !subsets.length) &&
subsets.every(d => Array.isArray(d))) {
context.commit(types.SET_SUBSETS, subsets)
} else {
throw new Error('The dispatched value must be an Array containing Arrays (unless empty).')
......@@ -63,7 +79,7 @@ export default {
* @param context The context of the action.
* @param taskID The id of the task.
* @param taskName The name of the task.
* @param taskState The current state of the task. (PENDING, SUBMITTED, SUCCESS, FAILURE)
* @param taskState The current state of the task. (SUBMITTED, SUCCESS, FAILURE, PENDING (not existing))
* @param taskMessage A message in case the task failed.
*/
setTask: (context, {taskID, taskName, taskState, taskMessage}) => {
......
......@@ -3,6 +3,8 @@ export default {
tasks: state => state.tasks,
subsets: state => state.subsets,
requestManager: state => state.requestManager,
chartManager: state => state.chartManager,
stateManager: state => state.stateManager,
controlPanels: state => state.controlPanels,
filter: state => name => state.filters[name],
options: state => state.options
......
export default {
SET_DATA: 'SET_DATA',
SET_REQUEST_MANAGER: 'SET_REQUEST_MANAGER',
SET_CHART_MANAGER: 'SET_CHART_MANAGER',
SET_STATE_MANAGER: 'SET_STATE_MANAGER',
SET_SUBSETS: 'SET_SUBSETS',
SET_FILTER: 'SET_FILTER',
SET_TASK: 'SET_TASK',
......
......@@ -11,6 +11,12 @@ export default {
[types.SET_REQUEST_MANAGER] (state, manager) {
state.requestManager = manager
},
[types.SET_CHART_MANAGER] (state, manager) {
state.chartManager = manager
},
[types.SET_STATE_MANAGER] (state, manager) {
state.stateManager = manager
},
[types.SET_SUBSETS] (state, subsets) {
state.subsets = subsets
},
......
......@@ -10,6 +10,8 @@ const state = {
data: [],
tasks: {},
requestManager: null,
chartManager: null,
stateManager: null,
controlPanels: [],
subsets: [],
filters: {
......
......@@ -15,17 +15,17 @@
<hr class="fjs-seperator"/>
<div class="fjs-parameter-container">
<label>
<input type="checkbox" v-model="SAVE_STATE.params.showData"/>
<input type="checkbox" v-model="params.showData"/>
Show Points
</label>
<br/>
<label>
<input type="checkbox" v-model="SAVE_STATE.params.jitter"/>
<input type="checkbox" v-model="params.jitter"/>
Jitter Data
</label>
<br/>
<label>
<input type="checkbox" v-model="SAVE_STATE.params.showKDE"/>
<input type="checkbox" v-model="params.showKDE"/>
Show Density Est.
</label>
</div>
......@@ -116,7 +116,7 @@
:width="boxplotWidth / 2"/>
<polyline class="fjs-kde"
:points="kdePolyPoints[label]"
v-if="SAVE_STATE.params.showKDE">
v-if="params.showKDE">
</polyline>
</g>
</g>
......@@ -136,18 +136,17 @@
import { truncateTextUntil } from '../mixins/utils'
import tooltip from '../directives/tooltip'
import SvgCanvas from '../components/SVGCanvas.vue'
import StateSaver from '../mixins/state-saver'
export default {
name: 'boxplot',
data () {
return {
SAVE_STATE: {
numData: [],
catData: [],
params: {
showData: false,
jitter: false,
showKDE: false
}
numData: [],
catData: [],
params: {
showData: false,
jitter: false,
showKDE: false
},
width: 0,
height: 0,
......@@ -168,8 +167,8 @@
},
args () {
return {
features: this.SAVE_STATE.numData,
categories: this.SAVE_STATE.catData,
features: this.numData,
categories: this.catData,
id_filter: this.idFilter,
subsets: store.getters.subsets
}
......@@ -178,7 +177,7 @@
return this.width / 150
},
validArgs () {
return this.SAVE_STATE.numData.length > 0
return this.numData.length > 0
},
margin () {
const left = 10
......@@ -209,7 +208,7 @@
return {
id: d.id,
value: d.value,
jitter: Math.max(this.pointSize / 2, (this.SAVE_STATE.params.jitter ? Math.random() * this.boxplotWidth / 2 : this.boxplotWidth / 2) - this.pointSize / 2),
jitter: Math.max(this.pointSize / 2, (this.params.jitter ? Math.random() * this.boxplotWidth / 2 : this.boxplotWidth / 2) - this.pointSize / 2),
subset: d.subset,
category: d.category
}
......@@ -312,10 +311,10 @@
})
}
},
'SAVE_STATE.params.showData': {
'params.showData': {
handler: function () { this.$nextTick(() => this.drawPoints()) }
},
'SAVE_STATE.params.jitter': {
'params.jitter': {
handler: function () { this.$nextTick(() => this.drawPoints()) }
},
'points': {
......@@ -345,10 +344,10 @@
this.getTippyInstances(label).forEach(d => d.hide())
},
update_numData (ids) {
this.SAVE_STATE.numData = ids
this.numData = ids
},
update_catData (ids) {
this.SAVE_STATE.catData = ids
this.catData = ids
},
setIDFilter (label) {
store.dispatch('setFilter', {filter: 'ids', value: this.points[label].map(d => d.id)})
......@@ -363,7 +362,7 @@
const canvas = this.$el.querySelector(`.fjs-canvas[data-label="${label}"]`)
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
if (this.SAVE_STATE.params.showData) {
if (this.params.showData) {
this.points[label].forEach(point => {
ctx.beginPath()
ctx.fillStyle = 'black'
......@@ -398,8 +397,16 @@
DataBox,
Chart
},
mixins: [
StateSaver
],
directives: {
tooltip
},
mounted () {
this.registerDataToSave([
'catData', 'numData', 'params'
])
}
}
</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