@jbrowse/plugin-wiggle
Version:
JBrowse 2 wiggle adapters, tracks, etc.
43 lines (42 loc) • 3.61 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SetColorDialog;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const DraggableDialog_1 = __importDefault(require("@jbrowse/core/ui/DraggableDialog"));
const util_1 = require("@jbrowse/core/util");
const material_1 = require("@mui/material");
const mui_1 = require("tss-react/mui");
const SourcesGrid_1 = __importDefault(require("./SourcesGrid"));
const useStyles = (0, mui_1.makeStyles)()({
content: {
minWidth: 800,
},
float: {
float: 'right',
},
});
function HelpfulTips() {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Helpful tips", (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: "You can select rows in the table with the checkboxes" }), (0, jsx_runtime_1.jsx)("li", { children: "Multi-select is enabled with shift-click and control-click" }), (0, jsx_runtime_1.jsx)("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), (0, jsx_runtime_1.jsx)("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), (0, jsx_runtime_1.jsx)("li", { children: "Changes are applied when you hit Submit" }), (0, jsx_runtime_1.jsx)("li", { children: "You can click and drag the dialog box to move it on the screen" }), (0, jsx_runtime_1.jsx)("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
}
function SetColorDialog({ model, handleClose, }) {
const { classes } = useStyles();
const { sources } = model;
const [currLayout, setCurrLayout] = (0, react_1.useState)(structuredClone(sources || []));
const [showTips, setShowTips] = (0, util_1.useLocalStorage)('multiwiggle-showTips', false);
return ((0, jsx_runtime_1.jsxs)(DraggableDialog_1.default, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-wiggle color/arrangement editor", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", className: classes.float, onClick: () => {
setShowTips(!showTips);
}, children: showTips ? 'Hide tips' : 'Show tips' }), (0, jsx_runtime_1.jsx)("br", {}), showTips ? (0, jsx_runtime_1.jsx)(HelpfulTips, {}) : null, (0, jsx_runtime_1.jsx)(SourcesGrid_1.default, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
model.clearLayout();
setCurrLayout(model.sources || []);
}, children: "Clear custom settings" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
handleClose();
setCurrLayout([...(model.sources || [])]);
}, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
model.setLayout(currLayout);
handleClose();
}, children: "Submit" })] })] }));
}