taxonium-component/dist/Highlight-C8CtWO7t.js

React component for exploring large phylogenetic trees in the browser

import { jsx as s, jsxs as v } from "react/jsx-runtime";
import { useState as N, useRef as I } from "react";
import { U as u, o as C, m as M, u as B, a3 as H, a4 as S, a as P, ao as w, af as k } from "./JBrowsePanel-BNE3gNW1.js";
const y = u(/* @__PURE__ */ s("path", {
  d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
}), "Bookmark"), z = u(/* @__PURE__ */ s("path", {
  d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1M8 13h8v-2H8zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5"
}), "Link"), E = M()((e) => ({
  highlight: {
    height: "100%",
    position: "absolute",
    overflow: "hidden",
    background: k.colord(e.palette.highlight.main).alpha(0.35).toRgbString()
  },
  linkIcon: {
    color: k.colord(e.palette.highlight.main).darken(0.2).toRgbString()
  },
  z3: {
    zIndex: 3
  }
})), T = C(function({ model: e, highlight: t }) {
  var i;
  const { classes: r } = E(), [p, d] = N(!1), f = I(null), n = B.getSession(e), { assemblyManager: x } = n, h = () => {
    e.removeHighlight(t);
  };
  function g() {
    d(!1);
  }
  const b = (o) => {
    const a = e.bpToPx({
      refName: o.refName,
      coord: o.start
    }), m = e.bpToPx({
      refName: o.refName,
      coord: o.end
    });
    return a && m ? {
      width: Math.max(Math.abs(m.offsetPx - a.offsetPx), 3),
      left: Math.min(a.offsetPx, m.offsetPx) - e.offsetPx
    } : void 0;
  }, l = x.get(t.assemblyName), c = b({
    ...t,
    refName: (i = l == null ? void 0 : l.getCanonicalRefName(t.refName)) !== null && i !== void 0 ? i : t.refName
  });
  return c ? v("div", { className: r.highlight, style: {
    left: c.left,
    width: c.width
  }, children: [s(H, { title: "Highlighted from URL parameter", arrow: !0, children: s(S, { ref: f, className: r.z3, onClick: () => {
    d(!0);
  }, children: s(z, { fontSize: "small", className: r.linkIcon }) }) }), s(P.Menu, { anchorEl: f.current, onMenuItemClick: (o, a) => {
    a(n), g();
  }, open: p, onClose: g, menuItems: [
    {
      label: "Dismiss highlight",
      icon: w,
      onClick: () => {
        h();
      }
    },
    {
      label: "Bookmark highlighted region",
      icon: y,
      onClick: () => {
        let o = n.widgets.get("GridBookmark");
        o || (o = n.addWidget("GridBookmarkWidget", "GridBookmark")), o.addBookmark(t), h();
      }
    }
  ] })] }) : null;
});
export {
  T as default
};
//# sourceMappingURL=Highlight-C8CtWO7t.js.map