From 7312c55c7dd334d687d3da201d30c7a415195405 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 12:46:22 -0400
Subject: [PATCH 1/4] add map display button to spectrogram viewer

---
 client/src/components/RecordingInfoDialog.vue |  7 ++-
 .../src/components/RecordingInfoDisplay.vue   | 62 ++++++++++++-------
 client/src/views/NABat/NABatSpectrogram.vue   | 26 ++++++++
 client/src/views/Spectrogram.vue              | 26 ++++++++
 4 files changed, 99 insertions(+), 22 deletions(-)

diff --git a/client/src/components/RecordingInfoDialog.vue b/client/src/components/RecordingInfoDialog.vue
index ed619f77..399ca291 100644
--- a/client/src/components/RecordingInfoDialog.vue
+++ b/client/src/components/RecordingInfoDialog.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref, Ref, watch } from 'vue';
+import { defineComponent, onMounted, ref, Ref, watch, PropType } from 'vue';
 import { getRecording, Recording } from '../api/api';
 import useState from '@use/useState';
 import RecordingInfoDisplay from './RecordingInfoDisplay.vue';
@@ -14,6 +14,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    displayMode: {
+      type: String as PropType<'both' | 'metadata' | 'map'>,
+      default: 'both',
+    }
   },
   emits: ['close'],
   setup(props) {
@@ -39,6 +43,7 @@ export default defineComponent({
     v-if="recordingInfo"
     :recording-info="recordingInfo"
     :minimal-metadata="configuration.mark_annotations_completed_enabled"
+    :display-mode="displayMode"
     @close="$emit('close')"
   />
 </template>
diff --git a/client/src/components/RecordingInfoDisplay.vue b/client/src/components/RecordingInfoDisplay.vue
index 5dc3dcc9..d8218b18 100644
--- a/client/src/components/RecordingInfoDisplay.vue
+++ b/client/src/components/RecordingInfoDisplay.vue
@@ -20,12 +20,16 @@ export default defineComponent({
     minimalMetadata: {
       type: Boolean,
       default: false,
+    },
+    displayMode: {
+      type: String as PropType<'both' | 'metadata' | 'map'>,
+      default: 'both',
     }
   },
   emits: ['close'],
   setup(props) {
     const location = computed(() => {
-      if (!props.minimalMetadata && props.recordingInfo.recording_location) {
+      if (props.recordingInfo.recording_location) {
         return {
           x: props.recordingInfo.recording_location.coordinates[0],
           y:props.recordingInfo.recording_location.coordinates[1]
@@ -33,8 +37,12 @@ export default defineComponent({
       }
       return undefined;
     });
+    const showMetadata = computed(() => props.displayMode === 'both' || props.displayMode === 'metadata');
+    const showMap = computed(() => props.displayMode === 'both' || props.displayMode === 'map');
     return {
       location,
+      showMetadata,
+      showMap,
     };
   },
 });
@@ -46,37 +54,49 @@ export default defineComponent({
       {{ recordingInfo.name }}
     </v-card-title>
     <v-card-text>
-      <v-row>
-        <div><b>Filename:</b><span>{{ recordingInfo.audio_file }}</span></div>
-      </v-row>
-      <v-row>
-        <div><b>Owner:</b><span>{{ recordingInfo.owner_username }}</span></div>
-      </v-row>
-      <v-row>
-        <div><b>Time:</b><span>{{ recordingInfo.recorded_date }}</span> <span> {{ recordingInfo.recorded_time }}</span></div>
-      </v-row>
-      <v-row v-if="!minimalMetadata">
-        <div><b>Equipment:</b><span>{{ recordingInfo.equipment || 'None' }}</span></div>
-      </v-row>
-      <v-row v-if="!minimalMetadata">
-        <div><b>Comments:</b><span>{{ recordingInfo.comments || 'None' }}</span></div>
-      </v-row>
-      <v-row>
+      <div v-if="showMetadata">
+        <v-row>
+          <div><b>Filename:</b><span>{{ recordingInfo.audio_file }}</span></div>
+        </v-row>
+        <v-row>
+          <div><b>Owner:</b><span>{{ recordingInfo.owner_username }}</span></div>
+        </v-row>
+        <v-row>
+          <div><b>Time:</b><span>{{ recordingInfo.recorded_date }}</span> <span> {{ recordingInfo.recorded_time }}</span></div>
+        </v-row>
+        <v-row v-if="!minimalMetadata">
+          <div><b>Equipment:</b><span>{{ recordingInfo.equipment || 'None' }}</span></div>
+        </v-row>
+        <v-row v-if="!minimalMetadata">
+          <div><b>Comments:</b><span>{{ recordingInfo.comments || 'None' }}</span></div>
+        </v-row>
+      </div>
+      <v-row v-if="recordingInfo.grts_cell_id && showMetadata" class="mt-2">
         <div><b>GRTS CellId:</b><span>{{ recordingInfo.grts_cell_id }}</span></div>
       </v-row>
-      <v-row v-if="recordingInfo.recording_location">
-        <v-spacer />
+      <v-row
+        v-if="recordingInfo.recording_location && showMap"
+        class="justify-center"
+      >
         <map-location
           :editor="false"
           :size="{width: 400, height: 400}"
           :location="location"
           :grts-cell-id="recordingInfo.grts_cell_id || undefined"
         />
-        <v-spacer />
+      </v-row>
+      <v-row
+        v-if="recordingInfo.grts_cell_id && !showMetadata && showMap"
+        class="justify-center mt-4"
+      >
+        <div class="text-center">
+          <b>GRTS CellId:</b>
+          <span>{{ recordingInfo.grts_cell_id }}</span>
+        </div>
       </v-row>
 
       <div
-        v-if="recordingInfo.site_name"
+        v-if="recordingInfo.site_name && showMetadata"
         class="mt-5"
       >
         <v-row><h3>Guano Metadata</h3></v-row>
diff --git a/client/src/views/NABat/NABatSpectrogram.vue b/client/src/views/NABat/NABatSpectrogram.vue
index ad8b04e8..00b24827 100644
--- a/client/src/views/NABat/NABatSpectrogram.vue
+++ b/client/src/views/NABat/NABatSpectrogram.vue
@@ -88,6 +88,7 @@ export default defineComponent({
 
     const gridEnabled = ref(false);
     const recordingInfo = ref(false);
+    const recordingMap = ref(false);
 
     const disabledFeatures = ref(['speciesLabel', 'endpointLabels', 'durationLabels', 'timeLabels']);
     const loadData = async () => {
@@ -238,6 +239,7 @@ export default defineComponent({
       recordingInfo,
       // Disabled Featuers not in NABat
       disabledFeatures,
+      recordingMap,
     };
   },
 });
@@ -254,9 +256,20 @@ export default defineComponent({
     >
       <recording-info-dialog
         :id="id"
+        display-mode="both"
         @close="recordingInfo = false"
       />
     </v-dialog>
+    <v-dialog
+      v-model="recordingMap"
+      width="600"
+    >
+      <recording-info-dialog
+        :id="id"
+        display-mode="map"
+        @close="recordingMap = false"
+      />
+    </v-dialog>
     <v-col>
       <v-toolbar>
         <v-container>
@@ -273,6 +286,19 @@ export default defineComponent({
               </template>
               <span> Recording Information </span>
             </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="32"
+                  class="ml-2"
+                  @click="recordingMap = true"
+                >
+                  mdi-map
+                </v-icon>
+              </template>
+              <span> Recording Location Map </span>
+            </v-tooltip>
 
             <v-col cols="2">
               <div>
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 1ff7efb1..991f8dd5 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -106,6 +106,7 @@ export default defineComponent({
     const allImagesLoaded: Ref<boolean[]> = ref([]);
     const gridEnabled = ref(false);
     const recordingInfo = ref(false);
+    const recordingMap = ref(false);
     const compressed = ref(configuration.value.spectrogram_view === 'compressed');
     const colorpickerMenu = ref(false);
     const getAnnotationsList = async (annotationId?: number) => {
@@ -400,6 +401,7 @@ export default defineComponent({
       goToPreviousUnreviewed,
       nextUnsubmittedId,
       previousUnsubmittedId,
+      recordingMap,
     };
   },
 });
@@ -413,9 +415,20 @@ export default defineComponent({
     >
       <recording-info-dialog
         :id="id"
+        display-mode="both"
         @close="recordingInfo = false"
       />
     </v-dialog>
+    <v-dialog
+      v-model="recordingMap"
+      width="600"
+    >
+      <recording-info-dialog
+        :id="id"
+        display-mode="map"
+        @close="recordingMap = false"
+      />
+    </v-dialog>
     <v-col>
       <v-toolbar>
         <v-container>
@@ -432,6 +445,19 @@ export default defineComponent({
               </template>
               <span> Recording Information </span>
             </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="32"
+                  class="ml-2"
+                  @click="recordingMap = true"
+                >
+                  mdi-map
+                </v-icon>
+              </template>
+              <span> Recording Location Map </span>
+            </v-tooltip>
 
             <v-col cols="2">
               <div>

From 753c3cd29f3bf01fe030472f4b7f6348eaa6117e Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 13:29:06 -0400
Subject: [PATCH 2/4] reorganize the menu display

---
 client/src/components/ColorSchemeDialog.vue   |  17 +-
 .../src/components/RecordingInfoDisplay.vue   |   5 +-
 client/src/views/NABat/NABatSpectrogram.vue   | 189 +++++++++---------
 client/src/views/Spectrogram.vue              | 110 +++++-----
 4 files changed, 177 insertions(+), 144 deletions(-)

diff --git a/client/src/components/ColorSchemeDialog.vue b/client/src/components/ColorSchemeDialog.vue
index 9a102e6c..fcc764f3 100644
--- a/client/src/components/ColorSchemeDialog.vue
+++ b/client/src/components/ColorSchemeDialog.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue';
+import { onMounted, watch, PropType } from 'vue';
 import useState from '@use/useState';
 import ColorSchemeSelect from './ColorSchemeSelect.vue';
 import ColorPickerMenu from './ColorPickerMenu.vue';
@@ -11,6 +11,13 @@ const {
   backgroundColor,
 } = useState();
 
+defineProps({
+  displayMode: {
+    type: String as PropType<'dialog' | 'menu'>,
+    default: 'dialog',
+  },
+});
+
 onMounted(() => {
   const localBackgroundColor = localStorage.getItem('spectrogramBackgroundColor');
   if (localBackgroundColor) {
@@ -40,11 +47,19 @@ watch(colorScheme, () => {
       <v-tooltip>
         <template #activator="{ props: tooltipProps }">
           <v-icon
+            v-if="displayMode === 'dialog'"
             v-bind="{ ...modalProps, ...tooltipProps }"
             size="30"
           >
             mdi-palette
           </v-icon>
+          <span
+            v-else
+            v-bind="{ ...modalProps, ...tooltipProps }"
+          >
+            <v-icon size="30">mdi-palette</v-icon>
+            <span>Change Color Scheme</span>
+          </span>
         </template>
         View spectrogram color options
       </v-tooltip>
diff --git a/client/src/components/RecordingInfoDisplay.vue b/client/src/components/RecordingInfoDisplay.vue
index d8218b18..8985d1c6 100644
--- a/client/src/components/RecordingInfoDisplay.vue
+++ b/client/src/components/RecordingInfoDisplay.vue
@@ -71,7 +71,10 @@ export default defineComponent({
           <div><b>Comments:</b><span>{{ recordingInfo.comments || 'None' }}</span></div>
         </v-row>
       </div>
-      <v-row v-if="recordingInfo.grts_cell_id && showMetadata" class="mt-2">
+      <v-row
+        v-if="recordingInfo.grts_cell_id && showMetadata && displayMode === 'both' || displayMode === 'metadata'"
+        class="mt-2"
+      >
         <div><b>GRTS CellId:</b><span>{{ recordingInfo.grts_cell_id }}</span></div>
       </v-row>
       <v-row
diff --git a/client/src/views/NABat/NABatSpectrogram.vue b/client/src/views/NABat/NABatSpectrogram.vue
index 00b24827..76d4660e 100644
--- a/client/src/views/NABat/NABatSpectrogram.vue
+++ b/client/src/views/NABat/NABatSpectrogram.vue
@@ -18,8 +18,7 @@ import SpectrogramViewer from "@components/SpectrogramViewer.vue";
 import { SpectroInfo } from "@components/geoJS/geoJSUtils";
 import ThumbnailViewer from "@components/ThumbnailViewer.vue";
 import useState from "@use/useState";
-import ColorPickerMenu from "@components/ColorPickerMenu.vue";
-import ColorSchemeSelect from "@components/ColorSchemeSelect.vue";
+import ColorSchemeDialog from "@components/ColorSchemeDialog.vue";
 import TransparencyFilterControl from "@/components/TransparencyFilterControl.vue";
 import RecordingInfoDialog from "@components/RecordingInfoDialog.vue";
 import RecordingAnnotations from "@components/RecordingAnnotations.vue";
@@ -33,8 +32,7 @@ export default defineComponent({
     ThumbnailViewer,
     RecordingInfoDialog,
     RecordingAnnotations,
-    ColorPickerMenu,
-    ColorSchemeSelect,
+    ColorSchemeDialog,
     TransparencyFilterControl
   },
   props: {
@@ -53,9 +51,6 @@ export default defineComponent({
       toggleLayerVisibility,
       layerVisibility,
       colorScale,
-      colorSchemes,
-      colorScheme,
-      backgroundColor,
       selectedId,
       selectedType,
       scaledVals,
@@ -82,7 +77,6 @@ export default defineComponent({
     const loadedImage = ref(false);
     const allImagesLoaded: Ref<boolean[]> = ref([]);
     const compressed =  ref(configuration.value.spectrogram_view === 'compressed');
-    const colorpickerMenu = ref(false);
     const errorMessage: Ref<string | null> = ref(null);
     const additionalErrors: Ref<string[]> = ref([]);
 
@@ -158,9 +152,6 @@ export default defineComponent({
     );
     onMounted(() => {
       loadData();
-      colorScheme.value = colorSchemes.find((scheme) => scheme.value === configuration.value.default_color_scheme) || colorSchemes[0];
-      backgroundColor.value = configuration.value.default_spectrogram_background_color || 'rgb(0, 0, 0)';
-
     });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const parentGeoViewerRef: Ref<any> = ref(null);
@@ -227,11 +218,6 @@ export default defineComponent({
       toggleDrawingBoundingBox,
       fixedAxes,
       toggleFixedAxes,
-      // Color Scheme
-      colorSchemes,
-      colorScheme,
-      backgroundColor,
-      colorpickerMenu,
       // Other user selection
       selectedUsers,
       colorScale,
@@ -290,7 +276,7 @@ export default defineComponent({
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
-                  size="32"
+                  size="40"
                   class="ml-2"
                   @click="recordingMap = true"
                 >
@@ -316,33 +302,33 @@ export default defineComponent({
             >
               <div>
                 <b>xScale:</b>
-                <span v-if="timeRef >= 0">{{ scaledVals.x.toFixed(2) }}x</span>
+                <span>{{ scaledVals.x.toFixed(2) }}x</span>
               </div>
               <div>
                 <b>yScale:</b>
-                <span v-if="freqRef >= 0">{{ scaledVals.y.toFixed(2) }}x</span>
+                <span>{{ scaledVals.y.toFixed(2) }}x</span>
               </div>
             </v-col>
-            <v-spacer />
-            <v-tooltip>
+
+            <v-tooltip bottom>
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
-                  size="35"
-                  class="mr-5 mt-5"
-                  :color="fixedAxes ? 'blue': ''"
-                  @click="toggleFixedAxes"
+                  size="40"
+                  :color="compressed ? 'blue' : ''"
+                  @click="compressed = !compressed"
                 >
-                  mdi-axis-lock
+                  mdi-calendar-collapse-horizontal
                 </v-icon>
               </template>
-              Toggle between locked and floating axes
+              <span> Toggle Compressed View</span>
             </v-tooltip>
+            <v-spacer />
             <v-tooltip>
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
-                  size="35"
+                  size="25"
                   class="mr-5 mt-5"
                   :color="drawingBoundingBox ? 'blue' : ''"
                   @click="toggleDrawingBoundingBox"
@@ -350,13 +336,13 @@ export default defineComponent({
                   mdi-border-radius
                 </v-icon>
               </template>
-              <span>Draw bounding boxes to measure pulses</span>
+              <span>Draw a bound box to measure pulses</span>
             </v-tooltip>
             <v-tooltip>
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
-                  size="35"
+                  size="25"
                   class="mr-5 mt-5"
                   :color="measuring ? 'blue' : ''"
                   @click="toggleMeasureMode"
@@ -427,7 +413,7 @@ export default defineComponent({
                 <v-btn
                   v-bind="subProps"
                   size="35"
-                  class="mr-5 mt-5"
+                  class="mr-3 mt-5"
                   :color="layerVisibility.includes('freq') ? 'blue' : ''"
                   @click="toggleLayerVisibility('freq')"
                 >
@@ -436,34 +422,6 @@ export default defineComponent({
               </template>
               <span> Turn Time Label 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="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-tooltip
               v-if="!compressed"
               bottom
@@ -472,7 +430,7 @@ export default defineComponent({
                 <v-icon
                   v-bind="subProps"
                   size="35"
-                  class="mr-5 mt-5"
+                  class="mr-3 mt-5"
                   :color="viewCompressedOverlay ? 'blue' : ''"
                   @click="toggleCompressedOverlay()"
                 >
@@ -481,21 +439,56 @@ export default defineComponent({
               </template>
               <span> Highlight Compressed Areas</span>
             </v-tooltip>
-            <div class="color-scheme-flex">
-              <color-scheme-select
-                v-model="colorScheme"
-                label="Color Scheme"
-                :color-schemes="colorSchemes"
-                class="pt-3"
-              />
-              <color-picker-menu
-                v-model="backgroundColor"
-                tooltip-text="Spectrogram background color"
-              />
-            </div>
-            <div class="mt-4 mr-3">
+            <div class="mr-1 mt-5">
               <transparency-filter-control />
             </div>
+            <v-menu>
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  icon
+                  size="25"
+                  class="mr-5 mt-5"
+                  variant="text"
+                >
+                  <v-icon>
+                    mdi-cog
+                  </v-icon>
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-subheader>Settings</v-list-subheader>
+                <v-list-item @click="toggleFixedAxes">
+                  <v-list-item-title>
+                    <v-icon
+                      :color="fixedAxes ? 'blue' : ''"
+                    >
+                      {{ fixedAxes ? 'mdi-axis-lock' : 'mdi-axis' }}
+                    </v-icon>
+                    <span>
+                      Toggle Axes Type
+                    </span>
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="gridEnabled = !gridEnabled">
+                  <v-list-item-title>
+                    <v-icon
+                      :color="gridEnabled ? 'blue' : ''"
+                    >
+                      {{ gridEnabled ? 'mdi-grid' : 'mdi-grid-off' }}
+                    </v-icon>
+                    <span>
+                      Toggle Grid
+                    </span>
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item>
+                  <v-list-item-title>
+                    <ColorSchemeDialog display-mode="menu" />
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </v-row>
         </v-container>
       </v-toolbar>
@@ -524,31 +517,37 @@ export default defineComponent({
       <v-card>
         <v-card-title>
           <v-row dense>
-            <v-spacer />
-            <v-tooltip
-              bottom
-            >
-              <template #activator="{ props: subProps }">
-                <v-btn
-                  v-bind="subProps"
-                  :variant="sideTab === 'annotations' ? 'flat' : 'outlined'"
-                  :color="sideTab === 'annotations' ? 'primary' : ''"
-                  class="mx-2"
-                  size="small"
-                  @click="sideTab = 'annotations'"
-                >
-                  Annotations
-                </v-btn>
-              </template>
-              <span>
-                View Annotations in sideTab
-              </span>
-            </v-tooltip>
-            <v-spacer />
+            <v-col cols="2">
+              <v-spacer />
+            </v-col>
+            <v-col cols="4">
+              <v-tooltip bottom>
+                <template #activator="{ props: subProps }">
+                  <v-btn
+                    v-bind="subProps"
+                    :variant="sideTab === 'annotations' ? 'flat' : 'outlined'"
+                    :color="sideTab === 'annotations' ? 'primary' : ''"
+                    class="mx-2"
+                    size="small"
+                    @click="sideTab = 'annotations'"
+                  >
+                    Annotations
+                  </v-btn>
+                </template>
+                <span>
+                  View Annotations in sideTab
+                </span>
+              </v-tooltip>
+            </v-col>
+            <v-col>
+              <v-spacer />
+            </v-col>
           </v-row>
         </v-card-title>
         <v-card-text class="pa-0">
-          <div v-if="sideTab === 'annotations' && speciesList.length">
+          <div
+            v-if="sideTab === 'annotations' && speciesList.length"
+          >
             <RecordingAnnotations
               :species="speciesList"
               :recording-id="parseInt(id)"
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 991f8dd5..80300575 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -449,7 +449,7 @@ export default defineComponent({
               <template #activator="{ props: subProps }">
                 <v-icon
                   v-bind="subProps"
-                  size="32"
+                  size="40"
                   class="ml-2"
                   @click="recordingMap = true"
                 >
@@ -484,15 +484,29 @@ export default defineComponent({
             </v-col>
 
             <v-col
+              v-if="annotationState !== '' && annotationState !== 'disabled'"
               cols="1"
               class="px-0"
               style="font-size: 20px"
             >
-              <div v-if="annotationState !== '' && annotationState !== 'disabled'">
+              <div>
                 <b>Mode:</b>
                 <span> {{ annotationState }}</span>
               </div>
             </v-col>
+            <v-tooltip bottom>
+              <template #activator="{ props: subProps }">
+                <v-icon
+                  v-bind="subProps"
+                  size="40"
+                  :color="compressed ? 'blue' : ''"
+                  @click="compressed = !compressed"
+                >
+                  mdi-calendar-collapse-horizontal
+                </v-icon>
+              </template>
+              <span> Toggle Compressed View</span>
+            </v-tooltip>
             <v-spacer />
             <v-progress-circular
               v-if="loading"
@@ -509,20 +523,6 @@ export default defineComponent({
                 :user-emails="Object.keys(otherUserAnnotations)"
               />
             </div>
-            <v-tooltip>
-              <template #activator="{ props: subProps }">
-                <v-icon
-                  v-bind="subProps"
-                  size="25"
-                  class="mr-5 mt-5"
-                  :color="fixedAxes ? 'blue': ''"
-                  @click="toggleFixedAxes"
-                >
-                  mdi-axis-lock
-                </v-icon>
-              </template>
-              Toggle between locked and floating axes
-            </v-tooltip>
             <v-tooltip>
               <template #activator="{ props: subProps }">
                 <v-badge
@@ -628,34 +628,6 @@ export default defineComponent({
               </template>
               <span> Turn Time Label On/Off</span>
             </v-tooltip>
-            <v-tooltip bottom>
-              <template #activator="{ props: subProps }">
-                <v-icon
-                  v-bind="subProps"
-                  size="25"
-                  class="mr-3 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="30"
-                  class="mr-3 mt-5"
-                  :color="compressed ? 'blue' : ''"
-                  @click="compressed = !compressed"
-                >
-                  mdi-calendar-collapse-horizontal
-                </v-icon>
-              </template>
-              <span> Toggle Compressed View</span>
-            </v-tooltip>
             <v-tooltip
               v-if="!compressed"
               bottom
@@ -679,9 +651,6 @@ export default defineComponent({
                 :compressed="compressed"
               />
             </div>
-            <div class="mr-1 mt-5">
-              <color-scheme-dialog />
-            </div>
             <div class="mr-1 mt-5">
               <spectrogram-image-content-menu
                 :compressed="compressed"
@@ -691,6 +660,53 @@ export default defineComponent({
             <div class="mr-1 mt-5">
               <transparency-filter-control />
             </div>
+            <v-menu>
+              <template #activator="{ props: subProps }">
+                <v-btn
+                  v-bind="subProps"
+                  icon
+                  size="25"
+                  class="mr-5 mt-5"
+                  variant="text"
+                >                  
+                  <v-icon>
+                    mdi-cog
+                  </v-icon>
+                </v-btn>
+              </template>
+              <v-list>
+                <v-list-subheader>Settings</v-list-subheader>
+                <v-list-item @click="toggleFixedAxes">
+                  <v-list-item-title>
+                    <v-icon
+                      :color="fixedAxes ? 'blue' : ''"
+                    >
+                      {{ fixedAxes ? 'mdi-axis-lock' : 'mdi-axis' }}
+                    </v-icon>
+                    <span>
+                      Toggle Axes Type
+                    </span>
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="gridEnabled = !gridEnabled">
+                  <v-list-item-title>
+                    <v-icon
+                      :color="gridEnabled ? 'blue' : ''"
+                    >
+                      {{ gridEnabled ? 'mdi-grid' : 'mdi-grid-off' }}
+                    </v-icon>
+                    <span>
+                      Toggle Grid
+                    </span>
+                  </v-list-item-title>
+                </v-list-item>
+                <v-list-item @click="colorpickerMenu = !colorpickerMenu">
+                  <v-list-item-title>
+                    <color-scheme-dialog display-mode="menu" />
+                  </v-list-item-title>
+                </v-list-item>
+              </v-list>
+            </v-menu>
           </v-row>
         </v-container>
       </v-toolbar>

From 7ab45265a078ff5e08dd1b497adcd04ac2d0d54b Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 13:43:14 -0400
Subject: [PATCH 3/4] default contour and metadata settings

---
 .../SpectrogramImageContentMenu.vue           | 142 +-----------------
 client/src/use/usePulseMetadata.ts            |   3 +-
 client/src/use/useState.ts                    |   3 +-
 client/src/views/Spectrogram.vue              |  13 +-
 4 files changed, 17 insertions(+), 144 deletions(-)

diff --git a/client/src/components/SpectrogramImageContentMenu.vue b/client/src/components/SpectrogramImageContentMenu.vue
index 8e07b557..84418476 100644
--- a/client/src/components/SpectrogramImageContentMenu.vue
+++ b/client/src/components/SpectrogramImageContentMenu.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import useState from '@use/useState';
 
 defineProps<{
@@ -8,68 +8,14 @@ defineProps<{
 }>();
 
 const {
-  contoursEnabled,
-  imageOpacity,
-  contourOpacity,
-  contoursLoading,
   viewMaskOverlay,
   maskOverlayOpacity,
-  setContoursEnabled,
 } = useState();
 
 const hover = ref(false);
 
-// When unchecked via checkbox we save the value to restore on check.
-// When opacity is slid to 0 we clear these so that checking restores to 1.0.
-const lastImageOpacity = ref<number | undefined>(undefined);
-const lastContourOpacity = ref<number | undefined>(undefined);
-const uncheckingImage = ref(false);
-const uncheckingContour = ref(false);
-
-watch(imageOpacity, (newVal) => {
-  if (newVal === 0 && !uncheckingImage.value) {
-    lastImageOpacity.value = undefined;
-  }
-});
-watch(contourOpacity, (newVal) => {
-  if (newVal === 0 && !uncheckingContour.value) {
-    lastContourOpacity.value = undefined;
-  }
-});
-
-function onImageVisibilityChange(visible: boolean | null) {
-  if (visible) {
-    imageOpacity.value = lastImageOpacity.value ?? 1.0;
-  } else {
-    lastImageOpacity.value = imageOpacity.value;
-    imageOpacity.value = 0;
-    uncheckingImage.value = false;
-  }
-}
-
-function onContourVisibilityChange(visible: boolean | null) {
-  if (visible) {
-    contourOpacity.value = lastContourOpacity.value ?? 1.0;
-  } else {
-    lastContourOpacity.value = contourOpacity.value;
-    contourOpacity.value = 0;
-    uncheckingContour.value = true;
-  }
-}
-
-// Mask and contours are mutually exclusive
 function onMaskOverlayChange(checked: boolean) {
   viewMaskOverlay.value = checked;
-  if (checked) {
-    setContoursEnabled(false);
-  }
-}
-
-function onContoursEnabledChange(checked: boolean) {
-  setContoursEnabled(checked);
-  if (checked) {
-    viewMaskOverlay.value = false;
-  }
 }
 </script>
 
@@ -89,34 +35,25 @@ function onContoursEnabledChange(checked: boolean) {
     >
       <template #activator="{ props }">
         <v-icon
-          v-if="!contoursLoading"
           v-bind="props"
           size="25"
-          :color="viewMaskOverlay || contoursEnabled ? 'blue' : ''"
+          :color="viewMaskOverlay ? 'blue' : ''"
         >
           mdi-vector-curve
         </v-icon>
-        <v-progress-circular
-          v-else
-          indeterminate
-          size="25"
-          color="primary"
-        />
       </template>
       <v-card
         min-width="300"
         class="pa-3"
       >
         <v-card-title class="text-subtitle-1">
-          Overlay & Contour Options
+          Mask Overlay Options
         </v-card-title>
         <v-card-text>
-          <!-- Show mask OR contours (mutually exclusive) -->
           <template v-if="hasMaskUrls">
             <div class="text-caption mb-2 d-flex align-center">
               <v-checkbox
                 :model-value="viewMaskOverlay"
-                :disabled="contoursEnabled"
                 hide-details
                 density="compact"
                 class="mr-1 mt-0 flex-shrink-0"
@@ -139,79 +76,6 @@ function onContoursEnabledChange(checked: boolean) {
               />
             </template>
           </template>
-
-          <v-divider
-            v-if="hasMaskUrls"
-            class="my-2"
-          />
-
-          <!-- Show contours (with performance warning icon) -->
-          <div class="text-caption mb-2 d-flex align-center">
-            <v-checkbox
-              :model-value="contoursEnabled"
-              :disabled="viewMaskOverlay"
-              hide-details
-              density="compact"
-              class="mr-1 mt-0 flex-shrink-0"
-              label="Show contours"
-              @update:model-value="onContoursEnabledChange($event === true)"
-            />
-            <v-tooltip location="top">
-              <template #activator="{ props: tooltipProps }">
-                <v-icon
-                  v-bind="tooltipProps"
-                  size="small"
-                  color="warning"
-                  class="ml-1"
-                >
-                  mdi-alert
-                </v-icon>
-              </template>
-              <span>Contours may not be performant on large recordings.</span>
-            </v-tooltip>
-          </div>
-
-          <!-- Image & contour opacity (only when contours enabled) -->
-          <template v-if="contoursEnabled">
-            <div class="text-caption mb-2 d-flex align-center">
-              <v-checkbox
-                :model-value="imageOpacity > 0"
-                hide-details
-                density="compact"
-                class="mr-1 mt-0 flex-shrink-0"
-                @update:model-value="onImageVisibilityChange"
-              />
-              Image opacity {{ (imageOpacity * 100).toFixed(2) }}%
-            </div>
-            <v-slider
-              v-model="imageOpacity"
-              :min="0"
-              :max="1"
-              :step="0.05"
-              hide-details
-              density="compact"
-              class="mb-2"
-            />
-            <div class="text-caption mb-2 d-flex align-center">
-              <v-checkbox
-                :model-value="contourOpacity > 0"
-                hide-details
-                density="compact"
-                class="mr-1 mt-0 flex-shrink-0"
-                @update:model-value="onContourVisibilityChange"
-              />
-              Contour opacity {{ (contourOpacity * 100).toFixed(2) }}%
-            </div>
-            <v-slider
-              v-model="contourOpacity"
-              :min="0"
-              :max="1"
-              :step="0.05"
-              hide-details
-              density="compact"
-              class="mb-3"
-            />
-          </template>
         </v-card-text>
       </v-card>
     </v-menu>
diff --git a/client/src/use/usePulseMetadata.ts b/client/src/use/usePulseMetadata.ts
index 3538d024..50807dd0 100644
--- a/client/src/use/usePulseMetadata.ts
+++ b/client/src/use/usePulseMetadata.ts
@@ -61,7 +61,8 @@ function getInitialLabelsMode(): PulseMetadataLabelsMode {
 
 const pulseMetadataList: Ref<PulseMetadata[]> = ref([]);
 const pulseMetadataLoading = ref(false);
-const viewPulseMetadataLayer = ref(stored.viewPulseMetadataLayer ?? false);
+// Default to showing pulse metadata unless user explicitly turned it off.
+const viewPulseMetadataLayer = ref(stored.viewPulseMetadataLayer ?? true);
 
 async function loadPulseMetadata(recordingId: number) {
   pulseMetadataLoading.value = true;
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 45425c00..7e51872e 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -93,7 +93,8 @@ const contoursEnabled = ref(false);
 const imageOpacity = ref(1.0);
 const contourOpacity = ref(1.0);
 const contoursLoading = ref(false);
-const viewMaskOverlay = ref(false);
+// Default mask overlay to visible at 50% opacity.
+const viewMaskOverlay = ref(true);
 const maskOverlayOpacity = ref(0.50);
 const setContoursEnabled = (value: boolean) => {
   contoursEnabled.value = value;
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 80300575..cdec5298 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -86,7 +86,6 @@ export default defineComponent({
       contoursEnabled,
       clearContours,
       currentRecordingId,
-      viewMaskOverlay,
       filterTags,
       sharedFilterTags,
       spectrogramFilename,
@@ -94,6 +93,8 @@ export default defineComponent({
     const {
       clearPulseMetadata,
       viewPulseMetadataLayer,
+      loadPulseMetadata,
+      pulseMetadataList,
     } = usePulseMetadata();
     const nextUnsubmittedId = ref<number | null>(null);
     const previousUnsubmittedId = ref<number | null>(null);
@@ -148,7 +149,6 @@ export default defineComponent({
     const loading = ref(false);
     const spectrogramData: Ref<Spectrogram | null> = ref(null);
     const loadData = async () => {
-      viewMaskOverlay.value = false;
       const tempViewPulseMetadataLayer = viewPulseMetadataLayer.value;
       viewPulseMetadataLayer.value = false;
       contoursEnabled.value = false;
@@ -184,7 +184,6 @@ export default defineComponent({
         if (tempViewPulseMetadataLayer) {
           viewPulseMetadataLayer.value = true;
         }
-
       } else {
         console.error("No URL found for the spectrogram");
       }
@@ -242,6 +241,14 @@ export default defineComponent({
         nextUnsubmittedId.value = null;
         previousUnsubmittedId.value = null;
       }
+      // Automatically load pulse metadata when the layer is enabled and data has not yet been fetched.
+      if (
+        viewPulseMetadataLayer.value &&
+        currentRecordingId.value != null &&
+        pulseMetadataList.value.length === 0
+      ) {
+        await loadPulseMetadata(currentRecordingId.value);
+      }
       loading.value = false;
     };
     const setSelection = (annotationId: number) => {

From 233d68a15cf97b276d6a264749b98bbb38f769f3 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Fri, 13 Mar 2026 14:10:31 -0400
Subject: [PATCH 4/4] fix compressed toggling issues

---
 client/src/components/geoJS/geoJSUtils.ts | 6 ++++++
 client/src/views/Spectrogram.vue          | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index a48be70b..9f236785 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -74,6 +74,9 @@ const useGeoJS = () => {
     opacity: number
   ) => {
     if (images.length === 0) return;
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return;
+    }
     layer.node().css("opacity", String(opacity));
     while (features.length > images.length) {
       const feature = features.pop();
@@ -81,6 +84,9 @@ const useGeoJS = () => {
     }
     let previousWidth = 0;
     const totalBaseWidth = images.reduce((sum, img) => sum + img.naturalWidth, 0);
+    if (!Number.isFinite(totalBaseWidth) || totalBaseWidth <= 0) {
+      return;
+    }
     images.forEach((image, index) => {
       const scale = width / totalBaseWidth;
       const currentWidth = image.width * scale;
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index cdec5298..565a2adf 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -305,6 +305,9 @@ export default defineComponent({
       freqRef.value = freq;
     };
     watch(compressed, () => {
+      // Reset zoom and compressed overlay state when toggling views
+      scaledVals.value = { x: 1, y: 1 };
+      viewCompressedOverlay.value = false;
       loadData();
       if (drawingBoundingBox.value) {
         toggleDrawingBoundingBox();