@abi-software/flatmapvuer 1.1.0-beta.3 → 1.1.0

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>

package/src/components/MultiFlatmapVuer.vue

@@ -8,7 +8,7 @@
         trigger="manual"
         popper-class="flatmap-popper flatmap-teleport-popper right-popper"
         width="max-content"
-        :visible="helpMode"
+        :visible="activateTooltipByIndex(0)"
         :teleported="false"
         ref="selectPopover"
       >
@@ -66,6 +66,12 @@
       @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
       :helpMode="activeSpecies == key && helpMode"
+      :helpModeActiveItem="helpModeActiveItem"
+      :helpModeDialog="helpModeDialog"
+      :helpModeInitialIndex="-2"
+      @help-mode-last-item="onHelpModeLastItem"
+      @shown-tooltip="onTooltipShown"
+      @shown-map-tooltip="onMapTooltipShown"
       :renderAtMounted="renderAtMounted"
       :displayMinimap="displayMinimap"
       :showStarInLegend="showStarInLegend"
@@ -463,6 +469,45 @@ export default {
         })
       }
     },
+    /**
+     * @vuese
+     * Function to activate help mode tooltip by item index number
+     */
+    activateTooltipByIndex: function (index) {
+      return (
+        index === this.helpModeActiveItem
+        && this.helpMode
+      );
+    },
+    /**
+     * @vuese
+     * Function to check the last item of help mode
+     */
+    onHelpModeLastItem: function (isLastItem) {
+      if (isLastItem) {
+        this.$emit('help-mode-last-item', true);
+      }
+    },
+    /**
+     * @vuese
+     * Function to emit event after a tooltip is shown.
+     */
+    onTooltipShown: function () {
+      /**
+       * This event is emitted after a tooltip in Flatmap is shown.
+       */
+      this.$emit('shown-tooltip');
+    },
+    /**
+     * @vuese
+     * Function to emit event after a tooltip on the map is shown.
+     */
+    onMapTooltipShown: function () {
+      /**
+       * This event is emitted after a tooltip on Flatmap's map is shown.
+       */
+      this.$emit('shown-map-tooltip');
+    },
   },
   props: {
     /**
@@ -494,6 +539,29 @@ 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 option to display minimap at the top-right corner of the map.
      */

package/src/components/ProvenancePopup.vue

@@ -251,7 +251,7 @@ export default {
       }
     },
     provSpeciesDescription: function () {
-      let text = 'Observed in'
+      let text = 'Studied in'
       this.entry.provenanceTaxonomyLabel.forEach((label) => {
         text += ` ${label},`
       })
@@ -341,7 +341,7 @@ export default {
   .el-popper__arrow {
     &:before {
       border-color: $app-primary-color;
-      background-color: #f3ecf6;
+      background-color: #ffffff;
     }
   }
 }

package/src/components/SelectionsGroup.vue

@@ -2,7 +2,21 @@
   <div class="selections-container">
     <el-row>
       <el-col :span="12">
-        <div class="checkall-display-text">{{ title }}</div>
+        <span class="checkall-display-text">{{ title }}</span>
+        <el-popover
+          width="250"
+          trigger="hover"
+          :teleported="false"
+          popper-class="popover-origin-help"
+          v-if="helpMessage"
+        >
+        <template v-if="helpMessage" #reference>
+          <el-icon class="info"><el-icon-warning /></el-icon>
+        </template>
+        <span style="word-break: keep-all">
+          {{ helpMessage }}
+        </span>
+      </el-popover>
       </el-col>
       <el-col :span="12">
         <el-checkbox
@@ -59,9 +73,13 @@
 
 <script>
 /* eslint-disable no-alert, no-console */
+import {
+  Warning as ElIconWarning,
+} from '@element-plus/icons-vue'
 import {
   ElCheckbox as Checkbox,
   ElCheckboxGroup as CheckboxGroup,
+  ElIcon as Icon,
   ElCol as Col,
   ElRow as Row,
 } from 'element-plus'
@@ -72,7 +90,9 @@ export default {
     Checkbox,
     CheckboxGroup,
     Col,
+    Icon,
     Row,
+    ElIconWarning,
   },
   methods: {
     /**
@@ -187,6 +207,10 @@ export default {
       type: String,
       default: 'line',
     },
+    helpMessage: {
+      type: String,
+      default: '',
+    },
     identifierKey: {
       type: String,
       default: 'id',
@@ -318,4 +342,22 @@ export default {
   width: 100%;
   top: 2px;
 }
+
+.info {
+  transform: rotate(180deg);
+  color: #8300bf;
+  margin-left: 8px;
+}
+
+
+:deep(.popover-origin-help.el-popover) {
+  text-transform: none !important; // need to overide the tooltip text transform
+  border: 1px solid $app-primary-color;
+  .el-popper__arrow {
+    &:before {
+      border-color: $app-primary-color;
+      background-color: #ffffff;
+    }
+  }
+}
 </style>

package/src/components/index.js

@@ -3,5 +3,6 @@
 import FlatmapVuer from './FlatmapVuer.vue'
 import MultiFlatmapVuer from './MultiFlatmapVuer.vue'
 import Tooltip from './Tooltip.vue'
+import HelpModeDialog from './HelpModeDialog.vue'
 
-export { FlatmapVuer, MultiFlatmapVuer, Tooltip}
+export { FlatmapVuer, MultiFlatmapVuer, Tooltip, HelpModeDialog }

package/src/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     DrawTool: typeof import('./components/DrawTool.vue')['default']
     DynamicLegends: typeof import('./components/legends/DynamicLegends.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
@@ -20,7 +21,6 @@ declare module 'vue' {
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowLeft: typeof import('@element-plus/icons-vue')['ArrowLeft']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
-    ElIconCircleClose: typeof import('@element-plus/icons-vue')['CircleClose']
     ElIconClose: typeof import('@element-plus/icons-vue')['Close']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
@@ -38,6 +38,7 @@ declare module 'vue' {
     ElTree: typeof import('element-plus/es')['ElTree']
     ExternalResourceCard: typeof import('./components/ExternalResourceCard.vue')['default']
     FlatmapVuer: typeof import('./components/FlatmapVuer.vue')['default']
+    HelpModeDialog: typeof import('./components/HelpModeDialog.vue')['default']
     MultiFlatmapVuer: typeof import('./components/MultiFlatmapVuer.vue')['default']
     ProvenancePopup: typeof import('./components/ProvenancePopup.vue')['default']
     SelectionsGroup: typeof import('./components/SelectionsGroup.vue')['default']

package/src/services/flatmapQueries.js

@@ -231,7 +231,6 @@ let FlatmapQueries = function () {
 
   this.queryForConnectivity = function (keastIds, signal, processConnectivity=true) {
     const data = { sql: this.buildConnectivitySqlStatement(keastIds) }
-    
     const headers = {
       method: 'POST',
       headers: {