@abi-software/mapintegratedvuer 1.8.3 → 1.9.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.8.3",
+  "version": "1.9.0-beta.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -50,11 +50,11 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.8.2",
-    "@abi-software/map-side-bar": "^2.7.2",
-    "@abi-software/map-utilities": "^1.4.2",
+    "@abi-software/flatmapvuer": "^1.9.0-beta.0",
+    "@abi-software/map-side-bar": "^2.7.3-beta.0",
+    "@abi-software/map-utilities": "^1.5.0-beta.0",
     "@abi-software/plotvuer": "^1.0.3",
-    "@abi-software/scaffoldvuer": "^1.8.0",
+    "@abi-software/scaffoldvuer": "^1.9.0-beta.0",
     "@abi-software/simulationvuer": "1.0.1",
     "@abi-software/sparc-annotation": "0.3.2",
     "@abi-software/svg-sprite": "^1.0.1",
@@ -102,6 +102,9 @@
     "vue-docgen-api": "^4.79.2",
     "vue-router": "^4.2.5"
   },
+  "optionalDependencies": {
+    "@esbuild/darwin-arm64": "^0.25.3"
+  },
   "eslintConfig": {
     "root": true,
     "env": {

package/src/App.vue

@@ -64,6 +64,80 @@ import {
   ElRow as Row,
 } from 'element-plus';
 
+
+const getAnnotationId = (api, withAnnotation) => {
+  return new Promise((resolve) => {
+    let offlineAnnotations = JSON.parse(sessionStorage.getItem('anonymous-annotation')) || undefined;
+    console.log(withAnnotation)
+    if (withAnnotation && offlineAnnotations) {
+      let maxRetry = 3
+      const annotationUrl = api + '/annotation/getshareid';
+      const getId = (attempt) => {
+        fetch(annotationUrl, {
+          method: 'POST',
+          headers: {
+            'Content-type': 'application/json',
+          },
+          body: JSON.stringify({ state: offlineAnnotations }),
+        }).then((response) => {
+          if (response.ok) {
+            return response.json();
+          }
+          throw new Error('Unsuccessful attempt to get annotation id')
+        })
+        .then((data) => {
+          resolve(data.uuid);
+        })
+        .catch((error) => {
+          console.log(`Unable to create permalink: attempt ${attempt} of ${maxRetry}`)
+          if (maxRetry > attempt) {
+            getId(attempt + 1);
+          } else {
+            resolve(undefined);
+          }
+        })
+      }
+      getId(1);
+    } else {
+      resolve(undefined);
+    }
+  });
+}
+
+const getAnnotationState = (api, annotationId) => {
+  return new Promise((resolve) => {
+    let maxRetry = 3
+    const annotationUrl = api + '/annotation/getstate';
+    const getState = (attempt) => {
+      fetch(annotationUrl, {
+        method: 'POST',
+        headers: {
+          'Content-type': 'application/json',
+        },
+        body: JSON.stringify({ uuid: annotationId }),
+      }).then((response) => {
+        if (response.ok) {
+          return response.json()
+        }
+        throw new Error('Unsuccessful attempt to get annotations')
+      })
+      .then((data) => {
+        resolve(data);
+      })
+      .catch((error) => {
+        console.log(error)
+        console.log(`Unable to get annotation state: attempt ${attempt} of ${maxRetry}`)
+        if (maxRetry > attempt) {
+          getState(attempt + 1);
+        } else {
+          resolve(undefined);
+        }
+      })
+    }
+    getState(1);
+  });
+}
+
 export default {
   name: 'app',
   components: {
@@ -118,20 +192,42 @@ export default {
       if (this.mapSettings.length > 0)
         this.$refs.map.setState(this.mapSettings.pop());
     },
-    updateUUID: function() {
-      let xmlhttp = new XMLHttpRequest();
+    updateUUID: function(withAnnotation) {
       let url = this.api + 'map/getshareid';
-      let state = this.$refs.map.getState();
-      xmlhttp.open('POST', url, true);
-      //Send the proper header information along with the request
-      xmlhttp.setRequestHeader('Content-type', 'application/json');
-      xmlhttp.onreadystatechange = () => {//Call a function when the state changes.
-          if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
-            let state = JSON.parse(xmlhttp.responseText);
-            this.uuid = state.uuid;
+      let state = this.$refs.map.getState(false);
+
+      const maxRetry = 3;
+      const getShareLink = (attempt) => {
+        fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-type': 'application/json',
+          },
+          body: JSON.stringify({ state: state }),
+        })
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
           }
+          throw new Error('Unsuccessful attempt to get shareid')
+        })
+        .then((data) => {
+          this.uuid = data.uuid
+        })
+        .catch((error) => {
+          console.log(`Unable to create permalink: attempt ${attempt} of ${maxRetry}`)
+          if (maxRetry > attempt) {
+            getShareLink(attempt + 1)
+          }
+        })
       }
-      xmlhttp.send(JSON.stringify({"state": state}));
+      getAnnotationId(this.api, withAnnotation).then((annotationId) => {
+        if (annotationId) {
+          state.annotationId = annotationId;
+        }
+        console.log(state)
+        getShareLink(1)
+      });
 
     },
     setFlatmap: function() {
@@ -213,7 +309,21 @@ export default {
           xmlhttp.onreadystatechange = () => {//Call a function when the state changes.
               if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                 let state = JSON.parse(xmlhttp.responseText);
-                this.state = state.state;
+                console.log(state)
+                if (state?.state?.annotationId) {
+                  getAnnotationState(this.api, state.state.annotationId).
+                  then((data) => {
+                    console.log(data)
+                    if (data) {
+                      sessionStorage.setItem('anonymous-annotation', JSON.stringify(data.state))
+                    }
+                    this.state = state.state;
+                  });
+                } else {
+                  this.state = state.state;
+                }
+                
+                console.log(state)
               }
           }
           xmlhttp.send(JSON.stringify({"uuid": this.uuid}));

package/src/components/DialogToolbarContent.vue

@@ -111,31 +111,84 @@
         popper-class="link-popover"
         virtual-triggering
       >
-        <el-row :gutter="20"
-          v-loading="loadingLink"
-          element-loading-text="Creating link...">
-          <el-col :span="20">
-            <el-input
-              class="link-input"
-              size="small"
-              placeholder="Permanant Link Here"
-              :readonly=true
-              v-model="shareLink"
-              ref="linkInput">
-            </el-input>
-          </el-col>
-          <el-col :span="4">
-            <el-popover class="tooltip" content="Copy link" placement="bottom-end"
-              :show-after="helpDelay" :teleported=false trigger="hover"
-              popper-class="header-popper">
-              <template #reference>
-                <el-button class="copy-button"
-                  :icon="ElIconCopyDocument" size="small"
-                  @click="copyShareLink"></el-button>
-              </template>
-            </el-popover>
-          </el-col>
+        <template v-if="displayShareOptions">
+          <el-row>
+            <el-col :span="8">
+              <el-popover class="tooltip"
+                content="Create a permanent link for current views and settings." 
+                placement="bottom-end"
+                :show-after="helpDelay" :teleported=false trigger="hover"
+                popper-class="header-popper"
+              >
+                <template #reference>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="getShareLink(false)"
+                    class="share-options"
+                  >
+                    Settings Only
+                  </el-button>
+                </template>
+              </el-popover>
+            </el-col>
+            <el-col :span="14">
+              <el-popover class="tooltip"
+                placement="bottom-end"
+                :show-after="helpDelay" :teleported=false trigger="hover"
+                popper-class="header-popper"
+              >
+                <template #reference>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="getShareLink(true)"
+                    class="share-options"
+                  >
+                    Settings with Annotations
+                    (Valid for 30 days)
+                  </el-button>
+                </template>
+                <template #default>
+                  Create a link for current views settings 
+                  <br>
+                  and anonymous annotations.
+                  <br>
+                  NOTE: Annotations will only be stored for
+                  <br>
+                  30 days on the server.
+                </template>
+              </el-popover>
+            </el-col>
         </el-row>
+        </template>
+        <template v-else>
+          <el-row :gutter="20"
+            v-loading="loadingLink"
+            element-loading-text="Creating link...">
+            <el-col :span="20">
+              <el-input
+                class="link-input"
+                size="small"
+                placeholder="Permanant Link Here"
+                :readonly=true
+                v-model="shareLink"
+                ref="linkInput">
+              </el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-popover class="tooltip" content="Copy link" placement="bottom-end"
+                :show-after="helpDelay" :teleported=false trigger="hover"
+                popper-class="header-popper">
+                <template #reference>
+                  <el-button class="copy-button"
+                    :icon="ElIconCopyDocument" size="small"
+                    @click="copyShareLink"></el-button>
+                </template>
+              </el-popover>
+            </el-col>
+          </el-row>
+        </template>
       </el-popover>
       <el-popover class="tooltip"  content="Get permalink" placement="bottom-end"
         :show-after="helpDelay" :teleported=false trigger="hover"
@@ -145,7 +198,7 @@
           <map-svg-icon icon="permalink"
             ref="permalinkRef"
             class="header-icon"
-            @click="getShareLink"
+            @click="requestShareLink"
             v-show="shareLink"
           />
         </template>
@@ -156,7 +209,6 @@
           <map-svg-icon icon="close" class="header-icon" @click="close" v-show="showIcons"/>
         </template>
       </el-popover>
-
     </el-row>
   </div>
 </template>
@@ -260,7 +312,7 @@ export default {
     return {
       isFullscreen: false,
       loadingLink: true,
-      shareLinkDisplay: false,
+      displayShareOptions: false,
       independent: true,
       failedSearch: undefined,
       activeViewRef: undefined,
@@ -309,10 +361,17 @@ export default {
     setFailedSearch: function(result) {
       this.failedSearch = result;
     },
-    getShareLink: function() {
+    requestShareLink: function() {
+      if (sessionStorage.getItem('anonymous-annotation')) {
+        this.displayShareOptions = true;
+      } else {
+        this.getShareLink(false);
+      }
+    },
+    getShareLink: function(withAnnotation) {
+      this.displayShareOptions = false;
       this.loadingLink = true;
-      this.shareLinkDisplay = true;
-      EventBus.emit("updateShareLinkRequested");
+      EventBus.emit("updateShareLinkRequested", withAnnotation);
     },
     viewClicked: function(view) {
       this.splitFlowStore.updateActiveView({
@@ -364,6 +423,17 @@ export default {
   height:32px;
 }
 
+.share-options.el-button {
+  font-family: inherit;
+
+  &:hover,
+  &:focus {
+    background: $app-primary-color;
+    box-shadow: -3px 2px 4px #00000040;
+    color: #fff;
+  }
+}
+
 :deep(.header-popper.el-popover.el-popper) {
   padding: 6px 4px;
   font-size:12px;
@@ -372,6 +442,7 @@ export default {
   border: 1px solid $app-primary-color;
   white-space: nowrap;
   min-width: unset;
+
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;

package/src/components/MapContent.vue

@@ -196,11 +196,26 @@ export default {
         containerB.append(teleportedPopover);
       });
     },
+    /**
+     * @public
+     * Restore state of the map viewer from a state provided in the
+     * state argument, use the getState method to get the current state.
+     * 
+     * @arg `state`
+     */
     setState: function(state){
       return this.$refs.flow.setState(state);
     },
-    getState: function(){
-      return this.$refs.flow.getState();
+    /**
+     * @public
+     * Get the current state of the map viewer, these states can be used to
+     * restore settings and viewers using the setState method.
+     * Set offlineAnnotations to true if the user would like to perserve the
+     * state of offline annotations.
+     * @arg `offlineAnnotations` 
+     */
+    getState: function(offlineAnnotations = false){
+      return this.$refs.flow.getState(offlineAnnotations);
     },
     /**
      * @public
@@ -358,11 +373,11 @@ export default {
     this.splitFlowStore?.getAvailableTerms(this.settingsStore.sparcApi);
   },
   mounted: async function() {
-    EventBus.on("updateShareLinkRequested", () => {
+    EventBus.on("updateShareLinkRequested", (data) => {
       /**
        * This event emits when the share link is requested.
        */
-      this.$emit("updateShareLinkRequested");
+      this.$emit("updateShareLinkRequested", data);
     });
     EventBus.on('trackEvent', (taggingData) => {
       /**

package/src/components/SplitFlow.vue

@@ -126,6 +126,7 @@ export default {
       confirmCreateCallback: undefined,
       cancelCreateCallback: undefined,
       confirmDeleteCallback: undefined,
+      confirmCommentCallback: undefined,
       createData: {},
     }
   },
@@ -464,7 +465,7 @@ export default {
       if (state.splitFlow) this.splitFlowStore.setState(state.splitFlow);
       else this.entries.forEach(entry => this.splitFlowStore.setIdToPrimaryPane(entry.id));
     },
-    getState: function () {
+    getState: function (offlineAnnotations = false) {
       let state = JSON.parse(JSON.stringify(this.entriesStore.$state));
       let splitdialog = this.$refs.splitdialog;
       let dialogStates = splitdialog.getContentsState();
@@ -477,6 +478,13 @@ export default {
             delete entry.viewUrl;
           if (entry.type === "MultiFlatmap" && "uberonId" in entry)
             delete entry.uberonId;
+          if (offlineAnnotations === false) {
+            if (entry.type === "Scaffold" && entry?.state?.offlineAnnotations) {
+              delete entry.state.offlineAnnotations;
+            } else if (entry?.state?.state?.offlineAnnotations) {
+              delete entry.state.state.offlineAnnotations;
+            }
+          }
         }
       }
       state.splitFlow = this.splitFlowStore.getState();
@@ -541,6 +549,8 @@ export default {
     onAnnotationSubmitted: function(annotation) {
       if (this.annotationCallback) {
         this.annotationCallback(annotation);
+      } else if (this.confirmCommentCallback) {
+        this.confirmCommentCallback(annotation)
       }
     },
     onConfirmCreate: function(payload) {
@@ -591,6 +601,7 @@ export default {
       this.confirmCreateCallback = markRaw(payload.confirmCreate);
       this.cancelCreateCallback = markRaw(payload.cancelCreate);
       this.confirmDeleteCallback = markRaw(payload.confirmDelete);
+      this.confirmCommentCallback = markRaw(payload.confirmComment);
       if (this.$refs.sideBar) {
         this.tabClicked({id: 3, type: 'annotation'});
         this.$refs.sideBar.setDrawerOpen(true);