@jbrowse/plugin-config 1.7.11 → 2.1.0

package/dist/index.js

@@ -1,152 +1,137 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ConfigurationEditor = void 0;
-Object.defineProperty(exports, "JsonEditor", {
-  enumerable: true,
-  get: function get() {
-    return _JsonEditor.default;
-  }
-});
-exports.default = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = require("react");
-
-var _AdapterType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/AdapterType"));
-
-var _WidgetType = _interopRequireDefault(require("@jbrowse/core/pluggableElementTypes/WidgetType"));
-
-var _Plugin2 = _interopRequireDefault(require("@jbrowse/core/Plugin"));
-
-var _ConfigurationEditorWidget = require("./ConfigurationEditorWidget");
-
-var _FromConfigAdapter = require("./FromConfigAdapter");
-
-var _RefNameAliasAdapter = require("./RefNameAliasAdapter");
-
-var _JsonEditor = _interopRequireDefault(require("./ConfigurationEditorWidget/components/JsonEditor"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || (0, _typeof2.default)(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var ConfigurationEditorComponent = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(require('./ConfigurationEditorWidget/components/ConfigurationEditor'));
-  });
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-exports.ConfigurationEditor = ConfigurationEditorComponent;
-
-var _default = /*#__PURE__*/function (_Plugin) {
-  (0, _inherits2.default)(_default, _Plugin);
-
-  var _super = _createSuper(_default);
-
-  function _default() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, _default);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConfigurationEditor = exports.JsonEditor = void 0;
+var react_1 = require("react");
+var AdapterType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/AdapterType"));
+var WidgetType_1 = __importDefault(require("@jbrowse/core/pluggableElementTypes/WidgetType"));
+var Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
+var ConfigurationEditorWidget_1 = require("./ConfigurationEditorWidget");
+var FromConfigAdapter_1 = require("./FromConfigAdapter");
+var RefNameAliasAdapter_1 = require("./RefNameAliasAdapter");
+var LazyConfigurationEditorComponent = (0, react_1.lazy)(function () { return Promise.resolve().then(function () { return __importStar(require('./ConfigurationEditorWidget/components/ConfigurationEditor')); }); });
+exports.ConfigurationEditor = LazyConfigurationEditorComponent;
+var default_1 = /** @class */ (function (_super) {
+    __extends(default_1, _super);
+    function default_1() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.name = 'ConfigurationPlugin';
+        return _this;
     }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "name", 'ConfigurationPlugin');
-    return _this;
-  }
-
-  (0, _createClass2.default)(_default, [{
-    key: "install",
-    value: function install(pluginManager) {
-      pluginManager.addAdapterType(function () {
-        return new _AdapterType.default({
-          name: 'FromConfigAdapter',
-          configSchema: _FromConfigAdapter.configSchema,
-          AdapterClass: _FromConfigAdapter.AdapterClass,
-          adapterMetadata: {
-            category: null,
-            hiddenFromGUI: true,
-            displayName: null,
-            description: null
-          }
+    default_1.prototype.install = function (pluginManager) {
+        pluginManager.addAdapterType(function () {
+            return new AdapterType_1.default({
+                name: 'FromConfigAdapter',
+                configSchema: FromConfigAdapter_1.configSchema,
+                getAdapterClass: function () {
+                    return Promise.resolve().then(function () { return __importStar(require('./FromConfigAdapter/FromConfigAdapter')); }).then(function (r) { return r.default; });
+                },
+                adapterMetadata: {
+                    category: null,
+                    hiddenFromGUI: true,
+                    displayName: null,
+                    description: null,
+                },
+            });
         });
-      });
-      pluginManager.addAdapterType(function () {
-        return new _AdapterType.default({
-          name: 'FromConfigRegionsAdapter',
-          configSchema: _FromConfigAdapter.regionsConfigSchema,
-          AdapterClass: _FromConfigAdapter.RegionsAdapterClass,
-          adapterMetadata: {
-            category: null,
-            hiddenFromGUI: true,
-            displayName: null,
-            description: null
-          }
+        pluginManager.addAdapterType(function () {
+            return new AdapterType_1.default({
+                name: 'FromConfigRegionsAdapter',
+                configSchema: FromConfigAdapter_1.regionsConfigSchema,
+                getAdapterClass: function () {
+                    return Promise.resolve().then(function () { return __importStar(require('./FromConfigAdapter/FromConfigRegionsAdapter')); }).then(function (r) { return r.default; });
+                },
+                adapterMetadata: {
+                    category: null,
+                    hiddenFromGUI: true,
+                    displayName: null,
+                    description: null,
+                },
+            });
         });
-      });
-      pluginManager.addAdapterType(function () {
-        return new _AdapterType.default({
-          name: 'FromConfigSequenceAdapter',
-          configSchema: _FromConfigAdapter.sequenceConfigSchema,
-          AdapterClass: _FromConfigAdapter.SequenceAdapterClass,
-          adapterMetadata: {
-            category: null,
-            hiddenFromGUI: true,
-            displayName: null,
-            description: null
-          }
+        pluginManager.addAdapterType(function () {
+            return new AdapterType_1.default({
+                name: 'FromConfigSequenceAdapter',
+                configSchema: FromConfigAdapter_1.sequenceConfigSchema,
+                getAdapterClass: function () {
+                    return Promise.resolve().then(function () { return __importStar(require('./FromConfigAdapter/FromConfigSequenceAdapter')); }).then(function (r) { return r.default; });
+                },
+                adapterMetadata: {
+                    category: null,
+                    hiddenFromGUI: true,
+                    displayName: null,
+                    description: null,
+                },
+            });
         });
-      });
-      pluginManager.addAdapterType(function () {
-        return new _AdapterType.default({
-          name: 'RefNameAliasAdapter',
-          configSchema: _RefNameAliasAdapter.configSchema,
-          AdapterClass: _RefNameAliasAdapter.AdapterClass,
-          adapterMetadata: {
-            category: null,
-            hiddenFromGUI: true,
-            displayName: null,
-            description: null
-          }
+        pluginManager.addAdapterType(function () {
+            return new AdapterType_1.default({
+                name: 'RefNameAliasAdapter',
+                configSchema: RefNameAliasAdapter_1.configSchema,
+                getAdapterClass: function () {
+                    return Promise.resolve().then(function () { return __importStar(require('./RefNameAliasAdapter/RefNameAliasAdapter')); }).then(function (r) { return r.default; });
+                },
+                adapterMetadata: {
+                    category: null,
+                    hiddenFromGUI: true,
+                    displayName: null,
+                    description: null,
+                },
+            });
         });
-      });
-      pluginManager.addWidgetType(function () {
-        return new _WidgetType.default({
-          name: 'ConfigurationEditorWidget',
-          HeadingComponent: _ConfigurationEditorWidget.HeadingComponent,
-          configSchema: _ConfigurationEditorWidget.configSchema,
-          stateModel: (0, _ConfigurationEditorWidget.stateModelFactory)(pluginManager),
-          ReactComponent: ConfigurationEditorComponent
+        pluginManager.addWidgetType(function () {
+            return new WidgetType_1.default({
+                name: 'ConfigurationEditorWidget',
+                HeadingComponent: ConfigurationEditorWidget_1.HeadingComponent,
+                configSchema: ConfigurationEditorWidget_1.configSchema,
+                stateModel: (0, ConfigurationEditorWidget_1.stateModelFactory)(pluginManager),
+                ReactComponent: LazyConfigurationEditorComponent,
+            });
         });
-      });
-    }
-  }]);
-  return _default;
-}(_Plugin2.default);
-
-exports.default = _default;
+    };
+    return default_1;
+}(Plugin_1.default));
+exports.default = default_1;
+var JsonEditor_1 = require("./ConfigurationEditorWidget/components/JsonEditor");
+Object.defineProperty(exports, "JsonEditor", { enumerable: true, get: function () { return __importDefault(JsonEditor_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA4B;AAC5B,gGAAyE;AACzE,8FAAuE;AACvE,gEAAyC;AAEzC,yEAIoC;AACpC,yDAI4B;AAC5B,6DAAuF;AAEvF,IAAM,gCAAgC,GAAG,IAAA,YAAI,EAC3C,cAAM,wEAAO,4DAA4D,QAAnE,CAAoE,CAC3E,CAAA;AAyF4C,+DAAmB;AAvFhE;IAA6B,6BAAM;IAAnC;QAAA,qEAmFC;QAlFC,UAAI,GAAG,qBAAqB,CAAA;;IAkF9B,CAAC;IAhFC,2BAAO,GAAP,UAAQ,aAA4B;QAClC,aAAa,CAAC,cAAc,CAC1B;YACE,OAAA,IAAI,qBAAW,CAAC;gBACd,IAAI,EAAE,mBAAmB;gBACzB,YAAY,EAAE,gCAA6B;gBAC3C,eAAe,EAAE;oBACf,OAAA,iEAAO,uCAAuC,OAAE,IAAI,CAClD,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CACf;gBAFD,CAEC;gBACH,eAAe,EAAE;oBACf,QAAQ,EAAE,IAAI;oBACd,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,IAAI;iBAClB;aACF,CAAC;QAbF,CAaE,CACL,CAAA;QACD,aAAa,CAAC,cAAc,CAC1B;YACE,OAAA,IAAI,qBAAW,CAAC;gBACd,IAAI,EAAE,0BAA0B;gBAChC,YAAY,EAAE,uCAAoC;gBAClD,eAAe,EAAE;oBACf,OAAA,iEAAO,8CAA8C,OAAE,IAAI,CACzD,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CACf;gBAFD,CAEC;gBACH,eAAe,EAAE;oBACf,QAAQ,EAAE,IAAI;oBACd,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,IAAI;iBAClB;aACF,CAAC;QAbF,CAaE,CACL,CAAA;QACD,aAAa,CAAC,cAAc,CAC1B;YACE,OAAA,IAAI,qBAAW,CAAC;gBACd,IAAI,EAAE,2BAA2B;gBACjC,YAAY,EAAE,wCAAqC;gBACnD,eAAe,EAAE;oBACf,OAAA,iEAAO,+CAA+C,OAAE,IAAI,CAC1D,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CACf;gBAFD,CAEC;gBACH,eAAe,EAAE;oBACf,QAAQ,EAAE,IAAI;oBACd,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,IAAI;iBAClB;aACF,CAAC;QAbF,CAaE,CACL,CAAA;QACD,aAAa,CAAC,cAAc,CAC1B;YACE,OAAA,IAAI,qBAAW,CAAC;gBACd,IAAI,EAAE,qBAAqB;gBAC3B,YAAY,EAAE,kCAA+B;gBAC7C,eAAe,EAAE;oBACf,OAAA,iEAAO,2CAA2C,OAAE,IAAI,CACtD,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,OAAO,EAAT,CAAS,CACf;gBAFD,CAEC;gBACH,eAAe,EAAE;oBACf,QAAQ,EAAE,IAAI;oBACd,aAAa,EAAE,IAAI;oBACnB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,IAAI;iBAClB;aACF,CAAC;QAbF,CAaE,CACL,CAAA;QAED,aAAa,CAAC,aAAa,CAAC;YAC1B,OAAO,IAAI,oBAAU,CAAC;gBACpB,IAAI,EAAE,2BAA2B;gBACjC,gBAAgB,EAAE,4CAAmC;gBACrD,YAAY,EAAE,wCAA+B;gBAC7C,UAAU,EAAE,IAAA,6CAAoC,EAAC,aAAa,CAAC;gBAC/D,cAAc,EAAE,gCAAgC;aACjD,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC;IACH,gBAAC;AAAD,CAAC,AAnFD,CAA6B,gBAAM,GAmFlC;;AAED,gFAAyF;AAAhF,yHAAA,OAAO,OAAc"}

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,80 @@
+import React, { useEffect, useState } from 'react';
+import { Tooltip, IconButton, TextField } from '@mui/material';
+import { useDebounce } from '@jbrowse/core/util';
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { getEnv } from 'mobx-state-tree';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+// icons
+import HelpIcon from '@mui/icons-material/Help';
+// 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}`,
+        width: '100%',
+        fontFamily,
+    },
+    textAreaFont: {
+        fontFamily,
+    },
+    callbackContainer: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+}));
+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,
+        error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
+        React.createElement("div", { className: classes.callbackContainer },
+            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,
+                    },
+                } }),
+            React.createElement("p", 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/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,22 @@
+import React, { lazy, useState } from 'react';
+import { observer } from 'mobx-react';
+import { TextField } from '@mui/material';
+const ColorPicker = lazy(() => import('@jbrowse/core/ui/ColorPicker'));
+export const ColorSlot = (props) => {
+    const { value = '#000', label = '', TextFieldProps = {}, onChange } = props;
+    const [displayed, setDisplayed] = useState(false);
+    return (React.createElement("div", { style: { display: 'flex' } },
+        React.createElement(TextField, { value: value, label: label, onClick: () => setDisplayed(!displayed), onChange: event => onChange(event.target.value), ...TextFieldProps }),
+        React.createElement("div", { style: { marginTop: 10 } },
+            React.createElement(React.Suspense, { fallback: React.createElement("div", null) },
+                React.createElement(ColorPicker, { color: value, onChange: event => onChange(event) })))));
+};
+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;AAEzC,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,8BAA8B,CAAC,CAAC,CAAA;AAEtE,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,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC7B,oBAAC,SAAS,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,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;YAC3B,oBAAC,KAAK,CAAC,QAAQ,IAAC,QAAQ,EAAE,gCAAO;gBAC/B,oBAAC,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;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/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,87 @@
+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}`,
+    },
+    noOverflow: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+}));
+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, { className: classes.noOverflow },
+                    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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,cAAc,EACd,oCAAoC,EACpC,yBAAyB,EACzB,uBAAuB,GAExB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAY,MAAM,iBAAiB,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAEpC,QAAQ;AACR,OAAO,cAAc,MAAM,gCAAgC,CAAA;AAE3D,SAAS;AACT,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,YAAY,MAAM,gBAAgB,CAAA;AAEzC,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;KACd;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACnC;IACD,qBAAqB,EAAE;QACrB,OAAO,EAAE,OAAO;QAChB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC1B;IAED,SAAS,EAAE;QACT,MAAM,EAAE,aAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;KAClD;IACD,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,MAAM;KAClB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,MAAM,GAAG,QAAQ,CACrB,CAAC,KAMA,EAAE,EAAE;IACH,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EACN,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,EACvB,IAAI,GAAG,EAAE,GACV,GAAG,KAAK,CAAA;IACT,IAAI,YAAY,CAAA;IAChB,IAAI,yBAAyB,CAAC,UAAU,CAAC,EAAE;QACzC,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,OAA8B,EAAE,SAAiB,EAAE,EAAE;gBACpE,MAAM,GAAG,GAAG,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,SAAS,GAAG,CAAC,EAAE,CAAA;gBACpD,OAAO,oBAAC,MAAM,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,GAAI,CAAA;YACtE,CAAC,CAAC,CAAA;SACH;QACD,wEAAwE;QACxE,sCAAsC;QACtC,MAAM,eAAe,GAAG,oCAAoC,CAAC,UAAU,CAAC,CAAA;QACxE,IAAI,eAAe,CAAC,MAAM,EAAE;YAC1B,YAAY,GAAG,CACb,oBAAC,YAAY,IACX,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,EAAE;oBACd,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,IAAI,EAAE;wBAClC,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAA;qBAC1D;gBACH,CAAC,GACD,CACH,CAAA;SACF;QACD,OAAO,CACL,oBAAC,SAAS,IAAC,eAAe,QAAC,SAAS,EAAE,OAAO,CAAC,SAAS;YACrD,oBAAC,gBAAgB,IACf,UAAU,EAAE,oBAAC,cAAc,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU,GAAI;gBAE7D,oBAAC,UAAU,QAAE,CAAC,GAAG,IAAI,EAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAc,CACxC;YACnB,oBAAC,gBAAgB,IAAC,SAAS,EAAE,OAAO,CAAC,qBAAqB;gBACvD,YAAY;gBACb,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU;oBACtC,oBAAC,MAAM,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,QAAQ,CAAC,GAAI,CACzC,CACK,CACT,CACb,CAAA;KACF;IAED,IAAI,uBAAuB,CAAC,UAAU,CAAC,EAAE;QACvC,gCAAgC;QAChC,OAAO,oBAAC,UAAU,IAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;KACzE;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CACF,CAAA;AAED,MAAM,MAAM,GAAG,QAAQ,CACrB,CAAC,EACC,MAAM,EACN,IAAI,GAAG,EAAE,GAIV,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,UAAU,CAAA;IAChD,OAAO,CACL,0CACG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,UAAU,CAAC,EAAE,EAAE,CAAC,CAC1D,oBAAC,MAAM,IACL,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,GACd,CACH,CAAC,CACD,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,mBAAmB,GAAG,QAAQ,CAClC,CAAC,EAAE,KAAK,EAAgD,EAAE,EAAE;IAC1D,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,yEAAyE;IACzE,wEAAwE;IACxE,cAAc;IACd,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IACxB,MAAM,GAAG,GAAG,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,SAAS,CAAC,CAAA;IACvD,MAAM,IAAI,GAAG,MAAM,IAAI,cAAc,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACrD,OAAO,CACL;QACE,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,EAAE,eAAe,QAAC,SAAS,EAAE,OAAO,CAAC,SAAS;YAC/D,oBAAC,gBAAgB,IACf,UAAU,EAAE,oBAAC,cAAc,IAAC,SAAS,EAAE,OAAO,CAAC,UAAU,GAAI;gBAE7D,oBAAC,UAAU,QAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,eAAe,CAAc,CACjC;YACnB,oBAAC,gBAAgB,IACf,SAAS,EAAE,OAAO,CAAC,qBAAqB,iBAC5B,cAAc,IAEzB,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,oBAAC,MAAM,IAAC,MAAM,EAAE,MAAM,GAAI,CACtC,CACT;QAGZ,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CAC9B,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,mBAAmB,CAAA"}

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

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

package/esm/ConfigurationEditorWidget/components/JsonEditor.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { InputLabel, TextField } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from '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 = makeStyles()(theme => ({
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+    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] = useState(JSON.stringify(slot.value, null, 2));
+    const [error, setError] = useState();
+    useEffect(() => {
+        try {
+            setError(undefined);
+            slot.set(JSON.parse(contents));
+        }
+        catch (e) {
+            console.error({ e });
+            setError(e);
+        }
+    }, [contents, slot]);
+    return (React.createElement(React.Fragment, null,
+        error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
+        React.createElement("div", { className: classes.callbackContainer },
+            React.createElement(InputLabel, { shrink: true, htmlFor: "json-editor" }, slot.name),
+            React.createElement(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,
+                    },
+                } }))));
+}
+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.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,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,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,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;IAC7E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW,CAAA;IAE7C,SAAS,CAAC,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,2BAAG,SAAS,EAAE,OAAO,CAAC,KAAK,IAAG,GAAG,KAAK,EAAE,CAAK,CAAC,CAAC,CAAC,IAAI;QAC7D,6BAAK,SAAS,EAAE,OAAO,CAAC,iBAAiB;YACvC,oBAAC,UAAU,IAAC,MAAM,QAAC,OAAO,EAAC,aAAa,IACrC,IAAI,CAAC,IAAI,CACC;YACb,oBAAC,SAAS,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,eAAe,QAAQ,CAAC,UAAU,CAAC,CAAA"}