allows scrolling backwards through history

frontend/src/components/TelemetryLine.vue

@@ -28,7 +28,6 @@ const props = defineProps<{
     data: string;
     minimum_separation?: number;
     class?: string;
-    fetch_history?: number;
 }>();
 
 const smoothing_distance_x = 5;
@@ -42,13 +41,17 @@ const min_sep = computed(() =>
     Math.min(props.minimum_separation || 0, 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);
-
 const graph_data = inject<GraphData>(GRAPH_DATA)!;
 const axis_data = inject<AxisData>(AXIS_DATA)!;
 
+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,
+    graph_data.live,
+);
+
 const min = ref(Infinity);
 const max = ref(-Infinity);
 
@@ -104,8 +107,9 @@ watch([value], ([val]) => {
         }
     }
 });
+const recompute_bounds = ref(0);
 watch(
-    [telemetry_data, () => props.fetch_history],
+    [telemetry_data, () => toValue(graph_data.fetch_history)],
     async ([data]) => {
         if (data) {
             const uuid = data.uuid;
@@ -137,9 +141,10 @@ watch(
                 );
                 triggerRef(memo);
                 debounced_recompute();
+                recompute_bounds.value++;
             } catch (e) {
                 // TODO: Response?
-                console.log(e);
+                console.error(e);
             }
         }
     },
@@ -170,19 +175,22 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => {
         }
     }
     if (memo_changed) {
-        let min_val = Infinity;
-        let max_val = -Infinity;
-        for (let i = 1; i < memo.value.data.length; i++) {
-            const item_val = memo.value.data[i].y;
-            min_val = Math.min(min_val, item_val);
-            max_val = Math.max(max_val, item_val);
-        }
-        triggerRef(memo);
-        debounced_recompute();
-        max.value = max_val;
-        min.value = min_val;
+        recompute_bounds.value++;
     }
 });
+watch([recompute_bounds], () => {
+    let min_val = Infinity;
+    let max_val = -Infinity;
+    for (let i = 1; i < memo.value.data.length; i++) {
+        const item_val = memo.value.data[i].y;
+        min_val = Math.min(min_val, item_val);
+        max_val = Math.max(max_val, item_val);
+    }
+    triggerRef(memo);
+    debounced_recompute();
+    max.value = max_val;
+    min.value = min_val;
+});
 
 watch(
     [min, axis_data.axis_update_watch],
@@ -354,7 +362,7 @@ function onMouseExit(event: MouseEvent) {
                     :cx="marker_radius"
                     :cy="marker_radius"
                     :r="marker_radius"
-                    :class="`indexed-color color-${index}`"
+                    :class="`indexed-color color-${index} marker`"
                 />
             </marker>
         </defs>
@@ -446,6 +454,10 @@ function onMouseExit(event: MouseEvent) {
 <style lang="scss">
 @use '@/assets/variables';
 
+.fade rect.fade_other_selected {
+    opacity: 10%;
+}
+
 .fade .fade_other_selected {
     opacity: 25%;
 }
@@ -463,6 +475,11 @@ function onMouseExit(event: MouseEvent) {
     fill: var(--indexed-color);
 }
 
+circle.marker {
+    stroke: variables.$background-color;
+    stroke-width: 1px;
+}
+
 polyline {
     stroke-width: 1px;
 }