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

JBrowse 2 wiggle adapters, tracks, etc.

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Dialog } from '@jbrowse/core/ui';
import { ColorPicker } from '@jbrowse/core/ui/ColorPicker';
import { Button, DialogActions, DialogContent, FormControlLabel, Radio, Typography, } from '@mui/material';
import { observer } from 'mobx-react';
const SetColorDialog = observer(function SetColorDialog({ model, handleClose, }) {
    const [posneg, setPosNeg] = useState(false);
    return (_jsxs(Dialog, { open: true, onClose: handleClose, title: "Set color", children: [_jsxs(DialogContent, { children: [_jsx(Typography, { children: "Select either an overall color, or the positive/negative colors. Note that density renderers only work properly with positive/negative colors" }), _jsx(FormControlLabel, { checked: !posneg, onClick: () => {
                            setPosNeg(false);
                        }, control: _jsx(Radio, {}), label: "Overall color" }), _jsx(FormControlLabel, { checked: posneg, onClick: () => {
                            setPosNeg(true);
                        }, control: _jsx(Radio, {}), label: "Positive/negative color" }), posneg ? (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "Positive color" }), _jsx(ColorPicker, { color: model.posColor || 'black', onChange: event => {
                                    model.setPosColor(event);
                                    model.setColor(undefined);
                                } }), _jsx(Typography, { children: "Negative color" }), _jsx(ColorPicker, { color: model.negColor || 'black', onChange: event => {
                                    model.setNegColor(event);
                                    model.setColor(undefined);
                                } })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "Overall color" }), _jsx(ColorPicker, { color: model.color || 'black', onChange: event => {
                                    model.setColor(event);
                                } })] }))] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
                            model.setPosColor(undefined);
                            model.setNegColor(undefined);
                            model.setColor(undefined);
                        }, color: "secondary", variant: "contained", children: "Restore default" }), _jsx(Button, { variant: "contained", color: "primary", type: "submit", onClick: () => {
                            handleClose();
                        }, children: "Submit" })] })] }));
});
export default SetColorDialog;