rloopr.vue

<template>
  <div class="container-fluid">
    <h1>R-loop tracker</h1>
    <div class="row">
      <div class="col-md-4">
        <h2>Prediction models</h2>
        <rloopr-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">
        R-loop tracker algorithm is based on
        <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4489302/">QmRLFS-finder tool</a>.
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import SequenceSelector from '@/components/sequence/sequence-selector'
import BatchWatcher from '@/services/batch-watcher'
import RlooprForm from './rloopr-form'
import Results from './rloopr-results'

const RIZ_MODEL = Object.freeze({ m1: 0, m2: 1, both: 2 }) // enum for clear view on models

/**
 * R-loop analysis
 */
export default {
  data() {
    return {
      rizModel: [RIZ_MODEL.m1],
      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: 'R-loop-R analysis' })
      return bw
        .wait('analyse/rloopr/' + analysisId + '/analysis')
        .then(response => {
          this.finishedAnalysis.push(response.data)
        })
        .finally(() => {
          this.$store.commit('workDone', analysisId)
          this.waiting = false
        })
    },
    updateModel(value) {
      this.rizModel = value
    },
    startAnalysis(sequence, callback) {
      this.$http
        .post('analyse/rloopr', {
          rizModel: this.rizModel,
          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.rloopAnalysis = []
    },
  },
  components: {
    'sequence-selector': SequenceSelector,
    results: Results,
    'rloopr-form': RlooprForm,
  },
}
</script>