Merge branch '84-improve-taxonomy-details' into 'dev'

Improve taxonomy representation for an entry

Closes #84

See merge request !34

frontend/src/components/TaxonomyCard.vue

@@ -23,7 +23,7 @@
             :key="index"
           ></v-divider>
           <v-list-tile v-if="item.content" :key="item.title">
-            <div class="function" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
+            <div :class="item.color" style="width: 6px;height: 82%;margin-right: 10px; margin-left: -5px;"></div>
             <v-list-tile-content :key="item.title">
               <v-list-tile-title v-html="item.title"></v-list-tile-title>
               <v-list-tile-sub-title v-html="item.content.name"></v-list-tile-sub-title>
@@ -74,34 +74,42 @@ export default {
           {
             title: 'Superkingdom',
             content: response.data.superkingdom,
+            color: 'superkingdom',
           },
           {
             title: 'Kingdom',
             content: response.data.kingdom,
+            color: 'kingdom',
           },
           {
             title: 'Phylum',
             content: response.data.phylum,
+            color: 'phylum',
           },
           {
             title: 'Class',
             content: response.data.class_rank,
+            color: 'class',
           },
           {
             title: 'Order',
             content: response.data.order,
+            color: 'order',
           },
           {
             title: 'Family',
             content: response.data.family,
+            color: 'family',
           },
           {
             title: 'Genus',
             content: response.data.genus,
+            color: 'genus',
           },
           {
             title: 'Species',
             content: response.data.species,
+            color: 'species',
           },
         ];
       })

frontend/src/main.js

@@ -23,6 +23,15 @@ Vue.use(Vuetify, {
     eggnog: '#028090',
     taxonomy: '#564138',
     nodata: '#f7ebec',
+    // Taxonomy colors
+    superkingdom: '#28536b',
+    kingdom: "#c2948a",
+    phylum: "#7ea8be",
+    class: "#e2d4b7",
+    order: "#a0c1b9",
+    family: "#bcbdc0",
+    genus: "#734b5e",
+    species: "#8499b1",
   },
 });
 

frontend/src/views/Stats.vue

@@ -34,21 +34,34 @@
                 <v-icon class="white--text">far fa-chart-bar</v-icon>
                 <v-toolbar-title>Gene length distribution</v-toolbar-title>
                 <v-spacer></v-spacer>
-                <v-flex xs2 md1>
-                  <v-select
-                    :items="this.windowSizeChoice"
-                    color="primary lighten-3"
+                <v-flex xs4 md2 class="mt-3">
+                  <v-slider
                     v-model="geneLengthWindowSize"
                     @change="getAllGeneLength"
-                  ></v-select>
+                    thumb-label
+                    color="secondary lighten-2"
+                    thumb-color="secondary lighten-1"
+                    step="100"
+                    min="100"
+                    max=200
+                    always-dirty
+                    label="Window size (bp):"
+                  ></v-slider>
                 </v-flex>
-                <v-flex xs2 md1>
-                  <v-select
-                    :items="this.stopAtChoice"
-                    color="primary lighten-3"
+                <v-flex xs4 md2 xl1 class="mt-3 ml-4">
+                  <v-slider
                     v-model="stopAt"
                     @change="getAllGeneLength"
-                  ></v-select>
+                    thumb-label
+                    color="secondary lighten-2"
+                    thumb-color="secondary lighten-1"
+                    step="1000"
+                    min="1000"
+                    max=5000
+                    ticks
+                    always-dirty
+                    label="Stop at (bp):"
+                  ></v-slider>
                 </v-flex>
               </v-toolbar>
               <histogram :histoData="geneLengthData" chartId="histo_gene_length"></histogram>
@@ -116,20 +129,6 @@ export default {
     };
   },
   computed: {
-    stopAtChoice() {
-      let listStopAt = [];
-      for (let i=1000; i<=5000; i+=1000) {
-        listStopAt.push(i);
-      };
-      return listStopAt;
-    },
-    windowSizeChoice() {
-      let windowSize = [];
-      for (let i=100; i<=200; i+=100) {
-        windowSize.push(i);
-      };
-      return windowSize;
-    },
     selectLevel() {
       return ['kingdom', 'superkingdom', 'phylum', 'class', 'order', 'family', 'genus'];
     },