@jbrowse/core 3.6.5 → 4.0.0

package/esm/rpc/methods/CoreGetSequence.js

@@ -0,0 +1,17 @@
+import { getAdapter } from "../../data_adapters/dataAdapterCache.js";
+import RpcMethodType from "../../pluggableElementTypes/RpcMethodType.js";
+import { renameRegionsIfNeeded } from "../../util/index.js";
+export default class CoreGetSequence extends RpcMethodType {
+    name = 'CoreGetSequence';
+    async serializeArguments(args, rpcDriver) {
+        const { rootModel } = this.pluginManager;
+        const assemblyManager = rootModel.session.assemblyManager;
+        const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args);
+        return super.serializeArguments(renamedArgs, rpcDriver);
+    }
+    async execute(args, rpcDriver) {
+        const { stopToken, sessionId, adapterConfig, region } = await this.deserializeArguments(args, rpcDriver);
+        const dataAdapter = (await getAdapter(this.pluginManager, sessionId, adapterConfig)).dataAdapter;
+        return dataAdapter.getSequence(region, { stopToken });
+    }
+}

package/esm/rpc/methods/CoreRender.d.ts

@@ -0,0 +1,14 @@
+import RpcMethodType from '../../pluggableElementTypes/RpcMethodType.ts';
+import type { RenderArgs, RenderArgsSerialized, RenderResults, ResultsSerialized } from './util.ts';
+export default class CoreRender extends RpcMethodType {
+    name: string;
+    serializeArguments(args: RenderArgs, rpcDriver: string): Promise<import("../../pluggableElementTypes/renderers/ServerSideRendererType.tsx").RenderArgsSerialized>;
+    executeDirect(args: RenderArgs): Promise<RenderResults | {
+        reactElement: import("react/jsx-runtime").JSX.Element | undefined;
+        html?: string;
+    }>;
+    execute(args: RenderArgsSerialized & {
+        stopToken?: string;
+    }, rpcDriver: string): Promise<ResultsSerialized>;
+    deserializeReturn(serializedReturn: RenderResults | ResultsSerialized, args: RenderArgs, rpcDriver: string): Promise<unknown>;
+}

package/esm/rpc/methods/CoreRender.js

@@ -0,0 +1,35 @@
+import { validateRendererType } from "./util.js";
+import RpcMethodType from "../../pluggableElementTypes/RpcMethodType.js";
+import { renameRegionsIfNeeded } from "../../util/index.js";
+export default class CoreRender extends RpcMethodType {
+    name = 'CoreRender';
+    async serializeArguments(args, rpcDriver) {
+        const { rootModel } = this.pluginManager;
+        const assemblyManager = rootModel.session.assemblyManager;
+        const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args);
+        const superArgs = (await super.serializeArguments(renamedArgs, rpcDriver));
+        return validateRendererType(args.rendererType, this.pluginManager.getRendererType(args.rendererType)).serializeArgsInClient(superArgs);
+    }
+    async executeDirect(args) {
+        const { rootModel } = this.pluginManager;
+        const assemblyManager = rootModel.session.assemblyManager;
+        const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args);
+        const { sessionId, rendererType } = renamedArgs;
+        if (!sessionId) {
+            throw new Error('must pass a unique session id');
+        }
+        return validateRendererType(rendererType, this.pluginManager.getRendererType(rendererType)).renderDirect(renamedArgs);
+    }
+    async execute(args, rpcDriver) {
+        const deserializedArgs = await this.deserializeArguments(args, rpcDriver);
+        const { sessionId, rendererType } = deserializedArgs;
+        if (!sessionId) {
+            throw new Error('must pass a unique session id');
+        }
+        return validateRendererType(rendererType, this.pluginManager.getRendererType(rendererType)).renderInWorker(deserializedArgs);
+    }
+    async deserializeReturn(serializedReturn, args, rpcDriver) {
+        const des = await super.deserializeReturn(serializedReturn, args, rpcDriver);
+        return validateRendererType(args.rendererType, this.pluginManager.getRendererType(args.rendererType)).deserializeResultsInClient(des, args);
+    }
+}

package/esm/rpc/methods/CoreSaveFeatureData.d.ts

@@ -0,0 +1,16 @@
+import RpcMethodType from '../../pluggableElementTypes/RpcMethodType.ts';
+import SimpleFeature from '../../util/simpleFeature.ts';
+import type { RenderArgs } from './util.ts';
+import type { Region } from '../../util/index.ts';
+import type { SimpleFeatureSerialized } from '../../util/simpleFeature.ts';
+export default class CoreGetFeatures extends RpcMethodType {
+    name: string;
+    deserializeReturn(feats: SimpleFeatureSerialized[], args: unknown, rpcDriver: string): Promise<SimpleFeature[]>;
+    serializeArguments(args: RenderArgs, rpcDriver: string): Promise<RenderArgs>;
+    execute(args: {
+        sessionId: string;
+        regions: Region[];
+        adapterConfig: Record<string, unknown>;
+        opts?: any;
+    }, rpcDriver: string): Promise<SimpleFeatureSerialized[]>;
+}

package/esm/rpc/methods/CoreSaveFeatureData.js

@@ -0,0 +1,32 @@
+import { firstValueFrom } from 'rxjs';
+import { toArray } from 'rxjs/operators';
+import { isFeatureAdapter } from "../../data_adapters/BaseAdapter/index.js";
+import { getAdapter } from "../../data_adapters/dataAdapterCache.js";
+import RpcMethodType from "../../pluggableElementTypes/RpcMethodType.js";
+import { renameRegionsIfNeeded } from "../../util/index.js";
+import SimpleFeature from "../../util/simpleFeature.js";
+export default class CoreGetFeatures extends RpcMethodType {
+    name = 'CoreGetFeatures';
+    async deserializeReturn(feats, args, rpcDriver) {
+        const superDeserialized = (await super.deserializeReturn(feats, args, rpcDriver));
+        return superDeserialized.map(feat => new SimpleFeature(feat));
+    }
+    async serializeArguments(args, rpcDriver) {
+        const { rootModel } = this.pluginManager;
+        const assemblyManager = rootModel.session.assemblyManager;
+        const renamedArgs = await renameRegionsIfNeeded(assemblyManager, args);
+        return super.serializeArguments(renamedArgs, rpcDriver);
+    }
+    async execute(args, rpcDriver) {
+        const pm = this.pluginManager;
+        const deserializedArgs = await this.deserializeArguments(args, rpcDriver);
+        const { sessionId, adapterConfig, regions, opts } = deserializedArgs;
+        const { dataAdapter } = await getAdapter(pm, sessionId, adapterConfig);
+        if (!isFeatureAdapter(dataAdapter)) {
+            throw new Error('Adapter does not support retrieving features');
+        }
+        const ret = dataAdapter.getFeaturesInMultipleRegions(regions, opts);
+        const r = await firstValueFrom(ret.pipe(toArray()));
+        return r.map(f => f.toJSON());
+    }
+}

package/esm/rpc/methods/util.d.ts

@@ -0,0 +1,15 @@
+import type { ServerSideRendererType } from '../../pluggableElementTypes/index.ts';
+import type { RenderArgs as ServerSideRenderArgs, RenderArgsSerialized as ServerSideRenderArgsSerialized } from '../../pluggableElementTypes/renderers/ServerSideRendererType.tsx';
+import type { Region } from '../../util/index.ts';
+export interface RenderArgs extends ServerSideRenderArgs {
+    adapterConfig: Record<string, unknown>;
+    rendererType: string;
+}
+export interface RenderArgsSerialized extends ServerSideRenderArgsSerialized {
+    assemblyName: string;
+    regions: Region[];
+    adapterConfig: Record<string, unknown>;
+    rendererType: string;
+}
+export declare function validateRendererType<T>(rendererType: string, RendererType: T): ServerSideRendererType;
+export { type RenderResults, type ResultsSerialized, } from '../../pluggableElementTypes/renderers/ServerSideRendererType.tsx';

package/esm/rpc/methods/util.js

@@ -0,0 +1,7 @@
+export function validateRendererType(rendererType, RendererType) {
+    if (!RendererType.ReactComponent) {
+        throw new Error(`renderer ${rendererType} has no ReactComponent, it may not be completely implemented yet`);
+    }
+    return RendererType;
+}
+export {} from "../../pluggableElementTypes/renderers/ServerSideRendererType.js";

package/esm/rpc/webWorkerRpcConfig.d.ts

@@ -0,0 +1,8 @@
+declare const WebWorkerRpcDriverConfigSchema: import("../configuration/configurationSchema.ts").ConfigurationSchemaType<{}, import("../configuration/configurationSchema.ts").ConfigurationSchemaOptions<import("../configuration/configurationSchema.ts").ConfigurationSchemaType<{
+    workerCount: {
+        type: string;
+        description: string;
+        defaultValue: number;
+    };
+}, import("../configuration/configurationSchema.ts").ConfigurationSchemaOptions<undefined, undefined>>, undefined>>;
+export default WebWorkerRpcDriverConfigSchema;

package/esm/rpc/webWorkerRpcConfig.js

@@ -0,0 +1,8 @@
+import BaseRpcDriverConfigSchema from "./baseRpcConfig.js";
+import { ConfigurationSchema } from "../configuration/index.js";
+function x() { }
+const WebWorkerRpcDriverConfigSchema = ConfigurationSchema('WebWorkerRpcDriver', {}, {
+    baseConfiguration: BaseRpcDriverConfigSchema,
+    explicitlyTyped: true,
+});
+export default WebWorkerRpcDriverConfigSchema;

package/esm/ui/AppLogo.d.ts

@@ -0,0 +1,7 @@
+import type { AnyConfigurationModel } from '../configuration/index.ts';
+declare const Logo: ({ session, }: {
+    session: {
+        configuration: AnyConfigurationModel;
+    };
+}) => import("react/jsx-runtime").JSX.Element;
+export default Logo;

package/esm/ui/AppLogo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { LogoFull } from "./Logo.js";
+import { readConfObject } from "../configuration/index.js";
+const Logo = observer(function Logo({ session, }) {
+    const { configuration } = session;
+    const logoPath = readConfObject(configuration, 'logoPath');
+    return logoPath?.uri ? (_jsx("img", { src: logoPath.uri, alt: "Custom logo" })) : (_jsx(LogoFull, { variant: "white" }));
+});
+export default Logo;

package/esm/ui/AssemblySelector.d.ts

@@ -0,0 +1,13 @@
+import type { AbstractSessionModel } from '../util/index.ts';
+import type { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
+declare const AssemblySelector: ({ session, onChange, label, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
+    session: AbstractSessionModel;
+    label?: string;
+    helperText?: string;
+    onChange: (arg: string) => void;
+    selected?: string;
+    localStorageKey?: string;
+    InputProps?: IIP;
+    TextFieldProps?: TFP;
+}) => import("react/jsx-runtime").JSX.Element;
+export default AssemblySelector;

package/esm/ui/AssemblySelector.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { useLocalStorage } from "../util/index.js";
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    importFormEntry: {
+        minWidth: 180,
+    },
+});
+const AssemblySelector = observer(function AssemblySelector({ session, onChange, label = 'Assembly', selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
+    const { classes } = useStyles();
+    const { assemblyNames, assemblyManager } = session;
+    const config = new URLSearchParams(window.location.search).get('config');
+    const [lastSelected, setLastSelected] = useLocalStorage(`lastAssembly-${[
+        window.location.host + window.location.pathname,
+        config,
+        localStorageKey,
+    ].join('-')}`, selected, typeof jest === 'undefined' && Boolean(localStorageKey));
+    const selection = assemblyNames.includes(lastSelected || '')
+        ? lastSelected
+        : selected;
+    useEffect(() => {
+        if (selection && selection !== selected) {
+            onChange(selection);
+        }
+    }, [selection, onChange, selected]);
+    const error = assemblyNames.length ? '' : 'No configured assemblies';
+    return (_jsx(TextField, { select: true, "data-testid": "assembly-selector-textfield", label: label, variant: "outlined", helperText: error || helperText, value: selection || '', onChange: event => {
+            setLastSelected(event.target.value);
+        }, error: !!error, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps, slotProps: {
+            input: InputProps,
+            htmlInput: {
+                'data-testid': 'assembly-selector',
+            },
+        }, children: assemblyNames.map(name => (_jsx(MenuItem, { value: name, children: assemblyManager.get(name)?.displayName || name }, name))) }));
+});
+export default AssemblySelector;

package/esm/ui/BaseTooltip.d.ts

@@ -0,0 +1,8 @@
+export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement, }: {
+    placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    clientPoint?: {
+        x: number;
+        y: number;
+    };
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/BaseTooltip.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { offset, useClientPoint, useFloating, useInteractions, } from '@floating-ui/react';
+import { Portal, alpha, useTheme } from '@mui/material';
+import { makeStyles } from "../util/tss-react/index.js";
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+const useStyles = makeStyles()(theme => ({
+    tooltip: {
+        position: 'absolute',
+        pointerEvents: 'none',
+        backgroundColor: alpha(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.fontSize,
+        lineHeight: `${round(14 / 10)}em`,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+    },
+}));
+export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'right', }) {
+    const theme = useTheme();
+    const popperTheme = theme.components?.MuiPopper;
+    const { classes } = useStyles();
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        strategy: 'fixed',
+        middleware: [offset(5)],
+    });
+    const clientPoint = useClientPoint(context, clientPointCoords);
+    const { getFloatingProps } = useInteractions([clientPoint]);
+    return (_jsx(Portal, { container: popperTheme?.defaultProps?.container, children: _jsx("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                visibility: floatingStyles.transform === 'translate(0px, 0px)'
+                    ? 'hidden'
+                    : undefined,
+                pointerEvents: 'none',
+            }, ...getFloatingProps(), children: children }) }));
+}

package/esm/ui/CascadingMenu.d.ts

@@ -0,0 +1,30 @@
+import type { MenuItemsGetter } from './MenuTypes.ts';
+export type { MenuItemsGetter } from './MenuTypes.ts';
+export default function CascadingMenu({ onMenuItemClick, closeAfterItemClick, menuItems, open, onClose, anchorEl, anchorOrigin, transformOrigin, anchorReference, anchorPosition, slotProps, marginThreshold, style, }: {
+    onMenuItemClick: (event: unknown, callback: () => void) => void;
+    closeAfterItemClick?: boolean;
+    menuItems: MenuItemsGetter;
+    open: boolean;
+    onClose: () => void;
+    anchorEl?: Element | null;
+    anchorOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    transformOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    anchorReference?: 'anchorEl' | 'anchorPosition' | 'none';
+    anchorPosition?: {
+        top: number;
+        left: number;
+    };
+    slotProps?: {
+        transition?: {
+            onExit?: () => void;
+        };
+    };
+    marginThreshold?: number | null;
+    style?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/CascadingMenu.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import { Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, } from '@mui/material';
+import CascadingMenuHelpIconButton from "./CascadingMenuHelpIconButton.js";
+import HoverMenu from "./HoverMenu.js";
+import { MenuItemEndDecoration } from "./MenuItems.js";
+function CascadingSubmenu({ title, Icon, inset, menuItems, onMenuItemClick, closeAfterItemClick, onCloseRoot, isOpen, onOpen, onClose, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    return (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { ref: setAnchorEl, onMouseOver: onOpen, onFocus: onOpen, onClick: onOpen, children: [Icon ? (_jsx(ListItemIcon, { children: _jsx(Icon, {}) })) : null, _jsx(ListItemText, { primary: title, inset: inset }), _jsx(ChevronRight, {})] }), _jsx(HoverMenu, { open: isOpen, anchorEl: anchorEl, onClose: onClose, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: _jsx(CascadingMenuList, { closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: menuItems, onCloseRoot: onCloseRoot }) })] }));
+}
+function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, onCloseRoot, }) {
+    const [openSubmenuIdx, setOpenSubmenuIdx] = useState();
+    const closeSubmenu = () => {
+        setOpenSubmenuIdx(undefined);
+    };
+    const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
+    const hasCheckboxOrRadioWithHelp = menuItems.some(m => (m.type === 'checkbox' || m.type === 'radio') &&
+        'helpText' in m &&
+        m.helpText);
+    const sortedItems = menuItems.toSorted((a, b) => (b.priority || 0) - (a.priority || 0));
+    return (_jsx(_Fragment, { children: sortedItems.map((item, idx) => {
+            if ('subMenu' in item) {
+                return (_jsx(CascadingSubmenu, { title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, closeAfterItemClick: closeAfterItemClick, onCloseRoot: onCloseRoot, isOpen: openSubmenuIdx === idx, onOpen: () => {
+                        setOpenSubmenuIdx(idx);
+                    }, onClose: closeSubmenu }, `subMenu-${item.label}-${idx}`));
+            }
+            if (item.type === 'divider') {
+                return _jsx(Divider, { component: "li" }, `divider-${idx}`);
+            }
+            if (item.type === 'subHeader') {
+                return (_jsx(ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`));
+            }
+            const actionItem = item;
+            const helpText = actionItem.helpText;
+            const isCheckOrRadio = actionItem.type === 'checkbox' || actionItem.type === 'radio';
+            return (_jsxs(MenuItem, { disabled: Boolean(actionItem.disabled), onClick: event => {
+                    if (closeAfterItemClick) {
+                        onCloseRoot();
+                    }
+                    onMenuItemClick(event, actionItem.onClick);
+                }, onMouseOver: closeSubmenu, children: [actionItem.icon ? (_jsx(ListItemIcon, { children: _jsx(actionItem.icon, {}) })) : null, _jsx(ListItemText, { primary: actionItem.label, secondary: actionItem.subLabel, inset: hasIcon && !actionItem.icon }), _jsx("div", { style: { flexGrow: 1, minWidth: 10 } }), isCheckOrRadio ? (_jsx(MenuItemEndDecoration, { type: actionItem.type, checked: actionItem.checked, disabled: actionItem.disabled })) : null, helpText ? (_jsx(CascadingMenuHelpIconButton, { helpText: helpText, label: actionItem.label })) : isCheckOrRadio && hasCheckboxOrRadioWithHelp ? (_jsx("div", { style: { marginLeft: 4, padding: 4, width: 28, height: 28 } })) : null] }, `${actionItem.label}-${idx}`));
+        }) }));
+}
+export default function CascadingMenu({ onMenuItemClick, closeAfterItemClick = true, menuItems, open, onClose, anchorEl, anchorOrigin, transformOrigin, anchorReference, anchorPosition, slotProps, marginThreshold, style, }) {
+    const items = Array.isArray(menuItems) ? menuItems : menuItems();
+    return (_jsx(Menu, { anchorEl: anchorEl, open: open, onClose: onClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, anchorReference: anchorReference, anchorPosition: anchorPosition, slotProps: slotProps, marginThreshold: marginThreshold ?? undefined, style: style, children: _jsx(CascadingMenuList, { menuItems: items, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, onCloseRoot: onClose }) }));
+}

package/esm/ui/CascadingMenuButton.d.ts

@@ -0,0 +1,26 @@
+import type { MenuItemsGetter } from './CascadingMenu.tsx';
+declare function CascadingMenuButton({ children, menuItems, closeAfterItemClick, stopPropagation, disabled, setOpen, ButtonComponent, onClick: onClickExtra, anchorOrigin, transformOrigin, marginThreshold, ...rest }: {
+    children?: React.ReactNode;
+    menuItems: MenuItemsGetter;
+    closeAfterItemClick?: boolean;
+    stopPropagation?: boolean;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    setOpen?: (arg: boolean) => void;
+    ButtonComponent?: React.FC<{
+        onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        disabled?: boolean;
+        children?: React.ReactNode;
+    }>;
+    anchorOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    transformOrigin?: {
+        vertical: 'top' | 'center' | 'bottom';
+        horizontal: 'left' | 'center' | 'right';
+    };
+    marginThreshold?: number | null;
+    [key: string]: unknown;
+}): import("react/jsx-runtime").JSX.Element;
+export default CascadingMenuButton;

package/esm/ui/CascadingMenuButton.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { IconButton } from '@mui/material';
+import CascadingMenu from "./CascadingMenu.js";
+function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, disabled, setOpen, ButtonComponent = IconButton, onClick: onClickExtra, anchorOrigin, transformOrigin, marginThreshold, ...rest }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    useEffect(() => {
+        setOpen?.(open);
+    }, [open, setOpen]);
+    const isDisabled = disabled ?? (Array.isArray(menuItems) && menuItems.length === 0);
+    return (_jsxs(_Fragment, { children: [_jsx(ButtonComponent, { onClick: event => {
+                    if (stopPropagation) {
+                        event.stopPropagation();
+                    }
+                    setAnchorEl(event.currentTarget);
+                    onClickExtra?.(event);
+                }, ...rest, disabled: isDisabled, children: children }), open ? (_jsx(CascadingMenu, { open: open, onClose: () => {
+                    setAnchorEl(null);
+                }, anchorEl: anchorEl, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, marginThreshold: marginThreshold, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: (_, callback) => {
+                    callback();
+                } })) : null] }));
+}
+export default CascadingMenuButton;

package/esm/ui/CascadingMenuHelpDialog.d.ts

@@ -0,0 +1,5 @@
+export default function CascadingMenuHelpDialog({ onClose, helpText, label, }: {
+    onClose: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    helpText: React.ReactNode;
+    label?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/CascadingMenuHelpDialog.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DialogContent } from '@mui/material';
+import Dialog from "./Dialog.js";
+export default function CascadingMenuHelpDialog({ onClose, helpText, label, }) {
+    return (_jsx(Dialog, { open: true, onClose: onClose, title: "Help", titleNode: label ? _jsxs(_Fragment, { children: ["Help: ", label] }) : undefined, onClick: e => {
+            e.stopPropagation();
+        }, onMouseDown: e => {
+            e.stopPropagation();
+        }, children: _jsx(DialogContent, { children: helpText }) }));
+}

package/esm/ui/CascadingMenuHelpIconButton.d.ts

@@ -0,0 +1,5 @@
+import type React from 'react';
+export default function CascadingMenuHelpIconButton({ helpText, label, }: {
+    helpText: string;
+    label?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/CascadingMenuHelpIconButton.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, useState } from 'react';
+import HelpOutline from '@mui/icons-material/HelpOutline';
+import { IconButton } from '@mui/material';
+import CascadingMenuHelpDialog from "./CascadingMenuHelpDialog.js";
+export default function CascadingMenuHelpIconButton({ helpText, label, }) {
+    const [helpDialogOpen, setHelpDialogOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: event => {
+                    event.stopPropagation();
+                    setHelpDialogOpen(true);
+                }, style: { marginLeft: 4, padding: 4 }, children: _jsx(HelpOutline, { fontSize: "small" }) }), helpDialogOpen ? (_jsxs(Suspense, { fallback: null, children: [_jsx(CascadingMenuHelpDialog, { helpText: helpText, label: label, onClose: event => {
+                            event.stopPropagation();
+                            setHelpDialogOpen(false);
+                        } }), ' '] })) : null] }));
+}

package/esm/ui/ColorPicker.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { colord } from '@jbrowse/core/util/colord';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { MenuItem, Popover, Select, TextField } from '@mui/material';
+import * as paletteColors from "./colors.js";
+import { RgbaStringColorPicker } from "./react-colorful.js";
+import { useDebounce, useLocalStorage } from "../util/index.js";
+const useStyles = makeStyles()({
+    picker: { position: 'relative' },
+    swatches: {
+        display: 'flex',
+        padding: 12,
+        flexWrap: 'wrap',
+    },
+    swatch: {
+        width: 24,
+        height: 24,
+        margin: 4,
+        border: 'none',
+        padding: 0,
+        cursor: 'pointer',
+        outline: 'none',
+    },
+});
+export const PopoverPicker = ({ color, onChange, }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { classes } = useStyles();
+    return (_jsxs("div", { className: classes.picker, children: [_jsx("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
+                    setAnchorEl(event.currentTarget);
+                } }), _jsx(ColorPopover, { anchorEl: anchorEl, onClose: () => {
+                    setAnchorEl(null);
+                }, color: color, onChange: onChange })] }));
+};
+export function ColorPopover({ anchorEl, onChange, onClose, color, }) {
+    return (_jsx(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: _jsx(ColorPicker, { color: color, onChange: onChange }) }));
+}
+export function ColorPicker({ onChange, color, }) {
+    const { classes } = useStyles();
+    const [val, setVal] = useLocalStorage('colorPickerPalette', 'set1');
+    const presetColors = paletteColors[val];
+    const palettes = Object.keys(paletteColors);
+    const [text, setText] = useState(color);
+    const rgb = colord(color).toRgbString();
+    const rgbDebounced = useDebounce(rgb, 1000);
+    const handleChange = (val) => {
+        setText(val);
+        try {
+            onChange(colord(val).toRgbString());
+        }
+        catch (e) { }
+    };
+    return (_jsxs("div", { style: { display: 'flex', padding: 10 }, children: [_jsx("div", { style: { width: 200, margin: 5 }, children: _jsx(RgbaStringColorPicker, { color: rgbDebounced, onChange: handleChange }) }), _jsxs("div", { style: { width: 200, margin: 5 }, children: [_jsx(Select, { value: val, onChange: event => {
+                            const pal = event.target.value;
+                            setVal(pal);
+                        }, children: palettes.map(p => (_jsx(MenuItem, { value: p, children: p }, p))) }), _jsx("div", { className: classes.swatches, children: presetColors.map((presetColor, idx) => (_jsx("button", { type: "button", className: classes.swatch, style: { background: presetColor }, onClick: () => {
+                                handleChange(presetColor);
+                            } }, `${presetColor}-${idx}`))) }), _jsx(TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
+                            handleChange(event.target.value);
+                        } })] })] }));
+}
+export default PopoverPicker;

package/esm/ui/ConfirmDialog.d.ts

@@ -0,0 +1,10 @@
+import type { DialogProps } from '@mui/material';
+interface Props extends DialogProps {
+    header?: React.ReactNode;
+    onCancel: () => void;
+    onSubmit: () => void;
+    cancelText?: string;
+    submitText?: string;
+}
+declare const ConfirmDialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default ConfirmDialog;

package/esm/ui/ConfirmDialog.js

@@ -0,0 +1,13 @@
+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";
+const ConfirmDialog = observer(function ConfirmDialog(props) {
+    const { onSubmit, onCancel, cancelText = 'Cancel', submitText = 'OK', children, } = props;
+    return (_jsxs(Dialog, { onClose: onCancel, ...props, children: [_jsx(DialogContent, { children: children }), _jsxs(DialogActions, { children: [_jsx(Button, { color: "secondary", variant: "contained", onClick: () => {
+                            onCancel();
+                        }, children: cancelText }), _jsx(Button, { color: "primary", variant: "contained", onClick: () => {
+                            onSubmit();
+                        }, children: submitText })] })] }));
+});
+export default ConfirmDialog;

package/esm/ui/DataGridFlexContainer.d.ts

@@ -0,0 +1,5 @@
+import type { CSSProperties } from 'react';
+export default function DataGridFlexContainer({ children, style, }: {
+    children: React.ReactNode;
+    style?: CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/ui/DataGridFlexContainer.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()({
+    flexContainer: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+});
+export default function DataGridFlexContainer({ children, style, }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: classes.flexContainer, style: style, children: children }));
+}

package/esm/ui/Dialog.d.ts

@@ -0,0 +1,7 @@
+import type { DialogProps } from '@mui/material';
+export interface Props extends DialogProps {
+    header?: React.ReactNode;
+    titleNode?: React.ReactNode;
+}
+declare const Dialog: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default Dialog;

package/esm/ui/Dialog.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog as MUIDialog, DialogTitle, Divider, IconButton, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { ErrorBoundary } from "./ErrorBoundary.js";
+import ErrorMessage from "./ErrorMessage.js";
+import SanitizedHTML from "./SanitizedHTML.js";
+import { makeStyles } from "../util/tss-react/index.js";
+const useStyles = makeStyles()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+    errorBox: {
+        width: 800,
+        margin: 40,
+    },
+}));
+function DialogError({ error }) {
+    const { classes } = useStyles();
+    return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorMessage, { error: error }) }));
+}
+const Dialog = observer(function Dialog(props) {
+    const { classes } = useStyles();
+    const { titleNode, ...rest } = props;
+    const { title, header, children, onClose } = rest;
+    const theme = useTheme();
+    return (_jsx(MUIDialog, { ...rest, children: _jsxs(ScopedCssBaseline, { children: [isValidElement(header) ? (header) : (_jsxs(DialogTitle, { children: [titleNode || _jsx(SanitizedHTML, { html: title || '' }), onClose ? (_jsx(IconButton, { className: classes.closeButton, onClick: event => {
+                                onClose(event, 'backdropClick');
+                            }, children: _jsx(CloseIcon, {}) })) : null] })), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: DialogError, children: _jsx(ThemeProvider, { theme: createTheme(theme, {
+                            components: {
+                                MuiInputBase: {
+                                    styleOverrides: {
+                                        input: {
+                                            boxSizing: 'content-box!important',
+                                        },
+                                    },
+                                },
+                            },
+                        }), children: children }) })] }) }));
+});
+export default Dialog;