From 06a04d2558f50ffe849ae3954f75a0c16be30c75 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>
Date: Tue, 30 Jan 2024 10:40:07 -0500
Subject: [PATCH] Spectrogram Legend (#24)

* adding legend capabilities

* add hover state and improve legend

* toggle icon bar

* defaulting grid to off

* fix for NaN numbers in annotations not in compressed view
---
 client/src/components/SpectrogramViewer.vue   |  91 +++--
 client/src/components/ThumbnailViewer.vue     |   1 +
 client/src/components/geoJS/LayerManager.vue  |  23 ++
 client/src/components/geoJS/geoJSUtils.ts     |  17 +-
 .../components/geoJS/layers/legendLayer.ts    | 323 ++++++++++++++++++
 .../components/geoJS/layers/rectangleLayer.ts |  11 +-
 client/src/views/Spectrogram.vue              |  64 +++-
 7 files changed, 498 insertions(+), 32 deletions(-)
 create mode 100644 client/src/components/geoJS/layers/legendLayer.ts

diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index a9e54d7..c16eb44 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -1,13 +1,15 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
-import { SpectroInfo, useGeoJS } from './geoJS/geoJSUtils';
+import { SpectroInfo, useGeoJS } from "./geoJS/geoJSUtils";
 import { patchAnnotation, putAnnotation, SpectrogramAnnotation } from "../api/api";
 import LayerManager from "./geoJS/LayerManager.vue";
+import { GeoEvent } from "geojs";
+import geo from "geojs";
 
 export default defineComponent({
   name: "SpectroViewer",
   components: {
-    LayerManager
+    LayerManager,
   },
   props: {
     image: {
@@ -23,46 +25,97 @@ export default defineComponent({
       default: () => [],
     },
     selectedId: {
-        type: Number as PropType<number | null>,
-        default: null,
+      type: Number as PropType<number | null>,
+      default: null,
     },
     recordingId: {
       type: String as PropType<string | null>,
       required: true,
-    }
+    },
+    grid: {
+      type: Boolean,
+      default: false,
+    },
   },
-  emits: ['update:annotation', 'create:annotation', 'selected', 'geoViewerRef'],
+  emits: ["update:annotation", "create:annotation", "selected", "geoViewerRef", "hoverData"],
   setup(props, { emit }) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
-    const initialized  = ref(false);
+    const initialized = ref(false);
+
+    const mouseMoveEvent = (e: GeoEvent) => {
+      const { x, y } = e.geo;
+      if (!props.spectroInfo)  {
+        return;
+      }
+      const freq =
+        props.spectroInfo.height - y >= 0 ?
+            
+            (((props.spectroInfo.height - y) * (props.spectroInfo.high_freq - props.spectroInfo.low_freq)) / props.spectroInfo.height) / 1000 + props.spectroInfo.low_freq / 1000 : -1;
+
+      if (!props.spectroInfo.end_times && !props.spectroInfo.start_times) {
+ 
+        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+          const time =
+            x *
+            ((props.spectroInfo.end_time - props.spectroInfo.start_time) / props.spectroInfo.width);
+          emit("hoverData", { time, freq });
+        } else {
+          emit("hoverData", { time: -1, freq: -1 });
+        }
+      } else if (props.spectroInfo && props.spectroInfo.start_times && props.spectroInfo.end_times) { // compressed view
+        if (x >= 0 && props.spectroInfo.height - y >= 0) {
+          const timeLength = props.spectroInfo.end_time - props.spectroInfo.start_time;
+          const timeToPixels = props.spectroInfo.width / timeLength;
+          // find X in the range
+          let offsetAdditive = 0;
+          for (let i =0; i < props.spectroInfo.start_times.length; i += 1) {
+            const start_time = props.spectroInfo.start_times[i];
+            const end_time = props.spectroInfo.end_times[i];
+            const startX = offsetAdditive;
+            const endX = offsetAdditive + ((end_time - start_time) * timeToPixels);
+
+            if (x > startX && x < endX ) {
+              const timeOffset = x - offsetAdditive;
+              const time = start_time + (timeOffset / timeToPixels);
+              emit("hoverData", { time, freq });
+              return;
+            }
+            offsetAdditive += (end_time - start_time) * timeToPixels;
 
+          }
+        } else {
+          emit("hoverData", { time: -1, freq: -1 });
+        }
+
+      }
+    };
     watch(containerRef, () => {
       const { naturalWidth, naturalHeight } = props.image;
       if (containerRef.value)
-      geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
+        geoJS.initializeViewer(containerRef.value, naturalWidth, naturalHeight);
       geoJS.drawImage(props.image, naturalWidth, naturalHeight);
       initialized.value = true;
-      emit('geoViewerRef', geoJS.getGeoViewer());
+      emit("geoViewerRef", geoJS.getGeoViewer());
+      geoJS.getGeoViewer().value.geoOn(geo.event.mousemove, mouseMoveEvent);
     });
 
     const updateAnnotation = async (annotation: SpectrogramAnnotation) => {
       // We call the patch on the selected annotation
       if (props.recordingId !== null && props.selectedId !== null) {
         await patchAnnotation(props.recordingId, props.selectedId, annotation);
-        emit('update:annotation', annotation);
+        emit("update:annotation", annotation);
       }
     };
 
     const createAnnotation = async (annotation: SpectrogramAnnotation) => {
       // We call the patch on the selected annotation
       if (props.recordingId !== null) {
-        const response =  await putAnnotation(props.recordingId, annotation);
-        emit('create:annotation', response.data.id);
+        const response = await putAnnotation(props.recordingId, annotation);
+        emit("create:annotation", response.data.id);
       }
     };
 
-
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
@@ -87,7 +140,8 @@ export default defineComponent({
       :spectro-info="spectroInfo"
       :annotations="annotations"
       :selected-id="selectedId"
-      @selected="$emit('selected',$event)"
+      :grid="grid"
+      @selected="$emit('selected', $event)"
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"
     />
@@ -108,16 +162,14 @@ export default defineComponent({
   display: flex;
   flex-direction: column;
   .geojs-map {
-    margin:2px;
+    margin: 2px;
     &.geojs-map:focus {
       outline: none;
-    }  
+    }
   }
 
   .playback-container {
     flex: 1;
-
-  
   }
   .loadingSpinnerContainer {
     z-index: 20;
@@ -131,4 +183,5 @@ export default defineComponent({
   .geojs-map.annotation-input {
     cursor: inherit;
   }
-}</style>
+}
+</style>
diff --git a/client/src/components/ThumbnailViewer.vue b/client/src/components/ThumbnailViewer.vue
index eb54e84..3734033 100644
--- a/client/src/components/ThumbnailViewer.vue
+++ b/client/src/components/ThumbnailViewer.vue
@@ -152,6 +152,7 @@ export default defineComponent({
       :spectro-info="spectroInfo"
       :annotations="annotations"
       :selected-id="selectedId"
+      thumbnail
       @selected="$emit('selected',$event)"
     />
   </div>
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index bd746ae..34b79ee 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -4,6 +4,7 @@ import { SpectrogramAnnotation } from "../../api/api";
 import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
+import LegendLayer from "./layers/legendLayer";
 import { cloneDeep } from "lodash";
 import useState from "../../use/useState";
 export default defineComponent({
@@ -26,6 +27,14 @@ export default defineComponent({
       type: Number as PropType<number | null>,
       default: null,
     },
+    thumbnail: {
+      type: Boolean,
+      default: false,
+    },
+    grid: {
+      type: Boolean,
+      default: false,
+    }
   },
   emits: ['selected', 'update:annotation', 'create:annotation'],
   setup(props, { emit }) {
@@ -37,6 +46,7 @@ export default defineComponent({
     const editingAnnotation: Ref<null | SpectrogramAnnotation> = ref(null);
     let rectAnnotationLayer: RectangleLayer;
     let editAnnotationLayer: EditAnnotationLayer;
+    let legendLayer: LegendLayer;
     const displayError = ref(false);
     const errorMsg = ref('');
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
@@ -161,6 +171,9 @@ export default defineComponent({
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value);
         rectAnnotationLayer.redraw();
       }
+      if (!props.thumbnail) {
+        legendLayer.redraw();
+      }
       if (editing.value && editingAnnotation.value) {
         setTimeout(() => {
           editAnnotationLayer.changeData(editingAnnotation.value);
@@ -185,6 +198,16 @@ export default defineComponent({
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value);
         rectAnnotationLayer.redraw();
+        if (!props.thumbnail) {
+          legendLayer = new LegendLayer(props.geoViewerRef, event, props.spectroInfo);
+          legendLayer.redraw();
+        }
+      }
+    });
+    watch(() => props.grid, () => {
+      if (!props.thumbnail && legendLayer) {
+        legendLayer.setGridEnabled(props.grid);
+        triggerUpdate();
       }
     });
     watch(
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index e619d24..a38208d 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -118,7 +118,12 @@ const useGeoJS = () => {
     const { width: mapWidth } = geoViewer.value.camera().viewport;
 
     const bounds = !thumbnail.value
-      ? { left: 0, top: 0, right: mapWidth, bottom: originalBounds.bottom }
+      ? { 
+        left: -125, // Making sure the legend is on the screen
+        top: 0,
+        right: mapWidth,
+        bottom: originalBounds.bottom,
+      }
       : originalBounds;
     const zoomAndCenter = geoViewer.value.zoomAndCenterFromBounds(bounds, 0);
     geoViewer.value.zoom(zoomAndCenter.zoom);
@@ -255,11 +260,11 @@ function spectroToGeoJSon(
     type: "Polygon",
     coordinates: [
       [
-        [0, 0],
-        [0, 0],
-        [0, 0],
-        [0, 0],
-        [0, 0],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
       ],
     ],
   };
diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts
new file mode 100644
index 0000000..f7f3d85
--- /dev/null
+++ b/client/src/components/geoJS/layers/legendLayer.ts
@@ -0,0 +1,323 @@
+/* eslint-disable class-methods-use-this */
+import { SpectroInfo } from "../geoJSUtils";
+import { LayerStyle } from "./types";
+
+interface LineData {
+  line: GeoJSON.LineString;
+  thicker?: boolean;
+  grid?: boolean;
+}
+
+interface TextData {
+  text: string;
+  x: number;
+  y: number;
+  offsetY?: number;
+  offsetX?: number;
+}
+
+export default class LegendLayer {
+  lineData: LineData[];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  lineLayer: any;
+
+  textData: TextData[];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  textLayer: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  gridLines: LineData[];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  textStyle: LayerStyle<TextData>;
+  lineStyle: LayerStyle<LineData>;
+
+  axisBuffer: number;
+
+  gridEnabled: boolean;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geoViewerRef: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
+    this.geoViewerRef = geoViewerRef;
+    this.lineData = [];
+    this.spectroInfo = spectroInfo;
+    this.textData = [];
+    this.axisBuffer = 5;
+    this.event = event;
+    this.gridEnabled = false;
+    //Only initialize once, prevents recreating Layer each edit
+    const layer = this.geoViewerRef.createLayer("feature", {
+      features: ["text", "line"],
+    });
+    this.textLayer = layer
+      .createFeature("text")
+      .text((data: TextData) => data.text)
+      .position((data: TextData) => ({ x: data.x, y: data.y }));
+
+    this.lineLayer = layer.createFeature("line");
+
+    this.textStyle = this.createTextStyle();
+    this.lineStyle = this.createLineStyle();
+    this.gridLines = [];
+    this.createLabels();
+
+  }
+
+  drawXAxisLabels() {
+    // Now we need tick marks for ms along the X-axis
+    const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
+    const timeToPixels = this.spectroInfo.width / time;
+
+    // every 100 ms a small tick and every 1000 a big tick
+    for (let i = 0; i < time; i += 10) {
+      const length = i % 1000 === 0 ? this.axisBuffer * 8 : this.axisBuffer * 4;
+      if (i % 50 === 0) {
+        this.lineData.push({
+          line: {
+            type: "LineString",
+            coordinates: [
+              [i * timeToPixels, this.spectroInfo.height + this.axisBuffer],
+              [i * timeToPixels, this.spectroInfo.height + length],
+            ],
+          },
+          thicker: i % 1000 === 0,
+        });
+        this.textData.push({
+          text: `${i}ms`,
+          x: i * timeToPixels,
+          y: this.spectroInfo.height + length,
+          offsetX: 3,
+          offsetY: 8,
+        });
+      }
+      this.gridLines.push({
+        line: {
+          type: "LineString",
+          coordinates: [
+            [i * timeToPixels, 0],
+            [i * timeToPixels, this.spectroInfo.height + length],
+          ],
+        },
+        grid: true,
+      });
+    }
+  }
+
+  drawXAxisLabelsCompressed() {
+    // For compressed we need to draw based on the start/endTimes instead of the standard
+    const time = this.spectroInfo.end_time - this.spectroInfo.start_time;
+    const timeToPixels = this.spectroInfo.width / time;
+
+    const { start_times, end_times } = this.spectroInfo;
+    if (start_times && end_times) {
+        // We need a pixel time to map to the 0 position
+        let pixelOffset = 0;
+        for (let i =0; i< start_times.length; i+= 1) {
+            const length = this.axisBuffer * 4;
+            const start_time = start_times[i];
+            const end_time = end_times[i];
+            this.lineData.push({
+                line: {
+                  type: "LineString",
+                  coordinates: [
+                    [(0 + pixelOffset), this.spectroInfo.height + this.axisBuffer],
+                    [(0 * timeToPixels) + pixelOffset, this.spectroInfo.height + length],
+                  ],
+                },
+                thicker:true,
+              });
+              this.lineData.push({
+                line: {
+                  type: "LineString",
+                  coordinates: [
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, this.spectroInfo.height + this.axisBuffer],
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, this.spectroInfo.height + length],
+                  ],
+                },
+                thicker:true,
+              });
+              this.lineData.push({
+                line: {
+                  type: "LineString",
+                  coordinates: [
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, 0],
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, -length],
+                  ],
+                },
+                thicker:true,
+              });
+              this.lineData.push({
+                line: {
+                  type: "LineString",
+                  coordinates: [
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, this.spectroInfo.height + this.axisBuffer],
+                    [((end_time - start_time) * timeToPixels) + pixelOffset, 0],
+                  ],
+                },
+                grid:true,
+              });
+
+            //Need to decide what text to add to the label
+              this.textData.push({
+                text: `${start_time}ms`,
+                x: (0 + pixelOffset),
+                y: this.spectroInfo.height + length,
+                offsetX: 3,
+                offsetY: 16,
+              });
+              this.textData.push({
+                text: `${end_time}ms`,
+                x: ((end_time - start_time ) * timeToPixels) + pixelOffset,
+                y: -length,
+                offsetX: 3,
+                offsetY: -16,
+              });
+              pixelOffset += (end_time - start_time) * timeToPixels;
+            // Need to add the current 
+        }
+    }
+
+  }
+
+  createLabels() {
+    // Take spectro Info and create lines for X/Y axis
+    const xAxis: GeoJSON.LineString = {
+      type: "LineString",
+      coordinates: [
+        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
+        [this.spectroInfo.width, this.spectroInfo.height + this.axisBuffer],
+      ],
+    };
+    const yAxis: GeoJSON.LineString = {
+      type: "LineString",
+      coordinates: [
+        [0 - this.axisBuffer, 0],
+        [0 - this.axisBuffer, this.spectroInfo.height + this.axisBuffer],
+      ],
+    };
+    this.lineData.push({ line: xAxis });
+    this.lineData.push({ line: yAxis });
+
+    // Lets do the vertical Hz axis now
+    const hz = this.spectroInfo.high_freq - this.spectroInfo.low_freq;
+    const hzToPixels = this.spectroInfo.height / hz;
+    for (let i = 0; i < hz; i += 10000) {
+      const length = i % 10000 === 0 ? this.axisBuffer * 8 : this.axisBuffer * 4;
+      this.lineData.push({
+        line: {
+          type: "LineString",
+          coordinates: [
+            [0 - this.axisBuffer, this.spectroInfo.height - i * hzToPixels],
+            [0 - this.axisBuffer - length, this.spectroInfo.height - i * hzToPixels],
+          ],
+        },
+        thicker: i % 10000 === 0,
+      });
+      this.textData.push({
+        text: `${(i + this.spectroInfo.low_freq) / 1000}KHz`,
+        x: 0 - this.axisBuffer - length,
+        y: this.spectroInfo.height - i * hzToPixels,
+        offsetX: -25,
+        offsetY: 0,
+      });
+      this.gridLines.push({
+        line: {
+          type: "LineString",
+          coordinates: [
+            [0 - this.axisBuffer - length, this.spectroInfo.height - i * hzToPixels],
+            [this.spectroInfo.width, this.spectroInfo.height - i * hzToPixels],
+          ],
+        },
+        grid: true,
+      });
+    }
+    if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
+        this.drawXAxisLabelsCompressed();
+    } else {
+        this.drawXAxisLabels();
+    }
+  }
+
+  redraw() {
+    // add some styles
+    const lineData = this.gridEnabled ? this.lineData.concat(this.gridLines) : this.lineData;
+    this.lineLayer
+      .data(lineData)
+      .line((d: LineData) => d.line.coordinates)
+      .style(this.createLineStyle())
+      .draw();
+    this.textLayer.data(this.textData).style(this.createTextStyle()).draw();
+  }
+
+  disable() {
+    this.lineLayer.data([]).draw();
+    this.textLayer.data([]).draw();
+  }
+
+  setGridEnabled(val: boolean) {
+    this.gridEnabled = val;
+    this.redraw();
+  }
+
+  createLineStyle(): LayerStyle<LineData> {
+    return {
+      ...{
+        strokeColor: "#00FFFF",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+      },
+      strokeOpacity: (_point, _index, data) => {
+        // Reduce the rectangle opacity if a polygon is also drawn
+        if (data.grid) {
+          return 0.5;
+        }
+        return 1.0;
+      },
+
+      strokeWidth: (_point, _index, data) => {
+        if (data.thicker) {
+          return 4.0;
+        }
+        if (data.grid) {
+          return 1.0;
+        }
+        return 2.0;
+      },
+    };
+  }
+  createTextStyle(): LayerStyle<TextData> {
+    return {
+      ...{
+        strokeColor: "yellow",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+      },
+      color: () => {
+        return "white";
+      },
+      offset: (data) => ({
+        x: data.offsetX || 0,
+        y: data.offsetY || 0,
+      }),
+    };
+  }
+}
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 43889d4..81c6c4e 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -115,7 +115,16 @@ export default class RectangleLayer {
     const arr: RectGeoJSData[] = [];
     annotationData.forEach((annotation: SpectrogramAnnotation) => {
         const polygon = spectroToGeoJSon(annotation, this.spectroInfo);
-        const newAnnotation: RectGeoJSData = {
+        const [xmin, ymin] = polygon.coordinates[0][0];
+        const [xmax, ymax] = polygon.coordinates[0][2];
+        // For the compressed view we need to filter out default or NaN numbers
+        if (Number.isNaN(xmax) || Number.isNaN(xmin) || Number.isNaN(ymax) || Number.isNaN(ymin)) {
+          return;
+        }
+        if (xmax === -1 && ymin === -1 && ymax === -1 && xmin === -1) {
+          return;
+        }
+          const newAnnotation: RectGeoJSData = {
           id: annotation.id,
           selected: annotation.id === selectedIndex,
           editing: annotation.editing,
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index fa6a0c7..53a7516 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -30,6 +30,7 @@ export default defineComponent({
     const speciesList: Ref<Species[]> = ref([]);
     const loadedImage = ref(false);
     const compressed = ref(false);
+    const gridEnabled = ref(false);
     const getAnnotationsList= async (annotationId?: number) => {
         const response = await getAnnotations(props.id);
         annotations.value = response.data;
@@ -68,6 +69,13 @@ export default defineComponent({
       parentGeoViewerRef.value = data;
 
     };
+
+    const timeRef = ref(0);
+    const freqRef = ref(0);
+    const setHoverData = ({time, freq}: {time: number, freq: number})  => {
+      timeRef.value = time;
+      freqRef.value = freq;
+    };
     watch(compressed, () => loadData());
     return { 
       compressed,
@@ -79,9 +87,13 @@ export default defineComponent({
       setSelection,
       getAnnotationsList,
       setParentGeoViewer,
+      setHoverData,
       speciesList,
       selectedAnnotation,
       parentGeoViewerRef,
+      gridEnabled,
+      timeRef,
+      freqRef,
     };
   },
 });
@@ -90,6 +102,50 @@ export default defineComponent({
 <template>
   <v-row>
     <v-col>
+      <v-toolbar>
+        <v-row>
+          <v-col>
+            <div>
+              <b>Time:</b> 
+              <span v-if="timeRef >= 0 ">{{ timeRef.toFixed(0) }}ms</span>
+            </div>
+            <div>
+              <b>Frequency:</b> 
+              <span v-if="freqRef >= 0">{{ freqRef.toFixed(2) }}KHz</span>
+            </div>
+          </v-col>
+          <v-spacer />
+          <v-tooltip bottom>
+            <template #activator="{ props:subProps }">
+              <v-icon
+                v-bind="subProps"
+                size="35"
+                class="mr-5 mt-5"
+
+                :color="gridEnabled ? 'blue' : ''"
+                @click="gridEnabled = !gridEnabled"
+              >
+                mdi-grid
+              </v-icon>
+            </template>
+            <span> Turn Legend Grid On/Off</span>
+          </v-tooltip>
+          <v-tooltip bottom>
+            <template #activator="{ props:subProps }">
+              <v-icon
+                v-bind="subProps"
+                size="35"
+                class="mr-5 mt-5"
+                :color="compressed ? 'blue' : ''"
+                @click="compressed = !compressed"
+              >
+                mdi-calendar-collapse-horizontal
+              </v-icon>
+            </template>
+            <span> Toggle Compressed View</span>
+          </v-tooltip>
+        </v-row>
+      </v-toolbar>
       <spectrogram-viewer
         v-if="loadedImage"
         :image="image"
@@ -97,9 +153,11 @@ export default defineComponent({
         :recording-id="id"
         :annotations="annotations"
         :selected-id="selectedId"
+        :grid="gridEnabled"
         @selected="setSelection($event)"
         @create:annotation="getAnnotationsList($event)"
         @geo-viewer-ref="setParentGeoViewer($event)"
+        @hover-data="setHoverData($event)"
       />
       <thumbnail-viewer
         v-if="loadedImage && parentGeoViewerRef"
@@ -113,12 +171,6 @@ export default defineComponent({
       />
     </v-col>
     <v-col style="max-width:300px">
-      <v-switch
-        v-model="compressed"
-        label="Compressed"
-        density="compact"
-        class="ma-0 pa-0"
-      />
       <annotation-list
         :annotations="annotations"
         :selected-id="selectedId"