Metadata Query Param Persistence (#324)

* add metadataQueryParam persistence

* fix prev/next, increment version

* increment web-client verison

Author: BryonLewis

client/dive-common/components/PrevNext.vue

@@ -1,7 +1,9 @@
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
+import {
+  defineComponent, ref, watch,
+} from 'vue';
 import TooltipButton from 'vue-media-annotator/components/TooltipButton.vue';
-import { useConfiguration } from 'vue-media-annotator/provides';
+import { useConfiguration, useHandler } from 'vue-media-annotator/provides';
 import { useRouter } from 'vue-router/composables';
 
 export default defineComponent({
@@ -30,6 +32,8 @@ export default defineComponent({
   setup() {
     const configMap = useConfiguration();
     const router = useRouter();
+    const { getDiveMetadataRootId } = useHandler();
+    const diveMetadataRootId = ref(getDiveMetadataRootId());
     const previous = ref(configMap.prevNext.value?.previous);
     const next = ref(configMap.prevNext.value?.next);
     watch(configMap.prevNext, () => {
@@ -40,10 +44,22 @@ export default defineComponent({
     const gotoId = (id: string) => {
       router.push({ name: 'viewer', params: { id } });
     };
+
+    const queryStringParams = ref('');
+    watch(getDiveMetadataRootId, (newval) => {
+      diveMetadataRootId.value = newval;
+      if (diveMetadataRootId.value) {
+        queryStringParams.value = `?diveMetadataRootId=${diveMetadataRootId.value}`;
+      } else {
+        queryStringParams.value = '';
+      }
+    }, { immediate: true });
+
     return {
       previous,
       next,
       gotoId,
+      queryStringParams,
     };
   },
 });
@@ -63,7 +79,7 @@ export default defineComponent({
         :tooltip-text="`Go to Previous Dataset: ${previous.name}`"
         outlined
         tile
-        :to="`/viewer/${previous.id}`"
+        :to="`/viewer/${previous.id}${queryStringParams}`"
       />
     </span>
     <slot name="middle" />
@@ -76,7 +92,7 @@ export default defineComponent({
         :tooltip-text="`Go to Next Dataset: ${next.name}`"
         outlined
         tile
-        :to="`/viewer/${next.id}`"
+        :to="`/viewer/${next.id}${queryStringParams}`"
       />
     </span>
   </v-row>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dive-dsa",
-  "version": "1.11.17",
+  "version": "1.11.18",
   "author": {
     "name": "Kitware, Inc.",
     "email": "Bryon.Lewis@kitware.com"

client/platform/web-girder/store/types.ts

@@ -12,7 +12,7 @@ import { Store } from 'vuex';
  *  or a simplified id/type pair.
  * These types are mutually exclusive.
  */
-export type RootlessLocationType = GirderModel | { _id: string; _modelType: GirderModelType };
+export type RootlessLocationType = GirderModel | { _id: string; _modelType: GirderModelType, parentId?: string | null };
 export type LocationType = RootlessLocationType | { type: 'collections' | 'users' | 'root' };
 export interface LocationState {
   location: LocationType | null;

client/platform/web-girder/views/AnnotationDataBrowser.vue

@@ -9,6 +9,7 @@ import { itemsPerPageOptions } from 'dive-common/constants';
 import { clientSettings } from 'dive-common/store/settings';
 import { getFolder } from 'platform/web-girder/api/girder.service';
 import TooltipButton from 'vue-media-annotator/components/TooltipButton.vue';
+import { useHandler } from 'vue-media-annotator/provides';
 import { useStore } from '../store/types';
 
 export default defineComponent({
@@ -26,6 +27,8 @@ export default defineComponent({
   setup(props) {
     const fileManager = ref();
     const store = useStore();
+    const { getDiveMetadataRootId } = useHandler();
+    const localDiveMetadataRootId = ref(getDiveMetadataRootId());
     const locationStore = store.state.Location;
     const { getters } = store;
     const showDialog = ref(false);
@@ -56,6 +59,18 @@ export default defineComponent({
       && !locationStore.selected.length
     ));
 
+    watch(showDialog, () => {
+      localDiveMetadataRootId.value = getDiveMetadataRootId();
+    });
+
+    const queryParams = computed(() => {
+      const params: Record<string, string> = {};
+      if (localDiveMetadataRootId.value !== null && (location.value?._id === (locationStore.location as GirderModel)?._id)) {
+        params.diveMetadataRootId = localDiveMetadataRootId.value;
+      }
+      return params;
+    });
+
     return {
       fileManager,
       locationStore,
@@ -68,6 +83,7 @@ export default defineComponent({
       /* methods */
       isAnnotationFolder,
       setLocation,
+      queryParams,
     };
   },
 });
@@ -129,7 +145,7 @@ export default defineComponent({
                 x-small
                 color="primary"
                 depressed
-                :to="{ name: 'viewer', params: { id: item._id } }"
+                :to="{ name: 'viewer', params: { id: item._id }, query: queryParams }"
               >
                 Launch Annotator
               </v-btn>

client/src/use/useURLParameters.ts

@@ -29,6 +29,20 @@ export default function useURLParameters(
     if (localDiveMetadataRootId.value !== null) {
       values.push(`diveMetadataRootId=${localDiveMetadataRootId.value}`);
     }
+    if (window.location.href.includes('diveMetadataRootId=')) {
+      // Make sure we add the diveMetadataRootId if it is not already there
+      if (localDiveMetadataRootId.value === null) {
+        const currentLocation = window.location.href;
+        const urlParams = currentLocation.slice(currentLocation.indexOf('?') + 1);
+        const urlSplitParams = urlParams.split('&');
+        urlSplitParams.forEach((item) => {
+          const splits = item.split('=');
+          if (splits.length > 1 && splits[0] === 'diveMetadataRootId') {
+            values.push(`diveMetadataRootId=${splits[1]}`);
+          }
+        });
+      }
+    }
     const currentLocation = window.location.href;
     if (values.length === 0) {
       window.history.replaceState(null, '', currentLocation.replace(/\?.*/, '')); // Override history

server/dive_server/web_client/package.json

@@ -14,7 +14,7 @@
         ]
     },
     "dependencies": {
-        "dive-dsa": "^1.11.1",
+        "dive-dsa": "^1.11.18",
         "webpack": "^2.7.0",
         "copy-webpack-plugin": "^4.5.2"
     }