add bootstrap-vue bootstrap chartjs to package for npm

frontend/package.json

@@ -10,6 +10,9 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "bootstrap": "^4.3.1",
+    "bootstrap-vue": "^2.0.0-rc.24",
+    "chart.js": "^2.8.0",
     "core-js": "^2.6.5",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.10",

frontend/src/App.vue

 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+  <div>
+    <b-navbar toggleable="lg" type="dark" variant="dark">
+      <b-navbar-brand to="/">MetageneDB</b-navbar-brand>
+
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
+
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav>
+          <b-nav-item to="/">Home</b-nav-item>
+          <b-nav-item to="/about">About</b-nav-item>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
+
     <router-view/>
   </div>
 </template>
 
 <style lang="scss">
-@import './assets/bootstrap/css/bootstrap.min.css';
-
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 
-</style>
\ No newline at end of file
+</style>

frontend/src/main.js

 import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
 import './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
 
 Vue.config.productionTip = false;
+Vue.use(BootstrapVue);
 
 new Vue({
   router,

frontend/src/views/Home.vue

 <template>
   <div class="jumbotron">
-    <img alt="Vue logo" src="../assets/logo.png">
     <h3>Genes</h3>
     <p> The catalog currently contains <span class="badge badge-secondary"> {{ count }} </span> genes.</p>
     <div v-for="(gene, i) in genes" :key="i">
@@ -14,7 +13,7 @@
 	  <div class="card-body">
 	    <histogram v-bind:geneLengthData="geneLengthData"></histogram>
 	    <label for="geneLengthWindowSize">Gene size window</label>
-		<input type="range" class="custom-range" min="1000" max="20000" step="1000" v-model="geneLengthWindowSize" v-on:input="fetchGeneLength(geneLengthWindowSize)" debounce="500">
+		<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>