@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
73 lines (72 loc) • 4.8 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 configuration_1 = require("@jbrowse/core/configuration");
const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mobx_state_tree_1 = require("mobx-state-tree");
const pluralize_1 = require("pluralize");
const mui_1 = require("tss-react/mui");
const SlotEditor_1 = __importDefault(require("./SlotEditor"));
const TypeSelector_1 = __importDefault(require("./TypeSelector"));
const useStyles = (0, mui_1.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 = (0, mobx_react_1.observer)(function (props) {
const { classes } = useStyles();
const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
if ((0, configuration_1.isConfigurationSchemaType)(slotSchema)) {
if (slot.length) {
return slot.map((subslot, slotIndex) => {
const key = subslot.type
? `${(0, pluralize_1.singular)(slotName)} ${subslot.type}`
: `${(0, pluralize_1.singular)(slotName)} ${slotIndex + 1}`;
return (0, jsx_runtime_1.jsx)(Member, { ...props, slot: subslot, slotName: key }, key);
});
}
const typeNameChoices = (0, configuration_1.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
return ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: true, className: classes.accordion, children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, { className: classes.icon }), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: [...path, slotName].join('➔') }) }), (0, jsx_runtime_1.jsxs)(material_1.AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? ((0, jsx_runtime_1.jsx)(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
if (evt.target.value !== slot.type) {
schema.setSubschema(slotName, {
type: evt.target.value,
});
}
} })) : null, (0, jsx_runtime_1.jsx)(material_1.FormGroup, { className: classes.noOverflow, children: (0, jsx_runtime_1.jsx)(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
}
else if ((0, configuration_1.isConfigurationSlotType)(slotSchema)) {
return (0, jsx_runtime_1.jsx)(SlotEditor_1.default, { slot: slot, slotSchema: slotSchema }, slotName);
}
else {
return null;
}
});
const Schema = (0, mobx_react_1.observer)(function ({ schema, path = [], }) {
const properties = (0, mobx_state_tree_1.getMembers)(schema).properties;
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Object.entries(properties).map(([slotName, slotSchema]) => ((0, jsx_runtime_1.jsx)(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }, slotName))) }));
});
const ConfigurationEditor = (0, mobx_react_1.observer)(function ({ model, }) {
const { classes } = useStyles();
const { target } = model;
const key = (0, configuration_1.readConfObject)(target, 'trackId');
const name = (0, configuration_1.readConfObject)(target, 'name');
return ((0, jsx_runtime_1.jsxs)(material_1.Accordion, { defaultExpanded: true, className: classes.accordion, children: [(0, jsx_runtime_1.jsx)(material_1.AccordionSummary, { expandIcon: (0, jsx_runtime_1.jsx)(ExpandMore_1.default, { className: classes.icon }), children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: name !== null && name !== void 0 ? name : 'Configuration' }) }) }), (0, jsx_runtime_1.jsx)(material_1.AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: (0, jsx_runtime_1.jsx)(Schema, { schema: target }) })] }, key));
});
exports.default = ConfigurationEditor;