@jbrowse/plugin-config 2.11.2 → 2.12.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 declare const ConfigurationEditor: ({ model, }: {
     model: {
         target: AnyConfigurationModel;

package/dist/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -4,12 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const configuration_1 = require("@jbrowse/core/configuration");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const pluralize_1 = require("pluralize");
+const SanitizedHTML_1 = __importDefault(require("@jbrowse/core/ui/SanitizedHTML"));
+const configuration_1 = require("@jbrowse/core/configuration");
 // icons
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
 // locals
@@ -18,12 +19,9 @@ const TypeSelector_1 = __importDefault(require("./TypeSelector"));
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     var _a;
     return ({
-        expandIcon: {
+        icon: {
             color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
         },
-        root: {
-            padding: theme.spacing(1, 3, 1, 1),
-        },
         expansionPanelDetails: {
             display: 'block',
             padding: theme.spacing(1),
@@ -40,37 +38,36 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
 const Member = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
     const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
-    let typeSelector;
     if ((0, configuration_1.isConfigurationSchemaType)(slotSchema)) {
         if (slot.length) {
             return slot.map((subslot, slotIndex) => {
-                const key = `${(0, pluralize_1.singular)(slotName)} ${slotIndex + 1}`;
+                const key = subslot.type
+                    ? `${(0, pluralize_1.singular)(slotName)} ${subslot.type}`
+                    : `${(0, pluralize_1.singular)(slotName)} ${slotIndex + 1}`;
                 return react_1.default.createElement(Member, { key: key, ...props, slot: subslot, slotName: key });
             });
         }
         // if this is an explicitly typed schema, make a type-selecting dropdown
         // that can be used to change its type
         const typeNameChoices = (0, configuration_1.getTypeNamesFromExplicitlyTypedUnion)(slotSchema);
-        if (typeNameChoices.length) {
-            typeSelector = (react_1.default.createElement(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
-                    if (evt.target.value !== slot.type) {
-                        schema.setSubschema(slotName, { type: evt.target.value });
-                    }
-                } }));
-        }
         return (react_1.default.createElement(material_1.Accordion, { defaultExpanded: true, className: classes.accordion },
-            react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
+            react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.icon }) },
                 react_1.default.createElement(material_1.Typography, null, [...path, slotName].join('➔'))),
             react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails },
-                typeSelector,
+                typeNameChoices.length ? (react_1.default.createElement(TypeSelector_1.default, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+                        if (evt.target.value !== slot.type) {
+                            schema.setSubschema(slotName, { type: evt.target.value });
+                        }
+                    } })) : null,
                 react_1.default.createElement(material_1.FormGroup, { className: classes.noOverflow },
                     react_1.default.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
     }
-    if ((0, configuration_1.isConfigurationSlotType)(slotSchema)) {
-        // this is a regular config slot
+    else if ((0, configuration_1.isConfigurationSlotType)(slotSchema)) {
         return react_1.default.createElement(SlotEditor_1.default, { key: slotName, slot: slot, slotSchema: slotSchema });
     }
-    return null;
+    else {
+        return null;
+    }
 });
 const Schema = (0, mobx_react_1.observer)(function ({ schema, path = [], }) {
     const properties = (0, mobx_state_tree_1.getMembers)(schema).properties;
@@ -85,8 +82,9 @@ const ConfigurationEditor = (0, mobx_react_1.observer)(function ({ model, }) {
     const key = target && (0, configuration_1.readConfObject)(target, 'trackId');
     const name = target && (0, configuration_1.readConfObject)(target, 'name');
     return (react_1.default.createElement(material_1.Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
-        react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
-            react_1.default.createElement(material_1.Typography, null, name !== null && name !== void 0 ? name : 'Configuration')),
+        react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.icon }) },
+            react_1.default.createElement(material_1.Typography, null,
+                react_1.default.createElement(SanitizedHTML_1.default, { html: name !== null && name !== void 0 ? name : 'Configuration' }))),
         react_1.default.createElement(material_1.AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" }, !target ? 'no target set' : react_1.default.createElement(Schema, { schema: target }))));
 });
 exports.default = ConfigurationEditor;

package/dist/ConfigurationEditorWidget/components/ConfigurationTextField.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ConfigurationTextField;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const ui_1 = require("@jbrowse/core/ui");
@@ -14,4 +15,3 @@ function ConfigurationTextField(props) {
             component: 'div',
         }, fullWidth: true }));
 }
-exports.default = ConfigurationTextField;

package/dist/ConfigurationEditorWidget/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = registerConfigurationEditorWidget;
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
@@ -44,4 +45,3 @@ function registerConfigurationEditorWidget(pluginManager) {
         });
     });
 }
-exports.default = registerConfigurationEditorWidget;

package/dist/ConfigurationEditorWidget/model.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = stateModelFactory;
 const mobx_state_tree_1 = require("mobx-state-tree");
 const mst_1 = require("@jbrowse/core/util/types/mst");
 function stateModelFactory(pluginManager) {
@@ -18,4 +19,3 @@ function stateModelFactory(pluginManager) {
         },
     }));
 }
-exports.default = stateModelFactory;

package/dist/FromConfigAdapter/FromConfigAdapter.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeFeatures = void 0;
+exports.makeFeatures = makeFeatures;
 const BaseAdapter_1 = require("@jbrowse/core/data_adapters/BaseAdapter");
 const simpleFeature_1 = __importDefault(require("@jbrowse/core/util/simpleFeature"));
 const rxjs_1 = require("@jbrowse/core/util/rxjs");
@@ -28,7 +28,6 @@ function makeFeatures(fdata) {
     }
     return features;
 }
-exports.makeFeatures = makeFeatures;
 class FromConfigAdapter extends BaseAdapter_1.BaseFeatureDataAdapter {
     constructor(conf, getSubAdapter, pluginManager) {
         super(conf, getSubAdapter, pluginManager);

package/dist/FromConfigAdapter/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FromConfigAdapterF;
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
 function FromConfigAdapterF(pluginManager) {
@@ -38,4 +39,3 @@ function FromConfigAdapterF(pluginManager) {
         },
     }));
 }
-exports.default = FromConfigAdapterF;

package/dist/FromConfigRegionsAdapter/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FromConfigRegionsAdapterF;
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
 function FromConfigRegionsAdapterF(pluginManager) {
@@ -38,4 +39,3 @@ function FromConfigRegionsAdapterF(pluginManager) {
         },
     }));
 }
-exports.default = FromConfigRegionsAdapterF;

package/dist/FromConfigSequenceAdapter/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = FromConfigSequenceAdapterF;
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
 function FromConfigSequenceAdapterF(pluginManager) {
@@ -38,4 +39,3 @@ function FromConfigSequenceAdapterF(pluginManager) {
         },
     }));
 }
-exports.default = FromConfigSequenceAdapterF;

package/dist/RefNameAliasAdapter/index.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = RefNameAliasAdapterF;
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const configSchema_1 = __importDefault(require("./configSchema"));
 function RefNameAliasAdapterF(pluginManager) {
@@ -38,4 +39,3 @@ function RefNameAliasAdapterF(pluginManager) {
         },
     }));
 }
-exports.default = RefNameAliasAdapterF;

package/dist/index.d.ts

@@ -1,15 +1,10 @@
-/// <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>;
+        target: import("@jbrowse/core/configuration").AnyConfigurationModel;
     };
-    session?: import("@jbrowse/core/util").AbstractSessionModel | undefined;
+    session?: import("@jbrowse/core/util").AbstractSessionModel;
 }) => import("react").JSX.Element>;
 export default class ConfigurationPlugin extends Plugin {
     name: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { AbstractSessionModel } from '@jbrowse/core/util';
+import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 declare const ConfigurationEditor: ({ model, }: {
     model: {
         target: AnyConfigurationModel;

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,10 +1,11 @@
 import React from 'react';
-import { readConfObject, getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, } from '@jbrowse/core/configuration';
 import { FormGroup, Accordion, AccordionDetails, AccordionSummary, Typography, } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getMembers } from 'mobx-state-tree';
 import { singular } from 'pluralize';
+import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
+import { readConfObject, getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, } from '@jbrowse/core/configuration';
 // icons
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 // locals
@@ -13,12 +14,9 @@ import TypeSelector from './TypeSelector';
 const useStyles = makeStyles()(theme => {
     var _a;
     return ({
-        expandIcon: {
+        icon: {
             color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
         },
-        root: {
-            padding: theme.spacing(1, 3, 1, 1),
-        },
         expansionPanelDetails: {
             display: 'block',
             padding: theme.spacing(1),
@@ -35,37 +33,36 @@ const useStyles = makeStyles()(theme => {
 const Member = observer(function (props) {
     const { classes } = useStyles();
     const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
-    let typeSelector;
     if (isConfigurationSchemaType(slotSchema)) {
         if (slot.length) {
             return slot.map((subslot, slotIndex) => {
-                const key = `${singular(slotName)} ${slotIndex + 1}`;
+                const key = subslot.type
+                    ? `${singular(slotName)} ${subslot.type}`
+                    : `${singular(slotName)} ${slotIndex + 1}`;
                 return React.createElement(Member, { key: key, ...props, slot: subslot, slotName: key });
             });
         }
         // if this is an explicitly typed schema, make a type-selecting dropdown
         // that can be used to change its type
         const typeNameChoices = getTypeNamesFromExplicitlyTypedUnion(slotSchema);
-        if (typeNameChoices.length) {
-            typeSelector = (React.createElement(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
-                    if (evt.target.value !== slot.type) {
-                        schema.setSubschema(slotName, { type: evt.target.value });
-                    }
-                } }));
-        }
         return (React.createElement(Accordion, { defaultExpanded: true, className: classes.accordion },
-            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
+            React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.icon }) },
                 React.createElement(Typography, null, [...path, slotName].join('➔'))),
             React.createElement(AccordionDetails, { className: classes.expansionPanelDetails },
-                typeSelector,
+                typeNameChoices.length ? (React.createElement(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+                        if (evt.target.value !== slot.type) {
+                            schema.setSubschema(slotName, { type: evt.target.value });
+                        }
+                    } })) : null,
                 React.createElement(FormGroup, { className: classes.noOverflow },
                     React.createElement(Schema, { schema: slot, path: [...path, slotName] })))));
     }
-    if (isConfigurationSlotType(slotSchema)) {
-        // this is a regular config slot
+    else if (isConfigurationSlotType(slotSchema)) {
         return React.createElement(SlotEditor, { key: slotName, slot: slot, slotSchema: slotSchema });
     }
-    return null;
+    else {
+        return null;
+    }
 });
 const Schema = observer(function ({ schema, path = [], }) {
     const properties = getMembers(schema).properties;
@@ -80,8 +77,9 @@ const ConfigurationEditor = observer(function ({ model, }) {
     const key = target && readConfObject(target, 'trackId');
     const name = target && readConfObject(target, 'name');
     return (React.createElement(Accordion, { key: key, defaultExpanded: true, className: classes.accordion },
-        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
-            React.createElement(Typography, null, name !== null && name !== void 0 ? name : 'Configuration')),
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.icon }) },
+            React.createElement(Typography, null,
+                React.createElement(SanitizedHTML, { html: name !== null && name !== void 0 ? name : 'Configuration' }))),
         React.createElement(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor" }, !target ? 'no target set' : React.createElement(Schema, { schema: target }))));
 });
 export default ConfigurationEditor;

package/esm/index.d.ts

@@ -1,15 +1,10 @@
-/// <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>;
+        target: import("@jbrowse/core/configuration").AnyConfigurationModel;
     };
-    session?: import("@jbrowse/core/util").AbstractSessionModel | undefined;
+    session?: import("@jbrowse/core/util").AbstractSessionModel;
 }) => import("react").JSX.Element>;
 export default class ConfigurationPlugin extends Plugin {
     name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "2.11.2",
+  "version": "2.12.1",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -56,5 +56,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "511048cb6965f0bf624c96de244e7fd47fce17d6"
+  "gitHead": "20f16ae5a56ae5e4806aaa373131e540b0b5b0fd"
 }