@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetails.js

@@ -1,14 +1,19 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Divider, Typography } from '@mui/material';
-import Attributes from "./Attributes.js";
-import BaseCard from "./BaseCard.js";
-import CoreDetails from "./CoreDetails.js";
-import { generateTitle } from "./util.js";
-import { ErrorBoundary } from "../../ui/ErrorBoundary.js";
-import { ErrorMessage } from "../../ui/index.js";
-import { getEnv, getSession } from "../../util/index.js";
-import SequenceFeatureDetails from "../SequenceFeatureDetails/index.js";
-const coreDetails = [
+import { observer } from 'mobx-react';
+import { ErrorBoundary } from '../../ui/ErrorBoundary.js';
+import PluggableComponents from '../../ui/PluggableComponents.js';
+import { ErrorBanner } from '../../ui/index.js';
+import { getEnv } from '../../util/index.js';
+import SequenceFeatureDetails from '../SequenceFeatureDetails/index.js';
+import Attributes from './Attributes.js';
+import BaseCard from './BaseCard.js';
+import CoreDetails from './CoreDetails.js';
+import { generateTitle } from './util.js';
+function SectionHeader({ title }) {
+    return _jsx(Typography, { variant: "overline", children: title });
+}
+const shownByCoreDetails = [
     'name',
     'start',
     'end',
@@ -17,26 +22,24 @@ const coreDetails = [
     'description',
     'type',
 ];
-export default function FeatureDetails(props) {
-    const { omit = [], model, feature, depth = 0 } = props;
-    const { maxDepth } = model;
+const FeatureDetails = observer(function FeatureDetails(props) {
+    const { omit = [], model, feature, unformatted = feature, depth = 0, descriptions, formatter, fieldActions, } = props;
+    const maxDepth = model.maxDepth ?? Infinity;
     const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature;
-    const pm = getEnv(model).pluginManager;
-    const session = getSession(model);
-    const ExtraPanel = pm.evaluateExtensionPoint('Core-extraFeaturePanel', null, {
-        session,
-        feature,
-        model,
-    });
-    const m = mate;
-    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [_jsx(Typography, { children: "Core details" }), _jsx(CoreDetails, { ...props }), m ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Typography, { children: "Mate details" }), _jsx(CoreDetails, { ...props, feature: {
-                            ...m,
-                            start: m.start,
-                            end: m.end,
-                            refName: m.refName,
-                            uniqueId: `${uniqueId}-mate`,
-                        } })] })) : null, _jsx(Divider, {}), _jsx(Typography, { children: "Attributes" }), _jsx(Attributes, { attributes: feature, ...props, omit: omit, omitSingleLevel: coreDetails }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorMessage, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props }) }), ExtraPanel ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(BaseCard, { title: ExtraPanel.name, children: _jsx(ExtraPanel.Component, { ...props }) })] })) : null, depth < maxDepth && subfeatures?.length ? (_jsx(BaseCard, { title: "Subfeatures", defaultExpanded: depth < 1, children: subfeatures.map((sub, idx) => (_jsx(FeatureDetails, { feature: {
+    // a panel selecting on `depth === 0` has to see the default, not undefined
+    const panelProps = { ...props, depth };
+    return (_jsxs(BaseCard, { title: generateTitle(name, id, type), children: [_jsx(SectionHeader, { title: "Core details" }), _jsx(CoreDetails, { ...props }), mate ? (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(SectionHeader, { title: "Mate details" }), _jsx(CoreDetails, { ...props, feature: { ...mate, uniqueId: `${uniqueId}-mate` } }), _jsx(Attributes, { attributes: mate, prefix: ['mate'], omit: omit, omitSingleLevel: shownByCoreDetails, descriptions: descriptions, formatter: formatter, fieldActions: fieldActions })] })) : null, _jsx(Divider, {}), _jsx(SectionHeader, { title: "Attributes" }), _jsx(Attributes, { attributes: feature, omit: omit, omitSingleLevel: [...shownByCoreDetails, 'mate'], descriptions: descriptions, formatter: formatter, fieldActions: fieldActions }), _jsx(ErrorBoundary, { FallbackComponent: e => _jsx(ErrorBanner, { error: e.error }), children: _jsx(SequenceFeatureDetails, { ...props, feature: unformatted }) }), _jsx(PluggableComponents, { pluginManager: getEnv(model).pluginManager, 
+                /** #extensionPoint Core-extraFeaturePanel | sync | Add extra panels to the feature details widget */
+                name: "Core-extraFeaturePanel", props: panelProps }), depth < maxDepth && subfeatures?.length ? (_jsx(BaseCard, { title: "Subfeatures", defaultExpanded: depth === 0 && subfeatures.length <= 20, children: subfeatures.map((sub, idx) => (_jsx(FeatureDetails
+                // eslint-disable-next-line @eslint-react/no-array-index-key -- subfeature list order is fixed per feature, no unique field guaranteed by type
+                , { feature: {
                         ...sub,
                         uniqueId: `${uniqueId}_${idx}`,
-                    }, model: model, depth: depth + 1 }, JSON.stringify(sub)))) })) : null] }));
-}
+                    }, unformatted: unformatted.subfeatures?.[idx]
+                        ? {
+                            ...unformatted.subfeatures[idx],
+                            uniqueId: `${uniqueId}_${idx}`,
+                        }
+                        : undefined, model: model, depth: depth + 1, descriptions: descriptions, formatter: formatter, fieldActions: fieldActions, omit: omit }, `${uniqueId}_${idx}`))) })) : null] }));
+});
+export default FeatureDetails;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetailsFrame.d.ts

@@ -0,0 +1,11 @@
+import type { SimpleFeatureSerialized } from '../../util/index.ts';
+import type React from 'react';
+export interface FeatureDetailsFrameModel {
+    error?: unknown;
+    featureData?: SimpleFeatureSerialized;
+}
+declare const FeatureDetailsFrame: ({ model, children, }: {
+    model: FeatureDetailsFrameModel;
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export default FeatureDetailsFrame;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureDetailsFrame.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Paper, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { ErrorBanner } from '../../ui/index.js';
+import FeatureWash from './FeatureWash.js';
+import { isEmpty } from './util.js';
+const FeatureDetailsFrame = observer(function FeatureDetailsFrame({ model, children, }) {
+    const { error, featureData } = model;
+    return error ? (_jsx(ErrorBanner, { error: error })) : !featureData || isEmpty(featureData) ? (_jsx(Paper, { sx: { p: 2 }, children: _jsx(Typography, { children: "No feature loaded. It may not be available after a page refresh because it was too large to persist in localStorage." }) })) : (_jsx(FeatureWash, { uniqueId: featureData.uniqueId, children: children }));
+});
+export default FeatureDetailsFrame;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureWash.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A one-shot tint over a feature-details panel, played when the panel swaps to
+ * a different feature.
+ *
+ * Every feature widget is a singleton the drawer reuses -- one id per widget
+ * type, rendered without a key -- so clicking a second feature remounts
+ * nothing. The drawer keeps its scroll offset with it, and on a dense panel the
+ * content can change entirely below the fold with nothing on screen saying it
+ * did. The cue covers the whole panel rather than its title for that reason:
+ * a title is off-screen for exactly the reader who cannot tell it updated.
+ *
+ * **Mount this outside anything keyed on the feature.** Some widgets key their
+ * body on `uniqueId` to reset per-feature UI state (variants does, for its
+ * sample grid); inside such a key this remounts on every swap and its counter
+ * never leaves zero, so it silently never plays.
+ */
+export default function FeatureWash({ uniqueId, children, }: {
+    uniqueId: string | undefined;
+    children: React.ReactNode;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FeatureWash.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { alpha } from '../../ui/palette.js';
+import { keyframes, makeStyles } from '../../util/tss-react/index.js';
+// Long enough to register out of the corner of an eye that was on the track,
+// short enough that a run of clicks doesn't leave the panel permanently tinted.
+const WASH_MS = 550;
+const useStyles = makeStyles()(theme => {
+    // No `prefers-reduced-motion` branch, deliberately. Nothing here moves,
+    // scales or travels -- a background color fading out is not motion, and that
+    // setting's subject is motion. Dropping the cue for reduced-motion users
+    // would take away the only thing telling them the panel answered their
+    // click, which is the failure mode that asked for this in the first place.
+    const wash = keyframes `
+    from { background-color: ${alpha(theme.palette.quaternary.main, 0.15)}; }
+    to { background-color: ${alpha(theme.palette.quaternary.main, 0)}; }
+  `;
+    return {
+        root: {
+            position: 'relative',
+        },
+        wash: {
+            position: 'absolute',
+            inset: 0,
+            pointerEvents: 'none',
+            animation: `${wash} ${WASH_MS}ms ease-out`,
+        },
+    };
+});
+/**
+ * A one-shot tint over a feature-details panel, played when the panel swaps to
+ * a different feature.
+ *
+ * Every feature widget is a singleton the drawer reuses -- one id per widget
+ * type, rendered without a key -- so clicking a second feature remounts
+ * nothing. The drawer keeps its scroll offset with it, and on a dense panel the
+ * content can change entirely below the fold with nothing on screen saying it
+ * did. The cue covers the whole panel rather than its title for that reason:
+ * a title is off-screen for exactly the reader who cannot tell it updated.
+ *
+ * **Mount this outside anything keyed on the feature.** Some widgets key their
+ * body on `uniqueId` to reset per-feature UI state (variants does, for its
+ * sample grid); inside such a key this remounts on every swap and its counter
+ * never leaves zero, so it silently never plays.
+ */
+export default function FeatureWash({ uniqueId, children, }) {
+    const { classes } = useStyles();
+    // Keyed on the feature's identity, not on the feature object: a widget's
+    // formatDetails callbacks re-resolve into a fresh object, and a re-format of
+    // the feature already on screen is not a change the user made.
+    //
+    // `count` doubles as the restart key -- a class alone won't replay an
+    // animation already on the element, which is what clicking between two
+    // features is. Adjusted during render rather than from an effect, so a
+    // StrictMode host's doubled mount can't wash a panel nobody clicked.
+    const [wash, setWash] = useState({ shownFor: uniqueId, count: 0 });
+    if (wash.shownFor !== uniqueId) {
+        setWash({
+            shownFor: uniqueId,
+            // a panel filling for the first time is not an update -- there was
+            // nothing on screen to mistake for the feature that just arrived
+            count: wash.shownFor === undefined ? 0 : wash.count + 1,
+        });
+    }
+    return (_jsxs("div", { className: classes.root, children: [children, wash.count ? (_jsx("span", { className: classes.wash, "data-testid": "feature-details-wash" }, wash.count)) : null] }));
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldActionsButton.d.ts

@@ -0,0 +1,8 @@
+import type { FieldActions } from '../types.tsx';
+/** A class for a field row that shows its FieldActionsButton on hover or focus. */
+export declare function useRevealFieldActions(): string;
+export default function FieldActionsButton({ path, value, fieldActions, }: {
+    path: string[];
+    value: unknown;
+    fieldActions?: FieldActions;
+}): import("react").JSX.Element | null;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldActionsButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FilterListIcon from '@mui/icons-material/FilterList';
+import CascadingMenuButton from '../../ui/CascadingMenuButton.js';
+import { makeStyles } from '../../util/tss-react/index.js';
+// on a wrapper because MUI folds an Emotion class handed to one of its
+// components into a class of its own, which a selector naming it never matches
+const useStyles = makeStyles()({
+    reveal: {
+        opacity: 0,
+    },
+});
+/** A class for a field row that shows its FieldActionsButton on hover or focus. */
+export function useRevealFieldActions() {
+    const { classes, css } = useStyles();
+    const { reveal } = classes;
+    return css({
+        [`&:hover .${reveal}, &:focus-within .${reveal}`]: { opacity: 1 },
+    });
+}
+export default function FieldActionsButton({ path, value, fieldActions, }) {
+    const { classes } = useStyles();
+    const items = fieldActions?.(path, value) ?? [];
+    return items.length > 0 ? (_jsx("span", { className: classes.reveal, children: _jsx(CascadingMenuButton, { menuItems: items, size: "small", tooltip: "Filter by this value", style: { padding: 0 }, children: _jsx(FilterListIcon, { fontSize: "small" }) }) })) : null;
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.d.ts

@@ -3,4 +3,4 @@ export default function FieldName({ description, name, width, prefix, }: {
     name: string;
     prefix?: string[];
     width?: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/FieldName.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '@mui/material';
-import { cx, makeStyles } from "../../util/tss-react/index.js";
+import { cx, makeStyles } from '../../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     fieldDescription: {
         '&:hover': {
@@ -20,5 +20,5 @@ const useStyles = makeStyles()(theme => ({
 export default function FieldName({ description, name, width, prefix = [], }) {
     const { classes } = useStyles();
     const val = [...prefix, name].join('.');
-    return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width: width }, children: val }));
+    return description ? (_jsx(Tooltip, { title: description, placement: "left", children: _jsx("div", { className: cx(classes.fieldDescription, classes.fieldName), style: { width }, children: val }) })) : (_jsx("div", { className: classes.fieldName, style: { width }, children: val }));
 }

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.d.ts

@@ -0,0 +1,3 @@
+export default function Formatter({ value }: {
+    value: unknown;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/Formatter.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useCopyToClipboard } from '../../ui/useCopyToClipboard.js';
+import { ValueText, isBareUrl, valueText } from './BasicValue.js';
+const TRUNCATE_LENGTH = 100;
+// a 'show more...' toggle used as a formatter on feature details: long values
+// (e.g. a SEQ/CRAM string, or a long read's worth of data in a single div) can
+// slow down the rest of the app, so they are truncated until expanded. A URL
+// is left whole, since a truncated one links nowhere
+export default function Formatter({ value }) {
+    const [show, setShow] = useState(false);
+    const { copied, copy } = useCopyToClipboard(700);
+    const display = valueText(value);
+    return display.length > TRUNCATE_LENGTH && !isBareUrl(display) ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => {
+                    void copy(display);
+                }, children: copied ? 'Copied to clipboard' : 'Copy' }), _jsx("button", { type: "button", onClick: () => {
+                    setShow(val => !val);
+                }, children: show ? 'Show less' : 'Show more' }), _jsx("div", { children: show ? (_jsx(ValueText, { text: display })) : (`${display.slice(0, TRUNCATE_LENGTH)}...`) })] })) : (_jsx(ValueText, { text: display }));
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/ParentFeatureLine.d.ts

@@ -0,0 +1,4 @@
+import type { ParentFeatureSummary } from '../../util/index.ts';
+export default function ParentFeatureLine({ parentFeature, }: {
+    parentFeature: ParentFeatureSummary;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/ParentFeatureLine.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { makeStyles } from '../../util/tss-react/index.js';
+const useStyles = makeStyles()(theme => ({
+    line: {
+        padding: theme.spacing(0.5, 1, 0),
+    },
+}));
+// Which gene a transcript came out of, above the card naming the transcript.
+// The panel is opened on the exact isoform the click resolved to, and that
+// isoform's own record is regularly the only place its accession appears --
+// nothing in `NM_004006.2 - mRNA` says DMD.
+export default function ParentFeatureLine({ parentFeature, }) {
+    const { classes } = useStyles();
+    const { name, type } = parentFeature;
+    return (_jsxs(Typography, { variant: "body2", color: "textSecondary", className: classes.line, "data-testid": "parent-feature-line", children: ["in ", type ? `${type} ` : '', name] }));
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.d.ts

@@ -1,8 +1,10 @@
-export default function SimpleField({ name, value, description, prefix, width, formatter, }: {
+import type { FeatureFormatter, FieldActions } from '../types.tsx';
+export default function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }: {
     description?: React.ReactNode;
     name: string;
     value: unknown;
     prefix?: string[];
     width?: number;
-    formatter?: (value: unknown, key: string) => React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;
+    formatter?: FeatureFormatter;
+    fieldActions?: FieldActions;
+}): import("react").JSX.Element | null;

package/esm/BaseFeatureWidget/BaseFeatureDetail/SimpleField.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import BasicValue from "./BasicValue.js";
-import FieldName from "./FieldName.js";
-import { makeStyles } from "../../util/tss-react/index.js";
+import { makeStyles } from '../../util/tss-react/index.js';
+import BasicValue from './BasicValue.js';
+import FieldActionsButton, { useRevealFieldActions, } from './FieldActionsButton.js';
+import FieldName from './FieldName.js';
 const useStyles = makeStyles()({
     field: {
         display: 'flex',
         flexWrap: 'wrap',
     },
 });
-export default function SimpleField({ name, value, description, prefix, width, formatter, }) {
-    const { classes } = useStyles();
-    return value != null ? (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value })] })) : null;
+export default function SimpleField({ name, value, description, prefix, width, formatter, fieldActions, }) {
+    const { classes, cx } = useStyles();
+    const reveal = useRevealFieldActions();
+    return value != null ? (_jsxs("div", { className: cx(classes.field, reveal), children: [_jsx(FieldName, { prefix: prefix, description: description, name: name, width: width }), _jsx(BasicValue, { value: formatter ? formatter(value, name) : value }), _jsx(FieldActionsButton, { path: [...(prefix ?? []), name], value: value, fieldActions: fieldActions })] })) : null;
 }

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.d.ts

@@ -1,8 +1,9 @@
-export default function UriField({ value, prefix, name, }: {
+export default function UriField({ value, prefix, name, width, }: {
     value: {
         uri: string;
         baseUri?: string;
     };
     name: string;
     prefix: string[];
-}): import("react/jsx-runtime").JSX.Element;
+    width?: number;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/BaseFeatureDetail/UriField.js

@@ -1,22 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import BasicValue from "./BasicValue.js";
-import FieldName from "./FieldName.js";
-import { makeStyles } from "../../util/tss-react/index.js";
-const useStyles = makeStyles()({
-    field: {
-        display: 'flex',
-        flexWrap: 'wrap',
-    },
-});
-export default function UriField({ value, prefix, name, }) {
-    const { classes } = useStyles();
+import { jsx as _jsx } from "react/jsx-runtime";
+import SimpleField from './SimpleField.js';
+export default function UriField({ value, prefix, name, width, }) {
     const { uri, baseUri = '' } = value;
     let href;
     try {
         href = new URL(uri, baseUri).href;
     }
-    catch (e) {
+    catch {
         href = uri;
     }
-    return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, name: name }), _jsx(BasicValue, { value: href })] }));
+    // width forwarded like any other field's: without it a URI row sized its own
+    // label to content and sat out of the column every row beside it shares
+    return _jsx(SimpleField, { name: name, prefix: prefix, value: href, width: width });
 }

package/esm/BaseFeatureWidget/BaseFeatureDetail/index.d.ts

@@ -1,7 +1,12 @@
-import type { BaseInputProps } from './types.ts';
-declare const BaseFeatureDetail: ({ model, }: BaseInputProps) => import("react/jsx-runtime").JSX.Element | null;
+import type { BaseFeatureWidgetModel } from '../stateModelFactory.ts';
+declare const BaseFeatureDetail: ({ model, }: {
+    model: BaseFeatureWidgetModel;
+}) => import("react").JSX.Element;
 export default BaseFeatureDetail;
 export { default as BaseCard } from './BaseCard.tsx';
 export { default as BaseAttributes } from './BaseAttributes.tsx';
 export { default as BaseCoreDetails } from './BaseCoreDetails.tsx';
 export { default as FeatureDetails } from './FeatureDetails.tsx';
+export { default as FeatureDetailsFrame } from './FeatureDetailsFrame.tsx';
+export { default as FeatureWash } from './FeatureWash.tsx';
+export { filterByValueItems, jexlFilterDisplay } from './jexlFilterActions.ts';

package/esm/BaseFeatureWidget/BaseFeatureDetail/index.js

@@ -1,24 +1,19 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import FeatureDetails from "./FeatureDetails.js";
-import { isEmpty } from "./util.js";
-import { ErrorMessage } from "../../ui/index.js";
-import { replaceUndefinedWithNull } from "../util.js";
+import FeatureDetails from './FeatureDetails.js';
+import FeatureDetailsFrame from './FeatureDetailsFrame.js';
+import ParentFeatureLine from './ParentFeatureLine.js';
 const BaseFeatureDetail = observer(function BaseFeatureDetail({ model, }) {
-    const { error, descriptions, featureData } = model;
-    if (error) {
-        return _jsx(ErrorMessage, { error: error });
-    }
-    else if (!featureData) {
-        return null;
-    }
-    else {
-        const featureData2 = replaceUndefinedWithNull(featureData);
-        return isEmpty(featureData2) ? null : (_jsx(FeatureDetails, { model: model, feature: featureData2, descriptions: descriptions }));
-    }
+    const { featureData, unformattedFeatureData, parentFeature } = model;
+    // annotated to shed the MST node brand types.frozen() carries on the instance
+    const descriptions = model.descriptions;
+    return (_jsx(FeatureDetailsFrame, { model: model, children: featureData ? (_jsxs(_Fragment, { children: [parentFeature ? (_jsx(ParentFeatureLine, { parentFeature: parentFeature })) : null, _jsx(FeatureDetails, { model: model, feature: featureData, unformatted: unformattedFeatureData, descriptions: descriptions })] })) : null }));
 });
 export default BaseFeatureDetail;
-export { default as BaseCard } from "./BaseCard.js";
-export { default as BaseAttributes } from "./BaseAttributes.js";
-export { default as BaseCoreDetails } from "./BaseCoreDetails.js";
-export { default as FeatureDetails } from "./FeatureDetails.js";
+export { default as BaseCard } from './BaseCard.js';
+export { default as BaseAttributes } from './BaseAttributes.js';
+export { default as BaseCoreDetails } from './BaseCoreDetails.js';
+export { default as FeatureDetails } from './FeatureDetails.js';
+export { default as FeatureDetailsFrame } from './FeatureDetailsFrame.js';
+export { default as FeatureWash } from './FeatureWash.js';
+export { filterByValueItems, jexlFilterDisplay } from './jexlFilterActions.js';

package/esm/BaseFeatureWidget/BaseFeatureDetail/jexlFilterActions.d.ts

@@ -0,0 +1,16 @@
+import type { MenuItem } from '../../ui/MenuTypes.ts';
+import type { JexlFilterModel } from '../../util/jexlFilters.ts';
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+export interface JexlFilterDisplay extends JexlFilterModel, IStateTreeNode {
+}
+export declare function isJexlFilterDisplay(thing: unknown): thing is JexlFilterDisplay;
+/** The first of a track's displays that takes jexl filters. */
+export declare function jexlFilterDisplay(track?: {
+    displays: readonly unknown[];
+}): JexlFilterDisplay | undefined;
+/**
+ * "Show only" and "Hide" items for one feature attribute's value, and "Show
+ * only ≥" for a number. Each appends a filter line to the display and offers
+ * an undo.
+ */
+export declare function filterByValueItems(display: JexlFilterDisplay, path: string[], value: unknown): MenuItem[];

package/esm/BaseFeatureWidget/BaseFeatureDetail/jexlFilterActions.js

@@ -0,0 +1,50 @@
+import { pathSubject, printCondition } from '@jbrowse/jexl';
+import { activeJexlFilters } from '../../util/jexlFilters.js';
+import { ensureJexlPrefix } from '../../util/jexlStrings.js';
+import { getNotificationSink } from '../../util/sessionServices.js';
+const MAX_LABEL_VALUE = 30;
+export function isJexlFilterDisplay(thing) {
+    return (typeof thing === 'object' &&
+        thing !== null &&
+        'setFilter' in thing &&
+        'configuredFilters' in thing);
+}
+/** The first of a track's displays that takes jexl filters. */
+export function jexlFilterDisplay(track) {
+    return track?.displays.find(isJexlFilterDisplay);
+}
+/**
+ * "Show only" and "Hide" items for one feature attribute's value, and "Show
+ * only ≥" for a number. Each appends a filter line to the display and offers
+ * an undo.
+ */
+export function filterByValueItems(display, path, value) {
+    if (typeof value !== 'string' && typeof value !== 'number') {
+        return [];
+    }
+    const field = path.join('.');
+    const text = String(value);
+    const shown = text.length > MAX_LABEL_VALUE ? `${text.slice(0, MAX_LABEL_VALUE)}…` : text;
+    const add = (op) => () => {
+        const previous = display.filterSetting;
+        const line = printCondition({
+            subject: pathSubject('feature', path),
+            op,
+            value,
+        });
+        display.setFilter([...activeJexlFilters(display), ensureJexlPrefix(line)]);
+        getNotificationSink(display).notify('Filter added', 'info', {
+            name: 'Undo',
+            onClick: () => {
+                display.setFilter(previous && [...previous]);
+            },
+        });
+    };
+    return [
+        { label: `Show only ${field} = ${shown}`, onClick: add('==') },
+        { label: `Hide ${field} = ${shown}`, onClick: add('!=') },
+        ...(typeof value === 'number'
+            ? [{ label: `Show only ${field} ≥ ${shown}`, onClick: add('>=') }]
+            : []),
+    ];
+}

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.d.ts

@@ -1,4 +1,3 @@
 export declare function isEmpty(obj: Record<string, unknown>): boolean;
 export declare function generateTitle(name: unknown, id: unknown, type: unknown): string;
-export declare function generateMaxWidth(array: unknown[][], prefix: string[]): number;
 export declare function accessNested(arr: string[], obj?: Record<string, unknown>): string | undefined;

package/esm/BaseFeatureWidget/BaseFeatureDetail/util.js

@@ -1,22 +1,21 @@
-import { isObject, max, measureText } from "../../util/index.js";
-import { ellipses } from "../util.js";
+import { coarseStripHTML, isObject } from '../../util/index.js';
+import { ellipses } from '../util.js';
 export function isEmpty(obj) {
     return Object.keys(obj).length === 0;
 }
 export function generateTitle(name, id, type) {
-    return [ellipses(`${name || id || ''}`), `${type}`]
-        .filter(f => !!f)
+    const label = coarseStripHTML(`${name || id || ''}`);
+    return [label ? ellipses(label) : '', type ? `${type}` : '']
+        .filter(Boolean)
         .join(' - ');
 }
-export function generateMaxWidth(array, prefix) {
-    return (Math.ceil(max(array.map(key => measureText([...prefix, key[0]].join('.'), 12)))) + 10);
-}
+// the description at `arr` in a descriptions tree: a string there, or the
+// `Description` of the object there, as a VCF header entry carries. A path
+// that runs out of objects early has none
 export function accessNested(arr, obj = {}) {
     let obj2 = obj;
     for (const elt of arr) {
-        if (isObject(obj2)) {
-            obj2 = obj2[elt];
-        }
+        obj2 = isObject(obj2) ? obj2[elt] : undefined;
     }
     return typeof obj2 === 'string'
         ? obj2

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceBody.d.ts

@@ -0,0 +1,18 @@
+import type { RpcStatus, SimpleFeatureSerialized } from '../../util/index.ts';
+import type { ErrorState, SeqState } from '../util.tsx';
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel, SequenceHoverTarget } from './model.ts';
+import type { RefObject } from 'react';
+export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }: {
+    error: unknown;
+    sequence: SeqState | ErrorState | undefined;
+    status?: RpcStatus;
+    feature: SimpleFeatureSerialized;
+    seqPanelRef: RefObject<HTMLDivElement | null>;
+    model: SequenceFeatureDetailsModel;
+    mode: SequenceDisplayMode;
+    revcomp: boolean;
+    assemblyGeneticCodeId?: number;
+    assemblyName?: string;
+    hoverTarget?: SequenceHoverTarget;
+    onForceLoad: () => void;
+}): import("react").JSX.Element;

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceBody.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Typography } from '@mui/material';
+import { ErrorBanner, LoadingEllipses } from '../../ui/index.js';
+import { statusProgressLabel } from '../../util/progress.js';
+import SequencePanel from './SequencePanel.js';
+export default function SequenceBody({ error, sequence, status, feature, seqPanelRef, model, mode, revcomp, assemblyGeneticCodeId, assemblyName, hoverTarget, onForceLoad, }) {
+    return (_jsx("div", { children: error ? (_jsx(ErrorBanner, { error: error })) : !sequence ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) })) : 'error' in sequence ? (_jsxs(_Fragment, { children: [_jsx(Typography, { color: "error", children: sequence.error }), _jsx(Button, { onClick: () => {
+                        onForceLoad();
+                    }, children: "Force load" })] })) : (_jsx(SequencePanel, { ref: seqPanelRef, feature: feature, sequence: sequence, model: model, mode: mode, revcomp: revcomp, assemblyGeneticCodeId: assemblyGeneticCodeId, assemblyName: assemblyName, hoverTarget: hoverTarget })) }));
+}

package/esm/BaseFeatureWidget/SequenceFeatureDetails/SequenceContents.d.ts

@@ -1,10 +1,13 @@
-import type { SequenceFeatureDetailsModel } from './model.ts';
 import type { SimpleFeatureSerialized } from '../../util/index.ts';
 import type { SeqState } from '../util.tsx';
-declare const SequenceContents: ({ mode, feature, sequence, model, }: {
-    mode: string;
+import type { SequenceDisplayMode, SequenceFeatureDetailsModel } from './model.ts';
+declare const SequenceContents: ({ mode, feature, sequence, model, assemblyGeneticCodeId, revcomp, onHoverBase, }: {
+    mode: SequenceDisplayMode;
     feature: SimpleFeatureSerialized;
     sequence: SeqState;
     model: SequenceFeatureDetailsModel;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    assemblyGeneticCodeId?: number;
+    revcomp: boolean;
+    onHoverBase?: (base0: number) => void;
+}) => import("react").JSX.Element;
 export default SequenceContents;