@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
69 lines (68 loc) • 3.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useTransition } from 'react';
import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
import { makeStyles } from '@jbrowse/core/util/tss-react';
import { getEnv } from '@jbrowse/mobx-state-tree';
import HelpIcon from '@mui/icons-material/Help';
import { IconButton, TextField, Tooltip } from '@mui/material';
import { observer } from 'mobx-react';
const fontFamily = 'Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace';
const useStyles = makeStyles()(theme => ({
callbackEditor: {
marginTop: '16px',
borderBottom: `1px solid ${theme.palette.divider}`,
width: '100%',
fontFamily,
},
textAreaFont: {
fontFamily,
},
callbackContainer: {
width: '100%',
overflowX: 'auto',
},
error: {
color: 'red',
fontSize: '0.8em',
},
}));
function validateAndSetCode(code, slot, setCodeError) {
try {
const jexlCode = code.startsWith('jexl:') ? code : `jexl:${code}`;
if (jexlCode === 'jexl:') {
throw new Error('Empty jexl expression is not valid');
}
stringToJexlExpression(jexlCode, getEnv(slot).pluginManager?.jexl);
slot.set(jexlCode);
setCodeError(undefined);
}
catch (e) {
console.error({ e });
setCodeError(e);
}
}
const CallbackEditor = observer(function CallbackEditor({ slot, }) {
const { classes } = useStyles();
const [code, setCode] = useState(slot.value);
const [error, setCodeError] = useState();
const [, startTransition] = useTransition();
return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
const value = event.target.value;
setCode(value);
startTransition(() => {
validateAndSetCode(value, slot, setCodeError);
});
}, style: { background: error ? '#fdd' : undefined }, slotProps: {
input: {
classes: {
input: classes.textAreaFont,
},
},
} }), _jsx("p", { children: slot.description }), _jsx(Tooltip, { title: _jsxs("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", _jsx("br", {}), " Names of available context items: ", slot.contextVariable] }), arrow: true, children: _jsx(IconButton, { color: "primary", onClick: () => {
const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
if (newWindow) {
newWindow.opener = null;
}
}, children: _jsx(HelpIcon, {}) }) })] })] }));
});
export default CallbackEditor;