npm - @jbrowse/plugin-config - Versions diffs - 2.11.1 → 2.12.0 - Mend

@jbrowse/plugin-config 2.11.1 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

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

@@ -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 CHANGED Viewed

@@ -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/esm/ConfigurationEditorWidget/components/ConfigurationEditor.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-config",
-  "version": "2.11.1",
+  "version": "2.12.0",
   "description": "JBrowse 2 config utilities",
   "keywords": [
     "jbrowse",
@@ -56,5 +56,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
+  "gitHead": "935f2602d29abc737bb1f493a922b6218d023ae2"
 }