taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
737 lines (736 loc) • 29.1 kB
JavaScript
import { jsx as s, jsxs as O, Fragment as Y } from "react/jsx-runtime";
import { c8 as De, c9 as _e, ax as Ue, b3 as Le, ca as qe, cb as Fe, cc as Ye, cd as Je, ce as Qe, cf as z, cg as Xe, ch as Ze, ci as et, aB as U, u as M, cj as tt, ck as ot, cl as nt, cm as Ne, cn as rt, t as Re, w as $e, a as st } from "./JBrowsePanel-BNE3gNW1.js";
import * as b from "react";
import { p as N } from "./index-CoM8QAjP.js";
import g from "prop-types";
const ce = /* @__PURE__ */ b.createContext(null);
N.env.NODE_ENV !== "production" && (ce.displayName = "ThemeContext");
function le() {
const e = b.useContext(ce);
return N.env.NODE_ENV !== "production" && b.useDebugValue(e), e;
}
const it = typeof Symbol == "function" && Symbol.for, ct = it ? Symbol.for("mui.nested") : "__THEME_NESTED__";
function lt(e, t) {
if (typeof t == "function") {
const o = t(e);
return N.env.NODE_ENV !== "production" && (o || console.error(["MUI: You should return an object from your theme function, i.e.", "<ThemeProvider theme={() => ({})} />"].join(`
`))), o;
}
return {
...e,
...t
};
}
function X(e) {
const {
children: t,
theme: o
} = e, n = le();
N.env.NODE_ENV !== "production" && n === null && typeof o == "function" && console.error(["MUI: You are providing a theme function prop to the ThemeProvider component:", "<ThemeProvider theme={outerTheme => outerTheme} />", "", "However, no outer theme is present.", "Make sure a theme is already injected higher in the React tree or provide a theme object."].join(`
`));
const i = b.useMemo(() => {
const l = n === null ? {
...o
} : lt(n, o);
return l != null && (l[ct] = n !== null), l;
}, [o, n]);
return /* @__PURE__ */ s(ce.Provider, {
value: i,
children: t
});
}
N.env.NODE_ENV !== "production" && (X.propTypes = {
/**
* Your component tree.
*/
children: g.node,
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: g.oneOfType([g.object, g.func]).isRequired
});
N.env.NODE_ENV !== "production" && N.env.NODE_ENV !== "production" && (X.propTypes = De(X.propTypes));
function at(e) {
const t = _e(), o = Ue() || "", {
modularCssLayers: n
} = e;
let i = "mui.global, mui.components, mui.theme, mui.custom, mui.sx";
return !n || t !== null ? i = "" : typeof n == "string" ? i = n.replace(/mui(?!\.)/g, i) : i = `@layer ${i};`, Le(() => {
var c, d;
const l = document.querySelector("head");
if (!l)
return;
const r = l.firstChild;
if (i) {
if (r && ((c = r.hasAttribute) != null && c.call(r, "data-mui-layer-order")) && r.getAttribute("data-mui-layer-order") === o)
return;
const m = document.createElement("style");
m.setAttribute("data-mui-layer-order", o), m.textContent = i, l.prepend(m);
} else
(d = l.querySelector(`style[data-mui-layer-order="${o}"]`)) == null || d.remove();
}, [i, o]), i ? /* @__PURE__ */ s(qe, {
styles: i
}) : null;
}
const Oe = {};
function Pe(e, t, o, n = !1) {
return b.useMemo(() => {
const i = e && t[e] || t;
if (typeof o == "function") {
const l = o(i), r = e ? {
...t,
[e]: l
} : l;
return n ? () => r : r;
}
return e ? {
...t,
[e]: o
} : {
...t,
...o
};
}, [e, t, o, n]);
}
function F(e) {
const {
children: t,
theme: o,
themeId: n
} = e, i = _e(Oe), l = le() || Oe;
N.env.NODE_ENV !== "production" && (i === null && typeof o == "function" || n && i && !i[n] && typeof o == "function") && console.error(["MUI: You are providing a theme function prop to the ThemeProvider component:", "<ThemeProvider theme={outerTheme => outerTheme} />", "", "However, no outer theme is present.", "Make sure a theme is already injected higher in the React tree or provide a theme object."].join(`
`));
const r = Pe(n, i, o), c = Pe(n, l, o, !0), d = (n ? r[n] : r).direction === "rtl", m = at(r);
return /* @__PURE__ */ s(X, {
theme: c,
children: /* @__PURE__ */ s(Fe.Provider, {
value: r,
children: /* @__PURE__ */ s(Ye, {
value: d,
children: /* @__PURE__ */ O(Je, {
value: n ? r[n].components : r.components,
children: [m, t]
})
})
})
});
}
N.env.NODE_ENV !== "production" && (F.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Your component tree.
*/
children: g.node,
/**
* A theme object. You can provide a function to extend the outer theme.
*/
theme: g.oneOfType([g.func, g.object]).isRequired,
/**
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
*/
themeId: g.string
});
N.env.NODE_ENV !== "production" && N.env.NODE_ENV !== "production" && (F.propTypes = De(F.propTypes));
const ae = "mode", de = "color-scheme", dt = "data-color-scheme";
function mt(e) {
const {
defaultMode: t = "system",
defaultLightColorScheme: o = "light",
defaultDarkColorScheme: n = "dark",
modeStorageKey: i = ae,
colorSchemeStorageKey: l = de,
attribute: r = dt,
colorSchemeNode: c = "document.documentElement",
nonce: d
} = e || {};
let m = "", a = r;
if (r === "class" && (a = ".%s"), r === "data" && (a = "[data-%s]"), a.startsWith(".")) {
const y = a.substring(1);
m += `${c}.classList.remove('${y}'.replace('%s', light), '${y}'.replace('%s', dark));
${c}.classList.add('${y}'.replace('%s', colorScheme));`;
}
const x = a.match(/\[([^\]]+)\]/);
if (x) {
const [y, h] = x[1].split("=");
h || (m += `${c}.removeAttribute('${y}'.replace('%s', light));
${c}.removeAttribute('${y}'.replace('%s', dark));`), m += `
${c}.setAttribute('${y}'.replace('%s', colorScheme), ${h ? `${h}.replace('%s', colorScheme)` : '""'});`;
} else
m += `${c}.setAttribute('${a}', colorScheme);`;
return /* @__PURE__ */ s("script", {
suppressHydrationWarning: !0,
nonce: typeof window > "u" ? d : "",
dangerouslySetInnerHTML: {
__html: `(function() {
try {
let colorScheme = '';
const mode = localStorage.getItem('${i}') || '${t}';
const dark = localStorage.getItem('${l}-dark') || '${n}';
const light = localStorage.getItem('${l}-light') || '${o}';
if (mode === 'system') {
// handle system mode
const mql = window.matchMedia('(prefers-color-scheme: dark)');
if (mql.matches) {
colorScheme = dark
} else {
colorScheme = light
}
}
if (mode === 'light') {
colorScheme = light;
}
if (mode === 'dark') {
colorScheme = dark;
}
if (colorScheme) {
${m}
}
} catch(e){}})();`
}
}, "mui-color-scheme-init");
}
function ht() {
}
const ut = ({
key: e,
storageWindow: t
}) => (!t && typeof window < "u" && (t = window), {
get(o) {
if (typeof window > "u")
return;
if (!t)
return o;
let n;
try {
n = t.localStorage.getItem(e);
} catch {
}
return n || o;
},
set: (o) => {
if (t)
try {
t.localStorage.setItem(e, o);
} catch {
}
},
subscribe: (o) => {
if (!t)
return ht;
const n = (i) => {
const l = i.newValue;
i.key === e && o(l);
};
return t.addEventListener("storage", n), () => {
t.removeEventListener("storage", n);
};
}
});
function ie() {
}
function Ve(e) {
if (typeof window < "u" && typeof window.matchMedia == "function" && e === "system")
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
function Ae(e, t) {
if (e.mode === "light" || e.mode === "system" && e.systemMode === "light")
return t("light");
if (e.mode === "dark" || e.mode === "system" && e.systemMode === "dark")
return t("dark");
}
function ft(e) {
return Ae(e, (t) => {
if (t === "light")
return e.lightColorScheme;
if (t === "dark")
return e.darkColorScheme;
});
}
function pt(e) {
const {
defaultMode: t = "light",
defaultLightColorScheme: o,
defaultDarkColorScheme: n,
supportedColorSchemes: i = [],
modeStorageKey: l = ae,
colorSchemeStorageKey: r = de,
storageWindow: c = typeof window > "u" ? void 0 : window,
storageManager: d = ut,
noSsr: m = !1
} = e, a = i.join(","), x = i.length > 1, y = b.useMemo(() => d == null ? void 0 : d({
key: l,
storageWindow: c
}), [d, l, c]), h = b.useMemo(() => d == null ? void 0 : d({
key: `${r}-light`,
storageWindow: c
}), [d, r, c]), S = b.useMemo(() => d == null ? void 0 : d({
key: `${r}-dark`,
storageWindow: c
}), [d, r, c]), [w, v] = b.useState(() => {
const u = (y == null ? void 0 : y.get(t)) || t, p = (h == null ? void 0 : h.get(o)) || o, f = (S == null ? void 0 : S.get(n)) || n;
return {
mode: u,
systemMode: Ve(u),
lightColorScheme: p,
darkColorScheme: f
};
}), [k, _] = b.useState(m || !x);
b.useEffect(() => {
_(!0);
}, []);
const A = ft(w), P = b.useCallback((u) => {
v((p) => {
if (u === p.mode)
return p;
const f = u ?? t;
return y == null || y.set(f), {
...p,
mode: f,
systemMode: Ve(f)
};
});
}, [y, t]), L = b.useCallback((u) => {
u ? typeof u == "string" ? u && !a.includes(u) ? console.error(`\`${u}\` does not exist in \`theme.colorSchemes\`.`) : v((p) => {
const f = {
...p
};
return Ae(p, (C) => {
C === "light" && (h == null || h.set(u), f.lightColorScheme = u), C === "dark" && (S == null || S.set(u), f.darkColorScheme = u);
}), f;
}) : v((p) => {
const f = {
...p
}, C = u.light === null ? o : u.light, I = u.dark === null ? n : u.dark;
return C && (a.includes(C) ? (f.lightColorScheme = C, h == null || h.set(C)) : console.error(`\`${C}\` does not exist in \`theme.colorSchemes\`.`)), I && (a.includes(I) ? (f.darkColorScheme = I, S == null || S.set(I)) : console.error(`\`${I}\` does not exist in \`theme.colorSchemes\`.`)), f;
}) : v((p) => (h == null || h.set(o), S == null || S.set(n), {
...p,
lightColorScheme: o,
darkColorScheme: n
}));
}, [a, h, S, o, n]), B = b.useCallback((u) => {
w.mode === "system" && v((p) => {
const f = u != null && u.matches ? "dark" : "light";
return p.systemMode === f ? p : {
...p,
systemMode: f
};
});
}, [w.mode]), K = b.useRef(B);
return K.current = B, b.useEffect(() => {
if (typeof window.matchMedia != "function" || !x)
return;
const u = (...f) => K.current(...f), p = window.matchMedia("(prefers-color-scheme: dark)");
return p.addListener(u), u(p), () => {
p.removeListener(u);
};
}, [x]), b.useEffect(() => {
if (x) {
const u = (y == null ? void 0 : y.subscribe((C) => {
(!C || ["light", "dark", "system"].includes(C)) && P(C || t);
})) || ie, p = (h == null ? void 0 : h.subscribe((C) => {
(!C || a.match(C)) && L({
light: C
});
})) || ie, f = (S == null ? void 0 : S.subscribe((C) => {
(!C || a.match(C)) && L({
dark: C
});
})) || ie;
return () => {
u(), p(), f();
};
}
}, [L, P, a, t, c, x, y, h, S]), {
...w,
mode: k ? w.mode : void 0,
systemMode: k ? w.systemMode : void 0,
colorScheme: k ? A : void 0,
setMode: P,
setColorScheme: L
};
}
const yt = "*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
function gt(e) {
const {
themeId: t,
/**
* This `theme` object needs to follow a certain structure to
* be used correctly by the finel `CssVarsProvider`. It should have a
* `colorSchemes` key with the light and dark (and any other) palette.
* It should also ideally have a vars object created using `prepareCssVars`.
*/
theme: o = {},
modeStorageKey: n = ae,
colorSchemeStorageKey: i = de,
disableTransitionOnChange: l = !1,
defaultColorScheme: r,
resolveTheme: c
} = e, d = {
allColorSchemes: [],
colorScheme: void 0,
darkColorScheme: void 0,
lightColorScheme: void 0,
mode: void 0,
setColorScheme: () => {
},
setMode: () => {
},
systemMode: void 0
}, m = /* @__PURE__ */ b.createContext(void 0);
N.env.NODE_ENV !== "production" && (m.displayName = "ColorSchemeContext");
const a = () => b.useContext(m) || d, x = {}, y = {};
function h(k) {
var ke, we, Ee, Me;
const {
children: _,
theme: A,
modeStorageKey: P = n,
colorSchemeStorageKey: L = i,
disableTransitionOnChange: B = l,
storageManager: K,
storageWindow: u = typeof window > "u" ? void 0 : window,
documentNode: p = typeof document > "u" ? void 0 : document,
colorSchemeNode: f = typeof document > "u" ? void 0 : document.documentElement,
disableNestedContext: C = !1,
disableStyleSheetGeneration: I = !1,
defaultMode: Be = "system",
forceThemeRerender: me = !1,
noSsr: Ie
} = k, Z = b.useRef(!1), ee = le(), te = b.useContext(m), oe = !!te && !C, he = b.useMemo(() => A || (typeof o == "function" ? o() : o), [A]), ue = he[t], $ = ue || he, {
colorSchemes: j = x,
components: fe = y,
cssVarPrefix: ne
} = $, pe = Object.keys(j).filter((E) => !!j[E]).join(","), G = b.useMemo(() => pe.split(","), [pe]), ye = typeof r == "string" ? r : r.light, ge = typeof r == "string" ? r : r.dark, He = j[ye] && j[ge] ? Be : ((we = (ke = j[$.defaultColorScheme]) == null ? void 0 : ke.palette) == null ? void 0 : we.mode) || ((Ee = $.palette) == null ? void 0 : Ee.mode), {
mode: Ke,
setMode: re,
systemMode: Se,
lightColorScheme: be,
darkColorScheme: xe,
colorScheme: Ge,
setColorScheme: Ce
} = pt({
supportedColorSchemes: G,
defaultLightColorScheme: ye,
defaultDarkColorScheme: ge,
modeStorageKey: P,
colorSchemeStorageKey: L,
defaultMode: He,
storageManager: K,
storageWindow: u,
noSsr: Ie
});
let se = Ke, V = Ge;
oe && (se = te.mode, V = te.colorScheme), N.env.NODE_ENV !== "production" && me && !$.vars && console.warn(["MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.", "Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution."].join(`
`));
let J = V || $.defaultColorScheme;
$.vars && !me && (J = $.defaultColorScheme);
const W = b.useMemo(() => {
var H;
const E = ((H = $.generateThemeVars) == null ? void 0 : H.call($)) || $.vars, T = {
...$,
components: fe,
colorSchemes: j,
cssVarPrefix: ne,
vars: E
};
if (typeof T.generateSpacing == "function" && (T.spacing = T.generateSpacing()), J) {
const R = j[J];
R && typeof R == "object" && Object.keys(R).forEach((D) => {
R[D] && typeof R[D] == "object" ? T[D] = {
...T[D],
...R[D]
} : T[D] = R[D];
});
}
return c ? c(T) : T;
}, [$, J, fe, j, ne]), q = $.colorSchemeSelector;
Le(() => {
if (V && f && q && q !== "media") {
const E = q;
let T = q;
if (E === "class" && (T = ".%s"), E === "data" && (T = "[data-%s]"), E != null && E.startsWith("data-") && !E.includes("%s") && (T = `[${E}="%s"]`), T.startsWith("."))
f.classList.remove(...G.map((H) => T.substring(1).replace("%s", H))), f.classList.add(T.substring(1).replace("%s", V));
else {
const H = T.replace("%s", V).match(/\[([^\]]+)\]/);
if (H) {
const [R, D] = H[1].split("=");
D || G.forEach((ze) => {
f.removeAttribute(R.replace(V, ze));
}), f.setAttribute(R, D ? D.replace(/"|'/g, "") : "");
} else
f.setAttribute(T, V);
}
}
}, [V, q, f, G]), b.useEffect(() => {
let E;
if (B && Z.current && p) {
const T = p.createElement("style");
T.appendChild(p.createTextNode(yt)), p.head.appendChild(T), window.getComputedStyle(p.body), E = setTimeout(() => {
p.head.removeChild(T);
}, 1);
}
return () => {
clearTimeout(E);
};
}, [V, B, p]), b.useEffect(() => (Z.current = !0, () => {
Z.current = !1;
}), []);
const We = b.useMemo(() => ({
allColorSchemes: G,
colorScheme: V,
darkColorScheme: xe,
lightColorScheme: be,
mode: se,
setColorScheme: Ce,
setMode: N.env.NODE_ENV === "production" ? re : (E) => {
W.colorSchemeSelector === "media" && console.error(["MUI: The `setMode` function has no effect if `colorSchemeSelector` is `media` (`media` is the default value).", "To toggle the mode manually, please configure `colorSchemeSelector` to use a class or data attribute.", "To learn more, visit https://mui.com/material-ui/customization/css-theme-variables/configuration/#toggling-dark-mode-manually"].join(`
`)), re(E);
},
systemMode: Se
}), [G, V, xe, be, se, Ce, re, Se, W.colorSchemeSelector]);
let Te = !0;
(I || $.cssVariables === !1 || oe && (ee == null ? void 0 : ee.cssVarPrefix) === ne) && (Te = !1);
const ve = /* @__PURE__ */ O(b.Fragment, {
children: [/* @__PURE__ */ s(F, {
themeId: ue ? t : void 0,
theme: W,
children: _
}), Te && /* @__PURE__ */ s(Qe, {
styles: ((Me = W.generateStyleSheets) == null ? void 0 : Me.call(W)) || []
})]
});
return oe ? ve : /* @__PURE__ */ s(m.Provider, {
value: We,
children: ve
});
}
N.env.NODE_ENV !== "production" && (h.propTypes = {
/**
* The component tree.
*/
children: g.node,
/**
* The node used to attach the color-scheme attribute
*/
colorSchemeNode: g.any,
/**
* localStorage key used to store `colorScheme`
*/
colorSchemeStorageKey: g.string,
/**
* The default mode when the storage is empty,
* require the theme to have `colorSchemes` with light and dark.
*/
defaultMode: g.string,
/**
* If `true`, the provider creates its own context and generate stylesheet as if it is a root `CssVarsProvider`.
*/
disableNestedContext: g.bool,
/**
* If `true`, the style sheet won't be generated.
*
* This is useful for controlling nested CssVarsProvider behavior.
*/
disableStyleSheetGeneration: g.bool,
/**
* Disable CSS transitions when switching between modes or color schemes.
*/
disableTransitionOnChange: g.bool,
/**
* The document to attach the attribute to.
*/
documentNode: g.any,
/**
* If `true`, theme values are recalculated when the mode changes.
*/
forceThemeRerender: g.bool,
/**
* The key in the local storage used to store current color scheme.
*/
modeStorageKey: g.string,
/**
* If `true`, the mode will be the same value as the storage without an extra rerendering after the hydration.
* You should use this option in conjuction with `InitColorSchemeScript` component.
*/
noSsr: g.bool,
/**
* The storage manager to be used for storing the mode and color scheme
* @default using `window.localStorage`
*/
storageManager: g.func,
/**
* The window that attaches the 'storage' event listener.
* @default window
*/
storageWindow: g.any,
/**
* The calculated theme object that will be passed through context.
*/
theme: g.object
});
const S = typeof r == "string" ? r : r.light, w = typeof r == "string" ? r : r.dark;
return {
CssVarsProvider: h,
useColorScheme: a,
getInitColorSchemeScript: (k) => mt({
colorSchemeStorageKey: i,
defaultLightColorScheme: S,
defaultDarkColorScheme: w,
modeStorageKey: n,
...k
})
};
}
function St({
theme: e,
...t
}) {
const o = z in e ? e[z] : void 0;
return /* @__PURE__ */ s(F, {
...t,
themeId: o ? z : void 0,
theme: o || e
});
}
const Q = {
colorSchemeStorageKey: "mui-color-scheme",
defaultLightColorScheme: "light",
defaultDarkColorScheme: "dark",
modeStorageKey: "mui-mode"
};
N.env.NODE_ENV !== "production" && (g.string, g.string, g.string, g.string, g.string, g.oneOf(["dark", "light", "system"]), g.string, g.string);
const {
CssVarsProvider: bt
} = gt({
themeId: z,
// @ts-ignore ignore module augmentation tests
theme: () => Xe({
cssVariables: !0
}),
colorSchemeStorageKey: Q.colorSchemeStorageKey,
modeStorageKey: Q.modeStorageKey,
defaultColorScheme: {
light: Q.defaultLightColorScheme,
dark: Q.defaultDarkColorScheme
},
resolveTheme: (e) => {
const t = {
...e,
typography: Ze(e.palette, e.typography)
};
return t.unstable_sx = function(n) {
return et({
sx: n,
theme: this
});
}, t;
}
}), xt = bt;
function Ct({
theme: e,
...t
}) {
const o = b.useMemo(() => {
if (typeof e == "function")
return e;
const n = z in e ? e[z] : e;
return "colorSchemes" in n ? null : "vars" in n ? e : {
...e,
vars: null
};
}, [e]);
return o ? /* @__PURE__ */ s(St, {
theme: o,
...t
}) : /* @__PURE__ */ s(xt, {
theme: e,
...t
});
}
function Tt({ width: e, height: t, shift: o }) {
const n = U();
return s("rect", { width: e + o * 2, height: t, fill: M.stripAlpha(n.palette.background.default) });
}
function je({ model: e, height: t }) {
const { dynamicBlocks: o, offsetPx: n, interRegionPaddingWidth: i } = e;
return s(Y, { children: o.contentBlocks.slice(1).map((l) => s("rect", { x: l.offsetPx - n - i, width: i, y: 0, height: t, fill: "grey" }, l.key)) });
}
function vt({ start: e, end: t, bpPerPx: o, reversed: n = !1, major: i = !0, minor: l = !0, hideText: r = !1 }) {
const c = tt(e, t, o, i, l), d = U(), m = M.stripAlpha(d.palette.text.secondary);
return O(Y, { children: [c.map((a) => {
const x = (n ? t - a.base : a.base - e) / o;
return s("line", { x1: x, x2: x, y1: 0, y2: a.type === "major" ? 6 : 4, strokeWidth: 1, stroke: m }, `tick-${a.base}`);
}), r ? null : c.filter((a) => a.type === "major").map((a) => {
const x = (n ? t - a.base : a.base - e) / o;
return s("text", { x: x - 3, y: 18, fontSize: 11, fill: m, children: M.getTickDisplayStr(a.base + 1, o) }, `label-${a.base}`);
})] });
}
function kt({ model: e, fontSize: t }) {
const { dynamicBlocks: { contentBlocks: o }, offsetPx: n, bpPerPx: i } = e, l = o.length < 5, r = U(), c = M.stripAlpha(r.palette.text.primary);
return O(Y, { children: [s(je, { model: e, height: 30 }), o.map((d) => {
const { start: m, end: a, key: x, reversed: y, offsetPx: h, refName: S, widthPx: w } = d, v = h - n, k = `clip-${x}`;
return O("g", { children: [s("defs", { children: s("clipPath", { id: k, children: s("rect", { x: 0, y: 0, width: w, height: 100 }) }) }), s("g", { transform: `translate(${v} 0)`, children: O("g", { clipPath: `url(#${k})`, children: [s("text", { x: 4, y: t, fontSize: t, fill: c, children: S }), s("g", { transform: "translate(0 20)", children: s(vt, { hideText: !l, start: m, end: a, bpPerPx: i, reversed: y }) })] }) })] }, x);
})] });
}
function wt({ model: e, fontSize: t }) {
const { offsetPx: o, dynamicBlocks: { totalWidthPxWithoutBorders: n, totalBp: i } } = e, l = U(), r = M.getBpDisplayStr(i), c = Math.max(-o, 0), d = c + n, m = M.stripAlpha(l.palette.text.secondary), a = c + (d - c) / 2, x = t;
return O(Y, { children: [s("line", { x1: c, x2: d, y1: 10, y2: 10, stroke: m }), s("line", { x1: c, x2: c, y1: 5, y2: 15, stroke: m }), s("line", { x1: d, x2: d, y1: 5, y2: 15, stroke: m }), s("text", { x: a, y: x, textAnchor: "middle", dominantBaseline: "hanging", fontSize: t, fill: m, children: r })] });
}
function Et({ model: e, fontSize: t, cytobandHeight: o, rulerHeight: n }) {
const { width: i, assemblyNames: l, showCytobands: r, displayedRegions: c } = e, { assemblyManager: d } = M.getSession(e), m = l.length > 1 ? "" : l[0], a = d.get(m), x = U(), y = M.stripAlpha(x.palette.text.primary), h = ot.create({
displayedRegions: JSON.parse(JSON.stringify(c)),
interRegionPaddingWidth: 0,
minimumBlockWidth: e.minimumBlockWidth
}), S = e.dynamicBlocks.contentBlocks;
if (!S.length)
return null;
h.setVolatileWidth(i), h.showAllRegions();
const w = h.dynamicBlocks.contentBlocks[0], v = S.at(0), k = S.at(-1), _ = h.bpToPx({
...v,
coord: v.reversed ? v.end : v.start
}) || 0, A = h.bpToPx({
...k,
coord: k.reversed ? k.start : k.end
}) || 0, P = +r * o;
return O("g", { id: "header", children: [s("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: t, fill: y, children: m }), r ? O("g", { transform: `translate(0 ${n})`, children: [s(nt, { overview: h, assembly: a, block: w }), s("rect", { stroke: "red", fill: "rgb(255,0,0)", fillOpacity: 0.1, width: Math.max(A - _, 0.5), height: Ne - 1, x: _, y: 0.5 }), s("g", { transform: `translate(0,${Ne})`, children: s(rt, { overview: h, model: e, useOffset: !1 }) })] }) : null, s("g", { transform: `translate(0 ${t + P})`, children: s(wt, { model: e, fontSize: t }) }), s("g", { transform: `translate(0 ${n + P})`, children: s(kt, { model: e, fontSize: t }) })] });
}
function Mt({ trackLabels: e, trackName: t, fontSize: o, trackLabelOffset: n, x: i }) {
const l = U(), r = M.stripAlpha(l.palette.text.primary), c = e === "overlay" ? 5 : 0, d = e === "offset" ? 5 : 0, m = M.coarseStripHTML(t);
return e !== "none" ? s("g", { children: e === "left" ? s("text", { x: n - 40, y: 20, fill: r, fontSize: o, dominantBaseline: "hanging", textAnchor: "end", children: m }) : s("text", { x: i + c, y: d, fill: r, fontSize: o, dominantBaseline: "hanging", children: m }) }) : null;
}
function Nt({ displayResults: e, model: t, textHeight: o, fontSize: n, trackLabels: i = "offset", trackLabelOffset: l = 0 }) {
const r = M.getSession(t), c = i === "offset" ? o : 0;
return s(Y, { children: e.reduce(({ prevOffset: d, reactElements: m }, { track: a, result: x }) => {
const y = a.configuration, h = Re.getTrackName(y, r), S = a.displays[0], w = Math.max(-t.offsetPx, 0);
return {
prevOffset: d + S.height + c,
reactElements: [
...m,
O("g", { transform: `translate(0 ${d})`, children: [O("g", { transform: `translate(${l} ${c})`, children: [s(je, { model: t, height: S.height }), x] }), s(Mt, { trackName: h, fontSize: n, trackLabels: i, trackLabelOffset: l, x: w })] }, y.trackId)
]
};
}, {
prevOffset: 0,
reactElements: []
}).reactElements });
}
function $t(e, t, o) {
return M.sum(e.map((n) => n.displays[0].height + (["none", "left"].includes(o) ? 0 : t)));
}
async function _t(e, t) {
await $e(() => e.initialized);
const { textHeight: o = 18, headerHeight: n = 40, rulerHeight: i = 50, fontSize: l = 13, cytobandHeight: r = 100, trackLabels: c = "offset", themeName: d = "default", Wrapper: m = ({ children: f }) => f } = t, a = M.getSession(e), { allThemes: x } = a, y = x == null ? void 0 : x()[d], { width: h, pinnedTracks: S, unpinnedTracks: w, tracks: v, showCytobands: k } = e, _ = 50, A = +k * r, P = n + i + A + 10, L = $t(v, o, c) + P + 100, B = await Promise.all([...S, ...w].map(async (f) => {
const C = f.displays[0];
return await $e(() => !C.renderProps().notReady), { track: f, result: await C.renderSvg({ ...t, theme: y }) };
})), K = M.max(v.map((f) => M.measureText(Re.getTrackName(f.configuration, a), l)), 0) + 40, u = c === "left" ? K : 0, p = h + u;
return M.renderToStaticMarkup(s(Ct, { theme: st.createJBrowseTheme(y), children: s(m, { children: O("svg", { width: p, height: L, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, p + _ * 2, L].toString(), children: [s(Tt, { width: p, height: L, shift: _ }), O("g", { transform: `translate(${_} 0)`, children: [s("g", { transform: `translate(${u})`, children: s(Et, { model: e, fontSize: l, rulerHeight: i, cytobandHeight: r }) }), s("g", { transform: `translate(0 ${P})`, children: s(Nt, { textHeight: o, fontSize: l, model: e, displayResults: B, trackLabels: c, trackLabelOffset: u }) })] })] }) }) }));
}
export {
kt as SVGRuler,
Nt as SVGTracks,
_t as renderToSvg
};
//# sourceMappingURL=SVGLinearGenomeView-BO8POiqL.js.map