From 22717a914b830410881ecc2a325ece77478c1876 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <61746913+BryonLewis@users.noreply.github.com>
Date: Tue, 30 Jan 2024 10:47:35 -0500
Subject: [PATCH] Editor Improvements (#26)

* adding legend capabilities

* add hover state and improve legend

* toggle icon bar

* defaulting grid to off

* editing improvements

* merge fix
---
 client/src/components/AnnotationList.vue      |  47 ++++--
 client/src/components/SpectrogramViewer.vue   |  83 ++++++++++-
 client/src/components/geoJS/LayerManager.vue  |  24 +++-
 client/src/components/geoJS/geoJSUtils.ts     |  29 +++-
 .../geoJS/layers/editAnnotationLayer.ts       |  12 +-
 client/src/views/Spectrogram.vue              | 134 +++++++++++++-----
 6 files changed, 268 insertions(+), 61 deletions(-)

diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
index 47dbdf8..37f10e9 100644
--- a/client/src/components/AnnotationList.vue
+++ b/client/src/components/AnnotationList.vue
@@ -3,6 +3,7 @@ import { defineComponent, PropType } from "vue";
 import { SpectroInfo } from './geoJS/geoJSUtils';
 import { SpectrogramAnnotation } from "../api/api";
 import useState from "../use/useState";
+import { watch } from "vue";
 
 export default defineComponent({
   name: "AnnotationList",
@@ -20,11 +21,28 @@ export default defineComponent({
     selectedId: {
         type: Number as PropType<number | null>,
         default: null,
+    },
+    mode: {
+      type: String as PropType<'creation' | 'editing' | 'disabled'>,
+      required: true,
     }
   },
   emits: ['select'],
-  setup() {
+  setup(props) {
     const { annotationState, setAnnotationState } = useState();
+    const scrollToId = (id: number) => {
+    const el = document.getElementById(`annotation-${id}`);
+    if (el) {
+      el.scrollIntoView({block: 'end', behavior: 'smooth'});
+    }
+  };
+  watch(() => props.selectedId, () => {
+    if (props.selectedId !== null) {
+      scrollToId(props.selectedId);
+    }
+  });
+  
+
     return {
         annotationState,
         setAnnotationState,
@@ -40,7 +58,7 @@ export default defineComponent({
         Annotations
         <v-spacer />
         <v-btn
-          :disabled="annotationState === 'creating'"
+          :disabled="mode === 'creation'"
           @click="annotationState = 'creating'"
         >
           Add<v-icon>mdi-plus</v-icon>
@@ -48,24 +66,26 @@ export default defineComponent({
       </v-row>
     </v-card-title>
     <v-list>
+      <v-list-item>
+        <v-row dense>
+          <v-col><b>Time</b></v-col>
+          <v-col><b>Frequency</b></v-col>
+        </v-row>
+      </v-list-item>
       <v-list-item
         v-for="annotation in annotations"
+        :id="`annotation-${annotation.id}`"
         :key="annotation.id"
         :class="{selected: annotation.id===selectedId}"
-        class="d-flex flex-column align-start"
+        class="annotation-item"
         @click="$emit('select', annotation.id)"
       >
         <v-row>
-          <v-col
-            class="annotation-id"
-          >
-            {{ annotation.id }}
-          </v-col>
           <v-col class="annotation-time">
-            <span>{{ annotation.start_time }}ms to {{ annotation.end_time }}ms </span>
+            <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
           </v-col>
           <v-col class="annotation-freq">
-            <span>{{ annotation.low_freq }}hz to {{ annotation.high_freq }}hz </span>
+            <span>{{ (annotation.low_freq/1000).toFixed(1) }}-{{ (annotation.high_freq/1000).toFixed() }}Khz </span>
           </v-col>
         </v-row>
         <v-row
@@ -97,10 +117,13 @@ export default defineComponent({
     text-decoration: underline;
 }
 .annotation-time {
-    font-size: 0.7em;
+    font-size: 1em;
 }
 .annotation-freq {
-    font-size: 0.7em;
+    font-size: 1em;
+}
+.annotation-item {
+  border: 1px solid gray;
 }
 .species-name {
     font-weight: bold;
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index c16eb44..6e9b22c 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { defineComponent, PropType, ref, Ref, watch } from "vue";
-import { SpectroInfo, useGeoJS } from "./geoJS/geoJSUtils";
+import { SpectroInfo, spectroToCenter, useGeoJS } from "./geoJS/geoJSUtils";
 import { patchAnnotation, putAnnotation, SpectrogramAnnotation } from "../api/api";
 import LayerManager from "./geoJS/LayerManager.vue";
 import { GeoEvent } from "geojs";
@@ -37,11 +37,38 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ["update:annotation", "create:annotation", "selected", "geoViewerRef", "hoverData"],
+  emits: ["update:annotation", "create:annotation", "selected", "geoViewerRef", "hoverData", 'set-mode',],
   setup(props, { emit }) {
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized = ref(false);
+    const cursor = ref('');
+    const imageCursorRef: Ref<HTMLElement | undefined> = ref();
+    const setCursor = (newCursor: string) => {
+      cursor.value = newCursor;
+    };
+
+    const cursorHandler = {
+      handleMouseLeave() {
+        if (imageCursorRef.value) {
+          imageCursorRef.value.style.display = 'none';
+        }
+      },
+      handleMouseEnter() {
+        if (imageCursorRef.value) {
+          imageCursorRef.value.style.display = 'block';
+        }
+      },
+      handleMouseMove(evt: MouseEvent) {
+        const offsetX = evt.clientX + 10;
+        const offsetY = evt.clientY - 25;
+        window.requestAnimationFrame(() => {
+          if (imageCursorRef.value) {
+            imageCursorRef.value.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+          }
+        });
+      },
+    };
 
     const mouseMoveEvent = (e: GeoEvent) => {
       const { x, y } = e.geo;
@@ -108,6 +135,7 @@ export default defineComponent({
       }
     };
 
+    
     const createAnnotation = async (annotation: SpectrogramAnnotation) => {
       // We call the patch on the selected annotation
       if (props.recordingId !== null) {
@@ -115,13 +143,39 @@ export default defineComponent({
         emit("create:annotation", response.data.id);
       }
     };
+    let skipNextSelected = false;
+    watch(() => props.selectedId, () => {
+      if (skipNextSelected) {
+        skipNextSelected = false;
+        return;
+      }
+      const found = props.annotations.find((item) => item.id === props.selectedId);
+      if (found && props.spectroInfo) {
+        
+        const center = spectroToCenter(found, props.spectroInfo);
+        const x = center[0];
+        const y = center[1];
+        geoJS.getGeoViewer().value.center({x, y});
+      }
+    });
+
+
+    const clickSelected = (annotation: SpectrogramAnnotation) => {
+      skipNextSelected = true;
+      emit('selected', annotation);
+    };
 
     return {
       containerRef,
       geoViewerRef: geoJS.getGeoViewer(),
       initialized,
+      cursor,
+      clickSelected,
+      setCursor,
       updateAnnotation,
       createAnnotation,
+      cursorHandler,
+      imageCursorRef,
     };
   },
 });
@@ -133,6 +187,10 @@ export default defineComponent({
       id="spectro"
       ref="containerRef"
       class="playback-container"
+      :style="{cursor : cursor }"
+      @mousemove="cursorHandler.handleMouseMove"
+      @mouseleave="cursorHandler.handleMouseLeave"
+      @mouseover="cursorHandler.handleMouseEnter"
     />
     <layer-manager
       v-if="initialized"
@@ -141,10 +199,20 @@ export default defineComponent({
       :annotations="annotations"
       :selected-id="selectedId"
       :grid="grid"
-      @selected="$emit('selected', $event)"
+      @selected="clickSelected($event)"
       @update:annotation="updateAnnotation($event)"
       @create:annotation="createAnnotation($event)"
+      @set-cursor="setCursor($event)"
+      @set-mode="$emit('set-mode', $event)"
     />
+    <div
+      ref="imageCursorRef"
+      class="imageCursor"
+    >
+      <v-icon color="white">
+        {{ cursor }}
+      </v-icon>
+    </div>
   </div>
 </template>
 
@@ -184,4 +252,13 @@ export default defineComponent({
     cursor: inherit;
   }
 }
+.imageCursor {
+  z-index: 9999; //So it will be above the annotator layers
+  position: fixed;
+  backface-visibility: hidden;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
 </style>
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 34b79ee..a65a5ae 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, onMounted, PropType, Ref, ref, watch } from "vue";
+import { defineComponent, nextTick, onMounted, PropType, Ref, ref, watch } from "vue";
 import { SpectrogramAnnotation } from "../../api/api";
 import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
@@ -36,9 +36,9 @@ export default defineComponent({
       default: false,
     }
   },
-  emits: ['selected', 'update:annotation', 'create:annotation'],
+  emits: ['selected', 'update:annotation', 'create:annotation', 'set-cursor', 'set-mode'],
   setup(props, { emit }) {
-    const { annotationState } = useState();
+    const { annotationState, setAnnotationState } = useState();
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
     const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(props.annotations));
@@ -49,9 +49,17 @@ export default defineComponent({
     let legendLayer: LegendLayer;
     const displayError = ref(false);
     const errorMsg = ref('');
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
     const event = (type: string, data: any) => {
       // Will handle clicking, selecting and editing here
+      if (type === "update:mode") {
+        emit('set-mode', data.mode);
+        setAnnotationState(data.mode);
+      }
+      if (type === "update:cursor") {
+        emit('set-cursor', data.cursor);
+      }
       if (type === "annotation-cleared") {
         editing.value = false;
         selectedAnnotationId.value = null;
@@ -189,6 +197,16 @@ export default defineComponent({
       () => props.selectedId,
       () => {
         selectedAnnotationId.value = props.selectedId;
+        if (editAnnotationLayer && editAnnotationLayer.getMode() === 'editing' && props.selectedId === null) {
+          nextTick(() => {
+            if (editAnnotationLayer && editAnnotationLayer.getMode() === 'disabled' && props.selectedId === null) {
+              emit('set-mode', 'disabled');
+
+            }
+          });
+          editAnnotationLayer.disable();
+          return;
+        }
         triggerUpdate();
       }
     );
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index a38208d..3cb945f 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -118,12 +118,12 @@ const useGeoJS = () => {
     const { width: mapWidth } = geoViewer.value.camera().viewport;
 
     const bounds = !thumbnail.value
-      ? { 
-        left: -125, // Making sure the legend is on the screen
-        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);
@@ -270,6 +270,21 @@ function spectroToGeoJSon(
   };
 }
 
+function findPolygonCenter(polygon: GeoJSON.Polygon): number[] {
+  const coordinates = polygon.coordinates[0]; // Extract the exterior ring coordinates
+
+  // Calculate the average of longitude and latitude separately
+  const avgLng = coordinates.reduce((sum, point) => sum + point[0], 0) / coordinates.length;
+  const avgLat = coordinates.reduce((sum, point) => sum + point[1], 0) / coordinates.length;
+
+  return [avgLng, avgLat];
+}
+
+function spectroToCenter(annotation: SpectrogramAnnotation, spectroInfo: SpectroInfo) {
+  const geoJSON = spectroToGeoJSon(annotation, spectroInfo);
+  return findPolygonCenter(geoJSON);
+}
+
 /* beginning at bottom left, rectangle is defined clockwise */
 function geojsonToSpectro(
   geojson: GeoJSON.Feature<GeoJSON.Polygon>,
@@ -369,4 +384,4 @@ function reOrdergeoJSON(coords: GeoJSON.Position[]) {
   ];
 }
 
-export { spectroToGeoJSon, geojsonToSpectro, reOrdergeoJSON, useGeoJS };
+export { spectroToGeoJSon, geojsonToSpectro, reOrdergeoJSON, useGeoJS, spectroToCenter };
diff --git a/client/src/components/geoJS/layers/editAnnotationLayer.ts b/client/src/components/geoJS/layers/editAnnotationLayer.ts
index da6216f..6b20e02 100644
--- a/client/src/components/geoJS/layers/editAnnotationLayer.ts
+++ b/client/src/components/geoJS/layers/editAnnotationLayer.ts
@@ -272,8 +272,10 @@ export default class EditAnnotationLayer {
         this._mode = "editing";
         newLayerMode = "edit";
         this.event("update:cursor", { cursor: "default" });
+        this.event("update:mode", { mode: "editing" });
       } else if (typeMapper.has(mode)) {
         this._mode = "creation";
+        this.event("update:mode", { mode: "creation" });
         newLayerMode = typeMapper.get(mode) as string;
         this.event("update:cursor", { cursor: "crosshair" });
       } else {
@@ -281,6 +283,7 @@ export default class EditAnnotationLayer {
       }
       this.featureLayer.mode(newLayerMode, geom);
     } else {
+      this.event("update:mode", { mode: "disabled" });
       this.featureLayer.mode(null);
     }
   }
@@ -298,8 +301,9 @@ export default class EditAnnotationLayer {
   disable() {
     if (this.featureLayer) {
       this.skipNextExternalUpdate = false;
+      this.featureLayer.removeAllAnnotations(false, true);
       this.setMode(null);
-      this.featureLayer.removeAllAnnotations(false);
+      this.featureLayer.clear();
       this.shapeInProgress = null;
       if (this.selectedHandleIndex !== -1) {
         this.selectedHandleIndex = -1;
@@ -310,6 +314,7 @@ export default class EditAnnotationLayer {
         });
       }
       this.event("update:cursor", { cursor: "default" });
+      this.event("update:mode", { mode: "disabled" });
     }
   }
 
@@ -479,10 +484,11 @@ export default class EditAnnotationLayer {
    * The base style used to represent the annotation
    */
   createStyle(): LayerStyle<GeoJSON.Feature> {
+
     return {
       ...{
-        strokeColor: "black",
-        strokeWidth: 4.0,
+        strokeColor: 'black',
+        strokeWidth: 1.0,
         antialiasing: 0,
         stroke: true,
         uniformPolygon: true,
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 53a7516..f1685b0 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -1,12 +1,19 @@
 <script lang="ts">
-import { computed, defineComponent, onMounted, Ref, ref, } from 'vue';
-import { getSpecies, getAnnotations, getSpectrogram, Species, SpectrogramAnnotation, getSpectrogramCompressed } from '../api/api';
-import SpectrogramViewer from '../components/SpectrogramViewer.vue';
-import { SpectroInfo } from '../components/geoJS/geoJSUtils';
-import AnnotationList from '../components/AnnotationList.vue';
-import AnnotationEditor from '../components/AnnotationEditor.vue';
-import ThumbnailViewer from '../components/ThumbnailViewer.vue';
-import { watch } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, Ref, ref } from "vue";
+import {
+  getSpecies,
+  getAnnotations,
+  getSpectrogram,
+  Species,
+  SpectrogramAnnotation,
+  getSpectrogramCompressed,
+} from "../api/api";
+import SpectrogramViewer from "../components/SpectrogramViewer.vue";
+import { SpectroInfo } from "../components/geoJS/geoJSUtils";
+import AnnotationList from "../components/AnnotationList.vue";
+import AnnotationEditor from "../components/AnnotationEditor.vue";
+import ThumbnailViewer from "../components/ThumbnailViewer.vue";
+import { watch } from "vue";
 
 export default defineComponent({
   name: "Spectrogram",
@@ -31,34 +38,55 @@ export default defineComponent({
     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;
-        if (annotationId !== undefined) {
-          selectedId.value = annotationId;
+    const mode: Ref<"creation" | "editing" | "disabled"> = ref("disabled");
+    const getAnnotationsList = async (annotationId?: number) => {
+      const response = await getAnnotations(props.id);
+      annotations.value = response.data.sort((a, b) => a.start_time - b.start_time);
+      if (annotationId !== undefined) {
+        selectedId.value = annotationId;
+      }
+    };
+    const selectedIndex = computed(() => {
+      if (annotations.value && selectedId.value !== null) {
+        return annotations.value.findIndex((item) => item.id === selectedId.value);
+      }
+      return -1;
+    });
+    const selectNextIndex = (dir: -1 | 1) => {
+      if (annotations.value && annotations.value.length) {
+        const newIndex = selectedIndex.value + dir;
+        if (newIndex < 0) {
+          selectedId.value = annotations.value[annotations.value.length - 1].id;
+        } else if (newIndex > annotations.value.length - 1) {
+          selectedId.value = annotations.value[0].id;
+        } else {
+          selectedId.value = annotations.value[newIndex].id;
         }
-        
+      }
     };
+
     const loadData = async () => {
       loadedImage.value = false;
-      const response = compressed.value ? await getSpectrogramCompressed(props.id) : await getSpectrogram(props.id);
-      image.value.src = `data:image/png;base64,${response.data['base64_spectrogram']}`;
-      spectroInfo.value = response.data['spectroInfo'];
-      annotations.value = response.data['annotations'];
+      const response = compressed.value
+        ? await getSpectrogramCompressed(props.id)
+        : await getSpectrogram(props.id);
+      image.value.src = `data:image/png;base64,${response.data["base64_spectrogram"]}`;
+      spectroInfo.value = response.data["spectroInfo"];
+      annotations.value = response.data["annotations"]?.sort((a, b) => a.start_time - b.start_time);
       loadedImage.value = true;
       const speciesResponse = await getSpecies();
       speciesList.value = speciesResponse.data;
     };
     const setSelection = (annotationId: number) => {
-      selectedId.value= annotationId;
+      selectedId.value = annotationId;
     };
     const selectedAnnotation = computed(() => {
       if (selectedId.value !== null && annotations.value) {
         const found = annotations.value.findIndex((item) => item.id === selectedId.value);
-          if (found !== -1) {
-            return annotations.value[found];
-          }
+        if (found !== -1) {
+          return annotations.value[found];
         }
+      }
       return null;
     });
     onMounted(() => loadData());
@@ -67,7 +95,6 @@ export default defineComponent({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const setParentGeoViewer = (data: any) => {
       parentGeoViewerRef.value = data;
-
     };
 
     const timeRef = ref(0);
@@ -77,7 +104,25 @@ export default defineComponent({
       freqRef.value = freq;
     };
     watch(compressed, () => loadData());
-    return { 
+
+    const setMode = (newMode: "creation" | "editing" | "disabled") => {
+      mode.value = newMode;
+    };
+
+    const keyboardEvent = (e: KeyboardEvent) => {
+      if (e.key === "ArrowDown") {
+        selectNextIndex(1);
+      } else if (e.key === "ArrowUp") {
+        selectNextIndex(-1);
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("keydown", keyboardEvent);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("keydown", keyboardEvent);
+    });
+    return {
       compressed,
       loadedImage,
       image,
@@ -88,12 +133,14 @@ export default defineComponent({
       getAnnotationsList,
       setParentGeoViewer,
       setHoverData,
+      setMode,
       speciesList,
       selectedAnnotation,
       parentGeoViewerRef,
       gridEnabled,
       timeRef,
       freqRef,
+      mode,
     };
   },
 });
@@ -104,24 +151,31 @@ export default defineComponent({
     <v-col>
       <v-toolbar>
         <v-row>
-          <v-col>
+          <v-col cols="2">
             <div>
-              <b>Time:</b> 
-              <span v-if="timeRef >= 0 ">{{ timeRef.toFixed(0) }}ms</span>
+              <b>Time:</b>
+              <span v-if="timeRef >= 0">{{ timeRef.toFixed(0) }}ms</span>
             </div>
             <div>
-              <b>Frequency:</b> 
+              <b>Frequency:</b>
               <span v-if="freqRef >= 0">{{ freqRef.toFixed(2) }}KHz</span>
             </div>
           </v-col>
+          <v-col
+            v-if="mode !== 'disabled'"
+            cols="1"
+            style="font-size: 20px"
+          >
+            <b>Mode:</b>
+            <span> {{ mode }}</span>
+          </v-col>
           <v-spacer />
           <v-tooltip bottom>
-            <template #activator="{ props:subProps }">
+            <template #activator="{ props: subProps }">
               <v-icon
                 v-bind="subProps"
                 size="35"
                 class="mr-5 mt-5"
-
                 :color="gridEnabled ? 'blue' : ''"
                 @click="gridEnabled = !gridEnabled"
               >
@@ -131,7 +185,7 @@ export default defineComponent({
             <span> Turn Legend Grid On/Off</span>
           </v-tooltip>
           <v-tooltip bottom>
-            <template #activator="{ props:subProps }">
+            <template #activator="{ props: subProps }">
               <v-icon
                 v-bind="subProps"
                 size="35"
@@ -156,8 +210,10 @@ export default defineComponent({
         :grid="gridEnabled"
         @selected="setSelection($event)"
         @create:annotation="getAnnotationsList($event)"
+        @update:annotation="getAnnotationsList()"
         @geo-viewer-ref="setParentGeoViewer($event)"
         @hover-data="setHoverData($event)"
+        @set-mode="setMode($event)"
       />
       <thumbnail-viewer
         v-if="loadedImage && parentGeoViewerRef"
@@ -170,10 +226,12 @@ export default defineComponent({
         @selected="setSelection($event)"
       />
     </v-col>
-    <v-col style="max-width:300px">
+    <v-col style="max-width: 300px">
       <annotation-list
         :annotations="annotations"
         :selected-id="selectedId"
+        :mode="mode"
+        class="annotation-list"
         @select="selectedId = $event"
       />
       <annotation-editor
@@ -183,8 +241,18 @@ export default defineComponent({
         :annotation="selectedAnnotation"
         class="mt-4"
         @update:annotation="getAnnotationsList()"
-        @delete:annotation="getAnnotationsList()"
+        @delete:annotation="
+          getAnnotationsList();
+          selectedId = null;
+        "
       />
     </v-col>
   </v-row>
 </template>
+
+<style scoped>
+.annotation-list {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+</style>