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

package/README.md

@@ -139,12 +139,25 @@ yarn add @<your-npm-handle>/mapintegratedvuer@alpha
 yarn dev
 ```
 
-## Documentation
+## API Documentation
 
-The documentation is developed with `vitepress` and `vuese`. Documentation pages are in the `docs` folder.
+The API documentation is developed with `vitepress` and `vuese`. The API documentation pages are in the `docs` folder.
 
 ### To run in local development mode
 ```bash
 npm run docs:watch
 ```
 This will start the documentation server with `vitepress` on port `:5173` and watch the `FlatmapVuer` and `MultiFlatmapVuer` components changes.
+
+
+## The HelpModeDialog
+
+The `HelpModeDialog` is used to show help tooltips individually and one by one. This is available on Flatmap, MultiFlatmap, and Scaffold views.
+To use `HelpModeDialog`, set `useHelpModeDialog` to `true`. The default value is `false`.
+
+```HTML
+<MapContent
+  ...
+  :useHelpModeDialog="true"
+/>
+```

package/dist/{ContentMixin-C35Jowvp.js → ContentMixin-Belbk7R9.js}

@@ -1,6 +1,6 @@
-import { u as _, b as y, E as m, T as g } from "./index-DIFC-Q9x.js";
+import { u as _, b as y, E as f, T as g } from "./index-CpppckRD.js";
 import { mapStores as w } from "pinia";
-const p = [
+const u = [
   {
     id: "ilxtr:neuron-type-keast-13",
     centrelines: [
@@ -204,7 +204,7 @@ const p = [
     ]
   }
 ];
-function u(t, a, n, s, i) {
+function p(t, a, n, s, i) {
   let e = {};
   if (e.dataset = n, e.scaffold = s, e.simulations = i, a ? e.title = a : e.title = t, e.description = "", e.actions = [], t)
     switch (t) {
@@ -300,7 +300,7 @@ function N(t, a, n, s, i) {
         };
         break;
       default:
-        e = u(t, a, n, s, i);
+        e = p(t, a, n, s, i);
         break;
     }
     return e;
@@ -312,7 +312,7 @@ function E(t, a, n, s, i) {
     switch (t) {
       case "UBERON:0000948":
       case "UBERON:0002080":
-        i ? e = u(t, a, n, s, i) : (e.title = "Heart", e.description = "", e.actions = {
+        i ? e = p(t, a, n, s, i) : (e.title = "Heart", e.description = "", e.actions = {
           search: {
             title: "Explore data",
             label: "Heart",
@@ -438,7 +438,7 @@ function E(t, a, n, s, i) {
         };
         break;
       default:
-        e = u(t, a, n, s, i);
+        e = p(t, a, n, s, i);
         break;
     }
     return e;
@@ -491,7 +491,7 @@ function b(t, a, n, s, i) {
         };
         break;
       default:
-        e = u(t, a, n, s, i);
+        e = p(t, a, n, s, i);
         break;
     }
     return e;
@@ -549,7 +549,7 @@ function S(t, a, n, s, i) {
         };
         break;
       default:
-        e = u(t, a, n, s, i);
+        e = p(t, a, n, s, i);
         break;
     }
     return e;
@@ -566,7 +566,7 @@ function k(t, a, n, s, i, e) {
     case "NCBITaxon:10114":
       return E(t, n, s, i, e);
     default:
-      return u(t, a, n, s, i);
+      return p(t, a, n, s, i);
   }
 }
 function v() {
@@ -580,20 +580,20 @@ function v() {
     { id: "UBERON:0002107", name: "Liver", type: "simulation" }
   ];
 }
-function B() {
+function R() {
   return v();
 }
 function h(t) {
   if (t)
-    for (let a = 0; a < p.length; a++) {
-      if (p[a].id == t)
-        return p[a].centrelines;
-      if (p[a].centrelines.find((s) => s === t))
-        return [p[a].id];
+    for (let a = 0; a < u.length; a++) {
+      if (u[a].id == t)
+        return u[a].centrelines;
+      if (u[a].centrelines.find((s) => s === t))
+        return [u[a].id];
     }
   return [];
 }
-function R(t) {
+function L(t) {
   if (t) {
     const a = t.toLowerCase();
     if (a.includes("heart"))
@@ -608,19 +608,19 @@ function R(t) {
       return { id: "UBERON:0001255", name: "Bladder" };
   }
 }
-function L(t, a) {
+function B(t, a) {
   if (t && t.resource) {
     let n = t.resource;
     Array.isArray(n) && n[0] && (n = n[0]);
-    let s, i, e, r, l, d = n.taxonomy;
-    if (n.data && n.data.id ? (s = n.data.id, i = n.data.id) : n.feature && (s = n.feature.models, i = n.feature.label, e = n.feature.dataset, r = n.feature.scaffold, l = n.feature.simulations), s || i) {
-      let c = k(s, d, i, e, r, l);
-      if (c && c.actions)
-        return c.actions[a];
+    let s, i, e, o, c, d = n.taxonomy;
+    if (n.data && n.data.id ? (s = n.data.id, i = n.data.id) : n.feature && (s = n.feature.models, i = n.feature.label, e = n.feature.dataset, o = n.feature.scaffold, c = n.feature.simulations), s || i) {
+      let l = k(s, d, i, e, o, c);
+      if (l && l.actions)
+        return l.actions[a];
     }
   }
 }
-let f = 7, o = 5;
+let m = 7, r = 5;
 const U = [
   {
     id: "UBERON:0000948",
@@ -796,79 +796,79 @@ const U = [
   {
     id: "UBERON:0001736",
     name: "Submandibular gland",
-    showAtZoom: f,
+    showAtZoom: m,
     keyword: !0
   },
   {
     id: "UBERON:0001103",
     name: "Diaphragm",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0001160",
     name: "Fundus of stomach",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0000955",
     name: "Brain",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0003708",
     name: "Carotid sinus",
-    showAtZoom: f,
+    showAtZoom: m,
     keyword: !0
   },
   {
     id: "UBERON:0002079",
     name: "Left cardiac atrium",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "ILX:0485722",
     name: "Nodose ganglion",
-    showAtZoom: f,
+    showAtZoom: m,
     keyword: !0
   },
   {
     id: "UBERON:0002078",
     name: "Right cardiac atrium",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0002084",
     name: "Heart left ventricle",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0002080",
     name: "Heart right ventricle",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0001508",
     name: "Arch of Aorta",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0001738",
     name: "Thyroid cartilage",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   },
   {
     id: "UBERON:0000388",
     name: "Epiglottis",
-    showAtZoom: o,
+    showAtZoom: r,
     keyword: !0
   }
 ];
@@ -876,6 +876,7 @@ function A(t) {
   return t[0].toUpperCase() + t.substring(1);
 }
 const C = {
+  emits: ["flatmap-provenance-ready", "resource-selected", "species-changed"],
   props: {
     /**
      * Object containing information for
@@ -895,12 +896,15 @@ const C = {
     ...w(_, y),
     syncMode() {
       return this.splitFlowStore.syncMode;
+    },
+    useHelpModeDialog() {
+      return this.settingsStore.useHelpModeDialog;
     }
   },
   mounted: function() {
-    m.on("startHelp", () => {
+    f.on("startHelp", () => {
       this.startHelp();
-    });
+    }), this.multiflatmapRef = this.$refs.multiflatmap, this.flatmapRef = this.$refs.flatmap, this.scaffoldRef = this.$refs.scaffold;
   },
   methods: {
     toggleSyncMode: function() {
@@ -908,7 +912,7 @@ const C = {
     getState: function() {
     },
     openMap: function(t) {
-      t === "SYNC" ? (this.toggleSyncMode(), this.trackOpenMap("toggle_map_sync_mode")) : (m.emit("OpenNewMap", t), this.trackOpenMap(`open_new_${t}_map`));
+      t === "SYNC" ? (this.toggleSyncMode(), this.trackOpenMap("toggle_map_sync_mode")) : (f.emit("OpenNewMap", t), this.trackOpenMap(`open_new_${t}_map`));
     },
     trackOpenMap: function(t) {
       g.sendEvent({
@@ -936,11 +940,11 @@ const C = {
      */
     resourceSelected: function(t, a, n) {
       if (this.resourceHasAction(a)) {
-        m.emit("PopoverActionClick", a);
+        f.emit("PopoverActionClick", a);
         return;
       }
       let s, i = "none", e = !1;
-      const r = {
+      const o = {
         paneIndex: this.entry.id,
         type: t,
         resource: a,
@@ -948,10 +952,10 @@ const C = {
         eventType: void 0
       };
       if (t == "MultiFlatmap" || t == "Flatmap")
-        if (r.internalName = this.idNamePair[a.feature.models], a.eventType == "click")
-          if (r.eventType = "selected", a.feature.type == "marker") {
-            let l = this.idNamePair[a.feature.models], d = U.filter(
-              (c) => c.id === a.feature.models
+        if (o.internalName = this.idNamePair[a.feature.models], a.eventType == "click")
+          if (o.eventType = "selected", a.feature.type == "marker") {
+            let c = this.idNamePair[a.feature.models], d = U.filter(
+              (l) => l.id === a.feature.models
             );
             this.settingsStore.isFeaturedMarkerIdentifier(
               a.feature.id
@@ -961,27 +965,27 @@ const C = {
                 a.feature.id
               ),
               featuredDataset: !0
-            } : d.filter((c) => c.keyword).length > 0 ? s = {
+            } : d.filter((l) => l.keyword).length > 0 ? s = {
               type: "Search",
               term: "http://purl.obolibrary.org/obo/" + a.feature.models.replace(":", "_")
             } : s = {
               type: "Facet",
-              facet: l,
+              facet: c,
               facetPropPath: "anatomy.organ.category.name",
               term: "Anatomical structure"
             }, e = !0, t == "MultiFlatmap" && this.$refs.multiflatmap.getCurrentFlatmap().mapImp.clearSearchResults();
           } else
             a.feature.type == "feature" && (this.syncMode ? e = !0 : i = "scaffold");
         else
-          a.eventType == "mouseenter" && (r.eventType = "highlighted", e = !0);
+          a.eventType == "mouseenter" && (o.eventType = "highlighted", e = !0);
       else
-        t == "Scaffold" && (a && a[0] && (r.internalName = a[0].data.id, a[0].data.lastActionOnMarker === !0 && (s = {
+        t == "Scaffold" && (a && a[0] && (o.internalName = a[0].data.id, a[0].data.lastActionOnMarker === !0 && (s = {
           type: "Facet",
           facet: A(a[0].data.id),
           facetPropPath: "anatomy.organ.category.name",
           term: "Anatomical structure"
-        })), r.eventType = "selected", e = !0, i = "search");
-      s === void 0 && n && (s = L(r, i)), s && m.emit("PopoverActionClick", s), e && this.$emit("resource-selected", r);
+        })), o.eventType = "selected", e = !0, i = "search");
+      s === void 0 && n && (s = B(o, i)), s && f.emit("PopoverActionClick", s), e && this.$emit("resource-selected", o);
     },
     resourceHasAction: function(t) {
       return t.type === "URL" || t.type === "Search" || t.type === "Neuron Search" || t.type == "Facet" || t.type == "Facets";
@@ -1010,7 +1014,7 @@ const C = {
             if (e.length > 0)
               return e;
           }
-          let i = R(a);
+          let i = L(a);
           if (i)
             return i;
           if (n && t.eventType === "selected")
@@ -1045,10 +1049,10 @@ const C = {
         }
         let e;
         try {
-          let r = 0, l = !1;
-          for (; !l && r < n.organisms.subject.length; ) {
-            const d = n.organisms.subject[r];
-            d.species && (e = d.species.name, l = !0), r += 1;
+          let o = 0, c = !1;
+          for (; !c && o < n.organisms.subject.length; ) {
+            const d = n.organisms.subject[o];
+            d.species && (e = d.species.name, c = !0), o += 1;
           }
         } catch {
           e = void 0;
@@ -1110,7 +1114,7 @@ const C = {
     requestSynchronisedEvent: function() {
     },
     getAvailableTerms: function() {
-      let t = B();
+      let t = R();
       for (let a = 0; a < t.length; a++)
         this.idNamePair[t[a].id] = t[a].name;
       if (this.apiLocation) {
@@ -1125,17 +1129,38 @@ const C = {
         });
       }
     },
-    flatmapMarkerUpdate() {
+    flatmapMarkerZoomUpdate() {
     },
     onResize: function() {
     },
     startHelp: function() {
-      this.isInHelp === !1 && (this.helpMode = !0, window.addEventListener("mousedown", this.endHelp), this.isInHelp = !0);
+      this.isInHelp === !1 && (this.helpMode = !0, window.addEventListener("mousedown", this.checkEndHelpMouseDown), this.isInHelp = !0);
     },
     endHelp: function() {
-      window.removeEventListener("mousedown", this.endHelp), this.helpMode = !1, setTimeout(() => {
+      window.removeEventListener("mousedown", this.checkEndHelpMouseDown), this.helpMode = !1, setTimeout(() => {
         this.isInHelp = !1;
       }, 200);
+    },
+    onHelpModeShowNext: function() {
+      this.helpModeActiveItem += 1;
+    },
+    onHelpModeLastItem: function(t) {
+      t && (this.helpModeLastItem = !0);
+    },
+    onFinishHelpMode: function() {
+      this.helpMode = !1, this.helpModeActiveItem = 0, this.helpModeLastItem = !1;
+    },
+    onTooltipShown: function() {
+      this.$refs.multiflatmap && this.$refs.multiflatmapHelp && this.$refs.multiflatmapHelp.toggleTooltipHighlight(), this.$refs.flatmap && this.$refs.flatmapHelp && this.$refs.flatmapHelp.toggleTooltipHighlight(), this.$refs.scaffold && this.$refs.scaffoldHelp && this.$refs.scaffoldHelp.toggleTooltipHighlight();
+    },
+    onMapTooltipShown: function() {
+      this.$refs.multiflatmap && this.$refs.multiflatmapHelp && this.$refs.multiflatmapHelp.toggleTooltipPinHighlight(), this.$refs.flatmap && this.$refs.flatmapHelp && this.$refs.flatmapHelp.toggleTooltipPinHighlight(), this.$refs.scaffold && this.$refs.scaffoldHelp && this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
+    },
+    /**
+     * End help-mode only if user clicks outside of help mode dialog.
+     */
+    checkEndHelpMouseDown: function(t) {
+      t.target.closest(".help-mode-dialog") || this.endHelp();
     }
   },
   data: function() {
@@ -1149,6 +1174,11 @@ const C = {
         bottom: "0px"
       },
       helpMode: !1,
+      helpModeActiveItem: 0,
+      helpModeLastItem: !1,
+      multiflatmapRef: null,
+      flatmapRef: null,
+      scaffoldRef: null,
       idNamePair: {},
       scaffoldLoaded: !1,
       isInHelp: !1
@@ -1156,8 +1186,14 @@ const C = {
   },
   created: function() {
     this.flatmapAPI = void 0, this.apiLocation = void 0, this.settingsStore.flatmapAPI && (this.flatmapAPI = this.settingsStore.flatmapAPI), this.settingsStore.sparcApi && (this.apiLocation = this.settingsStore.sparcApi);
+  },
+  watch: {
+    helpMode: function(t) {
+      t || (this.helpModeActiveItem = 0);
+    }
   }
 };
 export {
-  C
+  C,
+  U as m
 };

package/dist/Flatmap-BEStr9DR.js

@@ -0,0 +1,146 @@
+import { U as h, B as c } from "./flatmapvuer-C67b_5lI.js";
+import { _ as u, t as g, T as r, E as s } from "./index-CpppckRD.js";
+import { C as M } from "./ContentMixin-Belbk7R9.js";
+import { D as I } from "./style-CdEDV2B6.js";
+import { resolveComponent as p, openBlock as i, createElementBlock as y, Fragment as v, createVNode as S, createBlock as F, createCommentVNode as w } from "vue";
+const C = {
+  name: "Flatmap",
+  mixins: [M, I],
+  components: {
+    FlatmapVuer: h,
+    HelpModeDialog: c
+  },
+  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() {
+      var e;
+      return (e = this.$refs.flatmap) == null ? void 0 : e.mapImp;
+    },
+    flatmaprResourceSelected: function(e, t) {
+      if (this.resourceSelected(
+        e,
+        t,
+        this.$refs.flatmap.viewingMode === "Exploration"
+      ), t.eventType === "click" && t.feature.type === "feature") {
+        const o = {
+          label: t.label || "",
+          id: t.feature.id || "",
+          featureId: t.feature.featureId || "",
+          taxonomy: t.taxonomy || "",
+          resources: t.resource.join(", ")
+        }, a = g(o);
+        r.sendEvent({
+          event: "interaction_event",
+          event_name: "portal_maps_connectivity",
+          category: a,
+          location: e + " " + this.$refs.flatmap.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: o, checked: a, selectionsTitle: n } = e;
+      r.sendEvent({
+        event: "interaction_event",
+        event_name: "portal_maps_pathway_change",
+        category: t + " [" + o + "] " + a,
+        location: n
+      });
+    },
+    highlightFeatures: function(e) {
+      let t = e.name;
+      const o = this.$refs.flatmap.mapImp;
+      if (t) {
+        const a = o.search(t);
+        a.featureIds[0] && o.highlightFeatures([
+          o.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 n = this.$refs.flatmap.mapImp.annotation(a);
+        n && n.label && t.push(n.label);
+      });
+    },
+    zoomToFeatures: function(e, t) {
+      let o = e.name;
+      const a = this.$refs.flatmap.mapImp;
+      if (o) {
+        const n = a.search(o);
+        if (n.featureIds.length) {
+          let l = a.modelForFeature(n.featureIds[0]);
+          l ? (t && a.selectFeatures(l), a.zoomToFeatures(l)) : a.clearSearchResults();
+        }
+      } else
+        a.clearSearchResults();
+    }
+  },
+  computed: {
+    facetSpecies() {
+      return this.settingsStore.facets.species;
+    }
+  },
+  mounted: function() {
+    this.getAvailableTerms(), s.on("markerUpdate", () => {
+      this.flatmapMarkerZoomUpdate(!0, void 0);
+    });
+  }
+};
+function T(e, t, o, a, n, l) {
+  const m = p("FlatmapVuer"), f = p("HelpModeDialog");
+  return i(), y(v, null, [
+    S(m, {
+      state: e.entry.state,
+      entry: e.entry.resource,
+      onResourceSelected: t[0] || (t[0] = (d) => l.flatmaprResourceSelected(e.entry.type, d)),
+      onPanZoomCallback: e.flatmapPanZoomCallback,
+      name: e.entry.resource,
+      style: { height: "100%", width: "100%" },
+      minZoom: e.entry.minZoom,
+      helpMode: e.helpMode,
+      helpModeActiveItem: e.helpModeActiveItem,
+      helpModeInitialIndex: -1,
+      helpModeDialog: e.useHelpModeDialog,
+      onHelpModeLastItem: e.onHelpModeLastItem,
+      onShownTooltip: e.onTooltipShown,
+      onShownMapTooltip: e.onMapTooltipShown,
+      pathControls: !0,
+      ref: "flatmap",
+      onReady: l.flatmapReadyCall,
+      displayMinimap: !1,
+      displayWarning: !0,
+      enableOpenMapUI: !0,
+      flatmapAPI: e.flatmapAPI,
+      sparcAPI: e.apiLocation,
+      onOpenMap: e.openMap,
+      onPathwaySelectionChanged: l.onPathwaySelectionChanged
+    }, null, 8, ["state", "entry", "onPanZoomCallback", "name", "minZoom", "helpMode", "helpModeActiveItem", "helpModeDialog", "onHelpModeLastItem", "onShownTooltip", "onShownMapTooltip", "onReady", "flatmapAPI", "sparcAPI", "onOpenMap", "onPathwaySelectionChanged"]),
+    e.helpMode && e.useHelpModeDialog ? (i(), F(f, {
+      key: 0,
+      ref: "flatmapHelp",
+      flatmapRef: e.flatmapRef,
+      lastItem: e.helpModeLastItem,
+      onShowNext: e.onHelpModeShowNext,
+      onFinishHelpMode: e.onFinishHelpMode
+    }, null, 8, ["flatmapRef", "lastItem", "onShowNext", "onFinishHelpMode"])) : w("", !0)
+  ], 64);
+}
+const $ = /* @__PURE__ */ u(C, [["render", T], ["__scopeId", "data-v-7a997b4c"]]);
+export {
+  $ as default
+};

package/dist/{Iframe-fcNscihB.js → Iframe-CNeqS04g.js}

@@ -1,6 +1,6 @@
-import { C as r } from "./ContentMixin-C35Jowvp.js";
+import { C as r } from "./ContentMixin-Belbk7R9.js";
 import { openBlock as o, createElementBlock as t, createElementVNode as s } from "vue";
-import { _ as n } from "./index-DIFC-Q9x.js";
+import { _ as n } from "./index-CpppckRD.js";
 const a = {
   name: "Iframe",
   mixins: [r]