@jbrowse/plugin-config 1.6.9 → 1.7.3

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;

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.d.ts

@@ -1,9 +1,9 @@
-declare function _default({ slot }: {
-    slot: any;
-}): JSX.Element;
-declare namespace _default {
-    export namespace propTypes {
-        export const slot: import("prop-types").Validator<any>;
-    }
-}
-export default _default;
+declare function _default({ slot }: {
+    slot: any;
+}): JSX.Element;
+declare namespace _default {
+    namespace propTypes {
+        const slot: import("prop-types").Validator<any>;
+    }
+}
+export default _default;

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.d.ts

@@ -1,6 +1,6 @@
-export const useSlotEditorStyles: (props?: any) => Record<"paper" | "paperContent" | "slotModeSwitch", string>;
-export default SlotEditor;
-declare function SlotEditor({ slot, slotSchema }: {
-    slot: any;
-    slotSchema: any;
-}): JSX.Element;
+export const useSlotEditorStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"paper" | "paperContent" | "slotModeSwitch">;
+export default SlotEditor;
+declare function SlotEditor({ slot, slotSchema }: {
+    slot: any;
+    slotSchema: any;
+}): JSX.Element;