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