phenotypes.vue

<template>
  <div>
        <div style="text-align:center; margin:30px;">
  <h1>
    Genome-wide analysis parameters</h1>
  <p style="width:80%; margin: 0 auto;">
Please select the traits you want to analyze jointly with the Omnibus test. A research box bellow allows you to query our current database. The maximum number of trait that can be analyzed jointly is 64 traits. Computation time for a large number of trait can take up to half an hour.
  </p>
</div>
    <h2>Select at least two GWASs to be analyzed jointly:</h2>
    <div id="app">
      <v-app>
        <v-data-table
          v-model="selectedRows"
          @current-items="current = $event"
          @item-selected="bulkSelect"
          :headers="headers"
          :items="phenotypes"
          :items-per-page="10"
          item-key="id"
          class="elevation-1"
          :search="search"
          show-select
          unselectable
        >
          <template v-slot:top>
            <v-text-field
              v-model="search"
              label="Search"
              class="mx-4"
            >
          </v-text-field>
        </template>
        </v-data-table>
        <div align="left" justify="start">
          <v-btn depressed color="primary" v-on:click="runAnalysis()" :disabled="selectedRows.length <=1">
            Launch analysis
          </v-btn>
        </div>
      </v-app>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params, $auth }) {
      const data = {
        initTableName: "initTable.hdf5"
        // initTableName: "initTableTest1.hdf5"
      };
    const phenotypes = await $axios.$post('/phenotypes', data)
    return {
      phenotypes,
    }
  },
  data() {
    return {
      headers: [
        { text: 'Outcome', value: 'outcome' },
        { text: 'Full name', value: 'full_name' },
        { text: 'Consortium', value: 'consortium' },
        { text: 'Type', value: 'typ' },
        { text: 'Ref', value: 'ref' },
      ],
      search: '',
      phenotypes: [],
      selectedRows: [],
    }
  },
  methods: {
    bulkSelect({ item: b, value }) {
      const { selectedRows, current, shiftKeyOn } = this;
      if (selectedRows.length === 1 && value === true && shiftKeyOn) {
        const [a] = selectedRows;
        let start = current.findIndex((item) => item === a);
        let end = current.findIndex((item) => item === b);
        if (start - end > 0) {
          const temp = start;
          start = end;
          end = temp;
        }
        for (let i = start; i <= end; i++) {
          selectedRows.push(current[i]);
        }
      }
    },
    runAnalysis(){
      const { selectedRows, $axios } = this;
      const phenotypeIds = {
        phenotypeID: selectedRows.map(function(phenotype){return phenotype.id}),
        initTableName: "initTable.hdf5"
        // phenotypeID: ["z_MAGIC_FAST-GLUCOSE", "z_MAGIC_FAST-INSULIN"],
        // initTableName: "initTableTest.hdf5"
      };
      console.log("REQUEST POST")

      console.log(phenotypeIds)
      $axios.$post('/projects', phenotypeIds).then(response => this.$router.push('/projects/'+response.id));
    },
  }
}
</script>