Skip to content
This repository was archived by the owner on Jan 2, 2026. It is now read-only.

Commit cf8b0cb

Browse files
xgui3783xgui3783
committed
feat: annalysis show param, visualise landmarks
1 parent daec26c commit cf8b0cb

3 files changed

Lines changed: 193 additions & 33 deletions

File tree

‎src/components/Analysis.vue‎

Lines changed: 186 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,107 @@
11
<template>
2-
<div class="panel panel-default">
3-
4-
<!-- header -->
5-
<div
6-
v-if="!error"
7-
@click="showBody = !showBody"
8-
class="panel-header btn btn-default btn-block">
9-
<span v-if="analysisComplete">
10-
analysis id:{{ vueId }} completed at {{ completionTimeString }}
11-
</span>
12-
<span v-if="!analysisComplete">
13-
analysis id:{{ vueId }}, analysing <div class="spinner">&bull;</div>
14-
</span>
15-
<span
16-
@click.prevent.stop="$emit('close')"
17-
class="pull-right close">
18-
&times;
19-
</span>
20-
</div>
2+
<div class="p-2">
3+
4+
<!-- show experimental parameters regardless -->
5+
<div>
6+
<!-- id -->
7+
<div class="input-group input-group-sm mt-1">
8+
<div class="input-group-prepend">
9+
<label for="webjugex-analysis-id" class="input-group-text">
10+
id
11+
</label>
12+
</div>
13+
<input
14+
type="text"
15+
id="webjugex-analysis-id"
16+
name="webjugex-analysis-id"
17+
class="form-control form-control-sm"
18+
:value="vueId"
19+
readonly="readonly">
20+
</div>
2121

22-
<!-- body -->
23-
<div
24-
v-if="error || showBody"
25-
class="panel-body p-2">
22+
<!-- roi1 -->
23+
<div class="input-group input-group-sm mt-1">
24+
<div class="input-group-prepend">
25+
<label for="webjugex-analysis-roi1" class="input-group-text">
26+
roi1
27+
</label>
28+
</div>
29+
<input
30+
type="text"
31+
id="webjugex-analysis-roi1"
32+
name="webjugex-analysis-roi1"
33+
class="form-control form-control-sm"
34+
:value="roi1 ? roi1.join(', ') : ''"
35+
readonly="readonly">
36+
</div>
37+
38+
<!-- roi2 -->
39+
<div class="input-group input-group-sm mt-1">
40+
<div class="input-group-prepend">
41+
<label for="webjugex-analysis-roi2" class="input-group-text">
42+
roi2
43+
</label>
44+
</div>
45+
<input
46+
type="text"
47+
id="webjugex-analysis-roi2"
48+
name="webjugex-analysis-roi2"
49+
class="form-control form-control-sm"
50+
:value="roi2 ? roi2.join(', ') : ''"
51+
readonly="readonly">
52+
</div>
2653

27-
<div v-if="error">
28-
{{ error }}
54+
<!-- permutations -->
55+
<div class="input-group input-group-sm mt-1">
56+
<div class="input-group-prepend">
57+
<label for="webjugex-analysis-permutations" class="input-group-text">
58+
permutations
59+
</label>
60+
</div>
61+
<input
62+
type="text"
63+
id="webjugex-analysis-permutations"
64+
name="webjugex-analysis-permutations"
65+
class="form-control form-control-sm"
66+
:value="nPermutations"
67+
readonly="readonly">
2968
</div>
30-
<div v-else-if="pvaldata && coorddata">
69+
70+
<!-- threshold -->
71+
<div class="input-group input-group-sm mt-1">
72+
<div class="input-group-prepend">
73+
<label for="webjugex-analysis-threshold" class="input-group-text">
74+
threshold
75+
</label>
76+
</div>
77+
<input
78+
type="text"
79+
id="webjugex-analysis-threshold"
80+
name="webjugex-analysis-threshold"
81+
class="form-control form-control-sm"
82+
:value="threshold"
83+
readonly="readonly">
84+
</div>
85+
</div>
86+
87+
<!-- results container -->
88+
<div class="mt-2" v-if="!error">
89+
90+
<!-- if complete show result -->
91+
<div v-if="analysisComplete">
92+
<div class="btn-group btn-block">
93+
<div
94+
@click="showCoord"
95+
class="btn btn-default">
96+
show coord
97+
</div>
98+
<div
99+
@click="destroyCoord"
100+
class="btn btn-default">
101+
hide coord
102+
</div>
103+
</div>
104+
31105
<a
32106
download="pval.tsv"
33107
@mouseenter="showPreviewPValData=true"
@@ -58,10 +132,18 @@
58132
</div>
59133
</a>
60134
</div>
135+
136+
<!-- if not complete, show spinner. introduce percentage in the turue -->
61137
<div v-else>
62-
We are still working on on analysing your data ...
138+
<span>analysis in progress</span>
139+
<div class="spinner">&bull;</div>
63140
</div>
64141
</div>
142+
143+
<!-- showing if there is an error -->
144+
<div v-else>
145+
Error: {{ error }}
146+
</div>
65147
</div>
66148
</template>
67149
<script>
@@ -71,6 +153,30 @@ import { workspaceMixin } from './mixin'
71153
import PreviewTsv from './previewTsv'
72154
73155
const NO_RESULTS_YET = 'no results yet'
156+
157+
158+
const getRoiArray = ({ PMapURL, body = {}, name } = {}) => {
159+
const { areas = [], threshold } = body
160+
return areas.map(({ name, hemisphere } = {}) => `${name} (${hemisphere})`)
161+
}
162+
163+
const getGeneNames = (tsv) => tsv
164+
.split('\n')[0]
165+
.split('\t')
166+
.slice(4)
167+
168+
const getCoord = (tsv) => tsv
169+
.split('\n')
170+
.slice(1)
171+
.map(v => {
172+
const [name, x, y, z, ...rest] = v.split('\t')
173+
return {
174+
name,
175+
coord: [x, y, z],
176+
rest
177+
}
178+
})
179+
74180
export default {
75181
components: {
76182
PreviewTsv
@@ -105,6 +211,22 @@ export default {
105211
*/
106212
intervalId: null,
107213
vueId: null,
214+
215+
/**
216+
* expmt param
217+
*/
218+
roi1: null,
219+
roi2: null,
220+
ignoreCustomProbe: null,
221+
singleProbeMode: null,
222+
nPermutations: null,
223+
threshold: null,
224+
225+
/**
226+
* showing landmark(s)
227+
*/
228+
coordShown: false,
229+
shownLandmarks: []
108230
}
109231
},
110232
computed: {
@@ -119,14 +241,24 @@ export default {
119241
return fetch(`${VUE_APP_HOSTNAME}/analysis/${this.vueId}${this.workspaceMixin__queryParam || ''}`)
120242
.then(res => {
121243
if (res.status >= 400) {
122-
reject(res.status)
244+
return Promise.reject(res.status)
123245
} else {
124246
return res
125247
}
126248
})
127249
.then(res => res.json())
128250
.then(json => {
129-
const { analysis } = json
251+
const { analysis, ignoreCustomProbe,nPermutations,singleProbeMode, mode,threshold, selectedGenes, area1, area2, ...rest } = json
252+
253+
this.ignoreCustomProbe = ignoreCustomProbe
254+
this.singleProbeMode = singleProbeMode
255+
this.selectedGenes = selectedGenes
256+
this.nPermutations = nPermutations
257+
this.threshold = threshold
258+
259+
this.roi1 = getRoiArray(area1)
260+
this.roi2 = getRoiArray(area2)
261+
130262
if (analysis) {
131263
clearInterval(this.intervalId)
132264
const {body, resp} = analysis
@@ -216,11 +348,29 @@ export default {
216348
pval : stringPvalFile,
217349
coord : stringTitledCoordFile
218350
}
351+
},
352+
showCoord: function () {
353+
if (this.shownLandmarks.length > 0) return
354+
if (this.coorddata) {
355+
const lms = getCoord(this.coorddata).map(({ name, coord, ...rest }) => {
356+
return {
357+
id: `${this.vueId}-${name}`,
358+
position: coord,
359+
...rest
360+
}
361+
})
362+
interactiveViewer.viewerHandle.add3DLandmarks(lms)
363+
this.shownLandmarks = lms.map(({ id }) => id)
364+
}
365+
},
366+
destroyCoord: function () {
367+
if (this.shownLandmarks.length === 0) return
368+
interactiveViewer.viewerHandle.remove3DLandmarks([ ...this.shownLandmarks ])
369+
this.shownLandmarks = []
219370
}
220371
},
221372
mounted: function () {
222373
// use mixin
223-
224374
this.vueId = this.$parent.queryId
225375
this.getData()
226376
.then(this.parseFetchedData)
@@ -235,6 +385,12 @@ export default {
235385
this.error = e
236386
this.$emit('error', e)
237387
})
388+
},
389+
beforeDestroy: function () {
390+
/**
391+
* remove coord on destroy
392+
*/
393+
this.destroyCoord()
238394
}
239395
}
240396
</script>

‎vueSsr/analysisRoute.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,8 @@ const PLUGIN_NAME = process.env.PLUGIN_NAME || 'fzj.xg.webjugex'
1313
const jsFile = fs.readFileSync(path.join(__dirname, 'distSsr/ssr-analysis.js'), 'utf-8')
1414

1515
const getJsFile = (id) => jsFile
16-
.replace('fzj-xg-webjugex-placeholder', `${PLUGIN_NAME}-${id}`)
17-
.replace('fzj-xg-webjugex-tempId', id)
18-
16+
.replace(/fzj-xg-webjugex-placeholder/g, `${PLUGIN_NAME}-${id}`)
17+
.replace(/fzj-xg-webjugex-tempId/g, id)
1918
/**
2019
* temporary db?
2120
*/

‎vueSsr/ssr.analysis.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,10 @@ setTimeout(() => {
88
queryId
99
})
1010
analysis.$mount(el)
11+
12+
interactiveViewer.pluginControl['fzj-xg-webjugex-placeholder'].onShutdown(() => {
13+
analysis.$destroy()
14+
})
1115
}
16+
1217
})

0 commit comments

Comments
 (0)