allows controlling duration on the frontend

frontend/src/components/SvgGraph.vue

@@ -11,10 +11,14 @@ import {
 import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
 import TimeText from '@/components/TimeText.vue';
-import { getDateString } from '@/datetime';
+import {
+    getDateString,
+    getDurationString,
+    parseDurationString,
+} from '@/datetime';
 
 const props = defineProps<{
-    duration?: number;
+    initial_duration?: number;
     utc?: boolean;
     left_axis?: boolean;
     right_axis?: boolean;
@@ -56,12 +60,7 @@ onUnmounted(() => {
 });
 
 const now = useNow(33);
-const window_duration = computed(() => {
-    if (props.duration) {
-        return props.duration;
-    }
-    return 10 * 1000; // 10 seconds
-});
+const window_duration = ref(props.initial_duration || 10 * 1000);
 
 const time_lines = [
     1, // 1ms
@@ -148,6 +147,18 @@ const max_x_text = computed({
         }
     },
 });
+const duration_text = computed({
+    get() {
+        return getDurationString(window_duration.value);
+    },
+    set(newValue) {
+        const new_duration = parseDurationString(newValue);
+        if (!Number.isNaN(new_duration)) {
+            window_duration.value = Math.max(new_duration, 1);
+            fetch_history.value++;
+        }
+    },
+});
 
 const x_map = (x: number) => {
     return (
@@ -200,13 +211,9 @@ const mouse_x = ref<number | null>(null);
 
 function onMouseMove(event: MouseEvent) {
     if (props.cursor) {
-        const new_x =
+        mouse_x.value =
             event.clientX -
             (event.currentTarget as Element).getBoundingClientRect().left;
-        if (new_x == 0) {
-            console.log(event);
-        }
-        mouse_x.value = new_x;
     }
 }
 
@@ -220,8 +227,6 @@ const mouse_t = computed(() => {
     }
     const t = inv_x_map(mouse_x.value);
     if (t < min_x.value || t > max_x.value) {
-        // console.log(`x ${mouse_x.value} t ${t} min ${t < min_x.value} max ${t > max_x.value}`)
-        // debugger;
         return null;
     }
     return t;
@@ -237,10 +242,16 @@ const show_data_at_time = computed(() => {
 
 const should_fade = ref(false);
 
+const max_temporal_resolution = computed(() => {
+    const delta_t = window_duration.value;
+    return Math.floor(delta_t / 1000); // Aim for a maximum of 1000 data points
+});
+
 provide<GraphData>(GRAPH_DATA, {
     border_top: border_top,
     min_x: min_x,
     max_x: max_x,
+    max_temporal_resolution: max_temporal_resolution,
     live: live,
     fetch_history: fetch_history,
     width: () =>
@@ -269,6 +280,14 @@ provide<GraphData>(GRAPH_DATA, {
             :style="`height: ${controls_height}px`"
         >
             <div class="grow"></div>
+            <div>
+                <input
+                    type="text"
+                    autocomplete="off"
+                    :size="15"
+                    v-model="duration_text"
+                />
+            </div>
             <div>
                 <input
                     type="text"
@@ -401,7 +420,7 @@ div.controls-header {
     justify-content: center;
     align-items: center;
     align-content: stretch;
-    gap: 1em 0;
+    gap: 0 1em;
     margin: 0 1em 0 1em;
 }