@jbrowse/core 2.4.1 → 2.5.0

package/ui/AboutDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnyConfigurationModel } from '../configuration';
 export declare function FileInfoPanel({ config }: {
     config: AnyConfigurationModel;

package/ui/AppLogo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AnyConfigurationModel } from '../configuration';
 declare const Logo: ({ session, }: {
     session: {

package/ui/AssemblySelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
 import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {

package/ui/CascadingMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItem as JBMenuItem } from './Menu';
 import { PopupState } from 'material-ui-popup-state/hooks';
 declare function CascadingMenuChildren(props: {

package/ui/ColorPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const PopoverPicker: ({ color, onChange, }: {
     color: string;
     onChange: (color: string) => void;

package/ui/Dialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DialogProps } from '@mui/material';
 declare function JBrowseDialog(props: DialogProps & {
     title: string;

package/ui/Dialog.js

@@ -27,6 +27,7 @@ function DialogError({ error }) {
 function JBrowseDialog(props) {
     const { classes } = useStyles();
     const { title, children, onClose } = props;
+    const theme = (0, material_1.useTheme)();
     return (react_1.default.createElement(material_1.Dialog, { ...props },
         react_1.default.createElement(material_1.ScopedCssBaseline, null,
             react_1.default.createElement(material_1.DialogTitle, null,
@@ -37,6 +38,18 @@ function JBrowseDialog(props) {
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),
             react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError }, children))));
+            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: DialogError },
+                react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
+                        components: {
+                            MuiInputBase: {
+                                styleOverrides: {
+                                    input: {
+                                        // xref https://github.com/GMOD/jbrowse-components/pull/3666
+                                        boxSizing: 'content-box!important',
+                                    },
+                                },
+                            },
+                        },
+                    }) }, children)))));
 }
 exports.default = (0, mobx_react_1.observer)(JBrowseDialog);

package/ui/DrawerWidget.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { SessionWithDrawerWidgets } from '../util/types';
-declare const DrawerWidget: ({ session }: {
+declare const DrawerWidget: ({ session, }: {
     session: SessionWithDrawerWidgets;
 }) => JSX.Element;
 export default DrawerWidget;

package/ui/DrawerWidget.js

@@ -59,7 +59,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.secondary.main,
     },
 }));
-const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, }) => {
+const DrawerHeader = (0, mobx_react_1.observer)(function ({ session, setToolbarHeight, }) {
     const { pluginManager } = (0, util_1.getEnv)(session);
     const { visibleWidget, activeWidgets, drawerPosition } = session;
     const { classes } = useStyles();
@@ -109,7 +109,7 @@ const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, })
                 setAnchorEl(null);
             } }, option))))));
 });
-const DrawerWidget = (0, mobx_react_1.observer)(({ session }) => {
+const DrawerWidget = (0, mobx_react_1.observer)(function ({ session, }) {
     const { visibleWidget } = session;
     const { pluginManager } = (0, util_1.getEnv)(session);
     const DrawerComponent = visibleWidget
@@ -125,6 +125,8 @@ const DrawerWidget = (0, mobx_react_1.observer)(({ session }) => {
     return (react_1.default.createElement(Drawer_1.default, { session: session },
         react_1.default.createElement(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }),
         react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(LoadingEllipses_1.default, null) },
-            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) }, DrawerComponent ? (react_1.default.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight })) : null))));
+            react_1.default.createElement(react_error_boundary_1.ErrorBoundary, { FallbackComponent: ({ error }) => react_1.default.createElement(ErrorMessage_1.default, { error: error }) }, DrawerComponent ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }),
+                react_1.default.createElement("div", { style: { height: 300 } }))) : null))));
 });
 exports.default = DrawerWidget;

package/ui/DropDownMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuItem } from './Menu';
 declare function DropDownMenu({ menuTitle, session, menuItems, }: {
     menuTitle: string;

package/ui/ErrorMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const ErrorMessage: ({ error }: {
     error: unknown;
 }) => JSX.Element;

package/ui/FactoryResetDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: ({ onClose, open, onFactoryReset, }: {
     onClose: Function;
     open: boolean;

package/ui/FatalErrorDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const FatalErrorDialog: ({ componentStack, error, onFactoryReset, resetButtonText, }: {
     componentStack?: string | undefined;
     error?: unknown;

package/ui/FileSelector/FileSelector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FileLocation, AbstractRootModel } from '../../util/types';
 declare const _default: (props: {
     location?: FileLocation | undefined;

package/ui/FileSelector/LocalFileChooser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FileLocation } from '../../util/types';
 declare function LocalFileChooser(props: {
     location?: FileLocation;

package/ui/FileSelector/UrlChooser.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FileLocation } from '../../util/types';
 declare function UrlChooser(props: {
     location?: FileLocation;

package/ui/Icons.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SvgIconProps } from '@mui/material/SvgIcon';
 export declare function ContentCopy(props: SvgIconProps): JSX.Element;
 export declare function Indexing(props: SvgIconProps): JSX.Element;

package/ui/LoadingEllipses.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TypographyProps } from '@mui/material';
 interface Props extends TypographyProps {
     message?: string;

package/ui/Logo.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type LogoVariant = 'color' | 'black' | 'white';
 interface LogoProps {
     variant?: LogoVariant;

package/ui/PrerenderedCanvas.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare function PrerenderedCanvas(props: {
     width: number;
     height: number;

package/ui/ResizeBar.js

@@ -42,7 +42,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         position: 'absolute',
         height: '100%',
         pointerEvents: 'none',
-        background: theme.palette.divider,
+        background: theme.palette.action.disabled,
         width: 1,
     },
     hiddenTick: {

package/ui/ResizeHandle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, ...props }: {
     onDrag: (arg: number) => number | void;
     vertical?: boolean;

package/ui/ReturnToImportFormDialog.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare function ReturnToImportFormDialog({ model, handleClose, }: {
     model: {
         clearView: Function;

package/ui/SanitizedHTML.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function isHTML(str: string): boolean;
 export default function SanitizedHTML({ html }: {
     html: string;

package/ui/SanitizedHTML.js

@@ -53,6 +53,12 @@ function isHTML(str) {
     return full.test(str);
 }
 exports.isHTML = isHTML;
+// note this is mocked during testing, see
+// packages/__mocks__/@jbrowse/core/ui/SanitizedHTML something about dompurify
+// behavior causes errors during tests, was seen in
+// products/jbrowse-web/src/tests/Connection.test.tsx test (can delete mock to
+// see)
+//
 function SanitizedHTML({ html }) {
     const value = isHTML(html) ? html : (0, escape_html_1.default)(html);
     if (!added) {

package/ui/Snackbar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 import { AbstractSessionModel, NotificationLevel, SnackAction } from '../util';
 type SnackbarMessage = [string, NotificationLevel, SnackAction];

package/ui/Tooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Feature } from '../util';
 declare const _default: ({ offsetX, offsetY, configuration, feature, timeout, }: {
     offsetX: number;

package/ui/ViewContainer.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, onMinimize, style, children, }: {
+declare const _default: ({ view, onClose, onMinimize, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
-    style?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
-export default ViewContainer;
+export default _default;

package/ui/ViewContainer.js

@@ -30,19 +30,19 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const react_use_measure_1 = __importDefault(require("react-use-measure"));
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-const EditableTypography_1 = __importDefault(require("./EditableTypography"));
 const ViewMenu_1 = __importDefault(require("./ViewMenu"));
+const util_1 = require("../util");
+const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
         background: theme.palette.secondary.main,
         margin: theme.spacing(0.5),
+        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -50,34 +50,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
-    input: {
-        paddingBottom: 0,
-        paddingTop: 2,
-    },
-    inputBase: {
-        color: theme.palette.secondary.contrastText,
-    },
-    inputRoot: {
-        '&:hover': {
-            backgroundColor: theme.palette.secondary.light,
-        },
-    },
-    inputFocused: {
-        borderColor: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.light,
-    },
 }));
-const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, style, children, }) {
-    var _a;
+exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
-    const padWidth = theme.spacing(1);
-    const [ref, { width }] = (0, react_use_measure_1.default)();
-    (0, react_1.useEffect)(() => {
-        if (width && (0, mobx_state_tree_1.isAlive)(view)) {
-            view.setWidth(width - Number.parseInt(padWidth, 10) * 2);
-        }
-    }, [padWidth, view, width]);
+    const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
     const scrollRef = (0, react_1.useRef)(null);
     // scroll the view into view when first mounted
     // note that this effect will run only once, because of
@@ -86,23 +63,14 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
         var _a, _b;
         (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
     }, []);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer, style: { ...style, padding: `0px ${padWidth} ${padWidth}` } },
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
             react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
-                        // @ts-expect-error
-                        `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
-                        input: classes.input,
-                        inputBase: classes.inputBase,
-                        inputRoot: classes.inputRoot,
-                        inputFocused: classes.inputFocused,
-                    } })),
+            react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
             react_1.default.createElement("div", { className: classes.grow }),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
                 react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
         react_1.default.createElement(material_1.Paper, null, children)));
 });
-exports.default = ViewContainer;

package/ui/ViewContainerTitle.d.ts

@@ -0,0 +1,5 @@
+import { IBaseViewModel } from '../pluggableElementTypes';
+declare const _default: ({ view, }: {
+    view: IBaseViewModel;
+}) => JSX.Element;
+export default _default;

package/ui/ViewContainerTitle.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// locals
+const EditableTypography_1 = __importDefault(require("./EditableTypography"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    input: {
+        paddingBottom: 0,
+        paddingTop: 2,
+    },
+    inputBase: {
+        color: theme.palette.secondary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.secondary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.secondary.light,
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view, }) {
+    var _a;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
+        react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
+                // @ts-expect-error
+                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                input: classes.input,
+                inputBase: classes.inputBase,
+                inputRoot: classes.inputRoot,
+                inputFocused: classes.inputFocused,
+            } })));
+});

package/ui/ViewLauncher.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NotificationLevel, SnackAction, SessionWithDrawerWidgets } from '../util';
 import { MenuItem as JBMenuItem } from './Menu';
 type SnackbarMessage = [string, NotificationLevel, SnackAction];

package/ui/ViewMenu.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { SvgIconProps, IconButtonProps as IconButtonPropsType } from '@mui/material';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
 declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
     model: IBaseViewModel;
-    IconButtonProps?: IconButtonPropsType<"button", {}> | undefined;
+    IconButtonProps?: IconButtonPropsType | undefined;
     IconProps: SvgIconProps;
 }) => JSX.Element;
 export default ViewMenu;

package/ui/ViewPanel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { AbstractViewModel, NotificationLevel, SessionWithDrawerWidgets, SnackAction } from '../util';
 import { MenuItem as JBMenuItem } from './Menu';
 type SnackbarMessage = [string, NotificationLevel, SnackAction];

package/ui/react-colorful.d.ts

@@ -13,5 +13,5 @@ declare function Ce(r: any): e.FunctionComponentElement<any>;
 declare function me(r: any): e.FunctionComponentElement<any>;
 declare function pe(r: any): e.FunctionComponentElement<any>;
 declare function X(e: any): void;
-import e from "react";
+import e from 'react';
 export { Ne as HexColorInput, J as HexColorPicker, oe as HslColorPicker, le as HslStringColorPicker, Z as HslaColorPicker, re as HslaStringColorPicker, de as HsvColorPicker, he as HsvStringColorPicker, se as HsvaColorPicker, ue as HsvaStringColorPicker, _e as RgbColorPicker, Ce as RgbStringColorPicker, me as RgbaColorPicker, pe as RgbaStringColorPicker, X as setNonce };

package/ui/theme.js

@@ -246,11 +246,6 @@ function createDefaultProps(theme) {
                     transitionDuration: 0,
                 },
             },
-            MuiMenuList: {
-                defaultProps: {
-                    dense: true,
-                },
-            },
             MuiMenuItem: {
                 defaultProps: {
                     dense: true,
@@ -266,8 +261,6 @@ function createDefaultProps(theme) {
                 styleOverrides: {
                     // the default link color uses theme.palette.primary.main which is
                     // very bad with dark mode+midnight primary
-                    //
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     root: ({ theme }) => ({
                         color: theme.palette.text.secondary,
                     }),
@@ -282,10 +275,7 @@ function createDefaultProps(theme) {
                     // keeps the forest-green checkbox by default but for darkmode, uses
                     // a text-like coloring to ensure contrast
                     // xref https://stackoverflow.com/a/72546130/2129219
-                    //
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    root: (props) => {
-                        const { theme } = props;
+                    root: ({ theme }) => {
                         return theme.palette.mode === 'dark'
                             ? {
                                 color: theme.palette.text.secondary,
@@ -306,10 +296,7 @@ function createDefaultProps(theme) {
                     // keeps the forest-green checkbox by default but for darkmode, uses
                     // a text-like coloring to ensure contrast
                     // xref https://stackoverflow.com/a/72546130/2129219
-                    //
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    root: (props) => {
-                        const { theme } = props;
+                    root: ({ theme }) => {
                         return theme.palette.mode === 'dark'
                             ? {
                                 color: theme.palette.text.secondary,
@@ -331,9 +318,7 @@ function createDefaultProps(theme) {
                     // a text-like coloring to ensure contrast
                     // xref https://stackoverflow.com/a/72546130/2129219
                     //
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    root: (props) => {
-                        const { theme } = props;
+                    root: ({ theme }) => {
                         return theme.palette.mode === 'dark'
                             ? {
                                 color: theme.palette.text.secondary,

package/util/index.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import PluginManager from '../PluginManager';
-import { IAnyStateTreeNode, IStateTreeNode } from 'mobx-state-tree';
+import { IAnyStateTreeNode, IStateTreeNode, Instance } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
 import { Feature } from './simpleFeature';
 import { AssemblyManager, Region, TypeTestedByPredicate } from './types';
+import { Region as MUIRegion } from './types/mst';
 import { BaseBlock } from './blockTypes';
 export * from './types';
 export * from './aborting';
@@ -14,12 +16,14 @@ export * from './offscreenCanvasUtils';
 export declare const inDevelopment: boolean;
 export declare const inProduction: boolean;
 export declare function useDebounce<T>(value: T, delay: number): T;
+export declare function useWidthSetter(view: {
+    setWidth: (arg: number) => void;
+}, padding: string): import("react").RefObject<HTMLDivElement>;
 export declare function useDebouncedCallback<T>(callback: (...args: T[]) => void, wait?: number): (...args: T[]) => void;
 /** find the first node in the hierarchy that matches the given predicate */
 export declare function findParentThat(node: IAnyStateTreeNode, predicate: (thing: IAnyStateTreeNode) => boolean): IAnyStateTreeNode;
 export declare function springAnimate(fromValue: number, toValue: number, setValue: (value: number) => void, onFinish?: () => void, precision?: number, tension?: number, friction?: number): (() => void)[];
-/** find the first node in the hierarchy that matches the given 'is' typescript type guard predicate */
-export declare function findParentThatIs<PREDICATE extends (thing: IAnyStateTreeNode) => boolean>(node: IAnyStateTreeNode, predicate: PREDICATE): TypeTestedByPredicate<PREDICATE> & IAnyStateTreeNode;
+export declare function findParentThatIs<T extends (a: IAnyStateTreeNode) => boolean>(node: IAnyStateTreeNode, predicate: T): TypeTestedByPredicate<T> & IAnyStateTreeNode;
 /** get the current JBrowse session model, starting at any node in the state tree */
 export declare function getSession(node: IAnyStateTreeNode): import("./types").AbstractSessionModel & IAnyStateTreeNode;
 /** get the state model of the view in the state tree that contains the given node */
@@ -162,6 +166,7 @@ export declare function iterMap<T, U>(iter: Iterable<T>, func: (arg: T) => U, si
  * Otherwise, findLastIndex returns -1.
  */
 export declare function findLastIndex<T>(array: Array<T>, predicate: (value: T, index: number, obj: T[]) => boolean): number;
+export declare function findLast<T>(array: Array<T>, predicate: (value: T, index: number, obj: T[]) => boolean): T | undefined;
 /**
  * makes a mobx reaction with the given functions, that calls actions on the
  * model for each stage of execution, and to abort the reaction function when
@@ -180,7 +185,7 @@ export declare function findLastIndex<T>(array: Array<T>, predicate: (value: T,
  * @param errorFunction -
  */
 export declare function makeAbortableReaction<T, U, V>(self: T, dataFunction: (arg: T) => U, asyncReactionFunction: (arg: U | undefined, signal: AbortSignal, model: T, handle: IReactionPublic) => Promise<V>, reactionOptions: IReactionOptions, startedFunction: (aborter: AbortController) => void, successFunction: (arg: V) => void, errorFunction: (err: unknown) => void): void;
-export declare function renameRegionIfNeeded(refNameMap: Record<string, string>, region: Region): Region & {
+export declare function renameRegionIfNeeded(refNameMap: Record<string, string>, region: Region | Instance<typeof MUIRegion>): Region & {
     originalRefName?: string;
 };
 export declare function renameRegionsIfNeeded<ARGTYPE extends {

package/util/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBpDisplayStr = exports.supportedIndexingAdapters = exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.blobToDataURL = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useDebounce = exports.inProduction = exports.inDevelopment = void 0;
-exports.isFeature = exports.SimpleFeature = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = void 0;
+exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.blobToDataURL = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLast = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useWidthSetter = exports.useDebounce = exports.inProduction = exports.inDevelopment = void 0;
+exports.isFeature = exports.SimpleFeature = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = exports.toLocale = exports.getBpDisplayStr = exports.supportedIndexingAdapters = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -27,6 +27,7 @@ const mobx_1 = require("mobx");
 const types_1 = require("./types");
 const aborting_1 = require("./aborting");
 const types_2 = require("./types");
+const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 __exportStar(require("./types"), exports);
 __exportStar(require("./aborting"), exports);
 __exportStar(require("./when"), exports);
@@ -51,6 +52,20 @@ function useDebounce(value, delay) {
     return debouncedValue;
 }
 exports.useDebounce = useDebounce;
+// used in ViewContainer files to get the width
+function useWidthSetter(view, padding) {
+    const [ref, { width }] = (0, useMeasure_1.default)();
+    (0, react_1.useEffect)(() => {
+        if (width && (0, mobx_state_tree_1.isAlive)(view)) {
+            // sets after a requestAnimationFrame
+            // https://stackoverflow.com/a/58701523/2129219
+            // avoids ResizeObserver loop error being shown during development
+            requestAnimationFrame(() => view.setWidth(width - Number.parseInt(padding, 10) * 2));
+        }
+    }, [padding, view, width]);
+    return ref;
+}
+exports.useWidthSetter = useWidthSetter;
 // https://stackoverflow.com/questions/56283920/
 function useDebouncedCallback(callback, wait = 400) {
     // track args & timeout handle between calls
@@ -144,7 +159,7 @@ function springAnimate(fromValue, toValue, setValue, onFinish = () => { }, preci
     ];
 }
 exports.springAnimate = springAnimate;
-/** find the first node in the hierarchy that matches the given 'is' typescript type guard predicate */
+// find the first node in the hierarchy that matches the given 'is' typescript type guard predicate
 function findParentThatIs(node, predicate) {
     return findParentThat(node, predicate);
 }
@@ -519,6 +534,16 @@ function findLastIndex(array, predicate) {
     return -1;
 }
 exports.findLastIndex = findLastIndex;
+function findLast(array, predicate) {
+    let l = array.length;
+    while (l--) {
+        if (predicate(array[l], l, array)) {
+            return array[l];
+        }
+    }
+    return undefined;
+}
+exports.findLast = findLast;
 /**
  * makes a mobx reaction with the given functions, that calls actions on the
  * model for each stage of execution, and to abort the reaction function when
@@ -598,8 +623,7 @@ function renameRegionIfNeeded(refNameMap, region) {
     if (region && (refNameMap === null || refNameMap === void 0 ? void 0 : refNameMap[region.refName])) {
         // clone the region so we don't modify it
         region = (0, mobx_state_tree_1.isStateTreeNode)(region)
-            ? // @ts-expect-error
-                { ...(0, mobx_state_tree_1.getSnapshot)(region) }
+            ? { ...(0, mobx_state_tree_1.getSnapshot)(region) }
             : { ...region };
         // modify it directly in the container
         const newRef = refNameMap[region.refName];
@@ -616,7 +640,7 @@ async function renameRegionsIfNeeded(assemblyManager, args) {
         throw new Error('sessionId is required');
     }
     const assemblyNames = regions.map(region => region.assemblyName);
-    const assemblyMaps = Object.fromEntries(await Promise.all(assemblyNames.map(async (assemblyName) => {
+    const assemblyMaps = Object.fromEntries(await Promise.all([...new Set(assemblyNames)].map(async (assemblyName) => {
         return [
             assemblyName,
             await assemblyManager.getRefNameMapForAdapter(adapterConfig, assemblyName, args),

package/util/io/index.d.ts

@@ -1,6 +1,8 @@
 import { GenericFilehandle, Fetcher } from 'generic-filehandle';
-import { FileLocation } from '../types';
+import { FileLocation, UriLocation } from '../types';
 import PluginManager from '../../PluginManager';
+/** if a UriLocation has a baseUri, resolves its uri with respect to that base */
+export declare function resolveUriLocation(location: UriLocation): UriLocation;
 export declare function openLocation(location: FileLocation, pluginManager?: PluginManager): GenericFilehandle;
 export declare function getFetcher(location: FileLocation, pluginManager?: PluginManager): Fetcher;
 export { RemoteFileWithRangeCache } from './RemoteFileWithRangeCache';