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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.1.0-beta.0",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.1.0-beta.2",
+    "@abi-software/flatmapvuer": "^1.1.0",
     "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -55,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.5.1-beta.6"
+    "zincjs": "^1.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -2,15 +2,50 @@
   <div id="app">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap" />
     <drop-zone ref="dropzone" @files-drop="onFilesDrop">
-      <ScaffoldVuer v-if="url" ref="scaffold" class="vuer" :flatmapAPI="flatmapAPI" :display-u-i="displayUI" :url="url"
-        :help-mode="helpMode" :display-latest-changes="true" :display-minimap="displayMinimap"
-        :display-markers="displayMarkers" :enableOpenMapUI="true" :minimap-settings="minimapSettings"
-        :show-colour-picker="showColourPicker" :render="render" :region="region" :view-u-r-l="viewURL" :format="format"
-        :marker-labels="markerLabels" @open-map="openMap" @on-ready="onReady" @scaffold-selected="onSelected"
-        @scaffold-navigated="onNavigated" @timeChanged="updateCurrentTime" @zinc-object-added="objectAdded"
-        @vue:mounted="viewerMounted"/>
+      <ScaffoldVuer
+        v-if="url"
+        ref="scaffold"
+        class="vuer"
+        :flatmapAPI="flatmapAPI"
+        :display-u-i="displayUI"
+        :url="url"
+        :help-mode="helpMode"
+        :helpModeDialog="useHelpModeDialog"
+        :helpModeActiveItem="helpModeActiveItem"
+        @help-mode-last-item="onHelpModeLastItem"
+        @shown-tooltip="onTooltipShown"
+        @shown-map-tooltip="onMapTooltipShown"
+        :display-latest-changes="true"
+        :display-minimap="displayMinimap"
+        :display-markers="displayMarkers"
+        :enableOpenMapUI="true"
+        :marker-cluster="markerCluster"
+        :minimap-settings="minimapSettings"
+        :show-colour-picker="showColourPicker"
+        :render="render"
+        :region="region"
+        :view-u-r-l="viewURL"
+        :format="format"
+        :marker-labels="markerLabels"
+        @open-map="openMap"
+        @on-ready="onReady"
+        @scaffold-selected="onSelected"
+        @scaffold-navigated="onNavigated"
+        @timeChanged="updateCurrentTime"
+        @zinc-object-added="objectAdded"
+        @vue:mounted="viewerMounted"
+      />
     </drop-zone>
 
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="scaffoldHelp"
+      :scaffoldRef="scaffoldRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+
     <el-popover popper-class="options-container" placement="bottom" trigger="click" width="500" :teleported="false">
       <div>
         <el-row :gutter="20">
@@ -22,13 +57,17 @@
           </p>
         </el-row>
         <el-row :gutter="20">
-          <el-col :span="4" :offset="1">
+          <el-col :span="3" :offset="1">
             <el-switch v-model="displayUI" active-text="UI" />
           </el-col>
-          <el-col :span="6" :offset="1">
+          <el-col :span="4" :offset="1">
             <el-switch v-model="displayMarkers" active-text="Markers" active-icon-class="el-icon-location"
               active-color="#8300bf" />
           </el-col>
+          <el-col :span="6" :offset="1">
+            <el-switch v-model="markerCluster" active-text="Marker Cluster" active-icon-class="el-icon-location"
+              active-color="#8300bf" />
+          </el-col>
           <el-col :span="4" :offset="1">
             <el-switch v-model="displayMinimap" active-text="Minimap" active-icon-class="el-icon-discover"
               active-color="#8300bf" />
@@ -180,6 +219,7 @@ import {
   ElSwitch as Switch,
 } from "element-plus";
 import { useRoute, useRouter } from 'vue-router'
+import HelpModeDialog from './components/HelpModeDialog.vue';
 
 let texture_prefix = undefined;
 
@@ -200,9 +240,12 @@ export default {
     DropZone,
     ScaffoldVuer,
     ModelsTable,
+    HelpModeDialog,
   },
   data: function () {
     return {
+      consoleOn: true,
+      createPoints: false, 
       url: undefined,
       input: undefined,
       displayUI: true,
@@ -217,6 +260,7 @@ export default {
       tumbleOn: false,
       tumbleDirection: [1.0, 0.0],
       showColourPicker: true,
+      markerCluster: false,
       minimapSettings: {
         x_offset: 16,
         y_offset: 50,
@@ -224,7 +268,57 @@ export default {
         height: 128,
         align: "top-right",
       },
-      markerLabels: ["left atrium", "epicardium"],
+      markerLabels: [
+        "Spinal cord",
+        "urinary bladder",
+        "lower urinary tract",
+        "Peripheral nervous system",
+        "Dorsal root ganglion",
+        "cervicothoracic ganglion",
+        "stomach",
+        "enteric ganglion",
+        "myenteric nerve plexus",
+        "colon",
+        "Enteric Nervous System",
+        "pelvic ganglion",
+        "celiac ganglion",
+        "jugular ganglion",
+        "vagus nerve",
+        "Brainstem",
+        "heart",
+        "larynx",
+        "inferior vagus X ganglion",
+        "mucosa of stomach",
+        "lung",
+        "pelvic splanchnic nerve",
+        "small intestine",
+        "type EC enteroendocrine cell",
+        "body proper",
+        "skin epidermis",
+        "Diaphragm",
+        "sinus venosus",
+        "esophagus",
+        "Solitary nucleus",
+        "urethra",
+        "sympathetic nervous system",
+        "superior cervical ganglion",
+        "cardiac nerve plexus",
+        "ganglion",
+        "pancreas",
+        "Brain",
+        "autonomic nervous system",
+        "lower digestive tract",
+        "adipose tissue",
+        "white adipose tissue",
+        "brown adipose tissue",
+        "kidney",
+        "liver",
+        "phrenic nerve",
+        "submandibular ganglion",
+        "bone tissue",
+        "sciatic nerve",
+        "glossopharyngeal nerve"
+      ],
       render: true,
       region: "",
       viewURL: "",
@@ -239,6 +333,11 @@ export default {
       loadTextureVolumeOnReady: false,
       readyCallback: undefined,
       flatmapAPI: "https://mapcore-demo.org/devel/flatmap/v4/",
+      helpMode: false,
+      helpModeActiveItem: 0,
+      helpModeLastItem: false,
+      useHelpModeDialog: true,
+      scaffoldRef: null,
       route: useRoute(),
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
@@ -261,6 +360,11 @@ export default {
     syncMode: function (val) {
       this.$refs.scaffold.toggleSyncControl(val);
     },
+    helpMode: function (newVal) {
+      if (!newVal) {
+        this.helpModeActiveItem = 0;
+      }
+    },
   },
   mounted: function () {
     this._objects = [];
@@ -298,8 +402,10 @@ export default {
       });
     },
     objectAdded: function (zincObject) {
-      console.log(zincObject)
-      console.log(this.$refs.scaffold.$module.scene.getBoundingBox())
+      if (this.consoleOn) {
+        console.log(zincObject)
+        console.log(this.$refs.scaffold.$module.scene.getBoundingBox())
+      }
       if (this._objects.length === 0) {
         zincObject.setMarkerMode("on");
       }
@@ -309,7 +415,9 @@ export default {
       this._objects.push(zincObject);
     },
     openMap: function (map) {
-      console.log(map);
+      if (this.consoleOn) {
+        console.log(map);
+      }
     },
     featureTextureVolume: async function (overlap) {
       //this.$refs.scaffold.clearScene();
@@ -401,10 +509,12 @@ export default {
           };
         })
       );
-      console.log(
-        "found suggestions",
-        this.$refs.scaffold.fetchSuggestions(term)
-      );
+      if (this.consoleOn) {
+        console.log(
+          "found suggestions",
+          this.$refs.scaffold.fetchSuggestions(term)
+        );
+      }
     },
     autoTumble: function () {
       const flag = this.tumbleOn;
@@ -430,7 +540,7 @@ export default {
       });
     },
     onReady: function () {
-      console.log(this.$refs.scaffold)
+      if (this.consoleOn) console.log(this.$refs.scaffold)
       if (this.readyCallback) {
         this.readyCallback(this.$refs.scaffold, texture_prefix);
         this.readyCallback = undefined;
@@ -441,6 +551,7 @@ export default {
           testArmSlides(this.$refs.scaffold);
         }
       }
+      this.scaffoldRef = this.$refs.scaffold;
     },
     addLines: function (coord) {
       if (this.coordinatesClicked.length === 1) {
@@ -451,30 +562,23 @@ export default {
             0x00ee22,
           );
           this.coordinatesClicked.length = 0;
-          console.log(returned);
+          if (this.consoleOn) console.log(returned);
       } else {
         this.coordinatesClicked.push(coord);
       }
     },
     onSelected: function (data) {
-
       if (data && data.length > 0 && data[0].data.group) {
-        console.log(data[0].data.group)
-              /*
-        if (data[0].worldCoords) {
-          console.log(data[0].data);
+        if (this.consoleOn) console.log(data[0]);
+        if (this.createPoints && data[0].extraData.worldCoords) {
           const returned = this.$refs.scaffold.$module.scene.createPoints(
             "test",
             "points",
-            [data[0].worldCoords],
+            [data[0].extraData.worldCoords],
             undefined,
             0x0022ee,
           );
-
-          console.log(data[0].worldCoords)
-          this.addLines(data[0].worldCoords);
         }
-        */
         delete this.route.query["viewURL"];
         this.$refs.scaffold.showRegionTooltipWithAnnotations(data, false, true);
         if (this.onClickMarkers) this.$refs.scaffold.setMarkerModeForObjectsWithName(data[0].data.group, "on");
@@ -538,7 +642,31 @@ export default {
           this.viewURL = "";
         }
       })
-    }
+    },
+    onHelpModeShowNext: function () {
+      this.helpModeActiveItem += 1;
+    },
+    onHelpModeLastItem: function (isLastItem) {
+      if (isLastItem) {
+        this.helpModeLastItem = true;
+      }
+    },
+    onFinishHelpMode: function () {
+      this.helpMode = false;
+      // reset help mode to default values
+      this.helpModeActiveItem = 0;
+      this.helpModeLastItem = false;
+    },
+    onTooltipShown: function () {
+      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
+        this.$refs.scaffoldHelp.toggleTooltipHighlight();
+      }
+    },
+    onMapTooltipShown: function () {
+      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
+        this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
+      }
+    },
   },
 };
 </script>

package/src/components/HelpModeDialog.vue

@@ -0,0 +1,360 @@
+<template>
+  <div class="help-mode-dialog" :class="{'finish': lastItem}">
+    <h4>Help Mode</h4>
+
+    <template v-if="lastItem">
+      <p>
+        All caught up! <br>
+        Click 'Help' to restart.
+      </p>
+      <div>
+        <el-button class="button" @click="finishHelpMode">
+          Finish
+        </el-button>
+      </div>
+    </template>
+    <template v-else>
+      <p>Click "Next" to see the next item.</p>
+      <div>
+        <el-button class="button" @click="showNext">
+          Next
+        </el-button>
+        <el-button class="button secondary" @click="finishHelpMode">
+          Exit Help Mode
+        </el-button>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import {
+    ElButton as Button,
+  } from 'element-plus';
+
+  export default {
+    name: 'HelpModeDialog',
+    components: {
+      Button,
+    },
+    props: {
+      multiflatmapRef: {
+        type: Object,
+        default: null,
+      },
+      flatmapRef: {
+        type: Object,
+        default: null,
+      },
+      scaffoldRef: {
+        type: Object,
+        default: null,
+      },
+      lastItem: {
+        type: Boolean,
+        default: false,
+        required: false,
+      }
+    },
+    mounted: function () {
+      this.toggleHelpModeHighlight(true);
+      // For tooltips outside of Flatmap
+      this.toggleTooltipHighlight();
+    },
+    unmounted: function () {
+      this.toggleHelpModeHighlight(false);
+    },
+    watch: {
+      lastItem: function (isLastItem) {
+        if (isLastItem) {
+          this.toggleTooltipHighlight();
+        }
+      }
+    },
+    methods: {
+      showNext: function () {
+        this.$emit('show-next');
+      },
+      finishHelpMode: function () {
+        this.$emit('finish-help-mode');
+      },
+      /**
+       * This function must be called on 'shown-map-tooltip' event.
+       */
+      toggleTooltipPinHighlight: function () {
+        const currentFlatmapEl = this.getCurrentFlatmap();
+        this.resetHighlightedItems();
+
+        this.$nextTick(() => {
+          // Temporary solution to find the position of map marker from popover
+          const mapPins = currentFlatmapEl.querySelectorAll('.maplibregl-marker');
+          const mapPinPopover = currentFlatmapEl.querySelector('.flatmap-popup-popper');
+          const styleVal = mapPinPopover?.style?.transform || '';
+          const mapPopoverPosition = this.extractMarkerPosition(styleVal);
+
+          mapPins.forEach((mapPin) => {
+            const mapPinStyleVal = mapPin.style.transform;
+            const mapPinPosition = this.extractMarkerPosition(mapPinStyleVal);
+
+            if (mapPinPosition === mapPopoverPosition) {
+              mapPin.classList.add('in-help-highlight');
+            }
+          });
+        });
+      },
+      /**
+       * This function must be called on 'shown-tooltip' event.
+       */
+      toggleTooltipHighlight: function () {
+        this.resetHighlightedItems();
+
+        this.$nextTick(() => {
+          const activePoppers = document.querySelectorAll('.el-popper:not([style*="none"])');
+
+          activePoppers.forEach((activePopper) => {
+            const multiFlatmapTooltip = activePopper.classList.contains('flatmap-popper');
+            const flatmapTooltip = activePopper.classList.contains('el-fade-in-linear-enter-active');
+
+            if (multiFlatmapTooltip || flatmapTooltip) {
+              this.toggleHighlight(activePopper);
+            }
+          });
+        });
+      },
+      toggleHighlight: function (activePopper) {
+        const popperId = activePopper?.id || '';
+        const popperTrigger = document.querySelector(`[aria-describedby="${popperId}"]`);
+
+        if (popperTrigger) {
+          popperTrigger.classList.add('in-help-highlight');
+        }
+      },
+      resetHighlightedItems: function () {
+        const allHighlightedItems = document.querySelectorAll('.in-help-highlight');
+        allHighlightedItems.forEach((el) => {
+          el.classList.remove('in-help-highlight');
+        });
+      },
+      getCurrentScaffold: function () {
+        const scaffoldEl = this.scaffoldRef?.$el || null;
+        return scaffoldEl;
+      },
+      getCurrentMultiflatmap: function () {
+        const multiflatmapEl = this.multiflatmapRef?.$el || null;
+        return multiflatmapEl;
+      },
+      getCurrentFlatmap: function () {
+        const flatmap = this.flatmapRef || this.multiflatmapRef?.getCurrentFlatmap();
+        const flatmapEl = flatmap?.$el || null;
+        return flatmapEl;
+      },
+      toggleHelpModeHighlight: function (option) {
+        const currentMultiflatmapEl = this.getCurrentMultiflatmap();
+        const currentFlatmapEl = this.getCurrentFlatmap();
+        const currentScaffoldEl = this.getCurrentScaffold();
+        const allHighlightedItems = document.querySelectorAll('.in-help-highlight');
+
+        if (currentMultiflatmapEl) {
+          if (option) {
+            currentMultiflatmapEl.classList.add('in-help');
+          } else {
+            currentMultiflatmapEl.classList.remove('in-help');
+          }
+        }
+
+        if (currentFlatmapEl) {
+          if (option) {
+            currentFlatmapEl.classList.add('in-help');
+          } else {
+            currentFlatmapEl.classList.remove('in-help');
+          }
+        }
+
+        if (currentScaffoldEl) {
+          if (option) {
+            currentScaffoldEl.classList.add('in-help');
+          } else {
+            currentScaffoldEl.classList.remove('in-help');
+          }
+        }
+
+        if (!option) {
+          allHighlightedItems.forEach((el) => {
+            el.classList.remove('in-help-highlight');
+          });
+        }
+      },
+      /**
+       * Temporary solution to find the position of map marker from popover
+       */
+      extractMarkerPosition: function (str) {
+        const translateRegex = /translate\((.*?)\)/g;
+        const matches = str.match(translateRegex);
+        if (!matches) {
+          return '';
+        }
+        const lastMatch = matches[matches.length - 1];
+        const values = lastMatch.slice(10, -1);
+        return values;
+      },
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .help-mode-dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 300px;
+    padding: 1rem;
+    font-family: inherit;
+    font-size: 14px;
+    background: white;
+    border-radius: 4px 4px;
+    border: 1px solid $app-primary-color;
+    box-shadow: 0px 0px 160px 80px rgba(0,0,0,0.5);
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+
+    &.finish {
+      animation: shake 0.35s;
+      animation-delay: 0.7s;
+    }
+
+    h4 {
+      color: $app-primary-color;
+    }
+
+    h4, p {
+      margin: 0;
+    }
+
+    p {
+      line-height: 1.5;
+    }
+
+    .button {
+      color: #fff;
+      background-color: $app-primary-color;
+      transform: scale(1);
+      transform-origin: 50% 50%;
+      transition: all var(--el-transition-duration);
+
+      &:hover {
+        color: #fff !important;
+        background: #ac76c5 !important;
+        border: 1px solid #ac76c5 !important;
+      }
+
+      &:active {
+        transform: scale(0.95);
+      }
+
+      &.secondary {
+        background: #f3e6f9;
+        border-color: $app-primary-color;
+        color: $app-primary-color;
+
+        &:hover {
+          color: $app-primary-color !important;
+          background: #fff !important;
+        }
+      }
+    }
+  }
+
+  @keyframes shake {
+    0% {
+      transform: translateX(-50%) rotate(2deg);
+    }
+    25% {
+      transform: translateX(-50%) rotate(-2deg);
+    }
+    50% {
+      transform: translateX(-50%) rotate(2deg);
+    }
+    75% {
+      transform: translateX(-50%) rotate(-2deg);
+    }
+    100% {
+      transform: translateX(-50%) rotate(2deg);
+    }
+  }
+
+  // Just for App.vue with options popover on top
+  .help-mode-dialog {
+    .options-popover + .multi-container + & {
+      margin-top: 40px;
+    }
+    .options-popover:not([style*="display: none"]) + .multi-container + & {
+      margin-top: 175px;
+    }
+  }
+</style>
+
+<style lang="scss">
+  .scaffold-container.in-help,
+  .flatmap-container.in-help {
+    background: rgba(0,0,0,0.3);
+  }
+
+  .scaffold-container.in-help {
+    canvas {
+      opacity: 0.3;
+    }
+  }
+
+  .scaffold-container.in-help,
+  .flatmap-container.in-help {
+    .el-tooltip__trigger,
+    .el-popover {
+      opacity: 0.3;
+    }
+
+    .pathway-location:has(.in-help-highlight) {
+      opacity: 1;
+
+      .pathway-container {
+        background: transparent;
+      }
+
+      .container,
+      .legends-container,
+      .selections-container {
+        opacity: 0.3;
+      }
+    }
+
+    .maplibregl-canvas,
+    .maplibregl-ctrl-minimap {
+      opacity: 0.3;
+    }
+
+    .maplibregl-map,
+    .maplibregl-canvas {
+      pointer-events: none;
+    }
+  }
+
+  .in-help .el-popper:not([style*="none"]) {
+    opacity: 1 !important;
+  }
+
+  .in-help-highlight {
+    opacity: 1 !important;
+    background: white !important;
+    box-shadow: 0px 0px 128px 128px white !important;
+    animation: highlight-area 0.1s;
+
+    &.maplibregl-marker {
+      background: none !important;
+      box-shadow: 0px 0px 128px 128px rgba(255,255,255,0.5) !important;
+    }
+  }
+</style>