@jbrowse/plugin-linear-genome-view 2.10.0 → 2.10.2

package/dist/index.d.ts

@@ -964,10 +964,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -981,7 +981,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {
@@ -1283,10 +1283,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1300,7 +1300,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {
@@ -1612,10 +1612,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1629,7 +1629,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {
@@ -1931,10 +1931,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -1948,7 +1948,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {
@@ -2260,10 +2260,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -2277,7 +2277,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {
@@ -2579,10 +2579,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
                 setError(error: unknown): void;
-                toggleHeader(): void;
-                toggleHeaderOverview(): void;
-                toggleNoTracksActive(): void;
-                toggleShowGridlines(): void;
+                setHideHeader(b: boolean): void;
+                setHideHeaderOverview(b: boolean): void;
+                setHideNoTracksActive(b: boolean): void;
+                setShowGridlines(b: boolean): void;
                 scrollTo(offsetPx: number): number;
                 zoomTo(bpPerPx: number, offset?: number, centerAtOffset?: boolean): number;
                 setOffsets(left?: import("./LinearGenomeView").BpOffset | undefined, right?: import("./LinearGenomeView").BpOffset | undefined): void;
@@ -2596,7 +2596,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 closeView(): void;
                 toggleTrack(trackId: string): boolean;
                 setTrackLabels(setting: "offset" | "hidden" | "overlapping"): void;
-                toggleCenterLine(): void;
+                setShowCenterLine(b: boolean): void;
                 setDisplayedRegions(regions: import("@jbrowse/core/util").Region[]): void;
                 activateTrackSelector(): import("@jbrowse/core/util").Widget;
                 getSelectedRegions(leftOffset?: import("./LinearGenomeView").BpOffset | undefined, rightOffset?: import("./LinearGenomeView").BpOffset | undefined): {

package/esm/BaseLinearDisplay/models/util.js

@@ -16,8 +16,10 @@ export function getDisplayStr(totalBytes) {
 }
 // stabilize clipid under test for snapshot
 export function getId(id, index) {
-    const isJest = typeof jest === 'undefined';
-    return `clip-${isJest ? id : 'jest'}-${index}`;
+    const notJest = typeof jest === 'undefined';
+    return ['clip', notJest ? id : 'jest', index, notJest ? Math.random() : '']
+        .filter(f => !!f)
+        .join('-');
 }
 export async function getFeatureDensityStatsPre(self) {
     const view = getContainingView(self);

package/esm/LaunchLinearGenomeView/index.js

@@ -1,9 +1,9 @@
 import { when } from '@jbrowse/core/util';
-import { handleSelectedRegion } from '..//searchUtils';
+import { handleSelectedRegion } from '../searchUtils';
 export default (pluginManager) => {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
     // @ts-expect-error
-    async ({ session, assembly, loc, tracks = [], }) => {
+    async ({ session, assembly, loc, tracks = [], tracklist, nav, }) => {
         try {
             const { assemblyManager } = session;
             const view = session.addView('LinearGenomeView', {});
@@ -21,6 +21,12 @@ export default (pluginManager) => {
             if (idsNotFound.length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
+            if (tracklist) {
+                view.activateTrackSelector();
+            }
+            if (nav !== undefined) {
+                view.setHideHeader(!nav);
+            }
         }
         catch (e) {
             session.notify(`${e}`, 'error');

package/esm/LinearBasicDisplay/model.d.ts

@@ -37,9 +37,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined; /**
-         * #property
-         */
+        renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;
@@ -159,12 +157,11 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         }, {
             rendererTypeName: string;
             error: unknown;
-            message: string | undefined;
+            message: string | undefined; /**
+             * #action
+             */
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
-    /**
-     * #action
-     */
     readonly adapterConfig: any;
     readonly parentTrack: any;
     renderProps(): any;
@@ -193,9 +190,6 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
 } & {
     readonly currentBytesRequested: number;
     readonly currentFeatureScreenDensity: number;
-    /**
-     * #getter
-     */
     readonly maxFeatureScreenDensity: any;
     readonly featureDensityStatsReady: boolean;
     readonly maxAllowableBytes: number;
@@ -205,7 +199,9 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     setCurrStatsBpPerPx(n: number): void;
     setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
-    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStatsP(arg: any): void; /**
+     * #method
+     */
     setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     clearFeatureDensityStats(): void;
 } & {
@@ -275,9 +271,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     readonly rendererConfig: {
         [x: string]: any;
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any; /**
-         * #property
-         */
+        setSubschema(slotName: string, data: unknown): any;
     } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
 } & {
     /**
@@ -304,9 +298,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         config: {
             [x: string]: any;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-            setSubschema(slotName: string, data: unknown): any; /**
-             * #property
-             */
+            setSubschema(slotName: string, data: unknown): any;
         } & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>;
     };
     /**
@@ -341,9 +333,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
         isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     }, {
-        renderInProgress: AbortController | undefined; /**
-         * #property
-         */
+        renderInProgress: AbortController | undefined;
         filled: boolean;
         reactElement: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         features: Map<string, import("@jbrowse/core/util").Feature> | undefined;

package/esm/LinearBasicDisplay/model.js

@@ -6,7 +6,7 @@ import { types, getEnv } from 'mobx-state-tree';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 // locals
 import { BaseLinearDisplay } from '../BaseLinearDisplay';
-const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'));
+const SetMaxHeightDialog = lazy(() => import('./components/SetMaxHeight'));
 /**
  * #stateModel LinearBasicDisplay
  * #category display
@@ -174,7 +174,7 @@ function stateModelFactory(configSchema) {
                         label: 'Set max height',
                         onClick: () => {
                             getSession(self).queueDialog(handleClose => [
-                                SetMaxHeightDlg,
+                                SetMaxHeightDialog,
                                 { model: self, handleClose },
                             ]);
                         },

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExportSvgOptions } from '..';
-export default function ExportSvgDlg({ model, handleClose, }: {
+export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;
     };

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -10,7 +10,7 @@ function LoadingMessage() {
 function useSvgLocal(key, val) {
     return useLocalStorage('svg-' + key, val);
 }
-export default function ExportSvgDlg({ model, handleClose, }) {
+export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
     const [rasterizeLayers, setRasterizeLayers] = useState(offscreenCanvas);

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

@@ -1,16 +1,8 @@
 import React from 'react';
-import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import { LinearGenomeViewModel } from '..';
-declare const Polygon: ({ model, overview, useOffset, }: {
-    model: LGV;
-    overview: Base1DViewModel;
-    useOffset?: boolean | undefined;
-}) => React.JSX.Element | null;
 type LGV = LinearGenomeViewModel;
 declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export { Polygon };
-export { default as Cytobands } from './Cytobands';
 export default OverviewScalebar;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -9,9 +9,10 @@ import { ContentBlock } from '@jbrowse/core/util/blockTypes';
 // locals
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
 import { chooseGridPitch } from '../util';
+import { getCytobands } from './util';
 import OverviewRubberband from './OverviewRubberband';
 import Cytobands from './Cytobands';
-import { getCytobands } from './util';
+import OverviewScalebarPolygon from './OverviewScalebarPolygon';
 const wholeSeqSpacer = 2;
 const useStyles = makeStyles()(theme => ({
     scalebar: {
@@ -65,55 +66,14 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
     },
 }));
-const Polygon = observer(function ({ model, overview, useOffset = true, }) {
-    const theme = useTheme();
-    const multiplier = Number(useOffset);
-    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
-    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
-    const { tertiary, primary } = theme.palette;
-    const polygonColor = tertiary ? tertiary.light : primary.light;
-    // catches possible null from at's below
-    if (!contentBlocks.length) {
-        return null;
-    }
-    const first = contentBlocks.at(0);
-    const last = contentBlocks.at(-1);
-    const topLeft = (overview.bpToPx({
-        ...first,
-        coord: first.reversed ? first.end : first.start,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const topRight = (overview.bpToPx({
-        ...last,
-        coord: last.reversed ? last.start : last.end,
-    }) || 0) +
-        cytobandOffset * multiplier;
-    const startPx = Math.max(0, -offsetPx);
-    const endPx = startPx +
-        totalWidthPxWithoutBorders +
-        (contentBlocks.length * interRegionPaddingWidth) / 2;
-    const points = [
-        [startPx, HEADER_BAR_HEIGHT],
-        [endPx, HEADER_BAR_HEIGHT],
-        [topRight, 0],
-        [topLeft, 0],
-    ];
-    return (React.createElement("polygon", { points: points.toString(), fill: alpha(polygonColor, 0.3), stroke: alpha(polygonColor, 0.8) }));
-});
 const OverviewBox = observer(function ({ scale, model, block, overview, }) {
     const { classes, cx } = useStyles();
     const theme = useTheme();
     const { cytobandOffset, showCytobands } = model;
-    const { start, end, reversed, refName, assemblyName } = block;
-    const { majorPitch } = chooseGridPitch(scale, 120, 15);
+    const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = getSession(model);
     const assembly = assemblyManager.get(assemblyName);
     const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
-    const tickLabels = [];
-    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
-        const offsetLabel = (i + 1) * majorPitch;
-        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
-    }
     const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
     return (React.createElement("div", null,
         React.createElement(Typography, { style: {
@@ -131,16 +91,28 @@ const OverviewBox = observer(function ({ scale, model, block, overview, }) {
                 width: block.widthPx,
                 borderColor: refNameColor,
             } },
-            !canDisplayCytobands
-                ? tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
-                        left: ((labelIdx + 1) * majorPitch) / scale,
-                        pointerEvents: 'none',
-                        color: refNameColor,
-                    } }, getTickDisplayStr(tickLabel, overview.bpPerPx))))
-                : null,
+            !canDisplayCytobands ? (React.createElement(TickLabels, { model: model, overview: overview, scale: scale, block: block })) : null,
             canDisplayCytobands ? (React.createElement("svg", { style: { width: '100%' } },
                 React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }))) : null)));
 });
+const TickLabels = observer(function ({ block, scale, overview, model, }) {
+    const { classes } = useStyles();
+    const { start, end, reversed, refName, assemblyName } = block;
+    const { majorPitch } = chooseGridPitch(scale, 120, 15);
+    const { assemblyManager } = getSession(model);
+    const assembly = assemblyManager.get(assemblyName);
+    const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
+    const tickLabels = [];
+    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
+        const offsetLabel = (i + 1) * majorPitch;
+        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
+    }
+    return tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
+            left: ((labelIdx + 1) * majorPitch) / scale,
+            pointerEvents: 'none',
+            color: refNameColor,
+        } }, getTickDisplayStr(tickLabel, overview.bpPerPx))));
+});
 const Scalebar = observer(function ({ model, scale, overview, }) {
     const { classes } = useStyles();
     const theme = useTheme();
@@ -205,9 +177,7 @@ const OverviewScalebar = observer(function ({ model, children, }) {
         React.createElement(OverviewRubberband, { model: model, overview: overview, ControlComponent: React.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
         React.createElement("div", { className: classes.overview },
             React.createElement("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg },
-                React.createElement(Polygon, { model: model, overview: overview })),
+                React.createElement(OverviewScalebarPolygon, { model: model, overview: overview })),
             children)));
 });
-export { Polygon };
-export { default as Cytobands } from './Cytobands';
 export default OverviewScalebar;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import { LinearGenomeViewModel } from '..';
+declare const OverviewScalebarPolygon: ({ model, overview, useOffset, }: {
+    model: LinearGenomeViewModel;
+    overview: Base1DViewModel;
+    useOffset?: boolean | undefined;
+}) => React.JSX.Element | null;
+export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTheme, alpha } from '@mui/material';
+import { observer } from 'mobx-react';
+// locals
+import { HEADER_BAR_HEIGHT } from '..';
+const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset = true, }) {
+    const theme = useTheme();
+    const multiplier = Number(useOffset);
+    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
+    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
+    const { tertiary, primary } = theme.palette;
+    const polygonColor = tertiary ? tertiary.light : primary.light;
+    // catches possible null from at's below
+    if (!contentBlocks.length) {
+        return null;
+    }
+    const first = contentBlocks.at(0);
+    const last = contentBlocks.at(-1);
+    const topLeft = (overview.bpToPx({
+        ...first,
+        coord: first.reversed ? first.end : first.start,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const topRight = (overview.bpToPx({
+        ...last,
+        coord: last.reversed ? last.start : last.end,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const startPx = Math.max(0, -offsetPx);
+    const endPx = startPx +
+        totalWidthPxWithoutBorders +
+        (contentBlocks.length * interRegionPaddingWidth) / 2;
+    const points = [
+        [startPx, HEADER_BAR_HEIGHT],
+        [endPx, HEADER_BAR_HEIGHT],
+        [topRight, 0],
+        [topLeft, 0],
+    ];
+    return (React.createElement("polygon", { points: points.toString(), fill: alpha(polygonColor, 0.3), stroke: alpha(polygonColor, 0.8) }));
+});
+export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.js

@@ -10,7 +10,7 @@ function HelpAdornment() {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
             React.createElement(HelpIcon, { fontSize: "small" })),
-        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: React.createElement("div", null) },
+        isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: null },
             React.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
 }
 export default function EndAdornment({ showHelp, endAdornment, }) {

package/esm/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { observer } from 'mobx-react';
 import { getSession, useDebounce, measureText } from '@jbrowse/core/util';
 import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
@@ -6,7 +6,6 @@ import { Autocomplete } from '@mui/material';
 import { getDeduplicatedResult, getFiltered } from './util';
 import AutocompleteTextField from './AutocompleteTextField';
 const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
-    var _a;
     const session = getSession(model);
     const { assemblyManager } = session;
     const [open, setOpen] = useState(false);
@@ -45,6 +44,14 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     // heuristic, text width + 60 accommodates help icon and search icon
     const width = Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth);
+    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
+    const regionOptions = useMemo(() => (regions === null || regions === void 0 ? void 0 : regions.map(option => ({
+        result: new RefSequenceResult({
+            refName: option.refName,
+            label: option.refName,
+            matchedAttribute: 'refName',
+        }),
+    }))) || [], [regions]);
     // notes on implementation:
     // The selectOnFocus setting helps highlight the field when clicked
     return (React.createElement(React.Fragment, null,
@@ -70,14 +77,6 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                     onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
                 }
                 setInputValue(inputBoxVal);
-            }, options: !(searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length)
-                ? ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.regions) === null || _a === void 0 ? void 0 : _a.map(option => ({
-                    result: new RefSequenceResult({
-                        refName: option.refName,
-                        label: option.refName,
-                        matchedAttribute: 'refName',
-                    }),
-                }))) || []
-                : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
+            }, options: (searchOptions === null || searchOptions === void 0 ? void 0 : searchOptions.length) ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
 });
 export default RefNameAutocomplete;

package/esm/LinearGenomeView/model.d.ts

@@ -238,19 +238,19 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    toggleHeader(): void;
+    setHideHeader(b: boolean): void;
     /**
      * #action
      */
-    toggleHeaderOverview(): void;
+    setHideHeaderOverview(b: boolean): void;
     /**
      * #action
      */
-    toggleNoTracksActive(): void;
+    setHideNoTracksActive(b: boolean): void;
     /**
      * #action
      */
-    toggleShowGridlines(): void;
+    setShowGridlines(b: boolean): void;
     /**
      * #action
      */
@@ -306,7 +306,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    toggleCenterLine(): void;
+    setShowCenterLine(b: boolean): void;
     /**
      * #action
      */