@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
68 lines (67 loc) • 3.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, readConfObject, } from '@jbrowse/core/configuration';
import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { Accordion, AccordionDetails, AccordionSummary, FormGroup, Typography, } from '@mui/material';
import { observer } from 'mobx-react';
import { getMembers } from 'mobx-state-tree';
import { singular } from 'pluralize';
import { makeStyles } from 'tss-react/mui';
import SlotEditor from './SlotEditor';
import TypeSelector from './TypeSelector';
const useStyles = makeStyles()(theme => ({
icon: {
color: theme.palette.tertiary.contrastText || '#fff',
},
expansionPanelDetails: {
display: 'block',
padding: theme.spacing(1),
},
accordion: {
border: `1px solid ${theme.palette.text.primary}`,
},
noOverflow: {
width: '100%',
overflowX: 'auto',
},
}));
const Member = observer(function (props) {
const { classes } = useStyles();
const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
if (isConfigurationSchemaType(slotSchema)) {
if (slot.length) {
return slot.map((subslot, slotIndex) => {
const key = subslot.type
? `${singular(slotName)} ${subslot.type}`
: `${singular(slotName)} ${slotIndex + 1}`;
return _jsx(Member, { ...props, slot: subslot, slotName: key }, key);
});
}
const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema);
return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
if (evt.target.value !== slot.type) {
schema.setSubschema(slotName, {
type: evt.target.value,
});
}
} })) : null, _jsx(FormGroup, { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
}
else if (isConfigurationSlotType(slotSchema)) {
return _jsx(SlotEditor, { slot: slot, slotSchema: slotSchema }, slotName);
}
else {
return null;
}
});
const Schema = observer(function ({ schema, path = [], }) {
const properties = getMembers(schema).properties;
return (_jsx(_Fragment, { children: Object.entries(properties).map(([slotName, slotSchema]) => (_jsx(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }, slotName))) }));
});
const ConfigurationEditor = observer(function ({ model, }) {
const { classes } = useStyles();
const { target } = model;
const key = readConfObject(target, 'trackId');
const name = readConfObject(target, 'name');
return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: _jsx(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }) }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: _jsx(Schema, { schema: target }) })] }, key));
});
export default ConfigurationEditor;