@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
74 lines (73 loc) • 4.01 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const util_1 = require("@jbrowse/core/util");
const jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
const Help_1 = __importDefault(require("@mui/icons-material/Help"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mobx_state_tree_1 = require("mobx-state-tree");
const mui_1 = require("tss-react/mui");
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 = (0, mui_1.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',
},
}));
const CallbackEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
const { classes } = useStyles();
const [code, setCode] = (0, react_1.useState)(slot.value);
const [error, setCodeError] = (0, react_1.useState)();
const debouncedCode = (0, util_1.useDebounce)(code, 400);
(0, react_1.useEffect)(() => {
var _a;
try {
const jexlDebouncedCode = debouncedCode.startsWith('jexl:')
? debouncedCode
: `jexl:${debouncedCode}`;
if (jexlDebouncedCode === 'jexl:') {
throw new Error('Empty jexl expression is not valid');
}
(0, jexlStrings_1.stringToJexlExpression)(jexlDebouncedCode, (_a = (0, mobx_state_tree_1.getEnv)(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.jexl);
slot.set(jexlDebouncedCode);
setCodeError(undefined);
}
catch (e) {
console.error({ e });
setCodeError(e);
}
}, [debouncedCode, slot]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [error ? (0, jsx_runtime_1.jsx)("p", { className: classes.error, children: `${error}` }) : null, (0, jsx_runtime_1.jsxs)("div", { className: classes.callbackContainer, children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
setCode(event.target.value);
}, style: { background: error ? '#fdd' : undefined }, slotProps: {
input: {
classes: {
input: classes.textAreaFont,
},
},
} }), (0, jsx_runtime_1.jsx)("p", { children: slot.description }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: (0, jsx_runtime_1.jsxs)("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", (0, jsx_runtime_1.jsx)("br", {}), " Names of available context items: ", slot.contextVariable] }), arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { color: "primary", onClick: () => {
const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
if (newWindow) {
newWindow.opener = null;
}
}, children: (0, jsx_runtime_1.jsx)(Help_1.default, {}) }) })] })] }));
});
exports.default = CallbackEditor;