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

package/dist/BaseLinearDisplay/components/LinearBlocks.d.ts

@@ -1,20 +1,10 @@
 import React from 'react';
 import { BaseLinearDisplayModel } from '../models/BaseLinearDisplayModel';
-declare const useStyles: (params: void, styleOverrides?: {
-    props: any;
-    ownerState?: Record<string, unknown> | undefined;
-} | undefined) => {
-    classes: Record<"linearBlocks" | "heightOverflowed", string>;
-    theme: import("@mui/material").Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};
 declare const RenderedBlocks: ({ model, }: {
     model: BaseLinearDisplayModel;
 }) => React.JSX.Element;
-declare function LinearBlocks({ model }: {
+export { RenderedBlocks };
+declare const LinearBlocks: ({ model, }: {
     model: BaseLinearDisplayModel;
-}): React.JSX.Element;
-export { RenderedBlocks, useStyles };
-declare const _default: typeof LinearBlocks;
-export default _default;
+}) => React.JSX.Element;
+export default LinearBlocks;

package/dist/BaseLinearDisplay/components/LinearBlocks.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyles = exports.RenderedBlocks = void 0;
+exports.RenderedBlocks = void 0;
 const react_1 = __importDefault(require("react"));
 const mui_1 = require("tss-react/mui");
 const util_1 = require("@jbrowse/core/util");
@@ -31,7 +31,6 @@ const useStyles = (0, mui_1.makeStyles)()({
         boxSizing: 'border-box',
     },
 });
-exports.useStyles = useStyles;
 const RenderedBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions, blockState } = model;
@@ -56,7 +55,7 @@ const RenderedBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
     })));
 });
 exports.RenderedBlocks = RenderedBlocks;
-function LinearBlocks({ model }) {
+const LinearBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { blockDefinitions } = model;
     const viewModel = (0, util_1.getContainingView)(model);
@@ -64,5 +63,5 @@ function LinearBlocks({ model }) {
             left: blockDefinitions.offsetPx - viewModel.offsetPx,
         } },
         react_1.default.createElement(RenderedBlocks, { model: model })));
-}
-exports.default = (0, mobx_react_1.observer)(LinearBlocks);
+});
+exports.default = LinearBlocks;

package/dist/BaseLinearDisplay/components/Tooltip.js

@@ -49,7 +49,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         wordWrap: 'break-word',
     },
 }));
-const TooltipContents = react_1.default.forwardRef(({ message }, ref) => {
+const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ message }, ref) {
     return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
 });
 const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {

package/dist/BaseLinearDisplay/models/util.d.ts

@@ -3,12 +3,8 @@ import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter';
 import { IAnyStateTreeNode } from 'mobx-state-tree';
 export interface RenderProps {
     rendererType: any;
-    renderArgs: {
-        [key: string]: any;
-    };
-    renderProps: {
-        [key: string]: any;
-    };
+    renderArgs: Record<string, any>;
+    renderProps: Record<string, any>;
     displayError: unknown;
     rpcManager: {
         call: Function;

package/dist/LinearBasicDisplay/components/SetMaxHeight.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-declare function SetMaxHeightDlg({ model, handleClose, }: {
+declare const SetMaxHeightDialog: ({ model, handleClose, }: {
     model: {
-        maxHeight?: number;
+        maxHeight?: number | undefined;
         setMaxHeight: (arg?: number) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SetMaxHeightDlg;
-export default _default;
+}) => React.JSX.Element;
+export default SetMaxHeightDialog;

package/dist/LinearBasicDisplay/components/SetMaxHeight.js

@@ -33,7 +33,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         width: 500,
     },
 });
-function SetMaxHeightDlg({ model, handleClose, }) {
+const SetMaxHeightDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const { maxHeight = '' } = model;
     const [max, setMax] = (0, react_1.useState)(`${maxHeight}`);
@@ -47,5 +47,5 @@ function SetMaxHeightDlg({ model, handleClose, }) {
                         handleClose();
                     } }, "Submit"),
                 react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel")))));
-}
-exports.default = (0, mobx_react_1.observer)(SetMaxHeightDlg);
+});
+exports.default = SetMaxHeightDialog;

package/dist/LinearBasicDisplay/model.d.ts

@@ -196,7 +196,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
     readonly maxFeatureScreenDensity: any;
-    readonly featureDensityStatsReady: boolean;
+    readonly featureDensityStatsReady: boolean; /**
+     * #getter
+     */
     readonly maxAllowableBytes: number;
 } & {
     afterAttach(): void;

package/dist/LinearGenomeView/components/CenterLine.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function CenterLine({ model }: {
+declare const CenterLine: ({ model }: {
     model: LGV;
-}): React.JSX.Element | null;
-declare const _default: typeof CenterLine;
-export default _default;
+}) => React.JSX.Element | null;
+export default CenterLine;

package/dist/LinearGenomeView/components/CenterLine.js

@@ -44,7 +44,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         fontWeight: 'bold',
     },
 }));
-function CenterLine({ model }) {
+const CenterLine = (0, mobx_react_1.observer)(function ({ model }) {
     const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model;
     const ref = (0, react_1.useRef)(null);
     const { classes } = useStyles();
@@ -60,5 +60,5 @@ function CenterLine({ model }) {
         ":",
         ' ',
         Math.max(Math.round(centerLineInfo.offset) + 1, 0))))) : null;
-}
-exports.default = (0, mobx_react_1.observer)(CenterLine);
+});
+exports.default = CenterLine;

package/dist/LinearGenomeView/components/Cytobands.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
-declare const _default: ({ overview, block, assembly, }: {
+declare const Cytobands: ({ overview, block, assembly, }: {
     overview: Base1DViewModel;
     assembly?: ({
         configuration: any;
@@ -18,6 +18,8 @@ declare const _default: ({ overview, block, assembly, }: {
             [x: string]: string | undefined;
         } | undefined;
         cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+    } & {
+        getConf(arg: string): any;
     } & {
         readonly initialized: boolean;
         readonly name: string;
@@ -72,6 +74,8 @@ declare const _default: ({ overview, block, assembly, }: {
             [x: string]: string | undefined;
         } | undefined;
         cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+    } & {
+        getConf(arg: string): any;
     } & {
         readonly initialized: boolean;
         readonly name: string;
@@ -115,4 +119,4 @@ declare const _default: ({ overview, block, assembly, }: {
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
     block: ContentBlock;
 }) => React.JSX.Element;
-export default _default;
+export default Cytobands;

package/dist/LinearGenomeView/components/Cytobands.js

@@ -30,6 +30,20 @@ function leftRoundedRect(x, y, width, height, radius) {
         + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
         + "z";
 }
+function leftTriangle(x, y, width, height) {
+    return [
+        [x, 0],
+        [x + width, height / 2],
+        [x, height],
+    ].toString();
+}
+function rightTriangle(x, y, width, height) {
+    return [
+        [x, height / 2],
+        [x + width, 0],
+        [x + width, height],
+    ].toString();
+}
 const colorMap = {
     gneg: 'rgb(227,227,227)',
     gpos25: 'rgb(142,142,142)',
@@ -40,52 +54,37 @@ const colorMap = {
     stalk: 'rgb(127,127,127)',
     acen: '#800',
 };
-exports.default = (0, mobx_react_1.observer)(function Cytobands({ overview, block, assembly, }) {
+const Cytobands = (0, mobx_react_1.observer)(function ({ overview, block, assembly, }) {
     const { offsetPx, reversed } = block;
     const cytobands = (0, util_1.getCytobands)(assembly, block.refName);
-    const coords = cytobands.map(f => {
-        const { refName, start, end, type } = f;
-        return [
-            overview.bpToPx({
-                refName,
-                coord: start,
-            }),
-            overview.bpToPx({
-                refName,
-                coord: end,
-            }),
-            type,
-        ];
-    });
-    const arr = cytobands || [];
-    const lcap = reversed ? arr.length - 1 : 0;
-    const rcap = reversed ? 0 : arr.length - 1;
-    let firstCent = true;
-    return (react_1.default.createElement("g", { transform: `translate(-${offsetPx})` }, coords.map(([start, end, type], index) => {
-        const key = `${start}-${end}-${type}`;
-        if (type === 'acen' && firstCent) {
-            firstCent = false;
-            return (react_1.default.createElement("polygon", { key: key, points: [
-                    [start, 0],
-                    [end, __1.HEADER_OVERVIEW_HEIGHT / 2],
-                    [start, __1.HEADER_OVERVIEW_HEIGHT],
-                ].toString(), fill: colorMap[type] }));
+    const lcap = reversed ? cytobands.length - 1 : 0;
+    const rcap = reversed ? 0 : cytobands.length - 1;
+    const h = __1.HEADER_OVERVIEW_HEIGHT;
+    let centromereSeen = false;
+    return (react_1.default.createElement("g", { transform: `translate(-${offsetPx})` }, cytobands.map((args, index) => {
+        const k = JSON.stringify(args);
+        const { refName, type, start, end } = args;
+        const s = overview.bpToPx({ refName, coord: start }) || 0;
+        const e = overview.bpToPx({ refName, coord: end }) || 0;
+        const l = Math.min(s, e);
+        const w = Math.abs(e - s);
+        const c = colorMap[type];
+        if (type === 'acen' && !centromereSeen) {
+            centromereSeen = true; // the next acen entry is drawn with different right triangle
+            return react_1.default.createElement("polygon", { key: k, points: leftTriangle(s, 0, w, h), fill: c });
         }
-        if (type === 'acen' && !firstCent) {
-            return (react_1.default.createElement("polygon", { key: key, points: [
-                    [start, __1.HEADER_OVERVIEW_HEIGHT / 2],
-                    [end, 0],
-                    [end, __1.HEADER_OVERVIEW_HEIGHT],
-                ].toString(), fill: colorMap[type] }));
+        else if (type === 'acen' && centromereSeen) {
+            return react_1.default.createElement("polygon", { key: k, points: rightTriangle(s, 0, w, h), fill: c });
         }
-        if (lcap === index) {
-            return (react_1.default.createElement("path", { key: key, d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), __1.HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        else if (lcap === index) {
+            return react_1.default.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });
         }
         else if (rcap === index) {
-            return (react_1.default.createElement("path", { key: key, d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, __1.HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+            return react_1.default.createElement("path", { key: k, d: rightRoundedRect(l, 0, w, h, 8), fill: c });
         }
         else {
-            return (react_1.default.createElement("rect", { key: key, x: Math.min(start, end), y: 0, width: Math.abs(end - start), height: __1.HEADER_OVERVIEW_HEIGHT, fill: colorMap[type] }));
+            return react_1.default.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, fill: c });
         }
     })));
 });
+exports.default = Cytobands;

package/dist/LinearGenomeView/components/GetSequenceDialog.d.ts

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

package/dist/LinearGenomeView/components/GetSequenceDialog.js

@@ -74,7 +74,7 @@ async function fetchSequence(model, regions, signal) {
         signal,
     });
 }
-function SequenceDialog({ model, handleClose, }) {
+const GetSequenceDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
     const [error, setError] = (0, react_1.useState)();
@@ -170,5 +170,5 @@ function SequenceDialog({ model, handleClose, }) {
                     }), 'jbrowse_ref_seq.fa');
                 }, disabled: loading || !!error, color: "primary", startIcon: react_1.default.createElement(GetApp_1.default, null) }, "Download FASTA"),
             react_1.default.createElement(material_1.Button, { onClick: handleClose, variant: "contained" }, "Close"))));
-}
-exports.default = (0, mobx_react_1.observer)(SequenceDialog);
+});
+exports.default = GetSequenceDialog;

package/dist/LinearGenomeView/components/Gridlines.d.ts

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

package/dist/LinearGenomeView/components/Gridlines.js

@@ -36,30 +36,33 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         background: theme.palette.divider,
     },
 }));
-const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
+function RenderedBlockLines({ block, bpPerPx, }) {
     const { classes, cx } = useStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null, model.staticBlocks.map((block, index) => {
+    const ticks = (0, util_1.makeTicks)(block.start, block.end, bpPerPx);
+    return (react_1.default.createElement(Block_1.ContentBlock, { block: block }, ticks.map(({ type, base }) => {
+        const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
+        return (react_1.default.createElement("div", { key: base, className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
+                ? classes.majorTick
+                : classes.minorTick), style: { left: x } }));
+    })));
+}
+const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
+    const { staticBlocks, bpPerPx } = model;
+    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, index) => {
+        const k = `${block.key}-${index}`;
         if (block instanceof blockTypes_1.ContentBlock) {
-            const ticks = (0, util_1.makeTicks)(block.start, block.end, model.bpPerPx);
-            return (react_1.default.createElement(Block_1.ContentBlock, { key: `${block.key}-${index}`, block: block }, ticks.map(tick => {
-                const x = (block.reversed
-                    ? block.end - tick.base
-                    : tick.base - block.start) / model.bpPerPx;
-                return (react_1.default.createElement("div", { key: tick.base, className: cx(classes.tick, tick.type === 'major' || tick.type === 'labeledMajor'
-                        ? classes.majorTick
-                        : classes.minorTick), style: { left: x } }));
-            })));
+            return react_1.default.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        if (block instanceof blockTypes_1.ElidedBlock) {
-            return react_1.default.createElement(Block_1.ElidedBlock, { key: block.key, width: block.widthPx });
+        else if (block instanceof blockTypes_1.ElidedBlock) {
+            return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: block.widthPx });
         }
-        if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
-            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: block.key, width: block.widthPx, boundary: block.variant === 'boundary' }));
+        else if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
+            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
         }
         return null;
     })));
 });
-function VerticalGuides({ model }) {
+const Gridlines = (0, mobx_react_1.observer)(function ({ model }) {
     const { classes } = useStyles();
     // find the block that needs pinning to the left side for context
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
@@ -71,5 +74,5 @@ function VerticalGuides({ model }) {
                 width: model.staticBlocks.totalWidthPx,
             } },
             react_1.default.createElement(RenderedVerticalGuides, { model: model }))));
-}
-exports.default = (0, mobx_react_1.observer)(VerticalGuides);
+});
+exports.default = Gridlines;

package/dist/LinearGenomeView/components/ImportForm.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model }: {
+declare const LinearGenomeViewImportForm: ({ model, }: {
     model: LGV;
 }) => React.JSX.Element;
-export default _default;
+export default LinearGenomeViewImportForm;

package/dist/LinearGenomeView/components/ImportForm.js

@@ -48,7 +48,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         padding: theme.spacing(4),
     },
 }));
-exports.default = (0, mobx_react_1.observer)(function ({ model }) {
+const LinearGenomeViewImportForm = (0, mobx_react_1.observer)(function ({ model, }) {
     var _a;
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
@@ -168,3 +168,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ model }) {
                                     model.showAllRegionsInAssembly(selectedAsm);
                                 }, variant: "contained", color: "secondary" }, "Show all regions in assembly"))))))));
 });
+exports.default = LinearGenomeViewImportForm;

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -35,6 +35,7 @@ const mobx_react_1 = require("mobx-react");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 const TrackContainer_1 = __importDefault(require("./TrackContainer"));
 const TracksContainer_1 = __importDefault(require("./TracksContainer"));
+const util_1 = require("@jbrowse/core/util");
 const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     note: {
@@ -46,6 +47,23 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
     const { classes } = useStyles();
+    const ref = (0, react_1.useRef)(null);
+    const session = (0, util_1.getSession)(model);
+    (0, react_1.useEffect)(() => {
+        // sets the focused view id based on a click within the LGV; necessary for subviews to be focused properly
+        function handleSelectView(e) {
+            var _a, _b;
+            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [session, model]);
     if (!initialized && !error) {
         return react_1.default.createElement(ui_1.LoadingEllipses, { variant: "h6" });
     }
@@ -54,7 +72,7 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (react_1.default.createElement("div", { style: { position: 'relative' } },
+    return (react_1.default.createElement("div", { style: { position: 'relative' }, ref: ref },
         react_1.default.createElement(HeaderComponent, { model: model }),
         react_1.default.createElement(MiniControlsComponent, { model: model }),
         react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(material_1.Paper, { variant: "outlined", className: classes.note }, !model.hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,

package/dist/LinearGenomeView/components/MiniControls.js

@@ -12,23 +12,31 @@ const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
 const KeyboardArrowDown_1 = __importDefault(require("@mui/icons-material/KeyboardArrowDown"));
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    bg: {
+    background: {
         position: 'absolute',
         right: 0,
         zIndex: 1001,
         background: theme.palette.background.paper,
     },
+    focusedBackground: {
+        background: theme.palette.secondary.light,
+        svg: {
+            fill: theme.palette.secondary.contrastText,
+        },
+    },
 }));
 const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
-    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: classes.bg },
+    const { classes, cx } = useStyles();
+    const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
+    const { focusedViewId } = (0, util_1.getSession)(model);
+    return hideHeader ? (react_1.default.createElement(material_1.Paper, { className: cx(classes.background, focusedViewId === id ? classes.focusedBackground : undefined) },
         react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
             react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
         react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
             react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
             react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" })))) : null;
 });
 exports.default = MiniControls;

package/dist/LinearGenomeView/components/OverviewRubberband.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, overview, ControlComponent, }: {
+declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
     overview: Base1DViewModel;
     ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default OverviewRubberband;

package/dist/LinearGenomeView/components/OverviewRubberband.js

@@ -60,7 +60,7 @@ const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX,
     return (react_1.default.createElement(material_1.Tooltip, { open: open, placement: "top", title: [(0, util_1.stringify)(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true },
         react_1.default.createElement("div", { className: classes.guide, style: { left: guideX } })));
 });
-exports.default = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = react_1.default.createElement("div", null), }) {
+const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberband({ model, overview, ControlComponent = react_1.default.createElement("div", null), }) {
     const { cytobandOffset } = model;
     const [startX, setStartX] = (0, react_1.useState)();
     const [currentX, setCurrentX] = (0, react_1.useState)();
@@ -156,3 +156,4 @@ exports.default = (0, mobx_react_1.observer)(function OverviewRubberband({ model
         leftBpOffset && rightBpOffset ? (react_1.default.createElement(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         react_1.default.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });
+exports.default = OverviewRubberband;

package/dist/LinearGenomeView/components/OverviewScalebar.d.ts

@@ -7,10 +7,10 @@ declare const Polygon: ({ model, overview, useOffset, }: {
     useOffset?: boolean | undefined;
 }) => React.JSX.Element | null;
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, children, }: {
+declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export default _default;
 export { Polygon };
 export { default as Cytobands } from './Cytobands';
+export default OverviewScalebar;

package/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -1,10 +1,33 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cytobands = exports.Polygon = void 0;
-const react_1 = __importDefault(require("react"));
+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");
@@ -82,9 +105,7 @@ const Polygon = (0, mobx_react_1.observer)(function ({ model, overview, useOffse
     if (!contentBlocks.length) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = contentBlocks.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = contentBlocks.at(-1);
     const topLeft = (overview.bpToPx({
         ...first,
@@ -162,9 +183,7 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
     if (!visibleRegions.length) {
         return null;
     }
-    // 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,
@@ -192,17 +211,25 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
                 } })) : (react_1.default.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
         })));
 });
-exports.default = (0, mobx_react_1.observer)(function OverviewScalebar({ model, children, }) {
+const OverviewScalebar = (0, mobx_react_1.observer)(function ({ model, children, }) {
     const { classes } = useStyles();
     const { totalBp, width, cytobandOffset, displayedRegions } = model;
-    const overview = Base1DViewModel_1.default.create({
-        displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
-        interRegionPaddingWidth: 0,
-        minimumBlockWidth: model.minimumBlockWidth,
-    });
     const modWidth = width - cytobandOffset;
-    overview.setVolatileWidth(modWidth);
-    overview.showAllRegions();
+    const overview = (0, react_1.useMemo)(() => {
+        const overview = Base1DViewModel_1.default.create({
+            displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+            interRegionPaddingWidth: 0,
+            minimumBlockWidth: model.minimumBlockWidth,
+        });
+        overview.setVolatileWidth(modWidth);
+        overview.showAllRegions();
+        return overview;
+    }, [
+        JSON.stringify(displayedRegions),
+        model.minimumBlockWidth,
+        modWidth,
+        displayedRegions,
+    ]);
     const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(OverviewRubberband_1.default, { model: model, overview: overview, ControlComponent: react_1.default.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
@@ -213,3 +240,4 @@ exports.default = (0, mobx_react_1.observer)(function OverviewScalebar({ model,
 });
 var Cytobands_2 = require("./Cytobands");
 Object.defineProperty(exports, "Cytobands", { enumerable: true, get: function () { return __importDefault(Cytobands_2).default; } });
+exports.default = OverviewScalebar;