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

package/esm/ConfigurationEditorWidget/components/MapEntryCard.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Card, CardContent, CardHeader, IconButton } from '@mui/material';
+import AddNewField from './AddNewField.js';
+const useStyles = makeStyles()(theme => ({
+    card: {
+        marginTop: theme.spacing(1),
+    },
+}));
+// shared card for a single key in a map slot editor: a titled card with a
+// delete button wrapping the per-value editor passed as children
+export default function MapEntryCard({ title, onDelete, children, }) {
+    const { classes } = useStyles();
+    return (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: title, action: _jsx(IconButton, { onClick: () => {
+                        onDelete();
+                    }, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: children })] }));
+}
+// trailing card in a map slot editor holding the "add new key" field
+export function MapAddCard({ onAdd }) {
+    const { classes } = useStyles();
+    return (_jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(AddNewField, { onAdd: onAdd }) }) }));
+}

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

@@ -0,0 +1,8 @@
+export default function MapSlotEditor<V>({ name, description, entries, emptyValue, setMap, renderValue, }: {
+    name: string;
+    description: string;
+    entries: [string, V][];
+    emptyValue: V;
+    setMap: (val: Record<string, V>) => void;
+    renderValue: (val: V, set: (val: V) => void, key: string) => React.ReactNode;
+}): import("react").JSX.Element;

package/esm/ConfigurationEditorWidget/components/MapSlotEditor.js

@@ -0,0 +1,18 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormHelperText, InputLabel } from '@mui/material';
+import MapEntryCard, { MapAddCard } from './MapEntryCard.js';
+// shared shell for map slot editors (numberMap, stringArrayMap): a labelled
+// list of per-key cards plus an "add key" card. The owning wrapper stays the
+// observer and passes plain entries in, so this stays a non-observer generic
+// (which keeps JSX type args working at the call sites).
+export default function MapSlotEditor({ name, description, entries, emptyValue, setMap, renderValue, }) {
+    const obj = Object.fromEntries(entries);
+    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: name }), entries.map(([key, val]) => (_jsx(MapEntryCard, { title: key, onDelete: () => {
+                    const { [key]: _omit, ...rest } = obj;
+                    setMap(rest);
+                }, children: renderValue(val, newVal => {
+                    setMap({ ...obj, [key]: newVal });
+                }, key) }, key))), _jsx(MapAddCard, { onAdd: key => {
+                    setMap({ ...obj, [key]: emptyValue });
+                } }), _jsx(FormHelperText, { children: description })] }));
+}

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

@@ -1,10 +1,12 @@
-declare const NumberEditor: ({ slot, }: {
+/** #slotEditor numeric text field */
+declare const NumberEditor: ({ slot, integer, }: {
     slot: {
         name?: string;
-        value: string;
+        value: number | undefined;
         description?: string;
+        promotedBase?: unknown;
         set: (val: number) => void;
-        reset?: () => void;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+    integer?: boolean;
+}) => import("react").JSX.Element;
 export default NumberEditor;

package/esm/ConfigurationEditorWidget/components/NumberEditor.js

@@ -1,20 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { observer } from 'mobx-react';
-import ConfigurationTextField from "./ConfigurationTextField.js";
-const NumberEditor = observer(function NumberEditor({ slot, }) {
-    const [val, setVal] = useState(slot.value);
-    useEffect(() => {
-        const num = Number.parseFloat(val);
-        if (Number.isNaN(num)) {
-            slot.reset?.();
-        }
-        else {
-            slot.set(num);
-        }
-    }, [slot, val]);
-    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
-            setVal(evt.target.value);
+import ConfigurationTextField from './ConfigurationTextField.js';
+/** #slotEditor numeric text field */
+const NumberEditor = observer(function NumberEditor({ slot, integer = false, }) {
+    const [val, setVal] = useState(slot.value === undefined ? '' : String(slot.value));
+    // An unset `maybeNumber` is a promotable slot's inherit sentinel, and an
+    // empty box is the honest rendering of it — a number field, unlike a
+    // checkbox, has a state for "nothing". What it did not say is what the track
+    // is therefore drawing at, so `featureHeight` read as a blank with no clue
+    // that reads are 7px tall. The placeholder is that, in the affordance meant
+    // for it; the label has to float for MUI to draw one over a labelled field.
+    const placeholder = slot.value === undefined && slot.promotedBase !== undefined
+        ? String(slot.promotedBase)
+        : undefined;
+    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, placeholder: placeholder, slotProps: placeholder ? { inputLabel: { shrink: true } } : undefined, value: val, onChange: evt => {
+            const v = evt.target.value;
+            setVal(v);
+            const num = Number(v);
+            // commit only valid values; the text buffer preserves in-progress
+            // entries like "-" or "1." without writing garbage to the config
+            const valid = integer ? Number.isInteger(num) : Number.isFinite(num);
+            if (v !== '' && valid) {
+                slot.set(num);
+            }
         } }));
 });
 export default NumberEditor;

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

@@ -1,10 +1,10 @@
+/** #slotEditor one card per key, each holding that key's numeric field */
 declare const NumberMapEditor: ({ slot, }: {
     slot: {
         name: string;
-        value: Map<string, string>;
-        remove: (key: string) => void;
-        add: (key: string, val: number) => void;
+        value: Map<string, number>;
+        set: (val: Record<string, number>) => void;
         description: string;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default NumberMapEditor;

package/esm/ConfigurationEditorWidget/components/NumberMapEditor.js

@@ -1,35 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { Card, CardContent, CardHeader, FormHelperText, IconButton, InputAdornment, InputLabel, TextField, } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import NumberEditor from "./NumberEditor.js";
-const useStyles = makeStyles()(theme => ({
-    card: {
-        marginTop: theme.spacing(1),
-    },
-}));
+import MapSlotEditor from './MapSlotEditor.js';
+import NumberEditor from './NumberEditor.js';
+/** #slotEditor one card per key, each holding that key's numeric field */
 const NumberMapEditor = observer(function NumberMapEditor({ slot, }) {
-    const { classes } = useStyles();
-    const [value, setValue] = useState('');
-    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: slot.name }), [...slot.value].map(([key, val]) => (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: key, action: _jsx(IconButton, { onClick: () => {
-                                slot.remove(key);
-                            }, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: _jsx(NumberEditor, { slot: {
-                                value: val,
-                                set: (val) => {
-                                    slot.add(key, val);
-                                },
-                            } }) })] }, key))), _jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
-                            setValue(event.target.value);
-                        }, slotProps: {
-                            input: {
-                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: value === '', onClick: () => {
-                                            slot.add(value, 0);
-                                            setValue('');
-                                        }, children: _jsx(AddIcon, {}) }) })),
-                            },
-                        } }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
+    return (_jsx(MapSlotEditor, { name: slot.name, description: slot.description, entries: [...slot.value], emptyValue: 0, setMap: val => {
+            slot.set(val);
+        }, renderValue: (val, set) => _jsx(NumberEditor, { slot: { value: val, set } }) }));
 });
 export default NumberMapEditor;

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

@@ -1,6 +1,5 @@
-import type { IAnyType } from '@jbrowse/mobx-state-tree';
-declare const SlotEditor: ({ slot, slotSchema, }: {
-    slot: any;
-    slotSchema: IAnyType;
-}) => import("react/jsx-runtime").JSX.Element;
+import type { SlotFacade } from '@jbrowse/core/configuration';
+declare const SlotEditor: ({ slot, }: {
+    slot: SlotFacade;
+}) => import("react").JSX.Element;
 export default SlotEditor;

package/esm/ConfigurationEditorWidget/components/SlotEditor.js

@@ -1,57 +1,65 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
+import { isCallbackValue, toCallbackValue, toFixedValue, } from '@jbrowse/core/configuration';
 import { FileSelector } from '@jbrowse/core/ui';
-import { getEnv } from '@jbrowse/core/util';
-import { getSubType, getUnionSubTypes } from '@jbrowse/core/util/mst-reflection';
-import { getPropertyMembers } from '@jbrowse/mobx-state-tree';
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-import { IconButton, MenuItem, Paper, SvgIcon, TextField } from '@mui/material';
+import CodeIcon from '@mui/icons-material/Code';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import { IconButton, MenuItem, Paper, TextField, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import BooleanEditor from "./BooleanEditor.js";
-import CallbackEditor from "./CallbackEditor.js";
-import ColorEditor from "./ColorEditor.js";
-import ConfigurationTextField from "./ConfigurationTextField.js";
-import JsonEditor from "./JsonEditor.js";
-import NumberEditor from "./NumberEditor.js";
-import NumberMapEditor from "./NumberMapEditor.js";
-import StringArrayEditor from "./StringArrayEditor.js";
-import StringArrayMapEditor from "./StringArrayMapEditor.js";
-import { useSlotEditorStyles } from "./useSlotEditorStyles.js";
+import BooleanEditor from './BooleanEditor.js';
+import CallbackEditor from './CallbackEditor.js';
+import ColorEditor from './ColorEditor.js';
+import ConfigurationTextField from './ConfigurationTextField.js';
+import IntegerEditor from './IntegerEditor.js';
+import JsonEditor from './JsonEditor.js';
+import NumberEditor from './NumberEditor.js';
+import NumberMapEditor from './NumberMapEditor.js';
+import StringArrayEditor from './StringArrayEditor.js';
+import StringArrayMapEditor from './StringArrayMapEditor.js';
+import { useSlotEditorStyles } from './useSlotEditorStyles.js';
+/** #slotEditor single-line text field */
 const StringEditor = observer(function StringEditor({ slot, }) {
     return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: slot.value, onChange: evt => {
             slot.set(evt.target.value);
         } }));
 });
+/** #slotEditor multi-line textarea */
 const TextEditor = observer(function TextEditor({ slot, }) {
     return (_jsx(TextField, { label: slot.name, helperText: slot.description, multiline: true, value: slot.value, onChange: evt => {
             slot.set(evt.target.value);
         } }));
 });
-const SvgCheckbox = () => (_jsx(SvgIcon, { children: _jsx("path", { d: "M20.41,3C21.8,5.71 22.35,8.84 22,12C21.8,15.16 20.7,18.29 18.83,21L17.3,20C18.91,17.57 19.85,14.8 20,12C20.34,9.2 19.89,6.43 18.7,4L20.41,3M5.17,3L6.7,4C5.09,6.43 4.15,9.2 4,12C3.66,14.8 4.12,17.57 5.3,20L3.61,21C2.21,18.29 1.65,15.17 2,12C2.2,8.84 3.3,5.71 5.17,3M12.08,10.68L14.4,7.45H16.93L13.15,12.45L15.35,17.37H13.09L11.71,14L9.28,17.33H6.76L10.66,12.21L8.53,7.45H10.8L12.08,10.68Z" }) }));
-const IntegerEditor = observer(function IntegerEditor({ slot, }) {
-    const [val, setVal] = useState(slot.value);
-    useEffect(() => {
-        const num = Number.parseInt(val, 10);
-        if (!Number.isNaN(num)) {
-            slot.set(num);
-        }
-    }, [slot, val]);
-    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, value: val, type: "number", onChange: evt => {
-            setVal(evt.target.value);
-        } }));
-});
-const StringEnumEditor = observer(function StringEnumEditor({ slot, slotSchema, }) {
-    const p = getPropertyMembers(getSubType(slotSchema));
-    const choices = getUnionSubTypes(getUnionSubTypes(getSubType(p.properties.value))[1]).map(t => t.value);
-    return (_jsx(ConfigurationTextField, { value: slot.value, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
-            slot.set(evt.target.value);
-        }, children: choices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }));
+// Sentinel for "leave the slot unset" in the maybe-enum dropdown. MUI needs a
+// concrete option value, and '' can't collide with an enum member (an empty
+// enumeration member would be unnameable in a menu anyway).
+const UNSET_CHOICE = '';
+/** #slotEditor dropdown of the `model`'s members */
+const StringEnumEditor = observer(function StringEnumEditor({ slot, }) {
+    const nullable = slot.type === 'maybeStringEnum';
+    // Naming the member unset resolves to, rather than a bare "default": every
+    // other choice in the list is a value the user can read off the plot, and
+    // this one was the only one that said nothing about what picking it draws.
+    // `promotedBase` is the honest half to show — the editor's target is often a
+    // detached config node, so it cannot see a value promoted this session.
+    const unsetLabel = typeof slot.promotedBase === 'string'
+        ? `default (${slot.promotedBase})`
+        : 'default';
+    return (_jsxs(ConfigurationTextField, { value: slot.value ?? UNSET_CHOICE, label: slot.name, select: true, helperText: slot.description, onChange: evt => {
+            const { value } = evt.target;
+            slot.set(value === UNSET_CHOICE ? undefined : value);
+        }, children: [nullable ? (_jsx(MenuItem, { value: UNSET_CHOICE, children: _jsx("em", { children: unsetLabel }) })) : null, (slot.choices ?? []).map(str => (_jsx(MenuItem, { value: str, children: str }, str)))] }));
 });
+/** #slotEditor URL, local file path (desktop) or file blob (browser) */
 const FileSelectorWrapper = observer(function FileSelectorWrapper({ slot, }) {
     return (_jsx(FileSelector, { location: slot.value, setLocation: location => {
             slot.set(location);
-        }, name: slot.name, description: slot.description, rootModel: getEnv(slot).pluginManager.rootModel }));
+        }, name: slot.name, description: slot.description, rootModel: slot.pluginManager.rootModel }));
 });
+// dynamic dispatch from a runtime slot `type` string to a typed editor. The
+// `any` is irreducible here: each editor declares a narrow `slot.value` type
+// (number, boolean, FileLocation, string[], ...) but makeSlotFacade can only
+// type value as `unknown`, so no single registry prop type satisfies them all.
+// The editors stay fully typed internally; only this lookup is untyped.
 const valueComponents = {
     string: StringEditor,
     text: TextEditor,
@@ -60,27 +68,54 @@ const valueComponents = {
     stringArrayMap: StringArrayMapEditor,
     numberMap: NumberMapEditor,
     number: NumberEditor,
+    maybeNumber: NumberEditor,
     integer: IntegerEditor,
     color: ColorEditor,
+    maybeColor: ColorEditor,
     stringEnum: StringEnumEditor,
+    maybeStringEnum: StringEnumEditor,
     boolean: BooleanEditor,
+    maybeBoolean: BooleanEditor,
     frozen: JsonEditor,
-    configRelationships: JsonEditor,
+    maybeFrozen: JsonEditor,
 };
-const SlotEditor = observer(function SlotEditor({ slot, slotSchema, }) {
+const SlotEditor = observer(function SlotEditor({ slot, }) {
     const { classes } = useSlotEditorStyles();
     const { type } = slot;
-    let ValueComponent = slot.isCallback
-        ? CallbackEditor
-        :
-            valueComponents[type];
-    if (!ValueComponent) {
+    // editor mode is UI-only state, derived once from whether the stored value is
+    // a jexl callback. Toggling rewrites the value; typing a "jexl:" prefix into a
+    // value field does not auto-swap the editor, since this state only changes on
+    // the explicit toggle.
+    const [callbackMode, setCallbackMode] = useState(() => isCallbackValue(slot.value));
+    // bumped on reset to remount the value editor: the buffered editors (number,
+    // json, callback) seed internal state from slot.value only on mount, so an
+    // external set wouldn't otherwise show in the field
+    const [resetNonce, setResetNonce] = useState(0);
+    const TypedComponent = valueComponents[type];
+    if (!callbackMode && !TypedComponent) {
         console.warn(`no slot editor defined for ${type}, editing as string`);
-        ValueComponent = StringEditor;
-    }
-    if (!(type in valueComponents)) {
-        console.warn(`SlotEditor needs to implement ${type}`);
     }
-    return (_jsxs(Paper, { className: classes.paper, children: [_jsx("div", { className: classes.paperContent, children: _jsx(ValueComponent, { slot: slot, slotSchema: slotSchema }) }), _jsx("div", { className: classes.slotModeSwitch, children: slot.contextVariable.length ? (_jsx(IconButton, { onClick: () => slot.isCallback ? slot.convertToValue() : slot.convertToCallback(), title: `convert to ${slot.isCallback ? 'regular value' : 'callback'}`, children: slot.isCallback ? _jsx(SvgCheckbox, {}) : _jsx(RadioButtonUncheckedIcon, {}) })) : null })] }));
+    const ValueComponent = callbackMode
+        ? CallbackEditor
+        : (TypedComponent ?? StringEditor);
+    // a promotable slot's default is its inherit sentinel, so resetting it here
+    // doubles as "un-pin / follow the session-wide default"
+    const { modified } = slot;
+    return (_jsxs(Paper, { className: classes.paper, children: [_jsx("div", { className: classes.paperContent, children: _jsx(ValueComponent, { slot: slot }, resetNonce) }), modified ? (_jsx("div", { className: classes.resetButton, children: _jsx(Tooltip, { title: "Reset to default", children: _jsx(IconButton, { "aria-label": "reset to default", onClick: () => {
+                            slot.set(slot.defaultValue);
+                            setCallbackMode(isCallbackValue(slot.defaultValue));
+                            setResetNonce(nonce => nonce + 1);
+                        }, children: _jsx(RestartAltIcon, {}) }) }) })) : null, slot.contextVariable.length ? (_jsx("div", { className: classes.slotModeSwitch, children: _jsx(Tooltip, { title: callbackMode
+                        ? 'Editing as a callback (Jexl expression). Click to use a fixed value.'
+                        : 'Editing as a fixed value. Click to use a callback (Jexl expression).', children: _jsx(IconButton, { color: callbackMode ? 'primary' : 'default', onClick: () => {
+                            if (callbackMode) {
+                                slot.set(toFixedValue(slot.value, type, slot.defaultValue, slot.pluginManager.jexl));
+                                setCallbackMode(false);
+                            }
+                            else {
+                                slot.set(toCallbackValue(slot.value));
+                                setCallbackMode(true);
+                            }
+                        }, children: _jsx(CodeIcon, {}) }) }) })) : null] }));
 });
 export default SlotEditor;

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

@@ -1,11 +1,10 @@
+/** #slotEditor "todolist" of text fields, one per entry, with add and delete */
 declare const StringArrayEditor: ({ slot, }: {
     slot: {
         name: string;
         value: string[];
-        setAtIndex: (arg: number, arg2: string) => void;
-        removeAtIndex: (arg: number) => void;
-        add: (arg: string) => void;
+        set: (arg: string[]) => void;
         description: string;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default StringArrayEditor;

package/esm/ConfigurationEditorWidget/components/StringArrayEditor.js

@@ -1,34 +1,21 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Button, FormHelperText, IconButton, InputAdornment, InputLabel, List, ListItem, TextField, } from '@mui/material';
+import { FormHelperText, IconButton, InputAdornment, InputLabel, List, ListItem, TextField, } from '@mui/material';
 import { observer } from 'mobx-react';
+import AddNewField from './AddNewField.js';
+/** #slotEditor "todolist" of text fields, one per entry, with add and delete */
 const StringArrayEditor = observer(function StringArrayEditor({ slot, }) {
-    const [value, setValue] = useState('');
-    const [addNew, setAddNew] = useState(false);
-    return (_jsxs(_Fragment, { children: [slot.name ? _jsx(InputLabel, { children: slot.name }) : null, _jsxs(List, { disablePadding: true, children: [slot.value.map((val, idx) => (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: val, onChange: evt => {
-                                slot.setAtIndex(idx, evt.target.value);
+    const value = [...slot.value];
+    return (_jsxs(_Fragment, { children: [slot.name ? _jsx(InputLabel, { children: slot.name }) : null, _jsxs(List, { disablePadding: true, children: [value.map((val, idx) => (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { fullWidth: true, value: val, onChange: evt => {
+                                slot.set(value.map((v, i) => (i === idx ? evt.target.value : v)));
                             }, slotProps: {
                                 input: {
                                     endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { onClick: () => {
-                                                slot.removeAtIndex(idx);
+                                                slot.set(value.filter((_, i) => i !== idx));
                                             }, children: _jsx(DeleteIcon, {}) }) })),
                                 },
-                            } }) }, `${JSON.stringify(val)}-${idx}`))), addNew ? (_jsx(ListItem, { disableGutters: true, children: _jsx(TextField, { value: value, placeholder: "add new", onChange: event => {
-                                setValue(event.target.value);
-                            }, slotProps: {
-                                input: {
-                                    endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsxs(_Fragment, { children: [_jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, "data-testid": `stringArrayAdd-${slot.name}`, onClick: () => {
-                                                        setAddNew(false);
-                                                        slot.add(value);
-                                                        setValue('');
-                                                    }, children: "OK" }), _jsx(Button, { color: "primary", variant: "contained", style: { margin: 2 }, onClick: () => {
-                                                        setAddNew(false);
-                                                        setValue('');
-                                                    }, children: "Cancel" })] }) })),
-                                },
-                            } }) })) : null, _jsx(Button, { color: "primary", variant: "contained", style: { margin: 4 }, disabled: addNew, onClick: () => {
-                            setAddNew(true);
-                        }, children: "Add item" })] }), _jsx(FormHelperText, { children: slot.description })] }));
+                            } }) }, idx))), _jsx(ListItem, { disableGutters: true, children: _jsx(AddNewField, { testid: `stringArrayAdd-${slot.name}`, onAdd: val => {
+                                slot.set([...value, val]);
+                            } }) })] }), _jsx(FormHelperText, { children: slot.description })] }));
 });
 export default StringArrayEditor;

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

@@ -1,13 +1,10 @@
+/** #slotEditor one card per key, each holding that key's "todolist" of strings */
 declare const StringArrayMapEditor: ({ slot, }: {
     slot: {
         name: string;
         value: Map<string, string[]>;
-        remove: (key: string) => void;
-        add: (key: string, val: string[]) => void;
+        set: (val: Record<string, string[]>) => void;
         description: string;
-        setAtKeyIndex: (key: string, idx: number, val: string) => void;
-        removeAtKeyIndex: (key: string, idx: number) => void;
-        addToKey: (key: string, val: string) => void;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default StringArrayMapEditor;

package/esm/ConfigurationEditorWidget/components/StringArrayMapEditor.js

@@ -1,43 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { Card, CardContent, CardHeader, FormHelperText, IconButton, InputAdornment, InputLabel, TextField, } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import StringArrayEditor from "./StringArrayEditor.js";
-const useStyles = makeStyles()(theme => ({
-    card: {
-        marginTop: theme.spacing(1),
-    },
-}));
+import MapSlotEditor from './MapSlotEditor.js';
+import StringArrayEditor from './StringArrayEditor.js';
+/** #slotEditor one card per key, each holding that key's "todolist" of strings */
 const StringArrayMapEditor = observer(function StringArrayMapEditor({ slot, }) {
-    const { classes } = useStyles();
-    const [value, setValue] = useState('');
-    return (_jsxs(_Fragment, { children: [_jsx(InputLabel, { children: slot.name }), [...slot.value].map(([key, val]) => (_jsxs(Card, { raised: true, className: classes.card, children: [_jsx(CardHeader, { title: key, action: _jsx(IconButton, { onClick: () => {
-                                slot.remove(key);
-                            }, children: _jsx(DeleteIcon, {}) }) }), _jsx(CardContent, { children: _jsx(StringArrayEditor, { slot: {
-                                name: slot.name,
-                                value: val,
-                                description: `Values associated with entry ${key}`,
-                                setAtIndex: (idx, val) => {
-                                    slot.setAtKeyIndex(key, idx, val);
-                                },
-                                removeAtIndex: (idx) => {
-                                    slot.removeAtKeyIndex(key, idx);
-                                },
-                                add: (val) => {
-                                    slot.addToKey(key, val);
-                                },
-                            } }) })] }, key))), _jsx(Card, { raised: true, className: classes.card, children: _jsx(CardHeader, { disableTypography: true, title: _jsx(TextField, { fullWidth: true, value: value, placeholder: "add new", onChange: event => {
-                            setValue(event.target.value);
-                        }, slotProps: {
-                            input: {
-                                endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { disabled: value === '', onClick: () => {
-                                            slot.add(value, []);
-                                            setValue('');
-                                        }, children: _jsx(AddIcon, {}) }) })),
-                            },
-                        } }) }) }), _jsx(FormHelperText, { children: slot.description })] }));
+    return (_jsx(MapSlotEditor, { name: slot.name, description: slot.description, 
+        // deep copy so per-entry edits never reuse the live MST array nodes
+        entries: [...slot.value].map(([k, v]) => [k, [...v]]), emptyValue: [], setMap: val => {
+            slot.set(val);
+        }, renderValue: (val, set, key) => (_jsx(StringArrayEditor, { slot: {
+                name: '',
+                value: val,
+                description: `Values associated with entry ${key}`,
+                set,
+            } })) }));
 });
 export default StringArrayMapEditor;

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

@@ -4,5 +4,5 @@ declare const TypeSelector: ({ typeNameChoices, slot, slotName, onChange, }: {
     slot: AnyConfigurationModel;
     slotName: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TypeSelector;

package/esm/ConfigurationEditorWidget/components/TypeSelector.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MenuItem, Paper, TextField } from '@mui/material';
 import { observer } from 'mobx-react';
-import { useSlotEditorStyles } from "./useSlotEditorStyles.js";
+import { useSlotEditorStyles } from './useSlotEditorStyles.js';
 const TypeSelector = observer(function TypeSelector({ typeNameChoices, slot, slotName, onChange, }) {
     const { classes } = useSlotEditorStyles();
-    return (_jsx(Paper, { className: classes.paper, children: _jsx("div", { className: classes.paperContent, children: _jsx(TextField, { value: slot.type, label: "Type", select: true, helperText: `Type of ${slotName} to use`, fullWidth: true, onChange: onChange, children: typeNameChoices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }) }) }));
+    return (_jsx(Paper, { className: classes.paper, children: _jsx("div", { className: classes.paperContent, children: _jsx(TextField, { value: slot.type, label: "Type", select: true, variant: "outlined", helperText: `Type of ${slotName} to use`, fullWidth: true, onChange: onChange, children: typeNameChoices.map(str => (_jsx(MenuItem, { value: str, children: str }, str))) }) }) }));
 });
 export default TypeSelector;

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

@@ -0,0 +1,13 @@
+/**
+ * Singularize a config schema slot name for the per-entry label an array-typed
+ * sub-schema renders ("displays" -> "display LinearBasicDisplay").
+ *
+ * Slot names are developer-authored camelCase identifiers — `displays`,
+ * `tracks`, `connections` are the ones in tree — so the regular English endings
+ * are the whole domain. This replaced the `pluralize` dependency, whose value
+ * is its irregular-noun table, and nothing here is ever an irregular noun.
+ *
+ * The counterpart for label text, where the noun comes from a display rather
+ * than a schema key, is core's own `pluralize(count, noun)` in `stringUtils`.
+ */
+export declare function singularSlotName(name: string): string;

package/esm/ConfigurationEditorWidget/components/singularSlotName.js

@@ -0,0 +1,23 @@
+/**
+ * Singularize a config schema slot name for the per-entry label an array-typed
+ * sub-schema renders ("displays" -> "display LinearBasicDisplay").
+ *
+ * Slot names are developer-authored camelCase identifiers — `displays`,
+ * `tracks`, `connections` are the ones in tree — so the regular English endings
+ * are the whole domain. This replaced the `pluralize` dependency, whose value
+ * is its irregular-noun table, and nothing here is ever an irregular noun.
+ *
+ * The counterpart for label text, where the noun comes from a display rather
+ * than a schema key, is core's own `pluralize(count, noun)` in `stringUtils`.
+ */
+export function singularSlotName(name) {
+    return /[^aeiou]ies$/.test(name)
+        ? `${name.slice(0, -3)}y`
+        : /(?:s|sh|ch|x|z)es$/.test(name)
+            ? name.slice(0, -2)
+            : // a trailing `s` after `a`/`i`/`u`/`s` belongs to a word that is already
+                // singular — `bias`, `alias`, `axis`, `status`, `class` — not to a plural
+                /[^saiu]s$/.test(name)
+                    ? name.slice(0, -1)
+                    : name;
+}

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

@@ -3,8 +3,8 @@ export declare const useSlotEditorStyles: (_params?: unknown, muiStyleOverridesP
         classes?: Record<string, string>;
     };
 } | undefined) => {
-    classes: Record<"paper" | "paperContent" | "slotModeSwitch", string>;
-    theme: import("@mui/material").Theme;
+    classes: Record<"paper" | "paperContent" | "resetButton" | "slotModeSwitch", string>;
+    theme: import("@jbrowse/core/ui/styleTheme").JBrowseStyleTheme;
     css: import("@jbrowse/core/util/tss-react/types").Css;
     cx: import("@jbrowse/core/util/tss-react/types").Cx;
 };

package/esm/ConfigurationEditorWidget/components/useSlotEditorStyles.js

@@ -6,7 +6,8 @@ export const useSlotEditorStyles = makeStyles()(theme => ({
         position: 'relative',
     },
     paperContent: {
-        width: '100%',
+        flex: 1,
+        minWidth: 0,
     },
     slotModeSwitch: {
         width: 24,
@@ -15,4 +16,8 @@ export const useSlotEditorStyles = makeStyles()(theme => ({
         justifyContent: 'center',
         alignItems: 'center',
     },
+    resetButton: {
+        display: 'flex',
+        alignItems: 'center',
+    },
 }));

package/esm/ConfigurationEditorWidget/index.js

@@ -1,10 +1,10 @@
 import { lazy } from 'react';
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
-import HeadingComponent from "./components/HeadingComponent.js";
-import stateModelFactory from "./model.js";
+import HeadingComponent from './components/HeadingComponent.js';
+import stateModelFactory from './model.js';
 const configSchema = ConfigurationSchema('ConfigurationEditorWidget', {});
-const LazyConfigurationEditorComponent = lazy(() => import("./components/ConfigurationEditor.js"));
+const LazyConfigurationEditorComponent = lazy(() => import('./components/ConfigurationEditor.js'));
 export default function registerConfigurationEditorWidget(pluginManager) {
     pluginManager.addWidgetType(() => {
         return new WidgetType({