@jbrowse/plugin-linear-genome-view 3.7.0 → 4.0.1

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -2,25 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
 import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { HEADER_BAR_HEIGHT } from '../consts';
-const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset = true, }) {
+import { HEADER_BAR_HEIGHT } from "../consts.js";
+const OverviewScalebarPolygon = observer(function OverviewScalebarPolygon({ model, overview, useOffset = true, }) {
     const theme = useTheme();
+    const polygonColor = theme.palette.tertiary.light;
     const multiplier = Number(useOffset);
     const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
     const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
-    const polygonColor = theme.palette.tertiary.light;
     if (!contentBlocks.length) {
         return null;
     }
     const first = contentBlocks.at(0);
     const last = contentBlocks.at(-1);
     const topLeft = (overview.bpToPx({
-        ...first,
+        refName: first.refName,
         coord: first.reversed ? first.end : first.start,
     }) || 0) +
         cytobandOffset * multiplier;
     const topRight = (overview.bpToPx({
-        ...last,
+        refName: last.refName,
         coord: last.reversed ? last.start : last.end,
     }) || 0) +
         cytobandOffset * multiplier;

package/esm/LinearGenomeView/components/OverviewScalebarTickLabels.js

@@ -1,34 +1,34 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession, getTickDisplayStr } 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';
-import { HEADER_OVERVIEW_HEIGHT } from '../consts';
-import { chooseGridPitch } from '../util';
+import { HEADER_OVERVIEW_HEIGHT } from "../consts.js";
+import { chooseGridPitch } from "../util.js";
 const useStyles = makeStyles()({
     scalebarLabel: {
         height: HEADER_OVERVIEW_HEIGHT,
         position: 'absolute',
+        left: 0,
         display: 'flex',
         justifyContent: 'center',
         pointerEvents: 'none',
     },
 });
-const OverviewScalebarTickLabels = observer(function ({ block, scale, overview, model, }) {
+const OverviewScalebarTickLabels = observer(function OverviewScalebarTickLabels({ 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 refNameColor = 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) => (_jsx(Typography, { className: classes.scalebarLabel, variant: "body2", style: {
-            left: ((labelIdx + 1) * majorPitch) / scale,
-            pointerEvents: 'none',
+            transform: `translateX(${((labelIdx + 1) * majorPitch) / scale}px)`,
             color: refNameColor,
         }, children: getTickDisplayStr(tickLabel, overview.bpPerPx) }, `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`)));
 });

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

@@ -3,7 +3,7 @@ import { Suspense, lazy, useState } from 'react';
 import HelpIcon from '@mui/icons-material/Help';
 import SearchIcon from '@mui/icons-material/Search';
 import { IconButton, InputAdornment } from '@mui/material';
-const HelpDialog = lazy(() => import('./HelpDialog'));
+const HelpDialog = lazy(() => import("./HelpDialog.js"));
 function HelpAdornment() {
     const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false);
     return (_jsxs(_Fragment, { children: [_jsx(IconButton, { onClick: () => {

package/esm/LinearGenomeView/components/RefNameAutocomplete/index.d.ts

@@ -1,5 +1,5 @@
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-import type { LinearGenomeViewModel } from '../../model';
+import type { LinearGenomeViewModel } from '../../model.ts';
 import type { TextFieldProps as TFP } from '@mui/material';
 declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, minWidth, maxWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;

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

@@ -4,9 +4,9 @@ import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseRes
 import { getSession, measureText, useDebounce } from '@jbrowse/core/util';
 import { Autocomplete } from '@mui/material';
 import { observer } from 'mobx-react';
-import AutocompleteTextField from './AutocompleteTextField';
-import { getDeduplicatedResult, getFiltered } from './util';
-const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+import AutocompleteTextField from "./AutocompleteTextField.js";
+import { getDeduplicatedResult, getFiltered } from "./util.js";
+const RefNameAutocomplete = observer(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
     const session = getSession(model);
     const { assemblyManager } = session;
     const [open, setOpen] = useState(false);
@@ -47,21 +47,21 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
         };
     }, [assemblyName, fetchResults, debouncedSearch, session]);
     const inputBoxVal = coarseVisibleLocStrings || value || '';
-    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
-    const regionOptions = useMemo(() => (regions === null || regions === void 0 ? void 0 : regions.map(region => ({
+    const regions = assembly?.regions;
+    const regionOptions = useMemo(() => regions?.map(region => ({
         result: new RefSequenceResult({
             refName: region.refName,
             label: region.refName,
             displayString: region.refName,
             matchedAttribute: 'refName',
         }),
-    }))) || [], [regions]);
+    })) || [], [regions]);
     return (_jsx(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: {
             ...style,
             width: Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth),
         }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
             setInputValue(newInputValue);
-            onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
+            onChange?.(newInputValue);
         }, loadingText: "loading results", open: open, onOpen: () => {
             setOpen(true);
         }, onClose: () => {
@@ -76,14 +76,14 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                 return;
             }
             if (typeof selectedOption === 'string') {
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(new BaseResult({
+                onSelect?.(new BaseResult({
                     label: selectedOption,
                 }));
             }
             else {
-                onSelect === null || onSelect === void 0 ? void 0 : onSelect(selectedOption.result);
+                onSelect?.(selectedOption.result);
             }
             setInputValue(inputBoxVal);
-        }, 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 => (_jsx(AutocompleteTextField, { params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() }));
+        }, options: searchOptions?.length ? searchOptions : regionOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (_jsx(AutocompleteTextField, { 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/components/RegionWidthEditorDialog.d.ts

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../model';
+import type { LinearGenomeViewModel } from '../model.ts';
 declare const RegionWidthEditorDialog: ({ model, handleClose, }: {
     model: LinearGenomeViewModel;
     handleClose: () => void;

package/esm/LinearGenomeView/components/RegionWidthEditorDialog.js

@@ -4,12 +4,14 @@ import { Dialog } from '@jbrowse/core/ui';
 import { toLocale } from '@jbrowse/core/util';
 import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-const toP = (s = 0) => +s.toFixed(1);
-const RegionWidthEditorDialog = observer(function ({ model, handleClose, }) {
+function format(n) {
+    return toLocale(Math.floor(n));
+}
+const RegionWidthEditorDialog = observer(function RegionWidthEditorDialog({ model, handleClose, }) {
     const { bpPerPx, width } = model;
-    const [val, setVal] = useState(toLocale(toP(bpPerPx * width)));
+    const [val, setVal] = useState(format(bpPerPx * width));
     useEffect(() => {
-        setVal(toLocale(bpPerPx * width));
+        setVal(format(bpPerPx * width));
     }, [bpPerPx, width]);
     const val2 = val.replace(/,/g, '');
     return (_jsxs(Dialog, { title: "Edit zoom level", open: true, onClose: handleClose, children: [_jsxs(DialogContent, { style: {

package/esm/LinearGenomeView/components/Rubberband.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import { Menu } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import RubberbandSpan from './RubberbandSpan';
-import VerticalGuide from './VerticalGuide';
-import { useRangeSelect } from './useRangeSelect';
+import RubberbandSpan from "./RubberbandSpan.js";
+import VerticalGuide from "./VerticalGuide.js";
+import { useRangeSelect } from "./useRangeSelect.js";
 const useStyles = makeStyles()({
     rubberbandControl: {
         cursor: 'crosshair',
@@ -14,15 +14,17 @@ const useStyles = makeStyles()({
         zIndex: 825,
     },
 });
-const Rubberband = observer(function ({ model, ControlComponent = _jsx("div", {}), }) {
+const Rubberband = observer(function Rubberband({ model, ControlComponent = _jsx("div", {}), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { stickyViewHeaders, rubberbandTop } = model;
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
+    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
     return (_jsxs(_Fragment, { children: [guideX !== undefined ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders })) : null, anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
                     left: anchorPosition.clientX,
                     top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
+                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
+                    ? model.rubberbandClickMenuItems(clickBpOffset)
+                    : model.rubberBandMenuItems() })) : null, _jsx("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, style: {
                     top: rubberbandTop,
                     position: stickyViewHeaders ? 'sticky' : undefined,
                 }, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut, children: ControlComponent })] }));

package/esm/LinearGenomeView/components/RubberbandSpan.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getBpDisplayStr, stringify } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography, alpha } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import RubberbandTooltip from './RubberbandTooltip';
+import RubberbandTooltip from "./RubberbandTooltip.js";
 const useStyles = makeStyles()(theme => {
     const { tertiary } = theme.palette;
     const background = alpha(tertiary.light, 0.7);
@@ -12,6 +12,7 @@ const useStyles = makeStyles()(theme => {
             height: '100%',
             background,
             position: 'absolute',
+            left: 0,
             zIndex: 830,
             textAlign: 'center',
             cursor: 'crosshair',
@@ -24,9 +25,7 @@ const useStyles = makeStyles()(theme => {
 export default function RubberbandSpan({ leftBpOffset, rightBpOffset, numOfBpSelected, left, width, top = 0, sticky = false, }) {
     const { classes } = useStyles();
     const [anchorEl, setAnchorEl] = useState(null);
-    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { className: classes.rubberband, style: { left, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: el => {
-                        setAnchorEl(el);
-                    }, variant: "h6", className: classes.rubberbandText, style: {
+    return (_jsxs(_Fragment, { children: [anchorEl ? (_jsxs(_Fragment, { children: [_jsx(RubberbandTooltip, { side: "left", anchorEl: anchorEl, text: stringify(leftBpOffset) }), _jsx(RubberbandTooltip, { side: "right", anchorEl: anchorEl, text: stringify(rightBpOffset) })] })) : null, _jsx("div", { className: classes.rubberband, style: { transform: `translateX(${left}px)`, width }, children: numOfBpSelected ? (_jsx(Typography, { ref: setAnchorEl, variant: "h6", className: classes.rubberbandText, style: {
                         top,
                         position: sticky ? 'sticky' : undefined,
                     }, children: getBpDisplayStr(numOfBpSelected) })) : null })] }));

package/esm/LinearGenomeView/components/Scalebar.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import Gridlines from './Gridlines';
-import ScalebarCoordinateLabels from './ScalebarCoordinateLabels';
-import ScalebarRefNameLabels from './ScalebarRefNameLabels';
+import Gridlines from "./Gridlines.js";
+import ScalebarCoordinateLabels from "./ScalebarCoordinateLabels.js";
+import ScalebarRefNameLabels from "./ScalebarRefNameLabels.js";
 const useStyles = makeStyles()({
     container: {
         overflow: 'hidden',
@@ -21,15 +21,13 @@ const useStyles = makeStyles()({
     },
 });
 const Scalebar = observer(forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
-    const { classes, cx } = useStyles();
-    const { staticBlocks, offsetPx, scaleFactor } = model;
-    const offsetLeft = staticBlocks.offsetPx - offsetPx;
-    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: style, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
+    const { classes } = useStyles();
+    const { scaleFactor, staticBlocks, offsetPx } = model;
+    return (_jsxs(Paper, { "data-resizer": "true", className: cx(classes.container, className), variant: "outlined", ref: ref, style: { ...style, '--offset-px': `${offsetPx}px` }, ...other, children: [_jsx(Gridlines, { model: model, offset: 1 }), _jsx("div", { className: classes.zoomContainer, style: {
                     transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
                 }, children: _jsx("div", { className: classes.scalebar, style: {
-                        left: offsetLeft - 1,
+                        transform: `translateX(calc(${staticBlocks.offsetPx}px - var(--offset-px) - 1px))`,
                         width: staticBlocks.totalWidthPx,
-                        ...style,
                     }, children: _jsx(ScalebarCoordinateLabels, { model: model }) }) }), _jsx(ScalebarRefNameLabels, { model: model })] }));
 }));
 export default Scalebar;

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

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

package/esm/LinearGenomeView/components/ScalebarCoordinateLabels.js

@@ -1,24 +1,57 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getTickDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import ScalebarCoordinateTicks from './ScalebarCoordinateTicks';
-import { ElidedBlock as ElidedBlockComponent, InterRegionPaddingBlock as InterRegionPaddingBlockComponent, } from '../../BaseLinearDisplay/components/Block';
-const ScalebarCoordinateLabels = observer(function ({ model }) {
-    const { staticBlocks, bpPerPx } = model;
-    return (_jsx(_Fragment, { children: staticBlocks.map((b, idx) => {
-            const { key, widthPx } = b;
-            const k = `${key}-${idx}`;
-            if (b.type === 'ContentBlock') {
-                return _jsx(ScalebarCoordinateTicks, { block: b, bpPerPx: bpPerPx }, k);
-            }
-            else if (b.type === 'ElidedBlock') {
-                return _jsx(ElidedBlockComponent, { width: widthPx }, k);
+import { makeTicks } from "../util.js";
+const useStyles = makeStyles()(theme => ({
+    block: {
+        position: 'relative',
+        flexShrink: 0,
+        overflow: 'hidden',
+        height: 13,
+    },
+    elidedBlock: {
+        backgroundColor: '#999',
+        backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
+    },
+    tick: {
+        position: 'absolute',
+        width: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        pointerEvents: 'none',
+    },
+    label: {
+        fontSize: 11,
+        zIndex: 1,
+        background: theme.palette.background.paper,
+        lineHeight: 'normal',
+        pointerEvents: 'none',
+    },
+}));
+function ContentBlockLabels({ block, bpPerPx, }) {
+    const { classes } = useStyles();
+    const ticks = makeTicks(block.start, block.end, bpPerPx, true, false);
+    return (_jsx("div", { className: classes.block, style: { width: block.widthPx }, children: ticks.map(({ type, base }) => {
+            if (type !== 'major') {
+                return null;
             }
-            else if (b.type === 'InterRegionPaddingBlock') {
-                return (_jsx(InterRegionPaddingBlockComponent, { width: widthPx, style: { background: 'none' }, boundary: b.variant === 'boundary' }, k));
+            const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
+            return (_jsx("div", { className: classes.tick, style: { left: x }, children: _jsx("div", { className: classes.label, children: getTickDisplayStr(base + 1, bpPerPx) }) }, base));
+        }) }));
+}
+const ScalebarCoordinateLabels = observer(function ScalebarCoordinateLabels({ model, }) {
+    const { classes, cx } = useStyles();
+    const { staticBlocks, bpPerPx } = model;
+    return (_jsx("div", { style: { display: 'flex' }, children: staticBlocks.map((block, index) => {
+            const key = `${block.key}-${index}`;
+            if (block.type === 'ContentBlock') {
+                return (_jsx(ContentBlockLabels, { block: block, bpPerPx: bpPerPx }, key));
             }
-            else {
-                return null;
+            else if (block.type === 'ElidedBlock') {
+                return (_jsx("div", { className: cx(classes.block, classes.elidedBlock), style: { width: block.widthPx } }, key));
             }
+            return (_jsx("div", { className: classes.block, style: { width: block.widthPx } }, key));
         }) }));
 });
 export default ScalebarCoordinateLabels;

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

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

package/esm/LinearGenomeView/components/ScalebarRefNameLabels.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     refLabel: {
         fontSize: 11,
@@ -18,25 +17,28 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 100,
     },
 }));
-const ScalebarRefNameLabels = observer(function ({ model }) {
+const ScalebarRefNameLabels = observer(function ScalebarRefNameLabels({ model, }) {
     const { classes, cx } = useStyles();
-    const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model;
-    let lastLeftBlock = 0;
+    const { staticBlocks, offsetPx, scalebarDisplayPrefix } = model;
+    let lastLeftBlock = staticBlocks.blocks.findIndex(b => b.type === 'ContentBlock');
+    if (lastLeftBlock < 0) {
+        lastLeftBlock = 0;
+    }
     staticBlocks.forEach((block, i) => {
-        if (block.offsetPx - offsetPx < 0) {
+        if (block.type === 'ContentBlock' && block.offsetPx - offsetPx < 0) {
             lastLeftBlock = i;
         }
     });
-    const val = scaleBarDisplayPrefix();
+    const val = scalebarDisplayPrefix();
     const b0 = staticBlocks.blocks[0];
-    return (_jsxs(_Fragment, { children: [(b0 === null || b0 === void 0 ? void 0 : b0.type) !== 'ContentBlock' && val ? (_jsx(Typography, { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
+    return (_jsxs(_Fragment, { children: [b0?.type !== 'ContentBlock' && val ? (_jsx("span", { className: cx(classes.b0, classes.refLabel), children: val })) : null, staticBlocks.map((block, index) => {
                 const { offsetPx: blockOffsetPx, isLeftEndOfDisplayedRegion, key, type, refName, } = block;
                 const last = index === lastLeftBlock;
                 return type === 'ContentBlock' &&
-                    (isLeftEndOfDisplayedRegion || last) ? (_jsxs(Typography, { style: {
+                    (isLeftEndOfDisplayedRegion || last) ? (_jsxs("span", { style: {
                         left: last
-                            ? Math.max(0, -offsetPx)
-                            : blockOffsetPx - offsetPx - 1,
+                            ? 'max(0px, calc(-1 * var(--offset-px)))'
+                            : `calc(${blockOffsetPx}px - var(--offset-px) - 1px)`,
                         paddingLeft: last ? 0 : 1,
                     }, className: classes.refLabel, "data-testid": `refLabel-${refName}`, children: [last && val ? `${val}:` : '', refName] }, `refLabel-${key}-${index}`)) : null;
             })] }));

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../model';
+import type { LinearGenomeViewModel } from '../model.ts';
 declare const SearchBox: ({ model, showHelp, }: {
     showHelp?: boolean;
     model: LinearGenomeViewModel;

package/esm/LinearGenomeView/components/SearchBox.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { alpha, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import RefNameAutocomplete from './RefNameAutocomplete';
-import EndAdornment from './RefNameAutocomplete/EndAdornment';
-import { fetchResults } from './util';
-import { handleSelectedRegion, navToOption } from '../../searchUtils';
-import { SPACING, WIDGET_HEIGHT } from '../consts';
+import EndAdornment from "./RefNameAutocomplete/EndAdornment.js";
+import RefNameAutocomplete from "./RefNameAutocomplete/index.js";
+import { fetchResults } from "./util.js";
+import { handleSelectedRegion, navToOption } from "../../searchUtils.js";
+import { SPACING, WIDGET_HEIGHT } from "../consts.js";
 const useStyles = makeStyles()({
     headerRefName: {
         minWidth: 100,
     },
 });
 async function onSelect({ option, model, assemblyName, }) {
-    var _a;
     const { assemblyManager } = getSession(model);
     const assembly = assemblyManager.get(assemblyName);
     if (option.hasLocation()) {
@@ -24,7 +23,7 @@ async function onSelect({ option, model, assemblyName, }) {
             assemblyName,
         });
     }
-    else if ((_a = option.results) === null || _a === void 0 ? void 0 : _a.length) {
+    else if (option.results?.length) {
         model.setSearchResults(option.results, option.getLabel());
     }
     else if (assembly) {
@@ -35,7 +34,7 @@ async function onSelect({ option, model, assemblyName, }) {
         });
     }
 }
-const SearchBox = observer(function ({ model, showHelp = true, }) {
+const SearchBox = observer(function SearchBox({ model, showHelp = true, }) {
     const { classes } = useStyles();
     const theme = useTheme();
     const session = getSession(model);

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../..';
+import type { LinearGenomeViewModel } from '../../index.ts';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }: {
     model: LinearGenomeViewModel;

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Dialog } from '@jbrowse/core/ui';
 import { Button, DialogActions, DialogContent, Divider, Typography, } from '@mui/material';
-import SearchResultsTable from './SearchResultsTable';
+import SearchResultsTable from "./SearchResultsTable.js";
 export default function SearchResultsDialog({ model, assemblyName, searchQuery, searchResults, handleClose, }) {
-    return (_jsxs(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: [_jsx(DialogContent, { children: !(searchResults === null || searchResults === void 0 ? void 0 : searchResults.length) ? (_jsxs(Typography, { children: ["No results found for ", _jsx("b", { children: searchQuery })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchQuery })] }), _jsx(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })] })) }), _jsx(Divider, {}), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
+    return (_jsxs(Dialog, { open: true, maxWidth: "xl", onClose: handleClose, title: "Search results", children: [_jsx(DialogContent, { children: !searchResults?.length ? (_jsxs(Typography, { children: ["No results found for ", _jsx("b", { children: searchQuery })] })) : (_jsxs(_Fragment, { children: [_jsxs(Typography, { children: ["Showing results for ", _jsx("b", { children: searchQuery })] }), _jsx(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })] })) }), _jsx(Divider, {}), _jsx(DialogActions, { children: _jsx(Button, { onClick: () => {
                         handleClose();
                     }, color: "primary", children: "Cancel" }) })] }));
 }

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

@@ -1,4 +1,4 @@
-import type { LinearGenomeViewModel } from '../..';
+import type { LinearGenomeViewModel } from '../../index.ts';
 import type BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }: {
     searchResults: BaseResult[];

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { assembleLocString, getEnv, getSession, parseLocString, } from '@jbrowse/core/util';
+import { getRoot, resolveIdentifier } from '@jbrowse/mobx-state-tree';
 import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import { getRoot, resolveIdentifier } from 'mobx-state-tree';
-import { navToOption } from '../../searchUtils';
+import { navToOption } from "../../searchUtils.js";
 export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }) {
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
@@ -16,16 +16,14 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
         throw new Error(`assembly ${assemblyName} regions not loaded`);
     }
     function getTrackName(trackId) {
-        var _a;
         if (trackId) {
             const schema = pluginManager.pluggableConfigSchemaType('track');
             const configuration = resolveIdentifier(schema, getRoot(model), trackId);
-            return ((_a = configuration === null || configuration === void 0 ? void 0 : configuration.name) === null || _a === void 0 ? void 0 : _a.value) || '';
+            return configuration?.name?.value || '';
         }
         return '';
     }
     async function handleClick(result) {
-        var _a;
         if (result.hasLocation()) {
             await navToOption({
                 option: result,
@@ -35,7 +33,7 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
         }
         else {
             const location = result.getLabel();
-            const newRegion = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.regions) === null || _a === void 0 ? void 0 : _a.find(region => location === region.refName);
+            const newRegion = assembly?.regions?.find(region => location === region.refName);
             if (newRegion) {
                 model.setDisplayedRegions([newRegion]);
                 model.showAllRegions();

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -2,16 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
 import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import { Button, Checkbox, DialogActions, DialogContent, FormControlLabel, FormGroup, TextField, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '40em',
     },
 });
-const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
+const SequenceSearchDialog = observer(function SequenceSearchDialog({ model, handleClose, }) {
     const { classes } = useStyles();
     const [value, setValue] = useState('');
     const [searchForward, setSearchForward] = useState(true);
@@ -33,7 +33,6 @@ const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
                                     } }), label: "Search reverse strand" }), _jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: caseInsensitive, onChange: event => {
                                         setCaseInsensitive(event.target.checked);
                                     } }), label: "Case insensitive" })] }), error ? _jsx(Typography, { color: "error", children: `${error}` }) : null] }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: () => {
-                            var _a;
                             if (value) {
                                 const trackId = `sequence_search_${Date.now()}`;
                                 const session = getSession(model);
@@ -51,7 +50,8 @@ const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
                                             searchForward,
                                             searchReverse,
                                             caseInsensitive,
-                                            sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
+                                            sequenceAdapter: getSnapshot(assemblyManager.get(assemblyName)?.configuration.sequence
+                                                .adapter),
                                         },
                                     });
                                     model.showTrack(trackId);