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

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

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

package/esm/ConfigurationEditorWidget/components/AddNewField.js

@@ -0,0 +1,29 @@
+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, startAdornment, }) {
+    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: {
+                startAdornment,
+                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,10 @@
+/** #slotEditor checkbox */
 declare const BooleanEditor: ({ slot, }: {
     slot: {
         name: string;
-        value: boolean;
+        value: boolean | undefined;
         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,11 @@
 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, checked: !!slot.value, 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,11 @@
-export declare const ColorSlot: (props: {
-    value: string;
-    label?: string;
-    TextFieldProps?: {
-        helperText: string;
-        fullWidth: boolean;
-    };
-    onChange: (arg: string) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const ColorEditor: (props: {
+/** #slotEditor text field beside a swatch that opens a color picker */
+declare const ColorEditor: ({ slot, }: {
     slot: {
         name: string;
-        value: string;
+        value: string | undefined;
         description: string;
+        contextVariable?: 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,51 @@
 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, useState } from 'react';
+import { isCssColor } from '@jbrowse/core/util/colorBits';
+import { isJexl } from '@jbrowse/core/util/jexlStrings';
+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);
-                        } }) }) })] }));
-};
-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,
-        } }));
+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. The slot
+// refuses what is not a color, so text that does not parse yet stays a draft
+// in the field and reaches the slot once it does; leaving the field drops an
+// unparsed draft. "Unset" is reachable through the slot's reset button, which
+// is where every other slot type puts it. Only a slot declaring a
+// `contextVariable` takes a `jexl:` callback, which an entry of a colour list
+// never does.
+/** #slotEditor text field beside a swatch that opens a color picker */
+const ColorEditor = observer(function ColorEditor({ slot, }) {
+    const admitsJexl = !!slot.contextVariable?.length;
+    const { classes } = useStyles();
+    const [draft, setDraft] = useState();
+    const value = slot.value ?? '';
+    return (_jsxs("div", { className: classes.root, children: [_jsx(ConfigurationTextField, { value: draft ?? value, label: slot.name, error: draft !== undefined, helperText: draft === undefined ? slot.description : `"${draft}" is not a color`, className: classes.field, onChange: event => {
+                    const text = event.target.value;
+                    if (isCssColor(text) || (admitsJexl && isJexl(text))) {
+                        slot.set(text);
+                        setDraft(undefined);
+                    }
+                    else {
+                        setDraft(text);
+                    }
+                }, onBlur: () => {
+                    setDraft(undefined);
+                } }), _jsx(Suspense, { fallback: null, children: _jsx(PopoverPicker, { color: value, onChange: color => {
+                        slot.set(color);
+                        setDraft(undefined);
+                    } }) })] }));
 });
 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,18 +1,22 @@
-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 { arraySlotUnion, getSlotDefinition, getTypeNamesFromExplicitlyTypedUnion, isConfigurationModel, isConfigurationSchemaType, isConfigurationSlot, makeSlotFacade, readConfObject, setConf, } 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 { getMembers, getSnapshot } from '@jbrowse/mobx-state-tree';
+import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
+import ClearIcon from '@mui/icons-material/Clear';
+import DeleteIcon from '@mui/icons-material/Delete';
+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, MenuItem, 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',
-    },
     expansionPanelDetails: {
         display: 'block',
         padding: theme.spacing(1),
@@ -24,47 +28,182 @@ 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',
+    },
+    entryControls: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+    },
 }));
+// The entries of an array of sub-schemas as snapshots, for a whole-list write.
+function listSnapshot(schema, listName) {
+    return [...getSnapshot(schema[listName])];
+}
+// 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))
+                : slot !== undefined && 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;
+}
+// A union list entry's own controls: its type, and its place in the list. Each
+// is one whole-list write, so every state it leaves loads again.
+const EntryControls = observer(function EntryControls({ schema, title, slot, entry: { listName, choices, index, count }, }) {
+    const { classes } = useStyles();
+    const write = (edit) => {
+        setConf(schema, listName, edit(listSnapshot(schema, listName)));
+    };
+    const swap = (at) => {
+        write(list => list.toSpliced(at, 2, list[at + 1], list[at]));
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.entryControls, children: [_jsx(IconButton, { "aria-label": `move ${title} up`, disabled: index === 0, onClick: () => {
+                            swap(index - 1);
+                        }, children: _jsx(ArrowUpwardIcon, { fontSize: "small" }) }), _jsx(IconButton, { "aria-label": `move ${title} down`, disabled: index === count - 1, onClick: () => {
+                            swap(index);
+                        }, children: _jsx(ArrowDownwardIcon, { fontSize: "small" }) }), _jsx(IconButton, { "aria-label": `remove ${title}`, onClick: () => {
+                            write(list => list.toSpliced(index, 1));
+                        }, children: _jsx(DeleteIcon, { fontSize: "small" }) })] }), _jsx(TypeSelector, { typeNameChoices: choices, slotName: title, slot: slot, onChange: evt => {
+                    const type = evt.target.value;
+                    if (type !== slot.type) {
+                        write(list => list.with(index, { type }));
+                    }
+                } })] }));
+});
 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, entry, } = 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) {
-            return slot.map((subslot, slotIndex) => {
-                const key = subslot.type
-                    ? `${singular(slotName)} ${subslot.type}`
-                    : `${singular(slotName)} ${slotIndex + 1}`;
-                return _jsx(Member, { ...props, slot: subslot, slotName: key }, key);
-            });
+        // 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 _jsx(EntryList, { ...props, entries: slot });
         }
+        // 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 => {
-                                if (evt.target.value !== slot.type) {
-                                    schema.setSubschema(slotName, {
-                                        type: evt.target.value,
-                                    });
+        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, {}), children: _jsx(Typography, { children: [...path, slotName].join('➔') }) }), _jsxs(AccordionDetails, { className: classes.expansionPanelDetails, children: [entry && slot ? (_jsx(EntryControls, { schema: schema, title: slotName, slot: slot, entry: entry })) : null, typeNameChoices.length ? (_jsx(TypeSelector, { typeNameChoices: typeNameChoices, slotName: slotName, slot: slot, onChange: evt => {
+                                if (evt.target.value !== slot?.type) {
+                                    setConf(schema, slotName, { type: evt.target.value });
                                 }
-                            } })) : null, _jsx(FormGroup, { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName] }) })] })] }));
+                            } })) : null, slot ? (_jsx("div", { className: classes.noOverflow, children: _jsx(Schema, { schema: slot, path: [...path, slotName], filter: childFilter, expandedDisplayId: expandedDisplayId }) })) : null] })] }, 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 = [], }) {
+// An array of sub-schemas, one accordion per entry. A list whose entries are a
+// `ConfigurationSchemaUnion` also offers each entry's type and place, and a new
+// entry of any member type; a pluggable union such as a track's `displays` is
+// not one, since a display is added through the track.
+const EntryList = observer(function EntryList(props) {
+    const { classes } = useStyles();
+    const { slotName, slotSchema, schema, entries } = props;
+    const singular = singularSlotName(slotName);
+    const union = arraySlotUnion(slotSchema);
+    const choices = union ? Object.keys(union.members) : [];
+    return (_jsxs(_Fragment, { children: [entries.map((subslot, index) => {
+                const title = `${singular} ${index + 1}`;
+                return (_jsx(Member
+                // eslint-disable-next-line @eslint-react/no-array-index-key -- a config entry has no identity but its place
+                , { ...props, slot: subslot, slotName: union || !subslot.type ? title : `${title} ${subslot.type}`, entry: union
+                        ? { listName: slotName, choices, index, count: entries.length }
+                        : undefined }, index));
+            }), union ? (_jsx(TextField, { className: classes.filter, select: true, size: "small", label: `Add ${singular}`, value: "", onChange: evt => {
+                    setConf(schema, slotName, [
+                        ...listSnapshot(schema, slotName),
+                        { type: evt.target.value },
+                    ]);
+                }, fullWidth: true, children: choices.map(type => (_jsx(MenuItem, { value: type, children: type }, type))) })) : null] }));
+});
+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, {}), 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/EntryListEditor.d.ts

@@ -0,0 +1,17 @@
+interface ListSlot {
+    name: string;
+    value: string[];
+    description: string;
+    set: (arg: string[]) => void;
+}
+/** #slotEditor a text field and color picker per entry, with add and delete */
+declare const ColorArrayEditor: ({ slot, }: {
+    slot: ListSlot;
+}) => import("react").JSX.Element;
+/** #slotEditor a dropdown of the `model`'s members per entry, with add and delete */
+declare const StringEnumArrayEditor: ({ slot, }: {
+    slot: ListSlot & {
+        choices?: string[];
+    };
+}) => import("react").JSX.Element;
+export { ColorArrayEditor, StringEnumArrayEditor };

package/esm/ConfigurationEditorWidget/components/EntryListEditor.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { FormHelperText, IconButton, InputLabel, List, ListItem, MenuItem, } from '@mui/material';
+import { observer } from 'mobx-react';
+import ColorEditor from './ColorEditor.js';
+import ConfigurationTextField from './ConfigurationTextField.js';
+// A list slot whose entries each take one control: the list is written whole
+// on every change, and "add" appends an entry the slot already admits, so no
+// write can hold an entry the slot refuses.
+const EntryList = observer(function EntryList({ slot, entry, added, }) {
+    const value = [...slot.value];
+    const addition = added(value);
+    return (_jsxs(_Fragment, { children: [slot.name ? _jsx(InputLabel, { children: slot.name }) : null, _jsxs(List, { disablePadding: true, children: [value.map((v, idx) => (_jsxs(ListItem, { disableGutters: true, children: [entry(v, next => {
+                                slot.set(value.map((old, i) => (i === idx ? next : old)));
+                            }), _jsx(IconButton, { "aria-label": "delete entry", onClick: () => {
+                                    slot.set(value.filter((_, i) => i !== idx));
+                                }, children: _jsx(DeleteIcon, {}) })] }, idx))), _jsx(ListItem, { disableGutters: true, children: _jsx(IconButton, { "data-testid": `entryAdd-${slot.name}`, "aria-label": "add entry", disabled: addition === undefined, onClick: () => {
+                                if (addition !== undefined) {
+                                    slot.set([...value, addition]);
+                                }
+                            }, children: _jsx(AddIcon, {}) }) })] }), _jsx(FormHelperText, { children: slot.description })] }));
+});
+/** #slotEditor a text field and color picker per entry, with add and delete */
+const ColorArrayEditor = observer(function ColorArrayEditor({ slot, }) {
+    return (_jsx(EntryList, { slot: slot, added: value => value.at(-1) ?? 'black', entry: (color, set) => (_jsx(ColorEditor, { slot: { name: '', description: '', value: color, set } })) }));
+});
+/** #slotEditor a dropdown of the `model`'s members per entry, with add and delete */
+const StringEnumArrayEditor = observer(function StringEnumArrayEditor({ slot, }) {
+    const choices = slot.choices ?? [];
+    return (_jsx(EntryList, { slot: slot, added: () => choices[0], entry: (member, set) => (_jsx(ConfigurationTextField, { select: true, value: member, onChange: evt => {
+                set(evt.target.value);
+            }, children: choices.map(choice => (_jsx(MenuItem, { value: choice, children: choice }, choice))) })) }));
+});
+export { ColorArrayEditor, StringEnumArrayEditor };

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;