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

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,3 +1,4 @@
+/** #slotEditor monospace textarea holding arbitrary JSON */
 declare const JsonEditor: ({ slot, }: {
     slot: {
         name: string;
@@ -5,5 +6,5 @@ declare const JsonEditor: ({ slot, }: {
         value: 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,36 @@
-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 { alpha } from '@jbrowse/core/ui/palette';
 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,
-        marginTop: '16px',
-        border: '1px solid rgba(0,0,0,0.42)',
-    },
-    callbackContainer: {
         width: '100%',
-        overflowX: 'auto',
-    },
-    textAreaFont: {
-        fontFamily,
+        marginTop: '16px',
+        border: `1px solid ${alpha(theme.palette.text.primary, 0.42)}`,
     },
 }));
+/** #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, and `JSON.stringify(undefined)`
+    // returns the *value* `undefined` rather than a string — which handed
+    // MonospaceTextField an undefined `value` and made the field uncontrolled
+    // until the first keystroke (React then warns on the switch).
+    const [contents, setContents] = useState(() => slot.value === undefined ? '' : JSON.stringify(slot.value, 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;

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,11 @@
-declare const NumberEditor: ({ slot, }: {
+/** #slotEditor numeric text field */
+declare const NumberEditor: ({ slot, integer, }: {
     slot: {
         name?: string;
-        value: string;
+        value: number | undefined;
         description?: string;
         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,20 @@
 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));
+    return (_jsx(ConfigurationTextField, { label: slot.name, helperText: slot.description, 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,86 +1,125 @@
 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 { ColorArrayEditor, StringEnumArrayEditor } from './EntryListEditor.js';
+import IntegerEditor from './IntegerEditor.js';
+import JsonEditor from './JsonEditor.js';
+import NumberEditor from './NumberEditor.js';
+import NumberMapEditor from './NumberMapEditor.js';
+import StringArrayEditor, { ExpressionArrayEditor, } from './StringArrayEditor.js';
+import StringArrayMapEditor from './StringArrayMapEditor.js';
+import StringMapEditor from './StringMapEditor.js';
+import { useSlotEditorStyles } from './useSlotEditorStyles.js';
+// Also drives `maybeString`, whose value is `undefined` while unset: clearing
+// the field leaves the empty string, which is a value, and the reset button
+// returns the slot to unset.
+/** #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 => {
+    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';
+    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: "default" }) })) : 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,
+    maybeString: StringEditor,
+    featureField: StringEditor,
     text: TextEditor,
     fileLocation: FileSelectorWrapper,
+    maybeFileLocation: FileSelectorWrapper,
     stringArray: StringArrayEditor,
+    expressionArray: ExpressionArrayEditor,
+    colorArray: ColorArrayEditor,
+    stringEnumArray: StringEnumArrayEditor,
     stringArrayMap: StringArrayMapEditor,
     numberMap: NumberMapEditor,
+    stringMap: StringMapEditor,
     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. A featureField's `jexl:` expression is a field, typed
+    // in its own text field.
+    const callback = slot.contextVariable.length > 0;
+    const [callbackMode, setCallbackMode] = useState(() => callback && 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);
+    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(callback && isCallbackValue(slot.defaultValue));
+                            setResetNonce(nonce => nonce + 1);
+                        }, children: _jsx(RestartAltIcon, {}) }) }) })) : null, callback ? (_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,17 @@
-declare const StringArrayEditor: ({ slot, }: {
-    slot: {
-        name: string;
-        value: string[];
-        setAtIndex: (arg: number, arg2: string) => void;
-        removeAtIndex: (arg: number) => void;
-        add: (arg: string) => void;
-        description: string;
-    };
-}) => import("react/jsx-runtime").JSX.Element;
+interface ArraySlot {
+    name: string;
+    value: string[];
+    set: (arg: string[]) => void;
+    description: string;
+}
+/** #slotEditor "todolist" of text fields, one per entry, with add and delete */
+declare const StringArrayEditor: ({ slot, prefix, }: {
+    slot: ArraySlot;
+    prefix?: string;
+}) => import("react").JSX.Element;
+/** #slotEditor "todolist" of text fields, each after a fixed `jexl:` */
+declare const ExpressionArrayEditor: ({ slot, }: {
+    slot: ArraySlot;
+}) => import("react").JSX.Element;
+export { ExpressionArrayEditor };
 export default StringArrayEditor;

package/esm/ConfigurationEditorWidget/components/StringArrayEditor.js

@@ -1,34 +1,31 @@
-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 { JEXL_PREFIX } from '@jbrowse/core/util/jexlStrings';
 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';
-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);
+import AddNewField from './AddNewField.js';
+/** #slotEditor "todolist" of text fields, one per entry, with add and delete */
+const StringArrayEditor = observer(function StringArrayEditor({ slot, prefix = '', }) {
+    const value = [...slot.value];
+    const startAdornment = prefix ? (_jsx(InputAdornment, { position: "start", children: prefix })) : undefined;
+    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.slice(prefix.length), onChange: evt => {
+                                slot.set(value.map((v, i) => i === idx ? prefix + evt.target.value : v));
                             }, slotProps: {
                                 input: {
+                                    startAdornment,
                                     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}`, startAdornment: startAdornment, onAdd: val => {
+                                slot.set([...value, prefix + val]);
+                            } }) })] }), _jsx(FormHelperText, { children: slot.description })] }));
+});
+// `jexl:` sits fixed in front of each entry, so no keystroke writes one the
+// slot refuses
+/** #slotEditor "todolist" of text fields, each after a fixed `jexl:` */
+const ExpressionArrayEditor = observer(function ExpressionArrayEditor({ slot, }) {
+    return _jsx(StringArrayEditor, { slot: slot, prefix: JEXL_PREFIX });
 });
+export { ExpressionArrayEditor };
 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;