@jbrowse/plugin-config 1.7.11 → 2.1.0

package/esm/FromConfigAdapter/FromConfigSequenceAdapter.js

@@ -0,0 +1,65 @@
+import SimpleFeature from '@jbrowse/core/util/simpleFeature';
+import { ObservableCreate } from '@jbrowse/core/util/rxjs';
+import { toArray } from 'rxjs/operators';
+import FromConfigAdapter from './FromConfigAdapter';
+export default class FromConfigSequenceAdapter extends FromConfigAdapter {
+    /**
+     * Fetch features for a certain region
+     * @param region - Region
+     * @returns Observable of Feature objects in the region
+     */
+    getFeatures(region) {
+        return ObservableCreate(async (observer) => {
+            const feats = await super.getFeatures(region).pipe(toArray()).toPromise();
+            const feat = feats[0];
+            observer.next(new SimpleFeature({
+                ...feat.toJSON(),
+                uniqueId: `${feat.id()}:${region.start}-${region.end}`,
+                end: region.end,
+                start: region.start,
+                seq: feat
+                    .get('seq')
+                    .slice(Math.max(region.start - feat.get('start'), 0), Math.max(region.end - feat.get('start'), 0)),
+            }));
+            observer.complete();
+        });
+    }
+    /**
+     * Get refName, start, and end for all features after collapsing any overlaps
+     */
+    async getRegions() {
+        const regions = [];
+        // recall: features are stored in this object sorted by start coordinate
+        for (const [refName, features] of this.features) {
+            let currentRegion;
+            for (const feature of features) {
+                if (currentRegion &&
+                    currentRegion.end >= feature.get('start') &&
+                    currentRegion.start <= feature.get('end')) {
+                    currentRegion.end = feature.get('end');
+                }
+                else {
+                    if (currentRegion) {
+                        regions.push(currentRegion);
+                    }
+                    currentRegion = {
+                        refName,
+                        start: feature.get('start'),
+                        end: feature.get('end'),
+                    };
+                }
+            }
+            if (currentRegion) {
+                regions.push(currentRegion);
+            }
+        }
+        return regions;
+    }
+    /**
+     * called to provide a hint that data tied to a certain region
+     * will not be needed for the forseeable future and can be purged
+     * from caches, etc
+     */
+    freeResources( /* { region } */) { }
+}
+//# sourceMappingURL=FromConfigSequenceAdapter.js.map

package/esm/FromConfigAdapter/FromConfigSequenceAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FromConfigSequenceAdapter.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/FromConfigSequenceAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,aAA0B,MAAM,kCAAkC,CAAA;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AACxC,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AAGnD,MAAM,CAAC,OAAO,OAAO,yBACnB,SAAQ,iBAAiB;IAGzB;;;;OAIG;IACH,WAAW,CAAC,MAAwB;QAClC,OAAO,gBAAgB,CAAU,KAAK,EAAC,QAAQ,EAAC,EAAE;YAChD,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,EAAE,CAAA;YACzE,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAA;YACrB,QAAQ,CAAC,IAAI,CACX,IAAI,aAAa,CAAC;gBAChB,GAAG,IAAI,CAAC,MAAM,EAAE;gBAChB,QAAQ,EAAE,GAAG,IAAI,CAAC,EAAE,EAAE,IAAI,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,GAAG,EAAE;gBACtD,GAAG,EAAE,MAAM,CAAC,GAAG;gBACf,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,GAAG,EAAE,IAAI;qBACN,GAAG,CAAC,KAAK,CAAC;qBACV,KAAK,CACJ,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAC7C,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAC5C;aACJ,CAAC,CACH,CAAA;YAED,QAAQ,CAAC,QAAQ,EAAE,CAAA;QACrB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,UAAU;QACd,MAAM,OAAO,GAAG,EAAE,CAAA;QAElB,wEAAwE;QACxE,KAAK,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;YAC/C,IAAI,aAAa,CAAA;YACjB,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;gBAC9B,IACE,aAAa;oBACb,aAAa,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;oBACzC,aAAa,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EACzC;oBACA,aAAa,CAAC,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;iBACvC;qBAAM;oBACL,IAAI,aAAa,EAAE;wBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;qBAC5B;oBACD,aAAa,GAAG;wBACd,OAAO;wBACP,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;wBAC3B,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;qBACxB,CAAA;iBACF;aACF;YACD,IAAI,aAAa,EAAE;gBACjB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;aAC5B;SACF;QAED,OAAO,OAAO,CAAA;IAChB,CAAC;IAED;;;;OAIG;IACH,aAAa,EAAC,gBAAgB,IAAS,CAAC;CACzC"}

package/esm/FromConfigAdapter/configSchema.d.ts

@@ -0,0 +1,3 @@
+export declare const configSchema: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+export declare const regionsConfigSchema: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+export declare const sequenceConfigSchema: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;

package/esm/FromConfigAdapter/configSchema.js

@@ -0,0 +1,32 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+export const configSchema = ConfigurationSchema('FromConfigAdapter', {
+    features: {
+        type: 'frozen',
+        defaultValue: [],
+    },
+    featureClass: {
+        type: 'string',
+        defaultValue: 'SimpleFeature',
+    },
+}, { explicitlyTyped: true, implicitIdentifier: 'adapterId' });
+export const regionsConfigSchema = ConfigurationSchema('FromConfigRegionsAdapter', {
+    features: {
+        type: 'frozen',
+        defaultValue: [],
+    },
+    featureClass: {
+        type: 'string',
+        defaultValue: 'SimpleFeature',
+    },
+}, { explicitlyTyped: true, implicitIdentifier: 'adapterId' });
+export const sequenceConfigSchema = ConfigurationSchema('FromConfigSequenceAdapter', {
+    features: {
+        type: 'frozen',
+        defaultValue: [],
+    },
+    featureClass: {
+        type: 'string',
+        defaultValue: 'SimpleFeature',
+    },
+}, { explicitlyTyped: true, implicitIdentifier: 'adapterId' });
+//# sourceMappingURL=configSchema.js.map

package/esm/FromConfigAdapter/configSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configSchema.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/configSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAC7C,mBAAmB,EACnB;IACE,QAAQ,EAAE;QACR,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,eAAe;KAC9B;CACF,EACD,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAC3D,CAAA;AAED,MAAM,CAAC,MAAM,mBAAmB,GAAG,mBAAmB,CACpD,0BAA0B,EAC1B;IACE,QAAQ,EAAE;QACR,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,eAAe;KAC9B;CACF,EACD,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAC3D,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAAmB,CACrD,2BAA2B,EAC3B;IACE,QAAQ,EAAE;QACR,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,EAAE;KACjB;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,eAAe;KAC9B;CACF,EACD,EAAE,eAAe,EAAE,IAAI,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAC3D,CAAA"}

package/esm/FromConfigAdapter/index.d.ts

@@ -0,0 +1,4 @@
+export { default as AdapterClass } from './FromConfigAdapter';
+export { default as RegionsAdapterClass } from './FromConfigRegionsAdapter';
+export { default as SequenceAdapterClass } from './FromConfigSequenceAdapter';
+export { configSchema, regionsConfigSchema, sequenceConfigSchema, } from './configSchema';

package/esm/FromConfigAdapter/index.js

@@ -0,0 +1,5 @@
+export { default as AdapterClass } from './FromConfigAdapter';
+export { default as RegionsAdapterClass } from './FromConfigRegionsAdapter';
+export { default as SequenceAdapterClass } from './FromConfigSequenceAdapter';
+export { configSchema, regionsConfigSchema, sequenceConfigSchema, } from './configSchema';
+//# sourceMappingURL=index.js.map

package/esm/FromConfigAdapter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FromConfigAdapter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAC7E,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gBAAgB,CAAA"}

package/esm/RefNameAliasAdapter/RefNameAliasAdapter.d.ts

@@ -0,0 +1,8 @@
+import { BaseRefNameAliasAdapter, BaseAdapter } from '@jbrowse/core/data_adapters/BaseAdapter';
+export default class RefNameAliasAdapter extends BaseAdapter implements BaseRefNameAliasAdapter {
+    getRefNameAliases(): Promise<{
+        refName: string;
+        aliases: string[];
+    }[]>;
+    freeResources(): Promise<void>;
+}

package/esm/RefNameAliasAdapter/RefNameAliasAdapter.js

@@ -0,0 +1,24 @@
+import { BaseAdapter, } from '@jbrowse/core/data_adapters/BaseAdapter';
+import { openLocation } from '@jbrowse/core/util/io';
+import { readConfObject } from '@jbrowse/core/configuration';
+export default class RefNameAliasAdapter extends BaseAdapter {
+    async getRefNameAliases() {
+        const loc = readConfObject(this.config, 'location');
+        if (loc.uri === '' || loc.uri === '/path/to/my/aliases.txt') {
+            return [];
+        }
+        const results = await openLocation(loc).readFile('utf8');
+        const refColumn = readConfObject(this.config, 'refNameColumn');
+        return results
+            .trim()
+            .split('\n')
+            .filter(f => !!f && !f.startsWith('#'))
+            .map(row => {
+            const aliases = row.split('\t');
+            const [refName] = aliases.splice(refColumn, 1);
+            return { refName, aliases: aliases.filter(f => !!f.trim()) };
+        });
+    }
+    async freeResources() { }
+}
+//# sourceMappingURL=RefNameAliasAdapter.js.map

package/esm/RefNameAliasAdapter/RefNameAliasAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RefNameAliasAdapter.js","sourceRoot":"","sources":["../../src/RefNameAliasAdapter/RefNameAliasAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,GACZ,MAAM,yCAAyC,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAE5D,MAAM,CAAC,OAAO,OAAO,mBACnB,SAAQ,WAAW;IAGnB,KAAK,CAAC,iBAAiB;QACrB,MAAM,GAAG,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;QACnD,IAAI,GAAG,CAAC,GAAG,KAAK,EAAE,IAAI,GAAG,CAAC,GAAG,KAAK,yBAAyB,EAAE;YAC3D,OAAO,EAAE,CAAA;SACV;QACD,MAAM,OAAO,GAAG,MAAM,YAAY,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;QACxD,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;QAC9D,OAAO,OAAO;aACX,IAAI,EAAE;aACN,KAAK,CAAC,IAAI,CAAC;aACX,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;aACtC,GAAG,CAAC,GAAG,CAAC,EAAE;YACT,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;YAC/B,MAAM,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAA;YAC9C,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,CAAA;QAC9D,CAAC,CAAC,CAAA;IACN,CAAC;IAED,KAAK,CAAC,aAAa,KAAI,CAAC;CACzB"}

package/esm/RefNameAliasAdapter/configSchema.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+export default _default;

package/esm/RefNameAliasAdapter/configSchema.js

@@ -0,0 +1,15 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration';
+export default ConfigurationSchema('RefNameAliasAdapter', {
+    location: {
+        type: 'fileLocation',
+        defaultValue: {
+            uri: '/path/to/my/aliases.txt',
+            locationType: 'UriLocation',
+        },
+    },
+    refNameColumn: {
+        type: 'number',
+        defaultValue: 0,
+    },
+}, { explicitlyTyped: true });
+//# sourceMappingURL=configSchema.js.map

package/esm/RefNameAliasAdapter/configSchema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configSchema.js","sourceRoot":"","sources":["../../src/RefNameAliasAdapter/configSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAEjE,eAAe,mBAAmB,CAChC,qBAAqB,EACrB;IACE,QAAQ,EAAE;QACR,IAAI,EAAE,cAAc;QACpB,YAAY,EAAE;YACZ,GAAG,EAAE,yBAAyB;YAC9B,YAAY,EAAE,aAAa;SAC5B;KACF;IACD,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,CAAC;KAChB;CACF,EACD,EAAE,eAAe,EAAE,IAAI,EAAE,CAC1B,CAAA"}

package/esm/RefNameAliasAdapter/index.d.ts

@@ -0,0 +1,2 @@
+export { default as AdapterClass } from './RefNameAliasAdapter';
+export { default as configSchema } from './configSchema';

package/esm/RefNameAliasAdapter/index.js

@@ -0,0 +1,3 @@
+export { default as AdapterClass } from './RefNameAliasAdapter';
+export { default as configSchema } from './configSchema';
+//# sourceMappingURL=index.js.map

package/esm/RefNameAliasAdapter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/RefNameAliasAdapter/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/esm/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import Plugin from '@jbrowse/core/Plugin';
+import PluginManager from '@jbrowse/core/PluginManager';
+declare const LazyConfigurationEditorComponent: import("react").LazyExoticComponent<({ model }: {
+    model: {
+        target: {
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>;
+    };
+}) => JSX.Element>;
+export default class extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+}
+export { default as JsonEditor } from './ConfigurationEditorWidget/components/JsonEditor';
+export { LazyConfigurationEditorComponent as ConfigurationEditor };

package/esm/index.js

@@ -0,0 +1,72 @@
+import { lazy } from 'react';
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType';
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import Plugin from '@jbrowse/core/Plugin';
+import { configSchema as ConfigurationEditorConfigSchema, HeadingComponent as ConfigurationEditorHeadingComponent, stateModelFactory as ConfigurationEditorStateModelFactory, } from './ConfigurationEditorWidget';
+import { configSchema as fromConfigAdapterConfigSchema, regionsConfigSchema as fromConfigRegionsAdapterConfigSchema, sequenceConfigSchema as fromConfigSequenceAdapterConfigSchema, } from './FromConfigAdapter';
+import { configSchema as refNameAliasAdapterConfigSchema } from './RefNameAliasAdapter';
+const LazyConfigurationEditorComponent = lazy(() => import('./ConfigurationEditorWidget/components/ConfigurationEditor'));
+export default class extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'ConfigurationPlugin';
+    }
+    install(pluginManager) {
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigAdapter',
+            configSchema: fromConfigAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigRegionsAdapter',
+            configSchema: fromConfigRegionsAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigRegionsAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'FromConfigSequenceAdapter',
+            configSchema: fromConfigSequenceAdapterConfigSchema,
+            getAdapterClass: () => import('./FromConfigAdapter/FromConfigSequenceAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addAdapterType(() => new AdapterType({
+            name: 'RefNameAliasAdapter',
+            configSchema: refNameAliasAdapterConfigSchema,
+            getAdapterClass: () => import('./RefNameAliasAdapter/RefNameAliasAdapter').then(r => r.default),
+            adapterMetadata: {
+                category: null,
+                hiddenFromGUI: true,
+                displayName: null,
+                description: null,
+            },
+        }));
+        pluginManager.addWidgetType(() => {
+            return new WidgetType({
+                name: 'ConfigurationEditorWidget',
+                HeadingComponent: ConfigurationEditorHeadingComponent,
+                configSchema: ConfigurationEditorConfigSchema,
+                stateModel: ConfigurationEditorStateModelFactory(pluginManager),
+                ReactComponent: LazyConfigurationEditorComponent,
+            });
+        });
+    }
+}
+export { default as JsonEditor } from './ConfigurationEditorWidget/components/JsonEditor';
+export { LazyConfigurationEditorComponent as ConfigurationEditor };
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "1.7.11",
+  "version": "2.1.0",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -20,38 +20,44 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/config",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
     "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1",
-    "pluralize": "^8.0.0",
-    "react-color": "^2.19.3",
-    "react-simple-code-editor": "0.9.3",
-    "react-syntax-highlighter": "^14.0.0"
+    "@mui/icons-material": "^5.0.1",
+    "pluralize": "^8.0.0"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@material-ui/core": "^4.12.2",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@jbrowse/core": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "rxjs": "^6.0.0"
+    "rxjs": "^6.0.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5c21beb48a21f08b0091d293f09ac99174c48f77"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "0db0462fa1f9f15ab4869da085bcab032b9483c3"
 }

package/src/ConfigurationEditorWidget/components/CallbackEditor.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from 'react'
+import { Tooltip, IconButton, TextField } from '@mui/material'
+import { useDebounce } from '@jbrowse/core/util'
+import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings'
+import { getEnv } from 'mobx-state-tree'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import HelpIcon from '@mui/icons-material/Help'
+
+// 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: {
+    marginTop: '16px',
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    width: '100%',
+    fontFamily,
+  },
+  textAreaFont: {
+    fontFamily,
+  },
+  callbackContainer: {
+    width: '100%',
+    overflowX: 'auto',
+  },
+
+  error: {
+    color: 'red',
+    fontSize: '0.8em',
+  },
+}))
+
+function CallbackEditor({
+  slot,
+}: {
+  slot: {
+    set: (arg: string) => void
+    description: string
+    name: string
+    value: string
+    contextVariable: string
+  }
+}) {
+  const { classes } = useStyles()
+
+  const [code, setCode] = useState(slot.value)
+  const [error, setCodeError] = useState<unknown>()
+  const debouncedCode = useDebounce(code, 400)
+
+  useEffect(() => {
+    try {
+      const jexlDebouncedCode = debouncedCode.startsWith('jexl:')
+        ? debouncedCode
+        : `jexl:${debouncedCode}`
+
+      if (jexlDebouncedCode === 'jexl:') {
+        throw new Error('Empty jexl expression is not valid')
+      }
+      stringToJexlExpression(
+        jexlDebouncedCode,
+        getEnv(slot).pluginManager?.jexl,
+      )
+      slot.set(jexlDebouncedCode)
+      setCodeError(undefined)
+    } catch (e) {
+      console.error({ e })
+      setCodeError(e)
+    }
+  }, [debouncedCode, slot])
+
+  // if default value is a callback, will have to remove jexl:
+  // do this last
+  return (
+    <>
+      {error ? <p className={classes.error}>{`${error}`}</p> : null}
+      <div className={classes.callbackContainer}>
+        <TextField
+          multiline
+          className={classes.callbackEditor}
+          value={code.startsWith('jexl:') ? code.split('jexl:')[1] : code}
+          onChange={event => setCode(event.target.value)}
+          style={{ background: error ? '#fdd' : undefined }}
+          InputProps={{
+            classes: {
+              input: classes.textAreaFont,
+            },
+          }}
+        />
+
+        <p>{slot.description}</p>
+        <Tooltip
+          title={
+            <div>
+              Callbacks are written in Jexl format. Click to learn more.
+              <br /> Names of available context items: {slot.contextVariable}
+            </div>
+          }
+          arrow
+        >
+          <IconButton
+            color="primary"
+            onClick={() => {
+              const newWindow = window.open(
+                'https://github.com/TomFrost/Jexl',
+                '_blank',
+                'noopener,noreferrer',
+              )
+              if (newWindow) {
+                newWindow.opener = null
+              }
+            }}
+          >
+            <HelpIcon />
+          </IconButton>
+        </Tooltip>
+      </div>
+    </>
+  )
+}
+
+export default observer(CallbackEditor)

package/src/ConfigurationEditorWidget/components/ColorEditor.tsx

@@ -1,76 +1,38 @@
 import React, { lazy, useState } from 'react'
 import { observer } from 'mobx-react'
-import ReactPropTypes from 'prop-types'
-import TextField from '@material-ui/core/TextField'
-import { Color, RGBColor } from 'react-color'
+import { TextField } from '@mui/material'
 
-const ColorPicker = lazy(() => import('./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: Color) {
-  if (color instanceof Object) {
-    const { r, g, b, a } = color as RGBColor
-    return a === undefined ? `rgb(${r},${g},${b})` : `rgba(${r},${g},${b},${a})`
-  }
-  return color
-}
+const ColorPicker = lazy(() => import('@jbrowse/core/ui/ColorPicker'))
 
 export const ColorSlot = (props: {
   value: string
-  label: string
-  TextFieldProps: {
+  label?: string
+  TextFieldProps?: {
     helperText: string
     fullWidth: boolean
   }
   onChange: (arg: string) => void
 }) => {
-  const { value, label, TextFieldProps, onChange } = props
+  const { value = '#000', label = '', TextFieldProps = {}, onChange } = props
   const [displayed, setDisplayed] = useState(false)
 
   return (
-    <>
+    <div style={{ display: 'flex' }}>
       <TextField
         value={value}
         label={label}
-        InputProps={{
-          style: {
-            color: value,
-            borderRightWidth: '25px',
-            borderRightStyle: 'solid',
-            borderRightColor: value,
-          },
-        }}
         onClick={() => setDisplayed(!displayed)}
-        onChange={event => {
-          onChange(event.target.value)
-        }}
+        onChange={event => onChange(event.target.value)}
         {...TextFieldProps}
       />
-      {displayed ? (
+      <div style={{ marginTop: 10 }}>
         <React.Suspense fallback={<div />}>
-          <ColorPicker
-            color={value}
-            onChange={event => {
-              onChange(serializeColor(event.rgb))
-            }}
-          />
+          <ColorPicker color={value} onChange={event => onChange(event)} />
         </React.Suspense>
-      ) : null}
-    </>
+      </div>
+    </div>
   )
 }
-ColorSlot.propTypes = {
-  onChange: ReactPropTypes.func.isRequired,
-  label: ReactPropTypes.string,
-  TextFieldProps: ReactPropTypes.shape({}),
-  value: ReactPropTypes.string,
-}
-ColorSlot.defaultProps = {
-  label: '',
-  value: '#000',
-  TextFieldProps: {},
-}
 
 function ColorEditorSlot(props: {
   slot: {
@@ -85,9 +47,7 @@ function ColorEditorSlot(props: {
     <ColorSlot
       label={slot.name}
       value={slot.value}
-      onChange={(color: string) => {
-        slot.set(color)
-      }}
+      onChange={color => slot.set(color)}
       TextFieldProps={{
         helperText: slot.description,
         fullWidth: true,
@@ -95,12 +55,5 @@ function ColorEditorSlot(props: {
     />
   )
 }
-ColorEditorSlot.propTypes = {
-  slot: ReactPropTypes.shape({
-    name: ReactPropTypes.string.isRequired,
-    description: ReactPropTypes.string,
-    value: ReactPropTypes.string.isRequired,
-    set: ReactPropTypes.func.isRequired,
-  }).isRequired,
-}
+
 export default observer(ColorEditorSlot)