client cleanup of minor issues

Kitware · Feb 16, 2024 · 963f3b9 · 963f3b9
1 parent 7bf39fb
commit 963f3b9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 28 deletions.
diff --git a/client/src/components/AnnotationList.vue b/client/src/components/AnnotationList.vue
@@ -79,12 +79,6 @@ export default defineComponent({
           </v-row>
 
           <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}`"
@@ -140,12 +134,6 @@ export default defineComponent({
           </v-row>
 
           <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 temporalAnnotations"
               :id="`annotation-${annotation.id}`"

diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
@@ -40,7 +40,7 @@ export default defineComponent({
     "hoverData",
   ],
   setup(props, { emit }) {
-    const { annotations, selectedId, selectedType, creationType } = useState();
+    const { annotations, temporalAnnotations, selectedId, selectedType, creationType } = useState();
     const containerRef: Ref<HTMLElement | undefined> = ref();
     const geoJS = useGeoJS();
     const initialized = ref(false);
@@ -166,10 +166,12 @@ export default defineComponent({
         if (skipNextSelected) {
           skipNextSelected = false;
           return;
+          
         }
-        const found = annotations.value.find((item) => item.id === selectedId.value);
+        const found = selectedType.value === 'pulse' ? annotations.value.find((item) => item.id === selectedId.value): temporalAnnotations.value.find((item) => item.id === selectedId.value);
         if (found && props.spectroInfo) {
-          const center = spectroToCenter(found, props.spectroInfo);
+
+          const center = spectroToCenter(found, props.spectroInfo, selectedType.value);
           const x = center[0];
           const y = center[1];
           const bounds = geoJS.getGeoViewer().value.bounds();

diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
@@ -83,7 +83,10 @@ export default defineComponent({
         editingAnnotation.value = null;
         selectedId.value = selectedAnnotationId.value;
         //emit("selected", selectedAnnotationId.value);
-        setSelectedId(selectedAnnotationId.value, 'sequence');
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'sequence');
+        }
+        setSelectedId(selectedAnnotationId.value);
         triggerUpdate();
       }
       if (type === "annotation-right-clicked") {
@@ -101,7 +104,10 @@ export default defineComponent({
           editingAnnotation.value = null;
           localTemporalAnnotations.value[foundIndex].editing = undefined;
         }
-        setSelectedId(selectedAnnotationId.value, 'sequence');
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'sequence');
+        }
+        setSelectedId(selectedAnnotationId.value);
         //emit("selected", selectedAnnotationId.value);
         triggerUpdate();
       }
@@ -126,7 +132,10 @@ export default defineComponent({
         const copy: SpectrogramAnnotation[] = cloneDeep(localAnnotations.value);
         copy.forEach((item) => (item.editing = undefined));
         localAnnotations.value = copy;
-        setSelectedId(selectedAnnotationId.value, 'pulse');
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'pulse');
+        }
+        setSelectedId(selectedAnnotationId.value);
         //emit("selected", selectedAnnotationId.value);
       }
       if (type === "annotation-clicked") {
@@ -146,7 +155,10 @@ export default defineComponent({
         editingAnnotation.value = null;
         selectedId.value = selectedAnnotationId.value;
         //emit("selected", selectedAnnotationId.value);
-        setSelectedId(selectedAnnotationId.value, 'pulse');
+        if (data.id !== null) {
+          setSelectedId(selectedAnnotationId.value, 'pulse');
+        }
+        setSelectedId(selectedAnnotationId.value);
         triggerUpdate();
       }
       if (type === "annotation-hover") {

diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
@@ -360,9 +360,16 @@ function findPolygonCenter(polygon: GeoJSON.Polygon): number[] {
   return [avgLng, avgLat];
 }
 
-function spectroToCenter(annotation: SpectrogramAnnotation, spectroInfo: SpectroInfo) {
-  const geoJSON = spectroToGeoJSon(annotation, spectroInfo);
-  return findPolygonCenter(geoJSON);
+function spectroToCenter(annotation: SpectrogramAnnotation | SpectrogramTemporalAnnotation, spectroInfo: SpectroInfo, type: 'sequence' | 'pulse') {
+  if (type === 'pulse') {
+    const geoJSON = spectroToGeoJSon(annotation as SpectrogramAnnotation, spectroInfo);
+    return findPolygonCenter(geoJSON);
+  }
+  if (type === 'sequence') {
+    const geoJSON = spectroTemporalToGeoJSon(annotation as SpectrogramTemporalAnnotation, spectroInfo);
+    return findPolygonCenter(geoJSON);
+  }
+  return [0,0];
 }
 
 /* beginning at bottom left, rectangle is defined clockwise */

diff --git a/client/src/components/geoJS/layers/speciesSequenceLayer.ts b/client/src/components/geoJS/layers/speciesSequenceLayer.ts
@@ -9,6 +9,7 @@ interface TextData {
   y: number;
   offsetY?: number;
   offsetX?: number;
+  textType: 'species' | 'type';
 }
 
 export default class SpeciesSequenceLayer {
@@ -70,6 +71,7 @@ export default class SpeciesSequenceLayer {
       }
       let textOffset = 0;
       const species = annotation.species;
+      const type = annotation.type;
       if (species) {
         for (let i =0; i< species.length; i += 1) {
           const specie = species[i];
@@ -78,12 +80,22 @@ export default class SpeciesSequenceLayer {
             x: xmin + (xmax-xmin) /2.0,
             y: ymax ,
             offsetX:0,
-            offsetY: -0 + textOffset,
+            offsetY: -5 + textOffset,
+            textType: 'species',
           });
-          textOffset += 15;
-
+          textOffset -= 15;        
         }
       }
+      if (type) {
+        this.textData.push({
+          text: `${type}`,
+          x: xmin + (xmax-xmin) /2.0,
+          y: ymin ,
+          offsetX:0,
+          offsetY: 10,
+          textType: 'type'
+        });
+      }
     });
   }
 
@@ -107,7 +119,10 @@ export default class SpeciesSequenceLayer {
         uniformPolygon: true,
         fill: false,
       },
-      color: () => {
+      color: (d) => {
+        if (d.textType === 'type') {
+          return 'yellow';
+        }
         return "white";
       },
       offset: (data) => ({

diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
@@ -44,9 +44,11 @@ export default function useState() {
 
   }
 
-  function setSelectedId(id: number | null, annotationType: 'pulse' | 'sequence' ='pulse' ) {
+  function setSelectedId(id: number | null, annotationType?: 'pulse' | 'sequence' ) {
     selectedId.value = id;
-    selectedType.value = annotationType;
+    if (annotationType) {
+      selectedType.value = annotationType;
+    }
   }
     return {
     annotationState,