@jbrowse/plugin-config 1.7.9 → 2.0.0

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/esm/ConfigurationEditorWidget/components/CallbackEditor.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare function CallbackEditor({ slot, }: {
+    slot: {
+        set: (arg: string) => void;
+        description: string;
+        name: string;
+        value: string;
+        contextVariable: string;
+    };
+}): JSX.Element;
+declare const _default: typeof CallbackEditor;
+export default _default;

package/esm/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { useDebounce } from '@jbrowse/core/util';
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { FormControl, FormHelperText, InputLabel, Tooltip, IconButton, TextField, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import HelpIcon from '@mui/icons-material/Help';
+import { getEnv } from 'mobx-state-tree';
+import { observer } from 'mobx-react';
+// Optimize by using system default fonts:
+// https://css-tricks.com/snippets/css/font-stacks/
+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 = makeStyles()(theme => ({
+    callbackEditor: {
+        marginTop: '16px',
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        fontFamily,
+    },
+    textAreaFont: {
+        fontFamily,
+    },
+}));
+function CallbackEditor({ slot, }) {
+    const { classes } = useStyles();
+    const [code, setCode] = useState(slot.value);
+    const [error, setCodeError] = useState();
+    const debouncedCode = useDebounce(code, 400);
+    useEffect(() => {
+        var _a;
+        try {
+            const jexlDebouncedCode = debouncedCode.startsWith('jexl:')
+                ? debouncedCode
+                : `jexl:${debouncedCode}`;
+            if (jexlDebouncedCode === 'jexl:') {
+                throw new Error('Empty jexl expression is not valid');
+            }
+            stringToJexlExpression(jexlDebouncedCode, (_a = 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]);
+    // if default value is a callback, will have to remove jexl:
+    // do this last
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, null,
+            React.createElement(InputLabel, { shrink: true, htmlFor: "callback-editor" }, slot.name),
+            React.createElement(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 }, InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } }),
+            error ? (React.createElement(FormHelperText, { style: { color: '#f00' } }, `${error}`)) : null,
+            React.createElement(FormHelperText, null, slot.description)),
+        React.createElement(Tooltip, { title: React.createElement("div", null,
+                "Callbacks are written in Jexl format. Click to learn more.",
+                React.createElement("br", null),
+                " Names of available context items: ",
+                slot.contextVariable), arrow: true },
+            React.createElement(IconButton, { color: "primary", onClick: () => {
+                    const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
+                    if (newWindow) {
+                        newWindow.opener = null;
+                    }
+                } },
+                React.createElement(HelpIcon, null)))));
+}
+export default observer(CallbackEditor);
+//# sourceMappingURL=CallbackEditor.js.map

package/esm/ConfigurationEditorWidget/components/CallbackEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallbackEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/CallbackEditor.tsx"],"names":[],"mappings":"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"}

package/esm/ConfigurationEditorWidget/components/CodeEditor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function CodeEditor({ contents, setContents, }: {
+    contents: string;
+    setContents: (arg: string) => void;
+}): JSX.Element;

package/esm/ConfigurationEditorWidget/components/CodeEditor.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+import { TextField } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
+const fontSize = '12px';
+// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
+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 = makeStyles()(theme => ({
+    callbackEditor: {
+        fontFamily,
+        fontSize,
+        background: theme.palette.background.default,
+        overflowX: 'auto',
+        marginTop: '16px',
+        border: '1px solid rgba(0,0,0,0.42)',
+    },
+    textAreaFont: {
+        fontFamily,
+    },
+}));
+export default function CodeEditor({ contents, setContents, }) {
+    const { classes } = useStyles();
+    const [error, setCodeError] = useState();
+    const [val, setVal] = useState(contents);
+    useEffect(() => {
+        try {
+            JSON.parse(contents);
+            setCodeError(undefined);
+            setContents(val);
+        }
+        catch (e) {
+            console.error({ e });
+            setCodeError(e);
+        }
+    }, [val, contents, setContents]);
+    return (React.createElement(TextField, { className: classes.callbackEditor, value: contents, onChange: event => setVal(event.target.value), style: { background: error ? '#fdd' : undefined }, InputProps: {
+            classes: {
+                input: classes.textAreaFont,
+            },
+        } }));
+}
+//# sourceMappingURL=CodeEditor.js.map

package/esm/ConfigurationEditorWidget/components/CodeEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,6EAA6E;AAC7E,MAAM,QAAQ,GAAG,MAAM,CAAA;AACvB,2FAA2F;AAC3F,MAAM,UAAU,GACd,sNAAsN,CAAA;AAExN,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,cAAc,EAAE;QACd,UAAU;QACV,QAAQ;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,YAAY,EAAE;QACZ,UAAU;KACX;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,WAAW,GAIZ;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAW,CAAA;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YACpB,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YACpB,YAAY,CAAC,CAAC,CAAC,CAAA;SAChB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO,CAAC,YAAY;aAC5B;SACF,GACD,CACH,CAAA;AACH,CAAC"}

package/esm/ConfigurationEditorWidget/components/ColorEditor.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const ColorSlot: (props: {
+    value: string;
+    label?: string | undefined;
+    TextFieldProps?: {
+        helperText: string;
+        fullWidth: boolean;
+    } | undefined;
+    onChange: (arg: string) => void;
+}) => JSX.Element;
+declare function ColorEditorSlot(props: {
+    slot: {
+        name: string;
+        value: string;
+        description: string;
+        set: (arg: string) => void;
+    };
+}): JSX.Element;
+declare const _default: typeof ColorEditorSlot;
+export default _default;

package/esm/ConfigurationEditorWidget/components/ColorEditor.js

@@ -0,0 +1,37 @@
+import React, { lazy, useState } from 'react';
+import { observer } from 'mobx-react';
+import { TextField } from '@mui/material';
+const ColorPicker = lazy(() => import('./ColorPicker'));
+// this is needed because passing a entire color object into the react-color
+// for alpha, can't pass in an rgba string for example
+function serializeColor(color) {
+    if (color instanceof Object) {
+        const { r, g, b, a } = color;
+        return a === undefined ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${a})`;
+    }
+    return color;
+}
+export const ColorSlot = (props) => {
+    const { value = '#000', label = '', TextFieldProps = {}, onChange } = props;
+    const [displayed, setDisplayed] = useState(false);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, { value: value, label: label, InputProps: {
+                style: {
+                    color: value,
+                    borderRightWidth: '25px',
+                    borderRightStyle: 'solid',
+                    borderRightColor: value,
+                },
+            }, onClick: () => setDisplayed(!displayed), onChange: event => onChange(event.target.value), ...TextFieldProps }),
+        displayed ? (React.createElement(React.Suspense, { fallback: React.createElement("div", null) },
+            React.createElement(ColorPicker, { color: value, onChange: event => onChange(serializeColor(event.rgb)) }))) : null));
+};
+function ColorEditorSlot(props) {
+    const { slot } = props;
+    return (React.createElement(ColorSlot, { label: slot.name, value: slot.value, onChange: color => slot.set(color), TextFieldProps: {
+            helperText: slot.description,
+            fullWidth: true,
+        } }));
+}
+export default observer(ColorEditorSlot);
+//# sourceMappingURL=ColorEditor.js.map

package/esm/ConfigurationEditorWidget/components/ColorEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAGzC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAA;AAEvD,4EAA4E;AAC5E,sDAAsD;AACtD,SAAS,cAAc,CAAC,KAAY;IAClC,IAAI,KAAK,YAAY,MAAM,EAAE;QAC3B,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,KAAiB,CAAA;QACxC,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;KAC7E;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAQzB,EAAE,EAAE;IACH,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC3E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL;QACE,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,KAAK,EAAE,KAAK;oBACZ,gBAAgB,EAAE,MAAM;oBACxB,gBAAgB,EAAE,OAAO;oBACzB,gBAAgB,EAAE,KAAK;iBACxB;aACF,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,EACvC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAC3C,cAAc,GAClB;QACD,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,gCAAO;YAC/B,oBAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GACtD,CACa,CAClB,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAA;AACH,CAAC,CAAA;AAED,SAAS,eAAe,CAAC,KAOxB;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAClC,cAAc,EAAE;YACd,UAAU,EAAE,IAAI,CAAC,WAAW;YAC5B,SAAS,EAAE,IAAI;SAChB,GACD,CACH,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,eAAe,CAAC,CAAA"}

package/esm/ConfigurationEditorWidget/components/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Color, ColorResult } from 'react-color';
+export declare function ColorPicker(props: {
+    color: Color;
+    onChange: (color: ColorResult) => void;
+}): JSX.Element;
+export default ColorPicker;

package/esm/ConfigurationEditorWidget/components/ColorPicker.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { ChromePicker } from 'react-color';
+const useStyles = makeStyles()({
+    popover: {
+        position: 'absolute',
+        zIndex: 2,
+    },
+    cover: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+});
+export function ColorPicker(props) {
+    const { color, onChange } = props;
+    const { classes } = useStyles();
+    const [displayColorPicker, setDisplayColorPicker] = useState(true);
+    return (React.createElement("div", null, displayColorPicker ? (React.createElement("div", { className: classes.popover },
+        React.createElement("div", { role: "presentation", className: classes.cover, onClick: () => setDisplayColorPicker(false) }),
+        React.createElement(ChromePicker, { color: color, onChange: onChange }))) : null));
+}
+export default ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map

package/esm/ConfigurationEditorWidget/components/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAsB,MAAM,aAAa,CAAA;AAE9D,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACV;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,WAAW,CAAC,KAG3B;IACC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACjC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAElE,OAAO,CACL,iCACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAE,OAAO,CAAC,OAAO;QAC7B,6BACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAC3C;QACF,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+declare const ConfigurationEditor: ({ model }: {
+    model: {
+        target: AnyConfigurationModel;
+    };
+}) => JSX.Element;
+export default ConfigurationEditor;

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { readConfObject, getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, } from '@jbrowse/core/configuration';
+import { FormGroup, Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getMembers } from 'mobx-state-tree';
+import { singular } from 'pluralize';
+// icons
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+// locals
+import SlotEditor from './SlotEditor';
+import TypeSelector from './TypeSelector';
+const useStyles = makeStyles()(theme => ({
+    expandIcon: {
+        color: '#fff',
+    },
+    root: {
+        padding: theme.spacing(1, 3, 1, 1),
+    },
+    expansionPanelDetails: {
+        display: 'block',
+        padding: theme.spacing(1),
+    },
+    accordion: {
+        border: `1px solid ${theme.palette.text.primary}`,
+    },
+}));
+const Member = observer((props) => {
+    const { classes } = useStyles();
+    const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
+    let typeSelector;
+    if (isConfigurationSchemaType(slotSchema)) {
+        if (slot.length) {
+            return slot.map((subslot, slotIndex) => {
+                const key = `${singular(slotName)} ${slotIndex + 1}`;
+                return React.createElement(Member, { ...props, key: key, slot: subslot, slotName: key });
+            });
+        }
+        // if this is an explicitly typed schema, make a type-selecting dropdown
+        // that can be used to change its type
+        const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema);
+        if (typeNameChoices.length) {
+            typeSelector = (React.createElement(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+                    if (evt.target.value !== slot.type) {
+                        schema.setSubschema(slotName, { type: evt.target.value });
+                    }
+                } }));
+        }
+        return (React.createElement(Accordion, { defaultExpanded: true, className: classes.accordion },
+            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
+                React.createElement(Typography, null, [...path, slotName].join('🡒'))),
+            React.createElement(AccordionDetails, { className: classes.expansionPanelDetails },
+                typeSelector,
+                React.createElement(FormGroup, null,
+                    React.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
+    }
+    if (isConfigurationSlotType(slotSchema)) {
+        // this is a regular config slot
+        return React.createElement(SlotEditor, { key: slotName, slot: slot, slotSchema: slotSchema });
+    }
+    return null;
+});
+const Schema = observer(({ schema, path = [], }) => {
+    const properties = getMembers(schema).properties;
+    return (React.createElement(React.Fragment, null, Object.entries(properties).map(([slotName, slotSchema]) => (React.createElement(Member, { key: slotName, slotName: slotName, slotSchema: slotSchema, path: path, schema: schema })))));
+});
+const ConfigurationEditor = observer(({ model }) => {
+    const { classes } = useStyles();
+    // key forces a re-render, otherwise the same field can end up being used
+    // for different tracks since only the backing model changes for example
+    // see pr #804
+    const { target } = model;
+    const key = target && readConfObject(target, 'trackId');
+    const name = target && readConfObject(target, 'name');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
+            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
+                React.createElement(Typography, null, name !== null && name !== void 0 ? name : 'Configuration')),
+            React.createElement(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" }, !target ? 'no target set' : React.createElement(Schema, { schema: target }))),
+        React.createElement("div", { style: { height: 300 } })));
+});
+export default ConfigurationEditor;
+//# sourceMappingURL=ConfigurationEditor.js.map

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfigurationEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ConfigurationEditor.tsx"],"names":[],"mappings":"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"}

package/esm/ConfigurationEditorWidget/components/JsonEditor.d.ts

@@ -0,0 +1,9 @@
+declare function _default({ slot }: {
+    slot: any;
+}): JSX.Element;
+declare namespace _default {
+    namespace propTypes {
+        const slot: import("prop-types").Validator<any>;
+    }
+}
+export default _default;

package/esm/ConfigurationEditorWidget/components/JsonEditor.js

@@ -0,0 +1,39 @@
+import React, { lazy, useEffect, useState } from 'react';
+import { useDebounce } from '@jbrowse/core/util';
+import { FormControl, FormHelperText, InputLabel } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer, PropTypes } from 'mobx-react';
+const useStyles = makeStyles()({
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+});
+const CodeEditor = lazy(() => import('./CodeEditor'));
+function JsonEditor({ slot }) {
+    const { classes } = useStyles();
+    const [contents, setContents] = useState(JSON.stringify(slot.value, null, '  '));
+    const [error, setError] = useState();
+    const debouncedJson = useDebounce(contents, 400);
+    useEffect(() => {
+        try {
+            slot.set(JSON.parse(debouncedJson));
+            setError(undefined);
+        }
+        catch (e) {
+            setError(e.message);
+        }
+    }, [debouncedJson, slot]);
+    return (React.createElement(React.Fragment, null,
+        error ? React.createElement("p", { className: classes.error }, error) : null,
+        React.createElement(FormControl, { error: error },
+            React.createElement(InputLabel, { shrink: true, htmlFor: "callback-editor" }, slot.name),
+            React.createElement(React.Suspense, { fallback: React.createElement("div", null) },
+                React.createElement(CodeEditor, { contents: contents, setContents: setContents })),
+            React.createElement(FormHelperText, null, slot.description))));
+}
+JsonEditor.propTypes = {
+    slot: PropTypes.objectOrObservableObject.isRequired,
+};
+export default observer(JsonEditor);
+//# sourceMappingURL=JsonEditor.js.map

package/esm/ConfigurationEditorWidget/components/JsonEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/JsonEditor.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAA;AAChD,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAA;AAErD,SAAS,UAAU,CAAC,EAAE,IAAI,EAAE;IAC1B,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CACvC,CAAA;IACD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAE,CAAA;IACpC,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAA;IAEhD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI;YACF,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAA;YACnC,QAAQ,CAAC,SAAS,CAAC,CAAA;SACpB;QAAC,OAAO,CAAC,EAAE;YACV,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;SACpB;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL;QACG,KAAK,CAAC,CAAC,CAAC,2BAAG,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,KAAK,CAAK,CAAC,CAAC,CAAC,IAAI;QACxD,oBAAC,WAAW,IAAC,KAAK,EAAE,KAAK;YACvB,oBAAC,UAAU,IAAC,MAAM,QAAC,OAAO,EAAC,iBAAiB,IACzC,IAAI,CAAC,IAAI,CACC;YACb,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,gCAAO;gBAC/B,oBAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC7C;YACjB,oBAAC,cAAc,QAAE,IAAI,CAAC,WAAW,CAAkB,CACvC,CACb,CACJ,CAAA;AACH,CAAC;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,IAAI,EAAE,SAAS,CAAC,wBAAwB,CAAC,UAAU;CACpD,CAAA;AAED,eAAe,QAAQ,CAAC,UAAU,CAAC,CAAA"}

package/esm/ConfigurationEditorWidget/components/SlotEditor.d.ts

@@ -0,0 +1,16 @@
+export const useSlotEditorStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
+};
+export default SlotEditor;
+declare function SlotEditor({ slot, slotSchema }: {
+    slot: any;
+    slotSchema: any;
+}): JSX.Element;

package/esm/ConfigurationEditorWidget/components/SlotEditor.js

@@ -0,0 +1,176 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react';
+import { getPropertyMembers, getEnv } from 'mobx-state-tree';
+import { FileSelector, SanitizedHTML } from '@jbrowse/core/ui';
+import { getPropertyType, getSubType, getUnionSubTypes, } from '@jbrowse/core/util/mst-reflection';
+import { Card, CardContent, CardHeader, Checkbox, FormControl, FormControlLabel, FormHelperText, IconButton, InputAdornment, InputLabel, MenuItem, Paper, SvgIcon, TextField, } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+// locals
+import StringArrayEditor from './StringArrayEditor';
+import CallbackEditor from './CallbackEditor';
+import ColorEditor from './ColorEditor';
+import JsonEditor from './JsonEditor';
+// adds ability to have html in helperText. note that FormHelperTextProps is
+// div because the default is p which does not like div children
+const MyTextField = props => {
+    const { helperText } = props;
+    return (React.createElement(TextField, { ...props, helperText: React.createElement(SanitizedHTML, { html: helperText }), FormHelperTextProps: {
+            component: 'div',
+        }, fullWidth: true }));
+};
+const StringEditor = observer(({ slot }) => (React.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => slot.set(evt.target.value) })));
+const TextEditor = observer(({ slot }) => (React.createElement(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => slot.set(evt.target.value) })));
+// checked checkbox, looks like a styled (x)
+const SvgCheckbox = () => (React.createElement(SvgIcon, null,
+    React.createElement("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 useMapEditorStyles = makeStyles()(theme => ({
+    card: {
+        marginTop: theme.spacing(1),
+    },
+}));
+const StringArrayMapEditor = observer(({ slot }) => {
+    const { classes } = useMapEditorStyles();
+    const [value, setValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputLabel, null, slot.name),
+        Array.from(slot.value, ([key, val]) => (React.createElement(Card, { raised: true, key: key, className: classes.card },
+            React.createElement(CardHeader, { title: key, action: React.createElement(IconButton, { color: "secondary", onClick: () => slot.remove(key) },
+                    React.createElement(DeleteIcon, null)) }),
+            React.createElement(CardContent, null,
+                React.createElement(StringArrayEditor, { slot: {
+                        value: val,
+                        description: `Values associated with entry ${key}`,
+                        setAtIndex: (idx, strValue) => {
+                            slot.setAtKeyIndex(key, idx, strValue);
+                        },
+                        removeAtIndex: idx => {
+                            slot.removeAtKeyIndex(key, idx);
+                        },
+                        add: strValue => {
+                            slot.addToKey(key, strValue);
+                        },
+                    } }))))),
+        React.createElement(Card, { raised: true, className: classes.card },
+            React.createElement(CardHeader, { disableTypography: true, title: React.createElement(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => setValue(event.target.value), InputProps: {
+                        endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                            React.createElement(IconButton, { disabled: value === '', onClick: () => {
+                                    slot.add(value, []);
+                                    setValue('');
+                                }, color: "secondary" },
+                                React.createElement(AddIcon, null)))),
+                    } }) })),
+        React.createElement(FormHelperText, null, slot.description)));
+});
+const NumberMapEditor = observer(({ slot }) => {
+    const { classes } = useMapEditorStyles();
+    const [value, setValue] = useState('');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputLabel, null, slot.name),
+        Array.from(slot.value, ([key, val]) => (React.createElement(Card, { raised: true, key: key, className: classes.card },
+            React.createElement(CardHeader, { title: key, action: React.createElement(IconButton, { color: "secondary", onClick: () => slot.remove(key) },
+                    React.createElement(DeleteIcon, null)) }),
+            React.createElement(CardContent, null,
+                React.createElement(NumberEditor, { slot: {
+                        value: val,
+                        set: numValue => slot.add(key, numValue),
+                    } }))))),
+        React.createElement(Card, { raised: true, className: classes.card },
+            React.createElement(CardHeader, { disableTypography: true, title: React.createElement(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => setValue(event.target.value), InputProps: {
+                        endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                            React.createElement(IconButton, { disabled: value === '', onClick: () => {
+                                    slot.add(value, 0);
+                                    setValue('');
+                                }, color: "secondary" },
+                                React.createElement(AddIcon, null)))),
+                    } }) })),
+        React.createElement(FormHelperText, null, slot.description)));
+});
+const NumberEditor = observer(({ slot }) => {
+    const [val, setVal] = useState(slot.value);
+    useEffect(() => {
+        const num = parseFloat(val, 10);
+        if (!Number.isNaN(num)) {
+            slot.set(num);
+        }
+        else {
+            slot.reset();
+        }
+    }, [slot, val]);
+    return (React.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => setVal(evt.target.value) }));
+});
+const IntegerEditor = observer(({ slot }) => {
+    const [val, setVal] = useState(slot.value);
+    useEffect(() => {
+        const num = parseInt(val, 10);
+        if (!Number.isNaN(num)) {
+            slot.set(num);
+        }
+    }, [slot, val]);
+    return (React.createElement(MyTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => setVal(evt.target.value) }));
+});
+const BooleanEditor = observer(({ slot }) => (React.createElement(FormControl, null,
+    React.createElement(FormControlLabel, { label: slot.name, control: React.createElement(Checkbox, { checked: slot.value, onChange: evt => slot.set(evt.target.checked) }) }),
+    React.createElement(FormHelperText, null, slot.description))));
+const StringEnumEditor = observer(({ slot, slotSchema }) => {
+    const p = getPropertyMembers(getSubType(slotSchema));
+    const choices = getUnionSubTypes(getUnionSubTypes(getSubType(getPropertyType(p, 'value')))[1]).map(t => t.value);
+    return (React.createElement(MyTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => slot.set(evt.target.value) }, choices.map(str => (React.createElement(MenuItem, { key: str, value: str }, str)))));
+});
+const FileSelectorWrapper = observer(({ slot }) => {
+    var _a;
+    return (React.createElement(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,
+};
+export const useSlotEditorStyles = makeStyles()(theme => ({
+    paper: {
+        display: 'flex',
+        marginBottom: theme.spacing(2),
+        position: 'relative',
+    },
+    paperContent: {
+        width: '100%',
+    },
+    slotModeSwitch: {
+        width: 24,
+        background: theme.palette.secondary.light,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+}));
+const SlotEditor = observer(({ 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 (React.createElement(Paper, { className: classes.paper },
+        React.createElement("div", { className: classes.paperContent },
+            React.createElement(ValueComponent, { slot: slot, slotSchema: slotSchema })),
+        React.createElement("div", { className: classes.slotModeSwitch }, slot.contextVariable.length ? (React.createElement(IconButton, { className: classes.slotModeIcon, onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, color: "secondary" }, !slot.isCallback ? React.createElement(RadioButtonUncheckedIcon, null) : React.createElement(SvgCheckbox, null))) : null)));
+});
+export default SlotEditor;
+//# sourceMappingURL=SlotEditor.js.map