@jbrowse/plugin-config 1.6.7 → 1.7.0

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _configuration = require("@jbrowse/core/configuration");
+
+var _PluginManager = _interopRequireDefault(require("@jbrowse/core/PluginManager"));
+
+var _pluginAlignments = _interopRequireDefault(require("@jbrowse/plugin-alignments"));
+
+var _pluginSvg = _interopRequireDefault(require("@jbrowse/plugin-svg"));
+
+var _pluginLinearGenomeView = require("@jbrowse/plugin-linear-genome-view");
+
+var _ConfigurationEditor = _interopRequireDefault(require("./ConfigurationEditor"));
+
+describe('ConfigurationEditor widget', function () {
+  it('renders with just the required model elements', function () {
+    var TestSchema = (0, _configuration.ConfigurationSchema)('TestThing', {
+      foo: {
+        type: 'string',
+        defaultValue: 'bar'
+      }
+    });
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ConfigurationEditor["default"], {
+      model: {
+        target: TestSchema.create()
+      }
+    })),
+        container = _render.container;
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders all the different types of built-in slots', function () {
+    var TestSchema = (0, _configuration.ConfigurationSchema)('TestThing', {
+      stringTest: {
+        name: 'stringTest',
+        description: 'stringTest',
+        type: 'string',
+        defaultValue: 'string1'
+      },
+      fileLocationTest: {
+        name: 'fileLocationTest',
+        description: 'fileLocationTest',
+        type: 'fileLocation',
+        defaultValue: {
+          uri: '/path/to/my.file',
+          locationType: 'UriLocation'
+        }
+      },
+      stringArrayTest: {
+        name: 'stringArrayTest',
+        description: 'stringArrayTest',
+        type: 'stringArray',
+        defaultValue: ['string1', 'string2']
+      },
+      stringArrayMapTest: {
+        name: 'stringArrayMapTest',
+        description: 'stringArrayMapTest',
+        type: 'stringArrayMap',
+        defaultValue: {
+          key1: ['string1', 'string2']
+        }
+      },
+      numberTest: {
+        name: 'numberTest',
+        description: 'numberTest',
+        type: 'number',
+        defaultValue: 88.5
+      },
+      integerTest: {
+        name: 'integerTest',
+        description: 'integerTest',
+        type: 'integer',
+        defaultValue: 42
+      },
+      colorTest: {
+        name: 'colorTest',
+        description: 'colorTest',
+        type: 'color',
+        defaultValue: '#396494'
+      },
+      booleanTest: {
+        name: 'booleanTest',
+        description: 'booleanTest',
+        type: 'boolean',
+        defaultValue: true
+      }
+    });
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ConfigurationEditor["default"], {
+      model: {
+        target: TestSchema.create()
+      }
+    })),
+        container = _render2.container;
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+  it('renders with defaults of the PileupTrack schema', function () {
+    console.warn = jest.fn();
+    var pluginManager = new _PluginManager["default"]([new _pluginAlignments["default"](), new _pluginSvg["default"]()]);
+    pluginManager.createPluggableElements();
+    pluginManager.configure();
+    var PileupDisplaySchema = (0, _pluginLinearGenomeView.linearBasicDisplayConfigSchemaFactory)(pluginManager);
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ConfigurationEditor["default"], {
+      model: {
+        target: PileupDisplaySchema.create()
+      }
+    })),
+        container = _render3.container;
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/dist/ConfigurationEditorWidget/components/JsonEditor.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _util = require("@jbrowse/core/util");
+
+var _core = require("@material-ui/core");
+
+var _mobxReact = require("mobx-react");
+
+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 useStyles = (0, _core.makeStyles)({
+  error: {
+    color: 'red',
+    fontSize: '0.8em'
+  }
+});
+var CodeEditor = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require('./CodeEditor'));
+  });
+});
+
+function JsonEditor(_ref) {
+  var slot = _ref.slot;
+  var classes = useStyles();
+
+  var _useState = (0, _react.useState)(JSON.stringify(slot.value, null, '  ')),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      contents = _useState2[0],
+      setContents = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      error = _useState4[0],
+      setError = _useState4[1];
+
+  var debouncedJson = (0, _util.useDebounce)(contents, 400);
+  (0, _react.useEffect)(function () {
+    try {
+      slot.set(JSON.parse(debouncedJson));
+      setError(undefined);
+    } catch (e) {
+      setError(e.message);
+    }
+  }, [debouncedJson, slot]);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, error ? /*#__PURE__*/_react["default"].createElement("p", {
+    className: classes.error
+  }, error) : null, /*#__PURE__*/_react["default"].createElement(_core.FormControl, {
+    error: error
+  }, /*#__PURE__*/_react["default"].createElement(_core.InputLabel, {
+    shrink: true,
+    htmlFor: "callback-editor"
+  }, slot.name), /*#__PURE__*/_react["default"].createElement(_react["default"].Suspense, {
+    fallback: /*#__PURE__*/_react["default"].createElement("div", null)
+  }, /*#__PURE__*/_react["default"].createElement(CodeEditor, {
+    contents: contents,
+    setContents: setContents
+  })), /*#__PURE__*/_react["default"].createElement(_core.FormHelperText, null, slot.description)));
+}
+
+JsonEditor.propTypes = {
+  slot: _mobxReact.PropTypes.objectOrObservableObject.isRequired
+};
+
+var _default = (0, _mobxReact.observer)(JsonEditor);
+
+exports["default"] = _default;

package/dist/ConfigurationEditorWidget/components/SlotEditor.js

@@ -0,0 +1,438 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSlotEditorStyles = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mobxReact = require("mobx-react");
+
+var _mobxStateTree = require("mobx-state-tree");
+
+var _ui = require("@jbrowse/core/ui");
+
+var _mstReflection = require("@jbrowse/core/util/mst-reflection");
+
+var _core = require("@material-ui/core");
+
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+var _RadioButtonUnchecked = _interopRequireDefault(require("@material-ui/icons/RadioButtonUnchecked"));
+
+var _CallbackEditor = _interopRequireDefault(require("./CallbackEditor"));
+
+var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));
+
+var _JsonEditor = _interopRequireDefault(require("./JsonEditor"));
+
+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; }
+
+// icons
+// locals
+var StringEditor = (0, _mobxReact.observer)(function (_ref) {
+  var slot = _ref.slot;
+  return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    label: slot.name // error={filterError}
+    ,
+    helperText: slot.description,
+    fullWidth: true,
+    value: slot.value,
+    onChange: function onChange(evt) {
+      return slot.set(evt.target.value);
+    }
+  });
+});
+var TextEditor = (0, _mobxReact.observer)(function (_ref2) {
+  var slot = _ref2.slot;
+  return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    label: slot.name,
+    helperText: slot.description,
+    fullWidth: true,
+    multiline: true,
+    value: slot.value,
+    onChange: function onChange(evt) {
+      return slot.set(evt.target.value);
+    }
+  });
+}); // checked checkbox, looks like a styled (x)
+
+var SvgCheckbox = function SvgCheckbox() {
+  return /*#__PURE__*/_react["default"].createElement(_core.SvgIcon, null, /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z"
+  }));
+};
+
+var StringArrayEditor = (0, _mobxReact.observer)(function (_ref3) {
+  var slot = _ref3.slot;
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, slot.name ? /*#__PURE__*/_react["default"].createElement(_core.InputLabel, null, slot.name) : null, /*#__PURE__*/_react["default"].createElement(_core.List, {
+    disablePadding: true
+  }, slot.value.map(function (val, idx) {
+    return /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
+      key: idx,
+      disableGutters: true
+    }, /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+      value: val,
+      onChange: function onChange(evt) {
+        return slot.setAtIndex(idx, evt.target.value);
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+          color: "secondary",
+          onClick: function onClick() {
+            return slot.removeAtIndex(idx);
+          }
+        }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)))
+      }
+    }));
+  }), /*#__PURE__*/_react["default"].createElement(_core.ListItem, {
+    disableGutters: true
+  }, /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    value: value,
+    placeholder: "add new",
+    onChange: function onChange(event) {
+      return setValue(event.target.value);
+    },
+    InputProps: {
+      endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
+        position: "end"
+      }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+        onClick: function onClick() {
+          slot.add(value);
+          setValue('');
+        },
+        disabled: value === '',
+        color: "secondary",
+        "data-testid": "stringArrayAdd-".concat(slot.name)
+      }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))
+    }
+  }))), /*#__PURE__*/_react["default"].createElement(_core.FormHelperText, null, slot.description));
+});
+var useMapEditorStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    card: {
+      marginTop: theme.spacing(1)
+    }
+  };
+});
+var StringArrayMapEditor = (0, _mobxReact.observer)(function (_ref4) {
+  var slot = _ref4.slot;
+  var classes = useMapEditorStyles();
+
+  var _useState3 = (0, _react.useState)(''),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref5) {
+    var _ref6 = (0, _slicedToArray2["default"])(_ref5, 2),
+        key = _ref6[0],
+        val = _ref6[1];
+
+    return /*#__PURE__*/_react["default"].createElement(_core.Card, {
+      raised: true,
+      key: key,
+      className: classes.card
+    }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
+      title: key,
+      action: /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+        color: "secondary",
+        onClick: function onClick() {
+          return slot.remove(key);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))
+    }), /*#__PURE__*/_react["default"].createElement(_core.CardContent, null, /*#__PURE__*/_react["default"].createElement(StringArrayEditor, {
+      slot: {
+        value: val,
+        description: "Values associated with entry ".concat(key),
+        setAtIndex: function setAtIndex(idx, strValue) {
+          slot.setAtKeyIndex(key, idx, strValue);
+        },
+        removeAtIndex: function removeAtIndex(idx) {
+          slot.removeAtKeyIndex(key, idx);
+        },
+        add: function add(strValue) {
+          slot.addToKey(key, strValue);
+        }
+      }
+    })));
+  }), /*#__PURE__*/_react["default"].createElement(_core.Card, {
+    raised: true,
+    className: classes.card
+  }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
+    disableTypography: true,
+    title: /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+      fullWidth: true,
+      value: value,
+      placeholder: "add new",
+      onChange: function onChange(event) {
+        return setValue(event.target.value);
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+          disabled: value === '',
+          onClick: function onClick() {
+            slot.add(value, []);
+            setValue('');
+          },
+          color: "secondary"
+        }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))
+      }
+    })
+  })), /*#__PURE__*/_react["default"].createElement(_core.FormHelperText, null, slot.description));
+});
+var NumberMapEditor = (0, _mobxReact.observer)(function (_ref7) {
+  var slot = _ref7.slot;
+  var classes = useMapEditorStyles();
+
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.InputLabel, null, slot.name), Array.from(slot.value, function (_ref8) {
+    var _ref9 = (0, _slicedToArray2["default"])(_ref8, 2),
+        key = _ref9[0],
+        val = _ref9[1];
+
+    return /*#__PURE__*/_react["default"].createElement(_core.Card, {
+      raised: true,
+      key: key,
+      className: classes.card
+    }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
+      title: key,
+      action: /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+        color: "secondary",
+        onClick: function onClick() {
+          return slot.remove(key);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null))
+    }), /*#__PURE__*/_react["default"].createElement(_core.CardContent, null, /*#__PURE__*/_react["default"].createElement(NumberEditor, {
+      slot: {
+        value: val,
+        set: function set(numValue) {
+          return slot.add(key, numValue);
+        }
+      }
+    })));
+  }), /*#__PURE__*/_react["default"].createElement(_core.Card, {
+    raised: true,
+    className: classes.card
+  }, /*#__PURE__*/_react["default"].createElement(_core.CardHeader, {
+    disableTypography: true,
+    title: /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+      fullWidth: true,
+      value: value,
+      placeholder: "add new",
+      onChange: function onChange(event) {
+        return setValue(event.target.value);
+      },
+      InputProps: {
+        endAdornment: /*#__PURE__*/_react["default"].createElement(_core.InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+          disabled: value === '',
+          onClick: function onClick() {
+            slot.add(value, 0);
+            setValue('');
+          },
+          color: "secondary"
+        }, /*#__PURE__*/_react["default"].createElement(_Add["default"], null)))
+      }
+    })
+  })), /*#__PURE__*/_react["default"].createElement(_core.FormHelperText, null, slot.description));
+});
+var NumberEditor = (0, _mobxReact.observer)(function (_ref10) {
+  var slot = _ref10.slot;
+
+  var _useState7 = (0, _react.useState)(slot.value),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      val = _useState8[0],
+      setVal = _useState8[1];
+
+  (0, _react.useEffect)(function () {
+    var num = parseFloat(val, 10);
+
+    if (!Number.isNaN(num)) {
+      slot.set(num);
+    } else {
+      slot.reset();
+    }
+  }, [slot, val]);
+  return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    label: slot.name,
+    helperText: slot.description,
+    value: val,
+    type: "number",
+    onChange: function onChange(evt) {
+      return setVal(evt.target.value);
+    }
+  });
+});
+var IntegerEditor = (0, _mobxReact.observer)(function (_ref11) {
+  var slot = _ref11.slot;
+
+  var _useState9 = (0, _react.useState)(slot.value),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      val = _useState10[0],
+      setVal = _useState10[1];
+
+  (0, _react.useEffect)(function () {
+    var num = parseInt(val, 10);
+
+    if (!Number.isNaN(num)) {
+      slot.set(num);
+    }
+  }, [slot, val]);
+  return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    label: slot.name,
+    helperText: slot.description,
+    value: val,
+    type: "number",
+    onChange: function onChange(evt) {
+      return setVal(evt.target.value);
+    }
+  });
+});
+var booleanEditor = (0, _mobxReact.observer)(function (_ref12) {
+  var slot = _ref12.slot;
+  return /*#__PURE__*/_react["default"].createElement(_core.FormControl, null, /*#__PURE__*/_react["default"].createElement(_core.FormControlLabel, {
+    label: slot.name,
+    control: /*#__PURE__*/_react["default"].createElement(_core.Checkbox, {
+      checked: slot.value,
+      onChange: function onChange(evt) {
+        return slot.set(evt.target.checked);
+      }
+    })
+  }), /*#__PURE__*/_react["default"].createElement(_core.FormHelperText, null, slot.description));
+});
+var stringEnumEditor = (0, _mobxReact.observer)(function (_ref13) {
+  var slot = _ref13.slot,
+      slotSchema = _ref13.slotSchema;
+  var p = (0, _mobxStateTree.getPropertyMembers)((0, _mstReflection.getSubType)(slotSchema));
+  var choices = (0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getUnionSubTypes)((0, _mstReflection.getSubType)((0, _mstReflection.getPropertyType)(p, 'value')))[1]).map(function (t) {
+    return t.value;
+  });
+  return /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    value: slot.value,
+    label: slot.name,
+    select: true // error={filterError}
+    ,
+    helperText: slot.description,
+    fullWidth: true,
+    onChange: function onChange(evt) {
+      return slot.set(evt.target.value);
+    }
+  }, choices.map(function (str) {
+    return /*#__PURE__*/_react["default"].createElement(_core.MenuItem, {
+      key: str,
+      value: str
+    }, str);
+  }));
+});
+var FileSelectorWrapper = (0, _mobxReact.observer)(function (_ref14) {
+  var _getEnv$pluginManager;
+
+  var slot = _ref14.slot;
+  return /*#__PURE__*/_react["default"].createElement(_ui.FileSelector, {
+    location: slot.value,
+    setLocation: function setLocation(location) {
+      return slot.set(location);
+    },
+    name: slot.name,
+    description: slot.description,
+    rootModel: (_getEnv$pluginManager = (0, _mobxStateTree.getEnv)(slot).pluginManager) === null || _getEnv$pluginManager === void 0 ? void 0 : _getEnv$pluginManager.rootModel
+  });
+});
+var valueComponents = {
+  string: StringEditor,
+  text: TextEditor,
+  fileLocation: FileSelectorWrapper,
+  stringArray: StringArrayEditor,
+  stringArrayMap: StringArrayMapEditor,
+  numberMap: NumberMapEditor,
+  number: NumberEditor,
+  integer: IntegerEditor,
+  color: _ColorEditor["default"],
+  stringEnum: stringEnumEditor,
+  "boolean": booleanEditor,
+  frozen: _JsonEditor["default"],
+  configRelationships: _JsonEditor["default"]
+};
+var useSlotEditorStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    paper: {
+      display: 'flex',
+      marginBottom: theme.spacing(2),
+      position: 'relative'
+    },
+    paperContent: {
+      width: '100%'
+    },
+    slotModeSwitch: {
+      width: 24,
+      background: theme.palette.secondary.light,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  };
+});
+exports.useSlotEditorStyles = useSlotEditorStyles;
+var SlotEditor = (0, _mobxReact.observer)(function (_ref15) {
+  var slot = _ref15.slot,
+      slotSchema = _ref15.slotSchema;
+  var classes = useSlotEditorStyles();
+  var type = slot.type;
+  var ValueComponent = slot.isCallback ? _CallbackEditor["default"] : valueComponents[type];
+
+  if (!ValueComponent) {
+    console.warn("no slot editor defined for ".concat(type, ", editing as string"));
+    ValueComponent = StringEditor;
+  }
+
+  if (!(type in valueComponents)) {
+    console.warn("SlotEditor needs to implement ".concat(type));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_core.Paper, {
+    className: classes.paper
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.paperContent
+  }, /*#__PURE__*/_react["default"].createElement(ValueComponent, {
+    slot: slot,
+    slotSchema: slotSchema
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.slotModeSwitch
+  }, slot.contextVariable.length ? /*#__PURE__*/_react["default"].createElement(_core.IconButton, {
+    className: classes.slotModeIcon,
+    onClick: function onClick() {
+      return slot.isCallback ? slot.convertToValue() : slot.convertToCallback();
+    },
+    title: "convert to ".concat(slot.isCallback ? 'regular value' : 'callback'),
+    color: "secondary"
+  }, !slot.isCallback ? /*#__PURE__*/_react["default"].createElement(_RadioButtonUnchecked["default"], null) : /*#__PURE__*/_react["default"].createElement(SvgCheckbox, null)) : null));
+});
+var _default = SlotEditor;
+exports["default"] = _default;

package/dist/ConfigurationEditorWidget/components/TypeSelector.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _Paper = _interopRequireDefault(require("@material-ui/core/Paper"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _mobxReact = require("mobx-react");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SlotEditor = require("./SlotEditor");
+
+var TypeSelector = (0, _mobxReact.observer)(function (_ref) {
+  var typeNameChoices = _ref.typeNameChoices,
+      slot = _ref.slot,
+      slotName = _ref.slotName,
+      onChange = _ref.onChange;
+  var classes = (0, _SlotEditor.useSlotEditorStyles)();
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], {
+    className: classes.paper
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.paperContent
+  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    value: slot.type,
+    label: "Type",
+    select: true // error={filterError}
+    ,
+    helperText: "Type of ".concat(slotName, " to use"),
+    fullWidth: true,
+    onChange: onChange
+  }, typeNameChoices.map(function (str) {
+    return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+      key: str,
+      value: str
+    }, str);
+  }))));
+});
+var _default = TypeSelector;
+exports["default"] = _default;