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

package/esm/LaunchLinearGenomeView/index.js

@@ -1,4 +1,4 @@
-import { when, parseLocString, } from '@jbrowse/core/util';
+import { when, parseLocString } from '@jbrowse/core/util';
 import { handleSelectedRegion } from '../searchUtils';
 export default function LaunchLinearGenomeViewF(pluginManager) {
     pluginManager.addToExtensionPoint('LaunchView-LinearGenomeView', 
@@ -24,22 +24,23 @@ export default function LaunchLinearGenomeViewF(pluginManager) {
             }
             if (highlight !== undefined) {
                 highlight.forEach(async (h) => {
-                    if (h) {
-                        const parsedLocString = parseLocString(h, refName => isValidRefName(refName, assembly));
-                        const location = {
-                            ...parsedLocString,
+                    const p = parseLocString(h, refName => isValidRefName(refName, assembly));
+                    const { start, end } = p;
+                    if (start !== undefined && end !== undefined) {
+                        view.addToHighlights({
+                            ...p,
+                            start,
+                            end,
                             assemblyName: assembly,
-                        };
-                        if ((location === null || location === void 0 ? void 0 : location.start) !== undefined &&
-                            (location === null || location === void 0 ? void 0 : location.end) !== undefined) {
-                            view.addToHighlights(location);
-                        }
+                        });
                     }
                 });
             }
             await handleSelectedRegion({ input: loc, model: view, assembly: asm });
             const idsNotFound = [];
-            tracks.forEach(track => tryTrack(view, track, idsNotFound));
+            tracks.forEach(track => {
+                tryTrack(view, track, idsNotFound);
+            });
             if (idsNotFound.length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
@@ -55,7 +56,7 @@ function tryTrack(model, trackId, idsNotFound) {
         model.showTrack(trackId);
     }
     catch (e) {
-        if (`${e}`.match('Could not resolve identifier')) {
+        if (/Could not resolve identifier/.exec(`${e}`)) {
             idsNotFound.push(trackId);
         }
         else {

package/esm/LinearBareDisplay/model.d.ts

@@ -128,7 +128,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: import("react").FC<{

package/esm/LinearBasicDisplay/components/AddFiltersDialog.js

@@ -30,7 +30,9 @@ const AddFiltersDialog = observer(function ({ model, handleClose, }) {
                 .split('\n')
                 .map(line => line.trim())
                 .filter(line => !!line)
-                .map(line => checkJexl(line.trim()));
+                .map(line => {
+                checkJexl(line.trim());
+            });
             setError(undefined);
         }
         catch (e) {
@@ -54,7 +56,9 @@ const AddFiltersDialog = observer(function ({ model, handleClose, }) {
                         React.createElement("code", null, "jexl:get(feature,'score') > 400"),
                         " - show only features that have a score greater than 400"))),
             error ? React.createElement("p", { className: classes.error }, `${error}`) : null,
-            React.createElement(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => setData(event.target.value), InputProps: {
+            React.createElement(TextField, { variant: "outlined", multiline: true, minRows: 5, maxRows: 10, className: classes.dialogContent, fullWidth: true, value: data, onChange: event => {
+                    setData(event.target.value);
+                }, InputProps: {
                     classes: {
                         input: classes.textAreaFont,
                     },
@@ -64,6 +68,8 @@ const AddFiltersDialog = observer(function ({ model, handleClose, }) {
                     model.setJexlFilters(data.split('\n'));
                     handleClose();
                 } }, "Submit"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"))));
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
 });
 export default AddFiltersDialog;

package/esm/LinearBasicDisplay/components/SetMaxHeightDialog.js

@@ -15,12 +15,16 @@ const SetMaxHeightDialog = observer(function ({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set max height" },
         React.createElement(DialogContent, { className: classes.root },
             React.createElement(Typography, null, "Set max height for the track. For example, you can increase this if the layout says \"Max height reached\""),
-            React.createElement(TextField, { value: max, onChange: event => setMax(event.target.value), placeholder: "Enter max score" })),
+            React.createElement(TextField, { value: max, onChange: event => {
+                    setMax(event.target.value);
+                }, placeholder: "Enter max score" })),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
                     model.setMaxHeight(max !== '' && !Number.isNaN(+max) ? +max : undefined);
                     handleClose();
                 } }, "Submit"),
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"))));
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"))));
 });
 export default SetMaxHeightDialog;

package/esm/LinearBasicDisplay/model.d.ts

@@ -156,7 +156,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState? /**
          * #getter
          */: Record<string, any>;
@@ -294,9 +294,7 @@ declare function stateModelFactory(configSchema: AnyConfigurationSchemaType): im
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
             [x: string]: any;
-        } & import("mobx-state-tree/dist/internal" /**
-         * #property
-         */).NonEmptyObject & {
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             setSubschema(slotName: string, data: Record<string, unknown>): Record<string, unknown> | ({
                 [x: string]: any;
             } & import("mobx-state-tree/dist/internal").NonEmptyObject & any & import("mobx-state-tree").IStateTreeNode<AnyConfigurationSchemaType>);

package/esm/LinearBasicDisplay/model.js

@@ -170,14 +170,18 @@ function stateModelFactory(configSchema) {
                         icon: VisibilityIcon,
                         type: 'checkbox',
                         checked: self.showLabels,
-                        onClick: () => self.toggleShowLabels(),
+                        onClick: () => {
+                            self.toggleShowLabels();
+                        },
                     },
                     {
                         label: 'Show descriptions',
                         icon: VisibilityIcon,
                         type: 'checkbox',
                         checked: self.showDescriptions,
-                        onClick: () => self.toggleShowDescriptions(),
+                        onClick: () => {
+                            self.toggleShowDescriptions();
+                        },
                     },
                     {
                         label: 'Display mode',
@@ -189,7 +193,9 @@ function stateModelFactory(configSchema) {
                             'collapse',
                         ].map(val => ({
                             label: val,
-                            onClick: () => self.setDisplayMode(val),
+                            onClick: () => {
+                                self.setDisplayMode(val);
+                            },
                         })),
                     },
                     {

package/esm/LinearGenomeView/components/Cytobands.js

@@ -5,26 +5,11 @@ import { HEADER_OVERVIEW_HEIGHT } from '..';
 import { getCytobands } from './util';
 import { getFillProps } from '@jbrowse/core/util';
 // rounded rect from https://stackoverflow.com/a/45889603/2129219
-// prettier-ignore
 function rightRoundedRect(x, y, width, height, radius) {
-    return "M" + x + "," + y
-        + "h" + (width - radius)
-        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
-        + "v" + (height - 2 * radius)
-        + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
-        + "h" + (radius - width)
-        + "z";
+    return `M${x},${y}h${width - radius}a${radius},${radius} 0 0 1 ${radius},${radius}v${height - 2 * radius}a${radius},${radius} 0 0 1 ${-radius},${radius}h${radius - width}z`;
 }
-// prettier-ignore
 function leftRoundedRect(x, y, width, height, radius) {
-    return "M" + (x + radius) + "," + y
-        + "h" + (width - radius)
-        + "v" + height
-        + "h" + (radius - width)
-        + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
-        + "v" + (2 * radius - height)
-        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
-        + "z";
+    return `M${x + radius},${y}h${width - radius}v${height}h${radius - width}a${radius},${radius} 0 0 1 ${-radius},${-radius}v${2 * radius - height}a${radius},${radius} 0 0 1 ${radius},${-radius}z`;
 }
 function leftTriangle(x, y, width, height) {
     return [
@@ -71,20 +56,18 @@ const Cytobands = observer(function ({ overview, block, assembly, }) {
                     ? rightTriangle(s - w, 0, w, h)
                     : leftTriangle(s, 0, w, h), ...getFillProps(c) }));
         }
-        else if (type === 'acen' && centromereSeen) {
+        if (type === 'acen' && centromereSeen) {
             return (React.createElement("polygon", { key: k, points: reversed
                     ? leftTriangle(s - w, 0, w, h)
                     : rightTriangle(s, 0, w, h), ...getFillProps(c) }));
         }
-        else if (lcap === index) {
+        if (lcap === index) {
             return (React.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }));
         }
-        else if (rcap === index) {
+        if (rcap === index) {
             return (React.createElement("path", { key: k, d: rightRoundedRect(l, 0, w, h, 8), ...getFillProps(c) }));
         }
-        else {
-            return (React.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, ...getFillProps(c) }));
-        }
+        return (React.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, ...getFillProps(c) }));
     })));
 });
 export default Cytobands;

package/esm/LinearGenomeView/components/ExportSvgDialog.js

@@ -8,7 +8,7 @@ function LoadingMessage() {
         React.createElement(Typography, { display: "inline" }, "Creating SVG")));
 }
 function useSvgLocal(key, val) {
-    return useLocalStorage('svg-' + key, val);
+    return useLocalStorage(`svg-${key}`, val);
 }
 function TextField2({ children, ...rest }) {
     return (React.createElement("div", null,
@@ -26,18 +26,28 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         React.createElement(DialogContent, null,
             error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => setTrackLabels(event.target.value) },
+            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                    setFilename(event.target.value);
+                } }),
+            React.createElement(TextField2, { select: true, label: "Track label positioning", variant: "outlined", style: { width: 150 }, value: trackLabels, onChange: event => {
+                    setTrackLabels(event.target.value);
+                } },
                 React.createElement(MenuItem, { value: "offset" }, "Offset"),
                 React.createElement(MenuItem, { value: "overlay" }, "Overlay"),
                 React.createElement(MenuItem, { value: "left" }, "Left"),
                 React.createElement(MenuItem, { value: "none" }, "None")),
-            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
+            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", variant: "outlined", value: themeName, onChange: event => {
+                    setThemeName(event.target.value);
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
+            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                        setRasterizeLayers(val => !val);
+                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"),
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
                     setLoading(true);
                     setError(undefined);

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -48,7 +48,6 @@ async function fetchSequence(model, regions, signal) {
 }
 const GetSequenceDialog = observer(function ({ model, handleClose, }) {
     const { classes } = useStyles();
-    const session = getSession(model);
     const [error, setError] = useState();
     const [sequenceChunks, setSequenceChunks] = useState();
     const [rev, setReverse] = useState(false);
@@ -57,7 +56,6 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
     const { leftOffset, rightOffset } = model;
     const loading = Boolean(sequenceChunks === undefined);
     useEffect(() => {
-        let active = true;
         const controller = new AbortController();
         (async () => {
             try {
@@ -69,26 +67,19 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
                     throw new Error('Selected region is out of bounds');
                 }
                 const chunks = await fetchSequence(model, selection, controller.signal);
-                if (active) {
-                    setSequenceChunks(chunks);
-                }
+                setSequenceChunks(chunks);
             }
             catch (e) {
                 console.error(e);
-                if (active) {
-                    setError(e);
-                }
+                setError(e);
             }
         })();
         return () => {
             controller.abort();
-            active = false;
         };
-    }, [model, session, leftOffset, rightOffset]);
+    }, [model, leftOffset, rightOffset]);
     const sequence = sequenceChunks
-        ? formatSeqFasta(sequenceChunks
-            .filter(f => !!f)
-            .map(chunk => {
+        ? formatSeqFasta(sequenceChunks.map(chunk => {
             let chunkSeq = chunk.get('seq');
             const chunkRefName = chunk.get('refName');
             const chunkStart = chunk.get('start') + 1;
@@ -127,14 +118,20 @@ const GetSequenceDialog = observer(function ({ model, handleClose, }) {
                     },
                 } }),
             React.createElement(FormGroup, null,
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: rev, onChange: event => setReverse(event.target.checked) }), label: "Reverse sequence" }),
-                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: comp, onChange: event => setComplement(event.target.checked) }), label: "Complement sequence" })),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: rev, onChange: event => {
+                            setReverse(event.target.checked);
+                        } }), label: "Reverse sequence" }),
+                React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { value: comp, onChange: event => {
+                            setComplement(event.target.checked);
+                        } }), label: "Complement sequence" })),
             React.createElement(Typography, { style: { margin: 10 } }, "Note: Check both boxes for the \"reverse complement\"")),
         React.createElement(DialogActions, null,
             React.createElement(Button, { onClick: () => {
                     copy(sequence);
                     setCopied(true);
-                    setTimeout(() => setCopied(false), 500);
+                    setTimeout(() => {
+                        setCopied(false);
+                    }, 500);
                 }, disabled: loading || !!error || sequenceTooLarge, color: "primary", startIcon: React.createElement(ContentCopyIcon, null) }, copied ? 'Copied' : 'Copy to clipboard'),
             React.createElement(Button, { onClick: () => {
                     saveAs(new Blob([sequence || ''], {

package/esm/LinearGenomeView/components/Header.js

@@ -50,9 +50,13 @@ const HeaderButtons = observer(({ model }) => {
 function PanControls({ model }) {
     const { classes } = useStyles();
     return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => model.slide(-0.9) },
+        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                model.slide(-0.9);
+            } },
             React.createElement(ArrowBackIcon, null)),
-        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => model.slide(0.9) },
+        React.createElement(Button, { variant: "outlined", className: classes.panButton, onClick: () => {
+                model.slide(0.9);
+            } },
             React.createElement(ArrowForwardIcon, null))));
 }
 const RegionWidth = observer(({ model }) => {

package/esm/LinearGenomeView/components/Highlight.js

@@ -2,32 +2,29 @@ import React, { useRef, useState } from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { colord } from '@jbrowse/core/util/colord';
-import { getSession, } from '@jbrowse/core/util';
+import { getSession } from '@jbrowse/core/util';
 import { Menu } from '@jbrowse/core/ui';
-import { IconButton, Tooltip, useTheme } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 // icons
 import LinkIcon from '@mui/icons-material/Link';
 import CloseIcon from '@mui/icons-material/Close';
 import BookmarkIcon from '@mui/icons-material/Bookmark';
-const useStyles = makeStyles()(theme => {
-    var _a, _b;
-    return ({
-        highlight: {
-            height: '100%',
-            position: 'absolute',
-            overflow: 'hidden',
-            background: `${colord((_b = (_a = theme.palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
-                .alpha(0.35)
-                .toRgbString()}`,
-        },
-    });
-});
+const useStyles = makeStyles()(theme => ({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        overflow: 'hidden',
+        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
+    },
+    linkIcon: {
+        color: colord(theme.palette.highlight.main).darken(0.2).toRgbString(),
+    },
+}));
 const Highlight = observer(function Highlight({ model, highlight, }) {
-    var _a, _b, _c;
+    var _a;
     const { classes } = useStyles();
     const [open, setOpen] = useState(false);
     const anchorEl = useRef(null);
-    const color = (_b = (_a = useTheme().palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod';
     const session = getSession(model);
     const { assemblyManager } = session;
     const dismissHighlight = () => {
@@ -53,20 +50,20 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
             }
             : undefined;
     };
-    const asm = assemblyManager.get(highlight === null || highlight === void 0 ? void 0 : highlight.assemblyName);
+    const asm = assemblyManager.get(highlight.assemblyName);
     const h = mapCoords({
         ...highlight,
-        refName: (_c = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _c !== void 0 ? _c : highlight.refName,
+        refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(highlight.refName)) !== null && _a !== void 0 ? _a : highlight.refName,
     });
     return h ? (React.createElement("div", { className: classes.highlight, style: {
             left: h.left,
             width: h.width,
         } },
-        React.createElement(Tooltip, { title: 'Highlighted from URL parameter', arrow: true },
-            React.createElement(IconButton, { ref: anchorEl, onClick: () => setOpen(true), style: { zIndex: 3 } },
-                React.createElement(LinkIcon, { fontSize: "small", sx: {
-                        color: `${colord(color).darken(0.2).toRgbString()}`,
-                    } }))),
+        React.createElement(Tooltip, { title: "Highlighted from URL parameter", arrow: true },
+            React.createElement(IconButton, { ref: anchorEl, onClick: () => {
+                    setOpen(true);
+                }, style: { zIndex: 3 } },
+                React.createElement(LinkIcon, { fontSize: "small", className: classes.linkIcon }))),
         React.createElement(Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
                 callback(session);
                 handleClose();
@@ -74,7 +71,9 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
                 {
                     label: 'Dismiss highlight',
                     icon: CloseIcon,
-                    onClick: () => dismissHighlight(),
+                    onClick: () => {
+                        dismissHighlight();
+                    },
                 },
                 {
                     label: 'Bookmark highlighted region',
@@ -84,7 +83,7 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
                         if (!bookmarkWidget) {
                             bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
                         }
-                        // @ts-ignore
+                        // @ts-expect-error
                         bookmarkWidget.addBookmark(highlight);
                         dismissHighlight();
                     },
@@ -92,6 +91,6 @@ const Highlight = observer(function Highlight({ model, highlight, }) {
             ] }))) : null;
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return model.highlight.map((highlight, idx) => (React.createElement(Highlight, { key: JSON.stringify(highlight) + '-' + idx, model: model, highlight: highlight })));
+    return model.highlight.map((highlight, idx) => (React.createElement(Highlight, { key: `${JSON.stringify(highlight)}-${idx}`, model: model, highlight: highlight })));
 });
 export default HighlightGroup;

package/esm/LinearGenomeView/components/ImportForm.js

@@ -35,12 +35,13 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
     const [value, setValue] = useState('');
     const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
     const assemblyLoaded = !!regions;
-    const r0 = regions ? (_a = regions[0]) === null || _a === void 0 ? void 0 : _a.refName : '';
+    const r0 = regions ? ((_a = regions[0]) === null || _a === void 0 ? void 0 : _a.refName) || '' : '';
     // useEffect resets to an "initial state" of displaying first region from
     // assembly after assembly change. needs to react to selectedAsm as well as
     // r0 because changing assembly will run setValue('') and then r0 may not
     // change if assembly names are the same across assemblies, but it still
     // needs to be reset
+    /* biome-ignore lint/correctness/useExhaustiveDependencies: */
     useEffect(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
@@ -80,7 +81,9 @@ const LinearGenomeViewImportForm = observer(function ({ model, }) {
                 React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
                     React.createElement(Grid, { item: true },
                         React.createElement(FormControl, null,
-                            React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), localStorageKey: "lgv", session: session, selected: selectedAsm }))),
+                            React.createElement(AssemblySelector, { onChange: val => {
+                                    setSelectedAsm(val);
+                                }, localStorageKey: "lgv", session: session, selected: selectedAsm }))),
                     React.createElement(Grid, { item: true }, selectedAsm ? (assemblyError ? (React.createElement(CloseIcon, { style: { color: 'red' } })) : assemblyLoaded ? (React.createElement(FormControl, null,
                         React.createElement(ImportFormRefNameAutocomplete, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }))) : (React.createElement(CircularProgress, { size: 20, disableShrink: true }))) : null),
                     React.createElement(Grid, { item: true },

package/esm/LinearGenomeView/components/ImportFormRefNameAutocomplete.js

@@ -16,7 +16,11 @@ const ImportFormRefNameAutocomplete = observer(function ({ model, selectedAsm, v
             textSearchManager,
             rankSearchResults,
             searchScope,
-        }), model: model, assemblyName: selectedAsm, value: value, minWidth: 270, onChange: str => setValue(str), onSelect: val => setOption(val), TextFieldProps: {
+        }), model: model, assemblyName: selectedAsm, value: value, minWidth: 270, onChange: str => {
+            setValue(str);
+        }, onSelect: val => {
+            setOption(val);
+        }, TextFieldProps: {
             variant: 'outlined',
             helperText: 'Enter sequence name, feature name, or location',
         } }));

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
-type LGV = LinearGenomeViewModel;
-declare const LinearGenomeView: ({ model }: {
-    model: LGV;
+declare const LinearGenomeView: ({ model, }: {
+    model: LinearGenomeViewModel;
 }) => React.JSX.Element;
 export default LinearGenomeView;

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
         zIndex: 1000,
     },
 }));
-const LinearGenomeView = observer(({ model }) => {
+const LinearGenomeView = observer(function ({ model, }) {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
     const ref = useRef(null);
     const session = getSession(model);
@@ -30,7 +30,7 @@ const LinearGenomeView = observer(({ model }) => {
         // necessary for subviews to be focused properly
         function handleSelectView(e) {
             var _a, _b;
-            if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
                 (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
             }
         }
@@ -49,7 +49,9 @@ const LinearGenomeView = observer(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (React.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => session.setHovered(undefined), onMouseMove: event => {
+    return (React.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
+            session.setHovered(undefined);
+        }, onMouseMove: event => {
             const c = ref.current;
             if (!c) {
                 return;

package/esm/LinearGenomeView/components/MiniControls.js

@@ -27,9 +27,13 @@ const MiniControls = observer(function ({ model, }) {
         React.createElement(Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined },
             React.createElement(CascadingMenuButton, { menuItems: model.menuItems() },
                 React.createElement(ArrowDown, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
+            React.createElement(IconButton, { "data-testid": "zoom_out", onClick: () => {
+                    model.zoom(bpPerPx * 2);
+                }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
                 React.createElement(ZoomOut, { fontSize: "small" })),
-            React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+            React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => {
+                    model.zoom(bpPerPx / 2);
+                }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
                 React.createElement(ZoomIn, { fontSize: "small" }))))) : null;
 });
 export default MiniControls;

package/esm/LinearGenomeView/components/OverviewHighlight.js

@@ -2,54 +2,47 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { colord } from '@jbrowse/core/util/colord';
-import { getSession, notEmpty, } from '@jbrowse/core/util';
-const useStyles = makeStyles()(theme => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        highlight: {
-            height: '100%',
-            position: 'absolute',
-            background: `${colord((_b = (_a = theme.palette.highlight) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : 'goldenrod')
-                .alpha(0.35)
-                .toRgbString()}`,
-            borderLeft: `1px solid ${(_d = (_c = theme.palette.highlight) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : 'goldenrod'}`,
-            borderRight: `1px solid ${(_f = (_e = theme.palette.highlight) === null || _e === void 0 ? void 0 : _e.main) !== null && _f !== void 0 ? _f : 'goldenrod'}`,
-        },
-    });
-});
+import { getSession, notEmpty } from '@jbrowse/core/util';
+const useStyles = makeStyles()(theme => ({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        background: colord(theme.palette.highlight.main).alpha(0.35).toRgbString(),
+        borderLeft: `1px solid ${theme.palette.highlight.main}`,
+        borderRight: `1px solid ${theme.palette.highlight.main}`,
+    },
+}));
 const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
     const { classes } = useStyles();
-    const { cytobandOffset } = model;
+    const { highlight, cytobandOffset } = model;
     const session = getSession(model);
     const { assemblyManager } = session;
-    // coords
-    const mapCoords = (r) => {
+    return highlight
+        .map(r => {
+        var _a;
+        const asm = assemblyManager.get(r.assemblyName);
+        const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
         const s = overview.bpToPx({
             ...r,
-            coord: r.reversed ? r.end : r.start,
+            refName,
+            coord: r.start,
         });
         const e = overview.bpToPx({
             ...r,
-            coord: r.reversed ? r.start : r.end,
+            refName,
+            coord: r.end,
         });
-        return s !== undefined && e != undefined
+        return s !== undefined && e !== undefined
             ? {
                 width: Math.abs(e - s),
                 left: s + cytobandOffset,
             }
             : undefined;
-    };
-    return model.highlight
-        .map(h => {
-        var _a;
-        const asm = assemblyManager.get(h === null || h === void 0 ? void 0 : h.assemblyName);
-        return mapCoords({
-            ...h,
-            refName: (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(h.refName)) !== null && _a !== void 0 ? _a : h.refName,
-        });
     })
         .filter(notEmpty)
-        .map(({ left, width }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+        .map(({ left, width }, idx) => (React.createElement("div", { 
+        /* biome-ignore lint/suspicious/noArrayIndexKey: */
+        key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
             width: width,
             left: left,
         } })));