@abi-software/scaffoldvuer 1.1.0-beta.0 → 1.1.0

package/src/components/ScaffoldVuer.vue

@@ -37,6 +37,7 @@
           trigger="manual"
           width="80"
           popper-class="flatmap-popper"
+          ref="commentPopover"
           :visible="hoverVisibilities[9].value"
         >
           <template #reference>
@@ -57,6 +58,7 @@
           trigger="manual"
           width="80"
           popper-class="flatmap-popper"
+          ref="drawPointPopover"
           :visible="hoverVisibilities[10].value"
         >
           <template #reference>
@@ -77,6 +79,7 @@
           trigger="manual"
           width="80"
           popper-class="flatmap-popper"
+          ref="drawLinePopover"
           :visible="hoverVisibilities[11].value"
         >
           <template #reference>
@@ -97,6 +100,7 @@
         :visible="hoverVisibilities[6].value"
         :content="warningMessage"
         placement="right"
+        width="max-content"
         :teleported="false"
         popper-class="scaffold-popper message-popper right-popper non-selectable"
       >
@@ -120,6 +124,7 @@
         :teleported="false"
         trigger="manual"
         popper-class="scaffold-popper message-popper right-popper non-selectable"
+        ref="whatsNewPopover"
       >
         <template #reference>
           <div
@@ -137,9 +142,11 @@
         :visible="hoverVisibilities[5].value"
         content="Change region visibility"
         placement="right"
+        width="max-content"
         :teleported="false"
         trigger="manual"
         popper-class="scaffold-popper right-popper non-selectable"
+        ref="regionVisibilityPopover"
       >
         <template #reference>
           <tree-controls
@@ -159,6 +166,7 @@
       <el-popover
         v-if="timeVarying"
         ref="sliderPopover"
+        width="max-content"
         :visible="hoverVisibilities[4].value"
         content="Move the slider to animate the region"
         placement="top"
@@ -242,10 +250,12 @@
         <el-popover
           :visible="hoverVisibilities[0].value"
           content="Zoom in"
+          width="max-content"
           placement="left"
           :teleported="false"
           trigger="manual"
           popper-class="scaffold-popper left-popper non-selectable"
+          ref="zoomInPopover"
         >
           <template #reference>
             <map-svg-icon
@@ -261,9 +271,11 @@
           :visible="hoverVisibilities[1].value"
           content="Zoom out"
           placement="top-end"
+          width="max-content"
           :teleported="false"
           trigger="manual"
           popper-class="scaffold-popper popper-zoomout non-selectable"
+          ref="zoomOutPopover"
         >
           <template #reference>
             <map-svg-icon
@@ -280,7 +292,9 @@
           placement="top"
           :teleported="false"
           trigger="manual"
+          width="max-content"
           popper-class="scaffold-popper non-selectable"
+          ref="zoomFitPopover"
         >
           <div>
             Fit to
@@ -361,7 +375,7 @@
               @click="backgroundChangeCallback(item)"
             />
           </el-row>
-        </div>  
+        </div>
       </el-popover>
       <div
         class="settings-group"
@@ -374,7 +388,9 @@
             placement="right"
             :teleported="false"
             trigger="manual"
+            width="max-content"
             popper-class="scaffold-popper right-popper non-selectable"
+            ref="openMapPopover"
           >
             <template #reference>
               <map-svg-icon
@@ -393,9 +409,11 @@
             :visible="hoverVisibilities[3].value"
             content="Change background color"
             placement="right"
+            width="max-content"
             :teleported="false"
             trigger="manual"
             popper-class="scaffold-popper right-popper non-selectable"
+            ref="settingsPopover"
           >
             <template #reference>
               <map-svg-icon
@@ -527,6 +545,37 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * The active item index of help mode.
+     */
+    helpModeActiveItem: {
+      type: Number,
+      default: 0,
+    },
+    /**
+     * The option to use helpModeDialog.
+     * On default, `false`, clicking help will show all tooltips.
+     * If `true`, clicking help will show the help-mode-dialog.
+     */
+    helpModeDialog: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The last item of help mode.
+     */
+    helpModeLastItem: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The initial index number for help mode tooltips.
+     * Set negative (e.g. -1) if there are other tooltips outside of `hoverVisibilities`.
+     */
+    helpModeInitialIndex: {
+      type: Number,
+      default: 0,
+    },
     /**
      * Use for show/display beta warning icon.
      */
@@ -557,6 +606,13 @@ export default {
       type: Boolean,
       default: false,
     },
+    /**
+     * Display adjacent markers with a cluster marker.
+     */
+    markerCluster: {
+      type: Boolean,
+      default: false,
+    },
     markerLabels : {
       type: Array,
       default: function () {
@@ -668,6 +724,7 @@ export default {
     return {
       flatmapAPI: this.flatmapAPI,
       scaffoldUrl: this.url,
+      $annotator: this.annotator,
     };
   },
   data: function () {
@@ -693,20 +750,21 @@ export default {
       isTransitioning: false,
       tooltipAppendToBody: false,
       hoverVisibilities: [
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
-        { value: false },
+        { value: false, ref: 'zoomInPopover' }, // 0
+        { value: false, ref: 'zoomOutPopover' }, // 1
+        { value: false, ref: 'zoomFitPopover' }, // 2
+        { value: false, ref: 'settingsPopover' }, // 3
+        { value: false, ref: 'sliderPopover' }, // 4
+        { value: false, ref: 'regionVisibilityPopover' }, // 5
+        { value: false, ref: 'warningPopover' }, // 6
+        { value: false, ref: 'whatsNewPopover' }, // 7
+        { value: false, ref: 'openMapPopover' }, // 8
+        { value: false, ref: 'commentPopover' }, //9
+        { value: false, ref: 'drawPointPopover' }, //10
+        { value: false, ref: 'drawLinePopover' }, //11
       ],
       inHelp: false,
+      helpModeActiveIndex: this.helpModeInitialIndex,
       loading: false,
       duration: 3000,
       drawerOpen: true,
@@ -799,8 +857,18 @@ export default {
       },
       immediate: true,
     },
-    helpMode: function (val) {
-      this.setHelpMode(val);
+    helpMode: function (newVal, oldVal) {
+      if (newVal !== oldVal) {
+        this.setHelpMode(newVal)
+      }
+    },
+    helpModeActiveItem: function () {
+      // just take the action from helpModeActiveItem
+      // work with local value since the indexing is different
+      if (this.helpMode) {
+        this.helpModeActiveIndex += 1;
+        this.setHelpMode(this.helpMode);
+      }
     },
     displayMarkers: function (val) {
       this.$module.scene.displayMarkers = val;
@@ -827,6 +895,12 @@ export default {
     render: function (val) {
       this.toggleRendering(val);
     },
+    markerCluster: {
+      handler: function (val) {
+        this.$module.scene.enableMarkerCluster(val);
+      },
+      immediate: true,
+    },
     markerLabels: function(labels) {
       this.previousMarkerLabels.forEach((pml)=>{
         this.setMarkerModeForObjectsWithName(pml, "off");
@@ -859,6 +933,8 @@ export default {
     this.ro = new ResizeObserver(this.adjustLayout).observe(
       this.$refs.scaffoldContainer
     );
+    this.helpTextWait = [];
+    this.helpTextWait.length = this.hoverVisibilities.length;
     this.defaultRate = this.$module.getPlayRate();
     this.$module.zincRenderer.addPreRenderCallbackFunction(() => {
       this.currentTime = this.$module.getCurrentTime();
@@ -1135,7 +1211,7 @@ export default {
     /**
      * Find and and zoom into objects with the provided list of names.
      * @arg List of names
-     * 
+     *
      * @vuese
      */
     viewRegion: function (names) {
@@ -1226,7 +1302,7 @@ export default {
     },    
     /**
      * Return renderer information
-     * 
+     *
      * @vuese
      */
     getRendererInfo: function () {
@@ -1420,7 +1496,7 @@ export default {
      *
      * @arg Selected zinc objects
      * @arg Flag to determine if callback should be triggered when new selection
-     * is made 
+     * is made
      */
     objectSelected: function (objects, propagate) {
       this.updatePrimitiveControls(objects);
@@ -1431,7 +1507,7 @@ export default {
      *
      * @arg Hovered zinc objects
      * @arg Flag to determine if callback should be triggered when new selection
-     * is made 
+     * is made
      */
     objectHovered: function (objects, propagate) {
       this.hoveredObjects = objects;
@@ -1484,11 +1560,68 @@ export default {
      * Function to toggle on/off overlay help.
      */
     setHelpMode: function (helpMode) {
-      if (helpMode) {
+      const toolTipsLength = this.hoverVisibilities.length;
+      const lastIndex = toolTipsLength - 1;
+      const activePopoverObj = this.hoverVisibilities[this.helpModeActiveIndex];
+
+      if (activePopoverObj) {
+        const popoverRefId = activePopoverObj?.ref;
+        const popoverRef = this.$refs[popoverRefId];
+
+        if (popoverRef) {
+          // Open pathway drawer if the tooltip is inside or beside
+          const { parentElement, nextElementSibling } = popoverRef.$el;
+          const isPathwayContainer = (element) => {
+            return element && (
+              element.classList.contains('pathway-container') ||
+              element.classList.contains('pathway-location')
+            );
+          };
+
+          if (
+            isPathwayContainer(parentElement) ||
+            isPathwayContainer(nextElementSibling)
+          ) {
+            this.drawerOpen = true;
+          }
+        } else {
+          // skip the unavailable tooltips
+          this.helpModeActiveIndex += 1;
+        }
+      }
+
+      if (!helpMode) {
+        // reset to iniital state
+        this.helpModeActiveIndex = this.helpModeInitialIndex;
+      }
+
+      if (helpMode && this.helpModeActiveIndex >= lastIndex) {
+        /**
+         * This event is emitted when the tooltips in help mode reach the last item.
+         */
+        this.$emit('help-mode-last-item', true);
+      }
+
+      if (helpMode && !this.helpModeDialog) {
         this.inHelp = true;
         this.hoverVisibilities.forEach((item) => {
           item.value = true;
         });
+      } else if (helpMode && this.helpModeDialog && toolTipsLength > this.helpModeActiveIndex) {
+
+        // Show the map tooltip as first item
+        if (this.helpModeActiveIndex > -1) {
+
+          // wait for CSS transition
+          setTimeout(() => {
+            this.inHelp = false;
+            this.hoverVisibilities.forEach((item) => {
+              item.value = false;
+            });
+
+            this.showHelpText(this.helpModeActiveIndex, 200);
+          }, 300);
+        }
       } else {
         this.inHelp = false;
         this.hoverVisibilities.forEach((item) => {
@@ -1729,25 +1862,32 @@ export default {
      * This is called when mouse cursor enters supported elements
      * with help tootltips.
      */
-    showHelpText: function (helpTextNumber) {
+    showHelpText: function (helpTextNumber, timeout = 500) {
       if (!this.inHelp) {
-        this.helpTextWait = setTimeout(() => {
+        clearTimeout(this.helpTextWait[helpTextNumber]);
+        this.helpTextWait[helpTextNumber] = setTimeout(() => {
           this.hoverVisibilities[helpTextNumber].value = true;
-        }, 500);
+          /**
+           * This event is emitted after a tooltip in Flatmap is shown.
+           */
+          this.$emit('shown-tooltip');
+        }, timeout);
       }
     },
     /**
      * This is called when mouse cursor exits supported element..
      */
-    hideHelpText: function (helpTextNumber) {
+    hideHelpText: function (helpTextNumber, timeout = 500) {
       if (!this.inHelp) {
-        this.hoverVisibilities[helpTextNumber].value = false;
-        clearTimeout(this.helpTextWait);
+        clearTimeout(this.helpTextWait[helpTextNumber]);
+        this.helpTextWait[helpTextNumber] = setTimeout(() => {
+          this.hoverVisibilities[helpTextNumber].value = false;
+        }, timeout);
       }
     },
     /**
      * @vuese
-     * 
+     *
      * Search a object and display the tooltip
      * @arg text to search across
      * @arg toggle the tooltip if this is set
@@ -1757,7 +1897,7 @@ export default {
         if (text === undefined || text === "" ||
           ((Array.isArray(text) && text.length === 0))
         ) {
-          this.objectSelected([], true); 
+          this.objectSelected([], true);
           return false;
         } else {
           const result = this.$_searchIndex.searchAndProcessResult(text);
@@ -1787,7 +1927,7 @@ export default {
     },
     /**
      * @vuese
-     * 
+     *
      * Get the list of suggested terms based on the provided term.
      * This can be used for autocomplete.
      */
@@ -1910,7 +2050,7 @@ export default {
     /**
      * export current scene in GLTF.
      * @arg Return in binary form when set to true
-     * 
+     *
      * @vuese
      */
     exportGLTF: function (binary) {
@@ -2003,7 +2143,7 @@ export default {
     },
     /**
      * @vuese
-     * 
+     *
      * Force the renderer to resize
      */
     forceResize: function () {
@@ -2082,6 +2222,8 @@ export default {
   padding: 9px 10px;
   min-width: 150px;
   font-size: 12px;
+  white-space: initial !important;
+  text-align: initial;
   color: #fff;
 }
 
@@ -2314,9 +2456,9 @@ export default {
   &.shape {
     margin-left: 4px;
     margin-right: 4px;
-    color: var(--el-color-primary-light-5);
+    color: var(--el-color-primary-light-5)!important;
     &.active {
-      color: var(--el-color-primary);
+      color: var(--el-color-primary)!important;
     }
   }
 }
@@ -2388,7 +2530,7 @@ export default {
   border: 1px solid $app-primary-color;
   white-space: nowrap;
   min-width: unset;
-  width: unset!important;;
+  word-break: break-word;
   pointer-events: none;
 
   .el-popper__arrow {
@@ -2420,7 +2562,7 @@ export default {
 
 :deep(.popper-zoomout) {
   padding-right: 11px;
-  left: -21px !important;
+
   .popper__arrow {
     left: 53px !important;
   }

package/src/components/index.js

@@ -1,7 +1,9 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import ScaffoldVuer from "./ScaffoldVuer.vue";
+import HelpModeDialog from "./HelpModeDialog.vue";
 
 export {
-  ScaffoldVuer
+  ScaffoldVuer,
+  HelpModeDialog,
 };

package/src/components.d.ts

@@ -33,6 +33,7 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTree: typeof import('element-plus/es')['ElTree']
+    HelpModeDialog: typeof import('./components/HelpModeDialog.vue')['default']
     LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
     PointsControls: typeof import('./components/PointsControls.vue')['default']

package/src/scripts/OrgansRenderer.js

@@ -2,7 +2,6 @@ import { THREE } from 'zincjs';
 import { RendererModule } from './RendererModule.js';
 import Annotation from './Annotation.js';
 
-
 // Current model's associate data, data fields, external link, nerve map
 // informations,
 // these are proived in the organsFileMap array.
@@ -542,7 +541,7 @@ const OrgansSceneData = function() {
   	    	  _this.sceneData.viewURL = undefined;
 			      _this.sceneData.metaURL = url;
 						organScene.addZincObjectAddedCallbacks(_addOrganPartCallback(undefined, partName, false));
-			      organScene.loadGLTF(url, undefined, undefined, downloadCompletedCallback());
+			      organScene.loadGLTF(url, undefined, downloadCompletedCallback());
 			      _this.scene = organScene;
 			      _this.zincRenderer.setCurrentScene(organScene);
 			      _this.graphicsHighlight.reset();

package/src/scripts/Utilities.js

@@ -278,7 +278,6 @@ const createNewAnnotationsWithFeatures = (zincObject, region, group, scaffoldUrl
 export const addUserAnnotationWithFeature = (service, userToken, zincObject, region, group, scaffoldUrl, action) => {
   if (service && service.currentUser) {
     const annotation = createNewAnnotationsWithFeatures(zincObject, region, group, scaffoldUrl, action);
-    console.log(annotation)
     if (annotation) {
       annotation.creator = {...service.currentUser};
       if (!annotation.creator.orcid) annotation.creator.orcid = '0000-0000-0000-0000';
@@ -309,7 +308,6 @@ export const getDrawnAnnotations = async (service, userToken, scaffoldUrl) => {
 export const annotationFeaturesToPrimitives = (scene, features)  => {
   if (scene) {
     features.forEach((feature) => {
-      console.log(feature)
       const geometry = feature.geometry;
       const regionGroup = decodeURIComponent(feature.id);
       const last = regionGroup.lastIndexOf('/');