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

package/dist/BaseLinearDisplay/models/util.js

@@ -20,8 +20,10 @@ function getDisplayStr(totalBytes) {
 exports.getDisplayStr = getDisplayStr;
 // stabilize clipid under test for snapshot
 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('-');
 }
 exports.getId = getId;
 async function getFeatureDensityStatsPre(self) {

package/dist/LaunchLinearGenomeView/index.js

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const util_1 = require("@jbrowse/core/util");
-const searchUtils_1 = require("..//searchUtils");
+const searchUtils_1 = require("../searchUtils");
 exports.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', {});
@@ -23,6 +23,12 @@ exports.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/dist/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/dist/LinearBasicDisplay/model.js

@@ -34,7 +34,7 @@ const mobx_state_tree_1 = require("mobx-state-tree");
 const Visibility_1 = __importDefault(require("@mui/icons-material/Visibility"));
 // locals
 const BaseLinearDisplay_1 = require("../BaseLinearDisplay");
-const SetMaxHeightDlg = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetMaxHeight'))));
+const SetMaxHeightDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/SetMaxHeight'))));
 /**
  * #stateModel LinearBasicDisplay
  * #category display
@@ -202,7 +202,7 @@ function stateModelFactory(configSchema) {
                         label: 'Set max height',
                         onClick: () => {
                             (0, util_1.getSession)(self).queueDialog(handleClose => [
-                                SetMaxHeightDlg,
+                                SetMaxHeightDialog,
                                 { model: self, handleClose },
                             ]);
                         },

package/dist/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/dist/LinearGenomeView/components/ExportSvgDialog.js

@@ -35,7 +35,7 @@ function LoadingMessage() {
 function useSvgLocal(key, val) {
     return (0, util_1.useLocalStorage)('svg-' + key, val);
 }
-function ExportSvgDlg({ model, handleClose, }) {
+function ExportSvgDialog({ model, handleClose, }) {
     const session = (0, util_1.getSession)(model);
     const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
     const [rasterizeLayers, setRasterizeLayers] = (0, react_1.useState)(offscreenCanvas);
@@ -80,4 +80,4 @@ function ExportSvgDlg({ model, handleClose, }) {
                     }
                 } }, "Submit"))));
 }
-exports.default = ExportSvgDlg;
+exports.default = ExportSvgDialog;

package/dist/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/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -26,7 +26,6 @@ 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 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
@@ -38,9 +37,10 @@ const blockTypes_1 = require("@jbrowse/core/util/blockTypes");
 // locals
 const __1 = require("..");
 const util_2 = require("../util");
+const util_3 = require("./util");
 const OverviewRubberband_1 = __importDefault(require("./OverviewRubberband"));
 const Cytobands_1 = __importDefault(require("./Cytobands"));
-const util_3 = require("./util");
+const OverviewScalebarPolygon_1 = __importDefault(require("./OverviewScalebarPolygon"));
 const wholeSeqSpacer = 2;
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     scalebar: {
@@ -94,56 +94,14 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         position: 'absolute',
     },
 }));
-const Polygon = (0, mobx_react_1.observer)(function ({ model, overview, useOffset = true, }) {
-    const theme = (0, material_1.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, __1.HEADER_BAR_HEIGHT],
-        [endPx, __1.HEADER_BAR_HEIGHT],
-        [topRight, 0],
-        [topLeft, 0],
-    ];
-    return (react_1.default.createElement("polygon", { points: points.toString(), fill: (0, material_1.alpha)(polygonColor, 0.3), stroke: (0, material_1.alpha)(polygonColor, 0.8) }));
-});
-exports.Polygon = Polygon;
 const OverviewBox = (0, mobx_react_1.observer)(function ({ scale, model, block, overview, }) {
     const { classes, cx } = useStyles();
     const theme = (0, material_1.useTheme)();
     const { cytobandOffset, showCytobands } = model;
-    const { start, end, reversed, refName, assemblyName } = block;
-    const { majorPitch } = (0, util_2.chooseGridPitch)(scale, 120, 15);
+    const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = (0, util_1.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 && (0, util_3.getCytobands)(assembly, block.refName).length;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(material_1.Typography, { style: {
@@ -161,16 +119,28 @@ const OverviewBox = (0, mobx_react_1.observer)(function ({ scale, model, block,
                 width: block.widthPx,
                 borderColor: refNameColor,
             } },
-            !canDisplayCytobands
-                ? tickLabels.map((tickLabel, labelIdx) => (react_1.default.createElement(material_1.Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
-                        left: ((labelIdx + 1) * majorPitch) / scale,
-                        pointerEvents: 'none',
-                        color: refNameColor,
-                    } }, (0, util_1.getTickDisplayStr)(tickLabel, overview.bpPerPx))))
-                : null,
+            !canDisplayCytobands ? (react_1.default.createElement(TickLabels, { model: model, overview: overview, scale: scale, block: block })) : null,
             canDisplayCytobands ? (react_1.default.createElement("svg", { style: { width: '100%' } },
                 react_1.default.createElement(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }))) : null)));
 });
+const TickLabels = (0, mobx_react_1.observer)(function ({ block, scale, overview, model, }) {
+    const { classes } = useStyles();
+    const { start, end, reversed, refName, assemblyName } = block;
+    const { majorPitch } = (0, util_2.chooseGridPitch)(scale, 120, 15);
+    const { assemblyManager } = (0, util_1.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_1.default.createElement(material_1.Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scalebarLabel, variant: "body2", style: {
+            left: ((labelIdx + 1) * majorPitch) / scale,
+            pointerEvents: 'none',
+            color: refNameColor,
+        } }, (0, util_1.getTickDisplayStr)(tickLabel, overview.bpPerPx))));
+});
 const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
@@ -235,9 +205,7 @@ const OverviewScalebar = (0, mobx_react_1.observer)(function ({ model, children,
         react_1.default.createElement(OverviewRubberband_1.default, { model: model, overview: overview, ControlComponent: react_1.default.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),
         react_1.default.createElement("div", { className: classes.overview },
             react_1.default.createElement("svg", { height: __1.HEADER_BAR_HEIGHT, className: classes.overviewSvg },
-                react_1.default.createElement(Polygon, { model: model, overview: overview })),
+                react_1.default.createElement(OverviewScalebarPolygon_1.default, { model: model, overview: overview })),
             children)));
 });
-var Cytobands_2 = require("./Cytobands");
-Object.defineProperty(exports, "Cytobands", { enumerable: true, get: function () { return __importDefault(Cytobands_2).default; } });
 exports.default = OverviewScalebar;

package/dist/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/dist/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+// locals
+const __1 = require("..");
+const OverviewScalebarPolygon = (0, mobx_react_1.observer)(function ({ model, overview, useOffset = true, }) {
+    const theme = (0, material_1.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, __1.HEADER_BAR_HEIGHT],
+        [endPx, __1.HEADER_BAR_HEIGHT],
+        [topRight, 0],
+        [topLeft, 0],
+    ];
+    return (react_1.default.createElement("polygon", { points: points.toString(), fill: (0, material_1.alpha)(polygonColor, 0.3), stroke: (0, material_1.alpha)(polygonColor, 0.8) }));
+});
+exports.default = OverviewScalebarPolygon;

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

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

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

@@ -34,7 +34,6 @@ const material_1 = require("@mui/material");
 const util_2 = require("./util");
 const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
 const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
-    var _a;
     const session = (0, util_1.getSession)(model);
     const { assemblyManager } = session;
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -73,6 +72,14 @@ const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSele
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     // heuristic, text width + 60 accommodates help icon and search icon
     const width = Math.min(Math.max((0, util_1.measureText)(inputBoxVal, 14) + 100, minWidth), maxWidth);
+    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
+    const regionOptions = (0, react_1.useMemo)(() => (regions === null || regions === void 0 ? void 0 : regions.map(option => ({
+        result: new BaseResults_1.RefSequenceResult({
+            refName: option.refName,
+            label: option.refName,
+            matchedAttribute: 'refName',
+        }),
+    }))) || [], [regions]);
     // notes on implementation:
     // The selectOnFocus setting helps highlight the field when clicked
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -98,14 +105,6 @@ const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSele
                     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 BaseResults_1.RefSequenceResult({
-                        refName: option.refName,
-                        label: option.refName,
-                        matchedAttribute: 'refName',
-                    }),
-                }))) || []
-                : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => (react_1.default.createElement(AutocompleteTextField_1.default, { 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 }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => (react_1.default.createElement(AutocompleteTextField_1.default, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
 });
 exports.default = RefNameAutocomplete;

package/dist/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
      */

package/dist/LinearGenomeView/model.js

@@ -447,26 +447,26 @@ function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        toggleHeader() {
-            self.hideHeader = !self.hideHeader;
+        setHideHeader(b) {
+            self.hideHeader = b;
         },
         /**
          * #action
          */
-        toggleHeaderOverview() {
-            self.hideHeaderOverview = !self.hideHeaderOverview;
+        setHideHeaderOverview(b) {
+            self.hideHeaderOverview = b;
         },
         /**
          * #action
          */
-        toggleNoTracksActive() {
-            self.hideNoTracksActive = !self.hideNoTracksActive;
+        setHideNoTracksActive(b) {
+            self.hideNoTracksActive = b;
         },
         /**
          * #action
          */
-        toggleShowGridlines() {
-            self.showGridlines = !self.showGridlines;
+        setShowGridlines(b) {
+            self.showGridlines = b;
         },
         /**
          * #action
@@ -642,8 +642,8 @@ function stateModelFactory(pluginManager) {
         /**
          * #action
          */
-        toggleCenterLine() {
-            self.showCenterLine = !self.showCenterLine;
+        setShowCenterLine(b) {
+            self.showCenterLine = b;
         },
         /**
          * #action
@@ -920,32 +920,32 @@ function stateModelFactory(pluginManager) {
                             label: 'Show center line',
                             type: 'checkbox',
                             checked: self.showCenterLine,
-                            onClick: self.toggleCenterLine,
+                            onClick: () => self.setShowCenterLine(!self.showCenterLine),
                         },
                         {
                             label: 'Show header',
                             type: 'checkbox',
                             checked: !self.hideHeader,
-                            onClick: self.toggleHeader,
+                            onClick: () => self.setHideHeader(!self.hideHeader),
                         },
                         {
                             label: 'Show header overview',
                             type: 'checkbox',
                             checked: !self.hideHeaderOverview,
-                            onClick: self.toggleHeaderOverview,
+                            onClick: () => self.setHideHeaderOverview(!self.hideHeaderOverview),
                             disabled: self.hideHeader,
                         },
                         {
                             label: 'Show no tracks active button',
                             type: 'checkbox',
                             checked: !self.hideNoTracksActive,
-                            onClick: self.toggleNoTracksActive,
+                            onClick: () => self.setHideNoTracksActive(!self.hideNoTracksActive),
                         },
                         {
                             label: 'Show guidelines',
                             type: 'checkbox',
                             checked: self.showGridlines,
-                            onClick: self.toggleShowGridlines,
+                            onClick: () => self.setShowGridlines(!self.showGridlines),
                         },
                         ...(canShowCytobands
                             ? [

package/dist/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -10,9 +10,9 @@ const material_1 = require("@mui/material");
 // locals
 const __1 = require("..");
 const Cytobands_1 = __importDefault(require("../components/Cytobands"));
-const OverviewScalebar_1 = require("../components/OverviewScalebar");
 const SVGRuler_1 = __importDefault(require("./SVGRuler"));
 const SVGScalebar_1 = __importDefault(require("./SVGScalebar"));
+const OverviewScalebarPolygon_1 = __importDefault(require("../components/OverviewScalebarPolygon"));
 function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     const { width, assemblyNames, showCytobands, displayedRegions } = model;
     const { assemblyManager } = (0, util_1.getSession)(model);
@@ -49,7 +49,7 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
             react_1.default.createElement(Cytobands_1.default, { overview: overview, assembly: assembly, block: block }),
             react_1.default.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: __1.HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             react_1.default.createElement("g", { transform: `translate(0,${__1.HEADER_OVERVIEW_HEIGHT})` },
-                react_1.default.createElement(OverviewScalebar_1.Polygon, { overview: overview, model: model, useOffset: false })))) : null,
+                react_1.default.createElement(OverviewScalebarPolygon_1.default, { overview: overview, model: model, useOffset: false })))) : null,
         react_1.default.createElement("g", { transform: `translate(0 ${fontSize + y})` },
             react_1.default.createElement(SVGScalebar_1.default, { model: model, fontSize: fontSize })),
         react_1.default.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },