taxonium-component/dist/CenterLine-CpPf4ng2.js

React component for exploring large phylogenetic trees in the browser

import { jsx as l, jsxs as d } from "react/jsx-runtime";
import { useRef as p } from "react";
import { o as f, m as h } from "./JBrowsePanel-BNE3gNW1.js";
const m = h()((e) => ({
  centerLineContainer: {
    background: "transparent",
    height: "100%",
    zIndex: 4,
    position: "absolute",
    border: `1px ${e.palette.action.active} dashed`,
    borderTop: "none",
    borderBottom: "none",
    pointerEvents: "none"
  },
  centerLineText: {
    position: "absolute",
    pointerEvents: "none",
    whiteSpace: "nowrap",
    fontWeight: "bold"
  }
})), g = f(function({ model: e }) {
  const { bpPerPx: n, centerLineInfo: t, trackHeights: r, tracks: s, width: a } = e, i = p(null), { classes: o } = m(), c = a / 2;
  return s.length ? l("div", { "data-testid": "centerline_container", className: o.centerLineContainer, role: "presentation", ref: i, style: {
    left: `${c}px`,
    width: Math.max(1 / n, 1)
  }, children: t && d("div", { "data-testid": "centerline_text", className: o.centerLineText, role: "presentation", style: {
    left: Math.max(1 / n, 1) + 5,
    top: r
  }, children: [t.refName, ":", " ", Math.max(Math.round(t.offset) + 1, 0)] }) }) : null;
});
export {
  g as default
};
//# sourceMappingURL=CenterLine-CpPf4ng2.js.map