@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.2

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { Paper } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { isAlive } from 'mobx-state-tree';
 import { ErrorBoundary } from 'react-error-boundary';
-import { getConf } from '@jbrowse/core/configuration';
 import { ResizeHandle, ErrorMessage } from '@jbrowse/core/ui';
 import { useDebouncedCallback } from '@jbrowse/core/util';
-import TrackLabel from './TrackLabel';
+import TrackLabelContainer from './TrackLabelContainer';
+import TrackRenderingContainer from './TrackRenderingContainer';
 const useStyles = makeStyles()({
     root: {
         marginTop: 2,
@@ -26,88 +26,31 @@ const useStyles = makeStyles()({
         width: '100%',
         zIndex: 3,
     },
-    trackLabel: {
-        zIndex: 3,
-    },
-    // aligns with block boundaries. check for example the breakpoint split view
-    // demo to see if features align if wanting to change things
-    renderingComponentContainer: {
-        position: 'absolute',
-        // -1 offset because of the 1px border of the Paper
-        left: -1,
-        height: '100%',
-        width: '100%',
-    },
-    trackLabelOffset: {
-        position: 'relative',
-        display: 'inline-block',
-    },
-    trackLabelOverlap: {
-        position: 'absolute',
-    },
-    trackRenderingContainer: {
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        whiteSpace: 'nowrap',
-        position: 'relative',
-        background: 'none',
-        zIndex: 2,
-    },
 });
-const TrackContainerLabel = observer(({ model, view }) => {
-    const { classes, cx } = useStyles();
-    const display = model.displays[0];
-    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
-    const labelStyle = view.trackLabels !== 'overlapping' || display.prefersOffset
-        ? trackLabelOffset
-        : trackLabelOverlap;
-    return view.trackLabels !== 'hidden' ? (React.createElement(TrackLabel, { track: model, className: cx(trackLabel, labelStyle) })) : null;
-});
-function TrackContainer({ model, track, }) {
+export default observer(function TrackContainer({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
-    const { horizontalScroll, draggingTrackId, moveTrack } = model;
-    const { height, RenderingComponent, DisplayBlurb } = display;
-    const trackId = getConf(track, 'trackId');
-    const ref = useRef(null);
+    const { draggingTrackId } = model;
+    const ref2 = useRef(null);
     const dimmed = draggingTrackId !== undefined && draggingTrackId !== display.id;
-    const minimized = track.minimized;
     const debouncedOnDragEnter = useDebouncedCallback(() => {
         if (isAlive(display) && dimmed) {
-            moveTrack(draggingTrackId, track.id);
+            model.moveTrack(draggingTrackId, track.id);
         }
     }, 100);
-    useEffect(() => {
-        if (ref.current) {
-            model.trackRefs[trackId] = ref.current;
-        }
-        return () => {
-            delete model.trackRefs[trackId];
-        };
-    }, [model.trackRefs, trackId]);
-    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
+    return (React.createElement(Paper, { ref: ref2, className: classes.root, variant: "outlined", onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
-                const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
+                const left = ((_a = ref2.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;
                 model.zoomTo(model.bpPerPx / 2, event.clientX - left, true);
             }
         } },
-        React.createElement(TrackContainerLabel, { model: track, view: model }),
-        React.createElement(ErrorBoundary, { key: track.id, FallbackComponent: ({ error }) => React.createElement(ErrorMessage, { error: error }) },
-            React.createElement("div", { className: classes.trackRenderingContainer, style: { height: minimized ? 20 : height }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: debouncedOnDragEnter, "data-testid": `trackRenderingContainer-${model.id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
-                    React.createElement(RenderingComponent, { model: display, onHorizontalScroll: horizontalScroll })),
-                DisplayBlurb ? (React.createElement("div", { style: {
-                        position: 'absolute',
-                        left: 0,
-                        top: display.height - 20,
-                    } },
-                    React.createElement(DisplayBlurb, { model: display }))) : null)) : null)),
+        React.createElement(TrackLabelContainer, { track: track, view: model }),
+        React.createElement(ErrorBoundary, { FallbackComponent: e => React.createElement(ErrorMessage, { error: e.error }) },
+            React.createElement(TrackRenderingContainer, { model: model, track: track, onDragEnter: debouncedOnDragEnter })),
         React.createElement("div", { className: classes.overlay, style: {
                 height: display.height,
                 background: dimmed ? 'rgba(0, 0, 0, 0.4)' : undefined,
             }, onDragEnter: debouncedOnDragEnter }),
         React.createElement(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
-}
-export default observer(TrackContainer);
-//# sourceMappingURL=TrackContainer.js.map
+});

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -6,8 +6,7 @@ import { getConf } from '@jbrowse/core/configuration';
 import { getSession, getContainingView } from '@jbrowse/core/util';
 import { getTrackName } from '@jbrowse/core/util/tracks';
 import { SanitizedHTML } from '@jbrowse/core/ui';
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu';
-import { bindTrigger, bindPopover, usePopupState, } from 'material-ui-popup-state/hooks';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 // icons
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import DragIcon from '@mui/icons-material/DragIndicator';
@@ -51,10 +50,6 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
     const minimized = track.minimized;
     const trackId = getConf(track, 'trackId');
     const trackName = getTrackName(trackConf, session);
-    const popupState = usePopupState({
-        popupId: 'trackLabelMenu',
-        variant: 'popover',
-    });
     const items = [
         {
             label: minimized ? 'Restore track' : 'Minimize track',
@@ -63,7 +58,7 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
         },
         ...(((_a = session.getTrackActionMenuItems) === null || _a === void 0 ? void 0 : _a.call(session, trackConf)) || []),
         ...track.trackMenuItems(),
-    ].sort((a, b) => (b.priority || 0) - (a.priority || 0));
+    ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
     return (React.createElement(Paper, { ref: ref, className: cx(className, classes.root) },
         React.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
                 const target = event.currentTarget;
@@ -77,10 +72,10 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
         React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             React.createElement(CloseIcon, { fontSize: "small" })),
         React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },
-            React.createElement(SanitizedHTML, { html: `${trackName}${minimized ? ' (minimized)' : ''}` })),
-        React.createElement(IconButton, { ...bindTrigger(popupState), className: classes.iconButton, "data-testid": "track_menu_icon", disabled: items.length === 0 },
-            React.createElement(MoreVertIcon, { fontSize: "small" })),
-        React.createElement(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_, callback) => callback(), menuItems: items, popupState: popupState })));
+            React.createElement(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
+                    .filter(f => !!f)
+                    .join(' ') })),
+        React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon" },
+            React.createElement(MoreVertIcon, { fontSize: "small" }))));
 });
 export default observer(TrackLabel);
-//# sourceMappingURL=TrackLabel.js.map

package/esm/LinearGenomeView/components/TrackLabelContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+type LGV = LinearGenomeViewModel;
+declare const TrackLabelContainer: ({ track, view, }: {
+    track: BaseTrackModel;
+    view: LGV;
+}) => React.JSX.Element | null;
+export default TrackLabelContainer;

package/esm/LinearGenomeView/components/TrackLabelContainer.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import TrackLabel from './TrackLabel';
+const useStyles = makeStyles()({
+    trackLabel: {
+        zIndex: 3,
+    },
+    trackLabelOffset: {
+        position: 'relative',
+        display: 'inline-block',
+    },
+    trackLabelOverlap: {
+        position: 'absolute',
+    },
+});
+const TrackLabelContainer = observer(function ({ track, view, }) {
+    const { classes, cx } = useStyles();
+    const display = track.displays[0];
+    const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
+    const labelStyle = view.trackLabels !== 'overlapping' || display.prefersOffset
+        ? trackLabelOffset
+        : trackLabelOverlap;
+    return view.trackLabels !== 'hidden' ? (React.createElement(TrackLabel, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+});
+export default TrackLabelContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+type LGV = LinearGenomeViewModel;
+declare const _default: ({ model, track, onDragEnter, }: {
+    model: LGV;
+    track: BaseTrackModel;
+    onDragEnter: () => void;
+}) => React.JSX.Element;
+export default _default;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useRef } from 'react';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import { getConf } from '@jbrowse/core/configuration';
+const useStyles = makeStyles()({
+    // aligns with block boundaries. check for example the breakpoint split view
+    // demo to see if features align if wanting to change things
+    renderingComponentContainer: {
+        position: 'absolute',
+        // -1 offset because of the 1px border of the Paper
+        left: -1,
+        height: '100%',
+        width: '100%',
+    },
+    trackRenderingContainer: {
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        whiteSpace: 'nowrap',
+        position: 'relative',
+        background: 'none',
+        zIndex: 2,
+    },
+});
+export default observer(function TrackRenderingContainer({ model, track, onDragEnter, }) {
+    const { classes } = useStyles();
+    const display = track.displays[0];
+    const { height, RenderingComponent, DisplayBlurb } = display;
+    const trackId = getConf(track, 'trackId');
+    const ref = useRef(null);
+    const minimized = track.minimized;
+    useEffect(() => {
+        if (ref.current) {
+            model.trackRefs[trackId] = ref.current;
+        }
+        return () => {
+            delete model.trackRefs[trackId];
+        };
+    }, [model.trackRefs, trackId]);
+    return (React.createElement("div", { className: classes.trackRenderingContainer, style: { height: minimized ? 20 : height }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${model.id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
+            React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll })),
+        DisplayBlurb ? (React.createElement("div", { style: {
+                position: 'absolute',
+                left: 0,
+                top: display.height - 20,
+            } },
+            React.createElement(DisplayBlurb, { model: display }))) : null)) : null));
+});

package/esm/LinearGenomeView/components/TracksContainer.d.ts

@@ -4,5 +4,5 @@ type LGV = LinearGenomeViewModel;
 declare const _default: ({ children, model, }: {
     children: React.ReactNode;
     model: LGV;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -26,7 +26,7 @@ export default observer(function TracksContainer({ children, model, }) {
     const ref = useRef(null);
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, handleMenuItemClick, open, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
-    const additionals = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
+    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
     return (React.createElement("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {
             mouseDown1(event);
             mouseDown2(event);
@@ -39,7 +39,6 @@ export default observer(function TracksContainer({ children, model, }) {
                 top: anchorPosition.clientY,
             }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
         React.createElement(Rubberband, { model: model, ControlComponent: React.createElement(Scalebar, { model: model, style: { height: SCALE_BAR_HEIGHT, boxSizing: 'border-box' } }) }),
-        additionals,
+        additional,
         children));
 });
-//# sourceMappingURL=TracksContainer.js.map

package/esm/LinearGenomeView/components/VerticalGuide.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 declare function VerticalGuide({ model, coordX }: {
     model: LGV;
     coordX: number;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof VerticalGuide;
 export default _default;

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -21,4 +21,3 @@ function VerticalGuide({ model, coordX }) {
             } })));
 }
 export default observer(VerticalGuide);
-//# sourceMappingURL=VerticalGuide.js.map

package/esm/LinearGenomeView/components/ZoomControls.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 declare function ZoomControls({ model }: {
     model: LinearGenomeViewModel;
-}): JSX.Element;
+}): React.JSX.Element;
 declare const _default: typeof ZoomControls;
 export default _default;

package/esm/LinearGenomeView/components/ZoomControls.js

@@ -30,4 +30,3 @@ function ZoomControls({ model }) {
             React.createElement(ZoomIn, null))));
 }
 export default observer(ZoomControls);
-//# sourceMappingURL=ZoomControls.js.map

package/esm/LinearGenomeView/components/hooks.js

@@ -252,4 +252,3 @@ export function useWheelScroll(ref, model) {
         return () => { };
     }, [model, ref]);
 }
-//# sourceMappingURL=hooks.js.map

package/esm/LinearGenomeView/components/util.js

@@ -36,4 +36,3 @@ export function getCytobands(assembly, refName) {
         type: f.get('type'),
     })).filter(f => f.refName === refName)) || []);
 }
-//# sourceMappingURL=util.js.map

package/esm/LinearGenomeView/index.js

@@ -12,4 +12,3 @@ export default (pluginManager) => {
     });
 };
 export * from './model';
-//# sourceMappingURL=index.js.map

package/esm/LinearGenomeView/model.d.ts

@@ -45,6 +45,7 @@ export declare const SPACING = 7;
 export declare const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
+ * #category view
  */
 export declare function stateModelFactory(pluginManager: PluginManager): import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -90,7 +91,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     afterDisplayedRegionsSetCallbacks: Function[];
     scaleFactor: number;
     trackRefs: {
-        [key: string]: any;
+        [key: string]: HTMLDivElement;
     };
     coarseDynamicBlocks: BaseBlock[];
     coarseTotalBp: number;
@@ -402,18 +403,18 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #getter
      * static blocks are an important concept jbrowse uses to avoid
-     * re-rendering when you scroll to the side. when you horizontally scroll to the
-     * right, old blocks to the left may be removed, and new blocks may be
-     * instantiated on the right. tracks may use the static blocks to render their
-     * data for the region represented by the block
+     * re-rendering when you scroll to the side. when you horizontally
+     * scroll to the right, old blocks to the left may be removed, and new
+     * blocks may be instantiated on the right. tracks may use the static
+     * blocks to render their data for the region represented by the block
      */
     readonly staticBlocks: BlockSet;
     /**
      * #getter
      * dynamic blocks represent the exact coordinates of the currently
-     * visible genome regions on the screen. they are similar to static blocks, but
-     * static blocks can go offscreen while dynamic blocks represent exactly what
-     * is on screen
+     * visible genome regions on the screen. they are similar to static
+     * blocks, but static blocks can go offscreen while dynamic blocks
+     * represent exactly what is on screen
      */
     readonly dynamicBlocks: BlockSet;
     /**
@@ -423,8 +424,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     readonly roundedDynamicBlocks: BaseBlock[];
     /**
      * #getter
-     * a single "combo-locstring" representing all the regions visible
-     * on the screen
+     * a single "combo-locstring" representing all the regions visible on
+     * the screen
      */
     readonly visibleLocStrings: string;
     /**
@@ -470,8 +471,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      * Navigate to a location based on its refName and optionally start, end,
      * and assemblyName. Will not try to change displayed regions, use
      * `navToLocations` instead. Only navigates to a location if it is
-     * entirely within a displayedRegion. Navigates to the first matching location
-     * encountered.
+     * entirely within a displayedRegion. Navigates to the first matching
+     * location encountered.
      *
      * Throws an error if navigation was unsuccessful
      *

package/esm/LinearGenomeView/model.js

@@ -2,7 +2,6 @@ import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst';
-import { ReturnToImportFormDialog } from '@jbrowse/core/ui';
 import { assembleLocString, clamp, findLast, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
@@ -22,14 +21,13 @@ import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
-// locals
-import { renderToSvg } from './svgcomponents/SVGLinearGenomeView';
-import ExportSvgDlg from './components/ExportSvgDialog';
 import MiniControls from './components/MiniControls';
 import Header from './components/Header';
 import { generateLocations, parseLocStrings } from './util';
 // lazies
+const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
 const SequenceSearchDialog = lazy(() => import('./components/SequenceSearchDialog'));
+const ExportSvgDialog = lazy(() => import('./components/ExportSvgDialog'));
 const GetSequenceDialog = lazy(() => import('./components/GetSequenceDialog'));
 const SearchResultsDialog = lazy(() => import('./components/SearchResultsDialog'));
 function calculateVisibleLocStrings(contentBlocks) {
@@ -54,6 +52,7 @@ export const SPACING = 7;
 export const WIDGET_HEIGHT = 32;
 /**
  * #stateModel LinearGenomeView
+ * #category view
  */
 export function stateModelFactory(pluginManager) {
     return types
@@ -140,7 +139,6 @@ export function stateModelFactory(pluginManager) {
         // which is basically like an onLoad
         afterDisplayedRegionsSetCallbacks: [],
         scaleFactor: 1,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         trackRefs: {},
         coarseDynamicBlocks: [],
         coarseTotalBp: 0,
@@ -467,7 +465,6 @@ export function stateModelFactory(pluginManager) {
             getSession(self).queueDialog(handleClose => [
                 SearchResultsDialog,
                 {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     model: self,
                     searchResults,
                     searchQuery,
@@ -731,7 +728,7 @@ export function stateModelFactory(pluginManager) {
          * creates an svg export and save using FileSaver
          */
         async exportSvg(opts = {}) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const { renderToSvg } = await import('./svgcomponents/SVGLinearGenomeView');
             const html = await renderToSvg(self, opts);
             const blob = new Blob([html], { type: 'image/svg+xml' });
             saveAs(blob, opts.filename || 'image.svg');
@@ -845,7 +842,7 @@ export function stateModelFactory(pluginManager) {
                     icon: PhotoCameraIcon,
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
-                            ExportSvgDlg,
+                            ExportSvgDialog,
                             { model: self, handleClose },
                         ]);
                     },
@@ -956,10 +953,10 @@ export function stateModelFactory(pluginManager) {
             /**
              * #getter
              * static blocks are an important concept jbrowse uses to avoid
-             * re-rendering when you scroll to the side. when you horizontally scroll to the
-             * right, old blocks to the left may be removed, and new blocks may be
-             * instantiated on the right. tracks may use the static blocks to render their
-             * data for the region represented by the block
+             * re-rendering when you scroll to the side. when you horizontally
+             * scroll to the right, old blocks to the left may be removed, and new
+             * blocks may be instantiated on the right. tracks may use the static
+             * blocks to render their data for the region represented by the block
              */
             get staticBlocks() {
                 const ret = calculateStaticBlocks(self);
@@ -973,9 +970,9 @@ export function stateModelFactory(pluginManager) {
             /**
              * #getter
              * dynamic blocks represent the exact coordinates of the currently
-             * visible genome regions on the screen. they are similar to static blocks, but
-             * static blocks can go offscreen while dynamic blocks represent exactly what
-             * is on screen
+             * visible genome regions on the screen. they are similar to static
+             * blocks, but static blocks can go offscreen while dynamic blocks
+             * represent exactly what is on screen
              */
             get dynamicBlocks() {
                 return calculateDynamicBlocks(self);
@@ -993,8 +990,8 @@ export function stateModelFactory(pluginManager) {
             },
             /**
              * #getter
-             * a single "combo-locstring" representing all the regions visible
-             * on the screen
+             * a single "combo-locstring" representing all the regions visible on
+             * the screen
              */
             get visibleLocStrings() {
                 return calculateVisibleLocStrings(this.dynamicBlocks.contentBlocks);
@@ -1097,8 +1094,8 @@ export function stateModelFactory(pluginManager) {
          * Navigate to a location based on its refName and optionally start, end,
          * and assemblyName. Will not try to change displayed regions, use
          * `navToLocations` instead. Only navigates to a location if it is
-         * entirely within a displayedRegion. Navigates to the first matching location
-         * encountered.
+         * entirely within a displayedRegion. Navigates to the first matching
+         * location encountered.
          *
          * Throws an error if navigation was unsuccessful
          *
@@ -1123,8 +1120,11 @@ export function stateModelFactory(pluginManager) {
             if (locations.some(l => l.start !== undefined && l.end !== undefined && l.start > l.end)) {
                 throw new Error('found start greater than end');
             }
-            const f1 = locations[0];
-            const f2 = locations[locations.length - 1];
+            const f1 = locations.at(0);
+            const f2 = locations.at(-1);
+            if (!f1 || !f2) {
+                return;
+            }
             const a = self.assemblyNames[0];
             const { assemblyManager } = getSession(self);
             const assembly1 = assemblyManager.get(f1.assemblyName || a);
@@ -1234,4 +1234,3 @@ export { default as RefNameAutocomplete } from './components/RefNameAutocomplete
 export { default as SearchBox } from './components/SearchBox';
 export { default as ZoomControls } from './components/ZoomControls';
 export { renderToSvg } from './svgcomponents/SVGLinearGenomeView';
-//# sourceMappingURL=model.js.map

package/esm/LinearGenomeView/svgcomponents/SVGBackground.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export default function SVGBackground({ width, height, shift, }: {
     width: number;
     height: number;
     shift: number;
-}): JSX.Element;
+}): React.JSX.Element;

package/esm/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -4,4 +4,3 @@ export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
     return (React.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
 }
-//# sourceMappingURL=SVGBackground.js.map

package/esm/LinearGenomeView/svgcomponents/SVGHeader.d.ts

@@ -1,9 +1,8 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
-type LGV = LinearGenomeViewModel;
 export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }: {
-    model: LGV;
+    model: LinearGenomeViewModel;
     rulerHeight: number;
     fontSize: number;
     cytobandHeight: number;
-}): JSX.Element;
-export {};
+}): React.JSX.Element | null;

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -20,15 +20,20 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
         minimumBlockWidth: model.minimumBlockWidth,
     });
     const visibleRegions = model.dynamicBlocks.contentBlocks;
+    if (!visibleRegions.length) {
+        return null;
+    }
     overview.setVolatileWidth(width);
     overview.showAllRegions();
     const block = overview.dynamicBlocks.contentBlocks[0];
-    const first = visibleRegions[0];
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const first = visibleRegions.at(0);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
         ...first,
         coord: first.reversed ? first.end : first.start,
     }) || 0;
-    const last = visibleRegions[visibleRegions.length - 1];
     const lastOverviewPx = overview.bpToPx({
         ...last,
         coord: last.reversed ? last.start : last.end,
@@ -46,4 +51,3 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
         React.createElement("g", { transform: `translate(0 ${rulerHeight + c})` },
             React.createElement(SVGRuler, { model: model, fontSize: fontSize }))));
 }
-//# sourceMappingURL=SVGHeader.js.map

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -26,7 +26,7 @@ export async function renderToSvg(model, opts) {
     const height = totalHeight(tracks, textHeight, trackLabels) + offset + 100;
     const displayResults = await Promise.all(tracks.map(async (track) => {
         const display = track.displays[0];
-        await when(() => (display.ready !== undefined ? display.ready : true));
+        await when(() => !display.renderProps().notReady);
         return { track, result: await display.renderSvg({ ...opts, theme }) };
     }));
     const trackLabelMaxLen = max(tracks.map(t => measureText(getTrackName(t.configuration, session), fontSize)), 0) + 40;
@@ -44,4 +44,3 @@ export async function renderToSvg(model, opts) {
 }
 export { default as SVGRuler } from './SVGRuler';
 export { default as SVGTracks } from './SVGTracks';
-//# sourceMappingURL=SVGLinearGenomeView.js.map

package/esm/LinearGenomeView/svgcomponents/SVGRegionSeparators.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 export default function SVGRegionSeparators({ model, height, }: {
     height: number;
     model: LGV;
-}): JSX.Element;
+}): React.JSX.Element;
 export {};

package/esm/LinearGenomeView/svgcomponents/SVGRegionSeparators.js

@@ -4,4 +4,3 @@ export default function SVGRegionSeparators({ model, height, }) {
     const { dynamicBlocks, offsetPx, interRegionPaddingWidth } = model;
     return (React.createElement(React.Fragment, null, dynamicBlocks.contentBlocks.slice(1).map(block => (React.createElement("rect", { key: block.key, x: block.offsetPx - offsetPx - interRegionPaddingWidth, width: interRegionPaddingWidth, y: 0, height: height, fill: "grey" })))));
 }
-//# sourceMappingURL=SVGRegionSeparators.js.map

package/esm/LinearGenomeView/svgcomponents/SVGRuler.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
 export default function SVGRuler({ model, fontSize, }: {
     model: LGV;
     fontSize: number;
-}): JSX.Element;
+}): React.JSX.Element;
 export {};