@jbrowse/plugin-linear-genome-view 2.13.0 → 2.14.0

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -112,7 +112,7 @@ const OverviewRubberband = observer(function OverviewRubberband({ model, overvie
     }
     let left = startX || 0;
     let width = 0;
-    if (startX !== undefined && currentX !== undefined) {
+    if (currentX !== undefined) {
         left = currentX < startX ? currentX : startX;
         width = currentX - startX;
     }

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -120,8 +120,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     const { pluginManager } = getEnv(model);
     const visibleRegions = dynamicBlocks.contentBlocks;
     const overviewVisibleRegions = overview.dynamicBlocks;
-    const { tertiary, primary } = theme.palette;
-    const scalebarColor = tertiary ? tertiary.light : primary.light;
+    const scalebarColor = theme.palette.tertiary.light;
     // catches possible null from at's below
     if (!visibleRegions.length) {
         return null;
@@ -159,23 +158,19 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
 });
 const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();
-    const { totalBp, width, cytobandOffset, displayedRegions } = model;
+    const { minimumBlockWidth, totalBp, width, cytobandOffset, displayedRegions, } = model;
     const modWidth = width - cytobandOffset;
+    const str = JSON.stringify(displayedRegions);
     const overview = useMemo(() => {
         const overview = Base1DView.create({
-            displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+            displayedRegions: JSON.parse(str),
             interRegionPaddingWidth: 0,
-            minimumBlockWidth: model.minimumBlockWidth,
+            minimumBlockWidth,
         });
         overview.setVolatileWidth(modWidth);
         overview.showAllRegions();
         return overview;
-    }, [
-        JSON.stringify(displayedRegions), // eslint-disable-line react-hooks/exhaustive-deps
-        model.minimumBlockWidth,
-        modWidth,
-        displayedRegions,
-    ]);
+    }, [str, minimumBlockWidth, modWidth]);
     const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
     return (React.createElement("div", null,
         React.createElement(OverviewRubberband, { model: model, overview: overview, ControlComponent: React.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),

package/esm/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -9,8 +9,7 @@ const OverviewScalebarPolygon = observer(function ({ model, overview, useOffset
     const multiplier = Number(useOffset);
     const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
     const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
-    const { tertiary, primary } = theme.palette;
-    const polygonColor = tertiary ? tertiary.light : primary.light;
+    const polygonColor = theme.palette.tertiary.light;
     // catches possible null from at's below
     if (!contentBlocks.length) {
         return null;

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

@@ -4,12 +4,13 @@ import { TextField, } from '@mui/material';
 import EndAdornment from './EndAdornment';
 export default function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }) {
     const { helperText, InputProps = {} } = TextFieldProps;
-    return (React.createElement(TextField, { onBlur: () => 
-        // this is used to restore a refName or the non-user-typed input
-        // to the box on blurring
-        setInputValue(inputBoxVal), ...params, ...TextFieldProps, size: "small", helperText: helperText, InputProps: {
+    return (React.createElement(TextField, { onBlur: () => {
+            setInputValue(inputBoxVal);
+        }, ...params, ...TextFieldProps, size: "small", helperText: helperText, InputProps: {
             ...params.InputProps,
             ...InputProps,
             endAdornment: (React.createElement(EndAdornment, { showHelp: showHelp, endAdornment: params.InputProps.endAdornment })),
-        }, placeholder: "Search for location", onChange: e => setCurrentSearch(e.target.value) }));
+        }, placeholder: "Search for location", onChange: e => {
+            setCurrentSearch(e.target.value);
+        } }));
 }

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

@@ -8,10 +8,14 @@ const HelpDialog = lazy(() => import('./HelpDialog'));
 function HelpAdornment() {
     const [isHelpDialogDisplayed, setHelpDialogDisplayed] = useState(false);
     return (React.createElement(React.Fragment, null,
-        React.createElement(IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
+        React.createElement(IconButton, { onClick: () => {
+                setHelpDialogDisplayed(true);
+            }, size: "small" },
             React.createElement(HelpIcon, { fontSize: "small" })),
         isHelpDialogDisplayed ? (React.createElement(Suspense, { fallback: null },
-            React.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
+            React.createElement(HelpDialog, { handleClose: () => {
+                    setHelpDialogDisplayed(false);
+                } }))) : null));
 }
 export default function EndAdornment({ showHelp, endAdornment, }) {
     return (React.createElement(React.Fragment, null,

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

@@ -38,5 +38,7 @@ export default function HelpDialog({ handleClose, }) {
                     " - use whitespace separated refname, start, end"))),
         React.createElement(Divider, null),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => handleClose(), color: "primary" }, "Close"))));
+            React.createElement(Button, { onClick: () => {
+                    handleClose();
+                }, color: "primary" }, "Close"))));
 }

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
 import { getSession, useDebounce, measureText } from '@jbrowse/core/util';
 import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseResults';
@@ -34,24 +34,26 @@ const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName,
                 session.notifyError(`${e}`, e);
             }
         })();
-    }, [assemblyName, fetchResults, debouncedSearch, session, model]);
+    }, [assemblyName, fetchResults, debouncedSearch, session]);
     const inputBoxVal = coarseVisibleLocStrings || value || '';
     // heuristic, text width + 60 accommodates help icon and search icon
     const width = Math.min(Math.max(measureText(inputBoxVal, 14) + 100, minWidth), maxWidth);
-    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
-    const regionOptions = useMemo(() => (regions === null || regions === void 0 ? void 0 : regions.map(option => ({
+    const refNames = assembly === null || assembly === void 0 ? void 0 : assembly.refNames;
+    const regionOptions = (refNames === null || refNames === void 0 ? void 0 : refNames.map(refName => ({
         result: new RefSequenceResult({
-            refName: option.refName,
-            label: option.refName,
+            refName,
+            label: refName,
             matchedAttribute: 'refName',
         }),
-    }))) || [], [regions]);
+    }))) || [];
     // notes on implementation:
     // The selectOnFocus setting helps highlight the field when clicked
     return (React.createElement(Autocomplete, { "data-testid": "autocomplete", disableListWrap: true, disableClearable: true, disabled: !assemblyName, freeSolo: true, includeInputInList: true, selectOnFocus: true, style: { ...style, width }, value: inputBoxVal, loading: !loaded, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
             setInputValue(newInputValue);
             onChange === null || onChange === void 0 ? void 0 : onChange(newInputValue);
-        }, loadingText: "loading results", open: open, onOpen: () => setOpen(true), onClose: () => {
+        }, loadingText: "loading results", open: open, onOpen: () => {
+            setOpen(true);
+        }, onClose: () => {
             setOpen(false);
             setLoaded(true);
             if (hasDisplayedRegions) {

package/esm/LinearGenomeView/components/RubberbandSpan.js

@@ -3,10 +3,8 @@ import { makeStyles } from 'tss-react/mui';
 import { Popover, Typography, alpha } from '@mui/material';
 import { stringify, toLocale } from '@jbrowse/core/util';
 const useStyles = makeStyles()(theme => {
-    const { primary, tertiary } = theme.palette;
-    const background = tertiary
-        ? alpha(tertiary.light, 0.7)
-        : alpha(primary.light, 0.7);
+    const { tertiary } = theme.palette;
+    const background = alpha(tertiary.light, 0.7);
     return {
         rubberband: {
             height: '100%',
@@ -22,7 +20,7 @@ const useStyles = makeStyles()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary ? tertiary.contrastText : primary.contrastText,
+            color: tertiary.contrastText,
         },
         popover: {
             mouseEvents: 'none',

package/esm/LinearGenomeView/components/Scalebar.js

@@ -46,6 +46,7 @@ const useStyles = makeStyles()(theme => ({
     },
 }));
 const RenderedRefNameLabels = observer(function ({ model }) {
+    var _a;
     const { classes } = useStyles();
     const { staticBlocks, offsetPx, scaleBarDisplayPrefix } = model;
     // find the block that needs pinning to the left side for context
@@ -57,7 +58,7 @@ const RenderedRefNameLabels = observer(function ({ model }) {
     });
     const val = scaleBarDisplayPrefix();
     return (React.createElement(React.Fragment, null,
-        staticBlocks.blocks[0].type !== 'ContentBlock' && val ? (React.createElement(Typography, { style: { left: 0, zIndex: 100 }, className: classes.refLabel }, val)) : null,
+        ((_a = staticBlocks.blocks[0]) === null || _a === void 0 ? void 0 : _a.type) !== 'ContentBlock' && val ? (React.createElement(Typography, { style: { left: 0, zIndex: 100 }, className: classes.refLabel }, val)) : null,
         staticBlocks.map((block, index) => {
             return block.type === 'ContentBlock' &&
                 (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (React.createElement(Typography, { key: `refLabel-${block.key}-${index}`, style: {

package/esm/LinearGenomeView/components/SearchResultsDialog.js

@@ -13,5 +13,7 @@ export default function SearchResultsDialog({ model, assemblyName, searchQuery,
             React.createElement(SearchResultsTable, { model: model, handleClose: handleClose, assemblyName: assemblyName, searchResults: searchResults })))),
         React.createElement(Divider, null),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: () => handleClose(), color: "primary" }, "Cancel"))));
+            React.createElement(Button, { onClick: () => {
+                    handleClose();
+                }, color: "primary" }, "Cancel"))));
 }

package/esm/LinearGenomeView/components/SearchResultsTable.js

@@ -3,11 +3,10 @@ import { Button, Paper, Table, TableBody, TableCell, TableContainer, TableHead,
 import { getRoot, resolveIdentifier } from 'mobx-state-tree';
 import { getEnv, getSession } from '@jbrowse/core/util';
 export default function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }) {
-    var _a;
     const session = getSession(model);
     const { pluginManager } = getEnv(session);
     const { assemblyManager } = session;
-    const assemblyName = optAssemblyName || ((_a = model.displayedRegions[0]) === null || _a === void 0 ? void 0 : _a.assemblyName);
+    const assemblyName = optAssemblyName || model.displayedRegions[0].assemblyName;
     const assembly = assemblyManager.get(assemblyName);
     if (!assembly) {
         throw new Error(`assembly ${assemblyName} not found`);
@@ -51,7 +50,7 @@ export default function SearchResultsTable({ searchResults, assemblyName: optAss
                     React.createElement(TableCell, { align: "right" }, "Location"),
                     React.createElement(TableCell, { align: "right" }, "Track"),
                     React.createElement(TableCell, { align: "right" }))),
-            React.createElement(TableBody, null, searchResults.map(result => (React.createElement(TableRow, { key: `${result.getId()}` },
+            React.createElement(TableBody, null, searchResults.map(result => (React.createElement(TableRow, { key: result.getId() },
                 React.createElement(TableCell, { component: "th", scope: "row" }, result.getLabel()),
                 React.createElement(TableCell, { align: "right" }, result.getLocation()),
                 React.createElement(TableCell, { align: "right" }, getTrackName(result.getTrackId()) || 'N/A'),

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -26,11 +26,19 @@ const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
     return (React.createElement(Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search" },
         React.createElement(DialogContent, { className: classes.dialogContent },
             React.createElement(Typography, null, "Supply a sequence to search for. A track will be created with the resulting matches once submitted. You can also supply regex style expressions e.g. AACT(C|T)."),
-            React.createElement(TextField, { value: value, onChange: e => setValue(e.target.value), helperText: "Sequence search pattern" }),
+            React.createElement(TextField, { value: value, onChange: e => {
+                    setValue(e.target.value);
+                }, helperText: "Sequence search pattern" }),
             React.createElement(FormGroup, null,
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchForward, onChange: event => setSearchForward(event.target.checked) }), label: "Search forward strand" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchReverse, onChange: event => setSearchReverse(event.target.checked) }), label: "Search reverse strand" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: caseInsensitive, onChange: event => setCaseInsensitive(event.target.checked) }), label: "Case insensitive" })),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchForward, onChange: event => {
+                            setSearchForward(event.target.checked);
+                        } }), label: "Search forward strand" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: searchReverse, onChange: event => {
+                            setSearchReverse(event.target.checked);
+                        } }), label: "Search reverse strand" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: caseInsensitive, onChange: event => {
+                            setCaseInsensitive(event.target.checked);
+                        } }), label: "Case insensitive" })),
             error ? React.createElement(Typography, { color: "error" }, `${error}`) : null),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => {
@@ -60,6 +68,8 @@ const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
                     }
                     handleClose();
                 }, variant: "contained", color: "primary" }, "Submit"),
-            React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
+            React.createElement(Button, { onClick: () => {
+                    handleClose();
+                }, variant: "contained", color: "secondary" }, "Close"))));
 });
 export default SequenceSearchDialog;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -21,9 +21,9 @@ const useStyles = makeStyles()({
 const TrackContainer = observer(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
-    const { draggingTrackId } = model;
+    const { draggingTrackId, showTrackOutlines } = model;
     const ref = useRef(null);
-    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
+    return (React.createElement(Paper, { ref: ref, className: classes.root, variant: showTrackOutlines ? 'outlined' : undefined, elevation: showTrackOutlines ? undefined : 0, onClick: event => {
             var _a;
             if (event.detail === 2 && !track.displays[0].featureIdUnderMouse) {
                 const left = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().left) || 0;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -48,27 +48,37 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
                 {
                     label: minimized ? 'Restore track' : 'Minimize track',
                     icon: minimized ? AddIcon : MinimizeIcon,
-                    onClick: () => track.setMinimized(!minimized),
+                    onClick: () => {
+                        track.setMinimized(!minimized);
+                    },
                 },
                 {
                     label: 'Move track to top',
                     icon: KeyboardDoubleArrowUpIcon,
-                    onClick: () => view.moveTrackToTop(track.id),
+                    onClick: () => {
+                        view.moveTrackToTop(track.id);
+                    },
                 },
                 {
                     label: 'Move track up',
                     icon: KeyboardArrowUpIcon,
-                    onClick: () => view.moveTrackUp(track.id),
+                    onClick: () => {
+                        view.moveTrackUp(track.id);
+                    },
                 },
                 {
                     label: 'Move track down',
                     icon: KeyboardArrowDownIcon,
-                    onClick: () => view.moveTrackDown(track.id),
+                    onClick: () => {
+                        view.moveTrackDown(track.id);
+                    },
                 },
                 {
                     label: 'Move track to bottom',
                     icon: KeyboardDoubleArrowDownIcon,
-                    onClick: () => view.moveTrackToBottom(track.id),
+                    onClick: () => {
+                        view.moveTrackToBottom(track.id);
+                    },
                 },
             ],
         },

package/esm/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -21,7 +21,9 @@ function TrackLabelDragHandle({ trackId, view, track, }) {
                 event.dataTransfer.setDragImage(parent, 20, 20);
                 view.setDraggingTrackId(track.id);
             }
-        }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
+        }, onDragEnd: () => {
+            view.setDraggingTrackId(undefined);
+        }, "data-testid": `dragHandle-${view.id}-${trackId}` },
         React.createElement(DragIcon, { className: classes.dragHandleIcon, fontSize: "small" })));
 }
 export default TrackLabelDragHandle;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -25,7 +25,7 @@ const TracksContainer = observer(function TracksContainer({ children, model, })
     const { pluginManager } = getEnv(model);
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
     const ref = useRef(null);
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, handleMenuItemClick, open, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
+    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
     useWheelScroll(ref, model);
     const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
     return (React.createElement("div", { ref: ref, "data-testid": "trackContainer", className: classes.tracksContainer, onMouseDown: event => {

package/esm/LinearGenomeView/components/ZoomControls.js

@@ -21,12 +21,18 @@ const ZoomControls = observer(function ({ model, }) {
     const [value, setValue] = useState(-Math.log2(bpPerPx) * 100);
     useEffect(() => {
         setValue(-Math.log2(bpPerPx) * 100);
-    }, [setValue, bpPerPx]);
+    }, [bpPerPx]);
     return (React.createElement("div", { className: classes.container },
-        React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
+        React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => {
+                model.zoom(bpPerPx * 2);
+            }, disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
             React.createElement(ZoomOut, null)),
-        React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => setValue(val), onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)) }),
-        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
+        React.createElement(Slider, { size: "small", className: classes.slider, value: value, min: -Math.log2(maxBpPerPx) * 100, max: -Math.log2(minBpPerPx) * 100, onChange: (_, val) => {
+                setValue(val);
+            }, onChangeCommitted: () => model.zoomTo(2 ** (-value / 100)) }),
+        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => {
+                model.zoom(model.bpPerPx / 2);
+            }, disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
             React.createElement(ZoomIn, null))));
 });
 export default ZoomControls;

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

@@ -16,7 +16,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseOut: () => void;
-    handleMenuItemClick: (_: unknown, callback: Function) => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
     rubberbandOn?: undefined;
     handleClose?: undefined;
     leftBpOffset?: undefined;
@@ -32,7 +32,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseOut: () => void;
     handleClose: () => void;
-    handleMenuItemClick: (_: unknown, callback: Function) => void;
+    handleMenuItemClick: (_: unknown, callback: () => void) => void;
     leftBpOffset: {
         coord: number;
         index: number;

package/esm/LinearGenomeView/components/hooks.js

@@ -40,7 +40,7 @@ export function useSideScroll(model) {
             };
         }
         return cleanup;
-    }, [model, mouseDragging, prevX]);
+    }, [model, mouseDragging]);
     function mouseDown(event) {
         if (event.shiftKey) {
             return;
@@ -117,7 +117,7 @@ export function useRangeSelect(ref, model, shiftOnly) {
             };
         }
         return () => { };
-    }, [startX, mouseDragging, anchorPosition, model, ref]);
+    }, [startX, mouseDragging, model, ref]);
     useEffect(() => {
         if (!mouseDragging &&
             currentX !== undefined &&
@@ -173,29 +173,27 @@ export function useRangeSelect(ref, model, shiftOnly) {
             handleMenuItemClick,
         };
     }
-    else {
-        const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
-        const left = right < startX ? right : startX;
-        const width = Math.abs(right - startX);
-        const leftBpOffset = model.pxToBp(left);
-        const rightBpOffset = model.pxToBp(left + width);
-        const numOfBpSelected = Math.ceil(width * model.bpPerPx);
-        return {
-            open,
-            rubberbandOn: true,
-            mouseDown,
-            mouseMove,
-            mouseOut,
-            handleClose,
-            handleMenuItemClick,
-            leftBpOffset,
-            rightBpOffset,
-            anchorPosition,
-            numOfBpSelected,
-            width,
-            left,
-        };
-    }
+    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
+    const left = right < startX ? right : startX;
+    const width = Math.abs(right - startX);
+    const leftBpOffset = model.pxToBp(left);
+    const rightBpOffset = model.pxToBp(left + width);
+    const numOfBpSelected = Math.ceil(width * model.bpPerPx);
+    return {
+        open,
+        rubberbandOn: true,
+        mouseDown,
+        mouseMove,
+        mouseOut,
+        handleClose,
+        handleMenuItemClick,
+        leftBpOffset,
+        rightBpOffset,
+        anchorPosition,
+        numOfBpSelected,
+        width,
+        left,
+    };
 }
 export function useWheelScroll(ref, model) {
     const delta = useRef(0);
@@ -206,7 +204,7 @@ export function useWheelScroll(ref, model) {
         // if ctrl is held down, zoom in with y-scroll
         // else scroll horizontally with x-scroll
         function onWheel(event) {
-            if (event.ctrlKey === true) {
+            if (event.ctrlKey) {
                 event.preventDefault();
                 delta.current += event.deltaY / 500;
                 model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));

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

@@ -12,10 +12,10 @@ export declare function fetchResults({ queryString, searchType, searchScope, ran
     assembly?: Assembly;
 }): Promise<BaseResult[]>;
 export declare function splitLast(str: string, split: string): [string, string];
-export declare function getRelativeX<T extends {
+export declare function getRelativeX(event: {
     clientX: number;
     target: EventTarget | null;
-}>(event: T, element: HTMLElement | null): number;
+}, element: HTMLElement | null): number;
 export declare function getCytobands(assembly: Assembly | undefined, refName: string): {
     refName: string;
     start: number;

package/esm/LinearGenomeView/model.d.ts

@@ -33,6 +33,12 @@ export interface ExportSvgOptions {
     trackLabels?: string;
     themeName?: string;
 }
+export interface HighlightType {
+    start: number;
+    end: number;
+    assemblyName: string;
+    refName: string;
+}
 export interface NavLocation {
     refName: string;
     start?: number;
@@ -72,8 +78,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, {
     width: number;
 } & {
@@ -87,7 +94,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     minimumBlockWidth: number;
     draggingTrackId: undefined | string;
     volatileError: unknown;
-    afterDisplayedRegionsSetCallbacks: Function[];
+    afterDisplayedRegionsSetCallbacks: (() => void)[];
     scaleFactor: number;
     trackRefs: Record<string, HTMLDivElement>;
     coarseDynamicBlocks: BaseBlock[];
@@ -95,7 +102,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: undefined | BpOffset;
     rightOffset: undefined | BpOffset;
 } & {
-    scaleBarDisplayPrefix(): "";
     /**
      * #getter
      * this is the effective value of the track labels setting, incorporating
@@ -115,6 +121,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly assemblyNames: string[];
 } & {
+    /**
+     * #method
+     */
+    scaleBarDisplayPrefix(): string | undefined;
     /**
      * #method
      */
@@ -174,7 +184,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #getter
      */
-    readonly error: {};
+    readonly error: unknown;
     /**
      * #getter
      */
@@ -217,6 +227,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      */
     readonly trackTypeActions: Map<string, MenuItem[]>;
 } & {
+    /**
+     * #action
+     */
+    setShowTrackOutlines(arg: boolean): void;
     /**
      * #action
      */
@@ -252,15 +266,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    addToHighlights(highlight: Required<ParsedLocString>): void;
+    addToHighlights(highlight: HighlightType): void;
     /**
      * #action
      */
-    setHighlight(highlight: Required<ParsedLocString>[] | undefined): void;
+    setHighlight(highlight?: HighlightType[]): void;
     /**
      * #action
      */
-    removeHighlight(highlight: Required<ParsedLocString>): void;
+    removeHighlight(highlight: HighlightType): void;
     /**
      * #action
      */
@@ -317,10 +331,6 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      * #action
      */
     moveTrack(movingId: string, targetId: string): void;
-    /**
-     * #action
-     */
-    closeView(): void;
     /**
      * #action
      */
@@ -372,7 +382,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
      * schedule something to be run after the next time displayedRegions is
      * set
      */
-    afterDisplayedRegionsSet(cb: Function): void;
+    afterDisplayedRegionsSet(cb: () => void): void;
     /**
      * #action
      */
@@ -614,8 +624,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
-    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<Required<ParsedLocString>, Required<ParsedLocString>, Required<ParsedLocString>>>, [undefined]>;
+    highlight: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IType<HighlightType, HighlightType, HighlightType>>, [undefined]>;
     colorByCDS: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    showTrackOutlines: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }>>, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;