@abi-software/mapintegratedvuer 1.1.0-beta.5 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.1.0-beta.5",
+  "version": "1.1.0",
   "license": "Apache-2.0",
   "scripts": {
     "serve": "vite --host --force",
@@ -48,10 +48,10 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.1.0-beta.3",
+    "@abi-software/flatmapvuer": "^1.1.0",
     "@abi-software/map-side-bar": "^2.2.0",
     "@abi-software/plotvuer": "1.0.0",
-    "@abi-software/scaffoldvuer": "^1.1.0-beta.1",
+    "@abi-software/scaffoldvuer": "^1.1.0",
     "@abi-software/simulationvuer": "1.0.0",
     "@abi-software/svg-sprite": "1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
@@ -89,7 +89,7 @@
     "happy-dom": "^13.3.8",
     "jsdom": "^16.2.2",
     "jsdom-global": "^3.0.2",
-    "mocha": "^8.1.3",
+    "mocha": "^10.4.0",
     "mochapack": "^2.1.4",
     "mochawesome": "^7.1.3",
     "mochawesome-merge": "^4.3.0",
@@ -124,6 +124,9 @@
       }
     ]
   },
+  "overrides": {
+    "@abi-software/flatmapvuer": "$@abi-software/flatmapvuer"
+  },
   "browserslist": [
     "> 1%",
     "last 2 versions"

package/src/App.vue

@@ -32,7 +32,16 @@
         </el-popover>
       </div>
     <div class="map-app">
-      <MapContent ref="map" :startingMap="startingMap" :options="options" :state="state" :shareLink="shareLink" @updateShareLinkRequested="updateUUID" @isReady="mapIsReady"/>
+      <MapContent
+        ref="map"
+        :startingMap="startingMap"
+        :options="options"
+        :state="state"
+        :shareLink="shareLink"
+        :useHelpModeDialog="true"
+        @updateShareLinkRequested="updateUUID"
+        @isReady="mapIsReady"
+      />
     </div>
   </div>
 </template>

package/src/components/FlatmapContextCard.vue

@@ -56,22 +56,34 @@ export default {
     sckanReleaseDisplay: function() {
       let sckanRelease = "Unknown"
       if(this.mapImpProv){
-        let sckanCreated = this.mapImpProv.sckan.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
-        let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
-        sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
-            day: '2-digit',
-            month: 'long',
-            year: 'numeric',
-        })
+        sckanRelease = this.mapImpProv.connectivity?.npo.date
+        if (!sckanRelease) {
+          let sckanCreated = this.mapImpProv.sckan?.created ? this.mapImpProv.sckan.created : this.mapImpProv.sckan
+          let isoTime = sckanCreated.replace(',', '.') // Date time does not accept commas but Sckan uses them
+          sckanRelease = new Date(isoTime).toLocaleDateString('en-US', {
+              day: '2-digit',
+              month: 'long',
+              year: 'numeric',
+          })
+        }
+        if (!sckanRelease) {
+          sckanRelease = "Unknown";
+        }
       }
       return sckanRelease 
     },
     sckanReleaseLink: function() {
-      let sckanRelease = "Unknown"
+      let sckanLink = "Unknown"
       if(this.mapImpProv){
-        sckanRelease = this.mapImpProv.sckan.release
+        sckanLink = this.mapImpProv.connectivity?.npo.path
+        if (!sckanLink) {
+          sckanLink = this.mapImpProv.sckan?.release
+        }
+        if (!sckanLink) {
+          sckanLink = "Unknown"
+        }
       }
-      return sckanRelease 
+      return sckanLink
     },
     flatmapSource: function() {
       let flatmapSource = "Unknown"

package/src/components/MapContent.vue

@@ -24,6 +24,7 @@ import SplitFlow from './SplitFlow.vue';
 import EventBus from './EventBus';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
+import { useSplitFlowStore } from '../stores/splitFlow';
 import { findSpeciesKey } from './scripts/utilities.js';
 import { MapSvgSpriteColor} from '@abi-software/svg-sprite';
 import { initialState } from "./scripts/utilities.js";
@@ -72,7 +73,16 @@ export default {
     startingMap: {
       type: String,
       default: "AC"
-    }
+    },
+    /**
+     * To use help-mode-dialog when user clicks "Help".
+     * This option is available on Flatmap, MultiFlatmap, and Scaffold.
+     * When this is set to `true`, "Help" tooltips will be shown one by one.
+     */
+    useHelpModeDialog: {
+      type: Boolean,
+      default: false,
+    },
   },
   data: function () {
     return {
@@ -264,7 +274,7 @@ export default {
     },
   },
   computed: {
-    ...mapStores(useSettingsStore),
+    ...mapStores(useSettingsStore, useSplitFlowStore),
     stateToSet() {
       return this.state ? this.state : this.initialState;
     },
@@ -289,6 +299,7 @@ export default {
       this.options.nlLinkPrefix ? this.settingsStore.updateNLLinkPrefix(this.options.nlLinkPrefix) : null
       this.options.rootUrl ? this.settingsStore.updateRootUrl(this.options.rootUrl) : null
     }
+    this.splitFlowStore?.reset();
   },
   mounted: async function() {
     EventBus.on("updateShareLinkRequested", () => {
@@ -297,10 +308,17 @@ export default {
        */
       this.$emit("updateShareLinkRequested");
     });
+    EventBus.on('trackEvent', (taggingData) => {
+      /**
+       * This event triggers data tracking for Google Tag Manager (GTM) related to map interactions.
+       */
+      this.$emit('trackEvent', taggingData);
+    });
     if (!this.state) {
       this.initialState = await initialState(this.startingMap, this.options.sparcApi);
     }
     this.isReady = true;
+    this.settingsStore.updateUseHelpModeDialog(this.useHelpModeDialog);
   }
 }
 

package/src/components/SplitDialog.vue

@@ -73,10 +73,10 @@ export default {
       return refName;
     },
     getStyle: function(id) {
-      /* 
-        Set the style based on the position of the spltters 
+      /*
+        Set the style based on the position of the spltters
         Header is 30px in height and the splitter is 1px in
-        height/width. The width, height and positon of the 
+        height/width. The width, height and positon of the
         viewer should take that into account.
       */
       const refName = this.getRefsName(id);
@@ -124,7 +124,7 @@ export default {
       return states;
     },
     setStyles: function(refName, rect) {
-      if (this.$refs && ('tabContainer' in this.$refs)) {
+      if (this.$refs && this.$refs.tabContainer) {
         const bound = this.$refs.tabContainer.getBoundingClientRect();
         const style = {};
         style["width"] = `${rect.width}px`;

package/src/components/SplitFlow.vue

@@ -95,7 +95,6 @@ export default {
       activeDockedId : 1,
       filterTriggered: false,
       availableFacets: [],
-      hoveredMarkerDelay: undefined,
     }
   },
   watch: {
@@ -258,14 +257,7 @@ export default {
     hoverChanged: function (data) {
       const hoverEntries = data && data.anatomy ? data.anatomy : []
       this.settingsStore.updateHoveredMarkers(hoverEntries);
-      if (!hoverEntries.length) {
-        this.hoveredMarkerDelay = setTimeout(() => {
-          EventBus.emit("markerUpdate");
-        }, 3000)
-      } else {
-        clearTimeout(this.hoveredMarkerDelay)
-        EventBus.emit("markerUpdate");
-      }
+      EventBus.emit("markerUpdate");
     },
     searchChanged: function (data) {
       if (data && data.type == "query-update") {
@@ -487,6 +479,11 @@ export default {
     EventBus.on("OpenNewMap", type => {
       this.openNewMap(type);
     });
+    EventBus.on("startHelp", () => {
+      if (this.$refs.sideBar) {
+        this.$refs.sideBar.close();
+      }
+    });
     this.$nextTick(() => {
       if (this.search === "" && this._facets.length === 0) {
         if (this.$refs.sideBar) {

package/src/components/viewers/Flatmap.vue

@@ -8,6 +8,12 @@
     style="height: 100%; width: 100%"
     :minZoom="entry.minZoom"
     :helpMode="helpMode"
+    :helpModeActiveItem="helpModeActiveItem"
+    :helpModeInitialIndex="-1"
+    :helpModeDialog="useHelpModeDialog"
+    @help-mode-last-item="onHelpModeLastItem"
+    @shown-tooltip="onTooltipShown"
+    @shown-map-tooltip="onMapTooltipShown"
     :pathControls="true"
     ref="flatmap"
     @ready="flatmapReadyCall"
@@ -19,11 +25,21 @@
     @open-map="openMap"
     @pathway-selection-changed="onPathwaySelectionChanged"
   />
+
+  <HelpModeDialog
+    v-if="helpMode && useHelpModeDialog"
+    ref="flatmapHelp"
+    :flatmapRef="flatmapRef"
+    :lastItem="helpModeLastItem"
+    @show-next="onHelpModeShowNext"
+    @finish-help-mode="onFinishHelpMode"
+  />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
-import { FlatmapVuer } from "@abi-software/flatmapvuer";
+import { FlatmapVuer, HelpModeDialog } from "@abi-software/flatmapvuer";
+import Tagging from '../../services/tagging.js';
 import EventBus from "../EventBus";
 import ContentMixin from "../../mixins/ContentMixin";
 import DynamicMarkerMixin from "../../mixins/DynamicMarkerMixin";
@@ -35,6 +51,7 @@ export default {
   mixins: [ ContentMixin, DynamicMarkerMixin ],
   components: {
     FlatmapVuer,
+    HelpModeDialog,
   },
   methods: {
     getState: function () {
@@ -47,11 +64,12 @@ export default {
       return this.$refs.flatmap.searchAndShowResult(term);
     },
     getFlatmapImp() {
-      return this.$refs.flatmap.mapImp;
+      return this.$refs.flatmap?.mapImp;
     },
     flatmaprResourceSelected: function (type, resource) {
       this.resourceSelected(
-        type, resource, (this.$refs.map.viewingMode === "Exploration"));
+        type, resource, (this.$refs.flatmap.viewingMode === "Exploration"));
+
       if (resource.eventType === 'click' && resource.feature.type === 'feature') {
         const eventData = {
           label: resource.label || '',
@@ -66,7 +84,7 @@ export default {
           'event': 'interaction_event',
           'event_name': 'portal_maps_connectivity',
           'category': paramString,
-          "location": type + ' ' + this.$refs.map.viewingMode
+          "location": type + ' ' + this.$refs.flatmap.viewingMode
         });
       }
     },
@@ -142,7 +160,7 @@ export default {
   mounted: function() {
     this.getAvailableTerms();
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(undefined);
+      this.flatmapMarkerZoomUpdate(true, undefined);
     });
   },
 };

package/src/components/viewers/MultiFlatmap.vue

@@ -8,6 +8,11 @@
     style="height: 100%; width: 100%"
     :initial="entry.resource"
     :helpMode="helpMode"
+    :helpModeActiveItem="helpModeActiveItem"
+    :helpModeDialog="useHelpModeDialog"
+    @help-mode-last-item="onHelpModeLastItem"
+    @shown-tooltip="onTooltipShown"
+    @shown-map-tooltip="onMapTooltipShown"
     ref="multiflatmap"
     :displayMinimap="true"
     :showStarInLegend="showStarInLegend"
@@ -17,15 +22,25 @@
     :sparcAPI="apiLocation"
     @pan-zoom-callback="flatmapPanZoomCallback"
     @open-map="openMap"
+    @finish-help-mode="endHelp"
     @pathway-selection-changed="onPathwaySelectionChanged"
     @open-pubmed-url="onOpenPubmedUrl"
   />
+
+  <HelpModeDialog
+    v-if="helpMode && useHelpModeDialog"
+    ref="multiflatmapHelp"
+    :multiflatmapRef="multiflatmapRef"
+    :lastItem="helpModeLastItem"
+    @show-next="onHelpModeShowNext"
+    @finish-help-mode="onFinishHelpMode"
+  />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 import Tagging from '../../services/tagging.js';
-import { MultiFlatmapVuer } from "@abi-software/flatmapvuer";
+import { MultiFlatmapVuer, HelpModeDialog } from "@abi-software/flatmapvuer";
 import ContentMixin from "../../mixins/ContentMixin";
 import EventBus from "../EventBus";
 import {
@@ -73,6 +88,7 @@ export default {
   mixins: [ContentMixin, DyncamicMarkerMixin],
   components: {
     MultiFlatmapVuer,
+    HelpModeDialog,
   },
   data: function () {
     return {
@@ -137,6 +153,7 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
+        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
@@ -226,6 +243,7 @@ export default {
           this.$refs.multiflatmap
             .getCurrentFlatmap()
             .mapImp.panZoomTo(origin, [sW, sH]);
+          this.flatmapMarkerZoomUpdate(false, undefined);
         }
       }
     },
@@ -302,12 +320,12 @@ export default {
         flatmap.enablePanZoomEvents(true); // Use zoom events for dynamic markers
         this.flatmapReady = true;
         const flatmapImp = flatmap.mapImp;
-        this.flatmapMarkerUpdate(flatmapImp);
+        this.flatmapMarkerZoomUpdate(true, flatmapImp);
         this.updateProvCard();
       }
     },
     getFlatmapImp: function () {
-      if (this.entry.type === "MultiFlatmap" && this.flatmapReady) {
+      if (this.entry.type === "MultiFlatmap" && this.flatmapReady && this.$refs.multiflatmap) {
         return this.$refs.multiflatmap.getCurrentFlatmap()["mapImp"];
       } else {
         return undefined;
@@ -364,7 +382,7 @@ export default {
         const markerIdentifier = flatmapImp.addMarker(marker, {
           element: wrapperElement,
           className: "highlight-marker",
-          cluster: false,
+          cluster: false
         });
 
         // update the store with the marker identifier
@@ -403,7 +421,7 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+      this.flatmapMarkerZoomUpdate(true, undefined);
     });
   },
 };
@@ -421,12 +439,6 @@ export default {
     cursor: pointer !important;
     z-index: 2;
   }
-  &.hovered {
-    div {
-      scale: 2;
-      transform: translate(0px, -5px);
-    }
-  }
   &.highlight-marker {
     visibility: visible !important;
     cursor: pointer !important;
@@ -436,6 +448,14 @@ export default {
       transform: translate(45px, -7px);
     }
   }
+  &.hovered-marker {
+    cursor: pointer !important;
+    z-index: 2;
+    div {
+      scale: 2;
+      transform: translate(0px, -5px);
+    }
+  }
 }
 
 </style>

package/src/components/viewers/Scaffold.vue

@@ -11,7 +11,12 @@
     ref="scaffold"
     :background-toggle="true"
     :traditional="true"
-    :help-mode="helpMode"
+    :helpMode="helpMode"
+    :helpModeActiveItem="helpModeActiveItem"
+    :helpModeDialog="useHelpModeDialog"
+    @help-mode-last-item="onHelpModeLastItem"
+    @shown-tooltip="onTooltipShown"
+    @shown-map-tooltip="onMapTooltipShown"
     :render="visible"
     :display-latest-message="true"
     :warning-message="warningMessage"
@@ -22,12 +27,21 @@
     :markerLabels="markerLabels"
     :flatmapAPI="flatmapAPI"
   />
+
+  <HelpModeDialog
+    v-if="helpMode && useHelpModeDialog"
+    ref="scaffoldHelp"
+    :scaffoldRef="scaffoldRef"
+    :lastItem="helpModeLastItem"
+    @show-next="onHelpModeShowNext"
+    @finish-help-mode="onFinishHelpMode"
+  />
 </template>
 
 <script>
 /* eslint-disable no-alert, no-console */
 import EventBus from "../EventBus";
-import { ScaffoldVuer } from "@abi-software/scaffoldvuer";
+import { ScaffoldVuer, HelpModeDialog } from "@abi-software/scaffoldvuer";
 import ContentMixin from "../../mixins/ContentMixin";
 
 import "@abi-software/scaffoldvuer/dist/style.css";
@@ -37,6 +51,7 @@ export default {
   mixins: [ ContentMixin ],
   components: {
     ScaffoldVuer,
+    HelpModeDialog,
   },
   methods: {
     onResize: function () {

package/src/components.d.ts

@@ -22,7 +22,6 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
     ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
-    ElIconInfoFilled: typeof import('@element-plus/icons-vue')['InfoFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']

package/src/mixins/ContentMixin.js

@@ -17,6 +17,7 @@ function capitalise(text) {
 
 /* eslint-disable no-alert, no-console */
 export default {
+  emits: [ "flatmap-provenance-ready", "resource-selected", "species-changed"],
   props: {
     /**
      * Object containing information for
@@ -37,11 +38,18 @@ export default {
     syncMode() {
       return this.splitFlowStore.syncMode;
     },
+    useHelpModeDialog() {
+      return this.settingsStore.useHelpModeDialog;
+    },
   },
   mounted: function () {
     EventBus.on("startHelp", () => {
       this.startHelp();
     });
+
+    this.multiflatmapRef = this.$refs.multiflatmap;
+    this.flatmapRef = this.$refs.flatmap;
+    this.scaffoldRef = this.$refs.scaffold;
   },
   methods: {
     toggleSyncMode: function () {
@@ -404,7 +412,7 @@ export default {
           });
       }
     },
-    flatmapMarkerUpdate() {
+    flatmapMarkerZoomUpdate() {
       return;
     },
     onResize: function () {
@@ -413,17 +421,66 @@ export default {
     startHelp: function () {
       if (this.isInHelp === false) {
         this.helpMode = true;
-        window.addEventListener("mousedown", this.endHelp);
+        window.addEventListener("mousedown", this.checkEndHelpMouseDown);
         this.isInHelp = true;
       }
     },
     endHelp: function () {
-      window.removeEventListener("mousedown", this.endHelp);
+      window.removeEventListener("mousedown", this.checkEndHelpMouseDown);
       this.helpMode = false;
       setTimeout(() => {
         this.isInHelp = false;
       }, 200);
     },
+    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.multiflatmap && this.$refs.multiflatmapHelp) {
+        this.$refs.multiflatmapHelp.toggleTooltipHighlight();
+      }
+
+      if (this.$refs.flatmap && this.$refs.flatmapHelp) {
+        this.$refs.flatmapHelp.toggleTooltipHighlight();
+      }
+
+      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
+        this.$refs.scaffoldHelp.toggleTooltipHighlight();
+      }
+    },
+    onMapTooltipShown: function () {
+      if (this.$refs.multiflatmap && this.$refs.multiflatmapHelp) {
+        this.$refs.multiflatmapHelp.toggleTooltipPinHighlight();
+      }
+
+      if (this.$refs.flatmap && this.$refs.flatmapHelp) {
+        this.$refs.flatmapHelp.toggleTooltipPinHighlight();
+      }
+
+      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
+        this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
+      }
+    },
+    /**
+     * End help-mode only if user clicks outside of help mode dialog.
+     */
+    checkEndHelpMouseDown: function (e) {
+      const el = e.target;
+      if (!el.closest('.help-mode-dialog')) {
+        this.endHelp();
+      }
+    },
   },
   data: function () {
     return {
@@ -436,6 +493,11 @@ export default {
         bottom: "0px",
       },
       helpMode: false,
+      helpModeActiveItem: 0,
+      helpModeLastItem: false,
+      multiflatmapRef: null,
+      flatmapRef: null,
+      scaffoldRef: null,
       idNamePair: {},
       scaffoldLoaded: false,
       isInHelp: false,
@@ -449,4 +511,11 @@ export default {
     if (this.settingsStore.sparcApi)
       this.apiLocation = this.settingsStore.sparcApi;
   },
+  watch: {
+    helpMode: function (newVal) {
+      if (!newVal) {
+        this.helpModeActiveItem = 0;
+      }
+    }
+  },
 };