@jbrowse/plugin-config 2.0.0 → 2.1.2

package/dist/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -22,59 +22,52 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var util_1 = require("@jbrowse/core/util");
-var jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
-var material_1 = require("@mui/material");
-var mui_1 = require("tss-react/mui");
-var Help_1 = __importDefault(require("@mui/icons-material/Help"));
-var mobx_state_tree_1 = require("mobx-state-tree");
-var mobx_react_1 = require("mobx-react");
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
+const jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+// icons
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
 // Optimize by using system default fonts:
 // https://css-tricks.com/snippets/css/font-stacks/
-var 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';
-var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+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 = (0, mui_1.makeStyles)()(theme => ({
     callbackEditor: {
         marginTop: '16px',
-        borderBottom: "1px solid ".concat(theme.palette.divider),
-        fontFamily: fontFamily,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        width: '100%',
+        fontFamily,
     },
     textAreaFont: {
-        fontFamily: fontFamily,
+        fontFamily,
+    },
+    callbackContainer: {
+        width: '100%',
+        overflowX: 'auto',
     },
-}); });
-function CallbackEditor(_a) {
-    var slot = _a.slot;
-    var classes = useStyles().classes;
-    var _b = __read((0, react_1.useState)(slot.value), 2), code = _b[0], setCode = _b[1];
-    var _c = __read((0, react_1.useState)(), 2), error = _c[0], setCodeError = _c[1];
-    var debouncedCode = (0, util_1.useDebounce)(code, 400);
-    (0, react_1.useEffect)(function () {
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+}));
+function CallbackEditor({ slot, }) {
+    const { classes } = useStyles();
+    const [code, setCode] = (0, react_1.useState)(slot.value);
+    const [error, setCodeError] = (0, react_1.useState)();
+    const debouncedCode = (0, util_1.useDebounce)(code, 400);
+    (0, react_1.useEffect)(() => {
         var _a;
         try {
-            var jexlDebouncedCode = debouncedCode.startsWith('jexl:')
+            const jexlDebouncedCode = debouncedCode.startsWith('jexl:')
                 ? debouncedCode
-                : "jexl:".concat(debouncedCode);
+                : `jexl:${debouncedCode}`;
             if (jexlDebouncedCode === 'jexl:') {
                 throw new Error('Empty jexl expression is not valid');
             }
@@ -83,34 +76,33 @@ function CallbackEditor(_a) {
             setCodeError(undefined);
         }
         catch (e) {
-            console.error({ e: e });
+            console.error({ e });
             setCodeError(e);
         }
     }, [debouncedCode, slot]);
     // if default value is a callback, will have to remove jexl:
     // do this last
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.FormControl, null,
-            react_1.default.createElement(material_1.InputLabel, { shrink: true, htmlFor: "callback-editor" }, slot.name),
-            react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: function (event) { return setCode(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
+        error ? react_1.default.createElement("p", { className: classes.error }, `${error}`) : null,
+        react_1.default.createElement("div", { className: classes.callbackContainer },
+            react_1.default.createElement(material_1.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_1.default.createElement(material_1.FormHelperText, { style: { color: '#f00' } }, "".concat(error))) : null,
-            react_1.default.createElement(material_1.FormHelperText, null, slot.description)),
-        react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement("div", null,
-                "Callbacks are written in Jexl format. Click to learn more.",
-                react_1.default.createElement("br", null),
-                " Names of available context items: ",
-                slot.contextVariable), arrow: true },
-            react_1.default.createElement(material_1.IconButton, { color: "primary", onClick: function () {
-                    var newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
-                    if (newWindow) {
-                        newWindow.opener = null;
-                    }
-                } },
-                react_1.default.createElement(Help_1.default, null)))));
+            react_1.default.createElement("p", null, slot.description),
+            react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement("div", null,
+                    "Callbacks are written in Jexl format. Click to learn more.",
+                    react_1.default.createElement("br", null),
+                    " Names of available context items: ",
+                    slot.contextVariable), arrow: true },
+                react_1.default.createElement(material_1.IconButton, { color: "primary", onClick: () => {
+                        const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
+                        if (newWindow) {
+                            newWindow.opener = null;
+                        }
+                    } },
+                    react_1.default.createElement(Help_1.default, null))))));
 }
 exports.default = (0, mobx_react_1.observer)(CallbackEditor);
 //# sourceMappingURL=CallbackEditor.js.map

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

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

package/dist/ConfigurationEditorWidget/components/ColorEditor.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -33,56 +22,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorSlot = void 0;
-var react_1 = __importStar(require("react"));
-var mobx_react_1 = require("mobx-react");
-var material_1 = require("@mui/material");
-var ColorPicker = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./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) {
-        var _a = color, r = _a.r, g = _a.g, b = _a.b, a = _a.a;
-        return a === undefined ? "rgb(".concat(r, ",").concat(g, ",").concat(b, ")") : "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(a, ")");
-    }
-    return color;
-}
-var ColorSlot = function (props) {
-    var _a = props.value, value = _a === void 0 ? '#000' : _a, _b = props.label, label = _b === void 0 ? '' : _b, _c = props.TextFieldProps, TextFieldProps = _c === void 0 ? {} : _c, onChange = props.onChange;
-    var _d = __read((0, react_1.useState)(false), 2), displayed = _d[0], setDisplayed = _d[1];
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.TextField, __assign({ value: value, label: label, InputProps: {
-                style: {
-                    color: value,
-                    borderRightWidth: '25px',
-                    borderRightStyle: 'solid',
-                    borderRightColor: value,
-                },
-            }, onClick: function () { return setDisplayed(!displayed); }, onChange: function (event) { return onChange(event.target.value); } }, TextFieldProps)),
-        displayed ? (react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement("div", null) },
-            react_1.default.createElement(ColorPicker, { color: value, onChange: function (event) { return onChange(serializeColor(event.rgb)); } }))) : null));
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const ColorPicker = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ColorPicker'))));
+const ColorSlot = (props) => {
+    const { value = '#000', label = '', TextFieldProps = {}, onChange } = props;
+    const [displayed, setDisplayed] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { style: { display: 'flex' } },
+        react_1.default.createElement(material_1.TextField, { value: value, label: label, onClick: () => setDisplayed(!displayed), onChange: event => onChange(event.target.value), ...TextFieldProps }),
+        react_1.default.createElement("div", { style: { marginTop: 10 } },
+            react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement("div", null) },
+                react_1.default.createElement(ColorPicker, { color: value, onChange: event => onChange(event) })))));
 };
 exports.ColorSlot = ColorSlot;
 function ColorEditorSlot(props) {
-    var slot = props.slot;
-    return (react_1.default.createElement(exports.ColorSlot, { label: slot.name, value: slot.value, onChange: function (color) { return slot.set(color); }, TextFieldProps: {
+    const { slot } = props;
+    return (react_1.default.createElement(exports.ColorSlot, { label: slot.name, value: slot.value, onChange: color => slot.set(color), TextFieldProps: {
             helperText: slot.description,
             fullWidth: true,
         } }));

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

@@ -1 +1 @@
-{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6C;AAC7C,yCAAqC;AACrC,0CAAyC;AAGzC,IAAM,WAAW,GAAG,IAAA,YAAI,EAAC,cAAM,wEAAO,eAAe,QAAtB,CAAuB,CAAC,CAAA;AAEvD,4EAA4E;AAC5E,sDAAsD;AACtD,SAAS,cAAc,CAAC,KAAY;IAClC,IAAI,KAAK,YAAY,MAAM,EAAE;QACrB,IAAA,KAAiB,KAAiB,EAAhC,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,CAAC,OAAA,EAAE,CAAC,OAAsB,CAAA;QACxC,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,cAAO,CAAC,cAAI,CAAC,cAAI,CAAC,MAAG,CAAC,CAAC,CAAC,eAAQ,CAAC,cAAI,CAAC,cAAI,CAAC,cAAI,CAAC,MAAG,CAAA;KAC7E;IACD,OAAO,KAAK,CAAA;AACd,CAAC;AAEM,IAAM,SAAS,GAAG,UAAC,KAQzB;IACS,IAAA,KAA8D,KAAK,MAArD,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAE,KAA8C,KAAK,MAAzC,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,KAAkC,KAAK,eAApB,EAAnB,cAAc,mBAAG,EAAE,KAAA,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IACrE,IAAA,KAAA,OAA4B,IAAA,gBAAQ,EAAC,KAAK,CAAC,IAAA,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAA;IAEjD,OAAO,CACL;QACE,8BAAC,oBAAS,aACR,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,cAAM,OAAA,YAAY,CAAC,CAAC,SAAS,CAAC,EAAxB,CAAwB,EACvC,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA5B,CAA4B,IAC3C,cAAc,EAClB;QACD,SAAS,CAAC,CAAC,CAAC,CACX,8BAAC,eAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,0CAAO;YAC/B,8BAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAnC,CAAmC,GACtD,CACa,CAClB,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAA;AACH,CAAC,CAAA;AAvCY,QAAA,SAAS,aAuCrB;AAED,SAAS,eAAe,CAAC,KAOxB;IACS,IAAA,IAAI,GAAK,KAAK,KAAV,CAAU;IACtB,OAAO,CACL,8BAAC,iBAAS,IACR,KAAK,EAAE,IAAI,CAAC,IAAI,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAf,CAAe,EAClC,cAAc,EAAE;YACd,UAAU,EAAE,IAAI,CAAC,WAAW;YAC5B,SAAS,EAAE,IAAI;SAChB,GACD,CACH,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,eAAe,CAAC,CAAA"}
+{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6C;AAC7C,2CAAqC;AACrC,4CAAyC;AAEzC,MAAM,WAAW,GAAG,IAAA,YAAI,EAAC,GAAG,EAAE,mDAAQ,8BAA8B,GAAC,CAAC,CAAA;AAE/D,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,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEjD,OAAO,CACL,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC7B,8BAAC,oBAAS,IACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,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;QACF,uCAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;YAC3B,8BAAC,eAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,0CAAO;gBAC/B,8BAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAI,CAClD,CACb,CACF,CACP,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,SAAS,aA4BrB;AAED,SAAS,eAAe,CAAC,KAOxB;IACC,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IACtB,OAAO,CACL,8BAAC,iBAAS,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,kBAAe,IAAA,qBAAQ,EAAC,eAAe,CAAC,CAAA"}

package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,57 +1,21 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var configuration_1 = require("@jbrowse/core/configuration");
-var material_1 = require("@mui/material");
-var mui_1 = require("tss-react/mui");
-var mobx_react_1 = require("mobx-react");
-var mobx_state_tree_1 = require("mobx-state-tree");
-var pluralize_1 = require("pluralize");
+const react_1 = __importDefault(require("react"));
+const configuration_1 = require("@jbrowse/core/configuration");
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const pluralize_1 = require("pluralize");
 // icons
-var ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
+const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 // locals
-var SlotEditor_1 = __importDefault(require("./SlotEditor"));
-var TypeSelector_1 = __importDefault(require("./TypeSelector"));
-var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
+const SlotEditor_1 = __importDefault(require("./SlotEditor"));
+const TypeSelector_1 = __importDefault(require("./TypeSelector"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
     expandIcon: {
         color: '#fff',
     },
@@ -63,25 +27,29 @@ var useStyles = (0, mui_1.makeStyles)()(function (theme) { return ({
         padding: theme.spacing(1),
     },
     accordion: {
-        border: "1px solid ".concat(theme.palette.text.primary),
+        border: `1px solid ${theme.palette.text.primary}`,
+    },
+    noOverflow: {
+        width: '100%',
+        overflowX: 'auto',
     },
-}); });
-var Member = (0, mobx_react_1.observer)(function (props) {
-    var classes = useStyles().classes;
-    var slotName = props.slotName, slotSchema = props.slotSchema, schema = props.schema, _a = props.slot, slot = _a === void 0 ? schema[slotName] : _a, _b = props.path, path = _b === void 0 ? [] : _b;
-    var typeSelector;
+}));
+const Member = (0, mobx_react_1.observer)((props) => {
+    const { classes } = useStyles();
+    const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
+    let typeSelector;
     if ((0, configuration_1.isConfigurationSchemaType)(slotSchema)) {
         if (slot.length) {
-            return slot.map(function (subslot, slotIndex) {
-                var key = "".concat((0, pluralize_1.singular)(slotName), " ").concat(slotIndex + 1);
-                return react_1.default.createElement(Member, __assign({}, props, { key: key, slot: subslot, slotName: key }));
+            return slot.map((subslot, slotIndex) => {
+                const key = `${(0, pluralize_1.singular)(slotName)} ${slotIndex + 1}`;
+                return react_1.default.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
-        var typeNameChoices = (0, configuration_1.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
+        const typeNameChoices = (0, configuration_1.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
         if (typeNameChoices.length) {
-            typeSelector = (react_1.default.createElement(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: function (evt) {
+            typeSelector = (react_1.default.createElement(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
                     if (evt.target.value !== slot.type) {
                         schema.setSubschema(slotName, { type: evt.target.value });
                     }
@@ -89,11 +57,11 @@ var Member = (0, mobx_react_1.observer)(function (props) {
         }
         return (react_1.default.createElement(material_1.Accordion, { defaultExpanded: true, className: classes.accordion },
             react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
-                react_1.default.createElement(material_1.Typography, null, __spreadArray(__spreadArray([], __read(path), false), [slotName], false).join('🡒'))),
+                react_1.default.createElement(material_1.Typography, null, [...path, slotName].join('➔'))),
             react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails },
                 typeSelector,
-                react_1.default.createElement(material_1.FormGroup, null,
-                    react_1.default.createElement(Schema, { schema: slot, path: __spreadArray(__spreadArray([], __read(path), false), [slotName], false) })))));
+                react_1.default.createElement(material_1.FormGroup, { className: classes.noOverflow },
+                    react_1.default.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
     }
     if ((0, configuration_1.isConfigurationSlotType)(slotSchema)) {
         // this is a regular config slot
@@ -101,23 +69,18 @@ var Member = (0, mobx_react_1.observer)(function (props) {
     }
     return null;
 });
-var Schema = (0, mobx_react_1.observer)(function (_a) {
-    var schema = _a.schema, _b = _a.path, path = _b === void 0 ? [] : _b;
-    var properties = (0, mobx_state_tree_1.getMembers)(schema).properties;
-    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(properties).map(function (_a) {
-        var _b = __read(_a, 2), slotName = _b[0], slotSchema = _b[1];
-        return (react_1.default.createElement(Member, { key: slotName, slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }));
-    })));
+const Schema = (0, mobx_react_1.observer)(({ schema, path = [], }) => {
+    const properties = (0, mobx_state_tree_1.getMembers)(schema).properties;
+    return (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(properties).map(([slotName, slotSchema]) => (react_1.default.createElement(Member, { key: slotName, slotName: slotName, slotSchema: slotSchema, path: path, schema: schema })))));
 });
-var ConfigurationEditor = (0, mobx_react_1.observer)(function (_a) {
-    var model = _a.model;
-    var classes = useStyles().classes;
+const ConfigurationEditor = (0, mobx_react_1.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
-    var target = model.target;
-    var key = target && (0, configuration_1.readConfObject)(target, 'trackId');
-    var name = target && (0, configuration_1.readConfObject)(target, 'name');
+    const { target } = model;
+    const key = target && (0, configuration_1.readConfObject)(target, 'trackId');
+    const name = target && (0, configuration_1.readConfObject)(target, 'name');
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
             react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },

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

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

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

@@ -1,9 +1,11 @@
-declare function _default({ slot }: {
-    slot: any;
+/// <reference types="react" />
+declare function JsonEditor({ slot, }: {
+    slot: {
+        name: string;
+        description: string;
+        value: unknown;
+        set: (arg: unknown) => void;
+    };
 }): JSX.Element;
-declare namespace _default {
-    namespace propTypes {
-        const slot: import("prop-types").Validator<any>;
-    }
-}
+declare const _default: typeof JsonEditor;
 export default _default;

package/dist/ConfigurationEditorWidget/components/JsonEditor.js

@@ -22,60 +22,59 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var util_1 = require("@jbrowse/core/util");
-var material_1 = require("@mui/material");
-var mui_1 = require("tss-react/mui");
-var mobx_react_1 = require("mobx-react");
-var useStyles = (0, mui_1.makeStyles)()({
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// 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 = (0, mui_1.makeStyles)()(theme => ({
     error: {
         color: 'red',
         fontSize: '0.8em',
     },
-});
-var CodeEditor = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./CodeEditor')); }); });
-function JsonEditor(_a) {
-    var slot = _a.slot;
-    var classes = useStyles().classes;
-    var _b = __read((0, react_1.useState)(JSON.stringify(slot.value, null, '  ')), 2), contents = _b[0], setContents = _b[1];
-    var _c = __read((0, react_1.useState)(), 2), error = _c[0], setError = _c[1];
-    var debouncedJson = (0, util_1.useDebounce)(contents, 400);
-    (0, react_1.useEffect)(function () {
+    callbackEditor: {
+        fontFamily,
+        fontSize,
+        background: theme.palette.background.default,
+        width: 800,
+        marginTop: '16px',
+        border: '1px solid rgba(0,0,0,0.42)',
+    },
+    callbackContainer: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+    textAreaFont: {
+        fontFamily,
+    },
+}));
+function JsonEditor({ slot, }) {
+    const { classes } = useStyles();
+    const [contents, setContents] = (0, react_1.useState)(JSON.stringify(slot.value, null, 2));
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
         try {
-            slot.set(JSON.parse(debouncedJson));
             setError(undefined);
+            slot.set(JSON.parse(contents));
         }
         catch (e) {
-            setError(e.message);
+            console.error({ e });
+            setError(e);
         }
-    }, [debouncedJson, slot]);
+    }, [contents, slot]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        error ? react_1.default.createElement("p", { className: classes.error }, error) : null,
-        react_1.default.createElement(material_1.FormControl, { error: error },
-            react_1.default.createElement(material_1.InputLabel, { shrink: true, htmlFor: "callback-editor" }, slot.name),
-            react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement("div", null) },
-                react_1.default.createElement(CodeEditor, { contents: contents, setContents: setContents })),
-            react_1.default.createElement(material_1.FormHelperText, null, slot.description))));
+        error ? react_1.default.createElement("p", { className: classes.error }, `${error}`) : null,
+        react_1.default.createElement("div", { className: classes.callbackContainer },
+            react_1.default.createElement(material_1.InputLabel, { shrink: true, htmlFor: "json-editor" }, slot.name),
+            react_1.default.createElement(material_1.TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => setContents(event.target.value), style: { background: error ? '#fdd' : undefined }, InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } }))));
 }
-JsonEditor.propTypes = {
-    slot: mobx_react_1.PropTypes.objectOrObservableObject.isRequired,
-};
 exports.default = (0, mobx_react_1.observer)(JsonEditor);
 //# sourceMappingURL=JsonEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"JsonEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/JsonEditor.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAwD;AACxD,2CAAgD;AAChD,0CAAuE;AACvE,qCAA0C;AAC1C,yCAAgD;AAChD,IAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC;IAC7B,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,OAAO;KAClB;CACF,CAAC,CAAA;AAEF,IAAM,UAAU,GAAG,IAAA,YAAI,EAAC,cAAM,wEAAO,cAAc,QAArB,CAAsB,CAAC,CAAA;AAErD,SAAS,UAAU,CAAC,EAAQ;QAAN,IAAI,UAAA;IAChB,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACzB,IAAA,KAAA,OAA0B,IAAA,gBAAQ,EACtC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CACvC,IAAA,EAFM,QAAQ,QAAA,EAAE,WAAW,QAE3B,CAAA;IACK,IAAA,KAAA,OAAoB,IAAA,gBAAQ,GAAE,IAAA,EAA7B,KAAK,QAAA,EAAE,QAAQ,QAAc,CAAA;IACpC,IAAM,aAAa,GAAG,IAAA,kBAAW,EAAC,QAAQ,EAAE,GAAG,CAAC,CAAA;IAEhD,IAAA,iBAAS,EAAC;QACR,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,qCAAG,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,KAAK,CAAK,CAAC,CAAC,CAAC,IAAI;QACxD,8BAAC,sBAAW,IAAC,KAAK,EAAE,KAAK;YACvB,8BAAC,qBAAU,IAAC,MAAM,QAAC,OAAO,EAAC,iBAAiB,IACzC,IAAI,CAAC,IAAI,CACC;YACb,8BAAC,eAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,0CAAO;gBAC/B,8BAAC,UAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CAC7C;YACjB,8BAAC,yBAAc,QAAE,IAAI,CAAC,WAAW,CAAkB,CACvC,CACb,CACJ,CAAA;AACH,CAAC;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,IAAI,EAAE,sBAAS,CAAC,wBAAwB,CAAC,UAAU;CACpD,CAAA;AAED,kBAAe,IAAA,qBAAQ,EAAC,UAAU,CAAC,CAAA"}
+{"version":3,"file":"JsonEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/JsonEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkD;AAClD,4CAAqD;AACrD,uCAA0C;AAC1C,2CAAqC;AAErC,6EAA6E;AAC7E,MAAM,QAAQ,GAAG,MAAM,CAAA;AACvB,2FAA2F;AAC3F,MAAM,UAAU,GACd,sNAAsN,CAAA;AAExN,MAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,OAAO;KAClB;IACD,cAAc,EAAE;QACd,UAAU;QACV,QAAQ;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,KAAK,EAAE,GAAG;QACV,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,iBAAiB,EAAE;QACjB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;KAClB;IACD,YAAY,EAAE;QACZ,UAAU;KACX;CACF,CAAC,CAAC,CAAA;AAEH,SAAS,UAAU,CAAC,EAClB,IAAI,GAQL;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAC7E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,GAAW,CAAA;IAE7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI;YACF,QAAQ,CAAC,SAAS,CAAC,CAAA;YACnB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;SAC/B;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YACpB,QAAQ,CAAC,CAAC,CAAC,CAAA;SACZ;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAA;IAEpB,OAAO,CACL;QACG,KAAK,CAAC,CAAC,CAAC,qCAAG,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,GAAG,KAAK,EAAE,CAAK,CAAC,CAAC,CAAC,IAAI;QAC7D,uCAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB;YACvC,8BAAC,qBAAU,IAAC,MAAM,QAAC,OAAO,EAAC,aAAa,IACrC,IAAI,CAAC,IAAI,CACC;YACb,8BAAC,oBAAS,IACR,EAAE,EAAC,aAAa,EAChB,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,QACT,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAClD,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;oBACV,OAAO,EAAE;wBACP,KAAK,EAAE,OAAO,CAAC,YAAY;qBAC5B;iBACF,GACD,CACE,CACL,CACJ,CAAA;AACH,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,UAAU,CAAC,CAAA"}

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

@@ -1,4 +1,6 @@
-export const useSlotEditorStyles: (params: void, styleOverrides?: {
+/// <reference types="react" />
+import { IAnyType } from 'mobx-state-tree';
+export declare const useSlotEditorStyles: (params: void, styleOverrides?: {
     props: {
         classes?: Record<string, string> | undefined;
     } & Record<string, unknown>;
@@ -9,8 +11,8 @@ export const useSlotEditorStyles: (params: void, styleOverrides?: {
     css: import("tss-react/types").Css;
     cx: import("tss-react/types").Cx;
 };
-export default SlotEditor;
-declare function SlotEditor({ slot, slotSchema }: {
+declare const SlotEditor: ({ slot, slotSchema }: {
     slot: any;
-    slotSchema: any;
-}): JSX.Element;
+    slotSchema: IAnyType;
+}) => JSX.Element;
+export default SlotEditor;