@abi-software/scaffoldvuer 1.5.1 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.1.2",
+    "@abi-software/map-utilities": "^1.2.0",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.1",
     "@element-plus/icons-vue": "^2.3.1",

package/src/App.vue

@@ -297,7 +297,8 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { shallowRef } from 'vue';
+import { AnnotationService } from '@abi-software/sparc-annotation'
+import { markRaw, shallowRef } from 'vue';
 import { ScaffoldVuer } from "./components/index.js";
 import DropZone from "./app/DropZone.vue";
 import ModelsTable from "./app/ModelsTable.vue";
@@ -356,6 +357,11 @@ export default {
     ModelsTable,
     HelpModeDialog,
   },
+  provide() {
+    return {
+      $annotator: this.annotator,
+    }
+  },
   data: function () {
     return {
       consoleOn: true,
@@ -406,7 +412,8 @@ export default {
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
       ElIconFolderOpened: shallowRef(ElIconFolderOpened),
-      auto: NaN
+      auto: NaN,
+      annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
     };
   },
   watch: {
@@ -596,7 +603,7 @@ export default {
       }
       cb(
         this.$refs.scaffold.fetchSuggestions(term).map((item) => {
-          const value = item.terms.length > 1 ? item.terms[1] : item.terms[0];
+          const value = item.suggestion;
           return {
             value: value,
             label: value

package/src/components/ScaffoldTooltip.vue

@@ -14,7 +14,7 @@
       <template #default>
         <div class="tooltip-text">{{ label }}</div>
         <div class="tooltip-text" v-if="region">Region: {{ region }}</div>
-        <CreateTooltiipContent
+        <CreateTooltipContent
           v-show="createData.toBeConfirmed"
           :createData="createData"
           @confirm-create="$emit('confirm-create', $event)"
@@ -66,10 +66,9 @@ import {
 import {
   Delete as ElIconDelete,
 } from '@element-plus/icons-vue'
-import CreateTooltiipContent from "./CreateTooltipContent.vue";
 import { mapState } from 'pinia';
 import { useMainStore } from "@/store/index";
-import { Tooltip } from '@abi-software/map-utilities'
+import { CreateTooltipContent, Tooltip } from '@abi-software/map-utilities'
 import '@abi-software/map-utilities/dist/style.css'
 
 /**
@@ -79,7 +78,7 @@ export default {
   name: "ScaffoldTooltip",
   components: {
     Col,
-    CreateTooltiipContent,
+    CreateTooltipContent,
     ElIconDelete,
     Icon,
     Popover,
@@ -165,9 +164,7 @@ export default {
       }
     },
     hideTriggered: function() {
-      if (this.createData.toBeConfirmed) {
-        this.$emit('cancel-create');
-      }
+      this.$emit('tooltip-hide');
     },
   },
   watch: {

package/src/components/ScaffoldTreeControls.vue

@@ -142,6 +142,12 @@ export default {
             isRegion: true,
           };
           this.addTreeItem(data.children, childRegionItem, region);
+          //Special case for helper region
+          if (path === "/_helper") {
+            this.$nextTick(() => {
+              this.$refs.treeControls.$refs.regionTree.setChecked(childRegionItem.id, false);
+            });
+          }
         }
         _paths.shift();
         return this.findOrCreateRegion(childRegionItem, _paths, path);

package/src/components/ScaffoldVuer.vue

@@ -17,7 +17,8 @@
       :annotationDisplay="annotationDisplay"
       @confirm-create="confirmCreate($event)"
       @cancel-create="cancelCreate()"
-      @confirm-delete="confirmDelete($event)"
+      @confirm-delete="confirmDelete()"
+      @tooltip-hide="onTooltipHide()"
     />
     <div
       id="organsDisplayArea"
@@ -382,7 +383,7 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { markRaw, shallowRef } from 'vue';
+import { inject, markRaw, provide, shallowRef } from 'vue';
 import {
   WarningFilled as ElIconWarningFilled,
   ArrowDown as ElIconArrowDown,
@@ -454,10 +455,21 @@ export default {
     ScaffoldTreeControls
   },
   setup(props) {
-    const annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
-    return { annotator };
+    let annotator = inject('$annotator')
+    if (!annotator) {
+      annotator = markRaw(new AnnotationService(`${props.flatmapAPI}annotator`));
+      provide('$annotator', annotator)
+    }
+    return { annotator }
   },
   props: {
+    /**
+      * The option to show annotation information in sidebar
+      */
+    annotationSidebar: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * URL of the zincjs metadata. This value will be ignored if a valid
      * state prop is also provided.
@@ -698,7 +710,6 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       scaffoldUrl: this.url,
-      $annotator: this.annotator,
       boundingDims: this.boundingDims,
     };
   },
@@ -812,6 +823,11 @@ export default {
         centre: [0, 0, 0],
         size:[1, 1, 1],
       },
+      lastSelected: markRaw({
+        region: "",
+        group: "",
+        isSearch: false,
+      })
     };
   },
   watch: {
@@ -902,6 +918,24 @@ export default {
       }
       this.previousMarkerLabels = markRaw({...labels});
     },
+    annotationDisplay: function(value) {
+      if (this.annotationSidebar) {
+        if (value) {
+          const region = this.tData.region ? this.tData.region +"/" : "";
+          const annotationEntry = {
+            "featureId": region + this.tData.label,
+            "resourceId": this.url,
+            "resource": this.url,
+          };
+          this.$emit('annotation-open', {annotationEntry: annotationEntry,
+            commitCallback: this.commitAnnotationEvent});
+        } else {
+          if (!this.createData.toBeConfirmed || !this.createData.toBeDeleted) {
+            this.$emit("annotation-close");
+          }
+        }
+      }
+    }
   },
   beforeCreate: function () {
     this.$module = new OrgansViewer();
@@ -1171,13 +1205,16 @@ export default {
         this.$module.scene.removeTemporaryPrimitive(this._tempPoint);
         this._tempPoint = undefined;
       }
+      if (this.annotationSidebar){
+        this.$emit("annotation-close");
+      }
     },
     /**
      * Internal only.
      * Confirm delete of user created primitive.
      * This is only called from callback.
      */
-     confirmDelete: function() {
+    confirmDelete: function() {
       if (this._editingZincObject?.isEditable) {
         const regionPath = this._editingZincObject.region.getFullPath() + "/";
         const group = this._editingZincObject.groupName;
@@ -1191,6 +1228,15 @@ export default {
       }
       this.cancelCreate();
     },
+    /**
+     * Internal only.
+     * This is triggered when tooltip is hidden
+     */
+     onTooltipHide: function() {
+      if (this.createData.toBeConfirmed && !this.annotationSidebar) {
+        this.cancelCreate();
+      }
+    },
     formatTooltip(val) {
       if (this.timeMax >= 1000) {
         if (val) {
@@ -1286,6 +1332,7 @@ export default {
     toggleDrawing: function (type, icon) {
       this.createData.toBeDeleted = false;
       if (type === 'mode') {
+        this.cancelCreate()
         this.activeDrawMode = icon;
         this.createData.shape = '';
         this.$module.selectObjectOnPick = true;
@@ -1387,21 +1434,21 @@ export default {
       if (this.createData.toBeConfirmed === false) {
         this.createData.points.length = 0;
         this.createData.points.push(coords);
+        this.createData.toBeConfirmed = true;
         this.showRegionTooltipWithAnnotations(data, true, false);
         this.tData.x = 50;
         this.tData.y = 200;
         this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
-        this.createData.toBeConfirmed = true;
       }
     },
     drawLine: function(coords, data) {
       if (this.createData.toBeConfirmed === false) {
         if (this.createData.points.length === 1) {
           this.createData.points.push(coords);
+          this.createData.toBeConfirmed = true;
           this.showRegionTooltipWithAnnotations(data, true, false);
           this.tData.x = 50;
           this.tData.y = 200;
-          this.createData.toBeConfirmed = true;
         } else {
           this._tempPoint = this.$module.scene.addTemporaryPoints([coords], 0xffff00);
           this.createData.points.push(coords);
@@ -1508,7 +1555,6 @@ export default {
           } else {
             if (this.$refs.scaffoldTreeControls) {
               if (names.length > 0) {
-                //this.$refs.scaffoldTreeControls.changeActiveByNames(names, region, false);
                 this.$refs.scaffoldTreeControls.updateActiveUI(zincObjects);
                 this.updatePrimitiveControls(zincObjects);
               } else {
@@ -1516,6 +1562,17 @@ export default {
                 this.$refs.scaffoldTreeControls.removeActive(false);
               }
             }
+            //Store the following for state saving. Search will handle the case with more than 1
+            //identifiers.
+            if (event.identifiers.length === 1) {
+              this.lastSelected.isSearch = false;
+              this.lastSelected.region = event.identifiers[0].data.region;
+              this.lastSelected.group = event.identifiers[0].data.group;
+            } else if (event.identifiers.length === 0) {
+              this.lastSelected.isSearch = false;
+              this.lastSelected.region = "";
+              this.lastSelected.group = "";
+            }
             /**
              * Emit when an object is selected
              * @arg {Object} "Identifier of selected objects"
@@ -1525,10 +1582,8 @@ export default {
         } else if (event.eventType == 2) {
           if (this.selectedObjects.length === 0) {
             this.hideRegionTooltip();
-            // const offsets = this.$refs.scaffoldContainer.getBoundingClientRect();
             if (this.$refs.scaffoldTreeControls) {
               if (names.length > 0) {
-                //this.$refs.scaffoldTreeControls.changeHoverByNames(names, region, false);
                 this.$refs.scaffoldTreeControls.updateHoverUI(zincObjects);
               } else {
                 this.$refs.scaffoldTreeControls.removeHover(true);
@@ -1540,7 +1595,9 @@ export default {
                 : event.identifiers[0].data.group;
               if (event.identifiers[0].coords) {
                 this.tData.active = false;
-                this.tData.visible = true;
+                if (!this.annotationSidebar) {
+                  this.tData.visible = true;
+                }
                 this.tData.label = id;
                 if (event.identifiers[0].data.region) {
                   this.tData.region = event.identifiers[0].data.region;
@@ -1881,13 +1938,30 @@ export default {
       if (this.$module.scene) {
         const result = getObjectsFromAnnotations(this.$module.scene, annotations);
         if (result && result.objects.length > 0) {
-          return this.showRegionTooltipWithObjects(
-            result.label,
-            result.objects,
-            result.regionPath,
-            resetView,
-            liveUpdates
-          );
+          if (!this.annotationSidebar) {
+            return this.showRegionTooltipWithObjects(
+              result.label,
+              result.objects,
+              result.regionPath,
+              resetView,
+              liveUpdates
+            );
+          } else {
+            const region = this.tData.region ? this.tData.region +"/" : "";
+            const annotationEntry = {
+              "featureId": region + this.tData.label,
+              "resourceId": this.url,
+              "resource": this.url,
+            };
+            this.$emit('annotation-open', {
+              annotationEntry: annotationEntry,
+              createData: this.createData,
+              confirmCreate: this.confirmCreate,
+              cancelCreate: this.cancelCreate,
+              confirmDelete: this.confirmDelete,
+            });
+            return;
+          }
         }
       }
       this.hideRegionTooltip();
@@ -1900,7 +1974,7 @@ export default {
     changeViewingMode: function (modeName) {
       if (this.$module) {
         if (modeName) {
-          this.viewingMode = modeName
+          this.viewingMode = modeName;
         }
         if (this.viewingMode === "Annotation") {
           let authenticated = false;
@@ -2029,9 +2103,15 @@ export default {
         if (text === undefined || text === "" ||
           ((Array.isArray(text) && text.length === 0))
         ) {
+          this.lastSelected.region = "";
+          this.lastSelected.group = "";
+          this.lastSelected.isSearch = true;
           this.objectSelected([], true);
           return false;
         } else {
+          this.lastSelected.region = "";
+          this.lastSelected.group = text;
+          this.lastSelected.isSearch = true;
           const result = this.$_searchIndex.searchAndProcessResult(text);
           const zincObjects = result.zincObjects;
           if (zincObjects.length > 0) {
@@ -2091,26 +2171,42 @@ export default {
       }
       this.timeMax = this.$module.scene.getDuration();
     },
-    setURLFinishCallback: function (options) {
-      return () => {
-        if (options) {
-          if (options.viewport) {
-            this.$module.scene
-              .getZincCameraControls()
-              .setCurrentCameraSettings(options.viewport);
-          } else if (options.viewURL && options.viewURL !== "") {
-            const url = new URL(options.viewURL, this.url);
-            this.$module.scene.loadViewURL(url);
-          } else if (options.region && options.region !== "") {
-            this.viewRegion(options.region);
-          }
-          if (options.visibility) {
-            // Some UIs may not be ready at this time.
-            this.$nextTick(() => {
-              this.$refs.scaffoldTreeControls.setState(options.visibility);
-            });
+    restoreSettings: function(options) {
+      if (options) {
+        if (options.viewport) {
+          this.$module.scene
+            .getZincCameraControls()
+            .setCurrentCameraSettings(options.viewport);
+        } else if (options.viewURL && options.viewURL !== "") {
+          const url = new URL(options.viewURL, this.url);
+          this.$module.scene.loadViewURL(url);
+        } else if (options.region && options.region !== "") {
+          this.viewRegion(options.region);
+        }
+        if (options.visibility) {
+          // Some UIs may not be ready at this time.
+          this.$nextTick(() => {
+            this.$refs.scaffoldTreeControls.setState(options.visibility);
+          });
+        }
+        if (options.background) {
+          this.backgroundChangeCallback(options.background);
+        }
+        if (options.viewingMode) {
+          this.changeViewingMode(options.viewingMode);
+        }
+        const search = options.search;
+        if (search && search.group) {
+          if (search.isSearch) {
+            this.search(search.group, true);
+          } else {
+            this.changeActiveByName(search.group, search.region, true);
           }
         }
+      }
+    },
+    setURLFinishCallback: function (options) {
+      return () => {
         this.localAnnotationsList.length = 0;
         this.updateSettingsfromScene();
         this.$module.updateTime(0.01);
@@ -2132,6 +2228,7 @@ export default {
         const {centre, size} = this.$module.getCentreAndSize();
         this.boundingDims.centre = centre;
         this.boundingDims.size = size;
+        this.$nextTick(() => this.restoreSettings(options) );
         this.isReady = true;
       };
     },
@@ -2147,6 +2244,8 @@ export default {
         url: this._currentURL,
         viewport: undefined,
         visibility: undefined,
+        background: this.currentBackground,
+        viewingMode: this.viewingMode,
       };
       if (this.$refs.scaffoldTreeControls)
         state.visibility = this.$refs.scaffoldTreeControls.getState();
@@ -2154,6 +2253,9 @@ export default {
         let zincCameraControls = this.$module.scene.getZincCameraControls();
         state.viewport = zincCameraControls.getCurrentViewport();
       }
+      if (this.lastSelected && this.lastSelected.group) {
+        state.search = {...this.lastSelected};
+      }
       return state;
     },
     /**
@@ -2170,21 +2272,22 @@ export default {
             fileFormat: state.fileFormat,
             viewport: state.viewport,
             visibility: state.visibility,
+            background: state.background,
+            viewingMode: this.viewingMode,
+            search: state.search,
           });
         } else {
-          if (state.viewport || state.visibility) {
+          if (state.background || state.search || state.viewport || state.viewingMode || state.visibility) {
             if (this.isReady && this.$module.scene) {
-              if (state.viewport)
-                this.$module.scene
-                  .getZincCameraControls()
-                  .setCurrentCameraSettings(state.viewport);
-              if (state.visibility)
-                this.$refs.scaffoldTreeControls.setState(state.visibility);
+              this.restoreSettings(state);
             } else {
               this.$module.setFinishDownloadCallback(
                 this.setURLFinishCallback({
+                  background: state.background,
+                  viewingMode: state.viewingMode,
                   viewport: state.viewport,
                   visibility: state.visibility,
+                  search: state.search,
                 })
               );
             }
@@ -2241,6 +2344,7 @@ export default {
         });
       }
     },
+
     /**
      * Function used for reading in new scaffold metadata and a custom
      * viewport. This function will ignore the state prop and
@@ -2252,10 +2356,7 @@ export default {
      */
     setURLAndState: function (newValue, state) {
       if (newValue != this._currentURL) {
-        if (state && state.format) this.fileFormat = state.format;
-        let viewport = state && state.viewport ? state.viewport : undefined;
-        let visibility =
-          state && state.visibility ? state.visibility : undefined;
+        if (state?.format) this.fileFormat = state.format;
         this._currentURL = newValue;
         if (this.$refs.scaffoldTreeControls) this.$refs.scaffoldTreeControls.clear();
         this.loading = true;
@@ -2265,10 +2366,13 @@ export default {
         this.hideRegionTooltip();
         this.$module.setFinishDownloadCallback(
           this.setURLFinishCallback({
-            viewport: viewport,
+            background: state?.background,
             region: this.region,
+            search: state?.search,
+            viewingMode: state?.viewingMode,
             viewURL: this.viewURL,
-            visibility: visibility,
+            viewport: state?.viewport,
+            visibility: state?.visibility,
           })
         );
         if (this.fileFormat === "gltf") {

package/src/components.d.ts

@@ -7,21 +7,18 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    CreateTooltipContent: typeof import('./components/CreateTooltipContent.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElFooter: typeof import('element-plus/es')['ElFooter']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconPlus: typeof import('@element-plus/icons-vue')['Plus']
     ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
-    ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']