taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
234 lines (233 loc) • 8.86 kB
JavaScript
import { jsx as l, jsxs as O } from "react/jsx-runtime";
import * as P from "react";
import { useState as N, useEffect as w } from "react";
import { aQ as R, H as A, b8 as L, A as D, G as F, E as I, o as G, u as j, b9 as V, ba as _, m as z, a as k, bb as y, ao as U, C as B, B as E, bc as q, bd as H } from "./JBrowsePanel-BNE3gNW1.js";
import { p as M, c as K } from "./index-CoM8QAjP.js";
import e from "prop-types";
import { s as Q } from "./getThemeProps-0-NQjaiI.js";
import { u as J, G as X } from "./Grid-C1WwTq0M.js";
const Y = L(), Z = Q("div", {
name: "MuiContainer",
slot: "Root",
overridesResolver: (s, n) => {
const {
ownerState: r
} = s;
return [n.root, n[`maxWidth${R(String(r.maxWidth))}`], r.fixed && n.fixed, r.disableGutters && n.disableGutters];
}
}), ee = (s) => J({
props: s,
name: "MuiContainer",
defaultTheme: Y
}), se = (s, n) => {
const r = (c) => D(n, c), {
classes: d,
fixed: u,
disableGutters: p,
maxWidth: t
} = s, o = {
root: ["root", t && `maxWidth${R(String(t))}`, u && "fixed", p && "disableGutters"]
};
return A(o, r, d);
};
function te(s = {}) {
const {
// This will allow adding custom styled fn (for example for custom sx style function)
createStyledComponent: n = Z,
useThemeProps: r = ee,
componentName: d = "MuiContainer"
} = s, u = n(({
theme: t,
ownerState: o
}) => ({
width: "100%",
marginLeft: "auto",
boxSizing: "border-box",
marginRight: "auto",
...!o.disableGutters && {
paddingLeft: t.spacing(2),
paddingRight: t.spacing(2),
// @ts-ignore module augmentation fails if custom breakpoints are used
[t.breakpoints.up("sm")]: {
paddingLeft: t.spacing(3),
paddingRight: t.spacing(3)
}
}
}), ({
theme: t,
ownerState: o
}) => o.fixed && Object.keys(t.breakpoints.values).reduce((c, i) => {
const m = i, a = t.breakpoints.values[m];
return a !== 0 && (c[t.breakpoints.up(m)] = {
maxWidth: `${a}${t.breakpoints.unit}`
}), c;
}, {}), ({
theme: t,
ownerState: o
}) => ({
// @ts-ignore module augmentation fails if custom breakpoints are used
...o.maxWidth === "xs" && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[t.breakpoints.up("xs")]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: Math.max(t.breakpoints.values.xs, 444)
}
},
...o.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
o.maxWidth !== "xs" && {
// @ts-ignore module augmentation fails if custom breakpoints are used
[t.breakpoints.up(o.maxWidth)]: {
// @ts-ignore module augmentation fails if custom breakpoints are used
maxWidth: `${t.breakpoints.values[o.maxWidth]}${t.breakpoints.unit}`
}
}
})), p = /* @__PURE__ */ P.forwardRef(function(o, c) {
const i = r(o), {
className: m,
component: a = "div",
disableGutters: g = !1,
fixed: x = !1,
maxWidth: f = "lg",
classes: C,
...b
} = i, h = {
...i,
component: a,
disableGutters: g,
fixed: x,
maxWidth: f
}, v = se(h, d);
return (
// @ts-ignore theme is injected by the styled util
/* @__PURE__ */ l(u, {
as: a,
ownerState: h,
className: K(v.root, m),
ref: c,
...b
})
);
});
return M.env.NODE_ENV !== "production" && (p.propTypes = {
children: e.node,
classes: e.object,
className: e.string,
component: e.elementType,
disableGutters: e.bool,
fixed: e.bool,
maxWidth: e.oneOfType([e.oneOf(["xs", "sm", "md", "lg", "xl", !1]), e.string]),
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
}), p;
}
const $ = te({
createStyledComponent: F("div", {
name: "MuiContainer",
slot: "Root",
overridesResolver: (s, n) => {
const {
ownerState: r
} = s;
return [n.root, n[`maxWidth${R(String(r.maxWidth))}`], r.fixed && n.fixed, r.disableGutters && n.disableGutters];
}
}),
useThemeProps: (s) => I({
props: s,
name: "MuiContainer"
})
});
M.env.NODE_ENV !== "production" && ($.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* @ignore
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: e.bool,
/**
* Set the max-width to match the min-width of the current breakpoint.
* This is useful if you'd prefer to design for a fixed set of sizes
* instead of trying to accommodate a fully fluid viewport.
* It's fluid by default.
* @default false
*/
fixed: e.bool,
/**
* Determine the max-width of the container.
* The container width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'lg'
*/
maxWidth: e.oneOfType([e.oneOf(["xs", "sm", "md", "lg", "xl", !1]), e.string]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
const oe = G(function({ model: s, selectedAsm: n, value: r, setValue: d, setOption: u }) {
const p = j.getSession(s), { assemblyManager: t, textSearchManager: o } = p, { rankSearchResults: c } = s, i = s.searchScope(n), m = t.get(n);
return l(V, { fetchResults: (a) => _({
queryString: a,
assembly: m,
textSearchManager: o,
rankSearchResults: c,
searchScope: i
}), model: s, assemblyName: n, value: r, minWidth: 270, onChange: (a) => {
d(a);
}, onSelect: (a) => {
u(a);
}, TextFieldProps: {
variant: "outlined",
helperText: "Enter sequence name, feature name, or location"
} });
}), ne = z()((s) => ({
importFormContainer: {
padding: s.spacing(2)
},
button: {
margin: s.spacing(2)
},
container: {
padding: s.spacing(4)
}
})), pe = G(function({ model: s }) {
var n;
const { classes: r } = ne(), d = j.getSession(s), { assemblyNames: u, assemblyManager: p } = d, { error: t } = s, [o, c] = N(u[0]), [i, m] = N(), a = p.get(o), g = u.length ? a == null ? void 0 : a.error : "No configured assemblies", x = g || t, [f, C] = N(""), b = a == null ? void 0 : a.regions, h = !!b, v = b && ((n = b[0]) === null || n === void 0 ? void 0 : n.refName) || "";
return w(() => {
C(v);
}, [v, o]), O("div", { className: r.container, children: [x ? l(k.ErrorMessage, { error: x }) : null, l($, { className: r.importFormContainer, children: l("form", { onSubmit: async (S) => {
var T;
if (S.preventDefault(), s.setError(void 0), f)
try {
(i == null ? void 0 : i.getDisplayString()) === f && i.hasLocation() ? await q({
option: i,
model: s,
assemblyName: o
}) : !((T = i == null ? void 0 : i.results) === null || T === void 0) && T.length ? s.setSearchResults(i.results, i.getLabel(), o) : a && await H({ input: f, assembly: a, model: s });
} catch (W) {
console.error(W), d.notify(`${W}`, "warning");
}
}, children: O(X, { container: !0, spacing: 1, justifyContent: "center", alignItems: "center", children: [l(y, { children: l(k.AssemblySelector, { onChange: (S) => {
c(S);
}, localStorageKey: "lgv", session: d, selected: o }) }), o ? g ? l(U, { style: { color: "red" } }) : h ? l(y, { children: l(oe, { value: f, setValue: C, selectedAsm: o, setOption: m, model: s }) }) : l(B, { size: 20, disableShrink: !0 }) : null, l(y, { children: l(E, { type: "submit", disabled: !f, className: r.button, variant: "contained", color: "primary", children: "Open" }) }), l(y, { children: l(E, { disabled: !f, className: r.button, onClick: () => {
s.setError(void 0), s.showAllRegionsInAssembly(o);
}, variant: "contained", color: "secondary", children: "Show all regions in assembly" }) })] }) }) })] });
});
export {
pe as default
};
//# sourceMappingURL=ImportForm-DtRosmVh.js.map