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

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;
+      }
+    }
+  },
 };

package/src/mixins/DynamicMarkerMixin.js

@@ -4,13 +4,36 @@ import { mapStores } from 'pinia';
 import { useSettingsStore } from '../stores/settings';
 
 
-// remove duplicates by stringifying the objects
-const removeDuplicates = function (arrayOfAnything) {
-  if (!arrayOfAnything) return []
-  return [...new Set(arrayOfAnything.map((e) => JSON.stringify(e)))].map((e) =>
-    JSON.parse(e)
-  )
-}
+/*
+* Function to check markers visibility at the given zoom level.
+* I have modified it to make sure the marker is displayed
+* if the uberon is not present in the hardcoded zoom-level list.
+*/
+const checkMarkersAtZoomLevel = (flatmapImp, markers, zoomLevel, hoveredMarkers) => {
+  if (markers) {
+    markers.forEach(id => {
+      let foundInArray = false;
+      // First check if uberon is in the list, check for zoom level
+      // if true. Note: markerZoomLevels is imported.
+      for (let i = 0; i < markerZoomLevels.length; i++) {
+        if (markerZoomLevels[i].id === id) {
+          foundInArray = true;
+          if (zoomLevel >= markerZoomLevels[i].showAtZoom) {
+            let markerClass = "standard-marker"
+            if (hoveredMarkers.includes(id)) markerClass = "hovered-marker"
+            flatmapImp.addMarker(id, { className: markerClass, cluster: false});
+          }
+          break;
+        }
+      }
+      // Did not match, add it regardless so we do not lose any
+      // markers.
+      if (!foundInArray) {
+        flatmapImp.addMarker(id, {className: "standard-marker", cluster: false});
+      }
+    });
+  }
+};
   
 /* eslint-disable no-alert, no-console */
 export default {
@@ -26,14 +49,16 @@ export default {
           payload: payload,
           type: this.entry.type,
         };
+        this.flatmapMarkerZoomUpdate(false, undefined);
         this.$emit("resource-selected", result);
       }
     },
         /**
      * Function used for updating the flatmap markers.
-     * We set the markers based on what was searched and the flatmap clusters them.
+     * It will only update the markers if zoom level has changed or
+     * the force flag is true.
      */
-    flatmapMarkerUpdate(flatmap) {
+    flatmapMarkerZoomUpdate(force, flatmap) {
       if (!this.flatmapReady) return;
 
       let flatmapImp = flatmap;
@@ -41,22 +66,16 @@ export default {
         flatmapImp = this.getFlatmapImp();
 
       if (flatmapImp) {
-        let markers = this.settingsStore.markers;
-        let hoveredMarkers = this.settingsStore.hoveredMarkers
-        markers = removeDuplicates(markers);
-        hoveredMarkers = removeDuplicates(hoveredMarkers);
-        flatmapImp.clearMarkers();
-        markers.forEach(id => {
-          let markerClass = "standard-marker"
-          let markerCluster = true
-          if (hoveredMarkers.includes(id)) {
-            markerClass += " hovered" // Space-separated CSS class names
-            markerCluster = false // Disable cluster when related dataset is hovered
+        let currentZoom = flatmapImp.getZoom()["zoom"];
+        if (force || this.zoomLevel !== currentZoom) {
+          this.zoomLevel = currentZoom;
+          flatmapImp.clearMarkers();
+          let markers = this.settingsStore.markers;
+          let hoveredMarkers = this.settingsStore.hoveredMarkers;
+          checkMarkersAtZoomLevel(flatmapImp, markers, this.zoomLevel, hoveredMarkers);
+          if (this.entry.type === "MultiFlatmap") {
+            this.restoreFeaturedMarkers(flatmapImp);
           }
-          flatmapImp.addMarker(id, { className: markerClass, cluster: markerCluster })
-        })
-        if (this.entry.type === "MultiFlatmap") {
-          this.restoreFeaturedMarkers(flatmapImp);
         }
       }
     },
@@ -65,7 +84,7 @@ 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);
       }
     },
   }

package/src/services/tagging.js

@@ -1,3 +1,4 @@
+import EventBus from '../components/EventBus';
 export default {
   sendEvent: function(data) {
     const taggingData = {
@@ -20,9 +21,7 @@ export default {
       console.table(taggingData);
     }
 
-    // push to dataLayer for GTM
-    if (typeof dataLayer !== 'undefined') {
-      dataLayer.push(taggingData);
-    }
+    // Emit data for GTM
+    EventBus.emit('trackEvent', taggingData);
   }
 }

package/src/stores/settings.js

@@ -24,6 +24,7 @@ export const useSettingsStore = defineStore('settings', {
       featuredMarkerSpecies: [],
       featuredDatasetIdentifiers: [],
       helpDelay: 0,
+      useHelpModeDialog: false,
     }
   },
   getters: {
@@ -143,6 +144,9 @@ export const useSettingsStore = defineStore('settings', {
     },
     updateFacetLabels(facetLabels) {
       this.facetLabels = facetLabels;
-    }
+    },
+    updateUseHelpModeDialog(helpModeOption) {
+      this.useHelpModeDialog = helpModeOption;
+    },
   }
 });

package/src/stores/splitFlow.js

@@ -127,38 +127,42 @@ const findKeyWithId = (layout, id) => {
   return Object.keys(layout).find(key => layout[key]["id"] === id);
 }
 
+const getOriginalState = () => {
+  return {
+    activeView: "singlepanel",
+    viewIcons: [
+      { icon: "singlepanel", name: "Single view", min: 1 },
+      { icon: "2horpanel", name: "Horizontal split", min: 2 },
+      { icon: "2vertpanel", name: "Vertical split", min: 2 },
+      { icon: "3panel", name: "Three panes", min: 3 },
+      { icon: "4panel", name: "Four panes", min: 4 },
+      { icon: "5panel", name: "Five panes", min: 5 },
+      { icon: "6panel", name: "Six (horizontal)", min: 6 },
+      { icon: "6panelVertical", name: "Six (vertical)", min: 6 },
+      //{ icon: "customise", name: "Customise", min: 2 }
+    ],
+    customLayout: {
+      "split-1": {content: false, horizontal: false, children: ["pane-1"]},
+      "pane-1": {content: true,  id: 1},
+      /*
+      Example layout
+
+      "split-1": {content: false, horizontal: true, children: ["split-2", "pane-1"]},
+      "split-2": {content: false, horizontal: false, children: ["pane-2", "pane-3"]},
+      "pane-1": {content: true,  id: 1},
+      "pane-2": {content: true,  id: 2},
+      "pane-3": {content: true,  id: 3},
+      */
+    },
+    splitters: { "first": 50, "second": 50, "third": 50 },
+    globalCallback: false,
+    syncMode: false,
+  };
+}
+
 export const useSplitFlowStore = defineStore('splitFlow', {
   state: () => {
-    return {
-      activeView: "singlepanel",
-      viewIcons: [
-        { icon: "singlepanel", name: "Single view", min: 1 },
-        { icon: "2horpanel", name: "Horizontal split", min: 2 },
-        { icon: "2vertpanel", name: "Vertical split", min: 2 },
-        { icon: "3panel", name: "Three panes", min: 3 },
-        { icon: "4panel", name: "Four panes", min: 4 },
-        { icon: "5panel", name: "Five panes", min: 5 },
-        { icon: "6panel", name: "Six (horizontal)", min: 6 },
-        { icon: "6panelVertical", name: "Six (vertical)", min: 6 },
-        //{ icon: "customise", name: "Customise", min: 2 }
-      ],
-      customLayout: {
-        "split-1": {content: false, horizontal: false, children: ["pane-1"]},
-        "pane-1": {content: true,  id: 1},
-        /*
-        Example layout
-
-        "split-1": {content: false, horizontal: true, children: ["split-2", "pane-1"]},
-        "split-2": {content: false, horizontal: false, children: ["pane-2", "pane-3"]},
-        "pane-1": {content: true,  id: 1},
-        "pane-2": {content: true,  id: 2},
-        "pane-3": {content: true,  id: 3},
-        */
-      },
-      splitters: { "first": 50, "second": 50, "third": 50 },
-      globalCallback: false,
-      syncMode: false,
-    }
+    return getOriginalState();
   },
   getters: {
     getPaneNameById: (state) => (id) => {
@@ -318,6 +322,14 @@ export const useSplitFlowStore = defineStore('splitFlow', {
         }
       }
     },
+    reset() {
+      const original = getOriginalState();
+      this.activeView = original.activeView;
+      this.customLayout = original.customLayout;
+      this.splitters = original.splitters;
+      this.globalCallback = original.globalCallback;
+      this.syncMode = original.syncMode;
+    },
     closeSlot(payload) {
       if (payload) {
         this.syncMode = false;

package/dist/Flatmap-9P71mP5D.js

@@ -1,128 +0,0 @@
-import { B as p } from "./flatmapvuer-BM5z_95w.js";
-import { _ as m, t as f, E as s } from "./index-DIFC-Q9x.js";
-import { C as c } from "./ContentMixin-C35Jowvp.js";
-import { D as u } from "./style-B-Ps72EF.js";
-import { resolveComponent as h, openBlock as d, createBlock as g } from "vue";
-const y = {
-  name: "Flatmap",
-  mixins: [c, u],
-  components: {
-    FlatmapVuer: p
-  },
-  methods: {
-    getState: function() {
-      return this.$refs.flatmap.getState();
-    },
-    /**
-     * Perform a local search on this contentvuer
-     */
-    search: function(e) {
-      return this.$refs.flatmap.searchAndShowResult(e);
-    },
-    getFlatmapImp() {
-      return this.$refs.flatmap.mapImp;
-    },
-    flatmaprResourceSelected: function(e, t) {
-      if (this.resourceSelected(
-        e,
-        t,
-        this.$refs.map.viewingMode === "Exploration"
-      ), t.eventType === "click" && t.feature.type === "feature") {
-        const n = {
-          label: t.label || "",
-          id: t.feature.id || "",
-          featureId: t.feature.featureId || "",
-          taxonomy: t.taxonomy || "",
-          resources: t.resource.join(", ")
-        }, a = f(n);
-        Tagging.sendEvent({
-          event: "interaction_event",
-          event_name: "portal_maps_connectivity",
-          category: a,
-          location: e + " " + this.$refs.map.viewingMode
-        });
-      }
-    },
-    flatmapReadyCall: function(e) {
-      let t = { id: this.entry.id, prov: this.getFlatmapImp().provenance };
-      s.emit("mapImpProv", t), this.$emit("flatmap-provenance-ready", t), this.getAvailableTerms(), this.entry.resource === "FunctionalConnectivity" && this.flatmapReadyForMarkerUpdates(e);
-    },
-    onPathwaySelectionChanged: function(e) {
-      const { label: t, property: n, checked: a, selectionsTitle: o } = e;
-      Tagging.sendEvent({
-        event: "interaction_event",
-        event_name: "portal_maps_pathway_change",
-        category: t + " [" + n + "] " + a,
-        location: o
-      });
-    },
-    highlightFeatures: function(e) {
-      let t = e.name;
-      const n = this.$refs.flatmap.mapImp;
-      if (t) {
-        const a = n.search(t);
-        a.featureIds[0] && n.highlightFeatures([
-          n.modelForFeature(a.featureIds[0])
-        ]);
-      }
-    },
-    /**
-     * Append the list of suggested terms to suggestions
-     */
-    searchSuggestions: function(e, t) {
-      e && this.$refs.flatmap.mapImp && this.$refs.flatmap.mapImp.search(e).__featureIds.forEach((a) => {
-        const o = this.$refs.flatmap.mapImp.annotation(a);
-        o && o.label && t.push(o.label);
-      });
-    },
-    zoomToFeatures: function(e, t) {
-      let n = e.name;
-      const a = this.$refs.flatmap.mapImp;
-      if (n) {
-        const o = a.search(n);
-        if (o.featureIds.length) {
-          let r = a.modelForFeature(o.featureIds[0]);
-          r ? (t && a.selectFeatures(r), a.zoomToFeatures(r)) : a.clearSearchResults();
-        }
-      } else
-        a.clearSearchResults();
-    }
-  },
-  computed: {
-    facetSpecies() {
-      return this.settingsStore.facets.species;
-    }
-  },
-  mounted: function() {
-    this.getAvailableTerms(), s.on("markerUpdate", () => {
-      this.flatmapMarkerUpdate(void 0);
-    });
-  }
-};
-function v(e, t, n, a, o, r) {
-  const i = h("FlatmapVuer");
-  return d(), g(i, {
-    state: e.entry.state,
-    entry: e.entry.resource,
-    onResourceSelected: t[0] || (t[0] = (l) => r.flatmaprResourceSelected(e.entry.type, l)),
-    onPanZoomCallback: e.flatmapPanZoomCallback,
-    name: e.entry.resource,
-    style: { height: "100%", width: "100%" },
-    minZoom: e.entry.minZoom,
-    helpMode: e.helpMode,
-    pathControls: !0,
-    ref: "flatmap",
-    onReady: r.flatmapReadyCall,
-    displayMinimap: !1,
-    displayWarning: !0,
-    enableOpenMapUI: !0,
-    flatmapAPI: e.flatmapAPI,
-    sparcAPI: e.apiLocation,
-    onOpenMap: e.openMap,
-    onPathwaySelectionChanged: r.onPathwaySelectionChanged
-  }, null, 8, ["state", "entry", "onPanZoomCallback", "name", "minZoom", "helpMode", "onReady", "flatmapAPI", "sparcAPI", "onOpenMap", "onPathwaySelectionChanged"]);
-}
-const P = /* @__PURE__ */ m(y, [["render", v], ["__scopeId", "data-v-e72d1ef1"]]);
-export {
-  P as default
-};

package/dist/style-B-Ps72EF.js

@@ -1,50 +0,0 @@
-import { mapStores as p } from "pinia";
-import { u as n } from "./index-DIFC-Q9x.js";
-const o = function(t) {
-  return t ? [...new Set(t.map((e) => JSON.stringify(e)))].map(
-    (e) => JSON.parse(e)
-  ) : [];
-}, f = {
-  computed: {
-    ...p(n)
-  },
-  methods: {
-    flatmapPanZoomCallback: function(t) {
-      if (this.mouseHovered) {
-        const e = {
-          paneIndex: this.entry.id,
-          eventType: "panZoom",
-          payload: t,
-          type: this.entry.type
-        };
-        this.$emit("resource-selected", e);
-      }
-    },
-    /**
-    * Function used for updating the flatmap markers.
-    * We set the markers based on what was searched and the flatmap clusters them.
-    */
-    flatmapMarkerUpdate(t) {
-      if (!this.flatmapReady)
-        return;
-      let e = t;
-      if (e || (e = this.getFlatmapImp()), e) {
-        let r = this.settingsStore.markers, a = this.settingsStore.hoveredMarkers;
-        r = o(r), a = o(a), e.clearMarkers(), r.forEach((s) => {
-          let i = "standard-marker", m = !0;
-          a.includes(s) && (i += " hovered", m = !1), e.addMarker(s, { className: i, cluster: m });
-        }), this.entry.type === "MultiFlatmap" && this.restoreFeaturedMarkers(e);
-      }
-    },
-    flatmapReadyForMarkerUpdates: function(t) {
-      if (t) {
-        t.enablePanZoomEvents(!0), this.flatmapReady = !0;
-        const e = t.mapImp;
-        this.flatmapMarkerUpdate(e);
-      }
-    }
-  }
-};
-export {
-  f as D
-};