@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
88 lines (87 loc) • 4.84 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { FileSelector } from '@jbrowse/core/ui';
import { getEnv } from '@jbrowse/core/util';
import { getSubType, getUnionSubTypes } from '@jbrowse/core/util/mst-reflection';
import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material';
import { observer } from 'mobx-react';
import { getPropertyMembers } from 'mobx-state-tree';
import BooleanEditor from './BooleanEditor';
import CallbackEditor from './CallbackEditor';
import ColorEditor from './ColorEditor';
import ConfigurationTextField from './ConfigurationTextField';
import JsonEditor from './JsonEditor';
import NumberEditor from './NumberEditor';
import NumberMapEditor from './NumberMapEditor';
import StringArrayEditor from './StringArrayEditor';
import StringArrayMapEditor from './StringArrayMapEditor';
import { useSlotEditorStyles } from './useSlotEditorStyles';
const StringEditor = observer(function ({ slot, }) {
return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
slot.set(evt.target.value);
} }));
});
const TextEditor = observer(function ({ slot, }) {
return (_jsx(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
slot.set(evt.target.value);
} }));
});
const SvgCheckbox = () => (_jsx(SvgIcon, { children: _jsx("path", { d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" }) }));
const IntegerEditor = observer(function ({ slot, }) {
const [val, setVal] = useState(slot.value);
useEffect(() => {
const num = Number.parseInt(val, 10);
if (!Number.isNaN(num)) {
slot.set(num);
}
}, [slot, val]);
return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
setVal(evt.target.value);
} }));
});
const StringEnumEditor = observer(function ({ slot, slotSchema, }) {
const p = getPropertyMembers(getSubType(slotSchema));
const choices = getUnionSubTypes(getUnionSubTypes(getSubType(p.properties.value))[1]).map(t => t.value);
return (_jsx(ConfigurationTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
slot.set(evt.target.value);
}, children: choices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
});
const FileSelectorWrapper = observer(function ({ slot, }) {
var _a;
return (_jsx(FileSelector, { location: slot.value, setLocation: location => {
slot.set(location);
}, name: slot.name, description: slot.description, rootModel: (_a = getEnv(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.rootModel }));
});
const valueComponents = {
string: StringEditor,
text: TextEditor,
fileLocation: FileSelectorWrapper,
stringArray: StringArrayEditor,
stringArrayMap: StringArrayMapEditor,
numberMap: NumberMapEditor,
number: NumberEditor,
integer: IntegerEditor,
color: ColorEditor,
stringEnum: StringEnumEditor,
boolean: BooleanEditor,
frozen: JsonEditor,
configRelationships: JsonEditor,
};
const SlotEditor = observer(function ({ slot, slotSchema, }) {
const { classes } = useSlotEditorStyles();
const { type } = slot;
let ValueComponent = slot.isCallback
? CallbackEditor
:
valueComponents[type];
if (!ValueComponent) {
console.warn(`no slot editor defined for ${type}, editing as string`);
ValueComponent = StringEditor;
}
if (!(type in valueComponents)) {
console.warn(`SlotEditor needs to implement ${type}`);
}
return (_jsxs(Paper, { className: classes.paper, children: [_jsx("div", { className: classes.paperContent, children: _jsx(ValueComponent, { slot: slot, slotSchema: slotSchema }) }), _jsx("div", { className: classes.slotModeSwitch, children: slot.contextVariable.length ? (_jsx(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, children: slot.isCallback ? _jsx(SvgCheckbox, {}) : _jsx(RadioButtonUncheckedIcon, {}) })) : null })] }));
});
export default SlotEditor;