@abi-software/flatmapvuer 1.1.0-beta.2 → 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

@@ -6,8 +6,9 @@
         content="Select a species"
         placement="right"
         trigger="manual"
-        popper-class="flatmap-popper right-popper"
-        :visible="helpMode"
+        popper-class="flatmap-popper flatmap-teleport-popper right-popper"
+        width="max-content"
+        :visible="activateTooltipByIndex(0)"
         :teleported="false"
         ref="selectPopover"
       >
@@ -62,8 +63,15 @@
          * @arg $event
          */
         $emit('open-map', $event)"
+      @pathway-selection-changed="onSelectionsDataChanged"
       :minZoom="minZoom"
-      :helpMode="helpMode"
+      :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"
@@ -120,6 +128,15 @@ export default {
     EventBus.on('onActionClick', (action) => {
       this.resourceSelected(action)
     })
+    EventBus.on('open-pubmed-url', (url) => {
+      /**
+       * This event is emitted when the user clicks
+       * on "Open publications in pubmed" button
+       * from provenance popup.
+       * @arg url
+       */
+      this.$emit('open-pubmed-url', url);
+    });
   },
   methods: {
     /**
@@ -244,6 +261,9 @@ export default {
        */
       this.$emit('pan-zoom-callback', payload)
     },
+    onSelectionsDataChanged: function (data) {
+      this.$emit('pathway-selection-changed', data);
+    },
     /**
      * @vuese
      * Function to show popup on map.
@@ -449,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: {
     /**
@@ -480,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.
      */
@@ -729,4 +811,4 @@ export default {
   --el-color-primary: #8300BF;
 }
 
-</style>
+</style>

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
@@ -11,6 +25,7 @@
           :indeterminate="isIndeterminate"
           v-model="checkAll"
           @change="handleCheckAllChange"
+          @click="onAllCheckboxNativeChange"
           >Display all</el-checkbox
         >
       </el-col>
@@ -35,6 +50,7 @@
               class="my-checkbox"
               :label="item[identifierKey]"
               @change="visibilityToggle(item[identifierKey], $event)"
+              @click="onCheckboxNativeChange"
               :checked="!('enabled' in item) || item.enabled === true"
             >
               <el-row class="checkbox-row">
@@ -57,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'
@@ -70,7 +90,9 @@ export default {
     Checkbox,
     CheckboxGroup,
     Col,
+    Icon,
     Row,
+    ElIconWarning,
   },
   methods: {
     /**
@@ -88,8 +110,52 @@ export default {
         }
       })
     },
+    setCheckboxActionData: function (containerEl, option) {
+      // option = 'individual' or 'all'
+      if (containerEl) {
+        const checkboxEl = containerEl.querySelector('input[type="checkbox"]');
+        const checkboxLabelEl = containerEl.querySelector('.el-checkbox__label');
+        const selectionsContainerEl = containerEl.closest('.selections-container');
+        const selectionsTitleEl = selectionsContainerEl.querySelector('.checkall-display-text');
+
+        // change true/false to checked/unchecked for readability
+        let checkedLabel = '';
+        if (checkboxEl) {
+          checkedLabel = checkboxEl.checked ? 'checked' : 'unchecked';
+        }
+
+        this.checkboxActionData = {
+          selectionsTitle: selectionsTitleEl ? selectionsTitleEl.innerText : '',
+          property: (checkboxEl && option !== 'all') ? checkboxEl.value : '',
+          label: checkboxLabelEl ? checkboxLabelEl.innerText : '',
+          checked: checkedLabel
+        };
+      } else {
+        // reset if no checkbox container found
+        this.checkboxActionData = {
+          selectionsTitle: '',
+          property: '',
+          label: '',
+          checked: '',
+        };
+      }
+    },
+    onCheckboxNativeChange: function (event) {
+      const checkboxContainerEl = event.target.closest('.checkbox-container');
+      this.setCheckboxActionData(checkboxContainerEl, 'individual');
+    },
+    onAllCheckboxNativeChange: function (event) {
+      const checkboxContainerEl = event.target.closest('.all-checkbox');
+      this.setCheckboxActionData(checkboxContainerEl, 'all');
+    },
     visibilityToggle: function (key, value) {
       this.$emit('changed', { key, value })
+      // emit event with checkbox data for tracking
+      if (key === this.checkboxActionData.property) {
+        // change true/false to checked/unchecked for readability
+        this.checkboxActionData.checked = value ? 'checked' : 'unchecked';
+      }
+      this.$emit('selections-data-changed', this.checkboxActionData);
     },
     checkboxMouseEnterEmit: function (key, value) {
       // Update the stated to send to the emit
@@ -109,6 +175,11 @@ export default {
         keys: this.selections.map((a) => a[this.identifierKey]),
         value: val,
       })
+      // emit event with checkbox data for tracking
+      this.checkboxActionData.property = this.identifierKey;
+      // change true/false to checked/unchecked for readability
+      this.checkboxActionData.checked = val ? 'checked' : 'unchecked';
+      this.$emit('selections-data-changed', this.checkboxActionData);
     },
     getBackgroundStyles: function (item) {
       if ('colour' in item && this.colourStyle === 'background') {
@@ -136,6 +207,10 @@ export default {
       type: String,
       default: 'line',
     },
+    helpMessage: {
+      type: String,
+      default: '',
+    },
     identifierKey: {
       type: String,
       default: 'id',
@@ -168,6 +243,12 @@ export default {
     return {
       checkedItems: [],
       checkAll: true,
+      checkboxActionData: {
+        selectionsTitle: '',
+        property: '',
+        label: '',
+        checked: '',
+      },
     }
   },
   mounted: function () {
@@ -261,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 }