fixes history loading slowly due to context switches

frontend/src/components/SvgGraph.vue

@@ -198,6 +198,8 @@ const show_data_at_time = computed(() => {
     }
 });
 
+const should_fade = ref(false);
+
 provide<GraphData>(GRAPH_DATA, {
     border_top: border_top,
     min_x: min_x,
@@ -216,6 +218,7 @@ provide<GraphData>(GRAPH_DATA, {
     legend_y_stride: legend_y_stride,
     legend_width: legend_width_output,
     cursor_time: show_data_at_time,
+    should_fade: (value) => (should_fade.value = value),
 });
 </script>
 
@@ -286,7 +289,9 @@ provide<GraphData>(GRAPH_DATA, {
                     ></TimeText>
                 </template>
             </g>
-            <slot></slot>
+            <g :class="`${should_fade ? 'fade' : ''}`">
+                <slot></slot>
+            </g>
             <g class="cursor_tick" v-if="mouse_t && cursor">
                 <rect
                     :x="x_map(mouse_t) - 100"

frontend/src/components/TelemetryLine.vue

@@ -35,6 +35,7 @@ const smoothing_distance_x = 5;
 const maximum_minimum_separation_live = 100; // ms
 const legend_line_length = 8;
 const legend_text_offset = 4;
+const marker_radius = 3;
 
 const text_offset = computed(() => 10);
 const min_sep = computed(() =>
@@ -152,8 +153,8 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => {
 
     if (min_x) {
         while (
-            memo.value.data.length > 1 &&
-            memo.value.data[0].x < toValue(min_x)
+            memo.value.data.length > 2 &&
+            memo.value.data[1].x < toValue(min_x)
         ) {
             memo.value.data.shift();
             memo_changed = true;
@@ -161,8 +162,8 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => {
     }
     if (max_x) {
         while (
-            memo.value.data.length > 1 &&
-            memo.value.data[memo.value.data.length - 1].x > toValue(max_x)
+            memo.value.data.length > 2 &&
+            memo.value.data[memo.value.data.length - 2].x > toValue(max_x)
         ) {
             memo.value.data.pop();
             memo_changed = true;
@@ -171,8 +172,8 @@ 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 (const item of memo.value.data) {
-            const item_val = item.y;
+        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);
         }
@@ -318,50 +319,95 @@ function onCloseLegend() {
         }, 1);
     }
 }
+
+const legend_moused_over = ref(false);
+
+function onMouseEnter(event: MouseEvent) {
+    if (event.target == event.currentTarget) {
+        legend_moused_over.value = true;
+        graph_data.should_fade(true);
+    }
+}
+
+function onMouseExit(event: MouseEvent) {
+    if (event.target == event.currentTarget) {
+        legend_moused_over.value = false;
+        graph_data.should_fade(false);
+    }
+}
 </script>
 
 <template>
-    <g :class="`indexed-color color-${index}`">
+    <g
+        :class="`indexed-color color-${index} ${legend_moused_over ? 'no-fade' : ''}`"
+    >
+        <defs>
+            <marker
+                :id="`dot-${index}`"
+                :refX="marker_radius"
+                :refY="marker_radius"
+                markerUnits="strokeWidth"
+                :markerWidth="marker_radius * 2"
+                :markerHeight="marker_radius * 2"
+            >
+                <circle
+                    :cx="marker_radius"
+                    :cy="marker_radius"
+                    :r="marker_radius"
+                    :class="`indexed-color color-${index}`"
+                />
+            </marker>
+        </defs>
         <g clip-path="url(#content)">
             <polyline
+                class="fade_other_selected"
                 fill="none"
                 :transform="group_transform"
                 :points="points"
             ></polyline>
-            <polyline fill="none" :points="current_data_point_line"> </polyline>
+            <polyline
+                class="fade_other_selected"
+                fill="none"
+                :marker-start="`url(#dot-${index})`"
+                :points="current_data_point_line"
+            >
+            </polyline>
         </g>
         <ValueLabel
             v-if="current_data_point"
+            class="fade_other_selected"
             :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
             :y="axis_data.y_map(current_data_point.y)"
             :value="current_data_point.y"
         >
         </ValueLabel>
         <template v-if="toValue(graph_data.legend_enabled)">
-            <rect
-                ref="legend-ref"
-                :class="`legend ${is_selected ? 'selected' : ''}`"
-                :x="legend_x - legend_text_offset"
-                :y="legend_y"
-                :width="toValue(graph_data.legend_width)"
-                :height="toValue(graph_data.legend_y_stride)"
-                @click="onOpenLegend"
-            >
-            </rect>
-            <polyline
-                class="legend"
-                fill="none"
-                :points="legend_line"
-                @click="onOpenLegend"
-            ></polyline>
-            <text
-                class="legend"
-                :x="legend_x + legend_line_length + legend_text_offset"
-                :y="legend_y + 1 + toValue(graph_data.legend_y_stride) / 2"
-                @click="onOpenLegend"
-            >
-                {{ legend_text }}
-            </text>
+            <g @mouseenter="onMouseEnter" @mouseleave="onMouseExit">
+                <rect
+                    ref="legend-ref"
+                    :class="`legend ${is_selected ? 'selected' : ''}`"
+                    :x="legend_x - legend_text_offset"
+                    :y="legend_y"
+                    :width="toValue(graph_data.legend_width)"
+                    :height="toValue(graph_data.legend_y_stride)"
+                    @click="onOpenLegend"
+                >
+                </rect>
+                <polyline
+                    class="legend"
+                    fill="none"
+                    :points="legend_line"
+                    @click="onOpenLegend"
+                ></polyline>
+                <text
+                    class="legend"
+                    :x="legend_x + legend_line_length + legend_text_offset"
+                    :y="legend_y + 1 + toValue(graph_data.legend_y_stride) / 2"
+                    @click="onOpenLegend"
+                >
+                    {{ legend_moused_over }} {{ legend_text }}
+                </text>
+            </g>
             <foreignObject height="0" width="0">
                 <TooltipDialog
                     :show="is_selected"
@@ -397,12 +443,28 @@ function onCloseLegend() {
     </g>
 </template>
 
+<style lang="scss">
+@use '@/assets/variables';
+
+.fade .fade_other_selected {
+    opacity: 25%;
+}
+
+.fade .no-fade .fade_other_selected {
+    opacity: 100%;
+}
+</style>
+
 <style scoped lang="scss">
 @use '@/assets/variables';
 
+.indexed-color {
+    stroke: var(--indexed-color);
+    fill: var(--indexed-color);
+}
+
 polyline {
     stroke-width: 1px;
-    stroke: var(--indexed-color);
 }
 
 text {
@@ -420,6 +482,10 @@ rect.legend {
     fill: transparent;
 }
 
+.legend {
+    pointer-events: all;
+}
+
 rect.legend.selected,
 rect.legend:hover,
 rect.legend:has(~ .legend:hover) {

frontend/src/components/ValueLabel.vue

@@ -6,6 +6,7 @@ defineProps<{
     x: number;
     y: number;
     value: number;
+    class?: string;
 }>();
 
 const background_offset = computed(() => 5);
@@ -33,12 +34,13 @@ function update_value_text(text: string) {
 
 <template>
     <rect
+        :class="$props.class"
         :x="x - background_offset"
         :y="y - y_offset - background_offset"
         :width="label_width + background_offset * 2"
         :height="16 + background_offset * 2"
     ></rect>
-    <text ref="label-ref" :x="x" :y="y">
+    <text :class="$props.class" ref="label-ref" :x="x" :y="y">
         <NumericText
             :value="value"
             :max_width="6"

frontend/src/graph/graph.ts

@@ -24,4 +24,5 @@ export interface GraphData {
     legend_y_stride: MaybeRefOrGetter<number>;
     legend_width: MaybeRefOrGetter<number>;
     cursor_time: MaybeRefOrGetter<number>;
+    should_fade: (should_fade: boolean) => void;
 }