allows restricting the streaming speed for the frontend

frontend/src/components/TelemetryLine.vue

@@ -12,7 +12,6 @@ import {
     watch,
 } from 'vue';
 import {
-    type TelemetryDataItem,
     WEBSOCKET_SYMBOL,
     type WebsocketHandle,
 } from '@/composables/websocket';
@@ -23,16 +22,20 @@ import type { Point } from '@/graph/line';
 
 const props = defineProps<{
     data: string;
+    minimum_separation?: number;
     class?: string;
 }>();
 
-const smoothing_distance = 0.15 * 1000;
+const smoothing_distance_x = 5;
 
 const text_offset = computed(() => 10);
 
 const { data } = useTelemetry(() => props.data);
 const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
-const value = websocket.value.listen_to_telemetry(data);
+const value = websocket.value.listen_to_telemetry(
+    data,
+    props.minimum_separation,
+);
 
 const graph_data = inject<GraphData>(GRAPH_DATA)!;
 const axis_data = inject<AxisData>(AXIS_DATA)!;
@@ -46,7 +49,10 @@ function trigger_recompute() {
     recompute_points.value = Date.now();
 }
 function debounced_recompute() {
-    if (recompute_points.value + toValue(graph_data.max_update_rate) < Date.now()) {
+    if (
+        recompute_points.value + toValue(graph_data.max_update_rate) <
+        Date.now()
+    ) {
         trigger_recompute();
     }
 }
@@ -72,10 +78,12 @@ watch([value], ([val]) => {
         if (val_t >= min_x) {
             // TODO: Insert this in the right spot in memo
             const item_val = val.value[data.value!.data_type] as number;
-            const new_memo = [{
-                x: val_t,
-                y: item_val,
-            }].concat(memo.value);
+            const new_memo = [
+                {
+                    x: val_t,
+                    y: item_val,
+                },
+            ].concat(memo.value);
             if (item_val < min.value) {
                 min.value = item_val;
             }
@@ -100,10 +108,7 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => {
         }
     }
     if (max_x) {
-        while (
-            new_memo.length > 2 &&
-            new_memo[1].x > toValue(max_x)
-        ) {
+        while (new_memo.length > 2 && new_memo[1].x > toValue(max_x)) {
             new_memo.shift();
             memo_changed = true;
         }
@@ -137,7 +142,7 @@ watch(
 watch(
     [max, axis_data.axis_update_watch],
     ([max_val]) => {
-        trigger_recompute()
+        trigger_recompute();
         axis_data.max_y_callback(max_val);
     },
     {
@@ -145,7 +150,7 @@ watch(
     },
 );
 
-const points = ref("");
+const points = ref('');
 
 const old_max = ref(0);
 
@@ -153,42 +158,38 @@ const group_transform = computed(() => {
     const new_max = toValue(graph_data.max_x);
     const offset = graph_data.x_map(old_max.value) - graph_data.x_map(new_max);
     return `translate(${offset} 0)`;
-})
+});
 
-watch(
-    [recompute_points],
-    () => {
-        let new_points = '';
-        if (memo.value.length == 0 || data.value == null) {
-            return '';
-        }
-
-        const future_number = toValue(graph_data.max_x) + 99999999;
-
-        let last_x = graph_data.x_map(future_number);
-        old_max.value = toValue(graph_data.max_x);
-        let last_t = future_number + smoothing_distance;
-
-        for (const data_item of memo.value) {
-            const t = data_item.x;
-            const v = data_item.y;
-            const x = graph_data.x_map(t);
-            const y = axis_data.y_map(v);
-
-            if (last_t - t < smoothing_distance) {
-                new_points += ` ${x},${y}`;
-            } else {
-                new_points += ` ${last_x},${y} ${x},${y}`;
-            }
-            last_x = x;
-            last_t = t;
-            if (last_x <= 0.0) {
-                break;
-            }
-        }
-        points.value = new_points;
+watch([recompute_points], () => {
+    let new_points = '';
+    if (memo.value.length == 0 || data.value == null) {
+        return '';
     }
-)
+
+    const future_number =
+        toValue(graph_data.max_x) + toValue(graph_data.max_update_rate);
+
+    let last_x = graph_data.x_map(future_number) + smoothing_distance_x;
+    old_max.value = toValue(graph_data.max_x);
+
+    for (const data_item of memo.value) {
+        const t = data_item.x;
+        const v = data_item.y;
+        const x = graph_data.x_map(t);
+        const y = axis_data.y_map(v);
+
+        if (last_x - x < smoothing_distance_x) {
+            new_points += ` ${x},${y}`;
+        } else {
+            new_points += ` ${last_x},${y} ${x},${y}`;
+        }
+        last_x = x;
+        if (last_x <= 0.0) {
+            break;
+        }
+    }
+    points.value = new_points;
+});
 
 const current_value = computed(() => {
     const val = value.value;
@@ -201,9 +202,7 @@ const current_value = computed(() => {
 
 <template>
     <g :class="`indexed-color color-${index}`">
-        <g
-            clip-path="url(#content)"
-        >
+        <g clip-path="url(#content)">
             <polyline
                 fill="none"
                 :transform="group_transform"