adding legend capabilities

Kitware · Jan 25, 2024 · baf0916 · baf0916
1 parent b506734
commit baf0916
Show file tree

Hide file tree

Showing 6 changed files with 359 additions and 2 deletions.
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
@@ -29,6 +29,10 @@ export default defineComponent({
     recordingId: {
       type: String as PropType<string | null>,
       required: true,
+    },
+    grid: {
+      type: Boolean,
+      default: true,
     }
   },
   emits: ['update:annotation', 'create:annotation', 'selected', 'geoViewerRef'],
@@ -63,6 +67,7 @@ export default defineComponent({
     };
 
 
+
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
@@ -87,6 +92,7 @@ export default defineComponent({
       :spectro-info="spectroInfo"
       :annotations="annotations"
       :selected-id="selectedId"
+      :grid="grid"
       @selected="$emit('selected',$event)"
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"

diff --git 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
@@ -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: true,
+    }
   },
   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
@@ -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);