taxonium-component/dist/RegionWidthEditorDialog-DmeZdg72.js

React component for exploring large phylogenetic trees in the browser

import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { useState as u, useEffect as f } from "react";
import { o as g, u as s, a as h, D as m, T as x, c as v, d as b, B as l } from "./JBrowsePanel-BNE3gNW1.js";
const y = (o = 0) => +(+o).toFixed(1), w = g(function({ model: o, handleClose: t }) {
  const { bpPerPx: i, width: n } = o, [a, c] = u(s.toLocale(y(i * n)));
  f(() => {
    c(s.toLocale(i * n));
  }, [i, n]);
  const p = a.replace(/,/g, "");
  return r(h.Dialog, { title: "Edit zoom level", open: !0, onClose: t, children: [r(m, { style: {
    display: "flex",
    flexDirection: "column",
    gap: 30
  }, children: [e(x, { children: "Enter a specific number of base pairs to change the viewport to show. This is approximate and does not account for padding between regions or off-screen scrolling" }), e(v, { helperText: "current zoom level (in bp)", value: a, onChange: (d) => {
    c(d.target.value);
  } })] }), r(b, { children: [e(l, { variant: "contained", color: "secondary", onClick: () => {
    t();
  }, children: "Cancel" }), e(l, { variant: "contained", color: "primary", onClick: () => {
    o.zoomTo(+p / o.width), t();
  }, children: "Submit" })] })] });
});
export {
  w as default
};
//# sourceMappingURL=RegionWidthEditorDialog-DmeZdg72.js.map