@jbrowse/plugin-config 1.6.9 → 1.7.0

package/dist/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -0,0 +1,123 @@
+"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
+    }
+  };
+});
+
+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 () {
+    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);
+    }
+  }, [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);
+    },
+    highlight: function highlight(newCode) {
+      return newCode;
+    },
+    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))));
+}
+
+CallbackEditor.propTypes = {
+  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
+};
+
+var _default = (0, _mobxReact.observer)(CallbackEditor);
+
+exports["default"] = _default;

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -0,0 +1,77 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CodeEditor;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactSimpleCodeEditor = _interopRequireDefault(require("react-simple-code-editor"));
+
+var _reactSyntaxHighlighter = require("react-syntax-highlighter");
+
+var _json = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/hljs/json"));
+
+var _a11yDark = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/styles/hljs/a11y-dark"));
+
+var _a11yLight = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/styles/hljs/a11y-light"));
+
+var _core = require("@material-ui/core");
+
+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)({
+  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(_ref) {
+  var contents = _ref.contents,
+      setContents = _ref.setContents;
+  var classes = useStyles();
+  var theme = (0, _core.useTheme)();
+  (0, _react.useEffect)(function () {
+    _reactSyntaxHighlighter.Light.registerLanguage('json', _json["default"]);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_reactSimpleCodeEditor["default"], {
+    className: classes.callbackEditor,
+    value: contents,
+    onValueChange: setContents,
+    highlight: function highlight(newCode) {
+      return /*#__PURE__*/_react["default"].createElement(_reactSyntaxHighlighter.Light, {
+        language: "json",
+        style: theme.palette.type === 'dark' ? _a11yDark["default"] : _a11yLight["default"],
+        className: classes.syntaxHighlighter // override some inline style stuff that's higher specificity
+        // than className
+        ,
+        customStyle: {
+          background: 'none',
+          padding: 0
+        }
+      }, newCode);
+    },
+    padding: 10,
+    style: {}
+  });
+}

package/dist/ConfigurationEditorWidget/components/ColorEditor.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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);
+    }
+  }, 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));
+    }
+  })) : null);
+};
+
+exports.ColorSlot = ColorSlot;
+ColorSlot.propTypes = {
+  onChange: _propTypes["default"].func.isRequired,
+  label: _propTypes["default"].string,
+  TextFieldProps: _propTypes["default"].shape({}),
+  value: _propTypes["default"].string
+};
+ColorSlot.defaultProps = {
+  label: '',
+  value: '#000',
+  TextFieldProps: {}
+};
+
+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
+    }
+  });
+}
+
+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;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _ColorEditor = require("./ColorEditor");
+
+describe('ColorPicker widget', function () {
+  it('can change value via the text field', function () {
+    var myfn = jest.fn();
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ColorEditor.ColorSlot, {
+      value: "green",
+      onChange: myfn
+    })),
+        getByDisplayValue = _render.getByDisplayValue;
+
+    var ret = getByDisplayValue('green');
+
+    _react2.fireEvent.change(ret, {
+      target: {
+        value: 'red'
+      }
+    });
+
+    expect(myfn).toHaveBeenCalledWith('red');
+  });
+});

package/dist/ConfigurationEditorWidget/components/ColorPicker.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorPicker = ColorPicker;
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactColor = require("react-color");
+
+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; }
+
+var useStyles = (0, _styles.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();
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      displayColorPicker = _useState2[0],
+      setDisplayColorPicker = _useState2[1];
+
+  var handleClose = function handleClose() {
+    setDisplayColorPicker(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, displayColorPicker ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.popover
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    role: "presentation",
+    className: classes.cover,
+    onClick: handleClose
+  }), /*#__PURE__*/_react["default"].createElement(_reactColor.ChromePicker, {
+    color: color,
+    onChange: onChange
+  })) : null);
+}
+
+ColorPicker.propTypes = {
+  color: _propTypes["default"].string.isRequired,
+  onChange: _propTypes["default"].func.isRequired
+};
+var _default = ColorPicker;
+exports["default"] = _default;

package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -0,0 +1,176 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _pluralize = require("pluralize");
+
+var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+
+var _SlotEditor = _interopRequireDefault(require("./SlotEditor"));
+
+var _TypeSelector = _interopRequireDefault(require("./TypeSelector"));
+
+// icons
+// locals
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    expandIcon: {
+      color: '#fff'
+    },
+    root: {
+      padding: theme.spacing(1, 3, 1, 1)
+    },
+    expansionPanelDetails: {
+      display: 'block',
+      padding: theme.spacing(1)
+    },
+    accordion: {
+      border: "1px solid ".concat(theme.palette.text.primary)
+    }
+  };
+});
+var Member = (0, _mobxReact.observer)(function (props) {
+  var classes = useStyles();
+  var slotName = props.slotName,
+      slotSchema = props.slotSchema,
+      schema = props.schema,
+      _props$slot = props.slot,
+      slot = _props$slot === void 0 ? schema[slotName] : _props$slot,
+      _props$path = props.path,
+      path = _props$path === void 0 ? [] : _props$path;
+  var typeSelector;
+
+  if ((0, _configuration.isConfigurationSchemaType)(slotSchema)) {
+    if (slot.length) {
+      return slot.map(function (subslot, slotIndex) {
+        var key = "".concat((0, _pluralize.singular)(slotName), " ").concat(slotIndex + 1);
+        return /*#__PURE__*/_react["default"].createElement(Member, (0, _extends2["default"])({}, props, {
+          key: key,
+          slot: subslot,
+          slotName: key
+        }));
+      });
+    } // if this is an explicitly typed schema, make a type-selecting dropdown
+    // that can be used to change its type
+
+
+    var typeNameChoices = (0, _configuration.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
+
+    if (typeNameChoices.length) {
+      typeSelector = /*#__PURE__*/_react["default"].createElement(_TypeSelector["default"], {
+        typeNameChoices: typeNameChoices,
+        slotName: slotName,
+        slot: slot,
+        onChange: function onChange(evt) {
+          if (evt.target.value !== slot.type) {
+            schema.setSubschema(slotName, {
+              type: evt.target.value
+            });
+          }
+        }
+      });
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_core.Accordion, {
+      defaultExpanded: true,
+      className: classes.accordion,
+      TransitionProps: {
+        unmountOnExit: true,
+        timeout: 150
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_core.AccordionSummary, {
+      expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
+        className: classes.expandIcon
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, [].concat((0, _toConsumableArray2["default"])(path), [slotName]).join('🡒'))), /*#__PURE__*/_react["default"].createElement(_core.AccordionDetails, {
+      className: classes.expansionPanelDetails
+    }, typeSelector, /*#__PURE__*/_react["default"].createElement(_core.FormGroup, null, /*#__PURE__*/_react["default"].createElement(Schema, {
+      schema: slot,
+      path: [].concat((0, _toConsumableArray2["default"])(path), [slotName])
+    }))));
+  }
+
+  if ((0, _configuration.isConfigurationSlotType)(slotSchema)) {
+    // this is a regular config slot
+    return /*#__PURE__*/_react["default"].createElement(_SlotEditor["default"], {
+      key: slotName,
+      slot: slot,
+      slotSchema: slotSchema
+    });
+  }
+
+  return null;
+});
+var Schema = (0, _mobxReact.observer)(function (_ref) {
+  var schema = _ref.schema,
+      _ref$path = _ref.path,
+      path = _ref$path === void 0 ? [] : _ref$path;
+  var properties = (0, _mobxStateTree.getMembers)(schema).properties;
+  return Object.entries(properties).map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+        slotName = _ref3[0],
+        slotSchema = _ref3[1];
+
+    return /*#__PURE__*/_react["default"].createElement(Member, {
+      key: slotName,
+      slotName: slotName,
+      slotSchema: slotSchema,
+      path: path,
+      schema: schema
+    });
+  });
+});
+var ConfigurationEditor = (0, _mobxReact.observer)(function (_ref4) {
+  var model = _ref4.model;
+  var classes = useStyles(); // key forces a re-render, otherwise the same field can end up being used
+  // for different tracks since only the backing model changes for example
+  // see pr #804
+
+  var key = model.target && (0, _configuration.readConfObject)(model.target, 'trackId');
+  var name = model.target && (0, _configuration.readConfObject)(model.target, 'name');
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.Accordion, {
+    key: key,
+    defaultExpanded: true,
+    className: classes.accordion,
+    TransitionProps: {
+      unmountOnExit: true,
+      timeout: 150
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_core.AccordionSummary, {
+    expandIcon: /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], {
+      className: classes.expandIcon
+    })
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, null, name ? name : 'Configuration')), /*#__PURE__*/_react["default"].createElement(_core.AccordionDetails, {
+    className: classes.expansionPanelDetails,
+    "data-testid": "configEditor"
+  }, !model.target ? 'no target set' : /*#__PURE__*/_react["default"].createElement(Schema, {
+    schema: model.target
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      height: 300
+    }
+  }));
+});
+var _default = ConfigurationEditor;
+exports["default"] = _default;