@jbrowse/plugin-wiggle/esm/MultiLinearWiggleDisplay/components/SetColorDialog.js

JBrowse 2 wiggle adapters, tracks, etc.

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import DraggableDialog from '@jbrowse/core/ui/DraggableDialog';
import { useLocalStorage } from '@jbrowse/core/util';
import { Button, DialogActions, DialogContent } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import SourcesGrid from './SourcesGrid';
const useStyles = makeStyles()({
    content: {
        minWidth: 800,
    },
    float: {
        float: 'right',
    },
});
function HelpfulTips() {
    return (_jsxs(_Fragment, { children: ["Helpful tips", _jsxs("ul", { children: [_jsx("li", { children: "You can select rows in the table with the checkboxes" }), _jsx("li", { children: "Multi-select is enabled with shift-click and control-click" }), _jsx("li", { children: "The \"Move selected items up/down\" can re-arrange subtracks" }), _jsx("li", { children: "Sorting the data grid itself can also re-arrange subtracks" }), _jsx("li", { children: "Changes are applied when you hit Submit" }), _jsx("li", { children: "You can click and drag the dialog box to move it on the screen" }), _jsx("li", { children: "Columns in the table can be hidden using a vertical '...' menu on the right side of each column" })] })] }));
}
export default function SetColorDialog({ model, handleClose, }) {
    const { classes } = useStyles();
    const { sources } = model;
    const [currLayout, setCurrLayout] = useState(structuredClone(sources || []));
    const [showTips, setShowTips] = useLocalStorage('multiwiggle-showTips', false);
    return (_jsxs(DraggableDialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Multi-wiggle color/arrangement editor", children: [_jsxs(DialogContent, { className: classes.content, children: [_jsx(Button, { variant: "contained", className: classes.float, onClick: () => {
                            setShowTips(!showTips);
                        }, children: showTips ? 'Hide tips' : 'Show tips' }), _jsx("br", {}), showTips ? _jsx(HelpfulTips, {}) : null, _jsx(SourcesGrid, { rows: currLayout, onChange: setCurrLayout, showTips: showTips })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", type: "submit", color: "inherit", onClick: () => {
                            model.clearLayout();
                            setCurrLayout(model.sources || []);
                        }, children: "Clear custom settings" }), _jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
                            handleClose();
                            setCurrLayout([...(model.sources || [])]);
                        }, children: "Cancel" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
                            model.setLayout(currLayout);
                            handleClose();
                        }, children: "Submit" })] })] }));
}