initial graph

frontend/src/composables/telemetry.ts

@@ -1,13 +1,28 @@
-import { ref } from 'vue'
+import { ref, toValue, watchEffect } from 'vue'
+import { type MaybeRefOrGetter } from '@vue/reactivity'
 
-export function useTelemetry(name: string) {
-  const data = ref<any | null>(null);
-  const error = ref<any | null>(null);
-
-  fetch(`/api/tlm/${name}`)
-    .then((res) => res.json())
-    .then((json) => (data.value = json))
-    .catch((err) => (error.value = err));
-
-  return { data, error };
+export interface TelemetryDefinition {
+    uuid: string;
+    name: string;
+    data_type: string;
+}
+
+export function useTelemetry(name: MaybeRefOrGetter<string>) {
+    const data = ref<TelemetryDefinition | null>(null);
+    const error = ref<any | null>(null);
+
+    watchEffect(async () => {
+        const name_value = toValue(name);
+
+        try {
+            const res = await fetch(`/api/tlm/${name_value}`);
+            data.value = await res.json();
+            error.value = null;
+        } catch (e) {
+            data.value = null;
+            error.value = e;
+        }
+    });
+
+    return { data, error };
 }