add in next button as well as global shared ref for recordings

client/src/App.vue

@@ -1,17 +1,27 @@
 <script lang="ts">
-import { defineComponent, inject, ref, onMounted } from "vue";
+import { defineComponent, inject, ref, onMounted, computed, watch } from "vue";
 import OAuthClient from "@girder/oauth-client";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
+import useState from "./use/useState";
+import { getRecordings } from "./api/api";
 
 export default defineComponent({
   setup() {
     const oauthClient = inject<OAuthClient>("oauthClient");
     const router = useRouter();
+    const route = useRoute();
+    const { nextShared, sharedList } = useState();
+    const getShared = async () => {
+      sharedList.value = (await getRecordings(true)).data;
+    };
+    if (sharedList.value.length === 0) {
+      getShared();
+    }
     if (oauthClient === undefined) {
       throw new Error('Must provide "oauthClient" into component.');
     }
 
-    const loginText = ref('Login');
+    const loginText = ref("Login");
     const checkLogin = () => {
       if (oauthClient.isLoggedIn) {
         loginText.value = "Logout";
@@ -32,8 +42,20 @@ export default defineComponent({
     onMounted(() => {
       checkLogin();
     });
-    const activeTab = ref("recordings");
-    return { oauthClient, loginText, logInOrOut, activeTab };
+    router.afterEach((guard) => {
+      if (guard.path.includes("spectrogram")) {
+        activeTab.value = "spectrogram";
+      }
+    });
+    const activeTab = ref(route.path.includes("spectrogram") ? "spectrogram" : "recordings");
+    const containsSpectro = computed(() => route.path.includes("spectrogram"));
+    watch(containsSpectro, () => {
+      if (route.path.includes("spectrogram")) {
+        activeTab.value = "spectrogram";
+      }
+    });
+
+    return { oauthClient, containsSpectro, loginText, logInOrOut, activeTab, nextShared };
   },
 });
 </script>
@@ -42,9 +64,9 @@ export default defineComponent({
   <v-app id="app">
     <v-app-bar app>
       <v-tabs
-        v-if="oauthClient.isLoggedIn"
+        v-if="oauthClient.isLoggedIn && activeTab"
+        v-model="activeTab"
         fixed-tabs
-        :model-value="activeTab"
       >
         <v-tab
           to="/"
@@ -58,8 +80,36 @@ export default defineComponent({
         >
           Recordings
         </v-tab>
+        <v-tab
+          v-show="containsSpectro"
+          value="spectrogram"
+        >
+          Spectrogram
+        </v-tab>
       </v-tabs>
       <v-spacer />
+      <v-tooltip
+        v-if="containsSpectro && nextShared !== false"
+        bottom
+      >
+        <template #activator="{ props: subProps }">
+          <v-btn
+            v-bind="subProps"
+            variant="outlined"
+            :to="`/recording/${nextShared.id}/spectrogram`"
+          >
+            Next Shared<v-icon>mdi-chevron-right</v-icon>
+          </v-btn>
+        </template>
+        <span v-if="nextShared">
+          <div>
+            <b>Name:</b><span>{{ nextShared.name }}</span>
+          </div>
+          <div>
+            <b>Owner:</b><span>{{ nextShared.owner_username }}</span>
+          </div>
+        </span>
+      </v-tooltip>
       <v-btn @click="logInOrOut">
         {{ loginText }}
       </v-btn>

client/src/components/RecordingList.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
-import { defineComponent, ref, Ref, onMounted } from 'vue';
-import { getRecordings, Recording } from '../api/api';
+import { defineComponent, ref, Ref, onMounted, computed } from 'vue';
+import { getRecordings } from '../api/api';
+import useState from '../use/useState';
 import  { EditingRecording } from './UploadRecording.vue';
 
 export default defineComponent({
     components: {
     },
   setup() {
-    const recordingList: Ref<Recording[]> = ref([]);
-    const sharedList: Ref<Recording[]> = ref([]);
+
+    const { sharedList, recordingList } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
 
     const fetchRecordings = async () => {
@@ -20,17 +21,29 @@ export default defineComponent({
     };
     onMounted(() => fetchRecordings());
 
+    const openPanel = ref(1);
+    const filtered = ref(true);
+    const modifiedList = computed(() => {
+        if (filtered.value) {
+            return sharedList.value.filter((item) => !item.userMadeAnnotations);
+        }
+        return sharedList.value;
+    });
+
     return {
         recordingList,
         sharedList,
+        modifiedList,
+        filtered,
         editingRecording,
+        openPanel,
      };
   },
 });
 </script>
 
 <template>
-  <v-expansion-panels>
+  <v-expansion-panels v-model="openPanel">
     <v-expansion-panel>
       <v-expansion-panel-title>My Recordings</v-expansion-panel-title>
       <v-expansion-panel-text>
@@ -87,6 +100,11 @@ export default defineComponent({
     <v-expansion-panel>
       <v-expansion-panel-title>Public</v-expansion-panel-title>
       <v-expansion-panel-text class="ma-0 pa-0">
+        <v-switch
+          v-model="filtered"
+          label="Filter Annotated"
+          dense
+        />
         <div>
           <v-row
             dense
@@ -100,7 +118,7 @@ export default defineComponent({
           </v-row>
         </div>
         <div
-          v-for="item in sharedList"
+          v-for="item in modifiedList"
           :key="`public_${item.id}`"
         >
           <v-row

client/src/use/useState.ts

@@ -1,7 +1,7 @@
-import { ref, Ref } from "vue";
+import { ref, Ref, watch } from "vue";
 import { cloneDeep } from "lodash";
 import * as d3 from "d3";
-import { OtherUserAnnotations, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
+import { OtherUserAnnotations, Recording, SpectrogramAnnotation, SpectrogramTemporalAnnotation } from "../api/api";
 
 const annotationState: Ref<AnnotationState> = ref("");
 const creationType: Ref<'pulse' | 'sequence'> = ref("pulse");
@@ -15,6 +15,9 @@ const selectedType: Ref<'pulse' | 'sequence'> = ref('pulse');
 const annotations : Ref<SpectrogramAnnotation[]> = ref([]);
 const temporalAnnotations: Ref<SpectrogramTemporalAnnotation[]> = ref([]);
 const otherUserAnnotations: Ref<OtherUserAnnotations> = ref({});
+const sharedList: Ref<Recording[]> = ref([]);
+const recordingList: Ref<Recording[]> = ref([]);
+const nextShared: Ref<Recording | false> = ref(false);
 
 type AnnotationState = "" | "editing" | "creating" | "disabled";
 export default function useState() {
@@ -50,6 +53,15 @@ export default function useState() {
       selectedType.value = annotationType;
     }
   }
+  watch(sharedList, () => {
+    const filtered = sharedList.value.filter((item) => !item.userMadeAnnotations);
+    if (filtered.length > 0) {
+     nextShared.value = filtered[0];
+    } else {
+      nextShared.value = false;
+    }
+  });
+
     return {
     annotationState,
     creationType,
@@ -68,5 +80,8 @@ export default function useState() {
     otherUserAnnotations,
     selectedId,
     selectedType,
+    sharedList,
+    recordingList,
+    nextShared,
   };
 }

client/src/views/Recordings.vue

@@ -6,6 +6,7 @@ import {
 } from "vuetify/labs/VDataTable";
 import UploadRecording, { EditingRecording } from '../components/UploadRecording.vue';
 import MapLocation from '../components/MapLocation.vue';
+import useState from '../use/useState';
 
 export default defineComponent({
     components: {
@@ -15,8 +16,7 @@ export default defineComponent({
     },
   setup() {
     const itemsPerPage = ref(-1);
-    const recordingList: Ref<Recording[]> = ref([]);
-    const sharedList: Ref<Recording[]> = ref([]);
+    const { sharedList, recordingList } = useState();
     const editingRecording: Ref<EditingRecording | null> = ref(null);
     let intervalRef: number | null = null;
 
@@ -227,7 +227,7 @@ export default defineComponent({
             <template #activator="{ props }">
               <v-icon v-bind="props">
                 mdi-map
-              </v-icon>
+              </v-icon>sharedList
             </template>
             <v-card>
               <map-location