allows controlling duration on the frontend

frontend/src/components/TelemetryLine.vue

@@ -37,18 +37,26 @@ const legend_text_offset = 4;
 const marker_radius = 3;
 
 const text_offset = computed(() => 10);
-const min_sep = computed(() =>
-    Math.min(props.minimum_separation || 0, maximum_minimum_separation_live),
-);
 
 const graph_data = inject<GraphData>(GRAPH_DATA)!;
 const axis_data = inject<AxisData>(AXIS_DATA)!;
 
+const data_min_sep = computed(() => {
+    return Math.max(
+        props.minimum_separation || 0,
+        toValue(graph_data.max_temporal_resolution),
+    );
+});
+
+const live_min_sep = computed(() =>
+    Math.min(data_min_sep.value, maximum_minimum_separation_live),
+);
+
 const { data: telemetry_data } = useTelemetry(() => props.data);
 const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
 const value = websocket.value.listen_to_telemetry(
     telemetry_data,
-    min_sep,
+    live_min_sep,
     graph_data.live,
 );
 
@@ -95,7 +103,7 @@ watch([value], ([val]) => {
                 x: val_t,
                 y: item_val,
             } as Point;
-            memo.value.insert(new_item, props.minimum_separation);
+            memo.value.insert(new_item, data_min_sep.value);
             if (item_val < min.value) {
                 min.value = item_val;
             }
@@ -118,7 +126,7 @@ watch(
                 const min_x = new Date(toValue(graph_data.min_x));
                 const max_x = new Date(toValue(graph_data.max_x));
                 const res = await fetch(
-                    `/api/tlm/history/${uuid}?from=${min_x.toISOString()}&to=${max_x.toISOString()}&resolution=${props.minimum_separation || 0}`,
+                    `/api/tlm/history/${uuid}?from=${min_x.toISOString()}&to=${max_x.toISOString()}&resolution=${data_min_sep.value}`,
                 );
                 const response = (await res.json()) as TelemetryDataItem[];
                 for (const data_item of response) {
@@ -136,9 +144,7 @@ watch(
                         max.value = item_val;
                     }
                 }
-                memo.value.reduce_to_maximum_separation(
-                    props.minimum_separation || 0,
-                );
+                memo.value.reduce_to_maximum_separation(data_min_sep.value);
                 triggerRef(memo);
                 debounced_recompute();
                 recompute_bounds.value++;
@@ -438,6 +444,11 @@ function onMouseExit(event: MouseEvent) {
                             <div class="row">
                                 <span>{{ telemetry_data?.data_type }}</span>
                             </div>
+                            <div class="row">
+                                <span>{{
+                                    current_data_point?.y || 'Missing Data'
+                                }}</span>
+                            </div>
                         </template>
                         <template v-else>
                             <div class="row">