Hide detailed metadata in vetting mode

bats_ai/core/views/grts_cells.py

@@ -81,3 +81,39 @@ def custom_sort_key(cell):
         return JsonResponse({'latitude': center_latitude, 'longitude': center_longitude})
     except GRTSCells.DoesNotExist:
         return JsonResponse({'error': f'Cell with cellId={id} does not exist'}, status=200)
+
+
+@router.get('/{id}/bbox')
+def get_grts_cell_bbox(request: HttpRequest, id: int):
+    try:
+        cells = GRTSCells.objects.filter(grts_cell_id=id)
+        custom_order = GRTSCells.sort_order()
+
+        def custom_sort_key(cell):
+            return custom_order.index(cell.sample_frame_id)
+
+        sorted_cells = sorted(cells, key=custom_sort_key)
+        cell = sorted_cells[0]
+        geom = cell.geom_4326
+
+        min_x, min_y, max_x, max_y = geom.extent
+
+        geojson = {
+            'type': 'Feature',
+            'geometry': {
+                'type': 'Polygon',
+                'coordinates': [
+                    [min_x, min_y],
+                    [min_x, max_y],
+                    [max_x, max_y],
+                    [max_x, min_y],
+                ],
+            },
+            'properties': {
+                'grts_cell_id': id,
+                'annotationType': 'rectangle',
+            },
+        }
+        return JsonResponse(geojson)
+    except (GRTSCells.DoesNotExist, IndexError):
+        return JsonResponse({'error': f'Cell with id {id} does not exist'}, status=200)

client/src/api/api.ts

@@ -258,6 +258,18 @@ interface GRTSCellCenter {
   error?: string;
 }
 
+interface GRTSCellBbox {
+  type: string;
+  geometry: {
+    type: string;
+    coordinates: number[][];
+  };
+  properties: {
+    grts_cell_id: number;
+    annotationType: string;
+  };
+}
+
 export interface RecordingTag {
   id: number;
   text: string;
@@ -367,6 +379,11 @@ async function getOtherUserAnnotations(recordingId: string) {
 async function getCellLocation(cellId: number, quadrant?: "SW" | "NE" | "NW" | "SE") {
   return axiosInstance.get<GRTSCellCenter>(`/grts/${cellId}`, { params: { quadrant } });
 }
+
+async function getCellBbox(cellId: number) {
+  return await axiosInstance.get<GRTSCellBbox>(`/grts/${cellId}/bbox`);
+}
+
 async function getFileAnnotations(recordingId: number) {
   return axiosInstance.get<FileAnnotation[]>(`recording/${recordingId}/recording-annotations`);
 }
@@ -539,6 +556,7 @@ export {
   deleteAnnotation,
   deleteSequenceAnnotation,
   getCellLocation,
+  getCellBbox,
   getCellfromLocation,
   getGuanoMetadata,
   getFileAnnotations,

client/src/components/MapLocation.vue

@@ -2,6 +2,7 @@
 <script lang="ts">
 import { defineComponent, PropType, Ref, ref, onMounted } from "vue";
 import { watch } from "vue";
+import { getCellBbox } from "@api/api";
 import geo, { GeoEvent } from "geojs";
 
 export default defineComponent({
@@ -20,6 +21,10 @@ export default defineComponent({
       type: Object as PropType<{ x?: number; y?: number } | undefined>,
       default: () => undefined,
     },
+    grtsCellId: {
+      type: Number,
+      default: undefined,
+    },
     updateMap: {
       type: Number,
       default: 0,
@@ -32,23 +37,49 @@ export default defineComponent({
     const map: Ref<any> = ref();
     const mapLayer: Ref<any> = ref();
     const markerLayer: Ref<any> = ref();
+    const bboxLayer: Ref<any> = ref();
     const markerFeature: Ref<any> = ref();
+    const bboxFeature: Ref<any> = ref();
     const markerLocation: Ref<{ x: number; y: number } | null> = ref(null);
     const uiLayer: Ref<any> = ref();
     const mounted = ref(false);
-    onMounted((() => mounted.value = true));
-    watch(mapRef, () => {
+
+    onMounted(async () => {
+      mounted.value = true;
+    });
+    watch(mapRef, async () => {
       if (mapRef.value) {
         const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
         const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
         map.value = geo.map({ node: mapRef.value, center: centerPoint, zoom: zoomLevel });
         mapLayer.value = map.value.createLayer("osm");
         markerLayer.value = map.value.createLayer("feature", { features: ["marker"] });
+        bboxLayer.value = map.value.createLayer("feature", { features: ["polygon"] });
         uiLayer.value = map.value.createLayer("ui");
         markerFeature.value = markerLayer.value.createFeature("marker");
+        bboxFeature.value = bboxLayer.value.createFeature("polygon");
         uiLayer.value.createWidget('slider');
 
-        if (props.location?.x && props.location?.y) {
+
+        if (props.grtsCellId !== undefined) {
+          const annotation = await getCellBbox(props.grtsCellId);
+          const coordinates = annotation.data.geometry.coordinates;
+          const data = coordinates.map((point: number[]) => ({ x: point[0], y: point[1] }));
+          data.push({ x: coordinates[0][0], y: coordinates[0][1] });
+          bboxFeature.value.data([data]).style({
+            stroke: true,
+            strokeWidth: 1,
+            strokeColor: 'black',
+            fill: false,
+          }).draw();
+          bboxLayer.value.draw();
+          const center = {
+            x: (data[0].x + data[2].x) / 2,
+            y: (data[0].y + data[1].y) / 2
+          };
+          map.value.center(center);
+          map.value.zoom(9);
+        } else if (props.location?.x && props.location?.y) {
             markerLocation.value = { x: props.location?.x, y: props.location.y };
             markerFeature.value
               .data([markerLocation.value])
@@ -104,8 +135,8 @@ export default defineComponent({
                 rotateWithMap: false,
               })
               .draw();
-              const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
               const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
+              const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
               if (map.value) {
                 map.value.zoom(zoomLevel);
                 map.value.center(centerPoint);

client/src/components/RecordingInfoDialog.vue

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { defineComponent, onMounted, ref, Ref, watch } from 'vue';
 import { getRecording, Recording } from '../api/api';
+import useState from '@use/useState';
 import RecordingInfoDisplay from './RecordingInfoDisplay.vue';
 
 
@@ -17,6 +18,7 @@ export default defineComponent({
   emits: ['close'],
   setup(props) {
     const recordingInfo: Ref<Recording | null> = ref(null);
+    const { configuration } = useState();
 
     const loadData = async () => {
       const recording = getRecording(props.id);
@@ -26,6 +28,7 @@ export default defineComponent({
     onMounted(() => loadData());
     return {
       recordingInfo,
+      configuration,
     };
   },
 });
@@ -35,6 +38,7 @@ export default defineComponent({
   <recording-info-display
     v-if="recordingInfo"
     :recording-info="recordingInfo"
+    :minimal-metadata="configuration.mark_annotations_completed_enabled"
     @close="$emit('close')"
   />
 </template>

client/src/components/RecordingInfoDisplay.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { computed, defineComponent, PropType } from 'vue';
 import { Recording } from '../api/api';
 import MapLocation from './MapLocation.vue';
 
@@ -16,12 +16,25 @@ export default defineComponent({
     disableButton: {
       type: Boolean,
       default: false,
+    },
+    minimalMetadata: {
+      type: Boolean,
+      default: false,
     }
   },
   emits: ['close'],
-  setup() {
+  setup(props) {
+    const location = computed(() => {
+      if (!props.minimalMetadata && props.recordingInfo.recording_location) {
+        return {
+          x: props.recordingInfo.recording_location.coordinates[0],
+          y:props.recordingInfo.recording_location.coordinates[1]
+        };
+      }
+      return undefined;
+    });
     return {
-
+      location,
     };
   },
 });
@@ -42,10 +55,10 @@ export default defineComponent({
       <v-row>
         <div><b>Time:</b><span>{{ recordingInfo.recorded_date }}</span> <span> {{ recordingInfo.recorded_time }}</span></div>
       </v-row>
-      <v-row>
+      <v-row v-if="!minimalMetadata">
         <div><b>Equipment:</b><span>{{ recordingInfo.equipment || 'None' }}</span></div>
       </v-row>
-      <v-row>
+      <v-row v-if="!minimalMetadata">
         <div><b>Comments:</b><span>{{ recordingInfo.comments || 'None' }}</span></div>
       </v-row>
       <v-row>
@@ -56,11 +69,12 @@ export default defineComponent({
         <map-location
           :editor="false"
           :size="{width: 400, height: 400}"
-          :location="{ x: recordingInfo.recording_location.coordinates[0], y:recordingInfo.recording_location.coordinates[1]}"
+          :location="location"
+          :grts-cell-id="recordingInfo.grts_cell_id || undefined"
         />
         <v-spacer />
       </v-row>
-      
+
       <div
         v-if="recordingInfo.site_name"
         class="mt-5"