zdna.vue

<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 {
      windowSize: 12,
      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) {
      this.windowSize = value
    },
    startAnalysis(sequence, callback) {
      this.$http
          .post('analyse/zdna', {
            windowSize: this.windowSize,
            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>