@jbrowse/plugin-config 1.7.11 → 2.1.0

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

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

package/dist/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -1,123 +1,125 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _util = require("@jbrowse/core/util");
-
-var _jexlStrings = require("@jbrowse/core/util/jexlStrings");
-
-var _core = require("@material-ui/core");
-
-var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
-
-var _mobxStateTree = require("mobx-state-tree");
-
-var _mobxReact = require("mobx-react");
-
-var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
-
-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 || _typeof(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; }
-
-// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
-var fontSize = '12px'; // 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, _core.makeStyles)(function (theme) {
-  return {
-    callbackEditor: {
-      marginTop: '16px',
-      borderBottom: "1px solid ".concat(theme.palette.divider),
-      fontFamily: fontFamily,
-      fontSize: fontSize
+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;
 });
-
-function CallbackEditor(_ref) {
-  var slot = _ref.slot;
-  var classes = useStyles();
-
-  var _useState = (0, _react.useState)(slot.value),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      code = _useState2[0],
-      setCode = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      error = _useState4[0],
-      setCodeError = _useState4[1];
-
-  var debouncedCode = (0, _util.useDebounce)(code, 400);
-  (0, _react.useEffect)(function () {
+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 __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 {
-      var _getEnv$pluginManager;
-
-      var jexlDebouncedCode = debouncedCode.startsWith('jexl:') ? debouncedCode : "jexl:".concat(debouncedCode);
-      (0, _jexlStrings.stringToJexlExpression)(jexlDebouncedCode, (_getEnv$pluginManager = (0, _mobxStateTree.getEnv)(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.jexl);
-      slot.set(jexlDebouncedCode);
-      setCodeError(null);
-    } catch (e) {
-      console.error({
-        e: e
-      });
-      setCodeError(e);
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
     }
-  }, [debouncedCode, slot]); // if default value is a callback, will have to remove jexl:
-  // do this last
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.FormControl, null, /*#__PURE__*/_react.default.createElement(_core.InputLabel, {
-    shrink: true,
-    htmlFor: "callback-editor"
-  }, slot.name), /*#__PURE__*/_react.default.createElement(_reactSimpleCodeEditor.default, {
-    className: classes.callbackEditor,
-    value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code,
-    onValueChange: function onValueChange(newCode) {
-      return setCode(newCode);
+    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 material_1 = require("@mui/material");
+var util_1 = require("@jbrowse/core/util");
+var jexlStrings_1 = require("@jbrowse/core/util/jexlStrings");
+var mobx_state_tree_1 = require("mobx-state-tree");
+var mobx_react_1 = require("mobx-react");
+var mui_1 = require("tss-react/mui");
+// icons
+var 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 ({
+    callbackEditor: {
+        marginTop: '16px',
+        borderBottom: "1px solid ".concat(theme.palette.divider),
+        width: '100%',
+        fontFamily: fontFamily,
     },
-    highlight: function highlight(newCode) {
-      return newCode;
+    textAreaFont: {
+        fontFamily: fontFamily,
     },
-    padding: 10,
-    style: {
-      background: error ? '#fdd' : undefined
-    }
-  }), error ? /*#__PURE__*/_react.default.createElement(_core.FormHelperText, {
-    style: {
-      color: '#f00'
-    }
-  }, "".concat(error)) : null, /*#__PURE__*/_react.default.createElement(_core.FormHelperText, null, slot.description)), /*#__PURE__*/_react.default.createElement(_core.Tooltip, {
-    title: /*#__PURE__*/_react.default.createElement("div", null, "Callbacks are written in Jexl format. Click to learn more.", /*#__PURE__*/_react.default.createElement("br", null), " Names of available context items: ", slot.contextVariable),
-    arrow: true
-  }, /*#__PURE__*/_react.default.createElement(_core.IconButton, {
-    color: "primary",
-    onClick: function onClick() {
-      var newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
-
-      if (newWindow) {
-        newWindow.opener = null;
-      }
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Help.default, null))));
+    callbackContainer: {
+        width: '100%',
+        overflowX: 'auto',
+    },
+    error: {
+        color: 'red',
+        fontSize: '0.8em',
+    },
+}); });
+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 () {
+        var _a;
+        try {
+            var jexlDebouncedCode = debouncedCode.startsWith('jexl:')
+                ? debouncedCode
+                : "jexl:".concat(debouncedCode);
+            if (jexlDebouncedCode === 'jexl:') {
+                throw new Error('Empty jexl expression is not valid');
+            }
+            (0, jexlStrings_1.stringToJexlExpression)(jexlDebouncedCode, (_a = (0, mobx_state_tree_1.getEnv)(slot).pluginManager) === null || _a === void 0 ? void 0 : _a.jexl);
+            slot.set(jexlDebouncedCode);
+            setCodeError(undefined);
+        }
+        catch (e) {
+            console.error({ e: 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,
+        error ? react_1.default.createElement("p", { className: classes.error }, "".concat(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: function (event) { return setCode(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
+                    classes: {
+                        input: classes.textAreaFont,
+                    },
+                } }),
+            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: 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))))));
 }
-
-CallbackEditor.propTypes = {
-  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
-};
-
-var _default = (0, _mobxReact.observer)(CallbackEditor);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(CallbackEditor);
+//# sourceMappingURL=CallbackEditor.js.map

package/dist/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/dist/ConfigurationEditorWidget/components/ColorEditor.d.ts

@@ -1,27 +1,13 @@
 /// <reference types="react" />
-import ReactPropTypes from 'prop-types';
-export declare const ColorSlot: {
-    (props: {
-        value: string;
-        label: string;
-        TextFieldProps: {
-            helperText: string;
-            fullWidth: boolean;
-        };
-        onChange: (arg: string) => void;
-    }): JSX.Element;
-    propTypes: {
-        onChange: ReactPropTypes.Validator<(...args: any[]) => any>;
-        label: ReactPropTypes.Requireable<string>;
-        TextFieldProps: ReactPropTypes.Requireable<ReactPropTypes.InferProps<{}>>;
-        value: ReactPropTypes.Requireable<string>;
-    };
-    defaultProps: {
-        label: string;
-        value: string;
-        TextFieldProps: {};
-    };
-};
+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;
@@ -30,15 +16,5 @@ declare function ColorEditorSlot(props: {
         set: (arg: string) => void;
     };
 }): JSX.Element;
-declare namespace ColorEditorSlot {
-    var propTypes: {
-        slot: ReactPropTypes.Validator<ReactPropTypes.InferProps<{
-            name: ReactPropTypes.Validator<string>;
-            description: ReactPropTypes.Requireable<string>;
-            value: ReactPropTypes.Validator<string>;
-            set: ReactPropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-    };
-}
 declare const _default: typeof ColorEditorSlot;
 export default _default;

package/dist/ConfigurationEditorWidget/components/ColorEditor.js

@@ -1,125 +1,76 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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);
+    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.default = exports.ColorSlot = void 0;
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _mobxReact = require("mobx-react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-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 ColorPicker = /*#__PURE__*/(0, _react.lazy)(function () {
-  return Promise.resolve().then(function () {
-    return _interopRequireWildcard(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 _ref = color,
-        r = _ref.r,
-        g = _ref.g,
-        b = _ref.b,
-        a = _ref.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 ColorSlot(props) {
-  var value = props.value,
-      label = props.label,
-      TextFieldProps = props.TextFieldProps,
-      _onChange = props.onChange;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      displayed = _useState2[0],
-      setDisplayed = _useState2[1];
-
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
-    value: value,
-    label: label,
-    InputProps: {
-      style: {
-        color: value,
-        borderRightWidth: '25px',
-        borderRightStyle: 'solid',
-        borderRightColor: value
-      }
-    },
-    onClick: function onClick() {
-      return setDisplayed(!displayed);
-    },
-    onChange: function onChange(event) {
-      _onChange(event.target.value);
+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 __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);
     }
-  }, TextFieldProps)), displayed ? /*#__PURE__*/_react.default.createElement(_react.default.Suspense, {
-    fallback: /*#__PURE__*/_react.default.createElement("div", null)
-  }, /*#__PURE__*/_react.default.createElement(ColorPicker, {
-    color: value,
-    onChange: function onChange(event) {
-      _onChange(serializeColor(event.rgb));
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
     }
-  })) : null);
+    return ar;
 };
-
-exports.ColorSlot = ColorSlot;
-ColorSlot.propTypes = {
-  onChange: _propTypes.default.func.isRequired,
-  label: _propTypes.default.string,
-  TextFieldProps: _propTypes.default.shape({}),
-  value: _propTypes.default.string
+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('@jbrowse/core/ui/ColorPicker')); }); });
+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("div", { style: { display: 'flex' } },
+        react_1.default.createElement(material_1.TextField, __assign({ value: value, label: label, onClick: function () { return setDisplayed(!displayed); }, onChange: function (event) { return 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: function (event) { return onChange(event); } })))));
 };
-ColorSlot.defaultProps = {
-  label: '',
-  value: '#000',
-  TextFieldProps: {}
-};
-
+exports.ColorSlot = ColorSlot;
 function ColorEditorSlot(props) {
-  var slot = props.slot;
-  return /*#__PURE__*/_react.default.createElement(ColorSlot, {
-    label: slot.name,
-    value: slot.value,
-    onChange: function onChange(color) {
-      slot.set(color);
-    },
-    TextFieldProps: {
-      helperText: slot.description,
-      fullWidth: true
-    }
-  });
+    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: {
+            helperText: slot.description,
+            fullWidth: true,
+        } }));
 }
-
-ColorEditorSlot.propTypes = {
-  slot: _propTypes.default.shape({
-    name: _propTypes.default.string.isRequired,
-    description: _propTypes.default.string,
-    value: _propTypes.default.string.isRequired,
-    set: _propTypes.default.func.isRequired
-  }).isRequired
-};
-
-var _default = (0, _mobxReact.observer)(ColorEditorSlot);
-
-exports.default = _default;
+exports.default = (0, mobx_react_1.observer)(ColorEditorSlot);
+//# sourceMappingURL=ColorEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6C;AAC7C,yCAAqC;AACrC,0CAAyC;AAEzC,IAAM,WAAW,GAAG,IAAA,YAAI,EAAC,cAAM,wEAAO,8BAA8B,QAArC,CAAsC,CAAC,CAAA;AAE/D,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,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC7B,8BAAC,oBAAS,aACR,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,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;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,UAAA,KAAK,IAAI,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,GAAI,CAClD,CACb,CACF,CACP,CAAA;AACH,CAAC,CAAA;AA5BY,QAAA,SAAS,aA4BrB;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"}

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

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