From 5de7c1bcd82eaca0d844bf1b2e950b465eb72785 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 29 Oct 2024 14:19:11 -0400
Subject: [PATCH 1/4] fix compression/expanded annotation toggling issues

---
 client/src/components/SpectrogramViewer.vue  | 6 +++++-
 client/src/components/geoJS/LayerManager.vue | 2 +-
 client/src/components/geoJS/geoJSUtils.ts    | 7 +++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 9b2f729..af8ec5b 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType, ref, Ref, watch } from "vue";
+import { defineComponent, onMounted, onUnmounted, PropType, ref, Ref, watch } from "vue";
 import { SpectroInfo, spectroToCenter, useGeoJS } from "./geoJS/geoJSUtils";
 import {
   patchAnnotation,
@@ -50,6 +50,7 @@ export default defineComponent({
     const imageCursorRef: Ref<HTMLElement | undefined> = ref();
     const tileURL = props.spectroInfo.spectroId ? `${window.location.protocol}//${window.location.hostname}:${window.location.port}/api/v1/dynamic/spectrograms/${props.spectroInfo.spectroId}/tiles/{z}/{x}/{y}.png/` : "";
     const setCursor = (newCursor: string) => {
+      console.log(`Setting Cursor: ${newCursor}`);
       cursor.value = newCursor;
     };
 
@@ -131,6 +132,7 @@ export default defineComponent({
         }
       }
     };
+    onMounted(() => initialized.value = false);
     watch([containerRef], () => {
       scaledWidth.value = props.spectroInfo?.width;
       scaledHeight.value = props.spectroInfo?.height;
@@ -267,6 +269,8 @@ export default defineComponent({
       scaledVals.value = {x: xScale, y: yScale};
     };
 
+    onUnmounted(() => geoJS.destroyGeoViewer());
+
 
 
     return {
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index bacc016..d608d63 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -562,7 +562,7 @@ export default defineComponent({
     watch(
       () => annotationState.value,
       () => {
-        if (annotationState.value === "creating") {
+        if (!props.thumbnail && annotationState.value === "creating") {
           editing.value = false;
           selectedAnnotationId.value = null;
           editingAnnotation.value = null;
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 0e5ff5d..6514cc7 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -26,6 +26,12 @@ const useGeoJS = () => {
     return geoViewer;
   };
 
+  const destroyGeoViewer = () => {
+    if (geoViewer.value) {
+      geoViewer.value.exit();
+    }
+  };
+
   const initializeViewer = (
     sourceContainer: HTMLElement,
     width: number,
@@ -235,6 +241,7 @@ const useGeoJS = () => {
     resetMapDimensions,
     resetZoom,
     updateMapSize,
+    destroyGeoViewer,
   };
 };
 

From e3ab5f43fdf152abbea88b99cae493ed695c9c89 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 29 Oct 2024 14:38:10 -0400
Subject: [PATCH 2/4] allowing removal of single species Id

---
 bats_ai/core/views/recording.py             | 2 +-
 client/src/components/SpectrogramViewer.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index e7c892c..007c0b2 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -579,7 +579,7 @@ def patch_annotation(
             annotation_instance.save()
 
             # Clear existing species associations
-            if species_ids:
+            if species_ids is not None:
                 annotation_instance.species.clear()
                 # Add species to the annotation based on the provided species_ids
                 for species_id in species_ids:
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index af8ec5b..a9e62dc 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -50,7 +50,6 @@ export default defineComponent({
     const imageCursorRef: Ref<HTMLElement | undefined> = ref();
     const tileURL = props.spectroInfo.spectroId ? `${window.location.protocol}//${window.location.hostname}:${window.location.port}/api/v1/dynamic/spectrograms/${props.spectroInfo.spectroId}/tiles/{z}/{x}/{y}.png/` : "";
     const setCursor = (newCursor: string) => {
-      console.log(`Setting Cursor: ${newCursor}`);
       cursor.value = newCursor;
     };
 

From cecc903938eba5996724c4b3e2b3bd3bb5e14ae1 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Mon, 11 Nov 2024 15:21:45 -0500
Subject: [PATCH 3/4] adding in a compressedOverlay for visualizing compressed
 items in the main view

---
 bats_ai/core/views/recording.py               |   8 +
 client/src/api/api.ts                         |   4 +
 client/src/components/geoJS/LayerManager.vue  |  22 +++
 client/src/components/geoJS/geoJSUtils.ts     |   8 +-
 .../geoJS/layers/compressedOverlayLayer.ts    | 139 ++++++++++++++++++
 .../components/geoJS/layers/legendLayer.ts    |   4 +-
 client/src/views/Spectrogram.vue              |   4 +
 7 files changed, 183 insertions(+), 6 deletions(-)
 create mode 100644 client/src/components/geoJS/layers/compressedOverlayLayer.ts

diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 007c0b2..6132871 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -277,6 +277,8 @@ def get_spectrogram(request: HttpRequest, id: int):
 
     with colormap(None):
         spectrogram = recording.spectrogram
+    
+    compressed = recording.compressed_spectrogram
 
     spectro_data = {
         'url': spectrogram.image_url,
@@ -290,6 +292,12 @@ def get_spectrogram(request: HttpRequest, id: int):
             'high_freq': spectrogram.frequency_max,
         },
     }
+    if compressed:
+        spectro_data['compressed'] = {
+            'start_times': compressed.starts,
+            'end_times': compressed.stops,
+        }
+
     # Get distinct other users who have made annotations on the recording
     if recording.owner == request.user:
         other_users_qs = (
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index fea6f67..bb9f824 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -113,6 +113,10 @@ export interface Spectrogram {
     annotations?: SpectrogramAnnotation[];
     temporal?: SpectrogramTemporalAnnotation[];
     spectroInfo?: SpectroInfo;
+    compressed?: {
+        start_times: number[];
+        end_times: number[];
+    }
     currentUser?: string;
     otherUsers?: UserInfo[];
 
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index d608d63..6f7a190 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -4,6 +4,7 @@ import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../api/
 import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
+import CompressedOverlayLayer from "./layers/compressedOverlayLayer";
 import TemporalLayer from "./layers/temporalLayer";
 import LegendLayer from "./layers/legendLayer";
 import TimeLayer from "./layers/timeLayer";
@@ -65,6 +66,7 @@ export default defineComponent({
     const editing = ref(false);
     const editingAnnotation: Ref<null | SpectrogramAnnotation | SpectrogramTemporalAnnotation> = ref(null);
     let rectAnnotationLayer: RectangleLayer;
+    let compressedOverlayLayer: CompressedOverlayLayer;
     let temporalAnnotationLayer: TemporalLayer;
     let editAnnotationLayer: EditAnnotationLayer;
     let legendLayer: LegendLayer;
@@ -315,6 +317,10 @@ export default defineComponent({
         );
         rectAnnotationLayer.redraw();
       }
+      if (compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+        compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+        compressedOverlayLayer.redraw();
+      }
       if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
         temporalAnnotationLayer.formatData(
           temporalAnnotations,
@@ -409,6 +415,9 @@ export default defineComponent({
       if (rectAnnotationLayer) {
         rectAnnotationLayer.destroy();
       }
+      if (compressedOverlayLayer) {
+        compressedOverlayLayer.destroy();
+      }
       if (temporalAnnotationLayer) {
         temporalAnnotationLayer.destroy();
       }
@@ -437,6 +446,11 @@ export default defineComponent({
         } else {
           rectAnnotationLayer.spectroInfo = props.spectroInfo;
         }
+        if (!compressedOverlayLayer) {
+          compressedOverlayLayer = new CompressedOverlayLayer(props.geoViewerRef, props.spectroInfo);
+        } else {
+          compressedOverlayLayer.spectroInfo = props.spectroInfo;
+        }
         if (!temporalAnnotationLayer) {
         temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
         } {
@@ -444,6 +458,10 @@ export default defineComponent({
         }
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         rectAnnotationLayer.redraw();
+        if (compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
+          compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+          compressedOverlayLayer.redraw();
+        }
         temporalAnnotationLayer.formatData(localTemporalAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         temporalAnnotationLayer.redraw();
         if (!props.thumbnail) {
@@ -514,6 +532,10 @@ export default defineComponent({
         props.yScale,
       );
       rectAnnotationLayer.redraw();
+      if (compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+        compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+        compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+      }
       editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
       if (editing.value && editingAnnotation.value) {
         setTimeout(() => {
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 6514cc7..e3fd4d4 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -275,7 +275,7 @@ function spectroTemporalToGeoJSon(
   const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
   // const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
   //scale pixels to time and frequency ranges
-  if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
+  if (spectroInfo.compressedWidth && spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
     const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     // Now we remap our annotation to pixel coordinates
     const start_time = annotation.start_time * widthScale;
@@ -374,7 +374,7 @@ function spectroToGeoJSon(
   const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
   const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
 
-  if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
+  if (spectroInfo.compressedWidth === undefined) {
     const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     // Now we remap our annotation to pixel coordinates
@@ -396,7 +396,7 @@ function spectroToGeoJSon(
         ],
       ],
     };
-  } else if (spectroInfo.start_times && spectroInfo.end_times) {
+  } else if (spectroInfo.compressedWidth && spectroInfo.start_times && spectroInfo.end_times) {
     // Compressed Spectro has different conversion
     // Find what section the annotation is in
     const start = annotation.start_time;
@@ -504,7 +504,7 @@ function geojsonToSpectro(
   const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
 
   const coords = geojson.geometry.coordinates[0];
-  if (spectroInfo.start_times === undefined && spectroInfo.end_times === undefined) {
+  if (spectroInfo.compressedWidth === undefined) {
     const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
     const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
     const start_time = Math.round(coords[1][0] / widthScale);
diff --git a/client/src/components/geoJS/layers/compressedOverlayLayer.ts b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
new file mode 100644
index 0000000..7473d8c
--- /dev/null
+++ b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
@@ -0,0 +1,139 @@
+/* eslint-disable class-methods-use-this */
+import { SpectroInfo } from "../geoJSUtils";
+import { LayerStyle } from "./types";
+
+interface RectCompressedGeoJSData {
+  polygon: GeoJSON.Polygon;
+}
+
+
+function scaleCompressedTime(start_time: number, end_time: number, spectroInfo: SpectroInfo, yScale: number, scaledWidth: number, scaledHeight: number) {
+  const adjustedWidth = scaledWidth > spectroInfo.width ? scaledWidth : spectroInfo.width;
+  const adjustedHeight = scaledHeight > spectroInfo.height ? scaledHeight : spectroInfo.height;
+
+  const widthScale = adjustedWidth / (spectroInfo.end_time - spectroInfo.start_time);
+  const heightScale = adjustedHeight / (spectroInfo.high_freq - spectroInfo.low_freq);
+  // Now we remap our annotation to pixel coordinates
+  const low_freq =
+    adjustedHeight - (spectroInfo.low_freq) * heightScale;
+  const high_freq =
+    adjustedHeight - (spectroInfo.high_freq) * heightScale;
+  const start_time_scaled = start_time * widthScale;
+  const end_time_scaled = end_time * widthScale;
+  return {
+    type: "Polygon",
+    coordinates: [
+      [
+        [start_time_scaled, low_freq * yScale],
+        [start_time_scaled, high_freq * yScale],
+        [end_time_scaled, high_freq * yScale],
+        [end_time_scaled, low_freq * yScale],
+        [start_time_scaled, low_freq * yScale],
+      ],
+    ],
+  } as GeoJSON.Polygon;
+
+}
+
+export default class CompressedOverlayLayer {
+  formattedData: RectCompressedGeoJSData[];
+
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  featureLayer: any;
+
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  spectroInfo: SpectroInfo;
+
+  style: LayerStyle<RectCompressedGeoJSData>;
+
+  scaledWidth: number;
+  scaledHeight: number;
+
+  // 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
+    spectroInfo: SpectroInfo
+  ) {
+    this.geoViewerRef = geoViewerRef;
+    this.spectroInfo = spectroInfo;
+    this.formattedData = [];
+    this.scaledWidth = 0;
+    this.scaledHeight = 0;
+    //Only initialize once, prevents recreating Layer each edit
+    const layer = this.geoViewerRef.createLayer("feature", {
+      features: ["polygon"],
+    });
+    this.featureLayer = layer
+      .createFeature("polygon", { selectionAPI: true });
+    this.style = this.createStyle();
+  }
+
+  setScaledDimensions(newWidth: number, newHeight: number) {
+    this.scaledWidth = newWidth;
+    this.scaledHeight = newHeight;    
+  }
+
+  destroy() {
+    if (this.featureLayer) {
+      this.geoViewerRef.deleteLayer(this.featureLayer);
+    }
+  }
+
+  formatData(
+    startTimes: number[],
+    endTimes: number[],
+    yScale = 1,
+  ) {
+    const arr: RectCompressedGeoJSData[] = [];
+
+    for (let i = 0; i< startTimes.length; i += 1) {
+      const startTime = startTimes[i];
+      const endTime = endTimes[i];
+      const polygon = scaleCompressedTime(startTime, endTime, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
+      const newAnnotation: RectCompressedGeoJSData = {
+        polygon,
+      };
+      arr.push(newAnnotation);
+    }
+    this.formattedData = arr;
+  }
+
+  redraw() {
+    // add some styles
+    this.featureLayer
+      .data(this.formattedData)
+      .polygon((d: RectCompressedGeoJSData) => d.polygon.coordinates[0])
+      .style(this.createStyle())
+      .draw();
+  }
+
+  disable() {
+    this.featureLayer.data([]).draw();
+  }
+
+  createStyle(): LayerStyle<RectCompressedGeoJSData> {
+    return {
+      ...{
+        strokeColor: "black",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: false,
+      },
+      // Style conversion to get array objects to work in geoJS
+      position: (point) => {
+        return { x: point[0], y: point[1] };
+      },
+      strokeColor: (_point, _index, data) => {
+        return "cyan";
+      },
+    };
+  }
+}
diff --git a/client/src/components/geoJS/layers/legendLayer.ts b/client/src/components/geoJS/layers/legendLayer.ts
index 30f9920..b339cac 100644
--- a/client/src/components/geoJS/layers/legendLayer.ts
+++ b/client/src/components/geoJS/layers/legendLayer.ts
@@ -379,7 +379,7 @@ export default class LegendLayer {
     this.lineDataX.push({ line: xAxis });
     this.drawYAxis(0);
 
-    if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
+    if (this.spectroInfo.compressedWidth && this.spectroInfo.start_times && this.spectroInfo.end_times) {
       this.drawXAxisLabelsCompressed(bottomOffset, topOffset, lefOffset);
     } else {
       this.drawXAxisLabels(bottomOffset, topOffset, lefOffset);
@@ -405,7 +405,7 @@ export default class LegendLayer {
     this.lineDataX.push({ line: xAxis });
     this.drawYAxis();
 
-    if (this.spectroInfo.start_times && this.spectroInfo.end_times) {
+    if (this.spectroInfo.compressedWidth && this.spectroInfo.start_times && this.spectroInfo.end_times) {
       this.drawXAxisLabelsCompressed();
     } else {
       this.drawXAxisLabels();
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 379d2ef..30ee7bd 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -121,6 +121,10 @@ export default defineComponent({
         loadedImage.value = true;
       };
       spectroInfo.value = response.data["spectroInfo"];
+      if (response.data['compressed'] && spectroInfo.value) {
+        spectroInfo.value.start_times = response.data.compressed.start_times;
+        spectroInfo.value.end_times = response.data.compressed.end_times;
+      }
       annotations.value =
         response.data["annotations"]?.sort(
           (a, b) => a.start_time - b.start_time

From cf579e8783600e2af22cd1715d8f4ee6eb96bd06 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Tue, 12 Nov 2024 12:41:33 -0500
Subject: [PATCH 4/4] finalize overlay

---
 bats_ai/core/views/guanometadata.py           | 20 +++++++--------
 bats_ai/core/views/recording.py               |  2 +-
 client/src/components/geoJS/LayerManager.vue  | 25 +++++++++++++------
 .../geoJS/layers/compressedOverlayLayer.ts    | 23 +++++++++--------
 client/src/use/useState.ts                    |  2 ++
 client/src/views/Spectrogram.vue              | 24 ++++++++++++++++++
 6 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/bats_ai/core/views/guanometadata.py b/bats_ai/core/views/guanometadata.py
index add1859..23c15bd 100644
--- a/bats_ai/core/views/guanometadata.py
+++ b/bats_ai/core/views/guanometadata.py
@@ -50,16 +50,16 @@ def default_data(
             nabat_fields['nabat_longitude'] = str(float(nabat_fields['nabat_longitude']) * -1)
         # Extract additional fields with conditionals
         additional_fields = {
-            'nabat_activation_start_time': parse_datetime(
-                gfile.get('NABat|Activation start time', None)
-            )
-            if 'NABat|Activation start time' in gfile
-            else None,
-            'nabat_activation_end_time': parse_datetime(
-                gfile.get('NABat|Activation end time', None)
-            )
-            if 'NABat|Activation end time' in gfile
-            else None,
+            'nabat_activation_start_time': (
+                parse_datetime(gfile.get('NABat|Activation start time', None))
+                if 'NABat|Activation start time' in gfile
+                else None
+            ),
+            'nabat_activation_end_time': (
+                parse_datetime(gfile.get('NABat|Activation end time', None))
+                if 'NABat|Activation end time' in gfile
+                else None
+            ),
             'nabat_software_type': gfile.get('NABat|Software type', None),
             'nabat_species_list': gfile.get('NABat|Species List', '').split(','),
             'nabat_comments': gfile.get('NABat|Comments', None),
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 6132871..7699cc8 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -277,7 +277,7 @@ def get_spectrogram(request: HttpRequest, id: int):
 
     with colormap(None):
         spectrogram = recording.spectrogram
-    
+
     compressed = recording.compressed_spectrogram
 
     spectro_data = {
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 6f7a190..4ea1c12 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -58,6 +58,7 @@ export default defineComponent({
       selectedId,
       selectedType,
       setSelectedId,
+      viewCompressedOverlay,
     } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
@@ -317,7 +318,7 @@ export default defineComponent({
         );
         rectAnnotationLayer.redraw();
       }
-      if (compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+      if (viewCompressedOverlay.value && compressedOverlayLayer && !props.spectroInfo?.compressedWidth && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
         compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
         compressedOverlayLayer.redraw();
       }
@@ -436,6 +437,11 @@ export default defineComponent({
     });
     const initLayers = () => {
       if (props.spectroInfo) {
+        if (!compressedOverlayLayer) {
+          compressedOverlayLayer = new CompressedOverlayLayer(props.geoViewerRef, props.spectroInfo);
+        } else {
+          compressedOverlayLayer.spectroInfo = props.spectroInfo;
+        }
         if (!editAnnotationLayer) {
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
         } else {
@@ -446,11 +452,6 @@ export default defineComponent({
         } else {
           rectAnnotationLayer.spectroInfo = props.spectroInfo;
         }
-        if (!compressedOverlayLayer) {
-          compressedOverlayLayer = new CompressedOverlayLayer(props.geoViewerRef, props.spectroInfo);
-        } else {
-          compressedOverlayLayer.spectroInfo = props.spectroInfo;
-        }
         if (!temporalAnnotationLayer) {
         temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
         } {
@@ -458,7 +459,7 @@ export default defineComponent({
         }
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value, props.yScale);
         rectAnnotationLayer.redraw();
-        if (compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
+        if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo.start_times && props.spectroInfo.end_times) {
           compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
           compressedOverlayLayer.redraw();
         }
@@ -535,6 +536,7 @@ export default defineComponent({
       if (compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
         compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
         compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+        compressedOverlayLayer.redraw();
       }
       editAnnotationLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
       if (editing.value && editingAnnotation.value) {
@@ -580,6 +582,15 @@ export default defineComponent({
       }
 
 
+    });
+    watch(viewCompressedOverlay, () => {
+      if (viewCompressedOverlay.value && compressedOverlayLayer && props.spectroInfo?.start_times && props.spectroInfo.end_times) {
+        compressedOverlayLayer.setScaledDimensions(props.scaledWidth, props.scaledHeight);
+        compressedOverlayLayer.formatData(props.spectroInfo.start_times, props.spectroInfo.end_times, props.yScale);
+        compressedOverlayLayer.redraw();
+      } else {
+        compressedOverlayLayer.disable();
+      }
     });
     watch(
       () => annotationState.value,
diff --git a/client/src/components/geoJS/layers/compressedOverlayLayer.ts b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
index 7473d8c..f7a143b 100644
--- a/client/src/components/geoJS/layers/compressedOverlayLayer.ts
+++ b/client/src/components/geoJS/layers/compressedOverlayLayer.ts
@@ -86,15 +86,19 @@ export default class CompressedOverlayLayer {
   }
 
   formatData(
-    startTimes: number[],
-    endTimes: number[],
+    baseStartTimes: number[],
+    baseEndTimes: number[],
     yScale = 1,
   ) {
     const arr: RectCompressedGeoJSData[] = [];
-
+    const startTimes = [...baseStartTimes];
+    const endTimes = [...baseEndTimes];
+    startTimes.push(this.spectroInfo.end_time);
+    endTimes.unshift(this.spectroInfo.start_time);
     for (let i = 0; i< startTimes.length; i += 1) {
-      const startTime = startTimes[i];
-      const endTime = endTimes[i];
+      // These are swapped because we want to mask out the area inbetween
+      const startTime = endTimes[i];
+      const endTime = startTimes[i];
       const polygon = scaleCompressedTime(startTime, endTime, this.spectroInfo, yScale, this.scaledWidth, this.scaledHeight);
       const newAnnotation: RectCompressedGeoJSData = {
         polygon,
@@ -120,20 +124,19 @@ export default class CompressedOverlayLayer {
   createStyle(): LayerStyle<RectCompressedGeoJSData> {
     return {
       ...{
-        strokeColor: "black",
+        strokeColor: "transparent",
         strokeWidth: 2.0,
         antialiasing: 0,
         stroke: true,
         uniformPolygon: true,
-        fill: false,
+        fill: true,
+        fillColor: "black",
+        fillOpacity: 0.75,
       },
       // Style conversion to get array objects to work in geoJS
       position: (point) => {
         return { x: point[0], y: point[1] };
       },
-      strokeColor: (_point, _index, data) => {
-        return "cyan";
-      },
     };
   }
 }
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 432c252..20ca538 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -20,6 +20,7 @@ const recordingList: Ref<Recording[]> = ref([]);
 const nextShared: Ref<Recording | false> = ref(false);
 const blackBackground = ref(true);
 const scaledVals: Ref<{x: number, y: number}> = ref({x: 0, y: 0});
+const viewCompressedOverlay = ref(false);
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -95,5 +96,6 @@ export default function useState() {
     nextShared,
     blackBackground,
     scaledVals,
+    viewCompressedOverlay,
   };
 }
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 30ee7bd..910846c 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -54,6 +54,7 @@ export default defineComponent({
       selectedId,
       selectedType,
       scaledVals,
+      viewCompressedOverlay,
     } = useState();
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
@@ -238,6 +239,10 @@ export default defineComponent({
       selectedType.value = annotationType;
     };
 
+    const toggleCompressedOverlay = () => {
+      viewCompressedOverlay.value = ! viewCompressedOverlay.value;
+    };
+
     return {
       annotationState,
       compressed,
@@ -260,6 +265,8 @@ export default defineComponent({
       layerVisibility,
       timeRef,
       freqRef,
+      toggleCompressedOverlay,
+      viewCompressedOverlay,
       // Other user selection
       otherUserAnnotations,
       temporalAnnotations,
@@ -454,6 +461,23 @@ export default defineComponent({
               </template>
               <span> Toggle Compressed View</span>
             </v-tooltip>
+            <v-tooltip
+              v-if="!compressed"
+              bottom
+            >
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="35"
+                  class="mr-5 mt-5"
+                  :color="viewCompressedOverlay ? 'blue' : ''"
+                  @click="toggleCompressedOverlay()"
+                >
+                  mdi-format-color-highlight
+                </v-icon>
+              </template>
+              <span> Highlight Compressed Areas</span>
+            </v-tooltip>
           </v-row>
         </v-container>
       </v-toolbar>