Add buttons for selection

frontend/src/views/Stats.vue

@@ -31,6 +31,25 @@
               >
                 <v-icon class="white--text">bar_chart</v-icon>
                 <v-toolbar-title>Gene length distribution</v-toolbar-title>
+                <v-spacer></v-spacer>
+                <v-flex xs4 md2>
+                  <v-select
+                    background-color="primary"
+                    :items="this.geneLengthChoice"
+                    label="Window Length"
+                    value=400
+                    color="secondary"
+                  ></v-select>
+                </v-flex>
+                <v-flex xs4 md2>
+                  <v-select
+                    background-color="primary"
+                    :items="this.stopAtChoice"
+                    label="Stop at"
+                    value=5000
+                    color="secondary"
+                  ></v-select>
+                </v-flex>
               </v-toolbar>
               <histogram :histoData="geneLengthData"></histogram>
             </v-flex>
@@ -41,6 +60,15 @@
               >
                 <v-icon class="white--text">account_tree</v-icon>
                 <v-toolbar-title>Taxonomical annotation</v-toolbar-title>
+                <v-spacer></v-spacer>
+                <v-flex xs4 md2>
+                  <v-select
+                    background-color="primary"
+                    :items="this.selectLevel"
+                    value="phylum"
+                    color="secondary"
+                  ></v-select>
+                </v-flex>
               </v-toolbar>
               <doughnut :doughnutData="taxoCounts"></doughnut>
             </v-flex>
@@ -68,8 +96,11 @@ export default {
       geneCountTaxo: {},
       geneCountFull: {},
       geneLengthWindowSize: 400,
+      stopAtChoice: [5000, 10000],
+      geneLengthChoice: [200, 400, 500, 1000],
       stopAt: 5000,
       taxoCounts: {},
+      selectLevel: ['kingdom', 'phylum', 'genus']
     };
   },
   mounted() {