import { _ as u, K as h, a as y, g, E as r, t as M, T as p } from "./index-B-W0fnek.js";
import { C as v } from "./ContentMixin-Bvii7mm_.js";
import { D as I, a as C } from "./style-DNyE_OHZ.js";
import { resolveComponent as f, openBlock as c, createElementBlock as S, createVNode as F, createBlock as k, createCommentVNode as w } from "vue";
const b = '<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;
}, R = {
  name: "MultiFlatmap",
  mixins: [v, I],
  components: {
    MultiFlatmapVuer: C,
    HelpModeDialog: h
  },
  data: function() {
    return {
      zoomLevel: 6,
      flatmapReady: !1,
      availableSpecies: y(),
      scaffoldResource: {},
      showStarInLegend: !1,
      openMapOptions: d("Human Male")
    };
  },
  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 && r.emit("SyncModeRequest", { flag: !0, action: e });
      } else
        r.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();
      if (e && a.mapImp) {
        const n = a.mapImp.search(e);
        (n.__featureIds || n.featureIds).forEach((i) => {
          const s = a.mapImp.annotation(i);
          s && s.label && t.push(s.label);
        });
      }
    },
    flatmaprResourceSelected: function(e, t) {
      const a = this.$refs.multiflatmap.getCurrentFlatmap();
      if (this.resourceSelected(e, t), 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 s = o / i / t;
        const l = n / i / t, m = [
          a[0] / 2 + 0.5 - s / 2,
          0.5 - a[1] / 2 - l / 2
        ];
        this.$refs.multiflatmap.getCurrentFlatmap().mapImp.panZoomTo(m, [s, 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(), r.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])
      };
      r.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 = b;
        const s = o.addMarker(e, {
          element: i,
          className: "highlight-marker",
          cluster: !1
        });
        return this.settingsStore.updateFeaturedMarkerIdentifier({
          index: t,
          markerIdentifier: s
        }), !0;
      }
      return !1;
    },
    /**
     * Change the view mode of the current flatmap
     */
    changeViewingMode: function(e) {
      this.$refs.multiflatmap.getCurrentFlatmap().changeViewingMode(e);
    },
    showConnectivityTooltips: function(e) {
      this.flatmapReady && this.$refs.multiflatmap.getCurrentFlatmap().showConnectivityTooltips(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(), r.on("annotation-close", (e) => {
      e != null && e.tabClose && this.$refs.multiflatmap.getCurrentFlatmap() && this.$refs.multiflatmap.getCurrentFlatmap().annotationEventCallback({}, { type: "aborted" });
    }), r.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
        });
      }
    }), r.on("connectivity-component-click", (e) => {
      this.showConnectivityTooltips(e);
    }), r.on("markerUpdate", () => {
      this.flatmapReady && this.flatmapMarkerUpdate(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
    }), r.on("hoverUpdate", () => {
      this.flatmapReady && this.mapHoverHighlight(this.$refs.multiflatmap.getCurrentFlatmap().mapImp);
    });
  }
}, H = { class: "viewer-container" };
function L(e, t, a, n, o, i) {
  const s = f("MultiFlatmapVuer"), l = f("HelpModeDialog");
  return c(), S("div", H, [
    F(s, {
      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,
      onAnnotationOpen: e.onAnnotationOpen,
      onAnnotationClose: e.onAnnotationClose,
      annotationSidebar: e.annotationSidebar,
      onConnectivityInfoOpen: e.onConnectivityInfoOpen,
      onConnectivityInfoClose: e.onConnectivityInfoClose,
      onConnectivityGraphError: e.onConnectivityGraphError,
      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", "onAnnotationOpen", "onAnnotationClose", "annotationSidebar", "onConnectivityInfoOpen", "onConnectivityInfoClose", "onConnectivityGraphError", "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 T = /* @__PURE__ */ u(R, [["render", L], ["__scopeId", "data-v-4282737c"]]);
export {
  T as default
};