cpg.vue

<template>
  <div class="container-fluid">
    <h1>CpG tracker</h1>
    <div class="row">
      <div class="col-md-4">
        <h2>Prediction models</h2>
        <cpg-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">
        CpG analyser Tokai alg #TODO
      </div>
    </div>
  </div>
</template>

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


export default {
  data() {
    return {
      minWindowSize: 200,
      minGcPercentage: 0.5,
      minObservedToExpectedCpG: 0.6,
      minIslandMergeGap: 100,
      firstNucleotide: 'C',
      secondNucleotide: 'G',
      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: 'CpG analysis' })
      return bw
          .wait('analyse/cpg/' + analysisId + '/analysis')
          .then(response => {
            this.finishedAnalysis.push(response.data)
          })
          .finally(() => {
            this.$store.commit('workDone', analysisId)
            this.waiting = false
          })
    },
    updateModel(value, type) {
      if (type === 'minWindowSize') {
        this.minWindowSize = value;
      } else if (type === 'minGcPercentage') {
        this.minGcPercentage = value;
      } else if (type === 'minObservedToExpectedCpG') {
        this.minObservedToExpectedCpG = value;
      } else if (type === 'minIslandMergeGap') {
        this.minIslandMergeGap = value;
      } else if (type === 'firstNucleotide') {
        this.firstNucleotide = value;
      } else if (type === 'secondNucleotide') {
        this.secondNucleotide = value;
      }
    },
    startAnalysis(sequence, callback) {
      this.$http
          .post('analyse/cpg', {
            minWindowSize: this.minWindowSize,
            minGcPercentage: this.minGcPercentage,
            minObservedToExpectedCpG: this.minObservedToExpectedCpG,
            minIslandMergeGap: this.minIslandMergeGap,
            firstNucleotide: this.firstNucleotide,
            secondNucleotide: this.secondNucleotide,
            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.cpgAnalysis = []
    },
  },
  components: {
    'sequence-selector': SequenceSelector,
    results: Results,
    'cpg-form': CpgForm,
  },
}
</script>