continue improving frontend for discussion

frontend/src/App.vue

@@ -2,7 +2,7 @@
   <v-app>
     <Navbar/>
 
-    <v-content>
+    <v-content class="ma-3">
       <router-view></router-view>
     </v-content>
   </v-app>

frontend/src/components/Histogram.vue

 <template>
-  <div v-if="geneLengthData.counts" id="app">
+  <div v-if="geneLengthData.counts">
     <canvas id="histogram"></canvas>
   </div>
 </template>
@@ -26,6 +26,8 @@ export default {
           {
             label: 'Number of genes',
             data: this.geneLengthData.counts,
+            borderColor: '#edb183',
+            backgroundColor: '#f15152',
           },
         ],
       };

frontend/src/components/Navbar.vue

 <template>
   <nav>
-    <v-toolbar flat app dark height="50" class="primary">
+    <v-toolbar flat app dark height="40" class="primary">
       <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
       <v-toolbar-title class="headline">
         <span class="font-weight-light">Metagene</span>

frontend/src/main.js

@@ -9,8 +9,8 @@ import 'vuetify/dist/vuetify.min.css';
 Vue.config.productionTip = false;
 Vue.use(Vuetify, {
   theme: {
-    primary: '#212836',
-    secondary: '#677ea3',
+    primary: '#263238',
+    secondary: '#508991',
   },
 });
 

frontend/src/views/Catalogstats.vue

 <template>
   <div class="catalogstats">
-    <h1>Statistics</h1>
-    <div class="card">
-      <div class="card-header">
-        Gene length distribution
-      </div>
-      <div class="card-body">
-        <histogram v-bind:geneLengthData="geneLengthData"></histogram>
-        <label for="geneLengthWindowSize">Gene size window</label>
-        <input type="range" class="custom-range" min="200" max="10000" step="200"
-        v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
-        debounce="500">
-        {{geneLengthWindowSize}}
-      </div>
-    </div>
+    <h1 class="subheading primary--text">Statistics</h1>
+    <v-container fluid>
+      <v-layout row wrap>
+        <v-flex xs12 md6>
+          <v-toolbar
+            class="secondary"
+            dark
+          >
+            <v-toolbar-title>Gene length distribution</v-toolbar-title>
+          </v-toolbar>
+          <v-card class="pa-2">
+            <div class="card-body">
+              <histogram v-bind:geneLengthData="geneLengthData"></histogram>
+              <!-- <label for="geneLengthWindowSize">Gene size window</label>
+              <input type="range" class="custom-range" min="200" max="10000" step="200"
+              v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)"
+              debounce="500">
+              {{geneLengthWindowSize}} -->
+            </div>
+          </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
   </div>
 </template>
 

frontend/src/views/Genes.vue

 <template>
   <div class="genes">
-    <h1>Genes</h1>
-    <p>
-      The catalog currently contains
-      <span class="badge badge-secondary"> {{ count }} </span>
-      genes.
-    </p>
-    <div v-for="(gene, i) in genes" :key="i">
-      <h4>{{ gene.gene_id }}</h4>
-      <p>Gene length: {{ gene.gene_length }} {{ gene.functions }}</p>
-    </div>
+    <h1 class="subheading primary--text">Genes</h1>
+
+    <v-container fluid>
+      <v-layout row wrap>
+        <v-flex xs12>
+          <v-toolbar
+            class="secondary"
+            dark
+          >
+            <v-toolbar-title>Catalog content</v-toolbar-title>
+          </v-toolbar>
+          <v-list>
+            <v-subheader>
+              <p><span class="badge badge-secondary"> {{ count }} </span> genes in the calalog.</p>
+            </v-subheader>
+
+            <v-data-table
+              :headers="headers"
+              :items="genes"
+              class="elevation-1"
+            >
+              <template v-slot:items="props">
+                <td>{{ props.item.gene_id }}</td>
+                <td class="text-xs-right">{{ props.item.gene_length }}</td>
+                <td class="text-xs-right">{{ props.item.functions[0] }}</td>
+              </template>
+            </v-data-table>
+            
+          </v-list>
+        </v-flex>
+      </v-layout>
+    </v-container>
   </div>
+  
 </template>
 
 <script>
@@ -20,6 +43,16 @@ export default {
     return {
       genes: [],
       count: 0,
+      headers: [
+        {
+          text: 'Gene name',
+          align: 'left',
+          sortable: false,
+          value: 'name'
+        },
+        { text: 'Length', value: 'gene_length' },
+        { text: 'Functions', value: 'functions', align: 'right', },
+      ]
     };
   },
   mounted() {