@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearGenomeView/components/Header.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { FormGroup } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import HeaderPanControls from './HeaderPanControls';
-import HeaderRegionWidth from './HeaderRegionWidth';
-import HeaderTrackSelectorButton from './HeaderTrackSelectorButton';
-import HeaderZoomControls from './HeaderZoomControls';
-import OverviewScalebar from './OverviewScalebar';
-import SearchBox from './SearchBox';
-import { HEADER_BAR_HEIGHT } from '../consts';
+import HeaderPanControls from "./HeaderPanControls.js";
+import HeaderRegionWidth from "./HeaderRegionWidth.js";
+import HeaderTrackSelectorButton from "./HeaderTrackSelectorButton.js";
+import HeaderZoomControls from "./HeaderZoomControls.js";
+import OverviewScalebar from "./OverviewScalebar.js";
+import SearchBox from "./SearchBox.js";
+import { HEADER_BAR_HEIGHT } from "../consts.js";
 const useStyles = makeStyles()({
     headerBar: {
         display: 'flex',
@@ -26,7 +26,7 @@ const Controls = function ({ model }) {
     const { classes } = useStyles();
     return (_jsxs("div", { className: classes.headerBar, children: [_jsx(HeaderTrackSelectorButton, { model: model }), _jsx("div", { className: classes.spacer }), _jsxs(FormGroup, { row: true, className: classes.headerForm, children: [_jsx(HeaderPanControls, { model: model }), _jsx(SearchBox, { model: model })] }), _jsx(HeaderRegionWidth, { model: model }), _jsx(HeaderZoomControls, { model: model }), _jsx("div", { className: classes.spacer })] }));
 };
-const LinearGenomeViewHeader = observer(function ({ model, }) {
+const LinearGenomeViewHeader = observer(function LinearGenomeViewHeader({ model, }) {
     const { hideHeader, hideHeaderOverview } = model;
     return !hideHeader ? (hideHeaderOverview ? (_jsx(Controls, { model: model })) : (_jsx(OverviewScalebar, { model: model, children: _jsx(Controls, { model: model }) }))) : null;
 });

package/esm/LinearGenomeView/components/HeaderPanControls.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { Button, alpha } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { SPACING } from '../consts';
+import { SPACING } from "../consts.js";
 const useStyles = makeStyles()(theme => ({
     panButton: {
         background: alpha(theme.palette.background.paper, 0.8),

package/esm/LinearGenomeView/components/HeaderRegionWidth.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { getBpDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     bp: {
         display: 'flex',
@@ -11,9 +10,9 @@ const useStyles = makeStyles()({
         cursor: 'pointer',
     },
 });
-const HeaderRegionWidth = observer(function ({ model, }) {
+const HeaderRegionWidth = observer(function HeaderRegionWidth({ model, }) {
     const { classes } = useStyles();
-    const { coarseTotalBp } = model;
-    return (_jsx(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: getBpDisplayStr(coarseTotalBp) }));
+    const { coarseTotalBpDisplayStr } = model;
+    return (_jsx(Typography, { variant: "body2", color: "textSecondary", className: classes.bp, children: coarseTotalBpDisplayStr }));
 });
 export default HeaderRegionWidth;

package/esm/LinearGenomeView/components/HeaderTrackSelectorButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     toggleButton: {
         height: 44,
@@ -10,7 +10,7 @@ const useStyles = makeStyles()(theme => ({
         marginLeft: theme.spacing(4),
     },
 }));
-const HeaderTrackSelectorButton = observer(function ({ model, }) {
+const HeaderTrackSelectorButton = observer(function HeaderTrackSelectorButton({ model, }) {
     const { classes } = useStyles();
     return (_jsx(IconButton, { onClick: model.activateTrackSelector, className: classes.toggleButton, title: "Open track selector", value: "track_select", children: _jsx(TrackSelectorIcon, {}) }));
 });

package/esm/LinearGenomeView/components/HeaderZoomControls.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { lazy, useEffect, useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getBpDisplayStr, getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import MoreVert from '@mui/icons-material/MoreVert';
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton, Slider, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-const RegionWidthEditorDialog = lazy(() => import('./RegionWidthEditorDialog'));
+const RegionWidthEditorDialog = lazy(() => import("./RegionWidthEditorDialog.js"));
 const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
@@ -24,7 +24,7 @@ function ValueLabelComponent(props) {
     const { children, open, value } = props;
     return (_jsx(Tooltip, { open: open, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children }));
 }
-const HeaderZoomControls = observer(function ({ model, }) {
+const HeaderZoomControls = observer(function HeaderZoomControls({ model, }) {
     const { classes } = useStyles();
     const { width, maxBpPerPx, minBpPerPx, bpPerPx } = model;
     const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../model';
+import type { LinearGenomeViewModel } from '../model.ts';
 type LGV = LinearGenomeViewModel;
 declare const Highlight: ({ model, highlight, }: {
     model: LGV;

package/esm/LinearGenomeView/components/Highlight.js

@@ -3,16 +3,17 @@ import { useRef, useState } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
 import CloseIcon from '@mui/icons-material/Close';
 import LinkIcon from '@mui/icons-material/Link';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
         position: 'absolute',
+        left: 0,
         overflow: 'hidden',
         background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
     },
@@ -23,8 +24,7 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 3,
     },
 }));
-const Highlight = observer(function ({ model, highlight, }) {
-    var _a;
+const Highlight = observer(function Highlight({ model, highlight, }) {
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
     const anchorEl = useRef(null);
@@ -55,15 +55,15 @@ const Highlight = observer(function ({ model, highlight, }) {
     const asm = assemblyManager.get(highlight.assemblyName);
     const h = mapCoords({
         ...highlight,
-        refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _a !== void 0 ? _a : highlight.refName,
+        refName: asm?.getCanonicalRefName(highlight.refName) ?? highlight.refName,
     });
     return h ? (_jsxs("div", { className: classes.highlight, style: {
-            left: h.left,
+            transform: `translateX(${h.left}px)`,
             width: h.width,
         }, children: [_jsx(Tooltip, { title: "Highlighted from URL parameter", arrow: true, children: _jsx(IconButton, { ref: anchorEl, className: classes.z3, onClick: () => {
                         setOpen(true);
                     }, children: _jsx(LinkIcon, { fontSize: "small", className: classes.linkIcon }) }) }), _jsx(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
-                    callback(session);
+                    callback();
                     handleClose();
                 }, open: open, onClose: handleClose, menuItems: [
                     {

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

@@ -1,6 +1,6 @@
 import type { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const LinearGenomeViewImportForm: ({ model, }: {
+declare const LinearGenomeViewImportForm: ({ model }: {
     model: LGV;
 }) => import("react/jsx-runtime").JSX.Element;
 export default LinearGenomeViewImportForm;

package/esm/LinearGenomeView/components/ImportForm.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
 import { Button, CircularProgress, Container, FormControl, Grid as Grid, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ImportFormRefNameAutocomplete from './ImportFormRefNameAutocomplete';
-import { handleSelectedRegion, navToOption } from '../../searchUtils';
+import ImportFormRefNameAutocomplete from "./ImportFormRefNameAutocomplete.js";
+import { handleSelectedRegion, navToOption } from "../../searchUtils.js";
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(2),
@@ -19,8 +19,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(4),
     },
 }));
-const LinearGenomeViewImportForm = observer(function ({ model, }) {
-    var _a;
+const LinearGenomeViewImportForm = observer(function LinearGenomeViewImportForm({ model }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { assemblyNames, assemblyManager } = session;
@@ -29,23 +28,22 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
     const [option, setOption] = useState();
     const assembly = assemblyManager.get(selectedAsm);
     const assemblyError = assemblyNames.length
-        ? assembly === null || assembly === void 0 ? void 0 : assembly.error
+        ? assembly?.error
         : 'No configured assemblies';
     const displayError = assemblyError || error;
     const [value, setValue] = useState('');
-    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
+    const regions = assembly?.regions;
     const assemblyLoaded = !!regions;
-    const r0 = regions ? ((_a = regions[0]) === null || _a === void 0 ? void 0 : _a.refName) || '' : '';
+    const r0 = regions ? regions[0]?.refName || '' : '';
     useEffect(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
     return (_jsxs("div", { className: classes.container, children: [displayError ? _jsx(ErrorMessage, { error: displayError }) : null, _jsx(Container, { className: classes.importFormContainer, children: _jsx("form", { onSubmit: async (event) => {
-                        var _a;
                         event.preventDefault();
                         model.setError(undefined);
                         if (value) {
                             try {
-                                if ((option === null || option === void 0 ? void 0 : option.getDisplayString()) === value &&
+                                if (option?.getDisplayString() === value &&
                                     option.hasLocation()) {
                                     await navToOption({
                                         option,
@@ -53,11 +51,15 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
                                         assemblyName: selectedAsm,
                                     });
                                 }
-                                else if ((_a = option === null || option === void 0 ? void 0 : option.results) === null || _a === void 0 ? void 0 : _a.length) {
+                                else if (option?.results?.length) {
                                     model.setSearchResults(option.results, option.getLabel(), selectedAsm);
                                 }
                                 else if (assembly) {
-                                    await handleSelectedRegion({ input: value, assembly, model });
+                                    await handleSelectedRegion({
+                                        input: value,
+                                        assembly,
+                                        model,
+                                    });
                                 }
                             }
                             catch (e) {

package/esm/LinearGenomeView/components/ImportFormRefNameAutocomplete.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-import RefNameAutocomplete from './RefNameAutocomplete';
-import { fetchResults } from './util';
-const ImportFormRefNameAutocomplete = observer(function ({ model, selectedAsm, value, setValue, setOption, }) {
+import RefNameAutocomplete from "./RefNameAutocomplete/index.js";
+import { fetchResults } from "./util.js";
+const ImportFormRefNameAutocomplete = observer(function ImportFormRefNameAutocomplete({ model, selectedAsm, value, setValue, setOption, }) {
     const session = getSession(model);
     const { assemblyManager, textSearchManager } = session;
     const { rankSearchResults } = model;

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import LinearGenomeViewContainer from './LinearGenomeViewContainer';
-const ImportForm = lazy(() => import('./ImportForm'));
-const LinearGenomeView = observer(function ({ model, }) {
-    const { error, initialized, hasDisplayedRegions } = model;
-    if (!initialized && !error) {
-        return _jsx(LoadingEllipses, { variant: "h6" });
+import LinearGenomeViewContainer from "./LinearGenomeViewContainer.js";
+const ImportForm = lazy(() => import("./ImportForm.js"));
+const LinearGenomeView = observer(function LinearGenomeView({ model, }) {
+    const { showLoading, showImportForm, loadingMessage } = model;
+    if (showLoading) {
+        return _jsx(LoadingEllipses, { variant: "h6", message: loadingMessage });
     }
-    else if (!hasDisplayedRegions || error) {
+    else if (showImportForm) {
         return _jsx(ImportForm, { model: model });
     }
     else {

package/esm/LinearGenomeView/components/LinearGenomeViewContainer.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Suspense, lazy, useEffect, useRef } from 'react';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import Paper from '@mui/material/Paper';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import TrackContainer from './TrackContainer';
-import TracksContainer from './TracksContainer';
-const NoTracksActiveButton = lazy(() => import('./NoTracksActiveButton'));
+import TrackContainer from "./TrackContainer.js";
+import TracksContainer from "./TracksContainer.js";
+const NoTracksActiveButton = lazy(() => import("./NoTracksActiveButton.js"));
 const useStyles = makeStyles()(theme => ({
     header: {
         background: theme.palette.background.paper,
@@ -22,7 +22,7 @@ const useStyles = makeStyles()(theme => ({
         position: 'relative',
     },
 }));
-const LinearGenomeViewContainer = observer(function ({ model, }) {
+const LinearGenomeViewContainer = observer(function LinearGenomeViewContainer({ model, }) {
     const { pinnedTracks, stickyViewHeaders, pinnedTracksTop, tracks, unpinnedTracks, } = model;
     const { classes } = useStyles();
     const session = getSession(model);
@@ -31,9 +31,8 @@ const LinearGenomeViewContainer = observer(function ({ model, }) {
     const HeaderComponent = model.HeaderComponent();
     useEffect(() => {
         function handleSelectView(e) {
-            var _a, _b;
-            if (e.target instanceof Element && ((_a = 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);
+            if (e.target instanceof Element && ref.current?.contains(e.target)) {
+                session.setFocusedViewId?.(model.id);
             }
         }
         document.addEventListener('mousedown', handleSelectView);

package/esm/LinearGenomeView/components/MiniControls.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import ZoomIn from '@mui/icons-material/ZoomIn';
 import ZoomOut from '@mui/icons-material/ZoomOut';
 import { IconButton, Paper, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     background: {
         position: 'absolute',
@@ -18,14 +18,14 @@ const useStyles = makeStyles()(theme => ({
         background: alpha(theme.palette.secondary.light, 0.2),
     },
 }));
-const MiniControls = observer(function ({ model, }) {
+const MiniControls = observer(function MiniControls({ model, }) {
     const { classes } = useStyles();
-    const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
+    const { id, bpPerPx, maxBpPerPx, minBpPerPx, hideHeader } = model;
     const { focusedViewId } = getSession(model);
-    return hideHeader ? (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(CascadingMenuButton, { menuItems: model.menuItems(), children: _jsx(ArrowDown, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_out", onClick: () => {
+    return hideHeader ? (_jsx(Paper, { className: classes.background, children: _jsxs(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined, children: [_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), children: _jsx(ArrowDown, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_out", onClick: () => {
                         model.zoom(bpPerPx * 2);
-                    }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1, children: _jsx(ZoomOut, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_in", onClick: () => {
+                    }, disabled: bpPerPx >= maxBpPerPx - 0.0001, children: _jsx(ZoomOut, { fontSize: "small" }) }), _jsx(IconButton, { "data-testid": "zoom_in", onClick: () => {
                         model.zoom(bpPerPx / 2);
-                    }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, children: _jsx(ZoomIn, { fontSize: "small" }) })] }) })) : null;
+                    }, disabled: bpPerPx <= minBpPerPx + 0.0001, children: _jsx(ZoomIn, { fontSize: "small" }) })] }) })) : null;
 });
 export default MiniControls;

package/esm/LinearGenomeView/components/NoTracksActiveButton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Paper, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     note: {
         textAlign: 'center',
@@ -13,7 +13,7 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 800,
     },
 }));
-const NoTracksActiveButton = observer(function ({ model, }) {
+const NoTracksActiveButton = observer(function NoTracksActiveButton({ model, }) {
     const { classes } = useStyles();
     const { hideNoTracksActive } = model;
     return (_jsx(Paper, { className: classes.note, children: !hideNoTracksActive ? (_jsxs(_Fragment, { children: [_jsx(Typography, { children: "No tracks active." }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: _jsx(TrackSelectorIcon, {}), children: "Open track selector" })] })) : (_jsx("div", { style: { height: '48px' } })) }));

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../model';
+import type { LinearGenomeViewModel } from '../model.ts';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 type LGV = LinearGenomeViewModel;
 declare const OverviewHighlight: ({ model, overview, }: {

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, notEmpty } from '@jbrowse/core/util';
 import { colord } from '@jbrowse/core/util/colord';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     highlight: {
         height: '100%',
         position: 'absolute',
+        left: 0,
         background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
         borderLeft: `1px solid ${theme.palette.highlight.main}`,
         borderRight: `1px solid ${theme.palette.highlight.main}`,
@@ -19,9 +20,8 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
     const { assemblyManager } = session;
     return highlight
         .map(r => {
-        var _a;
         const asm = assemblyManager.get(r.assemblyName);
-        const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
+        const refName = asm?.getCanonicalRefName(r.refName) ?? r.refName;
         const s = overview.bpToPx({
             ...r,
             refName,
@@ -41,8 +41,8 @@ const OverviewHighlight = observer(function OverviewHighlight({ model, overview,
     })
         .filter(notEmpty)
         .map(({ left, width }, idx) => (_jsx("div", { className: classes.highlight, style: {
-            width: width,
-            left: left,
+            width,
+            transform: `translateX(${left}px)`,
         } }, `${left}_${width}_${idx}`)));
 });
 export default OverviewHighlight;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip';
-import RubberbandSpan from './RubberbandSpan';
-import { getRelativeX } from './util';
+import OverviewRubberbandHoverTooltip from "./OverviewRubberbandHoverTooltip.js";
+import RubberbandSpan from "./RubberbandSpan.js";
+import { getRelativeX } from "./util.js";
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',

package/esm/LinearGenomeView/components/OverviewRubberbandHoverTooltip.js

@@ -1,26 +1,30 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
         height: '100%',
         width: 1,
         position: 'absolute',
+        left: 0,
     },
 });
-const OverviewRubberbandHoverTooltip = observer(function ({ model, open, guideX, overview, }) {
-    var _a;
+const OverviewRubberbandHoverTooltip = observer(function OverviewRubberbandHoverTooltip({ model, open, guideX, overview, }) {
     const { classes } = useStyles();
     const { cytobandOffset } = model;
     const { assemblyManager } = getSession(model);
     const px = overview.pxToBp(guideX - cytobandOffset);
     const assembly = assemblyManager.get(px.assemblyName);
-    const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
+    const cytoband = assembly?.cytobands?.find(f => px.coord > f.get('start') &&
         px.coord < f.get('end') &&
         px.refName === assembly.getCanonicalRefName(f.get('refName')));
-    return (_jsx(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name'), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('type')].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { left: guideX } }) }));
+    return (_jsx(Tooltip, { open: open, placement: "top", title: [
+            stringify(px),
+            cytoband?.get('name'),
+            cytoband?.get('type'),
+        ].join(' '), arrow: true, children: _jsx("div", { className: classes.guide, style: { transform: `translateX(${guideX}px)` } }) }));
 });
 export default OverviewRubberbandHoverTooltip;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -2,20 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { getEnv, getSession } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography, alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import Cytobands from './Cytobands';
-import OverviewHighlight from './OverviewHighlight';
-import OverviewRubberband from './OverviewRubberband';
-import OverviewScalebarPolygon from './OverviewScalebarPolygon';
-import OverviewScalebarTickLabels from './OverviewScalebarTickLabels';
-import { getCytobands } from './util';
-import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts';
+import Cytobands from "./Cytobands.js";
+import OverviewHighlight from "./OverviewHighlight.js";
+import OverviewRubberband from "./OverviewRubberband.js";
+import OverviewScalebarPolygon from "./OverviewScalebarPolygon.js";
+import OverviewScalebarTickLabels from "./OverviewScalebarTickLabels.js";
+import { getCytobands } from "./util.js";
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from "../consts.js";
 const wholeSeqSpacer = 2;
 const useStyles = makeStyles()(theme => ({
     scalebar: {
         height: HEADER_OVERVIEW_HEIGHT,
+        contain: 'layout style',
     },
     scalebarBorder: {
         border: '1px solid',
@@ -24,6 +25,7 @@ const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.background.default,
         position: 'absolute',
         top: 0,
+        left: 0,
         height: HEADER_OVERVIEW_HEIGHT,
         overflow: 'hidden',
     },
@@ -37,6 +39,7 @@ const useStyles = makeStyles()(theme => ({
     },
     scalebarRefName: {
         position: 'absolute',
+        left: 0,
         fontWeight: 'bold',
         pointerEvents: 'none',
         zIndex: 100,
@@ -47,6 +50,7 @@ const useStyles = makeStyles()(theme => ({
         pointerEvents: 'none',
         zIndex: 100,
         border: '1px solid',
+        left: 0,
     },
     overview: {
         height: HEADER_BAR_HEIGHT,
@@ -58,17 +62,17 @@ const useStyles = makeStyles()(theme => ({
         position: 'absolute',
     },
 }));
-const OverviewBox = observer(function ({ scale, model, block, overview, }) {
-    const { classes, cx } = useStyles();
+const OverviewBox = observer(function OverviewBox({ scale, model, block, overview, }) {
+    const { classes } = useStyles();
     const theme = useTheme();
     const { cytobandOffset, showCytobands } = model;
     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 refNameColor = assembly?.getRefNameColor(refName);
     const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
     return (_jsxs("div", { children: [_jsx(Typography, { style: {
-                    left: block.offsetPx + 3,
+                    transform: `translateX(${block.offsetPx + 3}px)`,
                     color: canDisplayCytobands
                         ? theme.palette.text.primary
                         : refNameColor,
@@ -77,50 +81,54 @@ const OverviewBox = observer(function ({ scale, model, block, overview, }) {
                     : reversed
                         ? classes.scalebarContigReverse
                         : classes.scalebarContigForward, !canDisplayCytobands ? classes.scalebarBorder : undefined), style: {
-                    left: block.offsetPx + cytobandOffset,
+                    transform: `translateX(${block.offsetPx + cytobandOffset}px)`,
                     width: block.widthPx,
                     borderColor: refNameColor,
                 }, children: canDisplayCytobands ? (_jsx("svg", { style: { width: '100%' }, children: _jsx(Cytobands, { overview: overview, assembly: assembly, block: block }) })) : (_jsx(OverviewScalebarTickLabels, { model: model, overview: overview, scale: scale, block: block })) })] }));
 });
-const Scalebar = observer(function ({ model, scale, overview, }) {
-    const { classes } = useStyles();
+const VisibleRegionBox = observer(function VisibleRegionBox({ model, overview, className, }) {
     const theme = useTheme();
+    const scalebarColor = theme.palette.tertiary.light;
     const { dynamicBlocks, showCytobands, cytobandOffset } = model;
-    const { pluginManager } = getEnv(model);
     const visibleRegions = dynamicBlocks.contentBlocks;
-    const overviewVisibleRegions = overview.dynamicBlocks;
-    const scalebarColor = theme.palette.tertiary.light;
     if (!visibleRegions.length) {
         return null;
     }
     const first = visibleRegions.at(0);
     const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
-        ...first,
+        refName: first.refName,
         coord: first.reversed ? first.end : first.start,
     }) || 0;
     const lastOverviewPx = overview.bpToPx({
-        ...last,
+        refName: last.refName,
         coord: last.reversed ? last.start : last.end,
     }) || 0;
     const color = showCytobands ? '#f00' : scalebarColor;
     const transparency = showCytobands ? 0.1 : 0.3;
+    const left = firstOverviewPx + cytobandOffset;
+    return (_jsx("div", { className: className, style: {
+            width: lastOverviewPx - firstOverviewPx,
+            transform: `translateX(${left}px)`,
+            background: alpha(color, transparency),
+            borderColor: color,
+        } }));
+});
+const Scalebar = observer(function Scalebar({ model, scale, overview, }) {
+    const { classes } = useStyles();
+    const { pluginManager } = getEnv(model);
+    const overviewVisibleRegions = overview.dynamicBlocks;
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-OverviewScalebarComponent', undefined, { model, overview });
-    return (_jsxs("div", { className: classes.scalebar, children: [_jsx("div", { className: classes.scalebarVisibleRegion, style: {
-                    width: lastOverviewPx - firstOverviewPx,
-                    left: firstOverviewPx + cytobandOffset,
-                    background: alpha(color, transparency),
-                    borderColor: color,
-                } }), overviewVisibleRegions.map((block, idx) => {
+    return (_jsxs("div", { className: classes.scalebar, children: [_jsx(VisibleRegionBox, { model: model, overview: overview, className: classes.scalebarVisibleRegion }), overviewVisibleRegions.map((block, idx) => {
                 return !(block.type === 'ContentBlock') ? (_jsx("div", { className: classes.scalebarContig, style: {
                         width: block.widthPx,
-                        left: block.offsetPx,
+                        transform: `translateX(${block.offsetPx}px)`,
                         backgroundColor: '#999',
                         backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
                     } }, `${JSON.stringify(block)}-${idx}`)) : (_jsx(OverviewBox, { scale: scale, block: block, model: model, overview: overview }, `${JSON.stringify(block)}-${idx}`));
             }), _jsx(OverviewHighlight, { model: model, overview: overview }), additional] }));
 });
-const OverviewScalebar = observer(function ({ model, children, }) {
+const OverviewScalebar = observer(function OverviewScalebar({ model, children, }) {
     const { classes } = useStyles();
     const { minimumBlockWidth, totalBp, width, cytobandOffset, displayedRegions, } = model;
     const modWidth = width - cytobandOffset;