From 4dd7cea97d76b1982c8c062d454af2364b61cc5b Mon Sep 17 00:00:00 2001 From: Sergey Savelyev Date: Sat, 4 Jan 2025 19:13:32 -0500 Subject: [PATCH] fixes history loading slowly due to context switches --- frontend/src/components/SvgGraph.vue | 7 +- frontend/src/components/TelemetryLine.vue | 132 +++++++++++++----- frontend/src/components/ValueLabel.vue | 4 +- frontend/src/graph/graph.ts | 1 + server/src/http/api/mod.rs | 21 +-- server/src/http/error.rs | 3 + server/src/http/mod.rs | 4 +- server/src/lib.rs | 10 ++ server/src/serialization/file_ext.rs | 24 ++++ server/src/serialization/mod.rs | 2 + server/src/serialization/primitives.rs | 33 +++++ server/src/telemetry/history.rs | 159 +++++++++++----------- 12 files changed, 278 insertions(+), 122 deletions(-) create mode 100644 server/src/serialization/file_ext.rs create mode 100644 server/src/serialization/mod.rs create mode 100644 server/src/serialization/primitives.rs diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue index c5dac83..01421cd 100644 --- a/frontend/src/components/SvgGraph.vue +++ b/frontend/src/components/SvgGraph.vue @@ -198,6 +198,8 @@ const show_data_at_time = computed(() => { } }); +const should_fade = ref(false); + provide(GRAPH_DATA, { border_top: border_top, min_x: min_x, @@ -216,6 +218,7 @@ provide(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), }); @@ -286,7 +289,9 @@ provide(GRAPH_DATA, { > - + + + 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); + } +}