@jbrowse/plugin-linear-genome-view 5.0.0-beta.2 → 5.0.0-beta.20

package/esm/LinearGenomeView/components/OverviewHighlightBand.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
-// Renders a single absolute-positioned band over the overview scalebar. Used
-// for both LGV `view.highlight` entries and grid-bookmark bookmark highlights.
-// The 1px border keeps very narrow bands visible.
+import { observer } from 'mobx-react';
+// A single absolute-positioned band over the overview scalebar. The 1px border
+// keeps very narrow bands visible.
 const useStyles = makeStyles()({
     highlight: {
         height: '100%',
@@ -11,7 +11,7 @@ const useStyles = makeStyles()({
         left: 0,
     },
 });
-export default function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
+const OverviewHighlightBand = observer(function OverviewHighlightBand({ coords, background, borderColor, tooltip, }) {
     const { classes } = useStyles();
     const band = (_jsx("div", { className: classes.highlight, style: {
             transform: `translateX(${coords.left}px)`,
@@ -23,4 +23,5 @@ export default function OverviewHighlightBand({ coords, background, borderColor,
             }),
         } }));
     return tooltip ? (_jsx(Tooltip, { title: tooltip, arrow: true, children: band })) : (band);
-}
+});
+export default OverviewHighlightBand;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { getNotificationSink, stringify } from '@jbrowse/core/util';
 import { getRelativeX } from '@jbrowse/core/util/getRelativeX';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import RubberbandSpan from '../../shared/RubberbandSpan.js';
+import { useWindowDrag } from '../../shared/useWindowDrag.js';
 import OverviewRubberbandHoverTooltip from './OverviewRubberbandHoverTooltip.js';
 import { overviewPxToBp } from './util.js';
 const useStyles = makeStyles()({
@@ -25,61 +26,37 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     const controlsRef = useRef(null);
     const { classes } = useStyles();
     const mouseDragging = startX !== undefined;
-    useEffect(() => {
-        const el = controlsRef.current;
-        if (!mouseDragging || !el) {
-            return;
-        }
-        // the container's left edge is fixed for the duration of a drag, so measure
-        // it once here rather than calling getBoundingClientRect on every mousemove
-        const { left } = el.getBoundingClientRect();
-        function globalMouseMove(event) {
-            setCurrentX(event.clientX - left);
-        }
-        function globalMouseUp(event) {
-            // read the up position from the event so currentX state doesn't need to
-            // be a dep (which would re-subscribe these listeners every mousemove)
-            if (startX !== undefined) {
-                const offsetX = event.clientX - left;
-                if (Math.abs(offsetX - startX) > 3) {
-                    const leftPx = Math.min(startX, offsetX);
-                    const rightPx = Math.max(startX, offsetX);
-                    model.moveTo(overviewPxToBp(overview, leftPx, cytobandOffset), overviewPxToBp(overview, rightPx, cytobandOffset));
+    useWindowDrag(controlsRef, startX, {
+        onMove: setCurrentX,
+        onEnd: ({ startX, endX, isClick }) => {
+            if (!isClick) {
+                model.moveTo(overviewPxToBp(overview, Math.min(startX, endX), cytobandOffset), overviewPxToBp(overview, Math.max(startX, endX), cytobandOffset));
+            }
+            else {
+                const click = overviewPxToBp(overview, startX, cytobandOffset);
+                if (click.refName) {
+                    model.centerAt(click.coord0, click.refName, click.index);
                 }
                 else {
-                    const click = overviewPxToBp(overview, startX, cytobandOffset);
-                    if (click.refName) {
-                        model.centerAt(click.coord0, click.refName, click.index);
-                    }
-                    else {
-                        getNotificationSink(model).notify('unknown position clicked');
-                        console.error('unknown position clicked', click);
-                    }
+                    getNotificationSink(model).notify('unknown position clicked');
+                    console.error('unknown position clicked', click);
                 }
             }
             setStartX(undefined);
             setCurrentX(undefined);
             setGuideX(undefined);
-        }
-        function globalKeyDown(event) {
-            if (event.key === 'Escape') {
-                setStartX(undefined);
-                setCurrentX(undefined);
-            }
-        }
-        window.addEventListener('mousemove', globalMouseMove);
-        window.addEventListener('mouseup', globalMouseUp);
-        window.addEventListener('keydown', globalKeyDown);
-        return () => {
-            window.removeEventListener('mousemove', globalMouseMove);
-            window.removeEventListener('mouseup', globalMouseUp);
-            window.removeEventListener('keydown', globalKeyDown);
-        };
-    }, [startX, mouseDragging, model, overview, cytobandOffset]);
+        },
+        onCancel: () => {
+            setStartX(undefined);
+            setCurrentX(undefined);
+        },
+    });
     function mouseDown(event) {
-        event.preventDefault();
-        event.stopPropagation();
-        setStartX(getRelativeX(event, controlsRef.current));
+        if (event.button === 0) {
+            event.preventDefault();
+            event.stopPropagation();
+            setStartX(getRelativeX(event, controlsRef.current));
+        }
     }
     function mouseMove(event) {
         setGuideX(getRelativeX(event, controlsRef.current));

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -1,8 +1,9 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PluggableElements } from '@jbrowse/core/ui';
+import { alpha } from '@jbrowse/core/ui/palette';
 import { getEnv, getSession } from '@jbrowse/core/util';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { Typography, alpha, useTheme } from '@mui/material';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT } from '../consts.js';
 import { REF_NAME_LABEL_FONT_SIZE, getBlockRefName, showRefNameLabels, } from '../util.js';
@@ -89,8 +90,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
+    const { classes, theme } = useStyles();
     const { cytobandOffset, effectiveShowCytobands, overviewLayout: overview, } = model;
     const { reversed, refName, assemblyName } = block;
     const { assemblyManager } = getSession(model);
@@ -120,8 +120,7 @@ const OverviewBox = observer(function OverviewBox({ model, block, showRefName, }
         }, children: [showRefName ? (_jsx(Typography, { style: { color: refNameColor, left: 3 }, className: classes.scalebarRefName, children: refName })) : null, _jsx(OverviewScalebarTickLabels, { model: model, block: block, refNameColor: refNameColor, showRefName: showRefName })] }));
 });
 const VisibleRegionBox = observer(function VisibleRegionBox({ model, }) {
-    const { classes } = useStyles();
-    const theme = useTheme();
+    const { classes, theme } = useStyles();
     const { effectiveShowCytobands, cytobandOffset, overviewRegionPxSpan: span, } = model;
     if (!span) {
         return null;

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -24,10 +24,12 @@ function trapezoidPoints(top, bottom, height) {
 // class computed once per theme (makeStyles memoizes) — an on-screen zoom frame
 // then does zero color parsing. SVG export can't carry a CSS class, so that path
 // serializes explicit fill/stroke attributes instead (see `exportSvg` below).
+const FILL_OPACITY = 0.3;
+const STROKE_OPACITY = 0.8;
 const useStyles = makeStyles()(theme => ({
     polygon: {
-        fill: alpha(theme.palette.tertiary.light, 0.3),
-        stroke: alpha(theme.palette.tertiary.light, 0.8),
+        fill: alpha(theme.palette.tertiary.light, FILL_OPACITY),
+        stroke: alpha(theme.palette.tertiary.light, STROKE_OPACITY),
     },
 }));
 /**
@@ -57,6 +59,6 @@ const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ mode
     const top = transformPxSpan(extent, bpPerPx / overview.bpPerPx, overviewOffsetPx);
     const bottom = transformPxSpan(extent, 1, -offsetPx);
     const points = trapezoidPoints(top, bottom, HEADER_BAR_HEIGHT);
-    return exportSvg ? (_jsx("polygon", { points: points, ...getFillProps(alpha(theme.palette.tertiary.light, 0.3)), ...getStrokeProps(alpha(theme.palette.tertiary.light, 0.8)) })) : (_jsx("polygon", { points: points, className: classes.polygon }));
+    return exportSvg ? (_jsx("polygon", { points: points, ...getFillProps(alpha(theme.palette.tertiary.light, FILL_OPACITY)), ...getStrokeProps(alpha(theme.palette.tertiary.light, STROKE_OPACITY)) })) : (_jsx("polygon", { points: points, className: classes.polygon }));
 });
 export default OverviewScalebarPolygon;

package/esm/LinearGenomeView/components/PaddingBlocks.js

@@ -16,15 +16,10 @@ const useStyles = makeStyles()(theme => ({
     boundaryBlock: {
         background: theme.palette.action.disabledBackground,
     },
+    // opaque, since a translucent fill would darken unevenly where the
+    // container-level and per-track PaddingBlocks overlap
     regionSeparator: {
-        // opaque (not text.disabled, which is translucent): regions are now laid
-        // out contiguously so the separator paints directly over track data on both
-        // sides. A translucent fill would tint the data instead of masking it, and
-        // would darken unevenly where the container-level and per-track
-        // PaddingBlocks overlap. An opaque grey masks cleanly and stays seamless.
-        background: theme.palette.mode === 'dark'
-            ? theme.palette.grey[500]
-            : theme.palette.grey[600],
+        background: theme.palette.regionSeparator,
     },
     elided: {
         ...elidedBlockStyles,

package/esm/LinearGenomeView/components/RangeSelectOverlay.js

@@ -1,20 +1,19 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
 import { Menu } from '@jbrowse/core/ui';
 import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
+import RubberbandSpan from '../../shared/RubberbandSpan.js';
 import { stickyChromeTops } from '../stickyChrome.js';
 import VerticalGuide from './VerticalGuide.js';
-const RubberbandSpan = lazy(() => import('../../shared/RubberbandSpan.js'));
 const RangeSelectOverlay = observer(function RangeSelectOverlay({ model, range, menuOffsetX = 0, }) {
     const { stickyViewHeaders, headerHeight, isScalebarRefNameMenuOpen } = model;
     const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
-    const { guideX, rubberbandOn, rubberband, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, } = range;
-    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn && rubberband ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { left: rubberband.left, width: rubberband.width, viewWidth: model.width, stickyTop: scalebar, leftLabel: stringify(rubberband.leftBpOffset), rightLabel: stringify(rubberband.rightBpOffset), size: getBpDisplayStr(rubberband.numOfBpSelected) }) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
+    const { guideX, rubberband, anchorPosition, isClick, handleMenuItemClick, handleClose, } = range;
+    return (_jsxs(_Fragment, { children: [guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberband && !isClick ? (_jsx(RubberbandSpan, { left: rubberband.left, width: rubberband.width, viewWidth: model.width, stickyTop: scalebar, leftLabel: stringify(rubberband.leftBpOffset), rightLabel: stringify(rubberband.rightBpOffset), size: getBpDisplayStr(rubberband.numOfBpSelected) })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX + menuOffsetX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
-                    ? model.rubberbandClickMenuItems(clickBpOffset)
+                }, onMenuItemClick: handleMenuItemClick, open: true, onClose: handleClose, menuItems: isClick
+                    ? model.rubberbandClickMenuItems(model.pxToBp(anchorPosition.offsetX))
                     : model.rubberBandMenuItems() })) : null] }));
 });
 export default RangeSelectOverlay;

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

@@ -1,5 +1,6 @@
 import type { LinearGenomeViewModel } from '../model.ts';
-export default function RegionWidthEditorDialog({ model, handleClose, }: {
+declare const RegionWidthEditorDialog: ({ model, handleClose, }: {
     model: LinearGenomeViewModel;
     handleClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default RegionWidthEditorDialog;

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -3,12 +3,11 @@ import { useState } from 'react';
 import { SubmitDialog } from '@jbrowse/core/ui';
 import { parseBpString, toLocale } from '@jbrowse/core/util';
 import { TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
 function format(n) {
     return toLocale(Math.floor(n));
 }
-// not an observer: the initial value is seeded once and the field is
-// user-edited thereafter, so it shouldn't reactively reset if bpPerPx changes
-export default function RegionWidthEditorDialog({ model, handleClose, }) {
+const RegionWidthEditorDialog = observer(function RegionWidthEditorDialog({ model, handleClose, }) {
     const [val, setVal] = useState(() => format(model.bpPerPx * model.width));
     const bp = parseBpString(val);
     const valid = bp !== undefined && bp > 0;
@@ -20,4 +19,5 @@ export default function RegionWidthEditorDialog({ model, handleClose, }) {
         }, children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 30 }, children: [_jsx(Typography, { children: "Enter a specific number of base pairs to change the viewport to show, either in full or abbreviated as e.g. 500kb or 1.5Mbp. This is approximate and does not account for padding between regions or off-screen scrolling" }), _jsx(TextField, { label: "Zoom level (bp)", autoFocus: true, fullWidth: true, variant: "outlined", value: val, onChange: event => {
                         setVal(event.target.value);
                     } })] }) }));
-}
+});
+export default RegionWidthEditorDialog;

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

@@ -0,0 +1,5 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const ResizeAllTracksHandle: ({ model, }: {
+    model: LinearGenomeViewModel;
+}) => import("react").JSX.Element;
+export default ResizeAllTracksHandle;

package/esm/LinearGenomeView/components/ResizeAllTracksHandle.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { ResizeHandle } from '@jbrowse/core/ui';
+import { scrollPortOf } from '@jbrowse/core/util/hooks';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { observer } from 'mobx-react';
+import { RESIZE_ALL_HANDLE_HEIGHT } from '../consts.js';
+function useScrollPortExcess(ref, model, enabled) {
+    useLayoutEffect(() => {
+        const box = ref.current?.closest('[data-testid^="view-container-"]') ??
+            ref.current?.closest('[data-testid^="linear-genome-view-"]');
+        if (!enabled || !box || !('ResizeObserver' in window)) {
+            return;
+        }
+        const port = scrollPortOf(box);
+        const measure = () => {
+            const { marginTop, marginBottom } = getComputedStyle(box);
+            const outer = box.getBoundingClientRect().height +
+                Number.parseFloat(marginTop) +
+                Number.parseFloat(marginBottom);
+            model.setScrollPortExcess(Math.round(outer - (port?.clientHeight ?? window.innerHeight)));
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(box);
+        if (port) {
+            observer.observe(port);
+        }
+        else {
+            window.addEventListener('resize', measure);
+        }
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+            if (isAlive(model)) {
+                model.setScrollPortExcess(undefined);
+            }
+        };
+    }, [ref, model, enabled]);
+}
+const ResizeAllTracksHandle = observer(function ResizeAllTracksHandle({ model, }) {
+    const ref = useRef(null);
+    const drag = useRef({ from: new Map() });
+    const { isTopLevelView } = model;
+    useScrollPortExcess(ref, model, isTopLevelView);
+    return (_jsx("div", { ref: ref, style: isTopLevelView
+            ? { position: 'sticky', bottom: 0, zIndex: 300 }
+            : { position: 'relative', height: 0, zIndex: 300 }, children: _jsx(ResizeHandle, { grip: isTopLevelView || 'hover', "data-testid": "resize-all-tracks", title: isTopLevelView
+                ? 'Drag to resize all tracks, double-click to fit them to the window'
+                : 'Drag to resize all tracks', style: isTopLevelView
+                ? { height: RESIZE_ALL_HANDLE_HEIGHT }
+                : {
+                    height: RESIZE_ALL_HANDLE_HEIGHT,
+                    position: 'absolute',
+                    bottom: 0,
+                }, onDragStart: () => {
+                drag.current = { from: model.resizableTrackHeights };
+                for (const track of model.tracks) {
+                    track.setResizing(true);
+                }
+            }, 
+            // no value, so the distance from the press, every track scaled from
+            // where it was
+            onChange: distance => {
+                model.resizeTracks(distance, drag.current.from);
+            }, onDragEnd: () => {
+                for (const track of model.tracks) {
+                    track.setResizing(false);
+                }
+            }, onDoubleClick: () => {
+                model.fitTracksToWindow();
+            } }) }));
+});
+export default ResizeAllTracksHandle;

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

@@ -1,7 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
-declare const Rubberband: ({ model, ControlComponent, }: {
+declare const Rubberband: ({ model }: {
     model: LGV;
-    ControlComponent?: React.ReactElement;
 }) => import("react").JSX.Element;
 export default Rubberband;

package/esm/LinearGenomeView/components/Rubberband.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import { stickyChromeTops } from '../stickyChrome.js';
 import RangeSelectOverlay from './RangeSelectOverlay.js';
+import Scalebar from './Scalebar.js';
 import { useRangeSelect } from './useRangeSelect.js';
 const useStyles = makeStyles()({
     rubberbandControl: {
@@ -13,7 +14,7 @@ const useStyles = makeStyles()({
         zIndex: 825,
     },
 });
-const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
+const Rubberband = observer(function Rubberband({ model }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { stickyViewHeaders, headerHeight } = model;
@@ -24,6 +25,6 @@ const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx
                 // (TracksContainer): mouseout bubbles from every child, so crossing a
                 // refName or coordinate label inside the scalebar cleared the guide and
                 // the next mousemove put it straight back
-                onMouseLeave: range.mouseOut, children: ControlComponent })] }));
+                onMouseLeave: range.mouseOut, children: _jsx(Scalebar, { model: model }) })] }));
 });
 export default Rubberband;

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

@@ -1,9 +1,18 @@
-export default function SVGHighlightBand({ coords, height, color, label, labelColor, }: {
+export interface BandGap {
+    top: number;
+    height: number;
+}
+export declare function spansAround(gaps: BandGap[], height: number): {
+    top: number;
+    height: number;
+}[];
+export default function SVGHighlightBand({ coords, height, gaps, color, label, labelColor, }: {
     coords: {
         left: number;
         width: number;
     };
     height: number;
+    gaps: BandGap[];
     color: string;
     label?: string;
     labelColor: string;

package/esm/LinearGenomeView/components/SVGHighlightBand.js

@@ -1,9 +1,20 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getFillProps } from '@jbrowse/core/util';
+// The stretches of a band `height` tall left once the sorted, disjoint `gaps`
+// are cut out of it.
+export function spansAround(gaps, height) {
+    const edges = [0, ...gaps.flatMap(g => [g.top, g.top + g.height]), height];
+    return edges.flatMap((top, i) => {
+        const bottom = edges[i + 1];
+        return i % 2 === 0 && bottom !== undefined && bottom > top
+            ? [{ top, height: bottom - top }]
+            : [];
+    });
+}
 // One full-height SVG highlight band with an optional label at the top,
-// mirroring the on-screen HighlightBand div. Shared by the LGV native-highlight
-// export (SVGHighlights) and the grid-bookmark export (LGVHighlightSVG). The
-// label is hidden on bands too narrow to fit it.
-export default function SVGHighlightBand({ coords, height, color, label, labelColor, }) {
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: coords.left, y: 0, width: coords.width, height: height, ...getFillProps(color) }), label && coords.width > 3 ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
+// mirroring the on-screen HighlightBand div: a label wider than its band runs
+// past the band's right edge, and the band leaves out `gaps`, the tracks that
+// do not draw in genomic coordinates.
+export default function SVGHighlightBand({ coords, height, gaps, color, label, labelColor, }) {
+    return (_jsxs(_Fragment, { children: [spansAround(gaps, height).map(span => (_jsx("rect", { x: coords.left, y: span.top, width: coords.width, height: span.height, ...getFillProps(color) }, span.top))), label ? (_jsx("text", { x: coords.left + 3, y: 2, fontSize: 11, dominantBaseline: "hanging", ...getFillProps(labelColor), children: label })) : null] }));
 }

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

@@ -1,10 +1,6 @@
 import type { LinearGenomeViewModel } from '../index.ts';
-import type React from 'react';
 type LGV = LinearGenomeViewModel;
-interface ScalebarProps {
+declare const Scalebar: ({ model }: {
     model: LGV;
-    style?: React.CSSProperties;
-    className?: string;
-}
-declare const Scalebar: ({ model, style, className, }: ScalebarProps) => React.JSX.Element;
+}) => import("react").JSX.Element;
 export default Scalebar;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
+import { SCALE_BAR_HEIGHT } from '../consts.js';
 import Gridlines from './Gridlines.js';
 import PaddingBlocks from './PaddingBlocks.js';
 import ScalebarCoordinateLabels from './ScalebarCoordinateLabels.js';
@@ -14,15 +15,17 @@ const useStyles = makeStyles()({
     container: {
         overflow: 'clip',
         position: 'relative',
+        height: SCALE_BAR_HEIGHT,
+        boxSizing: 'border-box',
     },
 });
-const Scalebar = observer(function Scalebar({ model, style, className, }) {
+const Scalebar = observer(function Scalebar({ model }) {
     const { classes } = useStyles();
     return (_jsxs(Paper
-    // The rubberband owns presses on the scalebar (it wraps this as its
-    // ControlComponent), so the view's click-drag pan must not also start one
+    // The rubberband owns presses on the scalebar (it wraps this), so the
+    // view's click-drag pan must not also start one
     // on the paths where the rubberband doesn't stopPropagation — a press with
     // the refName menu already open. See ResizeHandle for the marker contract.
-    , { "data-gesture-owner": "true", className: cx(classes.container, className), variant: "outlined", style: style, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx(PaddingBlocks, { model: model, offset: 1 }), _jsx(ScalebarCoordinateLabels, { model: model }), _jsx(ScalebarRefNameLabels, { model: model })] }));
+    , { "data-gesture-owner": "true", className: classes.container, variant: "outlined", children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx(PaddingBlocks, { model: model, offset: 1 }), _jsx(ScalebarCoordinateLabels, { model: model }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 });
 export default Scalebar;