Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<template>
<div class="container-fluid">
<h1>Z-DNA tracker</h1>
<div class="row">
<div class="col-md-4">
<h2>Prediction models</h2>
<zdna-form @checkModel="updateModel" />
</div>
<div class="col-md-8">
<h2>Sequences</h2>
<sequence-selector ref="sequenceSelector" @analyse="startAnalysis" />
</div>
</div>
<div class="alert alert-danger" v-if="serverError">{{ serverError }}</div>
<div v-if="waitError">
<hr />
<div class="alert alert-danger">
<div class="row">
<p class="col-10">
Waiting for results took too long.
</p>
<div class="col-2">
<button class="btn btn-primary btn-block" @click="waitForResult(analysisId)">
<span class="fa fa-refresh"></span> Keep waiting
</button>
</div>
</div>
</div>
</div>
<b-tabs v-if="finishedAnalysis.length > 0">
<b-tab v-for="(analysis, i) of finishedAnalysis" :key="analysis.payload.id" :title="'Results ' + (i + 1)">
<br />
<results :analysis-info="analysis.payload" :download-token="analysis.downloadToken">
<b-btn variant="danger" class="float-right" @click="closeResults(analysis.payload)">
Close tab
</b-btn>
</results>
</b-tab>
</b-tabs>
<hr />
<div class="card bg-light">
<div class="card-body">
Z-DNA tracker algorithm is based on
<a href="https://nonb-abcc.ncifcrf.gov/apps/nBMST/default/">non-B DNA Motif Search Tool</a>.
</div>
</div>
</div>
</template>
<script type="text/javascript">
import SequenceSelector from '@/components/sequence/sequence-selector'
import BatchWatcher from '@/services/batch-watcher'
import ZdnaForm from './zdna-form'
import Results from './zdna-results'
/**
* Z-DNA analysis
*/
export default {
data() {
return {
config: {},
finishedAnalysis: [],
analysisId: null,
waiting: false,
waitError: false,
serverError: null,
}
},
methods: {
closeResults(analysis) {
this.finishedAnalysis = this.finishedAnalysis.filter(info => {
return info.payload.id !== analysis.id
})
},
waitForResult(analysisId) {
this.waitError = false
this.waiting = true
var bw = new BatchWatcher(this.$http)
this.$store.commit('addWork', { key: analysisId, title: 'Z-DNA analysis' })
return bw
.wait('analyse/zdna/' + analysisId + '/analysis')
.then(response => {
this.finishedAnalysis.push(response.data)
})
.finally(() => {
this.$store.commit('workDone', analysisId)
this.waiting = false
})
},
updateModel(value, type) {
if (type === 'minSequenceSize') {
this.minSequenceSize = value;
} else if (type === 'threshold') {
this.threshold = value;
}
},
startAnalysis(sequence, callback) {
this.$http
.post('analyse/zdna', {
minSequenceSize: this.minSequenceSize,
threshold: this.threshold,
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
sequence: sequence.id,
tags: sequence.tags,
})
.then(response => {
const item = response.data.payload
this.serverError = null
this.analysisId = item.id
return this.waitForResult(item.id)
})
.then(() => {
callback()
})
.catch(error => {
this.serverError = error?.response?.data?.message
callback('FAILED')
})
},
clearAnalysis() {
this.zdnaAnalysis = []
},
},
components: {
'sequence-selector': SequenceSelector,
results: Results,
'zdna-form': ZdnaForm,
},
}
</script>