@abi-software/map-utilities 1.2.0-beta.1 → 1.2.0-beta.2

package/dist/map-utilities.js

@@ -9768,187 +9768,668 @@ const Ey = function(e = {}) {
   for (const [o, r] of t)
     n[o] = r;
   return n;
-}, Oy = function(e) {
-  return e ? e.charAt(0).toUpperCase() + e.slice(1) : "";
-}, Iy = {
-  name: "ConnectionDialog",
+}, Oy = {
+  name: "AnnotationPopup",
   props: {
-    connectionEntry: {
-      type: Object,
-      default: {}
-    },
-    inDrawing: {
-      type: Boolean,
-      default: !1
-    },
-    connectionExist: {
-      type: Boolean,
-      default: !1
+    annotationEntry: {
+      type: Object
     }
   },
+  inject: ["$annotator", "userApiKey"],
   data: function() {
     return {
-      tooltipId: void 0
+      displayPair: {
+        "Feature ID": "featureId",
+        Tooltip: "label",
+        Models: "models",
+        Name: "name",
+        Resource: "resourceId"
+      },
+      editing: !1,
+      evidencePrefixes: ["DOI:", "PMID:"],
+      evidencePrefix: "DOI:",
+      evidence: [],
+      authenticated: !1,
+      newEvidence: "",
+      comment: "",
+      prevSubs: [],
+      showSubmissions: !0,
+      errorMessage: "",
+      creator: void 0
     };
   },
+  computed: {
+    isEditable: function() {
+      return this.annotationEntry.resourceId && this.annotationEntry.featureId;
+    },
+    isPositionUpdated: function() {
+      return this.annotationEntry.resourceId && this.annotationEntry.type === "updated" && this.annotationEntry.positionUpdated;
+    },
+    isDeleted: function() {
+      return this.annotationEntry.resourceId && this.annotationEntry.type === "deleted";
+    }
+  },
   methods: {
-    shadowDisplay: function(e) {
-      return this.tooltipId === e ? "always" : "hover";
+    evidenceEntered: function(e) {
+      e && (this.evidence.push(this.evidencePrefix + e), this.newEvidence = "");
     },
-    capitalise: function(e) {
-      return Oy(e);
+    formatTime: function(e) {
+      const t = {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "numeric",
+        second: "numeric"
+      };
+      return new Date(e).toLocaleDateString(void 0, t);
     },
-    handleTooltip: function(e) {
-      this.tooltipId = this.tooltipId === e ? void 0 : e, this.$emit("featureTooltip", this.tooltipId);
+    updatePrevSubmissions: function() {
+      var e;
+      this.$annotator && this.authenticated && this.annotationEntry.resourceId && this.annotationEntry.featureId && ((e = this.$annotator) == null || e.itemAnnotations(
+        this.userApiKey,
+        this.annotationEntry.resourceId,
+        this.annotationEntry.featureId
+      ).then((t) => {
+        this.prevSubs = t;
+      }).catch((t) => {
+        console.log(t);
+      }));
+    },
+    submit: function() {
+      var e;
+      if (this.annotationEntry.type === "updated" && this.annotationEntry.positionUpdated ? this.comment = this.comment ? `Position Updated: ${this.comment}` : "Position Updated" : this.annotationEntry.type === "deleted" && (this.comment = this.comment ? `Feature Deleted: ${this.comment}` : "Feature Deleted"), (this.evidence.length > 0 || this.comment) && this.annotationEntry.resourceId && this.annotationEntry.featureId) {
+        const t = [];
+        this.evidence.forEach((o) => {
+          if (o.includes("DOI:")) {
+            const r = o.replace("DOI:", "https://doi.org/");
+            t.push(new URL(r));
+          } else if (o.includes("PMID:")) {
+            const r = o.replace(
+              "PMID:",
+              "https://pubmed.ncbi.nlm.nih.gov/"
+            );
+            t.push(new URL(r));
+          }
+        });
+        const n = {
+          resource: this.annotationEntry.resourceId,
+          item: Object.assign(
+            { id: this.annotationEntry.featureId },
+            Object.fromEntries(
+              Object.entries(this.annotationEntry).filter(
+                ([o]) => ["label", "models"].includes(o)
+              )
+            )
+          ),
+          body: {
+            evidence: t,
+            comment: this.comment
+          },
+          feature: this.annotationEntry.feature
+        };
+        Object.assign(n.body, this.annotationEntry.body), this.annotationEntry.type === "deleted" && (n.feature = void 0), this.creator && (n.creator = this.creator), (e = this.$annotator) == null || e.addAnnotation(this.userApiKey, n).then(() => {
+          this.$emit("annotation", n), this.errorMessage = "", this.resetSubmission(), this.updatePrevSubmissions();
+        }).catch(() => {
+          this.errorMessage = "There is a problem with the submission, please try again later";
+        });
+      }
+    },
+    removeEvidence: function(e) {
+      this.evidence.splice(e, 1);
+    },
+    resetSubmission: function() {
+      this.editing = !1, this.evidence = [], this.newFeature = "", this.comment = "";
+    }
+  },
+  watch: {
+    annotationEntry: {
+      handler: function(e, t) {
+        e !== t && (this.resetSubmission(), this.updatePrevSubmissions());
+      },
+      immediate: !1,
+      deep: !1
     }
+  },
+  mounted: function() {
+    var e;
+    (e = this.$annotator) == null || e.authenticate(this.userApiKey).then((t) => {
+      t.name && t.email && t.canUpdate ? (this.creator = t, t.orcid || (this.creator.orcid = "0000-0000-0000-0000"), this.authenticated = !0, this.updatePrevSubmissions()) : this.errorMessage = "";
+    });
   }
-}, va = (e) => (Vo("data-v-8168ee98"), e = e(), zo(), e), $y = { class: "dialog-container" }, Ny = /* @__PURE__ */ va(() => /* @__PURE__ */ T("span", { class: "dialog-title" }, "Finalise drawing", -1)), Ay = /* @__PURE__ */ va(() => /* @__PURE__ */ T("span", { class: "dialog-title" }, "Visualise connection", -1)), Py = /* @__PURE__ */ va(() => /* @__PURE__ */ T("b", null, [
-  /* @__PURE__ */ T("span", null, "Related Features")
-], -1));
-function Ly(e, t, n, o, r, a) {
-  const i = Wt, s = cm, l = ua, c = da, u = hm;
-  return b(), E("div", $y, [
-    I(l, null, {
-      default: S(() => [
-        I(c, null, {
+}, hn = (e) => (Vo("data-v-09c78af1"), e = e(), zo(), e), Iy = { class: "block" }, $y = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("div", { class: "title" }, "Feature Annotations", -1)), Ny = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", { class: "sub-title" }, "Previous submissions:", -1)), Ay = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Evidence: ", -1)), Py = ["href"], Ly = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Comment: ", -1)), My = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", { class: "sub-title" }, "Suggest changes:", -1)), Dy = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Evidence:", -1)), By = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Comment:", -1)), Ry = { class: "sub-title" };
+function Hy(e, t, n, o, r, a) {
+  const i = ua, s = ms, l = Me, c = Zo, u = hh, f = fh, v = gh, g = da, d = Bo, h = ty, y = ey, m = ra, k = Wt, $ = I1;
+  return b(), B($, { class: "main" }, {
+    default: S(() => [
+      T("div", Iy, [
+        I(i, { class: "info-field" }, {
           default: S(() => [
-            n.inDrawing ? (b(), B(l, { key: 0 }, {
-              default: S(() => [
-                Ny,
-                I(s, null, {
+            $y
+          ]),
+          _: 1
+        }),
+        n.annotationEntry ? (b(), E(ie, { key: 0 }, [
+          (b(!0), E(ie, null, Re(e.displayPair, (_, C) => se((b(), B(i, {
+            class: "dialog-text",
+            key: _
+          }, {
+            default: S(() => [
+              T("strong", null, Z(C) + ": ", 1),
+              ne(" " + Z(n.annotationEntry[_]), 1)
+            ]),
+            _: 2
+          }, 1024)), [
+            [we, n.annotationEntry[_]]
+          ])), 128)),
+          e.prevSubs.length > 0 ? (b(), E(ie, { key: 0 }, [
+            se(T("div", {
+              class: "hide",
+              onClick: t[0] || (t[0] = (_) => e.showSubmissions = !1)
+            }, [
+              ne(" Hide previous submissions "),
+              I(l, null, {
+                default: S(() => [
+                  I(s)
+                ]),
+                _: 1
+              })
+            ], 512), [
+              [we, e.showSubmissions]
+            ]),
+            se(T("div", {
+              class: "hide",
+              onClick: t[1] || (t[1] = (_) => e.showSubmissions = !0)
+            }, [
+              ne(" Show previous " + Z(e.prevSubs.length) + " submission(s) ", 1),
+              I(l, null, {
+                default: S(() => [
+                  I(c)
+                ]),
+                _: 1
+              })
+            ], 512), [
+              [we, !e.showSubmissions]
+            ]),
+            e.showSubmissions ? (b(), E(ie, { key: 0 }, [
+              I(i, { class: "dialog-spacer" }),
+              I(i, { class: "dialog-text" }, {
+                default: S(() => [
+                  Ny
+                ]),
+                _: 1
+              }),
+              (b(!0), E(ie, null, Re(e.prevSubs, (_, C) => (b(), E("div", {
+                class: "entry",
+                key: C
+              }, [
+                I(i, { class: "dialog-text" }, {
                   default: S(() => [
-                    I(i, {
-                      type: "primary",
-                      plain: "",
-                      onClick: t[0] || (t[0] = (f) => e.$emit("confirmDrawn", !0))
-                    }, {
-                      default: S(() => [
-                        ne(" Confirm ")
-                      ]),
-                      _: 1
-                    }),
-                    I(i, {
-                      type: "primary",
-                      plain: "",
-                      onClick: t[1] || (t[1] = (f) => e.$emit("cancelDrawn", !0))
+                    T("strong", null, Z(a.formatTime(_.created)), 1),
+                    ne(" " + Z(_.creator.name), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                I(i, { class: "dialog-text" }, {
+                  default: S(() => [
+                    Ay,
+                    (b(!0), E(ie, null, Re(_.body.evidence, (A) => (b(), B(i, {
+                      key: A,
+                      class: "dialog-text"
                     }, {
                       default: S(() => [
-                        ne(" Cancel ")
+                        T("a", {
+                          href: A,
+                          target: "_blank"
+                        }, Z(A), 9, Py)
                       ]),
-                      _: 1
-                    })
+                      _: 2
+                    }, 1024))), 128))
                   ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })) : (b(), B(l, { key: 1 }, {
-              default: S(() => [
-                Ay,
-                I(i, {
-                  type: "primary",
-                  plain: "",
-                  onClick: t[2] || (t[2] = (f) => e.$emit("dialogDisplay", !1))
-                }, {
+                  _: 2
+                }, 1024),
+                I(i, { class: "dialog-text" }, {
                   default: S(() => [
-                    ne(" Close ")
+                    Ly,
+                    ne(" " + Z(_.body.comment), 1)
                   ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            }))
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    }),
-    n.connectionExist ? (b(), B(l, { key: 0 }, {
-      default: S(() => [
-        I(c, null, {
-          default: S(() => [
-            Py,
-            (b(!0), E(ie, null, Re(n.connectionEntry, (f, v) => (b(), B(l, { key: v }, {
-              default: S(() => [
-                I(u, {
-                  shadow: a.shadowDisplay(v),
-                  onClick: (g) => a.handleTooltip(v)
-                }, {
+                  _: 2
+                }, 1024)
+              ]))), 128))
+            ], 64)) : D("", !0)
+          ], 64)) : D("", !0),
+          e.authenticated ? (b(), E(ie, { key: 1 }, [
+            a.isEditable ? (b(), E(ie, { key: 0 }, [
+              I(i, { class: "dialog-spacer" }),
+              e.editing ? (b(), E(ie, { key: 1 }, [
+                I(i, { class: "dialog-text" }, {
                   default: S(() => [
-                    T("span", null, Z(a.capitalise(f.label)), 1)
+                    My
                   ]),
-                  _: 2
-                }, 1032, ["shadow", "onClick"])
-              ]),
-              _: 2
-            }, 1024))), 128))
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    })) : D("", !0)
-  ]);
+                  _: 1
+                }),
+                a.isDeleted ? D("", !0) : (b(), E(ie, { key: 0 }, [
+                  I(i, { class: "dialog-text" }, {
+                    default: S(() => [
+                      Dy
+                    ]),
+                    _: 1
+                  }),
+                  (b(!0), E(ie, null, Re(e.evidence, (_, C) => (b(), B(i, { key: _ }, {
+                    default: S(() => [
+                      I(g, { span: 20 }, {
+                        default: S(() => [
+                          ne(Z(e.evidence[C]), 1)
+                        ]),
+                        _: 2
+                      }, 1024),
+                      I(g, { span: 4 }, {
+                        default: S(() => [
+                          I(l, { class: "standard-icon" }, {
+                            default: S(() => [
+                              I(d, {
+                                onClick: (A) => a.removeEvidence(C)
+                              }, null, 8, ["onClick"])
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1024)
+                    ]),
+                    _: 2
+                  }, 1024))), 128)),
+                  I(i, null, {
+                    default: S(() => [
+                      I(m, {
+                        size: "small",
+                        placeholder: "Enter",
+                        modelValue: e.newEvidence,
+                        "onUpdate:modelValue": t[4] || (t[4] = (_) => e.newEvidence = _),
+                        onChange: t[5] || (t[5] = (_) => a.evidenceEntered(_))
+                      }, {
+                        prepend: S(() => [
+                          I(y, {
+                            teleported: !1,
+                            modelValue: e.evidencePrefix,
+                            "onUpdate:modelValue": t[3] || (t[3] = (_) => e.evidencePrefix = _),
+                            placeholder: "Select",
+                            class: "select-box",
+                            "popper-class": "flatmap_dropdown"
+                          }, {
+                            default: S(() => [
+                              (b(!0), E(ie, null, Re(e.evidencePrefixes, (_) => (b(), B(h, {
+                                key: _,
+                                label: _,
+                                value: _
+                              }, {
+                                default: S(() => [
+                                  I(i, null, {
+                                    default: S(() => [
+                                      I(g, { span: 12 }, {
+                                        default: S(() => [
+                                          ne(Z(_), 1)
+                                        ]),
+                                        _: 2
+                                      }, 1024)
+                                    ]),
+                                    _: 2
+                                  }, 1024)
+                                ]),
+                                _: 2
+                              }, 1032, ["label", "value"]))), 128))
+                            ]),
+                            _: 1
+                          }, 8, ["modelValue"])
+                        ]),
+                        _: 1
+                      }, 8, ["modelValue"])
+                    ]),
+                    _: 1
+                  })
+                ], 64)),
+                I(i, null, {
+                  default: S(() => [
+                    By
+                  ]),
+                  _: 1
+                }),
+                I(i, { class: "dialog-text" }, {
+                  default: S(() => [
+                    I(m, {
+                      type: "textarea",
+                      autosize: { minRows: 2, maxRows: 4 },
+                      placeholder: "Enter",
+                      modelValue: e.comment,
+                      "onUpdate:modelValue": t[6] || (t[6] = (_) => e.comment = _)
+                    }, null, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                }),
+                I(i, { class: "dialog-text" }, {
+                  default: S(() => [
+                    I(k, {
+                      class: "button",
+                      type: "primary",
+                      plain: "",
+                      onClick: a.submit
+                    }, {
+                      default: S(() => [
+                        ne(" Submit ")
+                      ]),
+                      _: 1
+                    }, 8, ["onClick"])
+                  ]),
+                  _: 1
+                })
+              ], 64)) : (b(), B(i, { key: 0 }, {
+                default: S(() => [
+                  I(l, { class: "standard-icon" }, {
+                    default: S(() => [
+                      I(u, {
+                        onClick: t[2] || (t[2] = (_) => e.editing = !0)
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  a.isDeleted ? (b(), B(l, {
+                    key: 0,
+                    class: "standard-icon"
+                  }, {
+                    default: S(() => [
+                      I(f, { onClick: a.submit }, null, 8, ["onClick"])
+                    ]),
+                    _: 1
+                  })) : a.isPositionUpdated ? (b(), B(l, {
+                    key: 1,
+                    class: "standard-icon"
+                  }, {
+                    default: S(() => [
+                      I(v, { onClick: a.submit }, null, 8, ["onClick"])
+                    ]),
+                    _: 1
+                  })) : D("", !0)
+                ]),
+                _: 1
+              })),
+              e.errorMessage ? (b(), B(i, {
+                key: 2,
+                class: "dialog-text"
+              }, {
+                default: S(() => [
+                  T("strong", Ry, Z(e.errorMessage), 1)
+                ]),
+                _: 1
+              })) : D("", !0)
+            ], 64)) : D("", !0)
+          ], 64)) : D("", !0)
+        ], 64)) : D("", !0)
+      ])
+    ]),
+    _: 1
+  });
 }
-const My = /* @__PURE__ */ $t(Iy, [["render", Ly], ["__scopeId", "data-v-8168ee98"]]), yl = (e, t) => {
-  const n = e.__vccOpts || e;
-  for (const [o, r] of t)
-    n[o] = r;
-  return n;
-}, Dy = ["xlink:href"], By = {
-  __name: "SvgIcon",
+const Vy = /* @__PURE__ */ $t(Oy, [["render", Hy], ["__scopeId", "data-v-09c78af1"]]), ji = "Copy to clipboard", zy = "Copied!", Ky = "#8300bf", jy = {
+  name: "CopyToClipboard",
   props: {
-    /**
-     * The svg icon to show.
-     */
-    icon: {
+    content: {
       type: String,
-      required: !0
+      default: ""
     },
     /**
-     * The option to spin the icon.
+     * `theme: light` will show white button,
+     * to use when the button is over other readable text content.
+     * Default button is transparent.
      */
-    spin: {
-      type: Boolean,
-      default: !1
+    theme: {
+      type: String,
+      default: ""
     }
   },
-  setup(e) {
-    return (t, n) => (b(), E("svg", {
-      class: F(["map-icon", { "map-icon-spin": e.spin }])
-    }, [
-      T("use", {
-        "xlink:href": `#${e.icon}`
-      }, null, 8, Dy)
-    ], 2));
-  }
-}, Ry = /* @__PURE__ */ yl(By, [["__scopeId", "data-v-e172d5ff"]]), bl = `<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>2horpanel</title>
-    <g id="2horpanel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-10-Copy-4">
-            <g id="Group-15-Copy" fill="currentColor">
-                <circle id="Oval-Copy" cx="12" cy="12" r="12"></circle>
-                <text id="?" font-family="Asap-Bold, Asap" font-size="16" font-weight="bold">
-                    <tspan x="8.5" y="18">?</tspan>
-                </text>
-            </g>
-            <rect id="Rectangle" stroke="#FFFFFF" x="5" y="7" width="14" height="10"></rect>
-            <line x1="18.5" y1="12" x2="5.5" y2="12" id="Line-10" stroke="#FFFFFF" stroke-linecap="square"></line>
-        </g>
-    </g>
-</svg>`, wl = `<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>2vertpanel</title>
-    <g id="2vertpanel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-10-Copy-3">
-            <g id="Group-15-Copy" fill="currentColor">
-                <circle id="Oval-Copy" cx="12" cy="12" r="12"></circle>
-                <text id="?" font-family="Asap-Bold, Asap" font-size="16" font-weight="bold">
-                    <tspan x="8.5" y="18">?</tspan>
-                </text>
-            </g>
+  data: function() {
+    return {
+      textLabel: ji,
+      autoHideTimeout: 0,
+      iconColor: Ky
+    };
+  },
+  methods: {
+    copyToClipboard: async function() {
+      let e = !0;
+      this.autoHideTimeout = 600;
+      try {
+        const t = this.content.replaceAll(`
+`, ""), n = document.createElement("div");
+        n.innerHTML = this.content;
+        const o = n.textContent || n.innerText || "", r = new Blob([t], { type: "text/html" }), a = new Blob([o], { type: "text/plain" }), i = new ClipboardItem({
+          "text/html": r,
+          "text/plain": a
+        });
+        await navigator.clipboard.write([i]);
+      } catch (t) {
+        console.error(
+          "Error when trying to use navigator.clipboard.write()",
+          t
+        ), e = !1;
+      }
+      e ? this.textLabel = zy : this.textLabel = "Error trying to copy to clipboard!";
+    },
+    resetSettings: function() {
+      this.autoHideTimeout = 0, this.textLabel = ji;
+    }
+  }
+}, Uy = { class: "visually-hidden" };
+function qy(e, t, n, o, r, a) {
+  const i = uh, s = Me, l = Wt, c = nr;
+  return b(), B(c, {
+    content: e.textLabel,
+    placement: "bottom",
+    "hide-after": e.autoHideTimeout,
+    effect: "clipboard-tooltip",
+    onHide: a.resetSettings
+  }, {
+    default: S(() => [
+      I(l, {
+        class: F(["copy-clipboard-button", n.theme]),
+        size: "small",
+        onClick: a.copyToClipboard
+      }, {
+        default: S(() => [
+          I(s, { color: e.iconColor }, {
+            default: S(() => [
+              I(i)
+            ]),
+            _: 1
+          }, 8, ["color"]),
+          T("span", Uy, Z(e.textLabel), 1)
+        ]),
+        _: 1
+      }, 8, ["class", "onClick"])
+    ]),
+    _: 1
+  }, 8, ["content", "hide-after", "onHide"]);
+}
+const w2 = /* @__PURE__ */ $t(jy, [["render", qy], ["__scopeId", "data-v-de3b5311"]]), Wy = function(e) {
+  return e ? e.charAt(0).toUpperCase() + e.slice(1) : "";
+}, Gy = {
+  name: "ConnectionDialog",
+  props: {
+    connectionEntry: {
+      type: Object,
+      default: {}
+    },
+    inDrawing: {
+      type: Boolean,
+      default: !1
+    },
+    connectionExist: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data: function() {
+    return {
+      tooltipId: void 0
+    };
+  },
+  methods: {
+    shadowDisplay: function(e) {
+      return this.tooltipId === e ? "always" : "hover";
+    },
+    capitalise: function(e) {
+      return Wy(e);
+    },
+    handleTooltip: function(e) {
+      this.tooltipId = this.tooltipId === e ? void 0 : e, this.$emit("featureTooltip", this.tooltipId);
+    }
+  }
+}, va = (e) => (Vo("data-v-8168ee98"), e = e(), zo(), e), Yy = { class: "dialog-container" }, Zy = /* @__PURE__ */ va(() => /* @__PURE__ */ T("span", { class: "dialog-title" }, "Finalise drawing", -1)), Xy = /* @__PURE__ */ va(() => /* @__PURE__ */ T("span", { class: "dialog-title" }, "Visualise connection", -1)), Jy = /* @__PURE__ */ va(() => /* @__PURE__ */ T("b", null, [
+  /* @__PURE__ */ T("span", null, "Related Features")
+], -1));
+function Qy(e, t, n, o, r, a) {
+  const i = Wt, s = cm, l = ua, c = da, u = hm;
+  return b(), E("div", Yy, [
+    I(l, null, {
+      default: S(() => [
+        I(c, null, {
+          default: S(() => [
+            n.inDrawing ? (b(), B(l, { key: 0 }, {
+              default: S(() => [
+                Zy,
+                I(s, null, {
+                  default: S(() => [
+                    I(i, {
+                      type: "primary",
+                      plain: "",
+                      onClick: t[0] || (t[0] = (f) => e.$emit("confirmDrawn", !0))
+                    }, {
+                      default: S(() => [
+                        ne(" Confirm ")
+                      ]),
+                      _: 1
+                    }),
+                    I(i, {
+                      type: "primary",
+                      plain: "",
+                      onClick: t[1] || (t[1] = (f) => e.$emit("cancelDrawn", !0))
+                    }, {
+                      default: S(() => [
+                        ne(" Cancel ")
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            })) : (b(), B(l, { key: 1 }, {
+              default: S(() => [
+                Xy,
+                I(i, {
+                  type: "primary",
+                  plain: "",
+                  onClick: t[2] || (t[2] = (f) => e.$emit("dialogDisplay", !1))
+                }, {
+                  default: S(() => [
+                    ne(" Close ")
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }),
+    n.connectionExist ? (b(), B(l, { key: 0 }, {
+      default: S(() => [
+        I(c, null, {
+          default: S(() => [
+            Jy,
+            (b(!0), E(ie, null, Re(n.connectionEntry, (f, v) => (b(), B(l, { key: v }, {
+              default: S(() => [
+                I(u, {
+                  shadow: a.shadowDisplay(v),
+                  onClick: (g) => a.handleTooltip(v)
+                }, {
+                  default: S(() => [
+                    T("span", null, Z(a.capitalise(f.label)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["shadow", "onClick"])
+              ]),
+              _: 2
+            }, 1024))), 128))
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    })) : D("", !0)
+  ]);
+}
+const eb = /* @__PURE__ */ $t(Gy, [["render", Qy], ["__scopeId", "data-v-8168ee98"]]), yl = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [o, r] of t)
+    n[o] = r;
+  return n;
+}, tb = ["xlink:href"], nb = {
+  __name: "SvgIcon",
+  props: {
+    /**
+     * The svg icon to show.
+     */
+    icon: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The option to spin the icon.
+     */
+    spin: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(e) {
+    return (t, n) => (b(), E("svg", {
+      class: F(["map-icon", { "map-icon-spin": e.spin }])
+    }, [
+      T("use", {
+        "xlink:href": `#${e.icon}`
+      }, null, 8, tb)
+    ], 2));
+  }
+}, ob = /* @__PURE__ */ yl(nb, [["__scopeId", "data-v-e172d5ff"]]), bl = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2horpanel</title>
+    <g id="2horpanel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-10-Copy-4">
+            <g id="Group-15-Copy" fill="currentColor">
+                <circle id="Oval-Copy" cx="12" cy="12" r="12"></circle>
+                <text id="?" font-family="Asap-Bold, Asap" font-size="16" font-weight="bold">
+                    <tspan x="8.5" y="18">?</tspan>
+                </text>
+            </g>
+            <rect id="Rectangle" stroke="#FFFFFF" x="5" y="7" width="14" height="10"></rect>
+            <line x1="18.5" y1="12" x2="5.5" y2="12" id="Line-10" stroke="#FFFFFF" stroke-linecap="square"></line>
+        </g>
+    </g>
+</svg>`, wl = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>2vertpanel</title>
+    <g id="2vertpanel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-10-Copy-3">
+            <g id="Group-15-Copy" fill="currentColor">
+                <circle id="Oval-Copy" cx="12" cy="12" r="12"></circle>
+                <text id="?" font-family="Asap-Bold, Asap" font-size="16" font-weight="bold">
+                    <tspan x="8.5" y="18">?</tspan>
+                </text>
+            </g>
             <rect id="Rectangle" stroke="#FFFFFF" x="5" y="7" width="14" height="10"></rect>
             <line x1="12" y1="7.5" x2="12" y2="16.5" id="Line-6" stroke="#FFFFFF" stroke-linecap="square"></line>
         </g>
@@ -10359,7 +10840,7 @@ const My = /* @__PURE__ */ $t(Iy, [["render", Ly], ["__scopeId", "data-v-8168ee9
   // replace whitespace sequences with a single space
   [/\> \</g, "><"]
   // remove whitespace between tags
-].reduce((t, n) => "".replace.apply(t, n), e).trim(), Hy = !0, Vy = !0, zy = ["fill"], Ar = /* @__PURE__ */ Object.assign({
+].reduce((t, n) => "".replace.apply(t, n), e).trim(), rb = !0, ab = !0, ib = ["fill"], Ar = /* @__PURE__ */ Object.assign({
   "/assets/icons/2horpanel.svg": bl,
   "/assets/icons/2vertpanel.svg": wl,
   "/assets/icons/3panel.svg": Cl,
@@ -10393,11 +10874,11 @@ const My = /* @__PURE__ */ $t(Iy, [["render", Ly], ["__scopeId", "data-v-8168ee9
   "/assets/icons/undock.svg": Yl,
   "/assets/icons/zoomIn.svg": Zl,
   "/assets/icons/zoomOut.svg": Xl
-}), Ky = Object.keys(Ar).map((e) => {
-  const t = Jl(Ar[e], Hy, Vy, zy), n = e.replace(/^.+\/(\w+).svg$/, "$1");
+}), sb = Object.keys(Ar).map((e) => {
+  const t = Jl(Ar[e], rb, ab, ib), n = e.replace(/^.+\/(\w+).svg$/, "$1");
   return Ql(t).replace("<svg", `<symbol id="${n}"`).replace("svg>", "symbol>");
 });
-Ky.join(`
+sb.join(`
 `);
 const Pr = /* @__PURE__ */ Object.assign({
   "/assets/icons/2horpanel.svg": bl,
@@ -10433,25 +10914,25 @@ const Pr = /* @__PURE__ */ Object.assign({
   "/assets/icons/undock.svg": Yl,
   "/assets/icons/zoomIn.svg": Zl,
   "/assets/icons/zoomOut.svg": Xl
-}), jy = Object.keys(Pr).map((e) => {
+}), lb = Object.keys(Pr).map((e) => {
   const t = Jl(Pr[e]), n = e.replace(/^.+\/(\w+).svg$/, "$1");
   return Ql(t).replace("<svg", `<symbol id="${n}"`).replace("svg>", "symbol>");
-}), Uy = {
+}), cb = {
   name: "MapSvgSpriteColor",
   svgContext: Pr,
-  svgSprite: jy.join(`
+  svgSprite: lb.join(`
 `)
   // concatenate all symbols into $options.svgSprite
-}, qy = ["innerHTML"];
-function Wy(e, t, n, o, r, a) {
+}, ub = ["innerHTML"];
+function db(e, t, n, o, r, a) {
   return b(), E("svg", {
     width: "0",
     height: "0",
     style: { display: "none" },
     innerHTML: e.$options.svgSprite
-  }, null, 8, qy);
+  }, null, 8, ub);
 }
-const Gy = /* @__PURE__ */ yl(Uy, [["render", Wy]]), Yy = (e, t) => {
+const fb = /* @__PURE__ */ yl(cb, [["render", db]]), pb = (e, t) => {
   let n, o, r, a, i, s;
   t.style.left = "", t.style.top = "", t.addEventListener(
     "mousedown",
@@ -10469,11 +10950,11 @@ const Gy = /* @__PURE__ */ yl(Uy, [["render", Wy]]), Yy = (e, t) => {
   function l(c) {
     c.preventDefault(), i = n - (r - c.clientX), s = o - (a - c.clientY), t.style.left = `${i}px`, t.style.top = `${s}px`;
   }
-}, Zy = {
+}, hb = {
   name: "DrawToolbar",
   components: {
-    MapSvgIcon: Ry,
-    MapSvgSpriteColor: Gy
+    MapSvgIcon: ob,
+    MapSvgSpriteColor: fb
   },
   props: {
     /**
@@ -10693,7 +11174,7 @@ const Gy = /* @__PURE__ */ yl(Uy, [["render", Wy]]), Yy = (e, t) => {
     dialogCssHacks: function() {
       this.$nextTick(() => {
         const e = this.$el.querySelector(".connection-dialog");
-        Yy(this.mapCanvas.containerHTML, e);
+        pb(this.mapCanvas.containerHTML, e);
         let t, n;
         const o = this.mapCanvas.containerHTML.getBoundingClientRect(), r = e.getBoundingClientRect();
         this.dialogPosition.x > o.width / 2 ? t = this.dialogPosition.x - r.width : t = this.dialogPosition.x, this.dialogPosition.y > o.height / 2 ? n = this.dialogPosition.y - r.height : n = this.dialogPosition.y, e.style.transform = `translate(${t - this.dialogPosition.offsetX}px, ${n - this.dialogPosition.offsetY}px)`;
@@ -10720,12 +11201,12 @@ const Gy = /* @__PURE__ */ yl(Uy, [["render", Wy]]), Yy = (e, t) => {
   destroyed: function() {
     this.mapCanvas && this.mapCanvas.containerHTML.querySelector(this.mapCanvas.class).removeEventListener("click", this.dialogPopUpPositionHandler, !1);
   }
-}, Xy = { class: "toolbar-container" }, Jy = { class: "toolbar-icons" };
-function Qy(e, t, n, o, r, a) {
-  const i = Le("map-svg-sprite-color"), s = Le("map-svg-icon"), l = pa, c = My;
-  return b(), E("div", Xy, [
+}, vb = { class: "toolbar-container" }, gb = { class: "toolbar-icons" };
+function mb(e, t, n, o, r, a) {
+  const i = Le("map-svg-sprite-color"), s = Le("map-svg-icon"), l = pa, c = eb;
+  return b(), E("div", vb, [
     I(i),
-    T("div", Jy, [
+    T("div", gb, [
       a.showEditModeIcon ? (b(), B(l, {
         key: 0,
         content: "Edit Mode",
@@ -10874,7 +11355,7 @@ function Qy(e, t, n, o, r, a) {
     ]) : D("", !0)
   ]);
 }
-const w2 = /* @__PURE__ */ $t(Zy, [["render", Qy], ["__scopeId", "data-v-6ac1a744"]]), eb = {
+const C2 = /* @__PURE__ */ $t(hb, [["render", mb], ["__scopeId", "data-v-6ac1a744"]]), yb = {
   name: "HelpModeDialog",
   props: {
     /**
@@ -11008,19 +11489,19 @@ const w2 = /* @__PURE__ */ $t(Zy, [["render", Qy], ["__scopeId", "data-v-6ac1a74
       return n ? n[n.length - 1].slice(10, -1) : "";
     }
   }
-}, ga = (e) => (Vo("data-v-3efb89fb"), e = e(), zo(), e), tb = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("h4", null, "Help Mode", -1)), nb = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("p", null, [
+}, ga = (e) => (Vo("data-v-3efb89fb"), e = e(), zo(), e), bb = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("h4", null, "Help Mode", -1)), wb = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("p", null, [
   /* @__PURE__ */ ne(" All caught up! "),
   /* @__PURE__ */ T("br"),
   /* @__PURE__ */ ne(" Click 'Help' to restart. ")
-], -1)), ob = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("p", null, 'Click "Next" to see the next item.', -1));
-function rb(e, t, n, o, r, a) {
+], -1)), Cb = /* @__PURE__ */ ga(() => /* @__PURE__ */ T("p", null, 'Click "Next" to see the next item.', -1));
+function kb(e, t, n, o, r, a) {
   const i = Wt;
   return b(), E("div", {
     class: F(["help-mode-dialog", { finish: n.lastItem }])
   }, [
-    tb,
+    bb,
     n.lastItem ? (b(), E(ie, { key: 0 }, [
-      nb,
+      wb,
       T("div", null, [
         I(i, {
           class: "button",
@@ -11033,7 +11514,7 @@ function rb(e, t, n, o, r, a) {
         }, 8, ["onClick"])
       ])
     ], 64)) : (b(), E(ie, { key: 1 }, [
-      ob,
+      Cb,
       T("div", null, [
         I(i, {
           class: "button",
@@ -11057,8 +11538,8 @@ function rb(e, t, n, o, r, a) {
     ], 64))
   ], 2);
 }
-const C2 = /* @__PURE__ */ $t(eb, [["render", rb], ["__scopeId", "data-v-3efb89fb"]]);
-function ab(e) {
+const k2 = /* @__PURE__ */ $t(yb, [["render", kb], ["__scopeId", "data-v-3efb89fb"]]);
+function _b(e) {
   return { all: e = e || /* @__PURE__ */ new Map(), on: function(t, n) {
     var o = e.get(t);
     o ? o.push(n) : e.set(t, [n]);
@@ -11074,7 +11555,7 @@ function ab(e) {
     });
   } };
 }
-const Yn = new ab(), ib = {
+const Yn = new _b(), xb = {
   name: "ExternalResourceCard",
   props: {
     resources: {
@@ -11097,10 +11578,10 @@ const Yn = new ab(), ib = {
       Yn.emit("open-pubmed-url", e), window.open(e, "_blank");
     }
   }
-}, sb = { class: "resource-container" };
-function lb(e, t, n, o, r, a) {
+}, Eb = { class: "resource-container" };
+function Sb(e, t, n, o, r, a) {
   const i = Wt;
-  return b(), E("div", sb, [
+  return b(), E("div", Eb, [
     (b(!0), E(ie, null, Re(n.resources, (s) => (b(), E("div", {
       key: s.id,
       class: "resource"
@@ -11120,9 +11601,9 @@ function lb(e, t, n, o, r, a) {
     ]))), 128))
   ]);
 }
-const cb = /* @__PURE__ */ $t(ib, [["render", lb], ["__scopeId", "data-v-4f8d8b0f"]]), ub = (e) => e.replace(/\w\S*/g, (t) => t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()), db = function(e) {
+const Fb = /* @__PURE__ */ $t(xb, [["render", Sb], ["__scopeId", "data-v-4f8d8b0f"]]), Tb = (e) => e.replace(/\w\S*/g, (t) => t.charAt(0).toUpperCase() + t.substr(1).toLowerCase()), Ob = function(e) {
   return e ? e.charAt(0).toUpperCase() + e.slice(1) : "";
-}, fb = {
+}, Ib = {
   name: "ProvenancePopup",
   props: {
     tooltipEntry: {
@@ -11175,10 +11656,10 @@ const cb = /* @__PURE__ */ $t(ib, [["render", lb], ["__scopeId", "data-v-4f8d8b0
   },
   methods: {
     titleCase: function(e) {
-      return ub(e);
+      return Tb(e);
     },
     capitalise: function(e) {
-      return db(e);
+      return Ob(e);
     },
     openUrl: function(e) {
       window.open(e, "_blank");
@@ -11205,56 +11686,56 @@ const cb = /* @__PURE__ */ $t(ib, [["render", lb], ["__scopeId", "data-v-4f8d8b0
       this.pubmedSearchUrl = e;
     }
   }
-}, Rn = (e) => (Vo("data-v-ef9a0f6d"), e = e(), zo(), e), pb = {
+}, Rn = (e) => (Vo("data-v-ef9a0f6d"), e = e(), zo(), e), $b = {
   key: 0,
   class: "main"
-}, hb = {
+}, Nb = {
   key: 0,
   class: "block"
-}, vb = { class: "title" }, gb = {
+}, Ab = { class: "title" }, Pb = {
   key: 0,
   class: "subtitle"
-}, mb = {
+}, Lb = {
   key: 1,
   class: "block"
-}, yb = { class: "title" }, bb = {
+}, Mb = { class: "title" }, Db = {
   key: 2,
   class: "attribute-title-container"
-}, wb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Alert", -1)), Cb = { style: { "word-break": "keep-all" } }, kb = { class: "content-container scrollbar" }, _b = {
+}, Bb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Alert", -1)), Rb = { style: { "word-break": "keep-all" } }, Hb = { class: "content-container scrollbar" }, Vb = {
   key: 0,
   class: "block"
-}, xb = { class: "attribute-title-container" }, Eb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Origin", -1)), Sb = { style: { "word-break": "keep-all" } }, Fb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("i", null, "Origin", -1)), Tb = ["origin-item-label"], Ob = {
+}, zb = { class: "attribute-title-container" }, Kb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Origin", -1)), jb = { style: { "word-break": "keep-all" } }, Ub = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("i", null, "Origin", -1)), qb = ["origin-item-label"], Wb = {
   key: 0,
   class: "separator"
-}, Ib = {
+}, Gb = {
   key: 1,
   class: "block"
-}, $b = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("div", { class: "attribute-title-container" }, [
+}, Yb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("div", { class: "attribute-title-container" }, [
   /* @__PURE__ */ T("div", { class: "attribute-title" }, "Components")
-], -1)), Nb = ["component-item-label"], Ab = {
+], -1)), Zb = ["component-item-label"], Xb = {
   key: 0,
   class: "separator"
-}, Pb = {
+}, Jb = {
   key: 2,
   class: "block"
-}, Lb = { class: "attribute-title-container" }, Mb = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Destination", -1)), Db = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { style: { "word-break": "keep-all" } }, [
+}, Qb = { class: "attribute-title-container" }, e2 = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { class: "attribute-title" }, "Destination", -1)), t2 = /* @__PURE__ */ Rn(() => /* @__PURE__ */ T("span", { style: { "word-break": "keep-all" } }, [
   /* @__PURE__ */ T("i", null, "Destination"),
   /* @__PURE__ */ ne(" is where the axons terminate ")
-], -1)), Bb = ["destination-item-label"], Rb = {
+], -1)), n2 = ["destination-item-label"], o2 = {
   key: 0,
   class: "separator"
 };
-function Hb(e, t, n, o, r, a) {
-  const i = Eh, s = Me, l = pa, c = ms, u = Zo, f = Wt, v = cb, g = ml;
-  return n.tooltipEntry ? se((b(), E("div", pb, [
-    n.tooltipEntry.title ? (b(), E("div", hb, [
-      T("div", vb, Z(a.capitalise(n.tooltipEntry.title)), 1),
-      n.tooltipEntry.provenanceTaxonomyLabel && n.tooltipEntry.provenanceTaxonomyLabel.length > 0 ? (b(), E("div", gb, Z(a.provSpeciesDescription), 1)) : D("", !0)
-    ])) : (b(), E("div", mb, [
-      T("div", yb, Z(n.tooltipEntry.featureId), 1)
+function r2(e, t, n, o, r, a) {
+  const i = Eh, s = Me, l = pa, c = ms, u = Zo, f = Wt, v = Fb, g = ml;
+  return n.tooltipEntry ? se((b(), E("div", $b, [
+    n.tooltipEntry.title ? (b(), E("div", Nb, [
+      T("div", Ab, Z(a.capitalise(n.tooltipEntry.title)), 1),
+      n.tooltipEntry.provenanceTaxonomyLabel && n.tooltipEntry.provenanceTaxonomyLabel.length > 0 ? (b(), E("div", Pb, Z(a.provSpeciesDescription), 1)) : D("", !0)
+    ])) : (b(), E("div", Lb, [
+      T("div", Mb, Z(n.tooltipEntry.featureId), 1)
     ])),
-    a.featuresAlert ? (b(), E("div", bb, [
-      wb,
+    a.featuresAlert ? (b(), E("div", Db, [
+      Bb,
       I(l, {
         width: "250",
         trigger: "hover",
@@ -11270,7 +11751,7 @@ function Hb(e, t, n, o, r, a) {
           })
         ]),
         default: S(() => [
-          T("span", Cb, Z(a.featuresAlert), 1)
+          T("span", Rb, Z(a.featuresAlert), 1)
         ]),
         _: 1
       })
@@ -11302,547 +11783,146 @@ function Hb(e, t, n, o, r, a) {
         ]),
         _: 1
       })
-    ], 512), [
-      [we, !e.showDetails]
-    ]),
-    I(Ln, { name: "slide-fade" }, {
-      default: S(() => [
-        se(T("div", kb, [
-          ne(Z(n.tooltipEntry.paths) + " ", 1),
-          n.tooltipEntry.origins && n.tooltipEntry.origins.length > 0 ? (b(), E("div", _b, [
-            T("div", xb, [
-              Eb,
-              I(l, {
-                width: "250",
-                trigger: "hover",
-                teleported: !1,
-                "popper-class": "popover-origin-help"
-              }, {
-                reference: S(() => [
-                  I(s, { class: "info" }, {
-                    default: S(() => [
-                      I(i)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: S(() => [
-                  T("span", Sb, [
-                    Fb,
-                    ne(" " + Z(a.originDescription), 1)
-                  ])
-                ]),
-                _: 1
-              })
-            ]),
-            (b(!0), E(ie, null, Re(n.tooltipEntry.origins, (d, h) => (b(), E("div", {
-              class: "attribute-content",
-              "origin-item-label": d,
-              key: d
-            }, [
-              ne(Z(a.capitalise(d)) + " ", 1),
-              h != n.tooltipEntry.origins.length - 1 ? (b(), E("div", Ob)) : D("", !0)
-            ], 8, Tb))), 128)),
-            se(I(f, {
-              class: "button",
-              id: "open-dendrites-button",
-              onClick: a.openDendrites
-            }, {
-              default: S(() => [
-                ne(" Explore origin data ")
-              ]),
-              _: 1
-            }, 8, ["onClick"]), [
-              [
-                we,
-                n.tooltipEntry.originsWithDatasets && n.tooltipEntry.originsWithDatasets.length > 0
-              ]
-            ])
-          ])) : D("", !0),
-          n.tooltipEntry.components && n.tooltipEntry.components.length > 0 ? (b(), E("div", Ib, [
-            $b,
-            (b(!0), E(ie, null, Re(n.tooltipEntry.components, (d, h) => (b(), E("div", {
-              class: "attribute-content",
-              "component-item-label": d,
-              key: d
-            }, [
-              ne(Z(a.capitalise(d)) + " ", 1),
-              h != n.tooltipEntry.components.length - 1 ? (b(), E("div", Ab)) : D("", !0)
-            ], 8, Nb))), 128))
-          ])) : D("", !0),
-          n.tooltipEntry.destinations && n.tooltipEntry.destinations.length > 0 ? (b(), E("div", Pb, [
-            T("div", Lb, [
-              Mb,
-              I(l, {
-                width: "250",
-                trigger: "hover",
-                teleported: !1,
-                "popper-class": "popover-origin-help"
-              }, {
-                reference: S(() => [
-                  I(s, { class: "info" }, {
-                    default: S(() => [
-                      I(i)
-                    ]),
-                    _: 1
-                  })
-                ]),
-                default: S(() => [
-                  Db
-                ]),
-                _: 1
-              })
-            ]),
-            (b(!0), E(ie, null, Re(n.tooltipEntry.destinations, (d, h) => (b(), E("div", {
-              class: "attribute-content",
-              "destination-item-label": d,
-              key: d
-            }, [
-              ne(Z(a.capitalise(d)) + " ", 1),
-              h != n.tooltipEntry.destinations.length - 1 ? (b(), E("div", Rb)) : D("", !0)
-            ], 8, Bb))), 128)),
-            se(I(f, {
-              class: "button",
-              onClick: a.openAxons
-            }, {
-              default: S(() => [
-                ne(" Explore destination data ")
-              ]),
-              _: 1
-            }, 8, ["onClick"]), [
-              [
-                we,
-                n.tooltipEntry.destinationsWithDatasets && n.tooltipEntry.destinationsWithDatasets.length > 0
-              ]
-            ])
-          ])) : D("", !0),
-          se(I(f, {
-            class: "button",
-            onClick: a.openAll
-          }, {
-            default: S(() => [
-              ne(" Search for data on components ")
-            ]),
-            _: 1
-          }, 8, ["onClick"]), [
-            [
-              we,
-              n.tooltipEntry.componentsWithDatasets && n.tooltipEntry.componentsWithDatasets.length > 0
-            ]
-          ]),
-          I(v, { resources: a.resources }, null, 8, ["resources"])
-        ], 512), [
-          [we, e.showDetails]
-        ])
-      ]),
-      _: 1
-    })
-  ])), [
-    [g, e.loading]
-  ]) : D("", !0);
-}
-const Vb = /* @__PURE__ */ $t(fb, [["render", Hb], ["__scopeId", "data-v-ef9a0f6d"]]), zb = {
-  name: "AnnotationPopup",
-  props: {
-    annotationEntry: {
-      type: Object
-    }
-  },
-  inject: ["$annotator", "userApiKey"],
-  data: function() {
-    return {
-      displayPair: {
-        "Feature ID": "featureId",
-        Tooltip: "label",
-        Models: "models",
-        Name: "name",
-        Resource: "resourceId"
-      },
-      editing: !1,
-      evidencePrefixes: ["DOI:", "PMID:"],
-      evidencePrefix: "DOI:",
-      evidence: [],
-      authenticated: !1,
-      newEvidence: "",
-      comment: "",
-      prevSubs: [],
-      showSubmissions: !0,
-      errorMessage: "",
-      creator: void 0
-    };
-  },
-  computed: {
-    isEditable: function() {
-      return this.annotationEntry.resourceId && this.annotationEntry.featureId;
-    },
-    isPositionUpdated: function() {
-      return this.annotationEntry.resourceId && this.annotationEntry.type === "updated" && this.annotationEntry.positionUpdated;
-    },
-    isDeleted: function() {
-      return this.annotationEntry.resourceId && this.annotationEntry.type === "deleted";
-    }
-  },
-  methods: {
-    evidenceEntered: function(e) {
-      e && (this.evidence.push(this.evidencePrefix + e), this.newEvidence = "");
-    },
-    formatTime: function(e) {
-      const t = {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "numeric",
-        second: "numeric"
-      };
-      return new Date(e).toLocaleDateString(void 0, t);
-    },
-    updatePrevSubmissions: function() {
-      var e;
-      this.$annotator && this.authenticated && this.annotationEntry.resourceId && this.annotationEntry.featureId && ((e = this.$annotator) == null || e.itemAnnotations(
-        this.userApiKey,
-        this.annotationEntry.resourceId,
-        this.annotationEntry.featureId
-      ).then((t) => {
-        this.prevSubs = t;
-      }).catch((t) => {
-        console.log(t);
-      }));
-    },
-    submit: function() {
-      var e;
-      if (this.annotationEntry.type === "updated" && this.annotationEntry.positionUpdated ? this.comment = this.comment ? `Position Updated: ${this.comment}` : "Position Updated" : this.annotationEntry.type === "deleted" && (this.comment = this.comment ? `Feature Deleted: ${this.comment}` : "Feature Deleted"), (this.evidence.length > 0 || this.comment) && this.annotationEntry.resourceId && this.annotationEntry.featureId) {
-        const t = [];
-        this.evidence.forEach((o) => {
-          if (o.includes("DOI:")) {
-            const r = o.replace("DOI:", "https://doi.org/");
-            t.push(new URL(r));
-          } else if (o.includes("PMID:")) {
-            const r = o.replace(
-              "PMID:",
-              "https://pubmed.ncbi.nlm.nih.gov/"
-            );
-            t.push(new URL(r));
-          }
-        });
-        const n = {
-          resource: this.annotationEntry.resourceId,
-          item: Object.assign(
-            { id: this.annotationEntry.featureId },
-            Object.fromEntries(
-              Object.entries(this.annotationEntry).filter(
-                ([o]) => ["label", "models"].includes(o)
-              )
-            )
-          ),
-          body: {
-            evidence: t,
-            comment: this.comment
-          },
-          feature: this.annotationEntry.feature
-        };
-        Object.assign(n.body, this.annotationEntry.body), this.annotationEntry.type === "deleted" && (n.feature = void 0), this.creator && (n.creator = this.creator), (e = this.$annotator) == null || e.addAnnotation(this.userApiKey, n).then(() => {
-          this.$emit("annotation", n), this.errorMessage = "", this.resetSubmission(), this.updatePrevSubmissions();
-        }).catch(() => {
-          this.errorMessage = "There is a problem with the submission, please try again later";
-        });
-      }
-    },
-    removeEvidence: function(e) {
-      this.evidence.splice(e, 1);
-    },
-    resetSubmission: function() {
-      this.editing = !1, this.evidence = [], this.newFeature = "", this.comment = "";
-    }
-  },
-  watch: {
-    annotationEntry: {
-      handler: function(e, t) {
-        e !== t && (this.resetSubmission(), this.updatePrevSubmissions());
-      },
-      immediate: !1,
-      deep: !1
-    }
-  },
-  mounted: function() {
-    var e;
-    (e = this.$annotator) == null || e.authenticate(this.userApiKey).then((t) => {
-      t.name && t.email && t.canUpdate ? (this.creator = t, t.orcid || (this.creator.orcid = "0000-0000-0000-0000"), this.authenticated = !0, this.updatePrevSubmissions()) : this.errorMessage = "";
-    });
-  }
-}, hn = (e) => (Vo("data-v-09c78af1"), e = e(), zo(), e), Kb = { class: "block" }, jb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("div", { class: "title" }, "Feature Annotations", -1)), Ub = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", { class: "sub-title" }, "Previous submissions:", -1)), qb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Evidence: ", -1)), Wb = ["href"], Gb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Comment: ", -1)), Yb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", { class: "sub-title" }, "Suggest changes:", -1)), Zb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Evidence:", -1)), Xb = /* @__PURE__ */ hn(() => /* @__PURE__ */ T("strong", null, "Comment:", -1)), Jb = { class: "sub-title" };
-function Qb(e, t, n, o, r, a) {
-  const i = ua, s = ms, l = Me, c = Zo, u = hh, f = fh, v = gh, g = da, d = Bo, h = ty, y = ey, m = ra, k = Wt, $ = I1;
-  return b(), B($, { class: "main" }, {
-    default: S(() => [
-      T("div", Kb, [
-        I(i, { class: "info-field" }, {
-          default: S(() => [
-            jb
-          ]),
-          _: 1
-        }),
-        n.annotationEntry ? (b(), E(ie, { key: 0 }, [
-          (b(!0), E(ie, null, Re(e.displayPair, (_, C) => se((b(), B(i, {
-            class: "dialog-text",
-            key: _
-          }, {
-            default: S(() => [
-              T("strong", null, Z(C) + ": ", 1),
-              ne(" " + Z(n.annotationEntry[_]), 1)
-            ]),
-            _: 2
-          }, 1024)), [
-            [we, n.annotationEntry[_]]
-          ])), 128)),
-          e.prevSubs.length > 0 ? (b(), E(ie, { key: 0 }, [
-            se(T("div", {
-              class: "hide",
-              onClick: t[0] || (t[0] = (_) => e.showSubmissions = !1)
-            }, [
-              ne(" Hide previous submissions "),
-              I(l, null, {
-                default: S(() => [
-                  I(s)
-                ]),
-                _: 1
-              })
-            ], 512), [
-              [we, e.showSubmissions]
-            ]),
-            se(T("div", {
-              class: "hide",
-              onClick: t[1] || (t[1] = (_) => e.showSubmissions = !0)
-            }, [
-              ne(" Show previous " + Z(e.prevSubs.length) + " submission(s) ", 1),
-              I(l, null, {
-                default: S(() => [
-                  I(c)
-                ]),
-                _: 1
-              })
-            ], 512), [
-              [we, !e.showSubmissions]
-            ]),
-            e.showSubmissions ? (b(), E(ie, { key: 0 }, [
-              I(i, { class: "dialog-spacer" }),
-              I(i, { class: "dialog-text" }, {
-                default: S(() => [
-                  Ub
-                ]),
-                _: 1
-              }),
-              (b(!0), E(ie, null, Re(e.prevSubs, (_, C) => (b(), E("div", {
-                class: "entry",
-                key: C
-              }, [
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    T("strong", null, Z(a.formatTime(_.created)), 1),
-                    ne(" " + Z(_.creator.name), 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    qb,
-                    (b(!0), E(ie, null, Re(_.body.evidence, (A) => (b(), B(i, {
-                      key: A,
-                      class: "dialog-text"
-                    }, {
-                      default: S(() => [
-                        T("a", {
-                          href: A,
-                          target: "_blank"
-                        }, Z(A), 9, Wb)
-                      ]),
-                      _: 2
-                    }, 1024))), 128))
-                  ]),
-                  _: 2
-                }, 1024),
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    Gb,
-                    ne(" " + Z(_.body.comment), 1)
-                  ]),
-                  _: 2
-                }, 1024)
-              ]))), 128))
-            ], 64)) : D("", !0)
-          ], 64)) : D("", !0),
-          e.authenticated ? (b(), E(ie, { key: 1 }, [
-            a.isEditable ? (b(), E(ie, { key: 0 }, [
-              I(i, { class: "dialog-spacer" }),
-              e.editing ? (b(), E(ie, { key: 1 }, [
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    Yb
-                  ]),
-                  _: 1
-                }),
-                a.isDeleted ? D("", !0) : (b(), E(ie, { key: 0 }, [
-                  I(i, { class: "dialog-text" }, {
-                    default: S(() => [
-                      Zb
-                    ]),
-                    _: 1
-                  }),
-                  (b(!0), E(ie, null, Re(e.evidence, (_, C) => (b(), B(i, { key: _ }, {
-                    default: S(() => [
-                      I(g, { span: 20 }, {
-                        default: S(() => [
-                          ne(Z(e.evidence[C]), 1)
-                        ]),
-                        _: 2
-                      }, 1024),
-                      I(g, { span: 4 }, {
-                        default: S(() => [
-                          I(l, { class: "standard-icon" }, {
-                            default: S(() => [
-                              I(d, {
-                                onClick: (A) => a.removeEvidence(C)
-                              }, null, 8, ["onClick"])
-                            ]),
-                            _: 2
-                          }, 1024)
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ]),
-                    _: 2
-                  }, 1024))), 128)),
-                  I(i, null, {
-                    default: S(() => [
-                      I(m, {
-                        size: "small",
-                        placeholder: "Enter",
-                        modelValue: e.newEvidence,
-                        "onUpdate:modelValue": t[4] || (t[4] = (_) => e.newEvidence = _),
-                        onChange: t[5] || (t[5] = (_) => a.evidenceEntered(_))
-                      }, {
-                        prepend: S(() => [
-                          I(y, {
-                            teleported: !1,
-                            modelValue: e.evidencePrefix,
-                            "onUpdate:modelValue": t[3] || (t[3] = (_) => e.evidencePrefix = _),
-                            placeholder: "Select",
-                            class: "select-box",
-                            "popper-class": "flatmap_dropdown"
-                          }, {
-                            default: S(() => [
-                              (b(!0), E(ie, null, Re(e.evidencePrefixes, (_) => (b(), B(h, {
-                                key: _,
-                                label: _,
-                                value: _
-                              }, {
-                                default: S(() => [
-                                  I(i, null, {
-                                    default: S(() => [
-                                      I(g, { span: 12 }, {
-                                        default: S(() => [
-                                          ne(Z(_), 1)
-                                        ]),
-                                        _: 2
-                                      }, 1024)
-                                    ]),
-                                    _: 2
-                                  }, 1024)
-                                ]),
-                                _: 2
-                              }, 1032, ["label", "value"]))), 128))
-                            ]),
-                            _: 1
-                          }, 8, ["modelValue"])
-                        ]),
-                        _: 1
-                      }, 8, ["modelValue"])
+    ], 512), [
+      [we, !e.showDetails]
+    ]),
+    I(Ln, { name: "slide-fade" }, {
+      default: S(() => [
+        se(T("div", Hb, [
+          ne(Z(n.tooltipEntry.paths) + " ", 1),
+          n.tooltipEntry.origins && n.tooltipEntry.origins.length > 0 ? (b(), E("div", Vb, [
+            T("div", zb, [
+              Kb,
+              I(l, {
+                width: "250",
+                trigger: "hover",
+                teleported: !1,
+                "popper-class": "popover-origin-help"
+              }, {
+                reference: S(() => [
+                  I(s, { class: "info" }, {
+                    default: S(() => [
+                      I(i)
                     ]),
                     _: 1
                   })
-                ], 64)),
-                I(i, null, {
-                  default: S(() => [
-                    Xb
-                  ]),
-                  _: 1
-                }),
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    I(m, {
-                      type: "textarea",
-                      autosize: { minRows: 2, maxRows: 4 },
-                      placeholder: "Enter",
-                      modelValue: e.comment,
-                      "onUpdate:modelValue": t[6] || (t[6] = (_) => e.comment = _)
-                    }, null, 8, ["modelValue"])
-                  ]),
-                  _: 1
-                }),
-                I(i, { class: "dialog-text" }, {
-                  default: S(() => [
-                    I(k, {
-                      class: "button",
-                      type: "primary",
-                      plain: "",
-                      onClick: a.submit
-                    }, {
-                      default: S(() => [
-                        ne(" Submit ")
-                      ]),
-                      _: 1
-                    }, 8, ["onClick"])
-                  ]),
-                  _: 1
-                })
-              ], 64)) : (b(), B(i, { key: 0 }, {
+                ]),
                 default: S(() => [
-                  I(l, { class: "standard-icon" }, {
-                    default: S(() => [
-                      I(u, {
-                        onClick: t[2] || (t[2] = (_) => e.editing = !0)
-                      })
-                    ]),
-                    _: 1
-                  }),
-                  a.isDeleted ? (b(), B(l, {
-                    key: 0,
-                    class: "standard-icon"
-                  }, {
-                    default: S(() => [
-                      I(f, { onClick: a.submit }, null, 8, ["onClick"])
-                    ]),
-                    _: 1
-                  })) : a.isPositionUpdated ? (b(), B(l, {
-                    key: 1,
-                    class: "standard-icon"
-                  }, {
+                  T("span", jb, [
+                    Ub,
+                    ne(" " + Z(a.originDescription), 1)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            (b(!0), E(ie, null, Re(n.tooltipEntry.origins, (d, h) => (b(), E("div", {
+              class: "attribute-content",
+              "origin-item-label": d,
+              key: d
+            }, [
+              ne(Z(a.capitalise(d)) + " ", 1),
+              h != n.tooltipEntry.origins.length - 1 ? (b(), E("div", Wb)) : D("", !0)
+            ], 8, qb))), 128)),
+            se(I(f, {
+              class: "button",
+              id: "open-dendrites-button",
+              onClick: a.openDendrites
+            }, {
+              default: S(() => [
+                ne(" Explore origin data ")
+              ]),
+              _: 1
+            }, 8, ["onClick"]), [
+              [
+                we,
+                n.tooltipEntry.originsWithDatasets && n.tooltipEntry.originsWithDatasets.length > 0
+              ]
+            ])
+          ])) : D("", !0),
+          n.tooltipEntry.components && n.tooltipEntry.components.length > 0 ? (b(), E("div", Gb, [
+            Yb,
+            (b(!0), E(ie, null, Re(n.tooltipEntry.components, (d, h) => (b(), E("div", {
+              class: "attribute-content",
+              "component-item-label": d,
+              key: d
+            }, [
+              ne(Z(a.capitalise(d)) + " ", 1),
+              h != n.tooltipEntry.components.length - 1 ? (b(), E("div", Xb)) : D("", !0)
+            ], 8, Zb))), 128))
+          ])) : D("", !0),
+          n.tooltipEntry.destinations && n.tooltipEntry.destinations.length > 0 ? (b(), E("div", Jb, [
+            T("div", Qb, [
+              e2,
+              I(l, {
+                width: "250",
+                trigger: "hover",
+                teleported: !1,
+                "popper-class": "popover-origin-help"
+              }, {
+                reference: S(() => [
+                  I(s, { class: "info" }, {
                     default: S(() => [
-                      I(v, { onClick: a.submit }, null, 8, ["onClick"])
+                      I(i)
                     ]),
                     _: 1
-                  })) : D("", !0)
+                  })
                 ]),
-                _: 1
-              })),
-              e.errorMessage ? (b(), B(i, {
-                key: 2,
-                class: "dialog-text"
-              }, {
                 default: S(() => [
-                  T("strong", Jb, Z(e.errorMessage), 1)
+                  t2
                 ]),
                 _: 1
-              })) : D("", !0)
-            ], 64)) : D("", !0)
-          ], 64)) : D("", !0)
-        ], 64)) : D("", !0)
-      ])
-    ]),
-    _: 1
-  });
+              })
+            ]),
+            (b(!0), E(ie, null, Re(n.tooltipEntry.destinations, (d, h) => (b(), E("div", {
+              class: "attribute-content",
+              "destination-item-label": d,
+              key: d
+            }, [
+              ne(Z(a.capitalise(d)) + " ", 1),
+              h != n.tooltipEntry.destinations.length - 1 ? (b(), E("div", o2)) : D("", !0)
+            ], 8, n2))), 128)),
+            se(I(f, {
+              class: "button",
+              onClick: a.openAxons
+            }, {
+              default: S(() => [
+                ne(" Explore destination data ")
+              ]),
+              _: 1
+            }, 8, ["onClick"]), [
+              [
+                we,
+                n.tooltipEntry.destinationsWithDatasets && n.tooltipEntry.destinationsWithDatasets.length > 0
+              ]
+            ])
+          ])) : D("", !0),
+          se(I(f, {
+            class: "button",
+            onClick: a.openAll
+          }, {
+            default: S(() => [
+              ne(" Search for data on components ")
+            ]),
+            _: 1
+          }, 8, ["onClick"]), [
+            [
+              we,
+              n.tooltipEntry.componentsWithDatasets && n.tooltipEntry.componentsWithDatasets.length > 0
+            ]
+          ]),
+          I(v, { resources: a.resources }, null, 8, ["resources"])
+        ], 512), [
+          [we, e.showDetails]
+        ])
+      ]),
+      _: 1
+    })
+  ])), [
+    [g, e.loading]
+  ]) : D("", !0);
 }
-const e2 = /* @__PURE__ */ $t(zb, [["render", Qb], ["__scopeId", "data-v-09c78af1"]]), t2 = {
+const a2 = /* @__PURE__ */ $t(Ib, [["render", r2], ["__scopeId", "data-v-ef9a0f6d"]]), i2 = {
   name: "Tooltip",
   props: {
     tooltipEntry: {
@@ -11861,13 +11941,13 @@ const e2 = /* @__PURE__ */ $t(zb, [["render", Qb], ["__scopeId", "data-v-09c78af
       this.$emit("onActionClick", e);
     });
   }
-}, n2 = {
+}, s2 = {
   class: "tooltip-container",
   id: "tooltip-container"
 };
-function o2(e, t, n, o, r, a) {
-  const i = e2, s = Vb;
-  return b(), E("div", n2, [
+function l2(e, t, n, o, r, a) {
+  const i = Vy, s = a2;
+  return b(), E("div", s2, [
     n.annotationDisplay ? (b(), B(i, {
       key: 0,
       annotationEntry: n.annotationEntry,
@@ -11878,7 +11958,7 @@ function o2(e, t, n, o, r, a) {
     }, null, 8, ["tooltipEntry"]))
   ]);
 }
-const k2 = /* @__PURE__ */ $t(t2, [["render", o2], ["__scopeId", "data-v-229b3988"]]), r2 = {
+const _2 = /* @__PURE__ */ $t(i2, [["render", l2], ["__scopeId", "data-v-229b3988"]]), c2 = {
   name: "TreeControls",
   props: {
     /**
@@ -12018,21 +12098,21 @@ const k2 = /* @__PURE__ */ $t(t2, [["render", o2], ["__scopeId", "data-v-229b398
   mounted: function() {
     this.$refs.regionTree && this.$refs.regionTree.filter(this.filterText);
   }
-}, a2 = { class: "selections-container" }, i2 = { class: "title-text" }, s2 = {
+}, u2 = { class: "selections-container" }, d2 = { class: "title-text" }, f2 = {
   class: "tree-container",
   ref: "treeContainer"
-}, l2 = { class: "tooltip-text" }, c2 = ["onClick", "onMouseover", "onMouseenter"], u2 = ["onClick", "onMouseover", "onMouseenter"], d2 = { class: "lastChildInItem" }, f2 = {
+}, p2 = { class: "tooltip-text" }, h2 = ["onClick", "onMouseover", "onMouseenter"], v2 = ["onClick", "onMouseover", "onMouseenter"], g2 = { class: "lastChildInItem" }, m2 = {
   key: 0,
   class: "node-options"
 };
-function p2(e, t, n, o, r, a) {
+function y2(e, t, n, o, r, a) {
   const i = da, s = ra, l = ua, c = pa, u = y1, f = _y, v = ml;
-  return b(), E("div", a2, [
+  return b(), E("div", u2, [
     n.title ? (b(), B(l, { key: 0 }, {
       default: S(() => [
         I(i, { span: 12 }, {
           default: S(() => [
-            T("div", i2, Z(n.title), 1)
+            T("div", d2, Z(n.title), 1)
           ]),
           _: 1
         }),
@@ -12055,7 +12135,7 @@ function p2(e, t, n, o, r, a) {
       ]),
       _: 1
     })) : D("", !0),
-    T("div", s2, [
+    T("div", f2, [
       T("div", {
         class: F(["tree-tooltip", e.tooltipAtBottom ? "bottom" : ""])
       }, [
@@ -12071,7 +12151,7 @@ function p2(e, t, n, o, r, a) {
           width: 260
         }, {
           default: S(() => [
-            T("div", l2, Z(e.tooltipLabel), 1)
+            T("div", p2, Z(e.tooltipLabel), 1)
           ]),
           _: 1
         }, 8, ["visible"])
@@ -12107,7 +12187,7 @@ function p2(e, t, n, o, r, a) {
               style: de(a.getBackgroundStyles(d)),
               class: "lastChildInItem"
             }, Z(g.label), 5)
-          ], 42, c2)) : n.mapType === "scaffold" ? (b(), E("span", {
+          ], 42, h2)) : n.mapType === "scaffold" ? (b(), E("span", {
             key: 1,
             class: F(["region-tree-node", {
               activeItem: n.active.includes(d.id),
@@ -12127,11 +12207,11 @@ function p2(e, t, n, o, r, a) {
               "popper-class": e.myPopperClass,
               onChange: (h) => a.setColour(d, h)
             }, null, 8, ["class", "modelValue", "onUpdate:modelValue", "popper-class", "onChange"])) : D("", !0),
-            T("div", d2, [
+            T("div", g2, [
               T("span", null, Z(g.label), 1),
-              d.isTextureSlides ? (b(), E("span", f2, " (Texture) ")) : D("", !0)
+              d.isTextureSlides ? (b(), E("span", m2, " (Texture) ")) : D("", !0)
             ])
-          ], 42, u2)) : D("", !0)
+          ], 42, v2)) : D("", !0)
         ]),
         _: 1
       }, 8, ["node-key", "data", "default-expanded-keys", "onCheck", "filter-node-method", "class"])), [
@@ -12140,91 +12220,12 @@ function p2(e, t, n, o, r, a) {
     ], 512)
   ]);
 }
-const _2 = /* @__PURE__ */ $t(r2, [["render", p2], ["__scopeId", "data-v-e4e81c87"]]), ji = "Copy to clipboard", h2 = "Copied!", v2 = "#8300bf", g2 = {
-  name: "CopyToClipboard",
-  props: {
-    content: {
-      type: String,
-      default: ""
-    },
-    /**
-     * `theme: light` will show white button,
-     * to use when the button is over other readable text content.
-     * Default button is transparent.
-     */
-    theme: {
-      type: String,
-      default: ""
-    }
-  },
-  data: function() {
-    return {
-      textLabel: ji,
-      autoHideTimeout: 0,
-      iconColor: v2
-    };
-  },
-  methods: {
-    copyToClipboard: async function() {
-      let e = !0;
-      this.autoHideTimeout = 600;
-      try {
-        const t = this.content.replaceAll(`
-`, ""), n = document.createElement("div");
-        n.innerHTML = this.content;
-        const o = n.textContent || n.innerText || "", r = new Blob([t], { type: "text/html" }), a = new Blob([o], { type: "text/plain" }), i = new ClipboardItem({
-          "text/html": r,
-          "text/plain": a
-        });
-        await navigator.clipboard.write([i]);
-      } catch (t) {
-        console.error(
-          "Error when trying to use navigator.clipboard.write()",
-          t
-        ), e = !1;
-      }
-      e ? this.textLabel = h2 : this.textLabel = "Error trying to copy to clipboard!";
-    },
-    resetSettings: function() {
-      this.autoHideTimeout = 0, this.textLabel = ji;
-    }
-  }
-}, m2 = { class: "visually-hidden" };
-function y2(e, t, n, o, r, a) {
-  const i = uh, s = Me, l = Wt, c = nr;
-  return b(), B(c, {
-    content: e.textLabel,
-    placement: "bottom",
-    "hide-after": e.autoHideTimeout,
-    effect: "clipboard-tooltip",
-    onHide: a.resetSettings
-  }, {
-    default: S(() => [
-      I(l, {
-        class: F(["copy-clipboard-button", n.theme]),
-        size: "small",
-        onClick: a.copyToClipboard
-      }, {
-        default: S(() => [
-          I(s, { color: e.iconColor }, {
-            default: S(() => [
-              I(i)
-            ]),
-            _: 1
-          }, 8, ["color"]),
-          T("span", m2, Z(e.textLabel), 1)
-        ]),
-        _: 1
-      }, 8, ["class", "onClick"])
-    ]),
-    _: 1
-  }, 8, ["content", "hide-after", "onHide"]);
-}
-const x2 = /* @__PURE__ */ $t(g2, [["render", y2], ["__scopeId", "data-v-de3b5311"]]);
+const x2 = /* @__PURE__ */ $t(c2, [["render", y2], ["__scopeId", "data-v-e4e81c87"]]);
 export {
-  x2 as CopyToClipboard,
-  w2 as DrawToolbar,
-  C2 as HelpModeDialog,
-  k2 as Tooltip,
-  _2 as TreeControls
+  Vy as AnnotationPopup,
+  w2 as CopyToClipboard,
+  C2 as DrawToolbar,
+  k2 as HelpModeDialog,
+  _2 as Tooltip,
+  x2 as TreeControls
 };