@jbrowse/core 4.3.0 → 5.0.0-beta.2

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

@@ -2,7 +2,62 @@ import type { BaseInternetAccountModel } from '../../pluggableElementTypes/index
 import type { FileLocation } from '../../util/index.ts';
 export declare const MAX_LABEL_LENGTH = 5;
 export declare function isAdminMode(): boolean;
-export declare function shorten(str: string): string;
-export declare function getAccountLabel(account: BaseInternetAccountModel): string | number | bigint | true | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
-export declare function getInitialSourceType(location?: FileLocation): string;
+export declare function truncateLabel(str: string): string;
+export declare function getAccountLabel(account: BaseInternetAccountModel): string | number | bigint | true | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The toggles a selector offers, in the order it draws them — and so the set a
+ * selection has to come from.
+ *
+ * One list because three places used to answer this apart, and a selection none
+ * of the drawn buttons carries leaves the group with nothing pressed:
+ * `SourceTypeSelector` withheld File in admin mode while `getInitialSourceType`
+ * went on opening an empty slot on it, and a location whose `internetAccountId`
+ * names an account this host does not install opened on a toggle that was never
+ * drawn. `FileSelector` resolves against this rather than trusting either.
+ *
+ * No File toggle in admin mode: a BlobLocation cannot be written into the
+ * config.json the admin server saves.
+ */
+export declare function availableSourceTypes(accountIds: string[]): string[];
+export declare function getInitialSourceType(location?: FileLocation, emptyDefault?: string): string;
+/**
+ * The toggle `location` needs in order to be visible, or undefined when the one
+ * already showing can render it.
+ *
+ * `getInitialSourceType` answers this once, at mount, when a form's slot is
+ * usually still empty. This is the same question asked of a location that
+ * arrived later — the index a form found sitting beside the main file, say,
+ * which on desktop is a local path and would render as a blank URL box.
+ *
+ * Undefined for an empty slot (spelled as a UriLocation with no uri) as well as
+ * for a match: an emptied field says nothing about how the user wants to work,
+ * and switching the toggle out from under them as they clear a box is worse than
+ * leaving it.
+ */
+export declare function sourceTypeForLocation(location: FileLocation | undefined, current: string): string | undefined;
+/**
+ * The directory containing `filePath`, for remembering where the user last
+ * picked a file. Undefined when there is no directory to remember.
+ *
+ * String surgery rather than `node:path` because this is renderer code that
+ * also builds for the web, and it has to read a Windows path from Electron
+ * either way. Which means keeping the separator: `idx` is the index of the last
+ * one, so slicing *before* it drops it, and `C:\reads.bam` — a file at the root
+ * of a data drive, which is where an external disk mounts — yielded `"C:"`.
+ * That is not the root; to Windows a drive letter with no separator means the
+ * current directory on that drive, so the dialog reopened wherever the process
+ * happened to be. Keep the separator when dropping it would leave a bare root
+ * (`C:\`, and `/` on POSIX).
+ */
+export declare function dirFromPath(filePath: string): string | undefined;
+/**
+ * Stamps the selected account onto a URL location — and, given no account,
+ * *unstamps* whichever one was there. The second half is the one that matters:
+ * picking Dropbox and then going back to plain URL used to leave the stamp
+ * behind, so the file kept being fetched through Dropbox with nothing in the
+ * form saying so.
+ *
+ * Returns the location itself when there is nothing to change, so a caller can
+ * tell a real edit from a no-op by identity.
+ */
 export declare function addAccountToLocation(location: FileLocation, account?: BaseInternetAccountModel): FileLocation;

package/esm/ui/FileSelector/util.js

@@ -1,10 +1,27 @@
-import { isUriLocation } from "../../util/index.js";
+import { isUriLocation } from '../../util/index.js';
 export const MAX_LABEL_LENGTH = 5;
+// jbrowse-web keeps its URL params in the hash fragment XOR the query string
+// (the long/json share modes put every param in the hash, which is never sent to
+// the server and so can't trip the request-line limit), and its own loader reads
+// `adminKey` from whichever the URL uses. Reading only `search` here made the two
+// disagree on a hash-form URL: the root model is in admin mode, but the file
+// picker still offers "File", whose BlobLocation cannot be written into the
+// config.json the admin server saves.
+//
+// The hash/search rule must stay identical to jbrowse-web's canonical reader
+// (`useQueryParam.ts` `paramLocation`).
 export function isAdminMode() {
-    return (typeof window !== 'undefined' &&
-        new URLSearchParams(window.location.search).get('adminKey') !== null);
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const hash = window.location.hash.slice(1);
+    const params = new URLSearchParams(hash.includes('=') ? hash : window.location.search);
+    return params.get('adminKey') !== null;
 }
-export function shorten(str) {
+// Truncate a file/account label at the tail. Distinct from the core
+// `shorten`, which elides the MIDDLE of a long name to keep both ends legible
+// — here the leading characters are the identifying part.
+export function truncateLabel(str) {
     return str.length > MAX_LABEL_LENGTH
         ? `${str.slice(0, MAX_LABEL_LENGTH)}…`
         : str;
@@ -13,22 +30,122 @@ export function getAccountLabel(account) {
     const { toggleContents, name } = account;
     if (toggleContents) {
         return typeof toggleContents === 'string'
-            ? shorten(toggleContents)
+            ? truncateLabel(toggleContents)
             : toggleContents;
     }
-    return shorten(name);
+    return truncateLabel(name);
+}
+/**
+ * The toggles a selector offers, in the order it draws them — and so the set a
+ * selection has to come from.
+ *
+ * One list because three places used to answer this apart, and a selection none
+ * of the drawn buttons carries leaves the group with nothing pressed:
+ * `SourceTypeSelector` withheld File in admin mode while `getInitialSourceType`
+ * went on opening an empty slot on it, and a location whose `internetAccountId`
+ * names an account this host does not install opened on a toggle that was never
+ * drawn. `FileSelector` resolves against this rather than trusting either.
+ *
+ * No File toggle in admin mode: a BlobLocation cannot be written into the
+ * config.json the admin server saves.
+ */
+export function availableSourceTypes(accountIds) {
+    return [...(isAdminMode() ? [] : ['file']), 'url', ...accountIds];
 }
-export function getInitialSourceType(location) {
+// Which toggle a selector opens on. A form's empty slot is spelled as a
+// UriLocation with an empty uri, which isUriLocation rejects, so an untouched
+// field falls to `emptyDefault` rather than reading as a URL. A form that knows
+// how its user is working passes the answer: the add-genome pane's index inputs
+// sit directly under a box of pasted URLs, and offering a local file picker
+// there is a question already answered.
+//
+// What the location WANTS, which is not the same as what is on offer —
+// `availableSourceTypes` is the other half, and `FileSelector` is where the two
+// meet.
+export function getInitialSourceType(location, emptyDefault = 'file') {
     if (location &&
         'internetAccountId' in location &&
         location.internetAccountId) {
         return location.internetAccountId;
     }
-    return !location || isUriLocation(location) ? 'url' : 'file';
+    if (!location) {
+        return 'url';
+    }
+    return isUriLocation(location)
+        ? 'url'
+        : 'uri' in location
+            ? emptyDefault
+            : 'file';
 }
+/**
+ * The toggle `location` needs in order to be visible, or undefined when the one
+ * already showing can render it.
+ *
+ * `getInitialSourceType` answers this once, at mount, when a form's slot is
+ * usually still empty. This is the same question asked of a location that
+ * arrived later — the index a form found sitting beside the main file, say,
+ * which on desktop is a local path and would render as a blank URL box.
+ *
+ * Undefined for an empty slot (spelled as a UriLocation with no uri) as well as
+ * for a match: an emptied field says nothing about how the user wants to work,
+ * and switching the toggle out from under them as they clear a box is worse than
+ * leaving it.
+ */
+export function sourceTypeForLocation(location, current) {
+    if (!location) {
+        return undefined;
+    }
+    if (isUriLocation(location)) {
+        // 'file' is the only toggle that cannot show a URL; the account toggles
+        // render the same box, and one carrying a stamp is already on its own
+        const wanted = location.internetAccountId ?? 'url';
+        return current === 'file' ? wanted : undefined;
+    }
+    return 'uri' in location || current === 'file' ? undefined : 'file';
+}
+/**
+ * The directory containing `filePath`, for remembering where the user last
+ * picked a file. Undefined when there is no directory to remember.
+ *
+ * String surgery rather than `node:path` because this is renderer code that
+ * also builds for the web, and it has to read a Windows path from Electron
+ * either way. Which means keeping the separator: `idx` is the index of the last
+ * one, so slicing *before* it drops it, and `C:\reads.bam` — a file at the root
+ * of a data drive, which is where an external disk mounts — yielded `"C:"`.
+ * That is not the root; to Windows a drive letter with no separator means the
+ * current directory on that drive, so the dialog reopened wherever the process
+ * happened to be. Keep the separator when dropping it would leave a bare root
+ * (`C:\`, and `/` on POSIX).
+ */
+export function dirFromPath(filePath) {
+    const idx = Math.max(filePath.lastIndexOf('/'), filePath.lastIndexOf('\\'));
+    if (idx === -1) {
+        return undefined;
+    }
+    const dir = filePath.slice(0, idx);
+    // `C:` (drive-relative) or `` (posix root) — both need the separator back
+    return /^[a-zA-Z]:$/.test(dir) || dir === ''
+        ? filePath.slice(0, idx + 1)
+        : dir;
+}
+/**
+ * Stamps the selected account onto a URL location — and, given no account,
+ * *unstamps* whichever one was there. The second half is the one that matters:
+ * picking Dropbox and then going back to plain URL used to leave the stamp
+ * behind, so the file kept being fetched through Dropbox with nothing in the
+ * form saying so.
+ *
+ * Returns the location itself when there is nothing to change, so a caller can
+ * tell a real edit from a no-op by identity.
+ */
 export function addAccountToLocation(location, account) {
-    if (account && isUriLocation(location)) {
-        return { ...location, internetAccountId: account.internetAccountId };
+    if (!isUriLocation(location)) {
+        return location;
+    }
+    const internetAccountId = account?.internetAccountId;
+    if (location.internetAccountId === internetAccountId) {
+        return location;
     }
-    return location;
+    const { internetAccountId: _previous, ...rest } = location;
+    return internetAccountId ? { ...rest, internetAccountId } : rest;
 }

package/esm/ui/GpuFallbackButton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The "Use Canvas2D" remedy on a GPU error banner, for the MUI chrome.
+ *
+ * **Renders nothing when the error is not one it fixes**, which is what lets a
+ * call site pass it unconditionally as `extraAction` instead of repeating the
+ * predicate. Every place that repeated it is a place that could forget it, and
+ * two already had.
+ */
+export default function GpuFallbackButton({ error, onRetry, }: {
+    error: unknown;
+    onRetry: () => void;
+}): import("react").JSX.Element | null;

package/esm/ui/GpuFallbackButton.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Tooltip } from '@mui/material';
+import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from './gpuFallback.js';
+/**
+ * The "Use Canvas2D" remedy on a GPU error banner, for the MUI chrome.
+ *
+ * **Renders nothing when the error is not one it fixes**, which is what lets a
+ * call site pass it unconditionally as `extraAction` instead of repeating the
+ * predicate. Every place that repeated it is a place that could forget it, and
+ * two already had.
+ */
+export default function GpuFallbackButton({ error, onRetry, }) {
+    if (!shouldOfferGpuFallback(error)) {
+        return null;
+    }
+    return (_jsx(Tooltip, { title: GPU_FALLBACK_TOOLTIP, children: _jsx(Button, { "data-testid": "use_canvas2d_button", onClick: () => {
+                disableGpuRendering();
+                onRetry();
+            }, children: GPU_FALLBACK_LABEL }) }));
+}

package/esm/ui/HoverMenu.d.ts

@@ -1,4 +1,13 @@
-import * as React from 'react';
-import type { MenuProps } from '@mui/material';
-declare const HoverMenu: React.ForwardRefExoticComponent<Omit<MenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import type { PopoverOrigin } from '@mui/material';
+declare function HoverMenu({ open, anchorEl, onClose, onMouseEnter, paperRef, anchorOrigin, transformOrigin, zIndex, children, }: {
+    open: boolean;
+    anchorEl: HTMLElement | null;
+    onClose: () => void;
+    onMouseEnter?: () => void;
+    paperRef?: React.Ref<HTMLElement>;
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+    zIndex?: React.CSSProperties['zIndex'];
+    children: React.ReactNode;
+}): import("react").JSX.Element;
 export default HoverMenu;

package/esm/ui/HoverMenu.js

@@ -1,15 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
+//  this code adapted from material-ui-popup-state by Andy Edwards, MIT license
+//  https://github.com/jcoreio/material-ui-popup-state/blob/9dba66241a0c25b172c93ae7d9e45a9745f138e8/LICENSE.md
 import { Menu } from '@mui/material';
-const HoverMenu = React.forwardRef(function HoverMenu(props, ref) {
-    return (_jsx(Menu, { ...props, ref: ref, style: {
-            pointerEvents: 'none',
-            ...props.style,
-        }, slotProps: {
-            ...props.slotProps,
+// 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.
+//
+// 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
+// pass-through of the full MenuProps would let a caller quietly override them.
+// Two things a caller does set: `zIndex`, which is the ROOT menu's level (a
+// submenu that stays on MUI's default modal scale under a raised root ends up
+// beneath that root's viewport-spanning backdrop, which then eats its clicks),
+// 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: {
             paper: {
                 style: { pointerEvents: 'auto' },
+                onMouseEnter,
+                ref: paperRef,
             },
-        } }));
-});
+        }, 
+        // A submenu is portaled in the DOM but is still a React *descendant* of
+        // the parent menu's list, so React replays its key events into the parent
+        // MenuList's own arrow handler. That parent then moves focus to one of its
+        // rows, the submenu's focus trap yanks it back to the paper, and arrow
+        // navigation inside a submenu dies on its first row. The submenu's own
+        // MenuList sits below this root in the real DOM and has already handled
+        // the key by the time it gets here, so stopping it costs nothing.
+        onKeyDown: e => {
+            e.stopPropagation();
+        }, children: children }));
+}
 export default HoverMenu;

package/esm/ui/HoverTooltip.d.ts

@@ -0,0 +1,27 @@
+import type { MouseState } from './useMouseTracking.ts';
+import type React from 'react';
+/**
+ * `BaseTooltip` anchored to the chrome's pointer measurement, drawn only when
+ * there is both a hit and a pointer.
+ *
+ * Five display tooltips opened with the same three lines — read the hover, bail
+ * if either half is missing, mount `BaseTooltip` at
+ * `{ x: clientX, y: clientY }` — and the guard is the part worth single-sourcing
+ * rather than the markup: `mouseState` is `undefined` after a leave *and* on the
+ * first render after a terminal banner clears (`DisplayChromeBase` flushes the
+ * tracker for exactly that case), so a tooltip that checks only its hit paints
+ * at whatever coordinate the pointer last had.
+ *
+ * The body stays each display's own — a wiggle bin, a SNP and a genotype cell
+ * have nothing to share below this line.
+ *
+ * Deep-imported, never through the `@jbrowse/core/ui` barrel, for the reason
+ * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
+ * eager plugin-entry path.
+ */
+export default function HoverTooltip({ hit, mouseState, children, }: {
+    /** The display's hover. Nothing is drawn when it is absent. */
+    hit: unknown;
+    mouseState: MouseState | undefined;
+    children: React.ReactNode;
+}): React.JSX.Element | null;

package/esm/ui/HoverTooltip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseTooltip from './BaseTooltip.js';
+/**
+ * `BaseTooltip` anchored to the chrome's pointer measurement, drawn only when
+ * there is both a hit and a pointer.
+ *
+ * Five display tooltips opened with the same three lines — read the hover, bail
+ * if either half is missing, mount `BaseTooltip` at
+ * `{ x: clientX, y: clientY }` — and the guard is the part worth single-sourcing
+ * rather than the markup: `mouseState` is `undefined` after a leave *and* on the
+ * first render after a terminal banner clears (`DisplayChromeBase` flushes the
+ * tracker for exactly that case), so a tooltip that checks only its hit paints
+ * at whatever coordinate the pointer last had.
+ *
+ * The body stays each display's own — a wiggle bin, a SNP and a genotype cell
+ * have nothing to share below this line.
+ *
+ * Deep-imported, never through the `@jbrowse/core/ui` barrel, for the reason
+ * `BaseTooltip` is: it reaches @floating-ui (~266KB) and that barrel is on the
+ * eager plugin-entry path.
+ */
+export default function HoverTooltip({ hit, mouseState, children, }) {
+    return hit && mouseState ? (_jsx(BaseTooltip, { clientPoint: { x: mouseState.clientX, y: mouseState.clientY }, children: children })) : null;
+}

package/esm/ui/Icons.d.ts

@@ -1,5 +1,7 @@
 import type { SvgIconProps } from '@mui/material/SvgIcon';
-export declare function Indexing(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function TrackSelector(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function DNA(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
-export declare function Cable(props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+export { default as InfoIcon } from '@mui/icons-material/Info';
+export declare function Indexing(props: SvgIconProps): import("react").JSX.Element;
+export declare function TrackSelector(props: SvgIconProps): import("react").JSX.Element;
+export declare function DNA(props: SvgIconProps): import("react").JSX.Element;
+export declare function Highlighter(props: SvgIconProps): import("react").JSX.Element;
+export declare function Cable(props: SvgIconProps): import("react").JSX.Element;

package/esm/ui/Icons.js

@@ -1,14 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import SvgIcon from '@mui/material/SvgIcon';
+export { default as InfoIcon } from '@mui/icons-material/Info';
+// https://materialdesignicons.com/ text-search icon
 export function Indexing(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" }) }));
 }
+//  format-list-checkbox from https://materialdesignicons.com/
 export function TrackSelector(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" }) }));
 }
+//  dna from https://materialdesignicons.com/
 export function DNA(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" }) }));
 }
+// bx-highlight from https://boxicons.com/ (MIT License, Copyright (c) Aniket
+// Suvarna) — https://github.com/atisawd/boxicons/blob/master/svg/regular/bx-highlight.svg
+export function Highlighter(props) {
+    return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "m20.707 5.826-3.535-3.533a.999.999 0 0 0-1.408-.006L7.096 10.82a1.01 1.01 0 0 0-.273.488l-1.024 4.437L4 18h2.828l1.142-1.129 3.588-.828c.18-.042.345-.133.477-.262l8.667-8.535a1 1 0 0 0 .005-1.42zm-9.369 7.833-2.121-2.12 7.243-7.131 2.12 2.12-7.242 7.131zM4 20h16v2H4z" }) }));
+}
 export function Cable(props) {
     return (_jsx(SvgIcon, { ...props, children: _jsx("path", { d: "M20 5V4c0-.55-.45-1-1-1h-2c-.55 0-1 .45-1 1v1h-1v4c0 .55.45 1 1 1h1v7c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-2.21-1.79-4-4-4S5 4.79 5 7v7H4c-.55 0-1 .45-1 1v4h1v1c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-1h1v-4c0-.55-.45-1-1-1H7V7c0-1.1.9-2 2-2s2 .9 2 2v10c0 2.21 1.79 4 4 4s4-1.79 4-4v-7h1c.55 0 1-.45 1-1V5h-1z" }) }));
 }

package/esm/ui/InfoDialog.d.ts

@@ -0,0 +1,7 @@
+import type { Props as DialogComponentProps } from './Dialog.tsx';
+declare const InfoDialog: (props: Omit<DialogComponentProps, 'onClose'> & {
+    onClose: () => void;
+    closeText?: string;
+    actions?: React.ReactNode;
+}) => import("react").JSX.Element;
+export default InfoDialog;

package/esm/ui/InfoDialog.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent } from '@mui/material';
+import { observer } from 'mobx-react';
+import Dialog from './Dialog.js';
+// The read-only counterpart to SubmitDialog: content plus a single Close
+// action. Dialog on its own has no footer, so every informational dialog was
+// hand-rolling this one and picking its own button styling.
+const InfoDialog = observer(function InfoDialog(props) {
+    const { onClose, closeText = 'Close', actions, children, ...dialogProps } = props;
+    return (_jsxs(Dialog, { onClose: () => {
+            onClose();
+        }, ...dialogProps, children: [_jsx(DialogContent, { children: children }), _jsxs(DialogActions, { children: [actions, _jsx(Button, { variant: "contained", color: "primary", onClick: () => {
+                            onClose();
+                        }, children: closeText })] })] }));
+});
+export default InfoDialog;

package/esm/ui/InlineMenuControls.d.ts

@@ -0,0 +1,6 @@
+export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.ts';
+export declare function ResetToDefaultButton({ disabled, title, onClick, }: {
+    disabled: boolean;
+    title?: string;
+    onClick: () => void;
+}): import("react").JSX.Element;

package/esm/ui/InlineMenuControls.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components -- the shared row width belongs with these leaf menu-row primitives; no component state to fast-refresh */
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import { IconButton, Tooltip } from '@mui/material';
+// Shared width for inline track-menu control rows (the size sliders and the
+// wiggle resolution stepper), so the rows line up when they stack in one menu
+// and can't drift apart.
+export { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
+// Shared "reset to default" affordance for those rows. A compact icon button in
+// a span so its Tooltip still shows while disabled at the default. Kept in one
+// place so the icon/size/padding and the disabled-at-default behavior stay
+// identical across the sibling controls.
+export function ResetToDefaultButton({ disabled, title = 'Reset to default', onClick, }) {
+    return (_jsx(Tooltip, { title: title, children: _jsx("span", { children: _jsx(IconButton, { size: "small", sx: { p: 0.25 }, disabled: disabled, onClick: () => {
+                    onClick();
+                }, children: _jsx(RestartAltIcon, { fontSize: "small" }) }) }) }));
+}

package/esm/ui/JexlFilterDialog.d.ts

@@ -0,0 +1,23 @@
+import type { JexlFilterModel } from '../util/jexlFilters.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.
+ *
+ * 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.
+ */
+declare const JexlFilterDialog: ({ model, handleClose, examples, }: {
+    model: JexlFilterModel;
+    handleClose: () => void;
+    examples?: JexlFilterExample[];
+}) => import("react").JSX.Element;
+export default JexlFilterDialog;

package/esm/ui/JexlFilterDialog.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { getEnv } from '@jbrowse/mobx-state-tree';
+import { observer } from 'mobx-react';
+import { activeJexlFilters } from '../util/jexlFilters.js';
+import { ensureJexlPrefix, stringToJexlExpression, } from '../util/jexlStrings.js';
+import ExternalLink from './ExternalLink.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
+ * own list instead: the examples are the only place the dialog says what is
+ * readable off a feature, so a variant track showing `type=='gene'` is teaching
+ * the wrong vocabulary.
+ */
+const FEATURE_FILTER_EXAMPLES = [
+    {
+        code: "jexl:get(feature,'name')=='BRCA1'",
+        description: 'show only features where the name attribute is BRCA1',
+    },
+    {
+        code: "jexl:startsWith(get(feature,'name'),'PREFIX')",
+        description: "show only features where the string 'PREFIX' is the prefix of the feature name. endsWith also works",
+    },
+    {
+        code: "jexl:includes(get(feature,'name'),'PREFIX')",
+        description: "show only features where the string 'PREFIX' appears in the feature name",
+    },
+    {
+        code: "jexl:get(feature,'type')=='gene'",
+        description: 'show only gene type features in a GFF that has many other feature types',
+    },
+    {
+        code: "jexl:get(feature,'score') > 400",
+        description: 'show only features that have a score greater than 400',
+    },
+    {
+        code: "jexl:get(feature,'end') - get(feature,'start') < 1000000",
+        description: 'show only features with length less than 1Mbp',
+    },
+];
+/**
+ * Editor for a list of jexl feature filters (one per line), for any display
+ * implementing the two-tier {@link JexlFilterModel} contract.
+ *
+ * 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.
+ */
+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);
+            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);
+                } })] }));
+});
+export default JexlFilterDialog;

package/esm/ui/LabeledCheckbox.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export default function LabeledCheckbox({ checked, onChange, label, className, disabled, size, }: {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    size?: 'small' | 'medium';
+}): import("react").JSX.Element;

package/esm/ui/LabeledCheckbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, FormControlLabel } from '@mui/material';
+export default function LabeledCheckbox({ checked, onChange, label, className, disabled, size, }) {
+    return (_jsx(FormControlLabel, { className: className, disabled: disabled, control: _jsx(Checkbox, { size: size, checked: checked, onChange: event => {
+                onChange(event.target.checked);
+            } }), label: label }));
+}

package/esm/ui/LegendSwatchGlyph.d.ts

@@ -0,0 +1,7 @@
+import type { LegendSwatch } from './legendSpec.ts';
+export declare function LegendSwatchGlyph({ swatch, size, x, y, }: {
+    swatch: LegendSwatch;
+    size: number;
+    x?: number;
+    y?: number;
+}): import("react").JSX.Element;