@jbrowse/plugin-config 1.7.11 → 2.1.0

package/src/ConfigurationEditorWidget/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { isStateTreeNode, getType } from 'mobx-state-tree'
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export { default as stateModelFactory } from './model'
+export const configSchema = ConfigurationSchema('ConfigurationEditorWidget', {})
+export const HeadingComponent = observer(
+  ({ model }: { model?: { target: { type: string } } }) => {
+    if (model?.target) {
+      if (model.target.type) {
+        return <>{`${model.target.type} settings`}</>
+      }
+      if (isStateTreeNode(model.target)) {
+        const type = getType(model.target)
+        if (type?.name) {
+          return (
+            <>{`${type.name.replace('ConfigurationSchema', '')} settings`}</>
+          )
+        }
+      }
+    }
+    return <>Settings</>
+  },
+)

package/src/ConfigurationEditorWidget/{model.js → model.ts}

@@ -1,7 +1,8 @@
 import { types } from 'mobx-state-tree'
 import { ElementId } from '@jbrowse/core/util/types/mst'
+import PluginManager from '@jbrowse/core/PluginManager'
 
-export default pluginManager =>
+export default (pluginManager: PluginManager) =>
   types
     .model('ConfigurationEditorWidget', {
       id: ElementId,
@@ -13,7 +14,8 @@ export default pluginManager =>
       ),
     })
     .actions(self => ({
-      setTarget(newTarget) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      setTarget(newTarget: any) {
         self.target = newTarget
       },
     }))

package/src/FromConfigAdapter/FromConfigSequenceAdapter.ts

@@ -3,24 +3,20 @@ import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { NoAssemblyRegion } from '@jbrowse/core/util/types'
 import { toArray } from 'rxjs/operators'
 import FromConfigAdapter from './FromConfigAdapter'
+import { RegionsAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 
-export default class FromConfigSequenceAdapter extends FromConfigAdapter {
+export default class FromConfigSequenceAdapter
+  extends FromConfigAdapter
+  implements RegionsAdapter
+{
   /**
    * Fetch features for a certain region
    * @param region - Region
    * @returns Observable of Feature objects in the region
    */
   getFeatures(region: NoAssemblyRegion) {
-    // TODO: restore commented version below once TSDX supports Rollup v2
-    // 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()
-    const superGetFeatures = super.getFeatures
     return ObservableCreate<Feature>(async observer => {
-      const feats = await superGetFeatures
-        .call(this, region)
-        .pipe(toArray())
-        .toPromise()
+      const feats = await super.getFeatures(region).pipe(toArray()).toPromise()
       const feat = feats[0]
       observer.next(
         new SimpleFeature({

package/src/index.ts

@@ -9,19 +9,13 @@ import {
   stateModelFactory as ConfigurationEditorStateModelFactory,
 } from './ConfigurationEditorWidget'
 import {
-  AdapterClass as FromConfigAdapterClass,
-  RegionsAdapterClass as FromConfigRegionsAdapterClass,
-  SequenceAdapterClass as FromConfigSequenceAdapterClass,
   configSchema as fromConfigAdapterConfigSchema,
   regionsConfigSchema as fromConfigRegionsAdapterConfigSchema,
   sequenceConfigSchema as fromConfigSequenceAdapterConfigSchema,
 } from './FromConfigAdapter'
-import {
-  AdapterClass as RefNameAliasAdapterClass,
-  configSchema as refNameAliasAdapterConfigSchema,
-} from './RefNameAliasAdapter'
+import { configSchema as refNameAliasAdapterConfigSchema } from './RefNameAliasAdapter'
 
-const ConfigurationEditorComponent = lazy(
+const LazyConfigurationEditorComponent = lazy(
   () => import('./ConfigurationEditorWidget/components/ConfigurationEditor'),
 )
 
@@ -34,7 +28,10 @@ export default class extends Plugin {
         new AdapterType({
           name: 'FromConfigAdapter',
           configSchema: fromConfigAdapterConfigSchema,
-          AdapterClass: FromConfigAdapterClass,
+          getAdapterClass: () =>
+            import('./FromConfigAdapter/FromConfigAdapter').then(
+              r => r.default,
+            ),
           adapterMetadata: {
             category: null,
             hiddenFromGUI: true,
@@ -48,7 +45,10 @@ export default class extends Plugin {
         new AdapterType({
           name: 'FromConfigRegionsAdapter',
           configSchema: fromConfigRegionsAdapterConfigSchema,
-          AdapterClass: FromConfigRegionsAdapterClass,
+          getAdapterClass: () =>
+            import('./FromConfigAdapter/FromConfigRegionsAdapter').then(
+              r => r.default,
+            ),
           adapterMetadata: {
             category: null,
             hiddenFromGUI: true,
@@ -62,7 +62,10 @@ export default class extends Plugin {
         new AdapterType({
           name: 'FromConfigSequenceAdapter',
           configSchema: fromConfigSequenceAdapterConfigSchema,
-          AdapterClass: FromConfigSequenceAdapterClass,
+          getAdapterClass: () =>
+            import('./FromConfigAdapter/FromConfigSequenceAdapter').then(
+              r => r.default,
+            ),
           adapterMetadata: {
             category: null,
             hiddenFromGUI: true,
@@ -76,7 +79,10 @@ export default class extends Plugin {
         new AdapterType({
           name: 'RefNameAliasAdapter',
           configSchema: refNameAliasAdapterConfigSchema,
-          AdapterClass: RefNameAliasAdapterClass,
+          getAdapterClass: () =>
+            import('./RefNameAliasAdapter/RefNameAliasAdapter').then(
+              r => r.default,
+            ),
           adapterMetadata: {
             category: null,
             hiddenFromGUI: true,
@@ -92,7 +98,7 @@ export default class extends Plugin {
         HeadingComponent: ConfigurationEditorHeadingComponent,
         configSchema: ConfigurationEditorConfigSchema,
         stateModel: ConfigurationEditorStateModelFactory(pluginManager),
-        ReactComponent: ConfigurationEditorComponent,
+        ReactComponent: LazyConfigurationEditorComponent,
       })
     })
   }
@@ -100,4 +106,4 @@ export default class extends Plugin {
 
 export { default as JsonEditor } from './ConfigurationEditorWidget/components/JsonEditor'
 
-export { ConfigurationEditorComponent as ConfigurationEditor }
+export { LazyConfigurationEditorComponent as ConfigurationEditor }

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

@@ -1,4 +0,0 @@
-export default function CodeEditor({ contents, setContents }: {
-    contents: any;
-    setContents: any;
-}): JSX.Element;

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -1,80 +0,0 @@
-"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)(function (theme) {
-  return {
-    callbackEditor: {
-      fontFamily: fontFamily,
-      fontSize: fontSize,
-      background: theme.palette.background.default,
-      overflowX: 'auto',
-      marginTop: '16px',
-      border: '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.test.js

@@ -1,31 +0,0 @@
-"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.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import ReactPropTypes from 'prop-types';
-import { Color, ColorResult } from 'react-color';
-export declare function ColorPicker(props: {
-    color: Color;
-    onChange: (color: ColorResult) => void;
-}): JSX.Element;
-export declare namespace ColorPicker {
-    var propTypes: {
-        color: ReactPropTypes.Validator<string>;
-        onChange: ReactPropTypes.Validator<(...args: any[]) => any>;
-    };
-}
-export default ColorPicker;

package/dist/ConfigurationEditorWidget/components/ColorPicker.js

@@ -1,72 +0,0 @@
-"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.test.js

@@ -1,121 +0,0 @@
-"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/FromConfigAdapter/FromConfigAdapter.test.js

@@ -1,100 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _operators = require("rxjs/operators");
-
-var _FromConfigAdapter = _interopRequireDefault(require("./FromConfigAdapter"));
-
-var _configSchema = require("./configSchema");
-
-test('adapter can fetch features', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-  var features, adapter, result, featuresArray;
-  return _regenerator.default.wrap(function _callee$(_context) {
-    while (1) {
-      switch (_context.prev = _context.next) {
-        case 0:
-          features = [{
-            uniqueId: 'one',
-            refName: 'ctgA',
-            start: 20,
-            end: 40
-          }, {
-            uniqueId: 'two',
-            refName: 'ctgB',
-            start: 50,
-            end: 60
-          }];
-          adapter = new _FromConfigAdapter.default(_configSchema.configSchema.create({
-            features: features
-          }));
-          result = adapter.getFeatures({
-            refName: 'ctgA',
-            start: 0,
-            end: 20000
-          });
-          _context.next = 5;
-          return result.pipe((0, _operators.toArray)()).toPromise();
-
-        case 5:
-          featuresArray = _context.sent;
-          expect(featuresArray.length).toBe(1);
-          expect(featuresArray[0].toJSON()).toEqual(features[0]);
-
-        case 8:
-        case "end":
-          return _context.stop();
-      }
-    }
-  }, _callee);
-})));
-test('adapter can fetch features with subfeatures', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-  var features, adapter, result, featuresArray;
-  return _regenerator.default.wrap(function _callee2$(_context2) {
-    while (1) {
-      switch (_context2.prev = _context2.next) {
-        case 0:
-          features = [{
-            refName: 'ctgA',
-            uniqueId: 'feat1',
-            start: 200,
-            end: 750,
-            name: 'Feature1',
-            subfeatures: [{
-              uniqueId: 'feat2',
-              start: 225,
-              end: 300,
-              name: 'Feature2'
-            }, {
-              uniqueId: 'feat3',
-              start: 400,
-              end: 600,
-              name: 'Feature3'
-            }]
-          }];
-          adapter = new _FromConfigAdapter.default(_configSchema.configSchema.create({
-            features: features
-          }));
-          result = adapter.getFeatures({
-            refName: 'ctgA',
-            start: 0,
-            end: 20000
-          });
-          _context2.next = 5;
-          return result.pipe((0, _operators.toArray)()).toPromise();
-
-        case 5:
-          featuresArray = _context2.sent;
-          expect(featuresArray.length).toBe(1);
-
-        case 7:
-        case "end":
-          return _context2.stop();
-      }
-    }
-  }, _callee2);
-})));