Pull available / selected runs option for each component into menu bar (#486)

frontend/src/audio/Audio.vue

@@ -4,7 +4,6 @@
       <ui-audio-container
         :expand="true"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="filteredTagsList"
         :title="'Tags matching ' + config.groupNameReg"
       />
@@ -12,7 +11,6 @@
         v-for="item in groupedTags"
         :key="item.group"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="item.tags"
         :title="item.group"
       />
@@ -20,7 +18,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -30,7 +27,7 @@
 
 <script>
 
-import {getPluginAudioTags, getRuns} from '../service';
+import {getPluginAudioTags} from '../service';
 import {flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
@@ -38,14 +35,19 @@ import Config from './ui/Config';
 import AudioPanelContainer from './ui/AudioPanelContainer';
 
 export default {
-  name: 'Images',
+  name: 'Audio',
   components: {
     'ui-config': Config,
     'ui-audio-container': AudioPanelContainer,
   },
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
   data() {
     return {
-      runsArray: [],
       tags: [],
       config: {
         groupNameReg: '.*',
@@ -57,15 +59,6 @@ export default {
     };
   },
   computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
     tagsList() {
       let tags = this.tags;
 
@@ -129,11 +122,7 @@ export default {
       let groupNameReg = this.config.groupNameReg;
       this.filterTagsList(groupNameReg);
     });
-
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-      this.config.runs = data;
-    });
+    this.config.runs = this.runs;
   },
   mounted() {
     autoAdjustHeight();
@@ -142,6 +131,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
+    runs: function(val) {
+        this.config.runs = val;
+    }
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/audio/ui/AudioPanel.vue

@@ -32,10 +32,6 @@ const intervalTime = 30;
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     tagInfo: {
       type: Object,
       required: true,

frontend/src/audio/ui/AudioPanelContainer.vue

@@ -10,7 +10,6 @@
         :tag-info="tagInfo"
         :runs="config.runs"
         :running="config.running"
-        :runs-items="runsItems"
       />
 
       <v-pagination
@@ -30,10 +29,6 @@ import {cloneDeep, flatten} from 'lodash';
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/audio/ui/Config.vue

@@ -7,16 +7,6 @@
       dark
     />
 
-    <label class="visual-dl-page-checkbox-group-label">Runs</label>
-    <v-checkbox
-      v-for="item in runsItems"
-      :key="item.name"
-      :label="item.name"
-      :value="item.value"
-      v-model="config.runs"
-      dark
-    />
-
     <v-btn
       :color="config.running ? 'primary' : 'error'"
       v-model="config.running"
@@ -34,10 +24,6 @@
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/common/component/AppMenu.vue

@@ -5,6 +5,30 @@
         color="primary"
         dark>
         <v-toolbar-title class="appbar-menu-title"/>
+        <v-menu :close-on-content-click="false">
+            <v-btn
+                slot="activator"
+                dark
+                flat
+            > Runs: {{ runs }}
+            </v-btn>
+            <v-list dense>
+              <v-list-tile
+                v-for="(item, index) in availableRuns"
+                :key="index"
+                @click=""
+              >
+                  <v-list-tile-action>
+                    <v-checkbox
+                        :value="item"
+                        :key="item"
+                        :label="item"
+                        v-model="runs"
+                    />
+                  </v-list-tile-action>
+              </v-list-tile>
+             </v-list>
+        </v-menu>
         <v-toolbar-items>
           <v-btn
             v-for="item in items"
@@ -21,6 +45,8 @@
 </template>
 
 <script>
+import {getRuns} from '../../service';
+
 export default {
   props: {
     initialRoute: {
@@ -31,6 +57,8 @@ export default {
   name: 'AppMenu',
   data() {
     return {
+      availableRuns: [],
+      runs: [],
       selected: this.initialRoute,
       items: [
         {
@@ -71,10 +99,21 @@ export default {
       ],
     };
   },
+  created() {
+    getRuns().then(({errno, data}) => {
+      this.availableRuns = data;
+      this.runs = data;
+    });
+  },
+  watch: {
+    runs: function(val) {
+        this.$router.push( {query: { runs: this.runs }});
+    },
+  },
   methods: {
     handleItemClick: function(item) {
       this.selected = item.name;
-      this.$router.push(item.url);
+      this.$router.push( { path: item.url, query: { runs: this.runs }});
     },
   },
 };

frontend/src/high-dimensional/HighDimensional.vue

@@ -13,7 +13,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -22,7 +21,7 @@
 </template>
 
 <script>
-import {getHighDimensionalDatasets, getRuns} from '../service';
+import {getHighDimensionalDatasets} from '../service';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 import Config from './ui/Config';
 import Chart from './ui/Chart';
@@ -36,9 +35,14 @@ export default {
     'ui-chart': Chart,
   },
   name: 'HighDimensional',
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
   data() {
     return {
-      runsArray: [],
       config: {
         searchText: '',
         displayWordLabel: true,
@@ -53,14 +57,10 @@ export default {
     };
   },
   created() {
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-
-      // Setting selectedRun should trigger fetchDatasets
-      if (data.length > 0) {
-        this.config.selectedRun = data[0];
-      }
-    });
+    // Setting selectedRun should trigger fetchDatasets
+    if (this.runs.length > 0) {
+      this.config.selectedRun = this.runs[0];
+    }
 
     if (this.config.running && !this.isDemo) {
       this.startInterval();
@@ -82,21 +82,15 @@ export default {
     'config.running': function(val) {
       (val && !this.isDemo) ? this.startInterval() : this.stopInterval();
     },
+    runs: function(val) {
+      if (this.runs.length > 0) {
+        this.config.selectedRun = this.runs[0];
+      }
+    }
   },
   mounted() {
     autoAdjustHeight();
   },
-  computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
-  },
   methods: {
     stopInterval() {
       clearInterval(this.getOringDataInterval);

frontend/src/high-dimensional/ui/Config.vue

@@ -40,17 +40,6 @@
 
     </v-radio-group>
 
-    <v-radio-group
-      label="Run"
-      v-model="config.selectedRun"
-      dark>
-      <v-radio
-        v-for="item in runsItems"
-        :key="item.name"
-        :label="item.name"
-        :value="item.value" />
-    </v-radio-group>
-
     <v-btn
       :color="config.running ? 'primary' : 'error'"
       v-model="config.running"
@@ -68,10 +57,6 @@
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/histogram/Histogram.vue

@@ -3,7 +3,6 @@
     <div class="visual-dl-page-left">
       <ui-chart-page
         :config="config"
-        :runs-items="runsItems"
         :tag-list="filteredTagsList"
         :title="'Tags matching ' + config.groupNameReg"
       />
@@ -11,7 +10,6 @@
         v-for="item in groupedTags"
         :key="item.group"
         :config="config"
-        :runs-items="runsItems"
         :tag-list="item.tags"
         :title="item.group"
       />
@@ -19,7 +17,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -28,7 +25,7 @@
 </template>
 
 <script>
-import {getPluginHistogramsTags, getRuns} from '../service';
+import {getPluginHistogramsTags} from '../service';
 import Config from './ui/Config';
 import ChartPage from './ui/ChartPage';
 import {flatten, uniq} from 'lodash';
@@ -39,16 +36,26 @@ export default {
     'ui-config': Config,
     'ui-chart-page': ChartPage,
   },
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
+  data() {
+    return {
+      tags: [],
+      config: {
+        groupNameReg: '.*',
+        horizontal: 'step',
+        chartType: 'offset',
+        runs: [],
+        running: true,
+      },
+      filteredTagsList: [],
+    };
+  },
   computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
     tagsList() {
       let tags = this.tags;
 
@@ -95,20 +102,6 @@ export default {
       });
     },
   },
-  data() {
-    return {
-      runsArray: [],
-      tags: [],
-      config: {
-        groupNameReg: '.*',
-        horizontal: 'step',
-        chartType: 'offset',
-        runs: [],
-        running: true,
-      },
-      filteredTagsList: [],
-    };
-  },
   created() {
     getPluginHistogramsTags().then(({errno, data}) => {
       this.tags = data;
@@ -116,10 +109,7 @@ export default {
       let groupNameReg = this.config.groupNameReg;
       this.filterTagsList(groupNameReg);
     });
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-      this.config.runs = data;
-    });
+    this.config.runs = this.runs;
   },
 
   mounted() {
@@ -129,6 +119,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
+    runs: function(val) {
+        this.config.runs = val;
+    }
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/histogram/ui/Chart.vue

@@ -41,10 +41,6 @@ const yValueFormat = format('.' + p + 'e');
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     tagInfo: {
       type: Object,
       required: true,

frontend/src/histogram/ui/ChartPage.vue

@@ -12,7 +12,6 @@
           :runs="config.runs"
           :chart-type="config.chartType"
           :running="config.running"
-          :runs-items="runsItems"
         />
       </div>
       <v-pagination
@@ -32,10 +31,6 @@ import {cloneDeep, flatten} from 'lodash';
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/histogram/ui/Config.vue

@@ -18,16 +18,6 @@
         :value="mode.value"/>
     </v-radio-group>
 
-    <label class="visual-dl-page-checkbox-group-label">Runs</label>
-    <v-checkbox
-      v-for="item in runsItems"
-      :key="item.name"
-      :label="item.name"
-      :value="item.value"
-      v-model="config.runs"
-      dark
-    />
-
     <v-btn
       class="visual-dl-page-run-toggle"
       :color="config.running ? 'primary' : 'error'"
@@ -44,10 +34,6 @@
 <script>
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/images/Images.vue

@@ -4,7 +4,6 @@
       <ui-chart-page
         :expand="true"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="filteredTagsList"
         :title="'Tags matching ' + config.groupNameReg"
       />
@@ -12,7 +11,6 @@
         v-for="item in groupedTags"
         :key="item.group"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="item.tags"
         :title="item.group"
       />
@@ -20,7 +18,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -30,7 +27,7 @@
 
 <script>
 
-import {getPluginImagesTags, getRuns} from '../service';
+import {getPluginImagesTags} from '../service';
 import {flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
@@ -43,9 +40,14 @@ export default {
     'ui-config': Config,
     'ui-chart-page': ChartPage,
   },
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
   data() {
     return {
-      runsArray: [],
       tags: [],
       config: {
         groupNameReg: '.*',
@@ -57,15 +59,6 @@ export default {
     };
   },
   computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
     tagsList() {
       let tags = this.tags;
 
@@ -129,11 +122,7 @@ export default {
       let groupNameReg = this.config.groupNameReg;
       this.filterTagsList(groupNameReg);
     });
-
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-      this.config.runs = data;
-    });
+    this.config.runs = this.runs;
   },
   mounted() {
     autoAdjustHeight();
@@ -142,6 +131,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
+    runs: function(val) {
+        this.config.runs = val;
+    }
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/images/ui/ChartPage.vue

@@ -11,7 +11,6 @@
         :is-actual-image-size="config.isActualImageSize"
         :runs="config.runs"
         :running="config.running"
-        :runs-items="runsItems"
       />
 
       <v-pagination
@@ -31,10 +30,6 @@ import {cloneDeep, flatten} from 'lodash';
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/images/ui/Config.vue

@@ -12,16 +12,6 @@
       v-model="config.isActualImageSize"
       dark/>
 
-    <label class="visual-dl-page-checkbox-group-label">Runs</label>
-    <v-checkbox
-      v-for="item in runsItems"
-      :key="item.name"
-      :label="item.name"
-      :value="item.value"
-      v-model="config.runs"
-      dark
-    />
-
     <v-btn
       :color="config.running ? 'primary' : 'error'"
       v-model="config.running"
@@ -39,10 +29,6 @@
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/images/ui/Image.vue

@@ -33,10 +33,6 @@ const intervalTime = 30;
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     tagInfo: {
       type: Object,
       required: true,

frontend/src/router/index.js

@@ -17,16 +17,25 @@ export default new Router({
       path: '/scalars',
       name: 'Scalars',
       component: Scalars,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
     {
       path: '/histograms',
       name: 'Histograms',
       component: Histogram,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
     {
       path: '/images',
       name: 'Images',
       component: Images,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
     {
       path: '/graphs',
@@ -37,16 +46,25 @@ export default new Router({
       path: '/texts',
       name: 'Texts',
       component: Texts,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
     {
       path: '/audio',
       name: 'Audio',
       component: Audio,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
     {
       path: '/HighDimensional',
       name: 'HighDimensional',
       component: HighDimensional,
+      props: (route) => ({
+          runs: route.query.runs
+      })
     },
   ],
 });

frontend/src/scalars/Scalars.vue

@@ -3,7 +3,6 @@
     <div class="visual-dl-page-left">
       <ui-chart-page
         :config="config"
-        :runs-items="runsItems"
         :tag-list="filteredTagsList"
         :title="'Tags matching' + config.groupNameReg"
       />
@@ -11,7 +10,6 @@
         v-for="item in groupedTags"
         :key="item.group"
         :config="config"
-        :runs-items="runsItems"
         :tag-list="item.tags"
         :title="item.group"
       />
@@ -20,7 +18,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -29,7 +26,7 @@
 </template>
 
 <script>
-import {getPluginScalarsTags, getRuns} from '../service';
+import {getPluginScalarsTags} from '../service';
 import {flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
@@ -41,9 +38,14 @@ export default {
     'ui-config': Config,
     'ui-chart-page': ChartPage,
   },
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
   data() {
     return {
-      runsArray: [],
       tags: [],
       config: {
         groupNameReg: '.*',
@@ -58,15 +60,6 @@ export default {
     };
   },
   computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
     tagsList() {
       let tags = this.tags;
 
@@ -121,11 +114,7 @@ export default {
       let groupNameReg = this.config.groupNameReg;
       this.filterTagsList(groupNameReg);
     });
-
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-      this.config.runs = data;
-    });
+    this.config.runs = this.runs;
   },
   mounted() {
     autoAdjustHeight();
@@ -134,6 +123,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
+    runs: function(val) {
+        this.config.runs = val;
+    }
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/scalars/ui/Chart.vue

@@ -103,10 +103,6 @@ const intervalTime = 15;
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     tagInfo: {
       type: Object,
       required: true,

frontend/src/scalars/ui/ChartPage.vue

@@ -16,7 +16,6 @@
           :outlier="config.outlier"
           :runs="config.runs"
           :running="config.running"
-          :runs-items="runsItems"
         />
       </div>
       <v-pagination
@@ -38,10 +37,6 @@ export default {
     'ui-expand-panel': ExpandPanel,
   },
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/scalars/ui/Config.vue

@@ -49,18 +49,6 @@
       v-model="config.outlier"
       dark/>
 
-    <label class="visual-dl-page-checkbox-group-label">Runs</label>
-
-    <v-checkbox
-      v-for="item in runsItems"
-      :key="item.name"
-      :label="item.name"
-      :value="item.value"
-      v-model="config.runs"
-      dark
-      class="visual-dl-page-runs-checkbox"
-    />
-
     <v-btn
       :color="config.running ? 'primary' : 'error'"
       v-model="config.running"
@@ -78,10 +66,6 @@
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/texts/Texts.vue

@@ -4,7 +4,6 @@
       <ui-chart-page
         :expand="true"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="filteredTagsList"
         :title="'Tags matching ' + config.groupNameReg"
       />
@@ -12,7 +11,6 @@
         v-for="item in groupedTags"
         :key="item.group"
         :config="filteredConfig"
-        :runs-items="runsItems"
         :tag-list="item.tags"
         :title="item.group"
       />
@@ -20,7 +18,6 @@
     <div class="visual-dl-page-right">
       <div class="visual-dl-page-config-container">
         <ui-config
-          :runs-items="runsItems"
           :config="config"
         />
       </div>
@@ -30,7 +27,7 @@
 
 <script>
 
-import {getPluginTextsTags, getRuns} from '../service';
+import {getPluginTextsTags} from '../service';
 import {flatten, uniq} from 'lodash';
 import autoAdjustHeight from '../common/util/autoAdjustHeight';
 
@@ -43,9 +40,14 @@ export default {
     'ui-config': Config,
     'ui-chart-page': ChartPage,
   },
+  props: {
+      runs: {
+        type: Array,
+        required: true,
+      },
+  },
   data() {
     return {
-      runsArray: [],
       tags: [],
       config: {
         groupNameReg: '.*',
@@ -56,15 +58,6 @@ export default {
     };
   },
   computed: {
-    runsItems() {
-      let runsArray = this.runsArray || [];
-      return runsArray.map((item) => {
-        return {
-          name: item,
-          value: item,
-        };
-      });
-    },
     tagsList() {
       let tags = this.tags;
 
@@ -128,11 +121,7 @@ export default {
       let groupNameReg = this.config.groupNameReg;
       this.filterTagsList(groupNameReg);
     });
-
-    getRuns().then(({errno, data}) => {
-      this.runsArray = data;
-      this.config.runs = data;
-    });
+    this.config.runs = this.runs;
   },
   mounted() {
     autoAdjustHeight();
@@ -141,6 +130,9 @@ export default {
     'config.groupNameReg': function(val) {
       this.throttledFilterTagsList();
     },
+    runs: function(val) {
+        this.config.runs = val;
+    }
   },
   methods: {
     filterTagsList(groupNameReg) {

frontend/src/texts/ui/Chart.vue

@@ -29,10 +29,6 @@ const intervalTime = 30;
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     tagInfo: {
       type: Object,
       required: true,

frontend/src/texts/ui/ChartPage.vue

@@ -14,7 +14,6 @@
           :outlier="config.outlier"
           :runs="config.runs"
           :running="config.running"
-          :runs-items="runsItems"
         />
       </div>
       <v-pagination
@@ -36,10 +35,6 @@ export default {
     'ui-expand-panel': ExpandPanel,
   },
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,

frontend/src/texts/ui/Config.vue

@@ -7,18 +7,6 @@
       dark
     />
 
-    <label class="visual-dl-page-checkbox-group-label">Runs</label>
-
-    <v-checkbox
-      v-for="item in runsItems"
-      :key="item.name"
-      :label="item.name"
-      :value="item.value"
-      v-model="config.runs"
-      dark
-      class="visual-dl-page-runs-checkbox"
-    />
-
     <v-btn
       :color="config.running ? 'primary' : 'error'"
       v-model="config.running"
@@ -36,10 +24,6 @@
 
 export default {
   props: {
-    runsItems: {
-      type: Array,
-      required: true,
-    },
     config: {
       type: Object,
       required: true,