@abi-software/map-side-bar 2.4.2-beta.6 → 2.4.2-beta.8

package/dist/map-side-bar.js

@@ -45212,9 +45212,9 @@ ws.warnings = function(e) {
 };
 ws.version = ede;
 ws.stylesheet = ws.Stylesheet = Q_;
-let tde = class {
+let tde = class extends EventTarget {
   constructor(e, t) {
-    ha(this, "cyg", null), ha(this, "nodes", []), ha(this, "edges", []), ha(this, "axons", []), ha(this, "dendrites", []), ha(this, "labelCache", /* @__PURE__ */ new Map()), ha(this, "graphCanvas", null), this.labelCache = e, this.graphCanvas = t;
+    super(), ha(this, "cyg", null), ha(this, "nodes", []), ha(this, "edges", []), ha(this, "axons", []), ha(this, "dendrites", []), ha(this, "labelCache", /* @__PURE__ */ new Map()), ha(this, "graphCanvas", null), this.labelCache = e, this.graphCanvas = t;
   }
   async addConnectivity(e) {
     if (this.axons = e.axons.map((t) => JSON.stringify(t)), this.dendrites = e.dendrites.map((t) => JSON.stringify(t)), e.connectivity.length)
@@ -45233,7 +45233,12 @@ let tde = class {
       });
   }
   showConnectivity(e) {
-    this.cyg = new rde(this, e);
+    this.cyg = new rde(this, e), this.cyg.on("tap-node", (t) => {
+      const n = new CustomEvent("tap-node", {
+        detail: t.detail
+      });
+      this.dispatchEvent(n);
+    });
   }
   clearConnectivity() {
     var e;
@@ -45270,6 +45275,9 @@ let tde = class {
     };
     return this.axons.includes(t) ? this.dendrites.includes(t) ? o["both-a-d"] = !0 : o.axon = !0 : this.dendrites.includes(t) && (o.dendrite = !0), o;
   }
+  on(e, t) {
+    this.addEventListener(e, t);
+  }
 };
 const nde = [
   {
@@ -45312,11 +45320,10 @@ const nde = [
     }
   }
 ];
-class rde {
+class rde extends EventTarget {
   constructor(t, n) {
-    ha(this, "cy"), ha(this, "tooltip");
     var r;
-    this.cy = ws({
+    super(), ha(this, "cy"), ha(this, "tooltip"), this.cy = ws({
       container: n,
       elements: t.elements,
       layout: {
@@ -45329,7 +45336,7 @@ class rde {
       minZoom: 0.5,
       maxZoom: 10,
       wheelSensitivity: 0.4
-    }).on("mouseover", "node", this.overNode.bind(this)).on("mouseout", "node", this.exitNode.bind(this)).on("position", "node", this.moveNode.bind(this)), this.tooltip = document.createElement("div"), this.tooltip.className = "cy-graph-tooltip", this.tooltip.hidden = !0, (r = n == null ? void 0 : n.lastChild) == null || r.appendChild(this.tooltip);
+    }).on("mouseover", "node", this.overNode.bind(this)).on("mouseout", "node", this.exitNode.bind(this)).on("position", "node", this.moveNode.bind(this)).on("tap", "node", this.tapNode.bind(this)), this.tooltip = document.createElement("div"), this.tooltip.className = "cy-graph-tooltip", this.tooltip.hidden = !0, (r = n == null ? void 0 : n.lastChild) == null || r.appendChild(this.tooltip);
   }
   remove() {
     this.cy && this.cy.destroy();
@@ -45349,6 +45356,15 @@ class rde {
   exitNode(t) {
     this.tooltip.hidden = !0;
   }
+  tapNode(t) {
+    const n = t.target.data(), r = new CustomEvent("tap-node", {
+      detail: n
+    });
+    this.dispatchEvent(r);
+  }
+  on(t, n) {
+    this.addEventListener(t, n);
+  }
 }
 const ode = 1.3, ade = 24 * 60 * 60 * 1e3, ide = "Reset position", hk = "Lock zoom (to scroll)", sde = "Unlock zoom", lde = "#8300bf", ude = {
   name: "ConnectivityGraph",
@@ -45423,7 +45439,11 @@ const ode = 1.3, ade = 24 * 60 * 60 * 1e3, ide = "Reset position", hk = "Lock zo
     },
     showGraph: async function(e) {
       const t = this.$refs.graphCanvas;
-      this.showSpinner(), this.connectivityGraph = new tde(this.labelCache, t), await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(e)), this.hideSpinner(), this.connectivityGraph.showConnectivity(t);
+      this.showSpinner(), this.connectivityGraph = new tde(this.labelCache, t), await this.connectivityGraph.addConnectivity(this.knowledgeByPath.get(e)), this.hideSpinner(), this.connectivityGraph.showConnectivity(t), this.connectivityGraph.on("tap-node", (n) => {
+        const { label: r } = n.detail, o = r.split(`
+`);
+        this.$emit("tap-node", o);
+      });
     },
     query: async function(e, t) {
       const n = `${this.mapServer}knowledge/query/`, r = { sql: e, params: t };
@@ -45530,7 +45550,7 @@ const ode = 1.3, ade = 24 * 60 * 60 * 1e3, ide = "Reset position", hk = "Lock zo
 }, cde = { class: "connectivity-graph" }, dde = {
   ref: "graphCanvas",
   class: "graph-canvas"
-}, pde = { class: "control-panel" }, fde = /* @__PURE__ */ a8('<div class="node-key" data-v-ec98b14b><div class="key-head" data-v-ec98b14b>Node type:</div><div data-v-ec98b14b><div data-v-ec98b14b><span data-v-ec98b14b>Node:</span><span class="key-box" style="background:#80F0F0;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Axon:</span><span class="key-box" style="background:green;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Dendrite:</span><span class="key-box" style="background:red;" data-v-ec98b14b></span></div><div data-v-ec98b14b><span data-v-ec98b14b>Both:</span><span class="key-box" style="background:gray;" data-v-ec98b14b></span></div></div></div>', 1), hde = { class: "tools" }, vde = { class: "visually-hidden" }, gde = { class: "visually-hidden" };
+}, pde = { class: "control-panel" }, fde = /* @__PURE__ */ a8('<div class="node-key" data-v-d620c023><div class="key-head" data-v-d620c023>Node type:</div><div data-v-d620c023><div data-v-d620c023><span data-v-d620c023>Node:</span><span class="key-box" style="background:#80F0F0;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Axon:</span><span class="key-box" style="background:green;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Dendrite:</span><span class="key-box" style="background:red;" data-v-d620c023></span></div><div data-v-d620c023><span data-v-d620c023>Both:</span><span class="key-box" style="background:gray;" data-v-d620c023></span></div></div></div>', 1), hde = { class: "tools" }, vde = { class: "visually-hidden" }, gde = { class: "visually-hidden" };
 function mde(e, t, n, r, o, a) {
   const i = XY, s = yr, u = Xp, l = qc, c = uZ, d = dZ, f = dre;
   return ot((F(), j("div", cde, [
@@ -45594,7 +45614,7 @@ function mde(e, t, n, r, o, a) {
     [f, e.loading]
   ]);
 }
-const yde = /* @__PURE__ */ FE(ude, [["render", mde], ["__scopeId", "data-v-ec98b14b"]]), bde = {
+const yde = /* @__PURE__ */ FE(ude, [["render", mde], ["__scopeId", "data-v-d620c023"]]), bde = {
   data() {
     return {
       ElIconView: iC
@@ -48799,6 +48819,9 @@ const jO = /* @__PURE__ */ oa(gpe, [["render", ype], ["__scopeId", "data-v-e726c
         behavior: "smooth"
       });
     },
+    onTapNode: function(e) {
+      this.$emit("connectivity-component-click", e);
+    },
     getUpdateCopyContent: function() {
       var n, r, o, a, i;
       if (!this.entry)
@@ -48847,7 +48870,7 @@ const jO = /* @__PURE__ */ oa(gpe, [["render", ype], ["__scopeId", "data-v-e726c
 <br>`);
     }
   }
-}, As = (e) => (Pl("data-v-7d824d63"), e = e(), Fl(), e), xpe = {
+}, As = (e) => (Pl("data-v-b0aeabe2"), e = e(), Fl(), e), xpe = {
   key: 0,
   class: "main"
 }, kpe = { class: "connectivity-info-title" }, Cpe = {
@@ -49099,14 +49122,15 @@ function efe(e, t, n, r, o, a) {
       Ce(p, {
         entry: n.entry.featureId[0],
         mapServer: n.envVars.FLATMAPAPI_LOCATION,
+        onTapNode: a.onTapNode,
         ref: "connectivityGraphRef"
-      }, null, 8, ["entry", "mapServer"])
+      }, null, 8, ["entry", "mapServer", "onTapNode"])
     ])
   ])), [
     [v, e.loading]
   ]) : oe("", !0);
 }
-const HO = /* @__PURE__ */ oa(wpe, [["render", efe], ["__scopeId", "data-v-7d824d63"]]), tfe = {
+const HO = /* @__PURE__ */ oa(wpe, [["render", efe], ["__scopeId", "data-v-b0aeabe2"]]), tfe = {
   name: "Tabs",
   props: {
     tabTitles: {
@@ -49238,6 +49262,13 @@ const UO = /* @__PURE__ */ oa(tfe, [["render", sfe], ["__scopeId", "data-v-ed1ce
     showConnectivity: function(e) {
       this.$emit("show-connectivity", e);
     },
+    /**
+     * This function is triggered after a connectivity component is clicked.
+     * @arg data
+     */
+    onConnectivityComponentClick: function(e) {
+      this.$emit("connectivity-component-click", e);
+    },
     /**
      * This event is emitted when the search filters are changed.
      * @arg `obj` {data, id}
@@ -49406,8 +49437,9 @@ function pfe(e, t, n, r, o, a) {
                   envVars: n.envVars,
                   ref_for: !0,
                   ref: "connectivityTab_" + h.id,
-                  onShowConnectivity: a.showConnectivity
-                }, null, 8, ["entry", "availableAnatomyFacets", "envVars", "onShowConnectivity"])) : oe("", !0)
+                  onShowConnectivity: a.showConnectivity,
+                  onConnectivityComponentClick: a.onConnectivityComponentClick
+                }, null, 8, ["entry", "availableAnatomyFacets", "envVars", "onShowConnectivity", "onConnectivityComponentClick"])) : oe("", !0)
               ], 64)) : ot((F(), fe(d, {
                 key: 1,
                 class: "sidebar-content-container",
@@ -49428,7 +49460,7 @@ function pfe(e, t, n, r, o, a) {
     }, 8, ["modelValue"])
   ], 512);
 }
-const vfe = /* @__PURE__ */ oa(lfe, [["render", pfe], ["__scopeId", "data-v-914d3512"]]);
+const vfe = /* @__PURE__ */ oa(lfe, [["render", pfe], ["__scopeId", "data-v-ee15e5f2"]]);
 export {
   vfe as SideBar
 };