adds telemetry list

frontend/src/components/SvgGraph.vue

@@ -35,6 +35,7 @@ const width = ref(0);
 const height = ref(0);
 
 const controls_height = 32;
+const min_time_label_separation = 250;
 
 const resize_observer = new ResizeObserver((elements) => {
     for (const element of elements) {
@@ -80,6 +81,7 @@ const time_lines = [
     10000, // 10s
     30000, // 30s
     60000, // 1m
+    150000, // 2.5m
     300000, // 5m
     6000000, // 10m
     18000000, // 30m
@@ -92,7 +94,7 @@ const time_lines = [
     1728000000, // 2d
     6048000000, // 1w
 ];
-time_lines.reverse();
+// time_lines.reverse();
 const text_offset = computed(() => 5);
 
 const legend_width = 160;
@@ -192,15 +194,20 @@ const legend_y_stride = computed(() => 16);
 const legend_width_output = computed(() => legend_width - 8);
 
 const line_duration = computed(() => {
+    const width_px = width.value;
     const diff_x = max_x.value - min_x.value;
-    return time_lines.find((duration) => diff_x / duration >= 2)!;
+    return time_lines.find((duration) => {
+        const line_count = diff_x / duration;
+        const width_per_line = width_px / line_count;
+        return width_per_line >= min_time_label_separation;
+    })!;
 });
 
 const lines = computed(() => {
     const result = [];
     for (
         let i = Math.ceil(max_x.value / line_duration.value);
-        i >= Math.ceil(min_x.value / line_duration.value) - 5;
+        i >= Math.floor(min_x.value / line_duration.value);
         i--
     ) {
         const x = i * line_duration.value;
@@ -356,6 +363,7 @@ provide<GraphData>(GRAPH_DATA, {
                         :timestamp="tick"
                         :utc="props.utc"
                         :show_millis="line_duration < 1000"
+                        :key="tick"
                     ></TimeText>
                 </template>
             </g>
@@ -425,8 +433,4 @@ div.controls-header {
     gap: 0 1em;
     margin: 0 1em 0 1em;
 }
-
-div.controls-header > div.grow {
-    flex-grow: 1;
-}
 </style>