recenter on select, format precision for times

Author: BryonLewis

client/src/components/AnnotationList.vue

@@ -15,6 +15,7 @@ import type {
   SpectrogramSequenceAnnotation,
 } from "../api/api";
 import RecordingAnnotations from "./RecordingAnnotations.vue";
+import { formatSignificantDigits } from "@use/useUtils";
 export default defineComponent({
   name: "AnnotationList",
   components: {
@@ -107,6 +108,7 @@ export default defineComponent({
       annotationState,
       annotations,
       creationType,
+      formatSignificantDigits,
       sequenceAnnotations,
       selectedId,
       selectedType,
@@ -191,7 +193,11 @@ export default defineComponent({
                 >
                 <span class="pl-2"
                   ><b
-                    >({{ annotation.end_time - annotation.start_time }}ms)</b
+                    >({{
+                      formatSignificantDigits(
+                        annotation.end_time - annotation.start_time,
+                      )
+                    }}ms)</b
                   ></span
                 >
               </v-col>

client/src/components/PulseMetadataTooltip.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, nextTick, type PropType, ref, watch } from "vue";
 import type { PulseMetadataTooltipData } from "./geoJS/layers/pulseMetadataLayer";
+import { formatSignificantDigits } from "@use/useUtils";
 
 const MIN_WIDTH = 180;
 
@@ -41,7 +42,7 @@ export default defineComponent({
       { immediate: true },
     );
 
-    return { cardRef, clampedLeft };
+    return { cardRef, clampedLeft, formatSignificantDigits };
   },
 });
 </script>
@@ -113,7 +114,7 @@ export default defineComponent({
           </div> -->
           <div class="d-flex align-center">
             <span class="text-caption text-medium-emphasis mr-2">Duration</span>
-            <span>{{ data.durationMs.toFixed(1) }} ms</span>
+            <span>{{ formatSignificantDigits(data.durationMs) }} ms</span>
           </div>
           <div class="d-flex align-center">
             <span class="text-caption text-medium-emphasis mr-2">Fₘᵢₙ</span>

client/src/components/SpectrogramViewer.vue

@@ -419,10 +419,12 @@ export default defineComponent({
           found,
           props.spectroInfo,
           selectedType.value,
+          scaledWidth.value,
+          scaledHeight.value,
         );
-        const bounds = geoJS.getGeoViewer().value.bounds();
-        if (x < bounds.left || x > bounds.right) {
-          geoJS.getGeoViewer().value.center({ x, y });
+        const viewer = geoJS.getGeoViewer().value;
+        if (viewer && x >= 0 && y >= 0) {
+          viewer.center({ x, y });
         }
       }
     });

client/src/components/geoJS/geoJSUtils.ts

@@ -914,18 +914,30 @@ function spectroToCenter(
   annotation: SpectrogramAnnotation | SpectrogramSequenceAnnotation,
   spectroInfo: SpectroInfo,
   type: "sequence" | "pulse",
+  scaledWidth = 0,
+  scaledHeight = 0,
 ) {
   if (type === "pulse") {
-    const geoJSON = spectroToGeoJSon(
-      annotation as SpectrogramAnnotation,
-      spectroInfo,
-    );
-    return findPolygonCenter(geoJSON);
+    const pulse = annotation as SpectrogramAnnotation;
+    const centerTime = (pulse.start_time + pulse.end_time) / 2;
+    const x = spectroTimeToX(centerTime, spectroInfo, scaledWidth);
+    const adjustedHeight =
+      scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+    const centerFreq = (pulse.low_freq + pulse.high_freq) / 2;
+    const heightScale =
+      adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
+    const y =
+      adjustedHeight - (centerFreq - spectroInfo.low_freq) * heightScale;
+    return [x, y];
   }
   if (type === "sequence") {
     const geoJSON = spectroSequenceToGeoJSon(
       annotation as SpectrogramSequenceAnnotation,
       spectroInfo,
+      0,
+      10,
+      scaledWidth,
+      scaledHeight,
     );
     return findPolygonCenter(geoJSON);
   }

client/src/components/geoJS/layers/pulseMetadataLayer.ts

@@ -4,6 +4,7 @@ import type { PulseMetadata } from "@api/api";
 import type { LayerStyle, LineData, TextData } from "./types";
 import BaseTextLayer from "./baseTextLayer";
 import type { PulseMetadataLabelsMode } from "@use/usePulseMetadata";
+import { formatSignificantDigits } from "@use/useUtils";
 
 /** Point data for char_freq, knee, heel with pixel coords and label. */
 interface PulsePointData {
@@ -398,7 +399,7 @@ export default class PulseMetadataLayer extends BaseTextLayer<TextData> {
 
         const durationMidX = (bottomLeft.x + bottomRight.x) / 2;
         pulseText.push({
-          text: `${durationMs.toFixed(1)} ms`,
+          text: `${formatSignificantDigits(durationMs)} ms`,
           x: durationMidX,
           y: bottomLeft.y + labelOffset,
           offsetX: 0,

client/src/components/geoJS/layers/timeLayer.ts

@@ -7,6 +7,7 @@ import {
   spectroSequenceToGeoJSon,
   spectroToGeoJSon,
 } from "../geoJSUtils";
+import { formatSignificantDigits } from "@use/useUtils";
 import BaseTextLayer from "./baseTextLayer";
 import type { LayerStyle } from "./types";
 
@@ -242,7 +243,7 @@ export default class TimeLayer extends BaseTextLayer<TextData> {
         const ypos = (ymax + ymin) / 2.0;
         // Now we need to create the text Labels
         this.textData.push({
-          text: `${end_time - start_time}ₘₛ`,
+          text: `${formatSignificantDigits(end_time - start_time)}ₘₛ`,
           x: xpos,
           y: ypos + lineDist,
         });

client/src/use/useUtils.ts

@@ -30,6 +30,13 @@ function extractDateTimeComponents(dateTimeString: string) {
   return { date: dateString, time: timeString };
 }
 
+/** Format a numeric value to the given number of significant digits. */
+function formatSignificantDigits(value: number, significantDigits = 3): string {
+  if (!Number.isFinite(value)) return String(value);
+  if (value === 0) return "0";
+  return String(Number(value.toPrecision(significantDigits)));
+}
+
 function getImageDimensions(
   images: HTMLImageElement[],
   fallback: { width: number; height: number } = { width: 0, height: 0 },
@@ -96,6 +103,7 @@ function parseRecordingFilename(
 
 export {
   DEFAULT_SAMPLE_FRAME_ID,
+  formatSignificantDigits,
   getCurrentTime,
   extractDateTimeComponents,
   getImageDimensions,

client/src/views/Admin.vue

@@ -157,7 +157,9 @@ export default defineComponent({
           <v-row>
             <v-switch
               v-model="settings.createPulseAnnotationsFromBatbot"
-              :color="settings.createPulseAnnotationsFromBatbot ? 'primary' : ''"
+              :color="
+                settings.createPulseAnnotationsFromBatbot ? 'primary' : ''
+              "
               label="Create pulse annotations from BatBot on import"
             />
           </v-row>