_analysisId.vue

<template>
  <v-card flat color="transparent">
    <v-card flat color="transparent" class="mt-3">
      <error-alert v-if="error" :error-message="error"></error-alert>
      <v-card
        v-if="formattedAnalysis"
        :id="`projects-${$route.params.id}-analysis-${$route.params.analysisId}`"
        class="mt-3"
      >
        <v-toolbar dense elevation="2">
          <v-btn nuxt x-small text class="mr-3" @click="goToAnalysisListRoute()"
            ><v-icon left>mdi-arrow-left</v-icon>Analysis</v-btn
          >
          <v-divider vertical inset></v-divider>
          <v-toolbar-title class="text-uppercase ml-2">
            <!-- <v-icon color="primary">mdi-chart-box</v-icon> -->
            <v-btn text class="text-h5" @click="goAnalysisRoute()"
              ><v-icon left>mdi-file-chart</v-icon>
              {{ formattedAnalysis.name }}</v-btn
            ></v-toolbar-title
          >
          <v-spacer></v-spacer>
          <v-tooltip v-if="experimentId" bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                class="mx-2"
                small
                icon
                :to="copyAnalysisLocation()"
                v-bind="attrs"
                v-on="on"
                ><v-icon>mdi-refresh</v-icon></v-btn
              >
            </template>
            <span>Run this analysis again</span>
          </v-tooltip>
          <v-tooltip bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                class="mx-2"
                icon
                small
                v-bind="attrs"
                v-on="on"
                @click="downloadQtl2Data()"
                ><v-icon>mdi-download</v-icon></v-btn
              >
            </template>
            <span>Download qtl2 inputs</span>
          </v-tooltip>
          <v-tooltip v-if="experimentId" bottom>
            <template v-slot:activator="{ on, attrs }">
              <v-btn
                icon
                nuxt
                :to="experimentLocation()"
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>mdi-flask</v-icon></v-btn
              >
            </template>
            <span>Go to experiment</span>
          </v-tooltip>
          <v-chip v-else small color="error"
            >Experiment has been deleted</v-chip
          >
          <v-spacer></v-spacer>
          <v-chip small color="secondary" class="mx-2">
            {{ formattedAnalysis.creation_date.toDateString() }}
          </v-chip>
          <v-chip small color="accent"> Analysis </v-chip>
        </v-toolbar>
        <v-card-text>
          <v-toolbar flat dense>
            <v-toolbar-title> Workflow invocation</v-toolbar-title></v-toolbar
          >
          <workflow-invocation
            :steps="stepsWithJobMetrics"
          ></workflow-invocation>
        </v-card-text>
        <v-divider></v-divider>
        <v-toolbar
          v-if="
            formattedAnalysis.history_status &&
            formattedAnalysis.history_status.state === 'ok'
          "
          flat
          bottom
          color="transparent"
        >
          <v-btn-toggle group>
            <v-btn :to="resultsRoute()"
              ><v-icon left>mdi-chart-timeline-variant</v-icon>LOD Plot</v-btn
            >
          </v-btn-toggle>
          <v-spacer></v-spacer>
        </v-toolbar>
      </v-card>
    </v-card>
    <nuxt-child :project="project" :analysis="formattedAnalysis" />
  </v-card>
</template>
<script>
import ErrorAlert from '@/components/ErrorAlert'
import WorkflowInvocation from '@/components/WorkflowInvocation'
export default {
  components: {
    ErrorAlert,
    WorkflowInvocation,
  },
  props: { project: { type: Object, default: () => ({}) } },
  async asyncData({ $axios, params }) {
    const { id: projectId, analysisId } = params

    const [analysis, invocation] = await Promise.all([
      $axios.$get(`/api/projects/${projectId}/analysis/${analysisId}/`),
      $axios.$get(
        `/api/projects/${projectId}/analysis/${analysisId}/workflow_invocation_parameters/`
      ),
    ])

    return { analysis, invocation, projectId, analysisId }
  },
  data() {
    return {
      projectId: null,
      analysisId: null,
      analysis: null,
      error: null,
    }
  },
  computed: {
    formattedAnalysis() {
      return {
        ...this.analysis,
        creation_date: new Date(this.analysis.creation_date),
      }
    },
    formattedInvocation() {
      if (this.invocation) {
        return {
          ...this.invocation,
          steps: [...this.invocation.steps].sort(
            (a, b) => a.step_id - b.step_id
          ),
        }
      } else {
        return { steps: [] }
      }
    },

    stepsWithJobMetrics() {
      return this.formattedInvocation.steps.map((step, i) => {
        step.job.metrics = Object.fromEntries(
          step.job.metrics.map((metric) => [metric.name, metric])
        )
        step.job.params = Object.fromEntries(
          Object.entries(step.job.params).map(([key, value]) => [
            key,
            value.slice(0, -1).slice(1),
          ])
        )
        return step
      })
    },
    experimentId() {
      return this.formattedAnalysis.experiments.length > 0
        ? this.formattedAnalysis.experiments[0].id
        : null
    },
  },
  methods: {
    analysisListRoute() {
      return {
        name: 'projects-id-analysis',
        params: { id: this.projectId },
      }
    },
    goToAnalysisListRoute() {
      this.$router.push(this.analysisListRoute())
    },
    analysisLocation() {
      return {
        name: 'projects-id-analysis-analysisId',
        params: { id: this.projectId, analysisId: this.analysisId },
      }
    },
    goAnalysisRoute() {
      this.$router.push(this.analysisLocation())
    },
    copyAnalysisLocation() {
      return {
        name: 'projects-id-analysis-analysisId-copy',
        params: { id: this.projectId, analysisId: this.analysisId },
      }
    },
    resultsRoute() {
      const { id, analysisId } = this.$route.params
      return {
        name: 'projects-id-analysis-analysisId-results-peaks',
        params: { id, analysisId },
      }
    },
    async downloadQtl2Data() {
      try {
        const { archive_name: archiveName } = await this.$axios.$get(
          `/api/projects/${this.projectId}/analysis/${this.analysisId}/download_qtl2_data/`
        )
        // this.$axios.setHeader('Content-Type', false, ['post'])
        const link = document.createElement('a')
        link.href = `/static/${archiveName}`
        link.setAttribute('download', archiveName)
        document.body.appendChild(link)
        link.click()
        link.remove()
      } catch (error) {
        this.error = error.message
        console.log(error)
      }
    },
    experimentLocation() {
      return {
        name: 'projects-id-experiments-experimentId',
        params: {
          id: this.projectId,
          experimentId: this.experimentId,
        },
      }
    },
    formatDate(date) {
      const options = {
        hour: 'numeric',
        minute: 'numeric',
      }
      return new Date(date).toLocaleDateString('en', options)
    },
  },
}
</script>
<style scoped>
a#analysis-name {
  background-color: #272727 !important;
}
</style>