Refactoring dashboard state management

src/ui/src/components/Dashboard.vue

@@ -80,15 +80,17 @@
       </v-window-item>
       <v-window-item :key="3" :value="3">
         <v-row class="pa-1 ma-1 justify-center">
-          <Experiments :experiment_objects="experiment_objects" :wc_state="wc_state" :campaigns="campaigns"/>
+          <Experiments/>
         </v-row>
       </v-window-item>
     </v-window>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue';
+/// <reference path="../store.d.ts" />
+import { main_url, wc_info, wc_state, wfs } from "@/store";
+import { ref } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
 import CancelButton from './AdminButtons/CancelButton.vue';
@@ -97,75 +99,7 @@ import PauseResumeButton from './AdminButtons/PauseResumeButton.vue';
 import ResetButton from './AdminButtons/ResetButton.vue';
 import SafetyStopButton from './AdminButtons/SafetyStopButton.vue';
 import ShutdownButton from './AdminButtons/ShutdownButton.vue';
-const main_url = ref()
-const state_url = ref()
-const workcell_info_url = ref()
-const has_url = ref(false)
 const tab = ref(1)
-const wfs = ref([''])
-const experiments = ref()
-const experiments_url = ref()
-const wc_state = ref()
-const wc_info = ref()
-const campaigns = ref()
-const campaigns_url = ref()
-const experiment_keys = ref()
-const experiment_objects: any = ref([])
-main_url.value = "http://".concat(window.location.host)
-class ExperimentInfo {
-  experiment_id?: string;
-  experiment_workflows: any;
-  experiment_name?: string;
-  num_wfs?: any;
-  num_events?: any;
-  events?: any
-}
-async function get_events(experiment_id: string) {
-  return Object.values(await ((await fetch(main_url.value.concat("/experiments/".concat(experiment_id).concat("/events"))))).json());
-}
-watchEffect(async () => {
-  has_url.value = true;
-  state_url.value = main_url.value.concat("/wc/state")
-
-  experiments_url.value = main_url.value.concat("/experiments/all")
-  campaigns_url.value = experiments_url.value.concat("/campaigns/all")
-  workcell_info_url.value = main_url.value.concat("/wc/")
-
-  watchEffect(async () => wc_state.value = await (await fetch(state_url.value)).json())
-  watchEffect(async () => wc_info.value = await (await fetch(workcell_info_url.value)).json())
-
-  // var new_experiment_keys = [];
-  // experiment_keys.value = [];
-  setInterval(updateDashboard, 1000)
-  setInterval(updateExperiments, 10000)
-
-  async function updateExperiments() {
-    experiment_objects.value = Object.values(experiments.value);
-    campaigns.value = await ((await fetch(campaigns_url.value)).json());
-    // new_experiment_keys = Object.keys(experiments.value).sort();
-    // let difference = new_experiment_keys.filter(x => !experiment_keys.value.includes(x));
-    // experiment_keys.value = Object.keys(experiments.value).sort();
-    // difference.forEach(async function (value: any) {
-    //   var experiment: ExperimentInfo = new ExperimentInfo();
-    //   experiment.experiment_id = value;
-    //   var events = await get_events(value);
-
-    //   experiment.experiment_name = experiments.value[value].experiment_name;
-    //   experiment.experiment_workflows = wfs.value.filter((key: any) => wc_state.value.workflows[key].experiment_id === value);
-    //   experiment.events = events;
-    //   experiment.num_wfs = experiment.experiment_workflows.length;
-    //   experiment.num_events = experiment.events.length;
-    //   experiment_objects.value.splice(0, 0, experiment);
-    // });
-  }
-
-  async function updateDashboard() {
-    wc_state.value = await (await fetch(state_url.value)).json();
-    wfs.value = Object.keys(wc_state.value.workflows).sort().reverse();
-    experiments.value = await ((await fetch(experiments_url.value)).json());
-  }
-}
-)
 </script>
 
 <script lang="ts">

src/ui/src/components/Event.vue

@@ -1,11 +1,13 @@
 <template>
-    <vue-json-pretty :data="event" />
+    <vue-json-pretty :data="events[props.event_id]" />
 </template>
 
 <script setup lang="ts">
 
 import VueJsonPretty from 'vue-json-pretty';
 import 'vue-json-pretty/lib/styles.css';
-const props = defineProps(['event', "wc_state"])
+/// <reference path="../store.d.ts" />
+import { events } from "@/store";
+const props = defineProps(['event_id'])
 
 </script>

src/ui/src/components/Experiments.vue

@@ -7,7 +7,7 @@
       </v-toolbar>
     </template>
     <template v-slot:item.campaign_id="{ value }">
-      <td>{{ (value != null && value in campaigns) ? campaigns[value].campaign_name : "-" }}</td>
+      <td>{{ (value != null && campaigns !== undefined && value in campaigns) ? campaigns[value].campaign_name : "-" }}</td>
     </template>
     <!-- <template v-slot:expanded-row="{ columns, item}: {columns: any, item: any}">
       <tr>
@@ -31,7 +31,8 @@
 
 <script setup lang="ts">
 import { VDataTable } from 'vuetify/lib/components/index.mjs';
-const props = defineProps(["experiment_objects", "wc_state", "campaigns"])
+/// <reference path="../store.d.ts" />
+import { campaigns, experiment_objects } from "@/store";
 const sortBy: VDataTable['sortBy'] = [{ key: 'experiment_id', order:'desc'}];
 
 const arg_headers = [

src/ui/src/components/ModuleModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog class="pa-3" v-slot:default="{ isActive }" max-width="1000">
+  <v-dialog class="pa-3" v-slot:default="{ isActive }" max-width="1920">
     <v-card>
       <v-card-title>
         <div class="d-flex align-center w-100">
@@ -148,6 +148,7 @@ const arg_headers = [
   { title: 'Required', key: 'required' },
   { title: 'Default', key: 'default' },
   { title: 'Description', key: 'description' },
+  { title: "Value", minWidth: "200px"}
 ]
 const copy = ref(false)
 const file_headers = [

src/ui/src/store.d.ts

@@ -0,0 +1,18 @@
+
+export { };
+
+declare module "store" {
+
+  export interface Store{
+    campaigns: any;
+    campaigns_url: string;
+    experiment_keys: any;
+    experiment_objects: any;
+    experiments: any;
+    experiments_url: string;
+    main_url: string;
+    state_url: string;
+    wc_info: any;
+    wc_state: any;
+  }
+}

src/ui/src/store.ts

@@ -0,0 +1,67 @@
+
+import { ref, watchEffect } from 'vue';
+
+const main_url = ref()
+const state_url = ref()
+const workcell_info_url = ref()
+const wfs = ref([''])
+const experiments = ref()
+const experiments_url = ref()
+const events_url = ref()
+const events = ref()
+const wc_state = ref()
+const wc_info = ref()
+const campaigns = ref()
+const campaigns_url = ref()
+const experiment_keys = ref()
+const experiment_objects: any = ref([])
+main_url.value = "http://".concat(window.location.host)
+class ExperimentInfo {
+    experiment_id?: string;
+    experiment_workflows: any;
+    experiment_name?: string;
+    num_wfs?: any;
+    num_events?: any;
+    events?: any
+}
+async function get_events(experiment_id: string) {
+    return Object.values(await ((await fetch(main_url.value.concat("/experiments/".concat(experiment_id).concat("/events"))))).json());
+}
+watchEffect(async () => {
+    state_url.value = main_url.value.concat("/wc/state")
+
+    experiments_url.value = main_url.value.concat("/experiments/all")
+    campaigns_url.value = main_url.value.concat("/campaigns/all")
+    workcell_info_url.value = main_url.value.concat("/wc/")
+    events_url.value = main_url.value.concat("/events/all")
+
+    setInterval(updateWorkcellState, 1000)
+    setInterval(updateWorkflows, 1000)
+    setInterval(updateExperiments, 10000)
+    setInterval(updateCampaigns, 10000);
+    setInterval(updateEvents, 10000);
+
+    async function updateExperiments() {
+        experiments.value = await ((await fetch(experiments_url.value)).json());
+        experiment_objects.value = Object.values(experiments.value);
+
+    }
+
+    async function updateCampaigns() {
+        campaigns.value = await ((await fetch(campaigns_url.value)).json());
+    }
+
+    async function updateEvents() {
+        events.value = await ((await fetch(events_url.value)).json());
+    }
+
+    async function updateWorkcellState() {
+        wc_state.value = await (await fetch(state_url.value)).json();
+    }
+
+    async function updateWorkflows() {
+        wfs.value = Object.keys(wc_state.value.workflows).sort().reverse();
+    }
+})
+
+export { campaigns, campaigns_url, events, experiment_keys, experiment_objects, experiments, experiments_url, main_url, state_url, wc_info, wc_state, wfs, workcell_info_url };

src/ui/vite.config.mts

@@ -1,12 +1,12 @@
 // Plugins
-import Components from 'unplugin-vue-components/vite'
 import Vue from '@vitejs/plugin-vue'
-import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 import ViteFonts from 'unplugin-fonts/vite'
+import Components from 'unplugin-vue-components/vite'
+import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
 
 // Utilities
-import { defineConfig } from 'vite'
 import { fileURLToPath, URL } from 'node:url'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -37,6 +37,7 @@ export default defineConfig({
       '.jsx',
       '.mjs',
       '.ts',
+      '.d.ts',
       '.tsx',
       '.vue',
     ],