@abi-software/mapintegratedvuer 1.3.5-beta.0 → 1.4.0

package/dist/Flatmap-CeqTJMXV.js

@@ -0,0 +1,159 @@
+import { _ as d, L as h, t as u, T as s, E as l } from "./index-O_8s0SlM.js";
+import { C as I } from "./ContentMixin-Kgbrl_Sm.js";
+import { D as y, W as g } from "./style-C4WSp4wW.js";
+import { resolveComponent as p, openBlock as r, createElementBlock as M, createVNode as v, createBlock as S, createCommentVNode as C } from "vue";
+const w = {
+  name: "Flatmap",
+  mixins: [I, y],
+  components: {
+    FlatmapVuer: g,
+    HelpModeDialog: h
+  },
+  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 = u(o);
+        s.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 };
+      l.emit("mapImpProv", t), this.$emit("flatmap-provenance-ready", t), this.flatmapReadyForMarkerUpdates(e), l.emit("mapLoaded", e);
+    },
+    onPathwaySelectionChanged: function(e) {
+      const { label: t, property: o, checked: a, selectionsTitle: n } = e;
+      s.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 i = a.modelForFeature(n.featureIds[0]);
+          i ? (t && a.selectFeatures(i), a.zoomToFeatures(i)) : a.clearSearchResults();
+        }
+      } else
+        a.clearSearchResults();
+    },
+    changeViewingMode: function(e) {
+      this.$refs.flatmap.changeViewingMode(e);
+    }
+  },
+  computed: {
+    facetSpecies() {
+      return this.settingsStore.facets.species;
+    }
+  },
+  mounted: function() {
+    l.on("markerUpdate", () => {
+      this.flatmapMarkerUpdate(void 0);
+    }), l.on("hoverUpdate", () => {
+      this.mapHoverHighlight(this.$refs.flatmap.mapImp);
+    }), l.on("show-connectivity", (e) => {
+      const { featureIds: t, offset: o } = e, a = this.$refs.flatmap;
+      a && a.moveMap(t, {
+        offsetX: o ? -150 : 0,
+        zoom: 4
+      });
+    });
+  }
+}, F = { class: "viewer-container" };
+function b(e, t, o, a, n, i) {
+  const m = p("FlatmapVuer"), f = p("HelpModeDialog");
+  return r(), M("div", F, [
+    v(m, {
+      state: e.entry.state,
+      entry: e.entry.resource,
+      onResourceSelected: t[0] || (t[0] = (c) => i.flatmaprResourceSelected(e.entry.type, c)),
+      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,
+      onConnectivityInfoOpen: e.onConnectivityInfoOpen,
+      onConnectivityInfoClose: e.onConnectivityInfoClose,
+      connectivityInfoSidebar: e.connectivityInfoSidebar,
+      pathControls: !0,
+      ref: "flatmap",
+      onReady: i.flatmapReadyCall,
+      displayMinimap: !1,
+      displayWarning: !0,
+      enableOpenMapUI: !0,
+      flatmapAPI: e.flatmapAPI,
+      sparcAPI: e.apiLocation,
+      onOpenMap: e.openMap,
+      onPathwaySelectionChanged: i.onPathwaySelectionChanged
+    }, null, 8, ["state", "entry", "onPanZoomCallback", "name", "minZoom", "helpMode", "helpModeActiveItem", "helpModeDialog", "onHelpModeLastItem", "onShownTooltip", "onShownMapTooltip", "onConnectivityInfoOpen", "onConnectivityInfoClose", "connectivityInfoSidebar", "onReady", "flatmapAPI", "sparcAPI", "onOpenMap", "onPathwaySelectionChanged"]),
+    e.helpMode && e.useHelpModeDialog ? (r(), S(f, {
+      key: 0,
+      ref: "flatmapHelp",
+      flatmapRef: e.flatmapRef,
+      lastItem: e.helpModeLastItem,
+      onShowNext: e.onHelpModeShowNext,
+      onFinishHelpMode: e.onFinishHelpMode
+    }, null, 8, ["flatmapRef", "lastItem", "onShowNext", "onFinishHelpMode"])) : C("", !0)
+  ]);
+}
+const P = /* @__PURE__ */ d(w, [["render", b], ["__scopeId", "data-v-3b350e7b"]]);
+export {
+  P as default
+};

package/dist/Iframe-Dts_44jv.js

@@ -0,0 +1,19 @@
+import { C as r } from "./ContentMixin-Kgbrl_Sm.js";
+import { openBlock as o, createElementBlock as t, createElementVNode as s } from "vue";
+import { _ as n } from "./index-O_8s0SlM.js";
+const a = {
+  name: "Iframe",
+  mixins: [r]
+}, c = { class: "map-iframe-container" }, i = ["src"];
+function m(e, f, _, p, d, l) {
+  return o(), t("div", c, [
+    s("iframe", {
+      class: "my-iframe",
+      src: e.entry.resource.share_link
+    }, null, 8, i)
+  ]);
+}
+const $ = /* @__PURE__ */ n(a, [["render", m], ["__scopeId", "data-v-60f8bfe1"]]);
+export {
+  $ as default
+};

package/dist/MultiFlatmap-CwsjL6gP.js

@@ -0,0 +1,332 @@
+import { _ as u, L as h, a as y, g, E as s, t as M, T as p } from "./index-O_8s0SlM.js";
+import { C as v } from "./ContentMixin-Kgbrl_Sm.js";
+import { D as I, v as S } from "./style-C4WSp4wW.js";
+import { resolveComponent as f, openBlock as c, createElementBlock as C, createVNode as F, createBlock as k, createCommentVNode as w } from "vue";
+const R = '<svg width="72px" height="72px" viewBox="0 0 24 24" fill="yellow"><path d="M11.0748 3.25583C11.4141 2.42845 12.5859 2.42845 12.9252 3.25583L14.6493 7.45955C14.793 7.80979 15.1221 8.04889 15.4995 8.07727L20.0303 8.41798C20.922 8.48504 21.2841 9.59942 20.6021 10.1778L17.1369 13.1166C16.8482 13.3614 16.7225 13.7483 16.8122 14.1161L17.8882 18.5304C18.1 19.3992 17.152 20.0879 16.3912 19.618L12.5255 17.2305C12.2034 17.0316 11.7966 17.0316 11.4745 17.2305L7.60881 19.618C6.84796 20.0879 5.90001 19.3992 6.1118 18.5304L7.18785 14.1161C7.2775 13.7483 7.1518 13.3614 6.86309 13.1166L3.3979 10.1778C2.71588 9.59942 3.07796 8.48504 3.96971 8.41798L8.50046 8.07727C8.87794 8.04889 9.20704 7.80979 9.35068 7.45955L11.0748 3.25583Z" stroke="#000000" stroke-width="2"/></svg>', d = (e) => {
+  const t = [
+    {
+      display: "Open AC Map",
+      key: "AC"
+    },
+    {
+      display: "Open FC Map",
+      key: "FC"
+    },
+    {
+      display: "Open 3D Human Map",
+      key: "3D"
+    }
+  ];
+  switch (e) {
+    case "Human Male":
+    case "Human Female":
+    case "Rat":
+      t.push({
+        display: "Open Sync Map",
+        key: "SYNC"
+      });
+      break;
+  }
+  return t;
+}, b = {
+  name: "MultiFlatmap",
+  mixins: [v, I],
+  components: {
+    MultiFlatmapVuer: S,
+    HelpModeDialog: h
+  },
+  data: function() {
+    return {
+      zoomLevel: 6,
+      flatmapReady: !1,
+      availableSpecies: y(),
+      scaffoldResource: {},
+      showStarInLegend: !1,
+      openMapOptions: d("Rat")
+    };
+  },
+  methods: {
+    /**
+     * Toggle sync mode on/off depending on species and current state
+     */
+    toggleSyncMode: async function() {
+      if (this.syncMode == !1) {
+        let e;
+        this.activeSpecies === "Rat" ? e = {
+          contextCard: void 0,
+          discoverId: void 0,
+          label: "Rat Body",
+          resource: "https://mapcore-bucket1.s3.us-west-2.amazonaws.com/WholeBody/31-May-2021/ratBody/ratBody_syncmap_metadata.json",
+          title: "View 3D scaffold",
+          layout: "2horpanel",
+          type: "SyncMap"
+        } : (this.activeSpecies === "Human Male" || this.activeSpecies === "Human Female") && ("human" in this.scaffoldResource || (this.scaffoldResource.human = await g(this.apiLocation, "human")), e = {
+          contextCardUrl: this.scaffoldResource.human.datasetInfo.contextCardUrl,
+          discoverId: this.scaffoldResource.human.datasetInfo.discoverId,
+          s3uri: this.scaffoldResource.human.datasetInfo.s3uri,
+          version: this.scaffoldResource.human.datasetInfo.version,
+          label: "Human Body",
+          resource: this.scaffoldResource.human.url,
+          title: "View 3D scaffold",
+          layout: "2vertpanel",
+          type: "SyncMap",
+          isBodyScaffold: !0
+        }), e && s.emit("SyncModeRequest", { flag: !0, action: e });
+      } else
+        s.emit("SyncModeRequest", { flag: !1 });
+    },
+    getState: function() {
+      if (this.flatmapReady)
+        return this.$refs.multiflatmap.getState();
+    },
+    flatmapPanZoomCallback: function(e) {
+      if (this.mouseHovered) {
+        const t = {
+          paneIndex: this.entry.id,
+          eventType: "panZoom",
+          payload: e,
+          type: this.entry.type
+        };
+        this.$emit("resource-selected", t);
+      }
+    },
+    /**
+     * Perform a local search on this contentvuer
+     */
+    search: function(e) {
+      return this.$refs.multiflatmap.getCurrentFlatmap().searchAndShowResult(e, !0);
+    },
+    /**
+     * Append the list of suggested terms to suggestions
+     */
+    searchSuggestions: function(e, t) {
+      const a = this.$refs.multiflatmap.getCurrentFlatmap();
+      e && a.mapImp && a.mapImp.search(e).__featureIds.forEach((o) => {
+        const i = a.mapImp.annotation(o);
+        i && i.label && t.push(i.label);
+      });
+    },
+    flatmaprResourceSelected: function(e, t) {
+      const a = this.$refs.multiflatmap.getCurrentFlatmap();
+      if (this.resourceSelected(e, t, a.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(", ")
+        }, o = M(n);
+        p.sendEvent({
+          event: "interaction_event",
+          event_name: "portal_maps_connectivity",
+          category: o,
+          location: e + " " + a.viewingMode
+        });
+      }
+    },
+    onPathwaySelectionChanged: function(e) {
+      const { label: t, property: a, checked: n, selectionsTitle: o } = e;
+      p.sendEvent({
+        event: "interaction_event",
+        event_name: "portal_maps_pathway_change",
+        category: t + " [" + a + "] " + n,
+        location: o
+      });
+    },
+    onOpenPubmedUrl: function(e) {
+      p.sendEvent({
+        event: "interaction_event",
+        event_name: "portal_maps_pubmed_url",
+        file_path: e,
+        location: "map_popup_button"
+      });
+    },
+    /**
+     * Handle sync pan zoom event
+     */
+    handleSyncPanZoomEvent: function(e) {
+      if (!this.mouseHovered && e.type !== this.entry.type) {
+        const t = e.payload.zoom, a = e.payload.target, n = this.$el.clientHeight, o = this.$el.clientWidth, i = Math.max(o, n);
+        let r = o / i / t;
+        const l = n / i / t, m = [
+          a[0] / 2 + 0.5 - r / 2,
+          0.5 - a[1] / 2 - l / 2
+        ];
+        this.$refs.multiflatmap.getCurrentFlatmap().mapImp.panZoomTo(m, [r, l]);
+      }
+    },
+    displayTooltip: function(e) {
+      if (e) {
+        let t = e.name;
+        t ? this.search(t) : this.$refs.multiflatmap.getCurrentFlatmap().mapImp.clearSearchResults();
+      }
+    },
+    zoomToFeatures: function(e, t) {
+      let a = e.name;
+      const n = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+      if (a) {
+        const o = n.search(a);
+        o.featureIds.length > 0 ? (t && n.selectFeatures(o.featureIds), n.zoomToFeatures(o.featureIds)) : n.clearSearchResults();
+      } else
+        n.clearSearchResults();
+    },
+    highlightFeatures: function(e) {
+      let t = e.name;
+      const a = this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+      if (t) {
+        const n = a.search(t);
+        n.featureIds.length > 0 && a.zoomToFeatures(n.featureIds, { noZoomIn: !0 });
+      }
+    },
+    updateProvCard: function() {
+      const e = this.getFlatmapImp();
+      if (e) {
+        let t = { id: this.entry.id, prov: e.provenance };
+        this.$emit("flatmap-provenance-ready", t);
+      }
+    },
+    flatmapChanged: async function(e) {
+      this.activeSpecies = e, this.openMapOptions = d(e), this.$emit("species-changed", e), this.entry.state && this.entry.state.species === this.activeSpecies || this.syncMode == !0 && await this.toggleSyncMode(), this.updateProvCard(), this.onConnectivityInfoClose(), p.sendEvent({
+        event: "interaction_event",
+        event_name: "portal_maps_species_change",
+        category: this.activeSpecies
+      });
+    },
+    multiFlatmapReady: function(e) {
+      if (e) {
+        e.enablePanZoomEvents(!0), this.flatmapReady = !0;
+        const t = e.mapImp;
+        this.flatmapMarkerUpdate(t), this.updateProvCard(), s.emit("mapLoaded", e);
+      }
+    },
+    getFlatmapImp: function() {
+      if (this.entry.type === "MultiFlatmap" && this.flatmapReady && this.$refs.multiflatmap)
+        return this.$refs.multiflatmap.getCurrentFlatmap().mapImp;
+    },
+    flatmapAreaSearch() {
+      let a = {
+        type: "Facets",
+        label: "Unused",
+        val: this.getFlatmapImp().visibleMarkerAnatomicalIds().map((n) => this.idNamePair[n])
+      };
+      s.emit("PopoverActionClick", a);
+    },
+    restoreFeaturedMarkers: function(e) {
+      this.settingsStore.resetFeaturedMarkerIdentifier();
+      const t = this.settingsStore.featuredMarkers;
+      this.updateFeaturedMarkers(t, e);
+    },
+    // updateFeaturedMarkers will step through the featured markers and add them to the map
+    updateFeaturedMarkers: function(e, t) {
+      this.showStarInLegend = !1;
+      for (let a = 0; a < e.length; ++a)
+        e[a] && (this.settingsStore.featuredMarkerIdentifiers[a] || this.addFeaturedMarker(e[a], a, t) && (this.showStarInLegend = !0));
+    },
+    // addFeaturedMarker: add a featured marker to the map at the specified uberon location
+    addFeaturedMarker: function(e, t, a) {
+      const n = this.settingsStore.featuredMarkerSpecies[t];
+      if (n && !this.activeSpecies.startsWith(n))
+        return !1;
+      let o = a;
+      if (o || (o = this.getFlatmapImp()), o) {
+        let i = document.createElement("div");
+        i.innerHTML = R;
+        const r = o.addMarker(e, {
+          element: i,
+          className: "highlight-marker",
+          cluster: !1
+        });
+        return this.settingsStore.updateFeaturedMarkerIdentifier({
+          index: t,
+          markerIdentifier: r
+        }), !0;
+      }
+      return !1;
+    },
+    /**
+     * Change the view mode of the current flatmap
+     */
+    changeViewingMode: function(e) {
+      this.$refs.multiflatmap.getCurrentFlatmap().changeViewingMode(e);
+    }
+  },
+  computed: {
+    facetSpecies() {
+      return this.settingsStore.facets.species;
+    },
+    featuredMarkers() {
+      return this.settingsStore.featuredMarkers;
+    }
+  },
+  watch: {
+    syncMode: function(e) {
+      this.$refs.multiflatmap.getCurrentFlatmap() && this.$refs.multiflatmap.getCurrentFlatmap().enablePanZoomEvents(e);
+    },
+    featuredMarkers: function(e) {
+      this.flatmapReady && this.updateFeaturedMarkers(e, void 0);
+    }
+  },
+  mounted: function() {
+    this.getFeaturedDatasets(), s.on("show-connectivity", (e) => {
+      const { featureIds: t, offset: a } = e;
+      if (this.flatmapReady && this.$refs.multiflatmap) {
+        const n = this.$refs.multiflatmap.getCurrentFlatmap();
+        n && n.moveMap(t, {
+          offsetX: a ? -150 : 0,
+          zoom: 4
+        });
+      }
+    }), s.on("markerUpdate", () => {
+      this.flatmapReady && this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+    }), s.on("hoverUpdate", () => {
+      this.flatmapReady && this.mapHoverHighlight(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
+    });
+  }
+}, H = { class: "viewer-container" };
+function L(e, t, a, n, o, i) {
+  const r = f("MultiFlatmapVuer"), l = f("HelpModeDialog");
+  return c(), C("div", H, [
+    F(r, {
+      availableSpecies: e.availableSpecies,
+      onFlatmapChanged: i.flatmapChanged,
+      onReady: i.multiFlatmapReady,
+      state: e.entry.state,
+      onResourceSelected: t[0] || (t[0] = (m) => i.flatmaprResourceSelected(e.entry.type, m)),
+      style: { height: "100%", width: "100%" },
+      initial: e.entry.resource,
+      helpMode: e.helpMode,
+      helpModeActiveItem: e.helpModeActiveItem,
+      helpModeDialog: e.useHelpModeDialog,
+      onHelpModeLastItem: e.onHelpModeLastItem,
+      onShownTooltip: e.onTooltipShown,
+      onShownMapTooltip: e.onMapTooltipShown,
+      onConnectivityInfoOpen: e.onConnectivityInfoOpen,
+      onConnectivityInfoClose: e.onConnectivityInfoClose,
+      connectivityInfoSidebar: e.connectivityInfoSidebar,
+      ref: "multiflatmap",
+      displayMinimap: !0,
+      showStarInLegend: e.showStarInLegend,
+      enableOpenMapUI: !0,
+      openMapOptions: e.openMapOptions,
+      flatmapAPI: e.flatmapAPI,
+      sparcAPI: e.apiLocation,
+      onPanZoomCallback: i.flatmapPanZoomCallback,
+      onOpenMap: e.openMap,
+      onFinishHelpMode: e.endHelp,
+      onPathwaySelectionChanged: i.onPathwaySelectionChanged,
+      onOpenPubmedUrl: i.onOpenPubmedUrl
+    }, null, 8, ["availableSpecies", "onFlatmapChanged", "onReady", "state", "initial", "helpMode", "helpModeActiveItem", "helpModeDialog", "onHelpModeLastItem", "onShownTooltip", "onShownMapTooltip", "onConnectivityInfoOpen", "onConnectivityInfoClose", "connectivityInfoSidebar", "showStarInLegend", "openMapOptions", "flatmapAPI", "sparcAPI", "onPanZoomCallback", "onOpenMap", "onFinishHelpMode", "onPathwaySelectionChanged", "onOpenPubmedUrl"]),
+    e.helpMode && e.useHelpModeDialog ? (c(), k(l, {
+      key: 0,
+      ref: "multiflatmapHelp",
+      multiflatmapRef: e.multiflatmapRef,
+      lastItem: e.helpModeLastItem,
+      onShowNext: e.onHelpModeShowNext,
+      onFinishHelpMode: e.onFinishHelpMode
+    }, null, 8, ["multiflatmapRef", "lastItem", "onShowNext", "onFinishHelpMode"])) : w("", !0)
+  ]);
+}
+const E = /* @__PURE__ */ u(b, [["render", L], ["__scopeId", "data-v-d723825f"]]);
+export {
+  E as default
+};

package/dist/Plot-CONXSZVo.js

@@ -0,0 +1,24 @@
+import { C as o } from "./plotvuer-X4h-Lj3L.js";
+import { C as a } from "./ContentMixin-Kgbrl_Sm.js";
+import { resolveComponent as r, openBlock as n, createBlock as s } from "vue";
+import { _ as m } from "./index-O_8s0SlM.js";
+const p = {
+  name: "Plot",
+  mixins: [a],
+  components: {
+    PlotVuer: o
+  }
+};
+function l(e, c, u, d, i, f) {
+  const t = r("PlotVuer");
+  return n(), s(t, {
+    "data-source": e.entry.resource.dataSource,
+    metadata: e.entry.resource.metadata,
+    "supplemental-data": e.entry.resource.supplementalData,
+    style: { overflow: "hidden" }
+  }, null, 8, ["data-source", "metadata", "supplemental-data"]);
+}
+const $ = /* @__PURE__ */ m(p, [["render", l]]);
+export {
+  $ as default
+};