@jbrowse/plugin-config 1.4.2 → 1.5.2

package/dist/plugin-config.esm.js

@@ -12,10 +12,7 @@ import { ObservableCreate } from '@jbrowse/core/util/rxjs';
 import { toArray } from 'rxjs/operators';
 import { openLocation } from '@jbrowse/core/util/io';
 import { useDebounce, iterMap } from '@jbrowse/core/util';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
-import InputLabel from '@material-ui/core/InputLabel';
-import { useTheme, makeStyles } from '@material-ui/core/styles';
+import { FormControl, InputLabel, FormHelperText, makeStyles, useTheme, Tooltip, IconButton, Paper, TextField as TextField$1, SvgIcon, List, ListItem, InputAdornment, Card, CardHeader, CardContent, FormControlLabel, Checkbox, MenuItem } from '@material-ui/core';
 import Editor from 'react-simple-code-editor';
 import { Light } from 'react-syntax-highlighter';
 import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
@@ -23,22 +20,20 @@ import a11yDark from 'react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark';
 import a11yLight from 'react-syntax-highlighter/dist/cjs/styles/hljs/a11y-light';
 import FormGroup from '@material-ui/core/FormGroup';
 import FormLabel from '@material-ui/core/FormLabel';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
 import { singular } from 'pluralize';
 import { FileSelector } from '@jbrowse/core/ui';
 import { getSubType, getUnionSubTypes, getPropertyType } from '@jbrowse/core/util/mst-reflection';
-import { Paper, IconButton as IconButton$1, TextField as TextField$1, SvgIcon, makeStyles as makeStyles$1, InputLabel as InputLabel$1, List, ListItem, InputAdornment, FormHelperText as FormHelperText$1, Card, CardHeader, CardContent, FormControl as FormControl$1, FormControlLabel, Checkbox, MenuItem } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import AddIcon from '@material-ui/icons/Add';
 import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
 import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
 import HelpIcon from '@material-ui/icons/Help';
 import ReactPropTypes from 'prop-types';
 import TextField from '@material-ui/core/TextField';
-import { ChromePicker } from 'react-color';
 import MenuItem$1 from '@material-ui/core/MenuItem';
 import Paper$1 from '@material-ui/core/Paper';
+import { ChromePicker } from 'react-color';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -224,6 +219,8 @@ function _assertThisInitialized(self) {
 function _possibleConstructorReturn(self, call) {
   if (call && (typeof call === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -548,11 +545,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 
     var IteratorPrototype = {};
-
-    IteratorPrototype[iteratorSymbol] = function () {
+    define(IteratorPrototype, iteratorSymbol, function () {
       return this;
-    };
-
+    });
     var getProto = Object.getPrototypeOf;
     var NativeIteratorPrototype = getProto && getProto(getProto(values([])));
 
@@ -563,8 +558,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(IteratorPrototype);
-    GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
-    GeneratorFunctionPrototype.constructor = GeneratorFunction;
+    GeneratorFunction.prototype = GeneratorFunctionPrototype;
+    define(Gp, "constructor", GeneratorFunctionPrototype);
+    define(GeneratorFunctionPrototype, "constructor", GeneratorFunction);
     GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"); // Helper for defining the .next, .throw, and .return methods of the
     // Iterator interface in terms of a single ._invoke method.
 
@@ -669,11 +665,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     }
 
     defineIteratorMethods(AsyncIterator.prototype);
-
-    AsyncIterator.prototype[asyncIteratorSymbol] = function () {
+    define(AsyncIterator.prototype, asyncIteratorSymbol, function () {
       return this;
-    };
-
+    });
     exports.AsyncIterator = AsyncIterator; // Note that simple async functions are implemented on top of
     // AsyncIterator objects; they just return a Promise for the value of
     // the final result produced by the iterator.
@@ -850,13 +844,12 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
     // object to not be returned from this call. This ensures that doesn't happen.
     // See https://github.com/facebook/regenerator/issues/274 for more details.
 
-    Gp[iteratorSymbol] = function () {
+    define(Gp, iteratorSymbol, function () {
       return this;
-    };
-
-    Gp.toString = function () {
+    });
+    define(Gp, "toString", function () {
       return "[object Generator]";
-    };
+    });
 
     function pushTryEntry(locs) {
       var entry = {
@@ -1168,14 +1161,19 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   } catch (accidentalStrictMode) {
     // This module should not be running in strict mode, so the above
     // assignment should always work unless something is misconfigured. Just
-    // in case runtime.js accidentally runs in strict mode, we can escape
+    // in case runtime.js accidentally runs in strict mode, in modern engines
+    // we can explicitly access globalThis. In older engines we can escape
     // strict mode using a global Function call. This could conceivably fail
     // if a Content Security Policy forbids using Function, but in that case
     // the proper solution is to fix the accidental strict mode problem. If
     // you've misconfigured your bundler to force strict mode and applied a
     // CSP to forbid Function, and you're not willing to fix either of those
     // problems, please detail your unique predicament in a GitHub issue.
-    Function("r", "regeneratorRuntime = r")(runtime);
+    if (typeof globalThis === "object") {
+      globalThis.regeneratorRuntime = runtime;
+    } else {
+      Function("r", "regeneratorRuntime = r")(runtime);
+    }
   }
 });
 
@@ -1190,12 +1188,12 @@ var FromConfigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
 
   var _super = /*#__PURE__*/_createSuper(FromConfigAdapter);
 
-  function FromConfigAdapter(conf) {
+  function FromConfigAdapter(conf, getSubAdapter, pluginManager) {
     var _this;
 
     _classCallCheck(this, FromConfigAdapter);
 
-    _this = _super.call(this, conf);
+    _this = _super.call(this, conf, getSubAdapter, pluginManager);
     var feats = readConfObject(conf, 'features');
     _this.features = FromConfigAdapter.makeFeatures(feats || []);
     return _this;
@@ -1296,9 +1294,9 @@ var FromConfigAdapter = /*#__PURE__*/function (_BaseFeatureDataAdapt) {
     }
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function
+      /* { region } */
+    freeResources() {}
   }], [{
     key: "makeFeatures",
     value: function makeFeatures(fdata) {
@@ -1359,12 +1357,12 @@ var FromConfigRegionsAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
   var _super = /*#__PURE__*/_createSuper(FromConfigRegionsAdapter);
 
-  function FromConfigRegionsAdapter(config) {
+  function FromConfigRegionsAdapter(config, getSubAdapter, pluginManager) {
     var _this;
 
     _classCallCheck(this, FromConfigRegionsAdapter);
 
-    _this = _super.call(this, config);
+    _this = _super.call(this, config, getSubAdapter, pluginManager);
     var features = readConfObject(config, 'features');
     _this.features = FromConfigAdapter.makeFeatures(features || []);
     return _this;
@@ -1450,26 +1448,26 @@ var FromConfigRegionsAdapter = /*#__PURE__*/function (_BaseAdapter) {
     }()
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function
+      /* { region } */
+    freeResources() {}
   }]);
 
   return FromConfigRegionsAdapter;
 }(BaseAdapter);
 
-var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
-  _inherits(FromSequenceConfigAdapter, _FromConfigAdapter);
+var FromConfigSequenceAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
+  _inherits(FromConfigSequenceAdapter, _FromConfigAdapter);
 
-  var _super = /*#__PURE__*/_createSuper(FromSequenceConfigAdapter);
+  var _super = /*#__PURE__*/_createSuper(FromConfigSequenceAdapter);
 
-  function FromSequenceConfigAdapter() {
-    _classCallCheck(this, FromSequenceConfigAdapter);
+  function FromConfigSequenceAdapter() {
+    _classCallCheck(this, FromConfigSequenceAdapter);
 
     return _super.apply(this, arguments);
   }
 
-  _createClass(FromSequenceConfigAdapter, [{
+  _createClass(FromConfigSequenceAdapter, [{
     key: "getFeatures",
     value:
     /**
@@ -1484,7 +1482,7 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
       // xref: https://github.com/rollup/rollup/blob/master/CHANGELOG.md#bug-fixes-45
       // return ObservableCreate<Feature>(async observer => {
       //   const feats = await super.getFeatures(region).pipe(toArray()).toPromise()
-      var superGetFeatures = _get(_getPrototypeOf(FromSequenceConfigAdapter.prototype), "getFeatures", this);
+      var superGetFeatures = _get(_getPrototypeOf(FromConfigSequenceAdapter.prototype), "getFeatures", this);
 
       return ObservableCreate( /*#__PURE__*/function () {
         var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(observer) {
@@ -1571,20 +1569,16 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
                     if (currentRegion) {
                       regions.push(currentRegion);
                     }
-                  } // sort the regions by refName
-
+                  }
                 } catch (err) {
                   _iterator.e(err);
                 } finally {
                   _iterator.f();
                 }
 
-                regions.sort(function (a, b) {
-                  return a.refName.localeCompare(b.refName);
-                });
                 return _context2.abrupt("return", regions);
 
-              case 5:
+              case 4:
               case "end":
                 return _context2.stop();
             }
@@ -1606,12 +1600,12 @@ var FromSequenceConfigAdapter = /*#__PURE__*/function (_FromConfigAdapter) {
 
   }, {
     key: "freeResources",
-    value: function freeResources()
-    /* { region } */
-    {}
+    value: function
+      /* { region } */
+    freeResources() {}
   }]);
 
-  return FromSequenceConfigAdapter;
+  return FromConfigSequenceAdapter;
 }(FromConfigAdapter);
 
 var configSchema$1 = /*#__PURE__*/ConfigurationSchema('FromConfigAdapter', {
@@ -1659,30 +1653,35 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
 
   var _super = /*#__PURE__*/_createSuper(RefNameAliasAdapter);
 
-  function RefNameAliasAdapter(config) {
-    var _this;
-
+  function RefNameAliasAdapter() {
     _classCallCheck(this, RefNameAliasAdapter);
 
-    _this = _super.call(this, config);
-    _this.location = openLocation(readConfObject(config, 'location'));
-    _this.promise = _this.downloadResults();
-    return _this;
+    return _super.apply(this, arguments);
   }
 
   _createClass(RefNameAliasAdapter, [{
-    key: "downloadResults",
+    key: "getRefNameAliases",
     value: function () {
-      var _downloadResults = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
-        var results;
+      var _getRefNameAliases = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+        var loc, results;
         return runtime_1.wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                _context.next = 2;
-                return this.location.readFile('utf8');
+                loc = readConfObject(this.config, 'location');
+
+                if (!(loc.uri === '' || loc.uri === '/path/to/my/aliases.txt')) {
+                  _context.next = 3;
+                  break;
+                }
+
+                return _context.abrupt("return", []);
+
+              case 3:
+                _context.next = 5;
+                return openLocation(loc).readFile('utf8');
 
-              case 2:
+              case 5:
                 results = _context.sent;
                 return _context.abrupt("return", results.trim().split('\n').map(function (row) {
                   var _row$split = row.split('\t'),
@@ -1696,7 +1695,7 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
                   };
                 }));
 
-              case 4:
+              case 7:
               case "end":
                 return _context.stop();
             }
@@ -1704,17 +1703,12 @@ var RefNameAliasAdapter = /*#__PURE__*/function (_BaseAdapter) {
         }, _callee, this);
       }));
 
-      function downloadResults() {
-        return _downloadResults.apply(this, arguments);
+      function getRefNameAliases() {
+        return _getRefNameAliases.apply(this, arguments);
       }
 
-      return downloadResults;
+      return getRefNameAliases;
     }()
-  }, {
-    key: "getRefNameAliases",
-    value: function getRefNameAliases() {
-      return this.promise;
-    }
   }, {
     key: "freeResources",
     value: function () {
@@ -1745,41 +1739,27 @@ var refNameAliasAdapterConfigSchema = /*#__PURE__*/ConfigurationSchema('RefNameA
   location: {
     type: 'fileLocation',
     defaultValue: {
-      uri: '/path/to/my/aliases.txt'
+      uri: '/path/to/my/aliases.txt',
+      locationType: 'UriLocation'
     }
   }
 }, {
   explicitlyTyped: true
 });
 
-Light.registerLanguage('json', json); // 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 = /*#__PURE__*/makeStyles({
-  callbackEditor: {
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    overflowX: 'auto',
-    marginTop: '16px',
-    borderBottom: '1px solid rgba(0,0,0,0.42)'
-  },
-  syntaxHighlighter: {
-    margin: 0,
-    fontFamily: fontFamily,
-    fontSize: fontSize
-  },
   error: {
     color: 'red',
     fontSize: '0.8em'
   }
 });
+var CodeEditor = /*#__PURE__*/lazy(function () {
+  return Promise.resolve().then(function () { return CodeEditor$2; });
+});
 
 function JsonEditor(_ref) {
   var slot = _ref.slot;
   var classes = useStyles();
-  var theme = useTheme();
 
   var _useState = useState(JSON.stringify(slot.value, null, '  ')),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1808,26 +1788,12 @@ function JsonEditor(_ref) {
   }, /*#__PURE__*/React.createElement(InputLabel, {
     shrink: true,
     htmlFor: "callback-editor"
-  }, slot.name), /*#__PURE__*/React.createElement(Editor, {
-    className: classes.callbackEditor,
-    value: contents,
-    onValueChange: setContents,
-    highlight: function highlight(newCode) {
-      return /*#__PURE__*/React.createElement(Light, {
-        language: "json",
-        style: theme.palette.type === 'dark' ? a11yDark : a11yLight,
-        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
-        // than className
-        ,
-        customStyle: {
-          background: 'none',
-          padding: 0
-        }
-      }, newCode);
-    },
-    padding: 10,
-    style: {}
-  }), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description)));
+  }, slot.name), /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(CodeEditor, {
+    contents: contents,
+    setContents: setContents
+  })), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description)));
 }
 
 JsonEditor.propTypes = {
@@ -1861,28 +1827,52 @@ var _default = /*#__PURE__*/function (_Plugin) {
         return new AdapterType({
           name: 'FromConfigAdapter',
           configSchema: configSchema$1,
-          AdapterClass: FromConfigAdapter
+          AdapterClass: FromConfigAdapter,
+          adapterMetadata: {
+            category: null,
+            hiddenFromGUI: true,
+            displayName: null,
+            description: null
+          }
         });
       });
       pluginManager.addAdapterType(function () {
         return new AdapterType({
           name: 'FromConfigRegionsAdapter',
           configSchema: regionsConfigSchema,
-          AdapterClass: FromConfigRegionsAdapter
+          AdapterClass: FromConfigRegionsAdapter,
+          adapterMetadata: {
+            category: null,
+            hiddenFromGUI: true,
+            displayName: null,
+            description: null
+          }
         });
       });
       pluginManager.addAdapterType(function () {
         return new AdapterType({
           name: 'FromConfigSequenceAdapter',
           configSchema: sequenceConfigSchema,
-          AdapterClass: FromSequenceConfigAdapter
+          AdapterClass: FromConfigSequenceAdapter,
+          adapterMetadata: {
+            category: null,
+            hiddenFromGUI: true,
+            displayName: null,
+            description: null
+          }
         });
       });
       pluginManager.addAdapterType(function () {
         return new AdapterType({
           name: 'RefNameAliasAdapter',
           configSchema: refNameAliasAdapterConfigSchema,
-          AdapterClass: RefNameAliasAdapter
+          AdapterClass: RefNameAliasAdapter,
+          adapterMetadata: {
+            category: null,
+            hiddenFromGUI: true,
+            displayName: null,
+            description: null
+          }
         });
       });
       pluginManager.addWidgetType(function () {
@@ -1900,11 +1890,64 @@ var _default = /*#__PURE__*/function (_Plugin) {
   return _default;
 }(Plugin);
 
+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$1 = /*#__PURE__*/makeStyles({
+  callbackEditor: {
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    overflowX: 'auto',
+    marginTop: '16px',
+    borderBottom: '1px solid rgba(0,0,0,0.42)'
+  },
+  syntaxHighlighter: {
+    margin: 0,
+    fontFamily: fontFamily,
+    fontSize: fontSize
+  }
+}); // eslint-disable-next-line react/prop-types
+
+function CodeEditor$1(_ref) {
+  var contents = _ref.contents,
+      setContents = _ref.setContents;
+  var classes = useStyles$1();
+  var theme = useTheme();
+  useEffect(function () {
+    Light.registerLanguage('json', json);
+  }, []);
+  return /*#__PURE__*/React.createElement(Editor, {
+    className: classes.callbackEditor,
+    value: contents,
+    onValueChange: setContents,
+    highlight: function highlight(newCode) {
+      return /*#__PURE__*/React.createElement(Light, {
+        language: "json",
+        style: theme.palette.type === 'dark' ? a11yDark : a11yLight,
+        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
+        // than className
+        ,
+        customStyle: {
+          background: 'none',
+          padding: 0
+        }
+      }, newCode);
+    },
+    padding: 10,
+    style: {}
+  });
+}
+
+var CodeEditor$2 = {
+  __proto__: null,
+  'default': CodeEditor$1
+};
+
 var fontSize$1 = '12px'; // Optimize by using system default fonts:
 // https://css-tricks.com/snippets/css/font-stacks/
 
 var fontFamily$1 = '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$1 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$2 = /*#__PURE__*/makeStyles(function (theme) {
   return {
     callbackEditor: {
       marginTop: '16px',
@@ -1917,7 +1960,7 @@ var useStyles$1 = /*#__PURE__*/makeStyles(function (theme) {
 
 function CallbackEditor(_ref) {
   var slot = _ref.slot;
-  var classes = useStyles$1();
+  var classes = useStyles$2();
 
   var _useState = useState(slot.value),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1981,6 +2024,9 @@ CallbackEditor.propTypes = {
 };
 var CallbackEditor$1 = /*#__PURE__*/observer(CallbackEditor);
 
+var ColorPicker = /*#__PURE__*/lazy(function () {
+  return Promise.resolve().then(function () { return ColorPicker$2; });
+}); // 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) {
@@ -1995,58 +2041,16 @@ function serializeColor(color) {
   return color;
 }
 
-var useStyles$2 = /*#__PURE__*/makeStyles({
-  popover: {
-    position: 'absolute',
-    zIndex: 2
-  },
-  cover: {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  }
-});
-function ColorPicker(props) {
-  var color = props.color,
-      onChange = props.onChange;
-  var classes = useStyles$2();
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      displayColorPicker = _useState2[0],
-      setDisplayColorPicker = _useState2[1];
-
-  var handleClose = function handleClose() {
-    setDisplayColorPicker(false);
-  };
-
-  return /*#__PURE__*/React.createElement("div", null, displayColorPicker ? /*#__PURE__*/React.createElement("div", {
-    className: classes.popover
-  }, /*#__PURE__*/React.createElement("div", {
-    role: "presentation",
-    className: classes.cover,
-    onClick: handleClose
-  }), /*#__PURE__*/React.createElement(ChromePicker, {
-    color: color,
-    onChange: onChange
-  })) : null);
-}
-ColorPicker.propTypes = {
-  color: ReactPropTypes.string.isRequired,
-  onChange: ReactPropTypes.func.isRequired
-};
 var ColorSlot = function ColorSlot(props) {
   var value = props.value,
       label = props.label,
       TextFieldProps = props.TextFieldProps,
       _onChange = props.onChange;
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      displayed = _useState4[0],
-      setDisplayed = _useState4[1];
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayed = _useState2[0],
+      setDisplayed = _useState2[1];
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextField, Object.assign({
     value: value,
@@ -2065,12 +2069,14 @@ var ColorSlot = function ColorSlot(props) {
     onChange: function onChange(event) {
       _onChange(event.target.value);
     }
-  }, TextFieldProps)), displayed ? /*#__PURE__*/React.createElement(ColorPicker, {
+  }, TextFieldProps)), displayed ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
     color: value,
     onChange: function onChange(event) {
       _onChange(serializeColor(event.rgb));
     }
-  }) : null);
+  })) : null);
 };
 ColorSlot.propTypes = {
   onChange: ReactPropTypes.func.isRequired,
@@ -2150,7 +2156,7 @@ var StringArrayEditor = /*#__PURE__*/observer(function (_ref3) {
       value = _useState2[0],
       setValue = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, slot.name ? /*#__PURE__*/React.createElement(InputLabel$1, null, slot.name) : null, /*#__PURE__*/React.createElement(List, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, slot.name ? /*#__PURE__*/React.createElement(InputLabel, null, slot.name) : null, /*#__PURE__*/React.createElement(List, {
     disablePadding: true
   }, slot.value.map(function (val, idx) {
     return /*#__PURE__*/React.createElement(ListItem, {
@@ -2164,7 +2170,7 @@ var StringArrayEditor = /*#__PURE__*/observer(function (_ref3) {
       InputProps: {
         endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
           position: "end"
-        }, /*#__PURE__*/React.createElement(IconButton$1, {
+        }, /*#__PURE__*/React.createElement(IconButton, {
           color: "secondary",
           onClick: function onClick() {
             return slot.removeAtIndex(idx);
@@ -2183,7 +2189,7 @@ var StringArrayEditor = /*#__PURE__*/observer(function (_ref3) {
     InputProps: {
       endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
         position: "end"
-      }, /*#__PURE__*/React.createElement(IconButton$1, {
+      }, /*#__PURE__*/React.createElement(IconButton, {
         onClick: function onClick() {
           slot.add(value);
           setValue('');
@@ -2193,9 +2199,9 @@ var StringArrayEditor = /*#__PURE__*/observer(function (_ref3) {
         "data-testid": "stringArrayAdd-".concat(slot.name)
       }, /*#__PURE__*/React.createElement(AddIcon, null)))
     }
-  }))), /*#__PURE__*/React.createElement(FormHelperText$1, null, slot.description));
+  }))), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description));
 });
-var useMapEditorStyles = /*#__PURE__*/makeStyles$1(function (theme) {
+var useMapEditorStyles = /*#__PURE__*/makeStyles(function (theme) {
   return {
     card: {
       marginTop: theme.spacing(1)
@@ -2211,7 +2217,7 @@ var StringArrayMapEditor = /*#__PURE__*/observer(function (_ref4) {
       value = _useState4[0],
       setValue = _useState4[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel$1, null, slot.name), Array.from(slot.value, function (_ref5) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel, null, slot.name), Array.from(slot.value, function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
         key = _ref6[0],
         val = _ref6[1];
@@ -2222,7 +2228,7 @@ var StringArrayMapEditor = /*#__PURE__*/observer(function (_ref4) {
       className: classes.card
     }, /*#__PURE__*/React.createElement(CardHeader, {
       title: key,
-      action: /*#__PURE__*/React.createElement(IconButton$1, {
+      action: /*#__PURE__*/React.createElement(IconButton, {
         color: "secondary",
         onClick: function onClick() {
           return slot.remove(key);
@@ -2258,7 +2264,7 @@ var StringArrayMapEditor = /*#__PURE__*/observer(function (_ref4) {
       InputProps: {
         endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
           position: "end"
-        }, /*#__PURE__*/React.createElement(IconButton$1, {
+        }, /*#__PURE__*/React.createElement(IconButton, {
           disabled: value === '',
           onClick: function onClick() {
             slot.add(value, []);
@@ -2268,7 +2274,7 @@ var StringArrayMapEditor = /*#__PURE__*/observer(function (_ref4) {
         }, /*#__PURE__*/React.createElement(AddIcon, null)))
       }
     })
-  })), /*#__PURE__*/React.createElement(FormHelperText$1, null, slot.description));
+  })), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description));
 });
 var NumberMapEditor = /*#__PURE__*/observer(function (_ref7) {
   var slot = _ref7.slot;
@@ -2279,7 +2285,7 @@ var NumberMapEditor = /*#__PURE__*/observer(function (_ref7) {
       value = _useState6[0],
       setValue = _useState6[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel$1, null, slot.name), Array.from(slot.value, function (_ref8) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel, null, slot.name), Array.from(slot.value, function (_ref8) {
     var _ref9 = _slicedToArray(_ref8, 2),
         key = _ref9[0],
         val = _ref9[1];
@@ -2290,7 +2296,7 @@ var NumberMapEditor = /*#__PURE__*/observer(function (_ref7) {
       className: classes.card
     }, /*#__PURE__*/React.createElement(CardHeader, {
       title: key,
-      action: /*#__PURE__*/React.createElement(IconButton$1, {
+      action: /*#__PURE__*/React.createElement(IconButton, {
         color: "secondary",
         onClick: function onClick() {
           return slot.remove(key);
@@ -2319,7 +2325,7 @@ var NumberMapEditor = /*#__PURE__*/observer(function (_ref7) {
       InputProps: {
         endAdornment: /*#__PURE__*/React.createElement(InputAdornment, {
           position: "end"
-        }, /*#__PURE__*/React.createElement(IconButton$1, {
+        }, /*#__PURE__*/React.createElement(IconButton, {
           disabled: value === '',
           onClick: function onClick() {
             slot.add(value, 0);
@@ -2329,7 +2335,7 @@ var NumberMapEditor = /*#__PURE__*/observer(function (_ref7) {
         }, /*#__PURE__*/React.createElement(AddIcon, null)))
       }
     })
-  })), /*#__PURE__*/React.createElement(FormHelperText$1, null, slot.description));
+  })), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description));
 });
 var NumberEditor = /*#__PURE__*/observer(function (_ref10) {
   var slot = _ref10.slot;
@@ -2385,7 +2391,7 @@ var IntegerEditor = /*#__PURE__*/observer(function (_ref11) {
 });
 var booleanEditor = /*#__PURE__*/observer(function (_ref12) {
   var slot = _ref12.slot;
-  return /*#__PURE__*/React.createElement(FormControl$1, null, /*#__PURE__*/React.createElement(FormControlLabel, {
+  return /*#__PURE__*/React.createElement(FormControl, null, /*#__PURE__*/React.createElement(FormControlLabel, {
     label: slot.name,
     control: /*#__PURE__*/React.createElement(Checkbox, {
       checked: slot.value,
@@ -2393,7 +2399,7 @@ var booleanEditor = /*#__PURE__*/observer(function (_ref12) {
         return slot.set(evt.target.checked);
       }
     })
-  }), /*#__PURE__*/React.createElement(FormHelperText$1, null, slot.description));
+  }), /*#__PURE__*/React.createElement(FormHelperText, null, slot.description));
 });
 var stringEnumEditor = /*#__PURE__*/observer(function (_ref13) {
   var slot = _ref13.slot,
@@ -2420,6 +2426,8 @@ var stringEnumEditor = /*#__PURE__*/observer(function (_ref13) {
   }));
 });
 var FileSelectorWrapper = /*#__PURE__*/observer(function (_ref14) {
+  var _getEnv$pluginManager;
+
   var slot = _ref14.slot;
   return /*#__PURE__*/React.createElement(FileSelector, {
     location: slot.value,
@@ -2427,7 +2435,8 @@ var FileSelectorWrapper = /*#__PURE__*/observer(function (_ref14) {
       return slot.set(location);
     },
     name: slot.name,
-    description: slot.description
+    description: slot.description,
+    rootModel: (_getEnv$pluginManager = getEnv(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.rootModel
   });
 });
 var valueComponents = {
@@ -2445,7 +2454,7 @@ var valueComponents = {
   frozen: JsonEditor$1,
   configRelationships: JsonEditor$1
 };
-var useSlotEditorStyles = /*#__PURE__*/makeStyles$1(function (theme) {
+var useSlotEditorStyles = /*#__PURE__*/makeStyles(function (theme) {
   return {
     paper: {
       display: 'flex',
@@ -2492,7 +2501,7 @@ var SlotEditor = /*#__PURE__*/observer(function (_ref15) {
     slotSchema: slotSchema
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.slotModeSwitch
-  }, slot.contextVariable.length ? /*#__PURE__*/React.createElement(IconButton$1, {
+  }, slot.contextVariable.length ? /*#__PURE__*/React.createElement(IconButton, {
     className: classes.slotModeIcon,
     onClick: function onClick() {
       return slot.isCallback ? slot.convertToValue() : slot.convertToCallback();
@@ -2528,7 +2537,7 @@ var TypeSelector = /*#__PURE__*/observer(function (_ref) {
   }))));
 });
 
-var useStyles$3 = /*#__PURE__*/makeStyles(function (theme) {
+var useStyles$3 = /*#__PURE__*/makeStyles$1(function (theme) {
   return {
     subSchemaContainer: {
       marginLeft: theme.spacing(1),
@@ -2637,6 +2646,55 @@ var ConfigurationEditor$1 = {
   'default': ConfigurationEditor
 };
 
+var useStyles$4 = /*#__PURE__*/makeStyles$1({
+  popover: {
+    position: 'absolute',
+    zIndex: 2
+  },
+  cover: {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  }
+});
+function ColorPicker$1(props) {
+  var color = props.color,
+      onChange = props.onChange;
+  var classes = useStyles$4();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayColorPicker = _useState2[0],
+      setDisplayColorPicker = _useState2[1];
+
+  var handleClose = function handleClose() {
+    setDisplayColorPicker(false);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, displayColorPicker ? /*#__PURE__*/React.createElement("div", {
+    className: classes.popover
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    className: classes.cover,
+    onClick: handleClose
+  }), /*#__PURE__*/React.createElement(ChromePicker, {
+    color: color,
+    onChange: onChange
+  })) : null);
+}
+ColorPicker$1.propTypes = {
+  color: ReactPropTypes.string.isRequired,
+  onChange: ReactPropTypes.func.isRequired
+};
+
+var ColorPicker$2 = {
+  __proto__: null,
+  ColorPicker: ColorPicker$1,
+  'default': ColorPicker$1
+};
+
 export default _default;
 export { ConfigurationEditorComponent as ConfigurationEditor, JsonEditor$1 as JsonEditor };
 //# sourceMappingURL=plugin-config.esm.js.map