taxonium-component
Version:
React component for exploring large phylogenetic trees in the browser
476 lines (475 loc) • 13.9 kB
JavaScript
import { jsx as t, jsxs as D } from "react/jsx-runtime";
import * as b from "react";
import { useState as de } from "react";
import { z as ue, A as me, G as be, aL as fe, P as M, bh as w, aI as ye, b5 as m, H as f, aC as i, I as he, bi as ge, bj as xe, J as ke, o as Se, m as Ce, D as Te, T as Pe, c as ve, d as De, B as W } from "./JBrowsePanel-uJIA-L6s.js";
import { d as O, c as F } from "./index-dFotuATn.js";
import e from "prop-types";
function we(r) {
return me("MuiDialog", r);
}
const k = ue("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), j = /* @__PURE__ */ b.createContext({});
O.process.env.NODE_ENV !== "production" && (j.displayName = "DialogContext");
const We = f(xe, {
name: "MuiDialog",
slot: "Backdrop",
overrides: (r, o) => o.backdrop
})({
// Improve scrollable dialog support.
zIndex: -1
}), Fe = (r) => {
const {
classes: o,
scroll: a,
maxWidth: l,
fullWidth: n,
fullScreen: p
} = r, c = {
root: ["root"],
container: ["container", `scroll${i(a)}`],
paper: ["paper", `paperScroll${i(a)}`, `paperWidth${i(String(l))}`, n && "paperFullWidth", p && "paperFullScreen"]
};
return he(c, we, o);
}, Me = f(ge, {
name: "MuiDialog",
slot: "Root"
})({
"@media print": {
// Use !important to override the Modal inline-style.
position: "absolute !important"
}
}), Oe = f("div", {
name: "MuiDialog",
slot: "Container",
overridesResolver: (r, o) => {
const {
ownerState: a
} = r;
return [o.container, o[`scroll${i(a.scroll)}`]];
}
})({
height: "100%",
"@media print": {
height: "auto"
},
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
variants: [{
props: {
scroll: "paper"
},
style: {
display: "flex",
justifyContent: "center",
alignItems: "center"
}
}, {
props: {
scroll: "body"
},
style: {
overflowY: "auto",
overflowX: "hidden",
textAlign: "center",
"&::after": {
content: '""',
display: "inline-block",
verticalAlign: "middle",
height: "100%",
width: "0"
}
}
}]
}), je = f(M, {
name: "MuiDialog",
slot: "Paper",
overridesResolver: (r, o) => {
const {
ownerState: a
} = r;
return [o.paper, o[`scrollPaper${i(a.scroll)}`], o[`paperWidth${i(String(a.maxWidth))}`], a.fullWidth && o.paperFullWidth, a.fullScreen && o.paperFullScreen];
}
})(ke(({
theme: r
}) => ({
margin: 32,
position: "relative",
overflowY: "auto",
"@media print": {
overflowY: "visible",
boxShadow: "none"
},
variants: [{
props: {
scroll: "paper"
},
style: {
display: "flex",
flexDirection: "column",
maxHeight: "calc(100% - 64px)"
}
}, {
props: {
scroll: "body"
},
style: {
display: "inline-block",
verticalAlign: "middle",
textAlign: "initial"
}
}, {
props: ({
ownerState: o
}) => !o.maxWidth,
style: {
maxWidth: "calc(100% - 64px)"
}
}, {
props: {
maxWidth: "xs"
},
style: {
maxWidth: r.breakpoints.unit === "px" ? Math.max(r.breakpoints.values.xs, 444) : `max(${r.breakpoints.values.xs}${r.breakpoints.unit}, 444px)`,
[`&.${k.paperScrollBody}`]: {
[r.breakpoints.down(Math.max(r.breakpoints.values.xs, 444) + 32 * 2)]: {
maxWidth: "calc(100% - 64px)"
}
}
}
}, ...Object.keys(r.breakpoints.values).filter((o) => o !== "xs").map((o) => ({
props: {
maxWidth: o
},
style: {
maxWidth: `${r.breakpoints.values[o]}${r.breakpoints.unit}`,
[`&.${k.paperScrollBody}`]: {
[r.breakpoints.down(r.breakpoints.values[o] + 32 * 2)]: {
maxWidth: "calc(100% - 64px)"
}
}
}
})), {
props: ({
ownerState: o
}) => o.fullWidth,
style: {
width: "calc(100% - 64px)"
}
}, {
props: ({
ownerState: o
}) => o.fullScreen,
style: {
margin: 0,
width: "100%",
maxWidth: "100%",
height: "100%",
maxHeight: "none",
borderRadius: 0,
[`&.${k.paperScrollBody}`]: {
margin: 0,
maxWidth: "100%"
}
}
}]
}))), B = /* @__PURE__ */ b.forwardRef(function(o, a) {
const l = be({
props: o,
name: "MuiDialog"
}), n = fe(), p = {
enter: n.transitions.duration.enteringScreen,
exit: n.transitions.duration.leavingScreen
}, {
"aria-describedby": c,
"aria-labelledby": N,
"aria-modal": $ = !0,
BackdropComponent: A,
BackdropProps: R,
children: E,
className: I,
disableEscapeKeyDown: S = !1,
fullScreen: q = !1,
fullWidth: L = !1,
maxWidth: U = "sm",
onClick: C,
onClose: y,
open: T,
PaperComponent: z = M,
PaperProps: P = {},
scroll: H = "paper",
slots: K = {},
slotProps: V = {},
TransitionComponent: X = w,
transitionDuration: v = p,
TransitionProps: Y,
..._
} = l, s = {
...l,
disableEscapeKeyDown: S,
fullScreen: q,
fullWidth: L,
maxWidth: U,
scroll: H
}, h = Fe(s), g = b.useRef(), G = (u) => {
g.current = u.target === u.currentTarget;
}, J = (u) => {
C && C(u), g.current && (g.current = null, y && y(u, "backdropClick"));
}, x = ye(N), Q = b.useMemo(() => ({
titleId: x
}), [x]), Z = {
transition: X,
...K
}, ee = {
transition: Y,
paper: P,
backdrop: R,
...V
}, d = {
slots: Z,
slotProps: ee
}, [oe, re] = m("root", {
elementType: Me,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s,
className: F(h.root, I),
ref: a
}), [ae, te] = m("backdrop", {
elementType: We,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s
}), [ne, le] = m("paper", {
elementType: je,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s,
className: F(h.paper, P.className)
}), [se, ie] = m("container", {
elementType: Oe,
externalForwardedProps: d,
ownerState: s,
className: h.container
}), [pe, ce] = m("transition", {
elementType: w,
externalForwardedProps: d,
ownerState: s,
additionalProps: {
appear: !0,
in: T,
timeout: v,
role: "presentation"
}
});
return /* @__PURE__ */ t(oe, {
closeAfterTransition: !0,
slots: {
backdrop: ae
},
slotProps: {
backdrop: {
transitionDuration: v,
as: A,
...te
}
},
disableEscapeKeyDown: S,
onClose: y,
open: T,
onClick: J,
...re,
..._,
children: /* @__PURE__ */ t(pe, {
...ce,
children: /* @__PURE__ */ t(se, {
onMouseDown: G,
...ie,
children: /* @__PURE__ */ t(ne, {
as: z,
elevation: 24,
role: "dialog",
"aria-describedby": c,
"aria-labelledby": x,
"aria-modal": $,
...le,
children: /* @__PURE__ */ t(j.Provider, {
value: Q,
children: E
})
})
})
})
});
});
O.process.env.NODE_ENV !== "production" && (B.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The id(s) of the element(s) that describe the dialog.
*/
"aria-describedby": e.string,
/**
* The id(s) of the element(s) that label the dialog.
*/
"aria-labelledby": e.string,
/**
* Informs assistive technologies that the element is modal.
* It's added on the element with role="dialog".
* @default true
*/
"aria-modal": e.oneOfType([e.oneOf(["false", "true"]), e.bool]),
/**
* A backdrop component. This prop enables custom backdrop rendering.
* @deprecated Use `slots.backdrop` instead. While this prop currently works, it will be removed in the next major version.
* Use the `slots.backdrop` prop to make your application ready for the next version of Material UI.
* @default styled(Backdrop, {
* name: 'MuiModal',
* slot: 'Backdrop',
* })({
* zIndex: -1,
* })
*/
BackdropComponent: e.elementType,
/**
* @ignore
*/
BackdropProps: e.object,
/**
* Dialog children, usually the included sub-components.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* If `true`, hitting escape will not fire the `onClose` callback.
* @default false
*/
disableEscapeKeyDown: e.bool,
/**
* If `true`, the dialog is full-screen.
* @default false
*/
fullScreen: e.bool,
/**
* If `true`, the dialog stretches to `maxWidth`.
*
* Notice that the dialog width grow is limited by the default margin.
* @default false
*/
fullWidth: e.bool,
/**
* Determine the max-width of the dialog.
* The dialog width grows with the size of the screen.
* Set to `false` to disable `maxWidth`.
* @default 'sm'
*/
maxWidth: e.oneOfType([e.oneOf(["xs", "sm", "md", "lg", "xl", !1]), e.string]),
/**
* @ignore
*/
onClick: e.func,
/**
* Callback fired when the component requests to be closed.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose: e.func,
/**
* If `true`, the component is shown.
*/
open: e.bool.isRequired,
/**
* The component used to render the body of the dialog.
* @default Paper
*/
PaperComponent: e.elementType,
/**
* Props applied to the [`Paper`](https://mui.com/material-ui/api/paper/) element.
* @default {}
* @deprecated Use `slotProps.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
PaperProps: e.object,
/**
* Determine the container for scrolling the dialog.
* @default 'paper'
*/
scroll: e.oneOf(["body", "paper"]),
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
backdrop: e.oneOfType([e.func, e.object]),
container: e.oneOfType([e.func, e.object]),
paper: e.oneOfType([e.func, e.object]),
root: e.oneOfType([e.func, e.object]),
transition: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
backdrop: e.elementType,
container: e.elementType,
paper: e.elementType,
root: e.elementType,
transition: e.elementType
}),
/**
* 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]),
/**
* The component used for the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @default Fade
* @deprecated Use `slots.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent: e.elementType,
/**
* The duration for the transition, in milliseconds.
* You may specify a single timeout for all transitions, or individually with an object.
* @default {
* enter: theme.transitions.duration.enteringScreen,
* exit: theme.transitions.duration.leavingScreen,
* }
*/
transitionDuration: e.oneOfType([e.number, e.shape({
appear: e.number,
enter: e.number,
exit: e.number
})]),
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated Use `slotProps.transition` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionProps: e.object
});
const Be = Ce()({
root: {
width: 500
}
}), Ie = Se(function({ model: r, handleClose: o }) {
const { minorAlleleFrequencyFilter: a = "" } = r, { classes: l } = Be(), [n, p] = de(`${a}`);
return t(B, { open: !0, onClose: o, title: "Set minor allele frequency (MAF)", children: D(Te, { className: l.root, children: [t(Pe, { children: "Set minor allele frequency cutoff track. This will filter out rare variants that might not contribute to meaningful large scale patterns" }), t(ve, { value: n, autoFocus: !0, placeholder: "Enter MAF", onChange: (c) => {
p(c.target.value);
} }), D(De, { children: [t(W, { variant: "contained", color: "primary", type: "submit", autoFocus: !0, onClick: () => {
Number.isNaN(+n) || r.setMafFilter(+n), o();
}, children: "Submit" }), t(W, { variant: "contained", color: "secondary", onClick: () => {
o();
}, children: "Cancel" })] })] }) });
});
export {
Ie as default
};
//# sourceMappingURL=MAFFilterDialog-RdyU1yEk.js.map