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, E as be, aB as fe, P as M, b5 as w, ax as ye, aU as m, G as f, aQ as i, H as he, b6 as ge, b7 as xe, I as ke, o as Se, m as Te, D as Ce, T as Pe, c as ve, d as De, B as W } from "./JBrowsePanel-BNE3gNW1.js";
import { p as B, c as F } from "./index-CoM8QAjP.js";
import e from "prop-types";
function we(a) {
return me("MuiDialog", a);
}
const k = ue("MuiDialog", ["root", "scrollPaper", "scrollBody", "container", "paper", "paperScrollPaper", "paperScrollBody", "paperWidthFalse", "paperWidthXs", "paperWidthSm", "paperWidthMd", "paperWidthLg", "paperWidthXl", "paperFullWidth", "paperFullScreen"]), O = /* @__PURE__ */ b.createContext({});
B.env.NODE_ENV !== "production" && (O.displayName = "DialogContext");
const We = f(xe, {
name: "MuiDialog",
slot: "Backdrop",
overrides: (a, o) => o.backdrop
})({
// Improve scrollable dialog support.
zIndex: -1
}), Fe = (a) => {
const {
classes: o,
scroll: r,
maxWidth: l,
fullWidth: n,
fullScreen: p
} = a, c = {
root: ["root"],
container: ["container", `scroll${i(r)}`],
paper: ["paper", `paperScroll${i(r)}`, `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"
}
}), Be = f("div", {
name: "MuiDialog",
slot: "Container",
overridesResolver: (a, o) => {
const {
ownerState: r
} = a;
return [o.container, o[`scroll${i(r.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"
}
}
}]
}), Oe = f(M, {
name: "MuiDialog",
slot: "Paper",
overridesResolver: (a, o) => {
const {
ownerState: r
} = a;
return [o.paper, o[`scrollPaper${i(r.scroll)}`], o[`paperWidth${i(String(r.maxWidth))}`], r.fullWidth && o.paperFullWidth, r.fullScreen && o.paperFullScreen];
}
})(ke(({
theme: a
}) => ({
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: a.breakpoints.unit === "px" ? Math.max(a.breakpoints.values.xs, 444) : `max(${a.breakpoints.values.xs}${a.breakpoints.unit}, 444px)`,
[`&.${k.paperScrollBody}`]: {
[a.breakpoints.down(Math.max(a.breakpoints.values.xs, 444) + 64)]: {
maxWidth: "calc(100% - 64px)"
}
}
}
}, ...Object.keys(a.breakpoints.values).filter((o) => o !== "xs").map((o) => ({
props: {
maxWidth: o
},
style: {
maxWidth: `${a.breakpoints.values[o]}${a.breakpoints.unit}`,
[`&.${k.paperScrollBody}`]: {
[a.breakpoints.down(a.breakpoints.values[o] + 64)]: {
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%"
}
}
}]
}))), j = /* @__PURE__ */ b.forwardRef(function(o, r) {
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: U = !1,
fullWidth: q = !1,
maxWidth: z = "sm",
onClick: T,
onClose: y,
open: C,
PaperComponent: H = M,
PaperProps: P = {},
scroll: K = "paper",
slots: L = {},
slotProps: V = {},
TransitionComponent: X = w,
transitionDuration: v = p,
TransitionProps: Y,
..._
} = l, s = {
...l,
disableEscapeKeyDown: S,
fullScreen: U,
fullWidth: q,
maxWidth: z,
scroll: K
}, h = Fe(s), g = b.useRef(), G = (u) => {
g.current = u.target === u.currentTarget;
}, Q = (u) => {
T && T(u), g.current && (g.current = null, y && y(u, "backdropClick"));
}, x = ye(N), J = b.useMemo(() => ({
titleId: x
}), [x]), Z = {
transition: X,
...L
}, ee = {
transition: Y,
paper: P,
backdrop: R,
...V
}, d = {
slots: Z,
slotProps: ee
}, [oe, ae] = m("root", {
elementType: Me,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s,
className: F(h.root, I),
ref: r
}), [re, te] = m("backdrop", {
elementType: We,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s
}), [ne, le] = m("paper", {
elementType: Oe,
shouldForwardComponentProp: !0,
externalForwardedProps: d,
ownerState: s,
className: F(h.paper, P.className)
}), [se, ie] = m("container", {
elementType: Be,
externalForwardedProps: d,
ownerState: s,
className: h.container
}), [pe, ce] = m("transition", {
elementType: w,
externalForwardedProps: d,
ownerState: s,
additionalProps: {
appear: !0,
in: C,
timeout: v,
role: "presentation"
}
});
return /* @__PURE__ */ t(oe, {
closeAfterTransition: !0,
slots: {
backdrop: re
},
slotProps: {
backdrop: {
transitionDuration: v,
as: A,
...te
}
},
disableEscapeKeyDown: S,
onClose: y,
open: C,
onClick: Q,
...ae,
..._,
children: /* @__PURE__ */ t(pe, {
...ce,
children: /* @__PURE__ */ t(se, {
onMouseDown: G,
...ie,
children: /* @__PURE__ */ t(ne, {
as: H,
elevation: 24,
role: "dialog",
"aria-describedby": c,
"aria-labelledby": x,
"aria-modal": $,
...le,
children: /* @__PURE__ */ t(O.Provider, {
value: J,
children: E
})
})
})
})
});
});
B.env.NODE_ENV !== "production" && (j.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 je = Te()({
root: {
width: 500
}
}), Ie = Se(function({ model: a, handleClose: o }) {
const { minorAlleleFrequencyFilter: r = "" } = a, { classes: l } = je(), [n, p] = de(`${r}`);
return t(j, { open: !0, onClose: o, title: "Set minor allele frequency (MAF)", children: D(Ce, { 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) || a.setMafFilter(+n), o();
}, children: "Submit" }), t(W, { variant: "contained", color: "secondary", onClick: () => {
o();
}, children: "Cancel" })] })] }) });
});
export {
Ie as default
};
//# sourceMappingURL=MAFFilterDialog-mQMMwEKk.js.map