@jbrowse/plugin-config 4.3.0 → 5.0.0-beta.1

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

@@ -0,0 +1,4 @@
+export default function AddNewField({ onAdd, testid, }: {
+    onAdd: (value: string) => void;
+    testid?: string;
+}): import("react").JSX.Element;

package/esm/ConfigurationEditorWidget/components/AddNewField.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import AddIcon from '@mui/icons-material/Add';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
+// shared "add new" entry field used by the string-array and map slot editors:
+// a text box that commits its contents via onAdd and clears itself
+export default function AddNewField({ onAdd, testid, }) {
+    const [value, setValue] = useState('');
+    function commit() {
+        if (value !== '') {
+            onAdd(value);
+            setValue('');
+        }
+    }
+    return (_jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
+            setValue(event.target.value);
+        }, onKeyDown: event => {
+            if (event.key === 'Enter') {
+                commit();
+            }
+        }, slotProps: {
+            input: {
+                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { "data-testid": testid, disabled: value === '', onClick: () => {
+                            commit();
+                        }, children: _jsx(AddIcon, {}) }) })),
+            },
+        } }));
+}

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

@@ -1,9 +1,11 @@
+/** #slotEditor checkbox */
 declare const BooleanEditor: ({ slot, }: {
     slot: {
         name: string;
-        value: boolean;
+        value: boolean | undefined;
+        promotedBase?: unknown;
         set: (arg: boolean) => void;
         description: string;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default BooleanEditor;

package/esm/ConfigurationEditorWidget/components/BooleanEditor.js

@@ -1,9 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, FormControl, FormControlLabel, FormHelperText, } from '@mui/material';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { FormControl, FormHelperText } from '@mui/material';
 import { observer } from 'mobx-react';
+/** #slotEditor checkbox */
 const BooleanEditor = observer(function BooleanEditor({ slot, }) {
-    return (_jsxs(FormControl, { children: [_jsx(FormControlLabel, { label: slot.name, control: _jsx(Checkbox, { checked: slot.value, onChange: evt => {
-                        slot.set(evt.target.checked);
-                    } }) }), _jsx(FormHelperText, { children: slot.description })] }));
+    return (_jsxs(FormControl, { children: [_jsx(LabeledCheckbox, { label: slot.name, 
+                // An unset promotable slot renders its `promotedBase`, not `false`.
+                // Coercing every unset slot to unchecked mis-stated the three whose
+                // base is `true` (displayDirectionalChevrons, showSashimiArcs,
+                // readConnectionsDown): the box read unchecked on a track that was
+                // drawing chevrons, and ticking it wrote the value the track already
+                // had — no visible change, but the slot silently left the cascade and
+                // stopped following later session-wide defaults. The reset button
+                // (SlotEditor's `modified`) is what still separates inherited from
+                // customized; this only fixes which state is *shown*. The session tier
+                // is out of reach here, so a value promoted this session isn't
+                // reflected — see agent-docs/ideas/promotable-slot-ui.md, which is
+                // where that raw-vs-resolved gap is worked out.
+                checked: slot.value ?? !!slot.promotedBase, onChange: val => {
+                    slot.set(val);
+                } }), _jsx(FormHelperText, { children: slot.description })] }));
 });
 export default BooleanEditor;

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

@@ -1,10 +1,12 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
 declare const CallbackEditor: ({ slot, }: {
     slot: {
         set: (arg: string) => void;
         description: string;
         name: string;
         value: string;
-        contextVariable: string;
+        contextVariable: string[];
+        pluginManager: PluginManager;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default CallbackEditor;

package/esm/ConfigurationEditorWidget/components/CallbackEditor.js

@@ -1,68 +1,50 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useTransition } from 'react';
-import { stringToJexlExpression } from '@jbrowse/core/util/jexlStrings';
+import { MonospaceTextField } from '@jbrowse/core/ui';
+import { ensureJexlPrefix, stringToJexlExpression, } from '@jbrowse/core/util/jexlStrings';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { getEnv } from '@jbrowse/mobx-state-tree';
 import HelpIcon from '@mui/icons-material/Help';
-import { IconButton, TextField, Tooltip } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-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 validateAndSetCode(code, slot, setCodeError) {
+    // empty buffer is "in progress", not invalid — don't commit and don't warn
+    const trimmed = code.trim();
+    if (trimmed === '' || trimmed === 'jexl:') {
+        setCodeError(undefined);
+        return;
+    }
     try {
-        const jexlCode = code.startsWith('jexl:') ? code : `jexl:${code}`;
-        if (jexlCode === 'jexl:') {
-            throw new Error('Empty jexl expression is not valid');
-        }
-        stringToJexlExpression(jexlCode, getEnv(slot).pluginManager?.jexl);
+        const jexlCode = ensureJexlPrefix(code);
+        stringToJexlExpression(jexlCode, slot.pluginManager.jexl);
         slot.set(jexlCode);
         setCodeError(undefined);
     }
     catch (e) {
-        console.error({ e });
+        console.error(e);
         setCodeError(e);
     }
 }
 const CallbackEditor = observer(function CallbackEditor({ slot, }) {
     const { classes } = useStyles();
     const [code, setCode] = useState(slot.value);
-    const [error, setCodeError] = useState();
+    const [codeError, setCodeError] = useState();
     const [, startTransition] = useTransition();
-    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(TextField, { multiline: true, className: classes.callbackEditor, value: code.startsWith('jexl:') ? code.split('jexl:')[1] : code, onChange: event => {
-                            const value = event.target.value;
-                            setCode(value);
-                            startTransition(() => {
-                                validateAndSetCode(value, slot, setCodeError);
-                            });
-                        }, style: { background: error ? '#fdd' : undefined }, slotProps: {
-                            input: {
-                                classes: {
-                                    input: classes.textAreaFont,
-                                },
-                            },
-                        } }), _jsx("p", { children: slot.description }), _jsx(Tooltip, { title: _jsxs("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", _jsx("br", {}), " Names of available context items: ", slot.contextVariable] }), arrow: true, children: _jsx(IconButton, { color: "primary", onClick: () => {
-                                const newWindow = window.open('https://github.com/TomFrost/Jexl', '_blank', 'noopener,noreferrer');
-                                if (newWindow) {
-                                    newWindow.opener = null;
-                                }
-                            }, children: _jsx(HelpIcon, {}) }) })] })] }));
+    // if default value is a callback, will have to remove jexl:
+    // do this last
+    return (_jsxs(MonospaceTextField, { className: classes.callbackEditor, value: code, error: codeError, onChange: value => {
+            setCode(value);
+            startTransition(() => {
+                validateAndSetCode(value, slot, setCodeError);
+            });
+        }, children: [_jsx("p", { children: slot.description }), _jsx(Tooltip, { title: _jsxs("div", { children: ["Callbacks are written in Jexl format. Click to learn more.", _jsx("br", {}), " Names of available context items:", ' ', slot.contextVariable.join(', ')] }), arrow: true, children: _jsx(IconButton, { color: "primary", onClick: () => {
+                        window.open('https://jbrowse.org/jb2/docs/config_guides/jexl/', '_blank', 'noopener,noreferrer');
+                    }, children: _jsx(HelpIcon, {}) }) })] }));
 });
 export default CallbackEditor;

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

@@ -1,18 +1,10 @@
-export declare const ColorSlot: (props: {
-    value: string;
-    label?: string;
-    TextFieldProps?: {
-        helperText: string;
-        fullWidth: boolean;
-    };
-    onChange: (arg: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+/** #slotEditor text field beside a swatch that opens a color picker */
 declare const ColorEditor: (props: {
     slot: {
         name: string;
-        value: string;
+        value: string | undefined;
         description: string;
         set: (arg: string) => void;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ColorEditor;

package/esm/ConfigurationEditorWidget/components/ColorEditor.js

@@ -1,26 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, useState } from 'react';
-import ColorPicker from '@jbrowse/core/ui/ColorPicker';
-import { TextField } from '@mui/material';
+import { Suspense, lazy } from 'react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-export const ColorSlot = (props) => {
-    const { value, label = '', TextFieldProps = {}, onChange } = props;
-    const [displayed, setDisplayed] = useState(false);
-    return (_jsxs("div", { style: { display: 'flex' }, children: [_jsx(TextField, { value: value, label: label, onClick: () => {
-                    setDisplayed(!displayed);
-                }, onChange: event => {
-                    onChange(event.target.value);
-                }, ...TextFieldProps }), _jsx("div", { style: { marginTop: 10 }, children: _jsx(Suspense, { fallback: null, children: _jsx(ColorPicker, { color: value, onChange: event => {
-                            onChange(event);
-                        } }) }) })] }));
-};
+import ConfigurationTextField from './ConfigurationTextField.js';
+const PopoverPicker = lazy(() => import('@jbrowse/core/ui/PopoverPicker'));
+const useStyles = makeStyles()({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 4,
+    },
+    field: {
+        flex: 1,
+        minWidth: 0,
+    },
+});
+// Also drives `maybeColor`, whose value is `undefined` while unset. An empty
+// string keeps the field controlled and the picker fed, the same way
+// NumberEditor renders an unset `maybeNumber` as an empty field. Clearing the
+// field writes `''` rather than restoring `undefined` — "unset" is reachable
+// through the slot's reset button, which is where every other slot type puts it.
+/** #slotEditor text field beside a swatch that opens a color picker */
 const ColorEditor = observer(function ColorEditor(props) {
     const { slot } = props;
-    return (_jsx(ColorSlot, { label: slot.name, value: slot.value, onChange: color => {
-            slot.set(color);
-        }, TextFieldProps: {
-            helperText: slot.description,
-            fullWidth: true,
-        } }));
+    const { classes } = useStyles();
+    const value = slot.value ?? '';
+    return (_jsxs("div", { className: classes.root, children: [_jsx(ConfigurationTextField, { value: value, label: slot.name, helperText: slot.description, className: classes.field, onChange: event => {
+                    slot.set(event.target.value);
+                } }), _jsx(Suspense, { fallback: null, children: _jsx(PopoverPicker, { color: value, onChange: color => {
+                        slot.set(color);
+                    } }) })] }));
 });
 export default ColorEditor;

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

@@ -1,9 +1,8 @@
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { AbstractSessionModel } from '@jbrowse/core/util';
 declare const ConfigurationEditor: ({ model, }: {
     model: {
         target?: AnyConfigurationModel;
+        expandedDisplayId?: string;
     };
-    session?: AbstractSessionModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ConfigurationEditor;

package/esm/ConfigurationEditorWidget/components/ConfigurationEditor.js

@@ -1,14 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { getTypeNamesFromExplicitlyTypedUnion, isConfigurationSchemaType, isConfigurationSlotType, readConfObject, } from '@jbrowse/core/configuration';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getSlotDefinition, getTypeNamesFromExplicitlyTypedUnion, isConfigurationModel, isConfigurationSchemaType, isConfigurationSlot, makeSlotFacade, readConfObject, } from '@jbrowse/core/configuration';
 import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { getMembers } from '@jbrowse/mobx-state-tree';
+import ClearIcon from '@mui/icons-material/Clear';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { Accordion, AccordionDetails, AccordionSummary, FormGroup, Typography, } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, InputAdornment, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { singular } from 'pluralize';
-import SlotEditor from "./SlotEditor.js";
-import TypeSelector from "./TypeSelector.js";
+import SlotEditor from './SlotEditor.js';
+import TypeSelector from './TypeSelector.js';
+import { singularSlotName } from './singularSlotName.js';
 const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.tertiary.contrastText || '#fff',
@@ -24,47 +28,134 @@ const useStyles = makeStyles()(theme => ({
         width: '100%',
         overflowX: 'auto',
     },
+    filter: {
+        margin: theme.spacing(1),
+    },
+    noResults: {
+        margin: theme.spacing(2),
+        fontStyle: 'italic',
+    },
+    advancedToggle: {
+        margin: theme.spacing(1, 0),
+        textTransform: 'none',
+    },
 }));
+// matches a slot or sub-schema against a lowercased filter string, recursing
+// into sub-schemas so a nested slot name keeps its ancestors visible
+function memberMatches(schema, slotName, slotSchema, query) {
+    if (isConfigurationSlot(schema, slotName)) {
+        const { description } = getSlotDefinition(schema, slotName);
+        return (slotName.toLowerCase().includes(query) ||
+            !!description?.toLowerCase().includes(query));
+    }
+    else if (isConfigurationSchemaType(slotSchema)) {
+        const slot = schema[slotName];
+        return (slotName.toLowerCase().includes(query) ||
+            (Array.isArray(slot)
+                ? slot.some(subslot => schemaMatches(subslot, query))
+                : schemaMatches(slot, query)));
+    }
+    else {
+        return false;
+    }
+}
+function schemaMatches(schema, query) {
+    const { properties } = getMembers(schema);
+    return Object.entries(properties).some(([slotName, slotSchema]) => memberMatches(schema, slotName, slotSchema, query));
+}
+// a slot flagged `advanced` in its schema definition, hidden behind a toggle
+function isAdvancedSlot(schema, slotName) {
+    return (isConfigurationSlot(schema, slotName) &&
+        !!getSlotDefinition(schema, slotName).advanced);
+}
+// a display config is the only sub-schema carrying a displayId; when the editor
+// was opened from a view, only the active display expands by default so the
+// track's other (incompatible/inactive) displays don't crowd the panel
+function displayDefaultExpanded(slot, expandedDisplayId) {
+    const displayId = isConfigurationModel(slot)
+        ? readConfObject(slot, 'displayId')
+        : undefined;
+    return !displayId || !expandedDisplayId || displayId === expandedDisplayId;
+}
 const Member = observer(function Member(props) {
     const { classes } = useStyles();
-    const { slotName, slotSchema, schema, slot = schema[slotName], path = [], } = props;
+    const { slotName, slotSchema, schema, slot = schema[slotName], path = [], filter = '', expandedDisplayId, } = props;
+    // when the sub-schema's own name matches, drop the filter for its children so
+    // the whole group stays visible; otherwise keep filtering descendants
+    const childFilter = slotName.toLowerCase().includes(filter.toLowerCase())
+        ? ''
+        : filter;
     if (isConfigurationSchemaType(slotSchema)) {
-        if (slot.length) {
+        // an array-typed sub-schema (e.g. `displays`) renders one Member per entry;
+        // a single sub-schema (not an array) falls through to the accordion below.
+        // keyed on Array.isArray, not `.length` truthiness, so an empty array maps
+        // to nothing instead of being mis-handled as a single schema
+        if (Array.isArray(slot)) {
             return slot.map((subslot, slotIndex) => {
                 const key = subslot.type
-                    ? `${singular(slotName)} ${subslot.type}`
-                    : `${singular(slotName)} ${slotIndex + 1}`;
+                    ? `${singularSlotName(slotName)} ${subslot.type}`
+                    : `${singularSlotName(slotName)} ${slotIndex + 1}`;
                 return _jsx(Member, { ...props, slot: subslot, slotName: key }, 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);
-        return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+        return (_jsxs(Accordion
+        // an active filter force-expands the group so a match inside an
+        // otherwise-collapsed (inactive display) sub-schema is actually
+        // visible, not just present in the collapsed DOM. The key flips the
+        // accordion between filtered/unfiltered mounts so the new
+        // defaultExpanded takes effect (Accordion reads it only on mount).
+        , { defaultExpanded: filter ? true : displayDefaultExpanded(slot, expandedDisplayId), className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
                                 if (evt.target.value !== slot.type) {
                                     schema.setSubschema(slotName, {
                                         type: evt.target.value,
                                     });
                                 }
-                            } })) : null, _jsx(FormGroup, { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
+                            } })) : null, _jsx("div", { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName], filter: childFilter, expandedDisplayId: expandedDisplayId }) })] })] }, filter ? 'filtered' : 'unfiltered'));
     }
-    else if (isConfigurationSlotType(slotSchema)) {
-        return _jsx(SlotEditor, { slot: slot, slotSchema: slotSchema }, slotName);
+    else if (isConfigurationSlot(schema, slotName)) {
+        return _jsx(SlotEditor, { slot: makeSlotFacade(schema, slotName) }, slotName);
     }
     else {
         return null;
     }
 });
-const Schema = observer(function Schema({ schema, path = [], }) {
+const Schema = observer(function Schema({ schema, path = [], filter = '', expandedDisplayId, }) {
+    const { classes } = useStyles();
+    const [showAdvanced, setShowAdvanced] = useState(false);
+    const query = filter.toLowerCase();
     const properties = getMembers(schema).properties;
-    return (_jsx(_Fragment, { children: Object.entries(properties).map(([slotName, slotSchema]) => (_jsx(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema }, slotName))) }));
+    const visible = Object.entries(properties).filter(([slotName, slotSchema]) => !query || memberMatches(schema, slotName, slotSchema, query));
+    const normal = visible.filter(([slotName]) => !isAdvancedSlot(schema, slotName));
+    const advanced = visible.filter(([slotName]) => isAdvancedSlot(schema, slotName));
+    const renderMember = ([slotName, slotSchema]) => (_jsx(Member, { slotName: slotName, slotSchema: slotSchema, path: path, schema: schema, filter: filter, expandedDisplayId: expandedDisplayId }, slotName));
+    return (_jsxs(_Fragment, { children: [normal.map(renderMember), advanced.length && !query ? (_jsxs(Button, { className: classes.advancedToggle, size: "small", startIcon: showAdvanced ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: () => {
+                    setShowAdvanced(!showAdvanced);
+                }, children: [showAdvanced ? 'Hide' : 'Show', " advanced settings (", advanced.length, ")"] })) : null, showAdvanced || query ? advanced.map(renderMember) : null] }));
 });
 const ConfigurationEditor = observer(function ConfigurationEditor({ model, }) {
     const { classes } = useStyles();
+    const [filter, setFilter] = useState('');
+    // key forces a re-render, otherwise the same field can end up being used for
+    // different tracks since only the backing model changes for example see pr
+    // #804
     const target = model.target;
     if (!target) {
         return _jsx(Typography, { children: "No configuration target" });
     }
     const key = readConfObject(target, 'trackId');
     const name = readConfObject(target, 'name');
-    return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: _jsx(SanitizedHTML, { html: name ?? 'Configuration' }) }) }), _jsx(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: _jsx(Schema, { schema: target }) })] }, key));
+    return (_jsxs(Accordion, { defaultExpanded: true, className: classes.accordion, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMoreIcon, { className: classes.icon }), children: _jsx(Typography, { children: _jsx(SanitizedHTML, { html: name ?? 'Configuration' }) }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, "data-testid": "configEditor", children: [_jsx(TextField, { className: classes.filter, label: "Filter options", value: filter, onChange: evt => {
+                            setFilter(evt.target.value);
+                        }, size: "small", fullWidth: true, slotProps: {
+                            input: {
+                                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
+                                endAdornment: filter ? (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { size: "small", "aria-label": "clear filter", onClick: () => {
+                                            setFilter('');
+                                        }, children: _jsx(ClearIcon, { fontSize: "small" }) }) })) : null,
+                            },
+                        } }), filter && !schemaMatches(target, filter.toLowerCase()) ? (_jsxs(Typography, { className: classes.noResults, children: ["No options match \u201C", filter, "\u201D"] })) : (_jsx(Schema, { schema: target, filter: filter, expandedDisplayId: model.expandedDisplayId }))] })] }, key));
 });
 export default ConfigurationEditor;

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

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from '@mui/material';
 export default function ConfigurationTextField(props: {
     helperText?: string;
-} & TextFieldProps): import("react/jsx-runtime").JSX.Element;
+} & TextFieldProps): import("react").JSX.Element;

package/esm/ConfigurationEditorWidget/components/ConfigurationTextField.js

@@ -1,9 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SanitizedHTML } from '@jbrowse/core/ui';
 import { TextField } from '@mui/material';
+// adds ability to have html in helperText. note that FormHelperTextProps is
+// div because the default is p which does not like div children
 export default function ConfigurationTextField(props) {
-    const { helperText } = props;
-    return (_jsx(TextField, { ...props, helperText: _jsx(SanitizedHTML, { html: helperText || '' }), fullWidth: true, slotProps: {
+    const { helperText, slotProps, ...rest } = props;
+    return (_jsx(TextField, { ...rest, helperText: _jsx(SanitizedHTML, { html: helperText || '' }), fullWidth: true, 
+        // merged, not replaced: this component owns `formHelperText` (the div
+        // above needs it) while a caller owns the rest, and setting the whole bag
+        // here dropped a caller's `inputLabel` silently — the shrink that lets a
+        // labelled field draw its placeholder
+        slotProps: {
+            ...slotProps,
             formHelperText: {
                 component: 'div',
             },

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

@@ -4,5 +4,5 @@ declare const HeadingComponent: ({ model, }: {
             type: string;
         };
     };
-}) => string | import("react/jsx-runtime").JSX.Element;
+}) => string | import("react").JSX.Element;
 export default HeadingComponent;

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

@@ -0,0 +1,10 @@
+/** #slotEditor numeric text field that rounds to an integer */
+declare const IntegerEditor: ({ slot, }: {
+    slot: {
+        name?: string;
+        value: number;
+        description?: string;
+        set: (num: number) => void;
+    };
+}) => import("react").JSX.Element;
+export default IntegerEditor;

package/esm/ConfigurationEditorWidget/components/IntegerEditor.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import NumberEditor from './NumberEditor.js';
+// thin wrapper: an integer slot is a number slot that only commits whole values
+/** #slotEditor numeric text field that rounds to an integer */
+const IntegerEditor = observer(function IntegerEditor({ slot, }) {
+    return _jsx(NumberEditor, { slot: slot, integer: true });
+});
+export default IntegerEditor;

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

@@ -1,9 +1,11 @@
+/** #slotEditor monospace textarea holding arbitrary JSON */
 declare const JsonEditor: ({ slot, }: {
     slot: {
         name: string;
         description: string;
         value: unknown;
+        promotedBase?: unknown;
         set: (arg: unknown) => void;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default JsonEditor;

package/esm/ConfigurationEditorWidget/components/JsonEditor.js

@@ -1,53 +1,40 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MonospaceTextField } from '@jbrowse/core/ui';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { InputLabel, TextField } from '@mui/material';
 import { observer } from 'mobx-react';
-const fontSize = '12px';
-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 => ({
-    error: {
-        color: 'red',
-        fontSize: '0.8em',
-    },
-    callbackEditor: {
-        fontFamily,
-        fontSize,
+    jsonEditor: {
+        fontSize: '12px',
         background: theme.palette.background.default,
-        width: 800,
+        width: '100%',
         marginTop: '16px',
         border: '1px solid rgba(0,0,0,0.42)',
     },
-    callbackContainer: {
-        width: '100%',
-        overflowX: 'auto',
-    },
-    textAreaFont: {
-        fontFamily,
-    },
 }));
+/** #slotEditor monospace textarea holding arbitrary JSON */
 const JsonEditor = observer(function JsonEditor({ slot, }) {
     const { classes } = useStyles();
-    const [contents, setContents] = useState(JSON.stringify(slot.value, null, 2));
+    // A `maybeFrozen` slot is `undefined` when unset — the promotable inherit
+    // state (alignments/synteny `colorBy`). `JSON.stringify(undefined)` returns
+    // the *value* `undefined`, not a string, so seeding straight off `slot.value`
+    // handed MonospaceTextField an undefined `value` and made the field
+    // uncontrolled until the first keystroke (React then warns on the switch).
+    // Show what unset resolves to instead, as BooleanEditor does.
+    const [contents, setContents] = useState(() => {
+        const shown = slot.value ?? slot.promotedBase;
+        return shown === undefined ? '' : JSON.stringify(shown, null, 2);
+    });
     const [error, setError] = useState();
-    useEffect(() => {
-        try {
-            setError(undefined);
-            slot.set(JSON.parse(contents));
-        }
-        catch (e) {
-            console.error({ e });
-            setError(e);
-        }
-    }, [contents, slot]);
-    return (_jsxs(_Fragment, { children: [error ? _jsx("p", { className: classes.error, children: `${error}` }) : null, _jsxs("div", { className: classes.callbackContainer, children: [_jsx(InputLabel, { shrink: true, htmlFor: "json-editor", children: slot.name }), _jsx(TextField, { id: "json-editor", className: classes.callbackEditor, value: contents, helperText: slot.description, multiline: true, onChange: event => {
-                            setContents(event.target.value);
-                        }, style: { background: error ? '#fdd' : undefined }, slotProps: {
-                            input: {
-                                classes: {
-                                    input: classes.textAreaFont,
-                                },
-                            },
-                        } })] })] }));
+    return (_jsx(MonospaceTextField, { className: classes.jsonEditor, label: slot.name, value: contents, error: error, helperText: slot.description, onChange: val => {
+            setContents(val);
+            try {
+                slot.set(JSON.parse(val));
+                setError(undefined);
+            }
+            catch (e) {
+                setError(e);
+            }
+        } }));
 });
 export default JsonEditor;

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

@@ -0,0 +1,8 @@
+export default function MapEntryCard({ title, onDelete, children, }: {
+    title: string;
+    onDelete: () => void;
+    children: React.ReactNode;
+}): import("react").JSX.Element;
+export declare function MapAddCard({ onAdd }: {
+    onAdd: (key: string) => void;
+}): import("react").JSX.Element;