@jbrowse/core 5.0.0-beta.13 → 5.0.0-beta.14

package/esm/ui/CascadingMenuHelpIconButton.d.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
-export declare function CascadingMenuHelpIconSpacer(): React.JSX.Element;
-export default function CascadingMenuHelpIconButton({ helpText, label, }: {
+export declare const CascadingMenuHelpIconSpacer: () => React.JSX.Element;
+declare const CascadingMenuHelpIconButton: ({ helpText, label, }: {
     helpText: string;
     label?: React.ReactNode;
-}): React.JSX.Element;
+}) => React.JSX.Element;
+export default CascadingMenuHelpIconButton;

package/esm/ui/CascadingMenuHelpIconButton.js

@@ -2,17 +2,20 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState } from 'react';
 import HelpOutlined from '@mui/icons-material/HelpOutlined';
 import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
 import CascadingMenuHelpDialog from './CascadingMenuHelpDialog.js';
 const buttonStyle = { marginLeft: 4, padding: 4 };
 // Invisible button that reserves the exact same footprint as the help icon, so
 // rows without help text keep their end decoration (radio/checkbox) aligned
 // with rows that have one
-export function CascadingMenuHelpIconSpacer() {
+export const CascadingMenuHelpIconSpacer = observer(function CascadingMenuHelpIconSpacer() {
     return (_jsx(IconButton, { size: "small", disabled: true, style: { ...buttonStyle, visibility: 'hidden' }, children: _jsx(HelpOutlined, { fontSize: "small" }) }));
-}
-export default function CascadingMenuHelpIconButton({ helpText, label, }) {
+});
+const CascadingMenuHelpIconButton = observer(function CascadingMenuHelpIconButton({ helpText, label, }) {
     const [helpDialogOpen, setHelpDialogOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", "aria-label": typeof label === 'string' ? `Help for ${label}` : 'Help for this item', onClick: event => {
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", "aria-label": typeof label === 'string'
+                    ? `Help for ${label}`
+                    : 'Help for this item', onClick: event => {
                     event.stopPropagation();
                     setHelpDialogOpen(true);
                 }, style: buttonStyle, children: _jsx(HelpOutlined, { fontSize: "small" }) }), helpDialogOpen ? (_jsx(CascadingMenuHelpDialog, { helpText: helpText, label: label, 
@@ -21,4 +24,5 @@ export default function CascadingMenuHelpIconButton({ helpText, label, }) {
                 onClose: () => {
                     setHelpDialogOpen(false);
                 } })) : null] }));
-}
+});
+export default CascadingMenuHelpIconButton;

package/esm/ui/ColorPicker.d.ts

@@ -1,12 +1,13 @@
-export declare function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }: {
+export declare const ColorPopover: ({ anchorEl, onChange, onClose, color, presetAlpha, }: {
     color: string;
     anchorEl: HTMLElement | null;
     onChange: (val: string) => void;
     onClose: () => void;
     presetAlpha?: number;
-}): import("react").JSX.Element;
-export default function ColorPicker({ onChange, color, presetAlpha, }: {
+}) => import("react").JSX.Element;
+declare const ColorPicker: ({ onChange, color, presetAlpha, }: {
     color: string;
     onChange: (val: string) => void;
     presetAlpha?: number;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ColorPicker;

package/esm/ui/ColorPicker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { MenuItem, Popover, Select, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
 import { colord } from '../util/colord.js';
 import { useDebounce, useLocalStorage } from '../util/hooks.js';
 import { makeStyles } from '../util/tss-react/index.js';
@@ -30,10 +31,10 @@ const palettes = Object.keys(paletteColors);
 function isPaletteType(s) {
     return Object.hasOwn(paletteColors, s);
 }
-export function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }) {
+export const ColorPopover = observer(function ColorPopover({ anchorEl, onChange, onClose, color, presetAlpha, }) {
     return (_jsx(Popover, { open: !!anchorEl, anchorEl: anchorEl, onClose: onClose, children: _jsx(ColorPicker, { color: color, onChange: onChange, presetAlpha: presetAlpha }) }));
-}
-export default function ColorPicker({ onChange, color, presetAlpha, }) {
+});
+const ColorPicker = observer(function ColorPicker({ onChange, color, presetAlpha, }) {
     const { classes } = useStyles();
     const [storedPalette, setStoredPalette] = useLocalStorage('colorPickerPalette', 'set1');
     // a stale localStorage value (e.g. a palette since renamed/removed) would
@@ -56,4 +57,5 @@ export default function ColorPicker({ onChange, color, presetAlpha, }) {
                             } }, `${presetColor}-${idx}`))) }), _jsx(TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
                             handleChange(event.target.value);
                         } })] })] }));
-}
+});
+export default ColorPicker;

package/esm/ui/ContextMenu.d.ts

@@ -22,7 +22,7 @@ export interface ContextMenuAnchor {
  *
  * Its events do not stop at the portal — React bubbles them through the
  * component tree to whatever rendered the menu, which on a display is the
- * element that hit-tests the pointer. `DisplayStatusChromeBase` is where that
+ * element that hit-tests the pointer. `DisplayChromeBase` is where that
  * element refuses the events that did not happen over it, for every portalled
  * overlay rather than for menus alone.
  *

package/esm/ui/ContextMenu.js

@@ -20,7 +20,7 @@ const DEFAULT_OFFSET = { x: 12, y: 0 };
  *
  * Its events do not stop at the portal — React bubbles them through the
  * component tree to whatever rendered the menu, which on a display is the
- * element that hit-tests the pointer. `DisplayStatusChromeBase` is where that
+ * element that hit-tests the pointer. `DisplayChromeBase` is where that
  * element refuses the events that did not happen over it, for every portalled
  * overlay rather than for menus alone.
  *

package/esm/ui/CopyToClipboardButton.d.ts

@@ -4,7 +4,8 @@ import type { ButtonProps } from '@mui/material';
  * `copiedLabel` as feedback. `value` may be a function so callers can defer
  * computing large strings (e.g. JSON.stringify) until the click happens.
  */
-export default function CopyToClipboardButton({ value, children, copiedLabel, ...rest }: {
+declare const CopyToClipboardButton: ({ value, children, copiedLabel, ...rest }: {
     value: string | (() => string);
     copiedLabel?: string;
-} & Omit<ButtonProps, 'value'>): import("react").JSX.Element;
+} & Omit<ButtonProps, 'value'>) => import("react").JSX.Element;
+export default CopyToClipboardButton;

package/esm/ui/CopyToClipboardButton.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import { useCopyToClipboard } from './useCopyToClipboard.js';
 /**
  * A Button that copies `value` to the clipboard and briefly swaps its label to
  * `copiedLabel` as feedback. `value` may be a function so callers can defer
  * computing large strings (e.g. JSON.stringify) until the click happens.
  */
-export default function CopyToClipboardButton({ value, children, copiedLabel = 'Copied to clipboard!', ...rest }) {
+const CopyToClipboardButton = observer(function CopyToClipboardButton({ value, children, copiedLabel = 'Copied to clipboard!', ...rest }) {
     const { copied, copy } = useCopyToClipboard();
     return (_jsx(Button, { ...rest, onClick: () => {
             void copy(typeof value === 'function' ? value() : value);
         }, children: copied ? copiedLabel : children }));
-}
+});
+export default CopyToClipboardButton;

package/esm/ui/Crosshairs.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Crosshairs = ({ width, height, mouseX, mouseY, top = 0, zIndex, 
+import { observer } from 'mobx-react';
+const Crosshairs = observer(function Crosshairs({ width, height, mouseX, mouseY, top = 0, zIndex, 
 // The vertical (genomic-position) guide is dropped when the cursor is left of
 // this, e.g. over a tree sidebar where it has no meaning and clutters the
 // resize handle. The horizontal row guide is kept.
-minLeft = 0, }) => (_jsxs("svg", { style: {
-        position: 'absolute',
-        top,
-        left: 0,
-        width,
-        height,
-        pointerEvents: 'none',
-        zIndex,
-    }, children: [mouseY === undefined ? null : (_jsx("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "currentColor" })), mouseX >= minLeft ? (_jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "currentColor" })) : null] }));
+minLeft = 0, }) {
+    return (_jsxs("svg", { style: {
+            position: 'absolute',
+            top,
+            left: 0,
+            width,
+            height,
+            pointerEvents: 'none',
+            zIndex,
+        }, children: [mouseY === undefined ? null : (_jsx("line", { x1: 0, x2: width, y1: mouseY, y2: mouseY, stroke: "currentColor" })), mouseX >= minLeft ? (_jsx("line", { x1: mouseX, x2: mouseX, y1: 0, y2: height, stroke: "currentColor" })) : null] }));
+});
 export default Crosshairs;

package/esm/ui/DOMPurifySanitizedHTML.d.ts

@@ -1,4 +1,5 @@
-export default function DOMPurifySanitizedHTML({ value, className, }: {
+declare const DOMPurifySanitizedHTML: ({ value, className, }: {
     value: string;
     className?: string;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DOMPurifySanitizedHTML;

package/esm/ui/DOMPurifySanitizedHTML.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLayoutEffect, useRef } from 'react';
 import dompurify from 'dompurify';
+import { observer } from 'mobx-react';
 import { rewriteExternalAnchors } from './rewriteExternalAnchors.js';
-export default function DOMPurifySanitizedHTML({ value, className, }) {
+const DOMPurifySanitizedHTML = observer(function DOMPurifySanitizedHTML({ value, className, }) {
     const spanRef = useRef(null);
     useLayoutEffect(() => {
         const el = spanRef.current;
@@ -13,4 +14,5 @@ export default function DOMPurifySanitizedHTML({ value, className, }) {
     return (_jsx("span", { ref: spanRef, className: className, 
         // eslint-disable-next-line @eslint-react/dom-no-dangerously-set-innerhtml
         dangerouslySetInnerHTML: { __html: dompurify.sanitize(value) } }));
-}
+});
+export default DOMPurifySanitizedHTML;

package/esm/ui/DataGridFlexContainer.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-export default function DataGridFlexContainer({ children, className, style, }: {
+declare const DataGridFlexContainer: ({ children, className, style, }: {
     children: React.ReactNode;
     /**
      * merged with the flex-column base. A caller that wants the grid to FILL its
@@ -9,4 +9,5 @@ export default function DataGridFlexContainer({ children, className, style, }: {
      */
     className?: string;
     style?: CSSProperties;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DataGridFlexContainer;

package/esm/ui/DataGridFlexContainer.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { cx, makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()({
     flexContainer: {
@@ -7,7 +8,8 @@ const useStyles = makeStyles()({
     },
 });
 // https://mui.com/x/react-data-grid/layout/#flex-parent-container
-export default function DataGridFlexContainer({ children, className, style, }) {
+const DataGridFlexContainer = observer(function DataGridFlexContainer({ children, className, style, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: cx(classes.flexContainer, className), style: style, children: children }));
-}
+});
+export default DataGridFlexContainer;

package/esm/ui/Dialog.d.ts

@@ -6,5 +6,5 @@ export interface Props extends Omit<DialogProps, 'onClose'> {
         bivarianceHack(event: object, reason: 'backdropClick' | 'escapeKeyDown' | 'closeButtonClick'): void;
     }['bivarianceHack'] | undefined;
 }
-declare function Dialog(props: Props): import("react").JSX.Element;
+declare const Dialog: (props: Props) => import("react").JSX.Element;
 export default Dialog;

package/esm/ui/Dialog.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { DialogTitle, Divider, IconButton, Dialog as MUIDialog, ScopedCssBaseline, ThemeProvider, createTheme, useTheme, } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorBanner from './ErrorBanner.js';
 import { ErrorBoundary } from './ErrorBoundary.js';
@@ -18,11 +19,11 @@ const useStyles = makeStyles()(theme => ({
         margin: theme.spacing(5),
     },
 }));
-function DialogError({ error }) {
+const DialogError = observer(function DialogError({ error, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.errorBox, children: _jsx(ErrorBanner, { error: error }) }));
-}
-function Dialog(props) {
+});
+const Dialog = observer(function Dialog(props) {
     const { classes } = useStyles();
     const { titleNode, header, title, ...rest } = props;
     const { children, onClose } = rest;
@@ -49,5 +50,5 @@ function Dialog(props) {
                         , { "data-testid": "dialog-close", className: classes.closeButton, onClick: event => {
                                 onClose(event, 'closeButtonClick');
                             }, children: _jsx(CloseIcon, {}) })) : null] })), _jsx(Divider, {}), _jsx(ErrorBoundary, { FallbackComponent: DialogError, children: _jsx(ThemeProvider, { theme: dialogTheme, children: children }) })] }) }));
-}
+});
 export default Dialog;

package/esm/ui/DropDownMenu.js

@@ -15,10 +15,10 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-function ButtonComponent(props) {
+const ButtonComponent = observer(function ButtonComponent(props) {
     const { classes } = useStyles();
     return (_jsx(Button, { ...props, className: classes.buttonRoot, children: props.children }));
-}
+});
 const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, onMenuItemClick, }) {
     return (_jsxs(CascadingMenuButton, { menuItems: menuItems, onMenuItemClick: onMenuItemClick, color: "inherit", ButtonComponent: ButtonComponent, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
 });

package/esm/ui/EditableTypography.d.ts

@@ -9,5 +9,5 @@ interface Props {
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
     ref?: Ref<HTMLDivElement>;
 }
-declare function EditableTypography(props: Props): import("react").JSX.Element;
+declare const EditableTypography: (props: Props) => import("react").JSX.Element;
 export default EditableTypography;

package/esm/ui/EditableTypography.js

@@ -4,6 +4,7 @@ import { useRef, useState } from 'react';
 // that exact string. See the note in `util/hooks.ts`.
 import useMeasure from '@jbrowse/core/util/useMeasure';
 import { InputBase, Typography, useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
     typography: {
@@ -21,7 +22,7 @@ const useStyles = makeStyles()(theme => ({
         borderWidth: 2,
     },
 }));
-function EditableTypography(props) {
+const EditableTypography = observer(function EditableTypography(props) {
     const { value, setValue, variant, ref, classes: overrides, ...other } = props;
     const [ref2, { width }] = useMeasure('width');
     const [editedValue, setEditedValue] = useState();
@@ -64,5 +65,5 @@ function EditableTypography(props) {
                     }
                     setEditedValue(undefined);
                 } })] }));
-}
+});
 export default EditableTypography;

package/esm/ui/ErrorActions.d.ts

@@ -11,7 +11,7 @@ import type { ReactNode } from 'react';
  * the environment block and the prefilled issue link — the whole of what that
  * dialog is for — from anyone whose failure arrived as a string.
  */
-export default function ErrorActions({ error, onRetry, extraAction, color, }: {
+declare const ErrorActions: ({ error, onRetry, extraAction, color, }: {
     error: unknown;
     /** omitted by a presentation with nothing to retry */
     onRetry?: () => void;
@@ -21,4 +21,5 @@ export default function ErrorActions({ error, onRetry, extraAction, color, }: {
      */
     extraAction?: ReactNode;
     color?: IconButtonProps['color'];
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorActions;

package/esm/ui/ErrorActions.js

@@ -1,6 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import StackTraceButton from './StackTraceButton.js';
 /**
  * What both error presentations offer, in one order: the remedy specific to
@@ -13,8 +14,9 @@ import StackTraceButton from './StackTraceButton.js';
  * the environment block and the prefilled issue link — the whole of what that
  * dialog is for — from anyone whose failure arrived as a string.
  */
-export default function ErrorActions({ error, onRetry, extraAction, color, }) {
+const ErrorActions = observer(function ErrorActions({ error, onRetry, extraAction, color, }) {
     return (_jsxs(_Fragment, { children: [extraAction, _jsx(StackTraceButton, { error: error, color: color }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
                         onRetry();
                     }, color: color, children: _jsx(RefreshIcon, {}) }) })) : null] }));
-}
+});
+export default ErrorActions;

package/esm/ui/ErrorBanner.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-declare function ErrorBanner({ error, onReset, extraAction, }: {
+declare const ErrorBanner: ({ error, onReset, extraAction, }: {
     error: unknown;
     onReset?: () => void;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
 export default ErrorBanner;

package/esm/ui/ErrorBanner.js

@@ -1,4 +1,5 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorActions from './ErrorActions.js';
 import RedErrorMessageBox from './RedErrorMessageBox.js';
@@ -22,7 +23,7 @@ const useStyles = makeStyles()(theme => ({
         marginLeft: 100,
     },
 }));
-function ErrorBanner({ error, onReset, extraAction, }) {
+const ErrorBanner = observer(function ErrorBanner({ error, onReset, extraAction, }) {
     const { classes } = useStyles();
     const errorText = `${error}`;
     // trim "expected an instance of ..." tail — still generated by MST for
@@ -31,5 +32,5 @@ function ErrorBanner({ error, onReset, extraAction, }) {
     const displayText = instanceIdx === -1 ? errorText : errorText.slice(0, instanceIdx);
     const { snapshotValue, message } = parseError(errorText);
     return (_jsxs(RedErrorMessageBox, { children: [displayText.slice(0, 10000), _jsx("div", { className: classes.iconFloat, children: _jsx(ErrorActions, { error: error, onRetry: onReset, extraAction: extraAction, color: "primary" }) }), snapshotValue !== undefined ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.message, children: message }), _jsx("pre", { className: classes.bg, children: JSON.stringify(snapshotValue, null, 2) })] })) : null] }));
-}
+});
 export default ErrorBanner;

package/esm/ui/ErrorBar.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
-export default function ErrorBar({ error, onRetry, extraAction, }: {
+declare const ErrorBar: ({ error, onRetry, extraAction, }: {
     error: unknown;
     onRetry: () => void;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorBar;

package/esm/ui/ErrorBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Alert, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ErrorActions from './ErrorActions.js';
 const useStyles = makeStyles()({
@@ -12,7 +13,7 @@ const useStyles = makeStyles()({
         userSelect: 'text',
     },
 });
-export default function ErrorBar({ error, onRetry, extraAction, }) {
+const ErrorBar = observer(function ErrorBar({ error, onRetry, extraAction, }) {
     const { classes } = useStyles();
     const message = `${error}`;
     return (_jsx("div", { style: {
@@ -32,4 +33,5 @@ export default function ErrorBar({ error, onRetry, extraAction, }) {
         }, onClick: e => {
             e.stopPropagation();
         }, children: _jsx(Alert, { severity: "error", action: _jsx(ErrorActions, { error: error, onRetry: onRetry, extraAction: extraAction }), children: _jsx(Tooltip, { title: message, children: _jsx("div", { className: classes.content, children: message }) }) }) }));
-}
+});
+export default ErrorBar;

package/esm/ui/ErrorMessage.d.ts

@@ -1,3 +1,4 @@
-export default function ErrorMessage({ error }: {
+declare const ErrorMessage: ({ error, }: {
     error: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessage;

package/esm/ui/ErrorMessage.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
 import RedErrorMessageBox from './RedErrorMessageBox.js';
 // chunk load failures usually mean a stale asset manifest (e.g. server
 // redeploy) or a network hiccup; a reload fetches the current chunks
@@ -14,8 +15,9 @@ function isChunkLoadError(error) {
         message.includes('failed to fetch dynamically imported module') ||
         message.includes('error loading dynamically imported module'));
 }
-export default function ErrorMessage({ error }) {
+const ErrorMessage = observer(function ErrorMessage({ error, }) {
     return isChunkLoadError(error) ? (_jsxs(RedErrorMessageBox, { children: [_jsx("div", { children: "Failed to load part of the application, likely due to a server update or network error. Refreshing the page usually fixes it." }), _jsx(Button, { variant: "contained", startIcon: _jsx(RefreshIcon, {}), onClick: () => {
                     window.location.reload();
                 }, style: { margin: 4 }, children: "Refresh page" }), _jsx("div", { children: `${error}` })] })) : (_jsx(RedErrorMessageBox, { children: `${error}` }));
-}
+});
+export default ErrorMessage;

package/esm/ui/ErrorMessageStackTraceContents.d.ts

@@ -1,4 +1,5 @@
-export default function ErrorMessageStackTraceContents({ text, extra, }: {
+declare const ErrorMessageStackTraceContents: ({ text, extra, }: {
     text: string;
     extra?: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessageStackTraceContents;

package/esm/ui/ErrorMessageStackTraceContents.js

@@ -1,5 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import ExternalLink from './ExternalLink.js';
 import { alpha } from './palette.js';
@@ -13,7 +14,7 @@ const useStyles = makeStyles()(theme => ({
         maxHeight: 300,
     },
 }));
-export default function ErrorMessageStackTraceContents({ text, extra, }) {
+const ErrorMessageStackTraceContents = observer(function ErrorMessageStackTraceContents({ text, extra, }) {
     const { classes } = useStyles();
     const extraStr = extra
         ? `supporting data: ${JSON.stringify(extra, null, 2)}`
@@ -23,4 +24,5 @@ export default function ErrorMessageStackTraceContents({ text, extra, }) {
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${issueBody}`;
     const emailLink = `mailto:${EMAIL}?subject=JBrowse%202%20error&body=${issueBody}`;
     return (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Post a new issue at", ' ', _jsx(ExternalLink, { href: githubLink, children: "GitHub" }), " or send an email to ", _jsx(ExternalLink, { href: emailLink, children: EMAIL })] }), _jsx("pre", { className: classes.pre, children: displayText })] }));
-}
+});
+export default ErrorMessageStackTraceContents;

package/esm/ui/ErrorMessageStackTraceDialog.d.ts

@@ -1,5 +1,6 @@
-export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }: {
+declare const ErrorMessageStackTraceDialog: ({ error, onClose, extra, }: {
     onClose: () => void;
     error: unknown;
     extra?: unknown;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorMessageStackTraceDialog;

package/esm/ui/ErrorMessageStackTraceDialog.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { effectiveRenderer } from '@jbrowse/render-core/graphicsCapabilities';
 import { useGraphicsCapabilities } from '@jbrowse/render-core/useGraphicsCapabilities';
+import { observer } from 'mobx-react';
 import { useFetch } from '../util/useFetch.js';
 import CopyToClipboardButton from './CopyToClipboardButton.js';
 import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
@@ -9,7 +10,7 @@ import LoadingEllipses from './LoadingEllipses.js';
 import { formatErrorStack } from './formatErrorStack.js';
 import { mapStackTrace } from './mapStackTrace.js';
 const MAX_ERR_LEN = 10_000;
-export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
+const ErrorMessageStackTraceDialog = observer(function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const graphicsCapabilities = useGraphicsCapabilities();
     const errorText = error ? `${error}` : '';
     const stackTrace = formatErrorStack(error);
@@ -60,4 +61,5 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, })
     return (_jsx(InfoDialog, { open: true, onClose: () => {
             onClose();
         }, maxWidth: "xl", title: "Stack trace", actions: _jsx(CopyToClipboardButton, { variant: "contained", color: "secondary", value: errorBoxText, copiedLabel: "Copied!", children: "Copy stack trace to clipboard" }), children: isLoading ? (_jsx(LoadingEllipses, { variant: "h6" })) : (_jsx(ErrorMessageStackTraceContents, { text: errorBoxText, extra: extra })) }));
-}
+});
+export default ErrorMessageStackTraceDialog;

package/esm/ui/ErrorOverlay.d.ts

@@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
-export default function ErrorOverlay({ error, onRetry, width, height, extraAction, }: {
+declare const ErrorOverlay: ({ error, onRetry, width, height, extraAction, }: {
     error: unknown;
     onRetry: () => void;
     width: number | string;
     height: number | string;
     extraAction?: ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ErrorOverlay;

package/esm/ui/ErrorOverlay.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import ErrorBar from './ErrorBar.js';
-export default function ErrorOverlay({ error, onRetry, width, height, extraAction, }) {
+const ErrorOverlay = observer(function ErrorOverlay({ error, onRetry, width, height, extraAction, }) {
     return (_jsx("div", { style: { position: 'relative', width, height }, children: _jsx(ErrorBar, { error: error, onRetry: onRetry, extraAction: extraAction }) }));
-}
+});
+export default ErrorOverlay;

package/esm/ui/ExportSvgDialog.d.ts

@@ -1,7 +1,8 @@
 import type { BaseExportSvgOptions } from './BaseExportSvgDialog.tsx';
-export default function ExportSvgDialog({ model, handleClose, }: {
+declare const ExportSvgDialog: ({ model, handleClose, }: {
     model: {
         exportSvg(opts: BaseExportSvgOptions): Promise<unknown>;
     };
     handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default ExportSvgDialog;

package/esm/ui/ExportSvgDialog.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
 import BaseExportSvgDialog from './BaseExportSvgDialog.js';
 // The export dialog for a view whose `exportSvg` takes nothing beyond the
 // shared options: the dotplot and circular views both lazy-import this. A view
 // with extra controls wraps `BaseExportSvgDialog` itself and threads them
 // through `exportSvg` (the LGV family's track labels and gridlines).
-export default function ExportSvgDialog({ model, handleClose, }) {
+const ExportSvgDialog = observer(function ExportSvgDialog({ model, handleClose, }) {
     return (_jsx(BaseExportSvgDialog, { model: model, handleClose: handleClose, exportSvg: opts => model.exportSvg(opts) }));
-}
+});
+export default ExportSvgDialog;

package/esm/ui/ExternalLink.d.ts

@@ -1,2 +1,3 @@
 import type { LinkProps } from '@mui/material';
-export default function ExternalLink(props: LinkProps): import("react").JSX.Element;
+declare const ExternalLink: (props: LinkProps) => import("react").JSX.Element;
+export default ExternalLink;

package/esm/ui/ExternalLink.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { Link } from '@mui/material';
-export default function ExternalLink(props) {
+import { observer } from 'mobx-react';
+const ExternalLink = observer(function ExternalLink(props) {
     const { children, ...rest } = props;
     return (_jsxs(Link, { ...rest, target: "_blank", rel: "noopener noreferrer", children: [children, " ", _jsx(OpenInNewIcon, { fontSize: "small" })] }));
-}
+});
+export default ExternalLink;

package/esm/ui/FactoryResetDialog.d.ts

@@ -1,5 +1,6 @@
-export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
+declare const FactoryResetDialog: ({ onClose, open, onFactoryReset, }: {
     onClose: () => void;
     open: boolean;
     onFactoryReset: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default FactoryResetDialog;

package/esm/ui/FactoryResetDialog.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DialogContentText } from '@mui/material';
+import { observer } from 'mobx-react';
 import ConfirmDialog from './ConfirmDialog.js';
-export default function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
+const FactoryResetDialog = observer(function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
     return (_jsx(ConfirmDialog, { open: open, title: "Reset", submitText: "Reset", onCancel: onClose, onSubmit: () => {
             onFactoryReset();
             onClose();
         }, children: _jsx(DialogContentText, { children: "Are you sure you want to reset? This will restore the default configuration." }) }));
-}
+});
+export default FactoryResetDialog;