@jbrowse/plugin-config 2.0.0 → 2.1.2

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/dist/ConfigurationEditorWidget/components/CodeEditor.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export default function CodeEditor({ contents, setContents, }: {
-    contents: string;
-    setContents: (arg: string) => void;
-}): JSX.Element;

package/dist/ConfigurationEditorWidget/components/CodeEditor.js

@@ -1,85 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importStar(require("react"));
-var material_1 = require("@mui/material");
-var mui_1 = require("tss-react/mui");
-// 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, mui_1.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)',
-    },
-    textAreaFont: {
-        fontFamily: fontFamily,
-    },
-}); });
-function CodeEditor(_a) {
-    var contents = _a.contents, setContents = _a.setContents;
-    var classes = useStyles().classes;
-    var _b = __read((0, react_1.useState)(), 2), error = _b[0], setCodeError = _b[1];
-    var _c = __read((0, react_1.useState)(contents), 2), val = _c[0], setVal = _c[1];
-    (0, react_1.useEffect)(function () {
-        try {
-            JSON.parse(contents);
-            setCodeError(undefined);
-            setContents(val);
-        }
-        catch (e) {
-            console.error({ e: e });
-            setCodeError(e);
-        }
-    }, [val, contents, setContents]);
-    return (react_1.default.createElement(material_1.TextField, { className: classes.callbackEditor, value: contents, onChange: function (event) { return setVal(event.target.value); }, style: { background: error ? '#fdd' : undefined }, InputProps: {
-            classes: {
-                input: classes.textAreaFont,
-            },
-        } }));
-}
-exports.default = CodeEditor;
-//# sourceMappingURL=CodeEditor.js.map

package/dist/ConfigurationEditorWidget/components/CodeEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/CodeEditor.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAClD,0CAAyC;AACzC,qCAA0C;AAE1C,6EAA6E;AAC7E,IAAM,QAAQ,GAAG,MAAM,CAAA;AACvB,2FAA2F;AAC3F,IAAM,UAAU,GACd,sNAAsN,CAAA;AAExN,IAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;IACvC,cAAc,EAAE;QACd,UAAU,YAAA;QACV,QAAQ,UAAA;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,YAAY,EAAE;QACZ,UAAU,YAAA;KACX;CACF,CAAC,EAZsC,CAYtC,CAAC,CAAA;AAEH,SAAwB,UAAU,CAAC,EAMlC;QALC,QAAQ,cAAA,EACR,WAAW,iBAAA;IAKH,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACzB,IAAA,KAAA,OAAwB,IAAA,gBAAQ,GAAW,IAAA,EAA1C,KAAK,QAAA,EAAE,YAAY,QAAuB,CAAA;IAC3C,IAAA,KAAA,OAAgB,IAAA,gBAAQ,EAAC,QAAQ,CAAC,IAAA,EAAjC,GAAG,QAAA,EAAE,MAAM,QAAsB,CAAA;IACxC,IAAA,iBAAS,EAAC;QACR,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YACpB,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAA,EAAE,CAAC,CAAA;YACpB,YAAY,CAAC,CAAC,CAAC,CAAA;SAChB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,8BAAC,oBAAS,IACR,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,UAAA,KAAK,IAAI,OAAA,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAA1B,CAA0B,EAC7C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO,CAAC,YAAY;aAC5B;SACF,GACD,CACH,CAAA;AACH,CAAC;AAlCD,6BAkCC"}

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Color, ColorResult } from 'react-color';
-export declare function ColorPicker(props: {
-    color: Color;
-    onChange: (color: ColorResult) => void;
-}): JSX.Element;
-export default ColorPicker;

package/dist/ConfigurationEditorWidget/components/ColorPicker.js

@@ -1,69 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = void 0;
-var react_1 = __importStar(require("react"));
-var mui_1 = require("tss-react/mui");
-var react_color_1 = require("react-color");
-var useStyles = (0, mui_1.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().classes;
-    var _a = __read((0, react_1.useState)(true), 2), displayColorPicker = _a[0], setDisplayColorPicker = _a[1];
-    return (react_1.default.createElement("div", null, displayColorPicker ? (react_1.default.createElement("div", { className: classes.popover },
-        react_1.default.createElement("div", { role: "presentation", className: classes.cover, onClick: function () { return setDisplayColorPicker(false); } }),
-        react_1.default.createElement(react_color_1.ChromePicker, { color: color, onChange: onChange }))) : null));
-}
-exports.ColorPicker = ColorPicker;
-exports.default = ColorPicker;
-//# sourceMappingURL=ColorPicker.js.map

package/dist/ConfigurationEditorWidget/components/ColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorPicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAuC;AACvC,qCAA0C;AAC1C,2CAA8D;AAE9D,IAAM,SAAS,GAAG,IAAA,gBAAU,GAAE,CAAC;IAC7B,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACV;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAA;AAEF,SAAgB,WAAW,CAAC,KAG3B;IACS,IAAA,KAAK,GAAe,KAAK,MAApB,EAAE,QAAQ,GAAK,KAAK,SAAV,CAAU;IACzB,IAAA,OAAO,GAAK,SAAS,EAAE,QAAhB,CAAgB;IACzB,IAAA,KAAA,OAA8C,IAAA,gBAAQ,EAAC,IAAI,CAAC,IAAA,EAA3D,kBAAkB,QAAA,EAAE,qBAAqB,QAAkB,CAAA;IAElE,OAAO,CACL,2CACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,uCAAK,SAAS,EAAE,OAAO,CAAC,OAAO;QAC7B,uCACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,OAAO,EAAE,cAAM,OAAA,qBAAqB,CAAC,KAAK,CAAC,EAA5B,CAA4B,GAC3C;QACF,8BAAC,0BAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC;AAtBD,kCAsBC;AAED,kBAAe,WAAW,CAAA"}

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

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export default function CodeEditor({ contents, setContents, }: {
-    contents: string;
-    setContents: (arg: string) => void;
-}): JSX.Element;

package/esm/ConfigurationEditorWidget/components/CodeEditor.js

@@ -1,42 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
-const fontSize = '12px';
-// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
-const 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';
-const useStyles = makeStyles()(theme => ({
-    callbackEditor: {
-        fontFamily,
-        fontSize,
-        background: theme.palette.background.default,
-        overflowX: 'auto',
-        marginTop: '16px',
-        border: '1px solid rgba(0,0,0,0.42)',
-    },
-    textAreaFont: {
-        fontFamily,
-    },
-}));
-export default function CodeEditor({ contents, setContents, }) {
-    const { classes } = useStyles();
-    const [error, setCodeError] = useState();
-    const [val, setVal] = useState(contents);
-    useEffect(() => {
-        try {
-            JSON.parse(contents);
-            setCodeError(undefined);
-            setContents(val);
-        }
-        catch (e) {
-            console.error({ e });
-            setCodeError(e);
-        }
-    }, [val, contents, setContents]);
-    return (React.createElement(TextField, { className: classes.callbackEditor, value: contents, onChange: event => setVal(event.target.value), style: { background: error ? '#fdd' : undefined }, InputProps: {
-            classes: {
-                input: classes.textAreaFont,
-            },
-        } }));
-}
-//# sourceMappingURL=CodeEditor.js.map

package/esm/ConfigurationEditorWidget/components/CodeEditor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeEditor.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/CodeEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,6EAA6E;AAC7E,MAAM,QAAQ,GAAG,MAAM,CAAA;AACvB,2FAA2F;AAC3F,MAAM,UAAU,GACd,sNAAsN,CAAA;AAExN,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;IACvC,cAAc,EAAE;QACd,UAAU;QACV,QAAQ;QACR,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;QAC5C,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,MAAM,EAAE,4BAA4B;KACrC;IACD,YAAY,EAAE;QACZ,UAAU;KACX;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,QAAQ,EACR,WAAW,GAIZ;IACC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,KAAK,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAW,CAAA;IACjD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI;YACF,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;YACpB,YAAY,CAAC,SAAS,CAAC,CAAA;YACvB,WAAW,CAAC,GAAG,CAAC,CAAA;SACjB;QAAC,OAAO,CAAC,EAAE;YACV,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;YACpB,YAAY,CAAC,CAAC,CAAC,CAAA;SAChB;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,cAAc,EACjC,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,EACjD,UAAU,EAAE;YACV,OAAO,EAAE;gBACP,KAAK,EAAE,OAAO,CAAC,YAAY;aAC5B;SACF,GACD,CACH,CAAA;AACH,CAAC"}

package/esm/ConfigurationEditorWidget/components/ColorPicker.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Color, ColorResult } from 'react-color';
-export declare function ColorPicker(props: {
-    color: Color;
-    onChange: (color: ColorResult) => void;
-}): JSX.Element;
-export default ColorPicker;

package/esm/ConfigurationEditorWidget/components/ColorPicker.js

@@ -1,26 +0,0 @@
-import React, { useState } from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { ChromePicker } from 'react-color';
-const useStyles = makeStyles()({
-    popover: {
-        position: 'absolute',
-        zIndex: 2,
-    },
-    cover: {
-        position: 'fixed',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-    },
-});
-export function ColorPicker(props) {
-    const { color, onChange } = props;
-    const { classes } = useStyles();
-    const [displayColorPicker, setDisplayColorPicker] = useState(true);
-    return (React.createElement("div", null, displayColorPicker ? (React.createElement("div", { className: classes.popover },
-        React.createElement("div", { role: "presentation", className: classes.cover, onClick: () => setDisplayColorPicker(false) }),
-        React.createElement(ChromePicker, { color: color, onChange: onChange }))) : null));
-}
-export default ColorPicker;
-//# sourceMappingURL=ColorPicker.js.map

package/esm/ConfigurationEditorWidget/components/ColorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../src/ConfigurationEditorWidget/components/ColorPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAsB,MAAM,aAAa,CAAA;AAE9D,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;KACV;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAA;AAEF,MAAM,UAAU,WAAW,CAAC,KAG3B;IACC,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACjC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IAElE,OAAO,CACL,iCACG,kBAAkB,CAAC,CAAC,CAAC,CACpB,6BAAK,SAAS,EAAE,OAAO,CAAC,OAAO;QAC7B,6BACE,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,OAAO,CAAC,KAAK,EACxB,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,GAC3C;QACF,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACP,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC;AAED,eAAe,WAAW,CAAA"}

package/src/ConfigurationEditorWidget/components/CodeEditor.tsx

@@ -1,59 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { TextField } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// fontSize and fontFamily have to match between Editor and SyntaxHighlighter
-const fontSize = '12px'
-// Optimize by using system default fonts: https://css-tricks.com/snippets/css/font-stacks/
-const 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'
-
-const useStyles = makeStyles()(theme => ({
-  callbackEditor: {
-    fontFamily,
-    fontSize,
-    background: theme.palette.background.default,
-    overflowX: 'auto',
-    marginTop: '16px',
-    border: '1px solid rgba(0,0,0,0.42)',
-  },
-  textAreaFont: {
-    fontFamily,
-  },
-}))
-
-export default function CodeEditor({
-  contents,
-  setContents,
-}: {
-  contents: string
-  setContents: (arg: string) => void
-}) {
-  const { classes } = useStyles()
-  const [error, setCodeError] = useState<unknown>()
-  const [val, setVal] = useState(contents)
-  useEffect(() => {
-    try {
-      JSON.parse(contents)
-      setCodeError(undefined)
-      setContents(val)
-    } catch (e) {
-      console.error({ e })
-      setCodeError(e)
-    }
-  }, [val, contents, setContents])
-
-  return (
-    <TextField
-      className={classes.callbackEditor}
-      value={contents}
-      onChange={event => setVal(event.target.value)}
-      style={{ background: error ? '#fdd' : undefined }}
-      InputProps={{
-        classes: {
-          input: classes.textAreaFont,
-        },
-      }}
-    />
-  )
-}

package/src/ConfigurationEditorWidget/components/ColorPicker.tsx

@@ -1,43 +0,0 @@
-import React, { useState } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { ChromePicker, Color, ColorResult } from 'react-color'
-
-const useStyles = makeStyles()({
-  popover: {
-    position: 'absolute',
-    zIndex: 2,
-  },
-  cover: {
-    position: 'fixed',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-  },
-})
-
-export function ColorPicker(props: {
-  color: Color
-  onChange: (color: ColorResult) => void
-}) {
-  const { color, onChange } = props
-  const { classes } = useStyles()
-  const [displayColorPicker, setDisplayColorPicker] = useState(true)
-
-  return (
-    <div>
-      {displayColorPicker ? (
-        <div className={classes.popover}>
-          <div
-            role="presentation"
-            className={classes.cover}
-            onClick={() => setDisplayColorPicker(false)}
-          />
-          <ChromePicker color={color} onChange={onChange} />
-        </div>
-      ) : null}
-    </div>
-  )
-}
-
-export default ColorPicker

package/src/ConfigurationEditorWidget/components/JsonEditor.js

@@ -1,52 +0,0 @@
-import React, { lazy, useEffect, useState } from 'react'
-import { useDebounce } from '@jbrowse/core/util'
-import { FormControl, FormHelperText, InputLabel } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { observer, PropTypes } from 'mobx-react'
-const useStyles = makeStyles()({
-  error: {
-    color: 'red',
-    fontSize: '0.8em',
-  },
-})
-
-const CodeEditor = lazy(() => import('./CodeEditor'))
-
-function JsonEditor({ slot }) {
-  const { classes } = useStyles()
-  const [contents, setContents] = useState(
-    JSON.stringify(slot.value, null, '  '),
-  )
-  const [error, setError] = useState()
-  const debouncedJson = useDebounce(contents, 400)
-
-  useEffect(() => {
-    try {
-      slot.set(JSON.parse(debouncedJson))
-      setError(undefined)
-    } catch (e) {
-      setError(e.message)
-    }
-  }, [debouncedJson, slot])
-
-  return (
-    <>
-      {error ? <p className={classes.error}>{error}</p> : null}
-      <FormControl error={error}>
-        <InputLabel shrink htmlFor="callback-editor">
-          {slot.name}
-        </InputLabel>
-        <React.Suspense fallback={<div />}>
-          <CodeEditor contents={contents} setContents={setContents} />
-        </React.Suspense>
-        <FormHelperText>{slot.description}</FormHelperText>
-      </FormControl>
-    </>
-  )
-}
-
-JsonEditor.propTypes = {
-  slot: PropTypes.objectOrObservableObject.isRequired,
-}
-
-export default observer(JsonEditor)