add color scheme to nabat, adjust size, alignment (#192)

Author: BryonLewis

client/src/components/ColorPickerMenu.vue

@@ -29,7 +29,7 @@ function updateColor(colorVal: string) {
           <v-btn
             v-bind="{ ...subProps, ...tooltipProps }"
             :style="{ backgroundColor: color }"
-            class="color-square mx-2"
+            class="color-square mx-2 mt-4"
           />
         </template>
       </v-tooltip>

client/src/components/ColorSchemeSelect.vue

@@ -10,6 +10,10 @@ defineProps({
       type: String,
       default: 'Color Scheme',
   },
+  width: {
+    type: Number,
+    default: 150,
+  },
   returnObject: {
     type: Boolean,
     default: true,
@@ -30,6 +34,7 @@ const colorScheme = defineModel();
     density="compact"
     :return-object="returnObject"
     hide-details
+    :style="`max-width: ${maxWidth}px; min-width: ${maxWidth}px`"
   >
     <template #item="{ item, props }">
       <div
@@ -49,7 +54,7 @@ const colorScheme = defineModel();
           no-gutters
           align="center"
           justify="center"
-          class="pb-2"
+          class="pb-2 px-2"
         >
           <div
             v-for="n in 11"

client/src/views/Admin.vue

@@ -148,24 +148,20 @@ export default defineComponent({
             </v-col>
           </v-row>
           <v-row>
-            <v-col cols="3">
+            <div class="color-scheme-flex px-4">
               <color-scheme-select
                 v-model="settings.defaultColorScheme"
                 :color-schemes="colorSchemes"
+                :width="300"
                 label="Default Color Scheme"
+                class="pt-3"
                 :return-object="false"
               />
-            </v-col>
-          </v-row>
-          <v-row>
-            <v-label
-              text="Default Background Color"
-              class="px-2"
-            />
-            <ColorPickerMenu
-              v-model="settings.defaultBackgroundColor"
-              tooltip-text="Default background color for spectrograms"
-            />
+              <ColorPickerMenu
+                v-model="settings.defaultBackgroundColor"
+                tooltip-text="Default background color for spectrograms"
+              />
+            </div>
           </v-row>
         </v-card-text>
         <v-card-actions>
@@ -192,4 +188,9 @@ export default defineComponent({
 .v-container {
   margin-top: 20px;
 }
+
+.color-scheme-flex {
+  display: flex;
+  align-items: center;
+}
 </style>

client/src/views/NABat/NABatSpectrogram.vue

@@ -18,6 +18,8 @@ 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 RecordingInfoDialog from "@components/RecordingInfoDialog.vue";
 import RecordingAnnotations from "@components/RecordingAnnotations.vue";
 import { usePrompt } from '@use/prompt-service';
@@ -30,6 +32,8 @@ export default defineComponent({
     ThumbnailViewer,
     RecordingInfoDialog,
     RecordingAnnotations,
+    ColorPickerMenu,
+    ColorSchemeSelect,
   },
   props: {
     id: {
@@ -47,6 +51,9 @@ export default defineComponent({
       toggleLayerVisibility,
       layerVisibility,
       colorScale,
+      colorSchemes,
+      colorScheme,
+      backgroundColor,
       selectedId,
       selectedType,
       scaledVals,
@@ -66,6 +73,7 @@ export default defineComponent({
     const speciesList: Ref<Species[]> = ref([]);
     const loadedImage = ref(false);
     const compressed =  ref(configuration.value.spectrogram_view === 'compressed');
+    const colorpickerMenu = ref(false);
     const errorMessage: Ref<string | null> = ref(null);
     const additionalErrors: Ref<string[]> = ref([]);
 
@@ -119,7 +127,12 @@ export default defineComponent({
         loadData();
       }
     );
-    onMounted(() => loadData());
+    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);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -175,6 +188,11 @@ export default defineComponent({
       toggleCompressedOverlay,
       viewCompressedOverlay,
       sideTab,
+      // Color Scheme
+      colorSchemes,
+      colorScheme,
+      backgroundColor,
+      colorpickerMenu,
       // Other user selection
       selectedUsers,
       colorScale,
@@ -357,6 +375,18 @@ 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>
           </v-row>
         </v-container>
       </v-toolbar>
@@ -443,4 +473,8 @@ export default defineComponent({
 .spectro-main {
   height: calc(100vh - 21vh - 64px - 72px);
 }
+.color-scheme-flex {
+  display:flex;
+  align-items: center;
+}
 </style>

client/src/views/Spectrogram.vue

@@ -486,15 +486,18 @@ export default defineComponent({
               </template>
               <span> Highlight Compressed Areas</span>
             </v-tooltip>
-            <color-scheme-select
-              v-model="colorScheme"
-              label="Color Scheme"
-              :color-schemes="colorSchemes"
-            />
-            <color-picker-menu
-              v-model="backgroundColor"
-              tooltip-text="Spectrogram background color"
-            />
+            <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>
           </v-row>
         </v-container>
       </v-toolbar>
@@ -598,4 +601,8 @@ export default defineComponent({
   min-width: 32px;
   border-radius: 4px;
 }
+.color-scheme-flex {
+  display:flex;
+  align-items: center;
+}
 </style>