Fix initial query state (#489)

* Runs state should be reflected when query changes caused by back navigation

* Maintain run state after refresh

frontend/src/common/component/AppMenu.vue

@@ -16,6 +16,7 @@
             depressed
             @mouseover="runsSelectorOpen = true"
             @mouseout="runsSelectorOpen = false"
+            :ripple="false"
             :color="runsSelectorOpen ? 'dark_primary' : 'primary'"
             :class="runsSelectorOpen ? 'runs-selected-menu-open' : 'runs-selected-menu'"
             > <span class="runs-selected-text">Runs: {{ runs.length == 0 ? 'None selected' : runs.join(', ') }} </span>
@@ -43,7 +44,7 @@
             :key="item.name"
             flat
             dark
-            :class="selected === item.name ? 'menu-item-selected': 'menu-item'"
+            :class="selected.toLowerCase() === item.name.toLowerCase() ? 'menu-item-selected': 'menu-item'"
             @click="handleItemClick(item)"
           >{{ item.title }}</v-btn>
         </v-toolbar-items>
@@ -109,15 +110,24 @@ export default {
     };
   },
   created() {
+    this.runs = this.$route.query.runs; //maintain runs state after refresh
     getRuns().then(({errno, data}) => {
       this.availableRuns = data;
-      this.runs = data;
+      if (!this.runs) this.runs = data;
+      //use replace here instead of push so that user cannot go back to empty run state
+      this.$router.replace( { path: this.initialRoute, query: { runs: this.runs }});
     });
   },
   watch: {
     runs: function(val) {
-        this.$router.push( {query: { runs: this.runs }});
+        if (this.runs) {
+          this.$router.push( {query: { runs: this.runs }});
+        }
     },
+    '$route' (to, from) { //this will get called when back button is hit that changes path or query
+       this.runs = this.$route.query.runs;
+       this.selected = this.$route.name;
+    }
   },
   methods: {
     handleItemClick: function(item) {