From e5e4a63f0269f3d8dc1e03f5de340c57012488f6 Mon Sep 17 00:00:00 2001
From: Bryon Lewis <Bryon.Lewis@kitware.com>
Date: Wed, 7 Feb 2024 11:30:35 -0500
Subject: [PATCH] basics of rendering temporal annotations

---
 bats_ai/core/admin/__init__.py                |   2 +
 bats_ai/core/admin/temporal_annotations.py    |  18 ++
 .../migrations/0007_temporalannotations.py    |  22 +-
 bats_ai/core/views/recording.py               |   9 +
 bats_ai/core/views/temporal_annotations.py    |  14 +-
 client/src/App.vue                            |   8 +-
 client/src/api/api.ts                         |  12 ++
 client/src/components/SpectrogramViewer.vue   |   6 +
 client/src/components/TemporalList.vue        | 114 +++++++++++
 client/src/components/UploadRecording.vue     |   2 +-
 client/src/components/geoJS/LayerManager.vue  |  35 +++-
 client/src/components/geoJS/geoJSUtils.ts     |  93 ++++++++-
 .../components/geoJS/layers/rectangleLayer.ts |  11 -
 .../components/geoJS/layers/temporalLayer.ts  | 193 ++++++++++++++++++
 client/src/router/index.ts                    |  14 +-
 client/src/use/useState.ts                    |   2 +-
 client/src/views/Login.vue                    |  17 ++
 client/src/views/Recordings.vue               |   2 +-
 client/src/views/Spectrogram.vue              |   6 +
 19 files changed, 547 insertions(+), 33 deletions(-)
 create mode 100644 bats_ai/core/admin/temporal_annotations.py
 create mode 100644 client/src/components/TemporalList.vue
 create mode 100644 client/src/components/geoJS/layers/temporalLayer.ts
 create mode 100644 client/src/views/Login.vue

diff --git a/bats_ai/core/admin/__init__.py b/bats_ai/core/admin/__init__.py
index 68eb9b8..c405338 100644
--- a/bats_ai/core/admin/__init__.py
+++ b/bats_ai/core/admin/__init__.py
@@ -2,10 +2,12 @@
 from .image import ImageAdmin
 from .recording import RecordingAdmin
 from .spectrogram import SpectrogramAdmin
+from .temporal_annotations import TemporalAnnotationsAdmin
 
 __all__ = [
     'AnnotationsAdmin',
     'ImageAdmin',
     'RecordingAdmin',
     'SpectrogramAdmin',
+    'TemporalAnnotationsAdmin',
 ]
diff --git a/bats_ai/core/admin/temporal_annotations.py b/bats_ai/core/admin/temporal_annotations.py
new file mode 100644
index 0000000..9415855
--- /dev/null
+++ b/bats_ai/core/admin/temporal_annotations.py
@@ -0,0 +1,18 @@
+from django.contrib import admin
+
+from bats_ai.core.models import TemporalAnnotations
+
+
+@admin.register(TemporalAnnotations)
+class TemporalAnnotationsAdmin(admin.ModelAdmin):
+    list_display = [
+        'pk',
+        'recording',
+        'owner',
+        'start_time',
+        'end_time',
+        'type',
+        'comments',
+    ]
+    list_select_related = True
+    autocomplete_fields = ['owner']
diff --git a/bats_ai/core/migrations/0007_temporalannotations.py b/bats_ai/core/migrations/0007_temporalannotations.py
index 0351928..5fbf65f 100644
--- a/bats_ai/core/migrations/0007_temporalannotations.py
+++ b/bats_ai/core/migrations/0007_temporalannotations.py
@@ -6,7 +6,6 @@
 
 
 class Migration(migrations.Migration):
-
     dependencies = [
         migrations.swappable_dependency(settings.AUTH_USER_MODEL),
         ('core', '0006_alter_recording_recording_location'),
@@ -16,13 +15,28 @@ class Migration(migrations.Migration):
         migrations.CreateModel(
             name='TemporalAnnotations',
             fields=[
-                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                (
+                    'id',
+                    models.BigAutoField(
+                        auto_created=True, primary_key=True, serialize=False, verbose_name='ID'
+                    ),
+                ),
                 ('start_time', models.IntegerField(blank=True, null=True)),
                 ('end_time', models.IntegerField(blank=True, null=True)),
                 ('type', models.TextField(blank=True, null=True)),
                 ('comments', models.TextField(blank=True, null=True)),
-                ('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
-                ('recording', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.recording')),
+                (
+                    'owner',
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+                (
+                    'recording',
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to='core.recording'
+                    ),
+                ),
             ],
         ),
     ]
diff --git a/bats_ai/core/views/recording.py b/bats_ai/core/views/recording.py
index 1aa48ba..84c653d 100644
--- a/bats_ai/core/views/recording.py
+++ b/bats_ai/core/views/recording.py
@@ -203,13 +203,22 @@ def get_spectrogram(request: HttpRequest, id: int):
     spectro_data['currentUser'] = request.user.email
 
     annotations_qs = Annotations.objects.filter(recording=recording, owner=request.user)
+    temporal_annotations_qs = TemporalAnnotations.objects.filter(
+        recording=recording, owner=request.user
+    )
 
     # Serialize the annotations using AnnotationSchema
     annotations_data = [
         AnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
         for annotation in annotations_qs
     ]
+    temporal_annotations_data = [
+        TemporalAnnotationSchema.from_orm(annotation, owner_email=request.user.email).dict()
+        for annotation in temporal_annotations_qs
+    ]
+
     spectro_data['annotations'] = annotations_data
+    spectro_data['temporal'] = temporal_annotations_data
     return spectro_data
 
 
diff --git a/bats_ai/core/views/temporal_annotations.py b/bats_ai/core/views/temporal_annotations.py
index e961363..10785b8 100644
--- a/bats_ai/core/views/temporal_annotations.py
+++ b/bats_ai/core/views/temporal_annotations.py
@@ -8,12 +8,22 @@
 
 
 class TemporalAnnotationSchema(Schema):
-    recording: int  # Foreign Key to index
-    owner_username: str
     start_time: int
     end_time: int
     type: str
     comments: str
+    owner_email: str = None
+
+    @classmethod
+    def from_orm(cls, obj, owner_email=None, **kwargs):
+        return cls(
+            start_time=obj.start_time,
+            end_time=obj.end_time,
+            type=obj.type,
+            comments=obj.comments,
+            id=obj.id,
+            owner_email=owner_email,  # Include owner_email in the schema
+        )
 
 
 @router.get('/{id}')
diff --git a/client/src/App.vue b/client/src/App.vue
index c31c389..43b0aa9 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,18 +1,21 @@
 <script lang="ts">
 import { defineComponent, inject, computed, ref } from 'vue';
 import OAuthClient from '@girder/oauth-client';
+import { useRouter } from 'vue-router';
 
 export default defineComponent({
   setup() {
     const oauthClient = inject<OAuthClient>('oauthClient');
+    const router = useRouter();
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
     }
 
     const loginText = computed(() => (oauthClient.isLoggedIn ? 'Logout' : 'Login'));
-    const logInOrOut = () => {
+    const logInOrOut = async () => {
       if (oauthClient.isLoggedIn) {
-        oauthClient.logout();
+        await oauthClient.logout();
+        router.push('Login');
       } else {
         oauthClient.redirectToLogin();
       }
@@ -27,6 +30,7 @@ export default defineComponent({
   <v-app id="app">
     <v-app-bar app>
       <v-tabs
+        v-if="oauthClient.isLoggedIn"
         fixed-tabs
         :model-value="activeTab"
       >
diff --git a/client/src/api/api.ts b/client/src/api/api.ts
index 5a0be0c..52a582b 100644
--- a/client/src/api/api.ts
+++ b/client/src/api/api.ts
@@ -60,6 +60,17 @@ export interface SpectrogramAnnotation {
     owner_email?: string;
 }
 
+export interface SpectrogramTemporalAnnotation {
+    start_time: number;
+    end_time: number;
+    id: number;
+    editing?: boolean;
+    type?: string;
+    comments?: string;
+    owner_email?: string;
+}
+
+
 export interface UpdateSpectrogramAnnotation {
     start_time?: number;
     end_time?: number;
@@ -81,6 +92,7 @@ export interface Spectrogram {
     url?: string;
     filename?: string;
     annotations?: SpectrogramAnnotation[];
+    temporal?: SpectrogramTemporalAnnotation[];
     spectroInfo?: SpectroInfo;
     currentUser?: string;
     otherUsers?: UserInfo[];
diff --git a/client/src/components/SpectrogramViewer.vue b/client/src/components/SpectrogramViewer.vue
index 4681b79..dba71ad 100644
--- a/client/src/components/SpectrogramViewer.vue
+++ b/client/src/components/SpectrogramViewer.vue
@@ -6,6 +6,7 @@ import {
   patchAnnotation,
   putAnnotation,
   SpectrogramAnnotation,
+  SpectrogramTemporalAnnotation,
 } from "../api/api";
 import LayerManager from "./geoJS/LayerManager.vue";
 import { GeoEvent } from "geojs";
@@ -29,6 +30,10 @@ export default defineComponent({
       type: Array as PropType<SpectrogramAnnotation[]>,
       default: () => [],
     },
+    temporalAnnotations: {
+      type: Array as PropType<SpectrogramTemporalAnnotation[]>,
+      default: () => [],
+    },
     otherUserAnnotations: {
       type: Object as PropType<OtherUserAnnotations>,
       default: () => ({}),
@@ -214,6 +219,7 @@ export default defineComponent({
       :geo-viewer-ref="geoViewerRef"
       :spectro-info="spectroInfo"
       :annotations="annotations"
+      :temporal-annotations="temporalAnnotations"
       :other-user-annotations="otherUserAnnotations"
       :selected-id="selectedId"
       @selected="clickSelected($event)"
diff --git a/client/src/components/TemporalList.vue b/client/src/components/TemporalList.vue
new file mode 100644
index 0000000..cbe32eb
--- /dev/null
+++ b/client/src/components/TemporalList.vue
@@ -0,0 +1,114 @@
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+import { SpectroInfo } from './geoJS/geoJSUtils';
+import { SpectrogramTemporalAnnotation } from "../api/api";
+import useState from "../use/useState";
+import { watch } from "vue";
+
+export default defineComponent({
+  name: "TemporalList",
+  components: {
+  },
+  props: {
+    spectroInfo: {
+      type: Object as PropType<SpectroInfo | undefined>,
+      default: () => undefined,
+    },
+    annotations: {
+      type: Array as PropType<SpectrogramTemporalAnnotation[]>,
+      default: () => [],
+    },
+    selectedId: {
+        type: Number as PropType<number | null>,
+        default: null,
+    },
+  },
+  emits: ['select'],
+  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,
+    };
+  },
+});
+</script>
+
+<template>
+  <v-card class="pa-0 ma-0">
+    <v-card-title>
+      <v-row class="pa-2">
+        Temporal Annotations
+        <v-spacer />
+        <v-btn
+          :disabled="annotationState === 'creating'"
+          @click="annotationState = 'creating'"
+        >
+          Add<v-icon>mdi-plus</v-icon>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+    <v-list>
+      <v-list-item>
+        <v-row dense>
+          <v-col><b>Time</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="annotation-item"
+        @click="$emit('select', annotation.id)"
+      >
+        <v-row>
+          <v-col class="annotation-time">
+            <span>{{ annotation.start_time }}-{{ annotation.end_time }}ms</span>
+          </v-col>
+        </v-row>
+        <v-row
+          class="ma-0 pa-0"
+        >
+          <v-col class="ma-0 pa-0">
+            <div class="type-name">
+              {{ annotation.type }}
+            </div>
+          </v-col>
+        </v-row>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<style lang="scss" scoped>
+.annotation-id {
+    cursor:pointer;
+    text-decoration: underline;
+}
+.annotation-time {
+    font-size: 1em;
+}
+.annotation-item {
+  border: 1px solid gray;
+}
+.type-name {
+    font-weight: bold;
+    font-size: 1em;
+}.selected {
+    background-color: cyan;
+}
+</style>
diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
index 8f71304..75bf020 100644
--- a/client/src/components/UploadRecording.vue
+++ b/client/src/components/UploadRecording.vue
@@ -291,7 +291,7 @@ export default defineComponent({
                       <v-spacer />
                       <map-location
                         :size="{width: 600, height: 400}"
-                        :location="{ x: latitude, y: longitude}"
+                        :location="{ x: longitude, y: latitude}"
                         :update-map="updateMap"
                         @location="setLocation($event)"
                       />
diff --git a/client/src/components/geoJS/LayerManager.vue b/client/src/components/geoJS/LayerManager.vue
index 8a1ad46..1c78bf5 100644
--- a/client/src/components/geoJS/LayerManager.vue
+++ b/client/src/components/geoJS/LayerManager.vue
@@ -1,9 +1,10 @@
 <script lang="ts">
 import { defineComponent, nextTick, onMounted, PropType, Ref, ref, watch } from "vue";
-import { OtherUserAnnotations, SpectrogramAnnotation } from "../../api/api";
+import { OtherUserAnnotations, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../api/api";
 import { geojsonToSpectro, SpectroInfo } from "./geoJSUtils";
 import EditAnnotationLayer from "./layers/editAnnotationLayer";
 import RectangleLayer from "./layers/rectangleLayer";
+import TemporalLayer from "./layers/temporalLayer";
 import LegendLayer from "./layers/legendLayer";
 import TimeLayer from "./layers/timeLayer";
 import FreqLayer from "./layers/freqLayer";
@@ -26,6 +27,10 @@ export default defineComponent({
       type: Array as PropType<SpectrogramAnnotation[]>,
       default: () => [],
     },
+    temporalAnnotations: {
+      type: Array as PropType<SpectrogramTemporalAnnotation[]>,
+      default: () => [],
+    },
     otherUserAnnotations: {
       type: Object as PropType<OtherUserAnnotations>,
       default: () => ({}),
@@ -52,9 +57,11 @@ export default defineComponent({
     const selectedAnnotationId: Ref<null | number> = ref(null);
     const hoveredAnnotationId: Ref<null | number> = ref(null);
     const localAnnotations: Ref<SpectrogramAnnotation[]> = ref(cloneDeep(props.annotations));
+    const localTemporalAnnotations: Ref<SpectrogramTemporalAnnotation[]> = ref(cloneDeep(props.temporalAnnotations));
     const editing = ref(false);
     const editingAnnotation: Ref<null | SpectrogramAnnotation> = ref(null);
     let rectAnnotationLayer: RectangleLayer;
+    let temporalAnnotationLayer: TemporalLayer;
     let editAnnotationLayer: EditAnnotationLayer;
     let legendLayer: LegendLayer;
     let timeLayer: TimeLayer;
@@ -63,6 +70,12 @@ export default defineComponent({
     const displayError = ref(false);
     const errorMsg = ref("");
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+    const temporalEvent = (type: string, data: any) => {
+      console.log(`${type}`);
+      console.log(data);
+    };
+
     // 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
@@ -189,14 +202,14 @@ export default defineComponent({
           additionalAnnotations = additionalAnnotations.concat(newAnnotations);
         }
         additionalAnnotations = additionalAnnotations.concat(localAnnotations.value);
-        return { annotations: additionalAnnotations, colorScale };
+        return { annotations: additionalAnnotations, temporalAnnotations: localTemporalAnnotations.value, colorScale };
       } else {
-        return { annotations: localAnnotations.value };
+        return { annotations: localAnnotations.value, temporalAnnotations: localTemporalAnnotations.value };
       }
     };
     const triggerUpdate = () => {
       // Check for selected and editing annotations;
-      const { annotations } = getDataForLayers();
+      const { annotations, temporalAnnotations } = getDataForLayers();
       if (rectAnnotationLayer) {
         rectAnnotationLayer.formatData(
           annotations,
@@ -206,6 +219,15 @@ export default defineComponent({
         );
         rectAnnotationLayer.redraw();
       }
+      if (temporalAnnotationLayer && layerVisibility.value.includes('temporal')) {
+        temporalAnnotationLayer.formatData(
+          temporalAnnotations,
+          selectedAnnotationId.value,
+          currentUser.value,
+          colorScale.value
+        );
+        temporalAnnotationLayer.redraw();
+      }
       if (!props.thumbnail) {
         if (layerVisibility.value.includes("grid")) {
           legendLayer.setGridEnabled(true);
@@ -274,10 +296,13 @@ export default defineComponent({
     );
     onMounted(() => {
       if (props.spectroInfo) {
-        rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
         editAnnotationLayer = new EditAnnotationLayer(props.geoViewerRef, event, props.spectroInfo);
+        rectAnnotationLayer = new RectangleLayer(props.geoViewerRef, event, props.spectroInfo);
         rectAnnotationLayer.formatData(localAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
         rectAnnotationLayer.redraw();
+        temporalAnnotationLayer = new TemporalLayer(props.geoViewerRef, temporalEvent, props.spectroInfo);
+        temporalAnnotationLayer.formatData(localTemporalAnnotations.value, selectedAnnotationId.value, currentUser.value, colorScale.value);
+        temporalAnnotationLayer.redraw();
         if (!props.thumbnail) {
           legendLayer = new LegendLayer(props.geoViewerRef, event, props.spectroInfo);
           timeLayer = new TimeLayer(props.geoViewerRef, event, props.spectroInfo);
diff --git a/client/src/components/geoJS/geoJSUtils.ts b/client/src/components/geoJS/geoJSUtils.ts
index 3cb945f..5ebed6e 100644
--- a/client/src/components/geoJS/geoJSUtils.ts
+++ b/client/src/components/geoJS/geoJSUtils.ts
@@ -169,7 +169,7 @@ const useGeoJS = () => {
   };
 };
 
-import { SpectrogramAnnotation } from "../../api/api";
+import { SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../../api/api";
 
 export interface SpectroInfo {
   width: number;
@@ -182,6 +182,88 @@ export interface SpectroInfo {
   high_freq: number;
 }
 
+function spectroTemporalToGeoJSon(
+  annotation: SpectrogramTemporalAnnotation,
+  spectroInfo: SpectroInfo,
+  ymin = 0,
+  ymax = 10
+): GeoJSON.Polygon {
+  //scale pixels to time and frequency ranges
+  if (spectroInfo.start_times === undefined || spectroInfo.end_times === undefined) {
+    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    // Now we remap our annotation to pixel coordinates
+    const start_time = annotation.start_time * widthScale;
+    const end_time = annotation.end_time * widthScale;
+    return {
+      type: "Polygon",
+      coordinates: [
+        [
+          [start_time, ymin],
+          [start_time, ymax],
+          [end_time, ymax],
+          [end_time, ymin],
+          [start_time, ymin],
+        ],
+      ],
+    };
+  } else if (spectroInfo.start_times && spectroInfo.end_times) {
+    // Compressed Spectro has different conversion
+    // Find what section the annotation is in
+    const start = annotation.start_time;
+    const end = annotation.end_time;
+    const { start_times, end_times } = spectroInfo;
+    const lengths = start_times.length === end_times.length ? start_times.length : 0;
+    let foundIndex = -1;
+    for (let i = 0; i < lengths; i += 1) {
+      if (
+        start_times[i] < start &&
+        start < end_times[i] &&
+        end < end_times[i] &&
+        end > start_times[i]
+      ) {
+        foundIndex = i;
+        break;
+      }
+    }
+    // We need to build the length of times to pixel size for the time spaces before the annotation
+    const widthScale = spectroInfo.width / (spectroInfo.end_time - spectroInfo.start_time);
+    let pixelAdd = 0;
+    for (let i = 0; i < foundIndex; i += 1) {
+      pixelAdd += (end_times[i] - start_times[i]) * widthScale;
+    }
+    const heightScale = spectroInfo.height / (spectroInfo.high_freq - spectroInfo.low_freq);
+    // Now we remap our annotation to pixel coordinates
+    const start_time = pixelAdd + (annotation.start_time - start_times[foundIndex]) * widthScale;
+    const end_time = pixelAdd + (annotation.end_time - start_times[foundIndex]) * widthScale;
+
+    return {
+      type: "Polygon",
+      coordinates: [
+        [
+          [start_time, ymin],
+          [start_time, ymax],
+          [end_time, ymax],
+          [end_time, ymin],
+          [start_time, ymin],
+        ],
+      ],
+    };
+  }
+  return {
+    type: "Polygon",
+    coordinates: [
+      [
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+        [-1, -1],
+      ],
+    ],
+  };
+}
+
 function spectroToGeoJSon(
   annotation: SpectrogramAnnotation,
   spectroInfo: SpectroInfo
@@ -384,4 +466,11 @@ function reOrdergeoJSON(coords: GeoJSON.Position[]) {
   ];
 }
 
-export { spectroToGeoJSon, geojsonToSpectro, reOrdergeoJSON, useGeoJS, spectroToCenter };
+export {
+  spectroToGeoJSon,
+  geojsonToSpectro,
+  reOrdergeoJSON,
+  useGeoJS,
+  spectroToCenter,
+  spectroTemporalToGeoJSon,
+};
diff --git a/client/src/components/geoJS/layers/rectangleLayer.ts b/client/src/components/geoJS/layers/rectangleLayer.ts
index 5c7865e..7fc9193 100644
--- a/client/src/components/geoJS/layers/rectangleLayer.ts
+++ b/client/src/components/geoJS/layers/rectangleLayer.ts
@@ -16,7 +16,6 @@ interface RectGeoJSData {
 export default class RectangleLayer {
   formattedData: RectGeoJSData[];
 
-  drawingOther: boolean; //drawing another type of annotation at the same time?
 
   hoverOn: boolean; //to turn over annnotations on
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -43,7 +42,6 @@ export default class RectangleLayer {
     spectroInfo: SpectroInfo
   ) {
     this.geoViewerRef = geoViewerRef;
-    this.drawingOther = false;
     this.spectroInfo = spectroInfo;
     this.formattedData = [];
     this.hoverOn = false;
@@ -108,15 +106,6 @@ export default class RectangleLayer {
     }
   }
 
-  /**
-   * Used to set the drawingOther parameter used to change styling if other types are drawn
-   * and also handle selection clicking between different types
-   * @param val - determines if we are drawing other types of annotations
-   */
-  setDrawingOther(val: boolean) {
-    this.drawingOther = val;
-  }
-
   formatData(
     annotationData: SpectrogramAnnotation[],
     selectedIndex: number | null,
diff --git a/client/src/components/geoJS/layers/temporalLayer.ts b/client/src/components/geoJS/layers/temporalLayer.ts
new file mode 100644
index 0000000..86d5694
--- /dev/null
+++ b/client/src/components/geoJS/layers/temporalLayer.ts
@@ -0,0 +1,193 @@
+/* eslint-disable class-methods-use-this */
+import geo, { GeoEvent } from "geojs";
+import { SpectroInfo, spectroTemporalToGeoJSon } from "../geoJSUtils";
+import { SpectrogramTemporalAnnotation } from "../../../api/api";
+import { LayerStyle } from "./types";
+
+interface RectGeoJSData {
+  id: number;
+  selected: boolean;
+  editing?: boolean;
+  polygon: GeoJSON.Polygon;
+  color?: string;
+  owned: boolean; // if the annotation is user owned
+}
+
+export default class TemporalLayer {
+  formattedData: RectGeoJSData[];
+
+  drawingOther: boolean; //drawing another type of annotation at the same time?
+
+  hoverOn: boolean; //to turn over annnotations on
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  featureLayer: any;
+
+  selectedIndex: number[]; // sparse array
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  geoViewerRef: any;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  event: (name: string, data: any) => void;
+
+  spectroInfo: SpectroInfo;
+
+  style: LayerStyle<RectGeoJSData>;
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  constructor(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    geoViewerRef: any,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    event: (name: string, data: any) => void,
+    spectroInfo: SpectroInfo
+  ) {
+    this.geoViewerRef = geoViewerRef;
+    this.drawingOther = false;
+    this.spectroInfo = spectroInfo;
+    this.formattedData = [];
+    this.hoverOn = false;
+    this.selectedIndex = [];
+    this.event = event;
+    //Only initialize once, prevents recreating Layer each edit
+    const layer = this.geoViewerRef.createLayer("feature", {
+      features: ["polygon"],
+    });
+    this.featureLayer = layer
+      .createFeature("polygon", { selectionAPI: true })
+      .geoOn(geo.event.feature.mouseclick, (e: GeoEvent) => {
+        /**
+         * Handle clicking on individual annotations, if DrawingOther is true we use the
+         * Rectangle type if only the polygon is visible we use the polygon bounds
+         * */
+        if (e.mouse.buttonsDown.left) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            if (e.data.owned) {
+              this.event("annotation-clicked", { id: e.data.id, edit: false });
+            }
+          }
+        } else if (e.mouse.buttonsDown.right) {
+          if (!e.data.editing || (e.data.editing && !e.data.selected)) {
+            if (e.data.owned) {
+              this.event("annotation-right-clicked", { id: e.data.id, edit: true });
+            }
+          }
+        }
+      });
+    this.featureLayer.geoOn(
+      geo.event.feature.mouseclick_order,
+      this.featureLayer.mouseOverOrderClosestBorder
+    );
+    this.featureLayer.geoOn(geo.event.mouseclick, (e: GeoEvent) => {
+      // If we aren't clicking on an annotation we can deselect the current track
+      if (this.featureLayer.pointSearch(e.geo).found.length === 0) {
+        this.event("annotation-cleared", { id: null, edit: false });
+      }
+    });
+    this.style = this.createStyle();
+  }
+
+  hoverAnnotations(e: GeoEvent) {
+    const { found } = this.featureLayer.pointSearch(e.mouse.geo);
+    this.event("annotation-hover", { id: found, pos: e.mouse.geo });
+  }
+
+  setHoverAnnotations(val: boolean) {
+    if (!this.hoverOn && val) {
+      this.featureLayer.geoOn(geo.event.feature.mouseover, (e: GeoEvent) =>
+        this.hoverAnnotations(e)
+      );
+      this.featureLayer.geoOn(geo.event.feature.mouseoff, (e: GeoEvent) =>
+        this.hoverAnnotations(e)
+      );
+      this.hoverOn = true;
+    } else if (this.hoverOn && !val) {
+      this.featureLayer.geoOff(geo.event.feature.mouseover);
+      this.featureLayer.geoOff(geo.event.feature.mouseoff);
+      this.hoverOn = false;
+    }
+  }
+
+ 
+  formatData(
+    annotationData: SpectrogramTemporalAnnotation[],
+    selectedIndex: number | null,
+    currentUser: string,
+    colorScale?: d3.ScaleOrdinal<string, string, never>
+  ) {
+    const arr: RectGeoJSData[] = [];
+    annotationData.forEach((annotation: SpectrogramTemporalAnnotation) => {
+      const polygon = spectroTemporalToGeoJSon(annotation, this.spectroInfo, -10, -50);
+      const [xmin, ymin] = polygon.coordinates[0][0];
+      const [xmax, ymax] = polygon.coordinates[0][2];
+      // For the compressed view we need to filter out default or NaN numbers
+      if (Number.isNaN(xmax) || Number.isNaN(xmin) || Number.isNaN(ymax) || Number.isNaN(ymin)) {
+        return;
+      }
+      if (xmax === -1 && ymin === -1 && ymax === -1 && xmin === -1) {
+        return;
+      }
+      const newAnnotation: RectGeoJSData = {
+        id: annotation.id,
+        selected: annotation.id === selectedIndex,
+        editing: annotation.editing,
+        polygon,
+        owned: annotation.owner_email === currentUser,
+      };
+      if (colorScale && annotation.owner_email !== currentUser && annotation.owner_email) {
+        newAnnotation.color = colorScale(annotation.owner_email);
+      }
+      arr.push(newAnnotation);
+    });
+    this.formattedData = arr;
+  }
+
+  redraw() {
+    // add some styles
+    this.featureLayer
+      .data(this.formattedData)
+      .polygon((d: RectGeoJSData) => d.polygon.coordinates[0])
+      .style(this.createStyle())
+      .draw();
+  }
+
+  disable() {
+    this.featureLayer.data([]).draw();
+  }
+
+  createStyle(): LayerStyle<RectGeoJSData> {
+    return {
+      ...{
+        strokeColor: "black",
+        strokeWidth: 2.0,
+        antialiasing: 0,
+        stroke: true,
+        uniformPolygon: true,
+        fill: true,
+        fillOpacity: 0.20,
+      },
+      // Style conversion to get array objects to work in geoJS
+      position: (point) => {
+        return { x: point[0], y: point[1] };
+      },
+      fillColor: (_point, _index, data) => {
+        if (data.selected) {
+          return "cyan";
+        }
+        if (data.color) {
+          return data.color;
+        }
+        return "hotpink";
+      },
+      strokeColor: (_point, _index, data) => {
+        if (data.selected) {
+          return "cyan";
+        }
+        if (data.color) {
+          return data.color;
+        }
+        return "hotpink";
+      },
+    };
+  }
+}
diff --git a/client/src/router/index.ts b/client/src/router/index.ts
index 11e2fa6..5e2e970 100644
--- a/client/src/router/index.ts
+++ b/client/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-rou
 import HomePage from '../views/HomePage.vue';
 import Recordings from '../views/Recordings.vue';
 import Spectrogram from '../views/Spectrogram.vue';
+import Login from '../views/Login.vue';
 
 import oauthClient from '../plugins/Oauth';
 
@@ -10,10 +11,10 @@ function beforeEach(
   _: RouteLocationNormalized,
   next: (route?: string) => void,
 ) {
-  if (!oauthClient.isLoggedIn && to.name !== '/') {
-    next('/');
-  }
-  if (oauthClient.isLoggedIn && to.name === '/') {
+  if (!oauthClient.isLoggedIn && to.name !== 'Login') {
+    next('/login');
+    return;
+  }  if (oauthClient.isLoggedIn && to.name === 'Login') {
     next('/');
   }
   next();
@@ -28,6 +29,11 @@ function routerInit(){
         path: '/',
         component: HomePage,
       },
+      {
+        path: '/login',
+        name: 'Login',
+        component: Login,
+      },
       {
         path: '/recordings',
         component: Recordings,
diff --git a/client/src/use/useState.ts b/client/src/use/useState.ts
index 1ef1b21..388e80d 100644
--- a/client/src/use/useState.ts
+++ b/client/src/use/useState.ts
@@ -3,7 +3,7 @@ import { cloneDeep } from "lodash";
 import * as d3 from "d3";
 
 const annotationState: Ref<AnnotationState> = ref("");
-type LayersVis = "time" | "freq" | "species" | "grid";
+type LayersVis = "time" | "freq" | "species" | "grid" | 'temporal';
 const layerVisibility: Ref<LayersVis[]> = ref([]);
 const colorScale: Ref<d3.ScaleOrdinal<string, string, never> | undefined> = ref();
 const selectedUsers: Ref<string[]> = ref([]);
diff --git a/client/src/views/Login.vue b/client/src/views/Login.vue
new file mode 100644
index 0000000..0a10cb3
--- /dev/null
+++ b/client/src/views/Login.vue
@@ -0,0 +1,17 @@
+<script lang="ts">
+import { defineComponent, inject, computed, ref } from 'vue';
+import OAuthClient from '@girder/oauth-client';
+
+export default defineComponent({
+  name: 'Login',
+  setup() {
+    return {
+
+    };
+  },
+});
+</script>
+
+<template>
+  <h2>Please Login to continue</h2>
+</template>
diff --git a/client/src/views/Recordings.vue b/client/src/views/Recordings.vue
index 37bc374..944d9cb 100644
--- a/client/src/views/Recordings.vue
+++ b/client/src/views/Recordings.vue
@@ -119,7 +119,7 @@ export default defineComponent({
         id: item.id,
       };
       if (item.recording_location) {
-        const [ lat, lon ] = item.recording_location.coordinates;
+        const [ lon, lat ] = item.recording_location.coordinates;
         editingRecording.value['location'] = {lat, lon};
       }
       uploadDialog.value = true;
diff --git a/client/src/views/Spectrogram.vue b/client/src/views/Spectrogram.vue
index 3a7b421..f6635b7 100644
--- a/client/src/views/Spectrogram.vue
+++ b/client/src/views/Spectrogram.vue
@@ -9,6 +9,7 @@ import {
   getSpectrogramCompressed,
   OtherUserAnnotations,
   getOtherUserAnnotations,
+  SpectrogramTemporalAnnotation,
 } from "../api/api";
 import SpectrogramViewer from "../components/SpectrogramViewer.vue";
 import { SpectroInfo } from "../components/geoJS/geoJSUtils";
@@ -43,6 +44,7 @@ export default defineComponent({
     const image: Ref<HTMLImageElement> = ref(new Image());
     const spectroInfo: Ref<SpectroInfo | undefined> = ref();
     const annotations: Ref<SpectrogramAnnotation[] | undefined> = ref([]);
+    const temporalAnnotations: Ref<SpectrogramTemporalAnnotation[] | undefined> = ref([]);
     const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
     const selectedId: Ref<number | null> = ref(null);
     const selectedUsers: Ref<string[]> = ref([]);
@@ -84,6 +86,7 @@ export default defineComponent({
       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);
+      temporalAnnotations.value = response.data["temporal"]?.sort((a, b) => a.start_time - b.start_time);
       if (response.data.currentUser) {
         currentUser.value = response.data.currentUser;
       }
@@ -175,6 +178,7 @@ export default defineComponent({
       freqRef,
       // Other user selection
       otherUserAnnotations,
+      temporalAnnotations,
       otherUsers,
       selectedUsers,
       deleteChip,
@@ -319,6 +323,7 @@ export default defineComponent({
         :spectro-info="spectroInfo"
         :recording-id="id"
         :annotations="annotations"
+        :temporal-annotations="temporalAnnotations"
         :other-user-annotations="otherUserAnnotations"
         :selected-id="selectedId"
         :grid="gridEnabled"
@@ -334,6 +339,7 @@ export default defineComponent({
         :spectro-info="spectroInfo"
         :recording-id="id"
         :annotations="annotations"
+        :temporal-annotations="temporalAnnotations"
         :other-user-annotations="otherUserAnnotations"
         :selected-id="selectedId"
         :parent-geo-viewer-ref="parentGeoViewerRef"