@jbrowse/plugin-config
Version:
JBrowse 2 config utilities
93 lines (92 loc) • 5.97 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 ui_1 = require("@jbrowse/core/ui");
const util_1 = require("@jbrowse/core/util");
const mst_reflection_1 = require("@jbrowse/core/util/mst-reflection");
const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
const material_1 = require("@mui/material");
const mobx_react_1 = require("mobx-react");
const mobx_state_tree_1 = require("mobx-state-tree");
const BooleanEditor_1 = __importDefault(require("./BooleanEditor"));
const CallbackEditor_1 = __importDefault(require("./CallbackEditor"));
const ColorEditor_1 = __importDefault(require("./ColorEditor"));
const ConfigurationTextField_1 = __importDefault(require("./ConfigurationTextField"));
const JsonEditor_1 = __importDefault(require("./JsonEditor"));
const NumberEditor_1 = __importDefault(require("./NumberEditor"));
const NumberMapEditor_1 = __importDefault(require("./NumberMapEditor"));
const StringArrayEditor_1 = __importDefault(require("./StringArrayEditor"));
const StringArrayMapEditor_1 = __importDefault(require("./StringArrayMapEditor"));
const useSlotEditorStyles_1 = require("./useSlotEditorStyles");
const StringEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
return ((0, jsx_runtime_1.jsx)(ConfigurationTextField_1.default, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
slot.set(evt.target.value);
} }));
});
const TextEditor = (0, mobx_react_1.observer)(function ({ slot, }) {
return ((0, jsx_runtime_1.jsx)(material_1.TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
slot.set(evt.target.value);
} }));
});
const SvgCheckbox = () => ((0, jsx_runtime_1.jsx)(material_1.SvgIcon, { children: (0, jsx_runtime_1.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 = (0, mobx_react_1.observer)(function ({ slot, }) {
const [val, setVal] = (0, react_1.useState)(slot.value);
(0, react_1.useEffect)(() => {
const num = Number.parseInt(val, 10);
if (!Number.isNaN(num)) {
slot.set(num);
}
}, [slot, val]);
return ((0, jsx_runtime_1.jsx)(ConfigurationTextField_1.default, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
setVal(evt.target.value);
} }));
});
const StringEnumEditor = (0, mobx_react_1.observer)(function ({ slot, slotSchema, }) {
const p = (0, mobx_state_tree_1.getPropertyMembers)((0, mst_reflection_1.getSubType)(slotSchema));
const choices = (0, mst_reflection_1.getUnionSubTypes)((0, mst_reflection_1.getUnionSubTypes)((0, mst_reflection_1.getSubType)(p.properties.value))[1]).map(t => t.value);
return ((0, jsx_runtime_1.jsx)(ConfigurationTextField_1.default, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
slot.set(evt.target.value);
}, children: choices.map(str => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: str, children: str }, str))) }));
});
const FileSelectorWrapper = (0, mobx_react_1.observer)(function ({ slot, }) {
var _a;
return ((0, jsx_runtime_1.jsx)(ui_1.FileSelector, { location: slot.value, setLocation: location => {
slot.set(location);
}, name: slot.name, description: slot.description, rootModel: (_a = (0, util_1.getEnv)(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.rootModel }));
});
const valueComponents = {
string: StringEditor,
text: TextEditor,
fileLocation: FileSelectorWrapper,
stringArray: StringArrayEditor_1.default,
stringArrayMap: StringArrayMapEditor_1.default,
numberMap: NumberMapEditor_1.default,
number: NumberEditor_1.default,
integer: IntegerEditor,
color: ColorEditor_1.default,
stringEnum: StringEnumEditor,
boolean: BooleanEditor_1.default,
frozen: JsonEditor_1.default,
configRelationships: JsonEditor_1.default,
};
const SlotEditor = (0, mobx_react_1.observer)(function ({ slot, slotSchema, }) {
const { classes } = (0, useSlotEditorStyles_1.useSlotEditorStyles)();
const { type } = slot;
let ValueComponent = slot.isCallback
? CallbackEditor_1.default
:
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 ((0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.paper, children: [(0, jsx_runtime_1.jsx)("div", { className: classes.paperContent, children: (0, jsx_runtime_1.jsx)(ValueComponent, { slot: slot, slotSchema: slotSchema }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.slotModeSwitch, children: slot.contextVariable.length ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, children: slot.isCallback ? (0, jsx_runtime_1.jsx)(SvgCheckbox, {}) : (0, jsx_runtime_1.jsx)(RadioButtonUnchecked_1.default, {}) })) : null })] }));
});
exports.default = SlotEditor;