small ui init state fix

client/src/store/index.ts

@@ -37,6 +37,11 @@ const store = createStore<State>({
     }
   },
   actions: {
+    async initData() {
+      this.dispatch('fetchConfig');
+      this.dispatch('_runStatusGenerator');
+    },
+
     async _runStatusGenerator({commit, state}) {
       // notify({
       //   title: "Authorization",
@@ -49,11 +54,10 @@ const store = createStore<State>({
       const g = getStatusGenerator();
       commit(_SET_STATUS_GENERATOR, g);
       for await (const data of state._statusGenerator) {
-        const st = data.toLocaleLowerCase();
-        if(state.analyticStatus.toLocaleLowerCase() != 'ready' && st == 'ready') {
-          this.dispatch('fetchConfig');
+        // const st = data.toLocaleLowerCase();
+        // if(state.analyticStatus.toLocaleLowerCase() != 'ready' && st == 'ready') {
           // TODO: update segments from here
-        }
+        // }
         // this.status = data.toLowerCase();
         commit(SET_ANALYTICS_STATUS, data);
       }
@@ -68,6 +72,6 @@ const store = createStore<State>({
   }
 })
 
-store.dispatch('_runStatusGenerator');
+store.dispatch('initData');
 
 export default store;

client/src/views/Home.vue

@@ -4,6 +4,9 @@
     <graph ref="graph" />
     
     <analytic-status />
+    <div>
+      <v-select :options="analyticUnitTypes"></v-select>
+    </div>
     <div id="controls">
       <div v-if="analyticUnitType == analyticUnitTypes[1]">
         Hold <pre>S</pre> to label patterns <br/>
@@ -13,7 +16,6 @@
         <button @click="clearAllLabeling"> clear all labeling </button>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -33,17 +35,25 @@ export default defineComponent({
   methods: {
     clearAllLabeling() {
       this.$refs.graph.deleteAllSegments();
+    },
+    changeAnalyticUnitType(e) {
+      console.log(e);
     }
   },
   data: function () {
     return {
-      analyticUnitTypes: [AnalyticUnitType.THRESHOLD, AnalyticUnitType.PATTERN, AnalyticUnitType.ANOMALY],
+      analyticUnitTypes: [
+        AnalyticUnitType.THRESHOLD,
+        AnalyticUnitType.PATTERN,
+        AnalyticUnitType.ANOMALY, 
+      ],
+      analyticUnitType: AnalyticUnitType.PATTERN
     }
   },
   computed: {
-    analyticUnitType() {
-      return this.$store.state.analyticUnitType;
-    }
+    // analyticUnitType() {
+    //   return { id: 1, name: this.$store.state.analyticUnitType }
+    // }
   }
 });
 </script>