Pheno category add exp

• can add a new phenotype category when uploading experiment

client-nuxt/pages/projects/_id/analysis/_analysisId/results/peaks/index.vue

@@ -2,6 +2,7 @@
   <v-card flat color="transparent" class="mt-3">
     <v-card>
       <error-alert v-if="error" :error-message="error"></error-alert>
+
       <Peaks
         v-if="sanitizedPeaks.length > 0"
         :title="titleList"
@@ -11,11 +12,19 @@
         :headers="headers"
         :selected-item="selectedItem"
       />
+      <v-card-actions
+        ><download-csv :data="exportPeak" :name="exportFileName">
+          <v-btn class="mx-2" color="secondary" small fab>
+            <v-icon>mdi-table-arrow-down</v-icon>
+          </v-btn>
+        </download-csv></v-card-actions
+      >
     </v-card>
     <nuxt-child />
   </v-card>
 </template>
 <script>
+import JsonCSV from 'vue-json-csv'
 import ErrorAlert from '@/components/ErrorAlert'
 import Peaks from '~/components/DataTableActions.vue'
 
@@ -23,6 +32,7 @@ export default {
   components: {
     Peaks,
     ErrorAlert,
+    downloadCsv: JsonCSV,
   },
 
   async asyncData({ $axios, params, $auth, route }) {
@@ -56,11 +66,11 @@ export default {
       titleList: 'Significant peaks',
       headers: [
         { text: 'Id', align: 'start', value: 'id' },
-        // {
-        //   text: 'Variable Name',
+        {
+          text: 'Variable Name',
 
-        //   value: 'name',
-        // },
+          value: 'name',
+        },
         { text: 'Chromosome', value: 'chromosome' },
         { text: 'Position', value: 'position' },
         { text: 'Lod Score', value: 'lod' },
@@ -78,9 +88,25 @@ export default {
         itemRoute: this.getItemRoute(peak),
       }))
     },
+    exportPeak() {
+      return this.peaks.map(
+        // eslint-disable-next-line camelcase
+        ({ ci_hi, ci_lo, lod, p_value, position, variable_name }) => ({
+          ci_hi,
+          ci_lo,
+          lod,
+          p_value,
+          position,
+          variable_name,
+        })
+      )
+    },
     selectedItem() {
       return parseInt(this.$route.params?.peakId)
     },
+    exportFileName() {
+      return `${this.projectId}-${this.analysisId}-significant-peaks.csv`
+    },
   },
   methods: {
     getItemRoute({ id: peakId }) {