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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/mapintegratedvuer",
-  "version": "1.1.0-beta.5",
+  "version": "1.1.1",
   "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.1",
     "@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/ContentVuer.vue

@@ -79,19 +79,19 @@ export default {
   },
   methods: {
     flatmapProvenacneReady: function(prov) {
-      this.$refs.contentBar.setupFlatmapContextCard(prov);
+      this.$refs.contentBar?.setupFlatmapContextCard(prov);
     },
     /**
      * Toggle sync mode on/off depending on species and current state
      */
     toggleSyncMode: function () {
-      this.$refs.viewer.toggleSyncMode();
+      this.$refs.viewer?.toggleSyncMode();
     },
     getId: function () {
       return this.entry.id;
     },
     getState: function () {
-      return this.$refs.viewer.getState();
+      return this.$refs.viewer?.getState();
     },
     resourceSelected: function (payload) {
       this.$emit("resource-selected", payload);
@@ -101,32 +101,32 @@ export default {
         this.entriesStore.updateViewForEntry({id: this.entry.id, viewUrl});
       } else {
         //Manually set it as it cannot be set with reactivity
-        this.$refs.viewer.updateWithViewUrl(viewUrl);
+        this.$refs.viewer?.updateWithViewUrl(viewUrl);
       }
     },
     /**
      * Perform a local search on this contentvuer
      */
     search: function (term) {
-      return this.$refs.viewer.search(term);
+      return this.$refs.viewer?.search(term);
     },
     /**
      * Push the suggested terms into the suggestions array
      */
     searchSuggestions: function(term, suggestions) {
-      this.$refs.viewer.searchSuggestions(term, suggestions);
+      this.$refs.viewer?.searchSuggestions(term, suggestions);
     },
     setPanesBoundary: function() {
-      this.$refs.contentBar.setBoundary(this.$refs["container"][0]);
+      this.$refs.contentBar?.setBoundary(this.$refs["container"][0]);
     },
     speciesChanged: function (species) {
       this.activeSpecies = species;
     },
     receiveSynchronisedEvent: async function (data) {
-      this.$refs.viewer.receiveSynchronisedEvent(data);
+      this.$refs.viewer?.receiveSynchronisedEvent(data);
     },
     requestSynchronisedEvent: function (flag) {
-      this.$refs.viewer.requestSynchronisedEvent(flag);
+      this.$refs.viewer?.requestSynchronisedEvent(flag);
     },
     /**
      * Check if this viewer is currently visible
@@ -136,7 +136,7 @@ export default {
       return paneName !== undefined;
     },
     onResize: function () {
-      this.$refs.viewer.onResize();
+      this.$refs.viewer?.onResize();
     },
   },
   data: function () {

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

@@ -1,29 +1,47 @@
 <template>
-  <FlatmapVuer
-    :state="entry.state"
-    :entry="entry.resource"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    :name="entry.resource"
-    style="height: 100%; width: 100%"
-    :minZoom="entry.minZoom"
-    :helpMode="helpMode"
-    :pathControls="true"
-    ref="flatmap"
-    @ready="flatmapReadyCall"
-    :displayMinimap="false"
-    :displayWarning="true"
-    :enableOpenMapUI="true"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @open-map="openMap"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-  />
+  <div class="viewer-container">
+    <FlatmapVuer
+      :state="entry.state"
+      :entry="entry.resource"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      @pan-zoom-callback="flatmapPanZoomCallback"
+      :name="entry.resource"
+      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"
+      :displayMinimap="false"
+      :displayWarning="true"
+      :enableOpenMapUI="true"
+      :flatmapAPI="flatmapAPI"
+      :sparcAPI="apiLocation"
+      @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"
+    />
+  </div>
 </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 +53,7 @@ export default {
   mixins: [ ContentMixin, DynamicMarkerMixin ],
   components: {
     FlatmapVuer,
+    HelpModeDialog,
   },
   methods: {
     getState: function () {
@@ -47,11 +66,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 +86,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 +162,7 @@ export default {
   mounted: function() {
     this.getAvailableTerms();
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(undefined);
+      this.flatmapMarkerZoomUpdate(true, undefined);
     });
   },
 };
@@ -150,6 +170,11 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }

package/src/components/viewers/MultiFlatmap.vue

@@ -1,31 +1,48 @@
 <template>
-  <MultiFlatmapVuer
-    :availableSpecies="availableSpecies"
-    @flatmapChanged="flatmapChanged"
-    @ready="multiFlatmapReady"
-    :state="entry.state"
-    @resource-selected="flatmaprResourceSelected(entry.type, $event)"
-    style="height: 100%; width: 100%"
-    :initial="entry.resource"
-    :helpMode="helpMode"
-    ref="multiflatmap"
-    :displayMinimap="true"
-    :showStarInLegend="showStarInLegend"
-    :enableOpenMapUI="true"
-    :openMapOptions="openMapOptions"
-    :flatmapAPI="flatmapAPI"
-    :sparcAPI="apiLocation"
-    @pan-zoom-callback="flatmapPanZoomCallback"
-    @open-map="openMap"
-    @pathway-selection-changed="onPathwaySelectionChanged"
-    @open-pubmed-url="onOpenPubmedUrl"
-  />
+  <div class="viewer-container">
+    <MultiFlatmapVuer
+      :availableSpecies="availableSpecies"
+      @flatmapChanged="flatmapChanged"
+      @ready="multiFlatmapReady"
+      :state="entry.state"
+      @resource-selected="flatmaprResourceSelected(entry.type, $event)"
+      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"
+      :enableOpenMapUI="true"
+      :openMapOptions="openMapOptions"
+      :flatmapAPI="flatmapAPI"
+      :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"
+    />
+  </div>
 </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 +90,7 @@ export default {
   mixins: [ContentMixin, DyncamicMarkerMixin],
   components: {
     MultiFlatmapVuer,
+    HelpModeDialog,
   },
   data: function () {
     return {
@@ -137,6 +155,7 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
+        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
@@ -226,6 +245,7 @@ export default {
           this.$refs.multiflatmap
             .getCurrentFlatmap()
             .mapImp.panZoomTo(origin, [sW, sH]);
+          this.flatmapMarkerZoomUpdate(false, undefined);
         }
       }
     },
@@ -302,12 +322,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 +384,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 +423,7 @@ export default {
     this.getFeaturedDatasets();
 
     EventBus.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+      this.flatmapMarkerZoomUpdate(true, undefined);
     });
   },
 };
@@ -412,6 +432,11 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.maplibregl-popup) {
   z-index: 3;
 }
@@ -421,12 +446,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 +455,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

@@ -1,33 +1,49 @@
 <template>
-  <ScaffoldVuer
-    :state="entry.state"
-    :url="entry.resource"
-    :region="entry.region"
-    @scaffold-selected="resourceSelected(entry.type, $event, true)"
-    @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
-    @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
-    @on-ready="scaffoldIsReady"
-    @open-map="openMap"
-    ref="scaffold"
-    :background-toggle="true"
-    :traditional="true"
-    :help-mode="helpMode"
-    :render="visible"
-    :display-latest-message="true"
-    :warning-message="warningMessage"
-    :display-minimap="false"
-    :display-markers="false"
-    :enableOpenMapUI="true"
-    :view-u-r-l="entry.viewUrl"
-    :markerLabels="markerLabels"
-    :flatmapAPI="flatmapAPI"
-  />
+  <div class="viewer-container">
+    <ScaffoldVuer
+      :state="entry.state"
+      :url="entry.resource"
+      :region="entry.region"
+      @scaffold-selected="resourceSelected(entry.type, $event, true)"
+      @scaffold-highlighted="scaffoldHighlighted(entry.type, $event)"
+      @scaffold-navigated="scaffoldNavigated(entry.type, $event)"
+      @on-ready="scaffoldIsReady"
+      @open-map="openMap"
+      ref="scaffold"
+      :background-toggle="true"
+      :traditional="true"
+      :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"
+      :display-minimap="false"
+      :display-markers="false"
+      :enableOpenMapUI="true"
+      :view-u-r-l="entry.viewUrl"
+      :markerLabels="markerLabels"
+      :flatmapAPI="flatmapAPI"
+    />
+
+    <HelpModeDialog
+      v-if="helpMode && useHelpModeDialog"
+      ref="scaffoldHelp"
+      :scaffoldRef="scaffoldRef"
+      :lastItem="helpModeLastItem"
+      @show-next="onHelpModeShowNext"
+      @finish-help-mode="onFinishHelpMode"
+    />
+  </div>
 </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 +53,7 @@ export default {
   mixins: [ ContentMixin ],
   components: {
     ScaffoldVuer,
+    HelpModeDialog,
   },
   methods: {
     onResize: function () {
@@ -191,6 +208,11 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.viewer-container {
+  width: 100%;
+  height: 100%;
+}
+
 :deep(.message-popper) {
   white-space: unset;
   max-width: 200px;