@jbrowse/core 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/ui/FileSelector/useInternetAccounts.d.ts

@@ -6,31 +6,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
             type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
             configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
                 readonly name: {
-                    readonly description: "descriptive name of the internet account";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly description: {
-                    readonly description: "a description of the internet account";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly authHeader: {
-                    readonly description: "request header for credentials";
-                    readonly type: "string";
-                    readonly defaultValue: "Authorization";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly tokenType: {
-                    readonly description: "a custom name for a token to include in the header";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly domains: {
-                    readonly description: "array of valid domains the url can contain to use this account";
-                    readonly type: "stringArray";
-                    readonly defaultValue: readonly [];
+                    type: "stringArray";
+                } & {
+                    defaultValue: unknown;
                 };
-            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+                type: {
+                    type: "string";
+                } & {
+                    defaultValue: string;
+                };
+                internetAccountId: {
+                    type: "string";
+                } & {
+                    defaultValue: string;
+                };
+            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
         }> & {
             readonly name: string;
             readonly description: string;
@@ -86,31 +96,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
             type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
             configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
                 readonly name: {
-                    readonly description: "descriptive name of the internet account";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly description: {
-                    readonly description: "a description of the internet account";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly authHeader: {
-                    readonly description: "request header for credentials";
-                    readonly type: "string";
-                    readonly defaultValue: "Authorization";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly tokenType: {
-                    readonly description: "a custom name for a token to include in the header";
-                    readonly type: "string";
-                    readonly defaultValue: "";
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
                 readonly domains: {
-                    readonly description: "array of valid domains the url can contain to use this account";
-                    readonly type: "stringArray";
-                    readonly defaultValue: readonly [];
+                    type: "stringArray";
+                } & {
+                    defaultValue: unknown;
+                };
+                type: {
+                    type: "string";
+                } & {
+                    defaultValue: string;
                 };
-            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+                internetAccountId: {
+                    type: "string";
+                } & {
+                    defaultValue: string;
+                };
+            }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
         }, {
             readonly name: string;
             readonly description: string;
@@ -168,31 +188,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
         type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
             readonly name: {
-                readonly description: "descriptive name of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly description: {
-                readonly description: "a description of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly authHeader: {
-                readonly description: "request header for credentials";
-                readonly type: "string";
-                readonly defaultValue: "Authorization";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly tokenType: {
-                readonly description: "a custom name for a token to include in the header";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly domains: {
-                readonly description: "array of valid domains the url can contain to use this account";
-                readonly type: "stringArray";
-                readonly defaultValue: readonly [];
+                type: "stringArray";
+            } & {
+                defaultValue: unknown;
+            };
+            type: {
+                type: "string";
+            } & {
+                defaultValue: string;
+            };
+            internetAccountId: {
+                type: "string";
+            } & {
+                defaultValue: string;
             };
-        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
     }> & {
         readonly name: string;
         readonly description: string;
@@ -248,31 +278,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
         type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
             readonly name: {
-                readonly description: "descriptive name of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly description: {
-                readonly description: "a description of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly authHeader: {
-                readonly description: "request header for credentials";
-                readonly type: "string";
-                readonly defaultValue: "Authorization";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly tokenType: {
-                readonly description: "a custom name for a token to include in the header";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly domains: {
-                readonly description: "array of valid domains the url can contain to use this account";
-                readonly type: "stringArray";
-                readonly defaultValue: readonly [];
+                type: "stringArray";
+            } & {
+                defaultValue: unknown;
             };
-        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+            type: {
+                type: "string";
+            } & {
+                defaultValue: string;
+            };
+            internetAccountId: {
+                type: "string";
+            } & {
+                defaultValue: string;
+            };
+        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
     }, {
         readonly name: string;
         readonly description: string;
@@ -329,31 +369,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
         type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
             readonly name: {
-                readonly description: "descriptive name of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly description: {
-                readonly description: "a description of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly authHeader: {
-                readonly description: "request header for credentials";
-                readonly type: "string";
-                readonly defaultValue: "Authorization";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly tokenType: {
-                readonly description: "a custom name for a token to include in the header";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly domains: {
-                readonly description: "array of valid domains the url can contain to use this account";
-                readonly type: "stringArray";
-                readonly defaultValue: readonly [];
+                type: "stringArray";
+            } & {
+                defaultValue: unknown;
+            };
+            type: {
+                type: "string";
+            } & {
+                defaultValue: string;
             };
-        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+            internetAccountId: {
+                type: "string";
+            } & {
+                defaultValue: string;
+            };
+        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
     }> & {
         readonly name: string;
         readonly description: string;
@@ -409,31 +459,41 @@ export default function useInternetAccounts(rootModel?: AbstractRootModel): {
         type: import("@jbrowse/mobx-state-tree").ISimpleType<string>;
         configuration: import("../../configuration/configurationSchema.ts").IConfigurationReference<import("../../configuration/configurationSchema.ts").ConfigurationSchemaType<{
             readonly name: {
-                readonly description: "descriptive name of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly description: {
-                readonly description: "a description of the internet account";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly authHeader: {
-                readonly description: "request header for credentials";
-                readonly type: "string";
-                readonly defaultValue: "Authorization";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly tokenType: {
-                readonly description: "a custom name for a token to include in the header";
-                readonly type: "string";
-                readonly defaultValue: "";
+                type: "string";
+            } & {
+                defaultValue: string;
             };
             readonly domains: {
-                readonly description: "array of valid domains the url can contain to use this account";
-                readonly type: "stringArray";
-                readonly defaultValue: readonly [];
+                type: "stringArray";
+            } & {
+                defaultValue: unknown;
+            };
+            type: {
+                type: "string";
+            } & {
+                defaultValue: string;
+            };
+            internetAccountId: {
+                type: "string";
+            } & {
+                defaultValue: string;
             };
-        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId">>>;
+        }, import("../../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, "internetAccountId", true, import("../../configuration/requirements.ts").ConfigurationSchemaRequirement<Partial<Record<string, string[]>>, string>>>>;
     }, {
         readonly name: string;
         readonly description: string;

package/esm/ui/HoverMenu.d.ts

@@ -1,6 +1,5 @@
 import type { PopoverOrigin } from '@mui/material';
-declare function HoverMenu({ open, anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
-    open: boolean;
+declare function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
     anchorEl: HTMLElement | null;
     onClose: () => void;
     onMouseEnter?: () => void;

package/esm/ui/HoverMenu.js

@@ -4,7 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Menu } from '@mui/material';
 // A Menu a hovering pointer can cross into: the root (which spans the viewport)
 // is click-through so the gap between the opener row and the panel doesn't
-// swallow the pointer, while the paper itself stays interactive.
+// swallow the pointer, while the paper itself stays interactive. That root can
+// never deliver a click to a backdrop, so it renders none.
+//
+// Mounted only while its submenu is open, which is why it takes no `open`.
 //
 // Only CascadingMenu's submenus render this, so it takes exactly what they pass
 // — the root's pointer-events and the paper slot are its whole point, and a
@@ -15,8 +18,8 @@ import { Menu } from '@mui/material';
 // and `onMouseEnter`, which fires on the paper rather than the click-through
 // root and so means "the pointer arrived here", not "the pointer is somewhere
 // over the viewport".
-function HoverMenu({ open, anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
-    return (_jsx(Menu, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, slotProps: {
+function HoverMenu({ anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }) {
+    return (_jsx(Menu, { open: true, anchorEl: anchorEl, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, style: { pointerEvents: 'none', zIndex }, hideBackdrop: true, slotProps: {
             paper: {
                 style: { pointerEvents: 'auto' },
                 onMouseEnter,

package/esm/ui/JexlFilterDialog.d.ts

@@ -1,23 +1,26 @@
+import type { JexlFilterField } from '../util/jexlFilterRows.ts';
 import type { JexlFilterModel } from '../util/jexlFilters.ts';
+export type { JexlFilterField } from '../util/jexlFilterRows.ts';
 export interface JexlFilterExample {
     code: string;
     description: string;
 }
 /**
- * Editor for a list of jexl feature filters (one per line), for any display
- * implementing the two-tier {@link JexlFilterModel} contract.
+ * Editor for a display's jexl feature filters, for any display implementing
+ * the two-tier {@link JexlFilterModel} contract. The Conditions tab shows each
+ * line as rows of field, operator and value where it can, and as text where it
+ * cannot; the Text tab is every line as text.
  *
- * It takes the display node rather than a filter list and a setter because the
- * three plugins offering this row each wrote their own 30-line adapter to
- * supply exactly that pair, and the adapters had drifted: one seeded the dialog
- * from the *resolved* filters (so config-declared ones showed up and were
- * editable) and the others from the raw override (so they did not), and only one
- * of them normalized an emptied list. Both are policy this dialog can state
- * once — the dialog is where "the box is empty" becomes a value.
+ * `fields` lists what the field picker offers, then the columns `metadata`
+ * describes, if it is an adapter's `{column: description}` map. Either one
+ * given as a promise suspends the dialog until it resolves, so it must not
+ * reject.
  */
-declare const JexlFilterDialog: ({ model, handleClose, examples, }: {
+declare const JexlFilterDialog: ({ model, handleClose, examples, fields, metadata, }: {
     model: JexlFilterModel;
     handleClose: () => void;
     examples?: JexlFilterExample[];
+    fields?: JexlFilterField[] | Promise<JexlFilterField[]>;
+    metadata?: Promise<unknown>;
 }) => import("react").JSX.Element;
 export default JexlFilterDialog;

package/esm/ui/JexlFilterDialog.js

@@ -1,34 +1,19 @@
-import { jsx as _jsx, 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 { use, useState } from 'react';
 import { getEnv } from '@jbrowse/mobx-state-tree';
+import AddIcon from '@mui/icons-material/Add';
+import { Button, ListItemText, MenuItem, Tab, Tabs, TextField, } from '@mui/material';
 import { observer } from 'mobx-react';
+import { readConfObject } from '../configuration/readConfObject.js';
+import { addRow, describedColumns, readFilterRows, removeRow, replaceRow, resolveFields, stripJexlPrefix, writeFilterRows, } from '../util/jexlFilterRows.js';
 import { activeJexlFilters } from '../util/jexlFilters.js';
-import { ensureJexlPrefix, stringToJexlExpression, } from '../util/jexlStrings.js';
+import { ensureJexlPrefix } from '../util/jexlStrings.js';
+import { getContainingTrack } from '../util/mstUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
 import ExternalLink from './ExternalLink.js';
+import { ConditionRowEditor, TextRowEditor, compileError, } from './JexlFilterRowEditors.js';
 import MonospaceTextField from './MonospaceTextField.js';
 import SubmitDialog from './SubmitDialog.js';
-// Non-blank, trimmed lines — the filter list excludes blank lines a user leaves
-// in the textarea, and the same set is what gets validated.
-function filterLines(text) {
-    return text
-        .split('\n')
-        .map(line => line.trim())
-        .filter(line => !!line);
-}
-// jexl compile error for the current text, or undefined when every line parses.
-// Derived during render (compilation is cached on the instance, so no effect
-// needed).
-function jexlError(text, jexl) {
-    try {
-        for (const line of filterLines(text)) {
-            stringToJexlExpression(line, jexl);
-        }
-        return undefined;
-    }
-    catch (e) {
-        return e;
-    }
-}
 /**
  * What a display filtering plain annotation features offers as a starting
  * point. A display whose features are a richer record — a VCF, say — passes its
@@ -62,33 +47,121 @@ const FEATURE_FILTER_EXAMPLES = [
         description: 'show only features with length less than 1Mbp',
     },
 ];
+const FEATURE_FIELDS = [
+    { label: 'name', path: ['name'], type: 'text' },
+    { label: 'type', path: ['type'], type: 'text' },
+    { label: 'score', path: ['score'], type: 'number' },
+    { label: 'start', path: ['start'], type: 'number' },
+    { label: 'end', path: ['end'], type: 'number' },
+    { label: 'strand', path: ['strand'], type: 'number' },
+];
+const useStyles = makeStyles()(theme => ({
+    body: {
+        minHeight: 280,
+    },
+    tabs: {
+        marginBottom: theme.spacing(2),
+    },
+    hint: {
+        marginBottom: theme.spacing(2),
+        color: theme.palette.text.secondary,
+    },
+    examples: {
+        minWidth: 220,
+        marginBottom: theme.spacing(1),
+    },
+}));
+function textLines(text) {
+    return text
+        .split('\n')
+        .map(line => line.trim())
+        .filter(line => !!line)
+        .map(ensureJexlPrefix);
+}
+function textError(text, jexl) {
+    for (const [i, line] of text.split('\n').entries()) {
+        const error = line.trim() ? compileError(line, jexl) : undefined;
+        if (error) {
+            return `Line ${i + 1}: ${error}`;
+        }
+    }
+    return undefined;
+}
+function trackName(model) {
+    try {
+        return readConfObject(getContainingTrack(model).configuration, 'name');
+    }
+    catch {
+        return undefined;
+    }
+}
+function withOneRow(state) {
+    return state.rows.length > 0 ? state : addRow(state);
+}
 /**
- * Editor for a list of jexl feature filters (one per line), for any display
- * implementing the two-tier {@link JexlFilterModel} contract.
+ * Editor for a display's jexl feature filters, for any display implementing
+ * the two-tier {@link JexlFilterModel} contract. The Conditions tab shows each
+ * line as rows of field, operator and value where it can, and as text where it
+ * cannot; the Text tab is every line as text.
  *
- * It takes the display node rather than a filter list and a setter because the
- * three plugins offering this row each wrote their own 30-line adapter to
- * supply exactly that pair, and the adapters had drifted: one seeded the dialog
- * from the *resolved* filters (so config-declared ones showed up and were
- * editable) and the others from the raw override (so they did not), and only one
- * of them normalized an emptied list. Both are policy this dialog can state
- * once — the dialog is where "the box is empty" becomes a value.
+ * `fields` lists what the field picker offers, then the columns `metadata`
+ * describes, if it is an adapter's `{column: description}` map. Either one
+ * given as a promise suspends the dialog until it resolves, so it must not
+ * reject.
  */
-const JexlFilterDialog = observer(function JexlFilterDialog({ model, handleClose, examples = FEATURE_FILTER_EXAMPLES, }) {
-    const jexl = getEnv(model)
-        .pluginManager.jexl;
-    const [data, setData] = useState(activeJexlFilters(model).join('\n'));
-    const error = jexlError(data, jexl);
-    return (_jsxs(SubmitDialog, { maxWidth: "xl", open: true, title: "Add track filters", submitDisabled: !!error, onCancel: handleClose, onSubmit: () => {
-            const lines = filterLines(data).map(ensureJexlPrefix);
-            // An emptied box is "show everything", which is NOT the same as
-            // following the config slot — it has to survive as a set override, or a
-            // track whose config declares filters could never have them cleared.
-            // Clearing the override is the "Clear all filters" menu row's job.
-            model.setJexlFilters(lines);
+const JexlFilterDialog = observer(function JexlFilterDialog({ model, handleClose, examples = FEATURE_FILTER_EXAMPLES, fields = FEATURE_FIELDS, metadata, }) {
+    const { classes } = useStyles();
+    const jexl = getEnv(model).pluginManager
+        .jexl;
+    const fieldList = fields instanceof Promise ? use(fields) : fields;
+    const described = metadata && use(metadata);
+    const [choices] = useState(() => resolveFields([...fieldList, ...describedColumns(described, fieldList)]));
+    const [state, setState] = useState(() => withOneRow(readFilterRows(activeJexlFilters(model), jexl, choices)));
+    const [tab, setTab] = useState('conditions');
+    const [text, setText] = useState({ value: '', shown: '' });
+    const textEdited = text.value !== text.shown;
+    const error = tab === 'text'
+        ? textError(text.value, jexl)
+        : state.rows.some(row => row.kind === 'text' && compileError(row.text, jexl));
+    const name = trackName(model);
+    return (_jsx(SubmitDialog, { maxWidth: "md", fullWidth: true, open: true, title: name ? `Filter ${name}` : 'Filter features', submitText: "Apply", submitDisabled: !!error, onCancel: handleClose, onSubmit: () => {
+            // An emptied list is "show everything", which is NOT the same as
+            // following the config slot, so it is set as an override too
+            model.setJexlFilters(tab === 'text' && textEdited
+                ? textLines(text.value)
+                : writeFilterRows(state));
             handleClose();
-        }, children: [_jsxs("div", { style: { width: '80em' }, children: ["Add filters, in jexl format, one per line, starting with the string jexl:. Examples:", ' ', _jsx("ul", { children: examples.map(({ code, description }) => (_jsxs("li", { children: [_jsx("code", { children: code }), " - ", description] }, code))) }), _jsxs("p", { children: ["Please see the", ' ', _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/config_guides/jexl/", children: "Jexl" }), ' ', "documentation for more information"] })] }), _jsx(MonospaceTextField, { fullWidth: true, minRows: 5, maxRows: 10, value: data, error: error, onChange: val => {
-                    setData(val);
-                } })] }));
+        }, children: _jsxs("div", { className: classes.body, children: [_jsxs(Tabs, { className: classes.tabs, value: tab, onChange: (_, next) => {
+                        if (next === 'text') {
+                            const value = writeFilterRows(state)
+                                .map(stripJexlPrefix)
+                                .join('\n');
+                            setText({ value, shown: value });
+                        }
+                        else if (textEdited) {
+                            setState(withOneRow(readFilterRows(textLines(text.value), jexl, choices)));
+                        }
+                        setTab(next);
+                    }, children: [_jsx(Tab, { value: "conditions", label: "Conditions" }), _jsx(Tab, { value: "text", label: "Text", "data-testid": "jexl-filter-text-tab" })] }), tab === 'conditions' ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.hint, children: "Show features that match every condition." }), state.rows.map(row => row.kind === 'text' ? (_jsx(TextRowEditor, { row: row, jexl: jexl, onChange: next => {
+                                setState(replaceRow(state, next));
+                            }, onRemove: () => {
+                                setState(removeRow(state, row.id));
+                            } }, row.id)) : (_jsx(ConditionRowEditor, { row: row, choices: choices, onChange: next => {
+                                setState(replaceRow(state, next));
+                            }, onRemove: () => {
+                                setState(removeRow(state, row.id));
+                            } }, row.id))), _jsx(Button, { startIcon: _jsx(AddIcon, {}), onClick: () => {
+                                setState(addRow(state));
+                            }, children: "Add condition" })] })) : (_jsxs(_Fragment, { children: [_jsx(TextField, { select: true, size: "small", label: "Insert example\u2026", value: "", className: classes.examples, onChange: event => {
+                                const code = stripJexlPrefix(event.target.value);
+                                setText({
+                                    ...text,
+                                    value: text.value.trim()
+                                        ? `${text.value.trimEnd()}\n${code}`
+                                        : code,
+                                });
+                            }, children: examples.map(({ code, description }) => (_jsx(MenuItem, { value: code, children: _jsx(ListItemText, { primary: stripJexlPrefix(code), secondary: description }) }, code))) }), _jsx(MonospaceTextField, { fullWidth: true, minRows: 6, maxRows: 14, value: text.value, error: error, helperText: "One filter per line; a feature has to pass every line.", onChange: value => {
+                                setText({ ...text, value });
+                            } }), _jsxs("p", { children: ["See the", ' ', _jsx(ExternalLink, { href: "https://jbrowse.org/jb2/docs/config_guides/jexl/", children: "jexl documentation" }), ' ', "for the expression language."] })] }))] }) }));
 });
 export default JexlFilterDialog;

package/esm/ui/JexlFilterRowEditors.d.ts

@@ -0,0 +1,15 @@
+import type { ConditionRow, FieldChoice, TextRow } from '../util/jexlFilterRows.ts';
+import type { Jexl } from '@jbrowse/jexl';
+export declare function compileError(line: string, jexl: Pick<Jexl, 'compile'>): string | undefined;
+export declare function ConditionRowEditor({ row, choices, onChange, onRemove, }: {
+    row: ConditionRow;
+    choices: FieldChoice[];
+    onChange: (row: ConditionRow) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+export declare function TextRowEditor({ row, jexl, onChange, onRemove, }: {
+    row: TextRow;
+    jexl: Pick<Jexl, 'compile'>;
+    onChange: (row: TextRow) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;