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

package/dist/LinearGenomeView/components/ImportForm.js

@@ -63,12 +63,13 @@ const LinearGenomeViewImportForm = (0, mobx_react_1.observer)(function ({ model,
     const [value, setValue] = (0, react_1.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: */
     (0, react_1.useEffect)(() => {
         setValue(r0);
     }, [r0, selectedAsm]);
@@ -108,7 +109,9 @@ const LinearGenomeViewImportForm = (0, mobx_react_1.observer)(function ({ model,
                 react_1.default.createElement(material_1.Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
                     react_1.default.createElement(material_1.Grid, { item: true },
                         react_1.default.createElement(material_1.FormControl, null,
-                            react_1.default.createElement(ui_1.AssemblySelector, { onChange: val => setSelectedAsm(val), localStorageKey: "lgv", session: session, selected: selectedAsm }))),
+                            react_1.default.createElement(ui_1.AssemblySelector, { onChange: val => {
+                                    setSelectedAsm(val);
+                                }, localStorageKey: "lgv", session: session, selected: selectedAsm }))),
                     react_1.default.createElement(material_1.Grid, { item: true }, selectedAsm ? (assemblyError ? (react_1.default.createElement(Close_1.default, { style: { color: 'red' } })) : assemblyLoaded ? (react_1.default.createElement(material_1.FormControl, null,
                         react_1.default.createElement(ImportFormRefNameAutocomplete_1.default, { value: value, setValue: setValue, selectedAsm: selectedAsm, setOption: setOption, model: model }))) : (react_1.default.createElement(material_1.CircularProgress, { size: 20, disableShrink: true }))) : null),
                     react_1.default.createElement(material_1.Grid, { item: true },

package/dist/LinearGenomeView/components/ImportFormRefNameAutocomplete.js

@@ -21,7 +21,11 @@ const ImportFormRefNameAutocomplete = (0, mobx_react_1.observer)(function ({ mod
             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/dist/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/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -48,7 +48,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         zIndex: 1000,
     },
 }));
-const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
+const LinearGenomeView = (0, mobx_react_1.observer)(function ({ model, }) {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
     const ref = (0, react_1.useRef)(null);
     const session = (0, util_1.getSession)(model);
@@ -58,7 +58,7 @@ const LinearGenomeView = (0, mobx_react_1.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);
             }
         }
@@ -77,7 +77,9 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (react_1.default.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => session.setHovered(undefined), onMouseMove: event => {
+    return (react_1.default.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => {
+            session.setHovered(undefined);
+        }, onMouseMove: event => {
             const c = ref.current;
             if (!c) {
                 return;

package/dist/LinearGenomeView/components/MiniControls.js

@@ -32,9 +32,13 @@ const MiniControls = (0, mobx_react_1.observer)(function ({ model, }) {
         react_1.default.createElement(material_1.Paper, { className: focusedViewId === id ? classes.focusedBackground : undefined },
             react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: model.menuItems() },
                 react_1.default.createElement(KeyboardArrowDown_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => {
+                    model.zoom(bpPerPx * 2);
+                }, disabled: bpPerPx >= maxBpPerPx - 0.0001 || scaleFactor !== 1 },
                 react_1.default.createElement(ZoomOut_1.default, { fontSize: "small" })),
-            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
+            react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => {
+                    model.zoom(bpPerPx / 2);
+                }, disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1 },
                 react_1.default.createElement(ZoomIn_1.default, { fontSize: "small" }))))) : null;
 });
 exports.default = MiniControls;

package/dist/LinearGenomeView/components/OverviewHighlight.js

@@ -8,53 +8,46 @@ const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const colord_1 = require("@jbrowse/core/util/colord");
 const util_1 = require("@jbrowse/core/util");
-const useStyles = (0, mui_1.makeStyles)()(theme => {
-    var _a, _b, _c, _d, _e, _f;
-    return ({
-        highlight: {
-            height: '100%',
-            position: 'absolute',
-            background: `${(0, colord_1.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'}`,
-        },
-    });
-});
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+        background: (0, colord_1.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 = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
     const { classes } = useStyles();
-    const { cytobandOffset } = model;
+    const { highlight, cytobandOffset } = model;
     const session = (0, util_1.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(util_1.notEmpty)
-        .map(({ left, width }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+        .map(({ left, width }, idx) => (react_1.default.createElement("div", { 
+        /* biome-ignore lint/suspicious/noArrayIndexKey: */
+        key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
             width: width,
             left: left,
         } })));

package/dist/LinearGenomeView/components/OverviewRubberband.js

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

package/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -148,8 +148,7 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
     const { pluginManager } = (0, util_1.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;
@@ -187,23 +186,19 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
 });
 const OverviewScalebar = (0, mobx_react_1.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 = (0, react_1.useMemo)(() => {
         const overview = Base1DViewModel_1.default.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_1.default.createElement("div", null,
         react_1.default.createElement(OverviewRubberband_1.default, { model: model, overview: overview, ControlComponent: react_1.default.createElement(Scalebar, { model: model, overview: overview, scale: scale }) }),

package/dist/LinearGenomeView/components/OverviewScalebarPolygon.js

@@ -14,8 +14,7 @@ const OverviewScalebarPolygon = (0, mobx_react_1.observer)(function ({ model, ov
     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/dist/LinearGenomeView/components/RefNameAutocomplete/AutocompleteTextField.js

@@ -10,12 +10,13 @@ const material_1 = require("@mui/material");
 const EndAdornment_1 = __importDefault(require("./EndAdornment"));
 function AutocompleteTextField({ TextFieldProps, inputBoxVal, params, showHelp, setInputValue, setCurrentSearch, }) {
     const { helperText, InputProps = {} } = TextFieldProps;
-    return (react_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { onBlur: () => {
+            setInputValue(inputBoxVal);
+        }, ...params, ...TextFieldProps, size: "small", helperText: helperText, InputProps: {
             ...params.InputProps,
             ...InputProps,
             endAdornment: (react_1.default.createElement(EndAdornment_1.default, { 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/dist/LinearGenomeView/components/RefNameAutocomplete/EndAdornment.js

@@ -37,10 +37,14 @@ const HelpDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __import
 function HelpAdornment() {
     const [isHelpDialogDisplayed, setHelpDialogDisplayed] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { onClick: () => setHelpDialogDisplayed(true), size: "small" },
+        react_1.default.createElement(material_1.IconButton, { onClick: () => {
+                setHelpDialogDisplayed(true);
+            }, size: "small" },
             react_1.default.createElement(Help_1.default, { fontSize: "small" })),
         isHelpDialogDisplayed ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-            react_1.default.createElement(HelpDialog, { handleClose: () => setHelpDialogDisplayed(false) }))) : null));
+            react_1.default.createElement(HelpDialog, { handleClose: () => {
+                    setHelpDialogDisplayed(false);
+                } }))) : null));
 }
 function EndAdornment({ showHelp, endAdornment, }) {
     return (react_1.default.createElement(react_1.default.Fragment, null,

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

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

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

@@ -62,24 +62,26 @@ const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSele
                 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((0, util_1.measureText)(inputBoxVal, 14) + 100, minWidth), maxWidth);
-    const regions = assembly === null || assembly === void 0 ? void 0 : assembly.regions;
-    const regionOptions = (0, react_1.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 BaseResults_1.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_1.default.createElement(material_1.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/dist/LinearGenomeView/components/RubberbandSpan.js

@@ -29,10 +29,8 @@ const mui_1 = require("tss-react/mui");
 const material_1 = require("@mui/material");
 const util_1 = require("@jbrowse/core/util");
 const useStyles = (0, mui_1.makeStyles)()(theme => {
-    const { primary, tertiary } = theme.palette;
-    const background = tertiary
-        ? (0, material_1.alpha)(tertiary.light, 0.7)
-        : (0, material_1.alpha)(primary.light, 0.7);
+    const { tertiary } = theme.palette;
+    const background = (0, material_1.alpha)(tertiary.light, 0.7);
     return {
         rubberband: {
             height: '100%',
@@ -48,7 +46,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => {
             minHeight: 8,
         },
         rubberbandText: {
-            color: tertiary ? tertiary.contrastText : primary.contrastText,
+            color: tertiary.contrastText,
         },
         popover: {
             mouseEvents: 'none',

package/dist/LinearGenomeView/components/Scalebar.js

@@ -51,6 +51,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 const RenderedRefNameLabels = (0, mobx_react_1.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
@@ -62,7 +63,7 @@ const RenderedRefNameLabels = (0, mobx_react_1.observer)(function ({ model }) {
     });
     const val = scaleBarDisplayPrefix();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        staticBlocks.blocks[0].type !== 'ContentBlock' && val ? (react_1.default.createElement(material_1.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_1.default.createElement(material_1.Typography, { style: { left: 0, zIndex: 100 }, className: classes.refLabel }, val)) : null,
         staticBlocks.map((block, index) => {
             return block.type === 'ContentBlock' &&
                 (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (react_1.default.createElement(material_1.Typography, { key: `refLabel-${block.key}-${index}`, style: {

package/dist/LinearGenomeView/components/SearchResultsDialog.js

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

package/dist/LinearGenomeView/components/SearchResultsTable.js

@@ -9,11 +9,10 @@ const material_1 = require("@mui/material");
 const mobx_state_tree_1 = require("mobx-state-tree");
 const util_1 = require("@jbrowse/core/util");
 function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, model, handleClose, }) {
-    var _a;
     const session = (0, util_1.getSession)(model);
     const { pluginManager } = (0, util_1.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`);
@@ -57,7 +56,7 @@ function SearchResultsTable({ searchResults, assemblyName: optAssemblyName, mode
                     react_1.default.createElement(material_1.TableCell, { align: "right" }, "Location"),
                     react_1.default.createElement(material_1.TableCell, { align: "right" }, "Track"),
                     react_1.default.createElement(material_1.TableCell, { align: "right" }))),
-            react_1.default.createElement(material_1.TableBody, null, searchResults.map(result => (react_1.default.createElement(material_1.TableRow, { key: `${result.getId()}` },
+            react_1.default.createElement(material_1.TableBody, null, searchResults.map(result => (react_1.default.createElement(material_1.TableRow, { key: result.getId() },
                 react_1.default.createElement(material_1.TableCell, { component: "th", scope: "row" }, result.getLabel()),
                 react_1.default.createElement(material_1.TableCell, { align: "right" }, result.getLocation()),
                 react_1.default.createElement(material_1.TableCell, { align: "right" }, getTrackName(result.getTrackId()) || 'N/A'),

package/dist/LinearGenomeView/components/SequenceSearchDialog.js

@@ -51,11 +51,19 @@ const SequenceSearchDialog = (0, mobx_react_1.observer)(function ({ model, handl
     return (react_1.default.createElement(ui_1.Dialog, { maxWidth: "xl", open: true, onClose: handleClose, title: "Sequence search" },
         react_1.default.createElement(material_1.DialogContent, { className: classes.dialogContent },
             react_1.default.createElement(material_1.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_1.default.createElement(material_1.TextField, { value: value, onChange: e => setValue(e.target.value), helperText: "Sequence search pattern" }),
+            react_1.default.createElement(material_1.TextField, { value: value, onChange: e => {
+                    setValue(e.target.value);
+                }, helperText: "Sequence search pattern" }),
             react_1.default.createElement(material_1.FormGroup, null,
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: searchForward, onChange: event => setSearchForward(event.target.checked) }), label: "Search forward strand" }),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: searchReverse, onChange: event => setSearchReverse(event.target.checked) }), label: "Search reverse strand" }),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: caseInsensitive, onChange: event => setCaseInsensitive(event.target.checked) }), label: "Case insensitive" })),
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: searchForward, onChange: event => {
+                            setSearchForward(event.target.checked);
+                        } }), label: "Search forward strand" }),
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: searchReverse, onChange: event => {
+                            setSearchReverse(event.target.checked);
+                        } }), label: "Search reverse strand" }),
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Checkbox, { checked: caseInsensitive, onChange: event => {
+                            setCaseInsensitive(event.target.checked);
+                        } }), label: "Case insensitive" })),
             error ? react_1.default.createElement(material_1.Typography, { color: "error" }, `${error}`) : null),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { onClick: () => {
@@ -85,6 +93,8 @@ const SequenceSearchDialog = (0, mobx_react_1.observer)(function ({ model, handl
                     }
                     handleClose();
                 }, variant: "contained", color: "primary" }, "Submit"),
-            react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    handleClose();
+                }, variant: "contained", color: "secondary" }, "Close"))));
 });
 exports.default = SequenceSearchDialog;

package/dist/LinearGenomeView/components/TrackContainer.js

@@ -49,9 +49,9 @@ const useStyles = (0, mui_1.makeStyles)()({
 const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
-    const { draggingTrackId } = model;
+    const { draggingTrackId, showTrackOutlines } = model;
     const ref = (0, react_1.useRef)(null);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, className: classes.root, variant: "outlined", onClick: event => {
+    return (react_1.default.createElement(material_1.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/dist/LinearGenomeView/components/TrackLabel.js

@@ -53,27 +53,37 @@ const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(functio
                 {
                     label: minimized ? 'Restore track' : 'Minimize track',
                     icon: minimized ? Add_1.default : Minimize_1.default,
-                    onClick: () => track.setMinimized(!minimized),
+                    onClick: () => {
+                        track.setMinimized(!minimized);
+                    },
                 },
                 {
                     label: 'Move track to top',
                     icon: KeyboardDoubleArrowUp_1.default,
-                    onClick: () => view.moveTrackToTop(track.id),
+                    onClick: () => {
+                        view.moveTrackToTop(track.id);
+                    },
                 },
                 {
                     label: 'Move track up',
                     icon: KeyboardArrowUp_1.default,
-                    onClick: () => view.moveTrackUp(track.id),
+                    onClick: () => {
+                        view.moveTrackUp(track.id);
+                    },
                 },
                 {
                     label: 'Move track down',
                     icon: KeyboardArrowDown_1.default,
-                    onClick: () => view.moveTrackDown(track.id),
+                    onClick: () => {
+                        view.moveTrackDown(track.id);
+                    },
                 },
                 {
                     label: 'Move track to bottom',
                     icon: KeyboardDoubleArrowDown_1.default,
-                    onClick: () => view.moveTrackToBottom(track.id),
+                    onClick: () => {
+                        view.moveTrackToBottom(track.id);
+                    },
                 },
             ],
         },

package/dist/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -26,7 +26,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_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })));
 }
 exports.default = TrackLabelDragHandle;

package/dist/LinearGenomeView/components/TracksContainer.js

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

package/dist/LinearGenomeView/components/ZoomControls.js

@@ -49,12 +49,18 @@ const ZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
     (0, react_1.useEffect)(() => {
         setValue(-Math.log2(bpPerPx) * 100);
-    }, [setValue, bpPerPx]);
+    }, [bpPerPx]);
     return (react_1.default.createElement("div", { className: classes.container },
-        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => model.zoom(bpPerPx * 2), disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
+        react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_out", onClick: () => {
+                model.zoom(bpPerPx * 2);
+            }, disabled: bpPerPx >= maxBpPerPx - 0.0001, size: "large" },
             react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.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_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
+        react_1.default.createElement(material_1.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_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => {
+                model.zoom(model.bpPerPx / 2);
+            }, disabled: bpPerPx <= minBpPerPx + 0.0001, size: "large" },
             react_1.default.createElement(ZoomIn_1.default, null))));
 });
 exports.default = ZoomControls;

package/dist/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;