@jbrowse/plugin-linear-genome-view 2.6.3 → 2.7.1

package/esm/LinearGenomeView/components/Cytobands.js

@@ -25,6 +25,20 @@ function leftRoundedRect(x, y, width, height, radius) {
         + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
         + "z";
 }
+function leftTriangle(x, y, width, height) {
+    return [
+        [x, 0],
+        [x + width, height / 2],
+        [x, height],
+    ].toString();
+}
+function rightTriangle(x, y, width, height) {
+    return [
+        [x, height / 2],
+        [x + width, 0],
+        [x + width, height],
+    ].toString();
+}
 const colorMap = {
     gneg: 'rgb(227,227,227)',
     gpos25: 'rgb(142,142,142)',
@@ -35,52 +49,37 @@ const colorMap = {
     stalk: 'rgb(127,127,127)',
     acen: '#800',
 };
-export default observer(function Cytobands({ overview, block, assembly, }) {
+const Cytobands = observer(function ({ overview, block, assembly, }) {
     const { offsetPx, reversed } = block;
     const cytobands = getCytobands(assembly, block.refName);
-    const coords = cytobands.map(f => {
-        const { refName, start, end, type } = f;
-        return [
-            overview.bpToPx({
-                refName,
-                coord: start,
-            }),
-            overview.bpToPx({
-                refName,
-                coord: end,
-            }),
-            type,
-        ];
-    });
-    const arr = cytobands || [];
-    const lcap = reversed ? arr.length - 1 : 0;
-    const rcap = reversed ? 0 : arr.length - 1;
-    let firstCent = true;
-    return (React.createElement("g", { transform: `translate(-${offsetPx})` }, coords.map(([start, end, type], index) => {
-        const key = `${start}-${end}-${type}`;
-        if (type === 'acen' && firstCent) {
-            firstCent = false;
-            return (React.createElement("polygon", { key: key, points: [
-                    [start, 0],
-                    [end, HEADER_OVERVIEW_HEIGHT / 2],
-                    [start, HEADER_OVERVIEW_HEIGHT],
-                ].toString(), fill: colorMap[type] }));
+    const lcap = reversed ? cytobands.length - 1 : 0;
+    const rcap = reversed ? 0 : cytobands.length - 1;
+    const h = HEADER_OVERVIEW_HEIGHT;
+    let centromereSeen = false;
+    return (React.createElement("g", { transform: `translate(-${offsetPx})` }, cytobands.map((args, index) => {
+        const k = JSON.stringify(args);
+        const { refName, type, start, end } = args;
+        const s = overview.bpToPx({ refName, coord: start }) || 0;
+        const e = overview.bpToPx({ refName, coord: end }) || 0;
+        const l = Math.min(s, e);
+        const w = Math.abs(e - s);
+        const c = colorMap[type];
+        if (type === 'acen' && !centromereSeen) {
+            centromereSeen = true; // the next acen entry is drawn with different right triangle
+            return React.createElement("polygon", { key: k, points: leftTriangle(s, 0, w, h), fill: c });
         }
-        if (type === 'acen' && !firstCent) {
-            return (React.createElement("polygon", { key: key, points: [
-                    [start, HEADER_OVERVIEW_HEIGHT / 2],
-                    [end, 0],
-                    [end, HEADER_OVERVIEW_HEIGHT],
-                ].toString(), fill: colorMap[type] }));
+        else if (type === 'acen' && centromereSeen) {
+            return React.createElement("polygon", { key: k, points: rightTriangle(s, 0, w, h), fill: c });
         }
-        if (lcap === index) {
-            return (React.createElement("path", { key: key, d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        else if (lcap === index) {
+            return React.createElement("path", { key: k, d: leftRoundedRect(l, 0, w, h, 8), fill: c });
         }
         else if (rcap === index) {
-            return (React.createElement("path", { key: key, d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+            return React.createElement("path", { key: k, d: rightRoundedRect(l, 0, w, h, 8), fill: c });
         }
         else {
-            return (React.createElement("rect", { key: key, x: Math.min(start, end), y: 0, width: Math.abs(end - start), height: HEADER_OVERVIEW_HEIGHT, fill: colorMap[type] }));
+            return React.createElement("rect", { key: k, x: l, y: 0, width: w, height: h, fill: c });
         }
     })));
 });
+export default Cytobands;

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function SequenceDialog({ model, handleClose, }: {
+declare const GetSequenceDialog: ({ model, handleClose, }: {
     model: LGV;
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SequenceDialog;
-export default _default;
+}) => React.JSX.Element;
+export default GetSequenceDialog;

package/esm/LinearGenomeView/components/GetSequenceDialog.js

@@ -46,7 +46,7 @@ async function fetchSequence(model, regions, signal) {
         signal,
     });
 }
-function SequenceDialog({ model, handleClose, }) {
+const GetSequenceDialog = observer(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const [error, setError] = useState();
@@ -142,5 +142,5 @@ function SequenceDialog({ model, handleClose, }) {
                     }), 'jbrowse_ref_seq.fa');
                 }, disabled: loading || !!error, color: "primary", startIcon: React.createElement(GetAppIcon, null) }, "Download FASTA"),
             React.createElement(Button, { onClick: handleClose, variant: "contained" }, "Close"))));
-}
-export default observer(SequenceDialog);
+});
+export default GetSequenceDialog;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function VerticalGuides({ model }: {
+declare const Gridlines: ({ model }: {
     model: LGV;
-}): React.JSX.Element;
-declare const _default: typeof VerticalGuides;
-export default _default;
+}) => React.JSX.Element;
+export default Gridlines;

package/esm/LinearGenomeView/components/Gridlines.js

@@ -31,30 +31,33 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.divider,
     },
 }));
-const RenderedVerticalGuides = observer(({ model }) => {
+function RenderedBlockLines({ block, bpPerPx, }) {
     const { classes, cx } = useStyles();
-    return (React.createElement(React.Fragment, null, model.staticBlocks.map((block, index) => {
+    const ticks = makeTicks(block.start, block.end, bpPerPx);
+    return (React.createElement(ContentBlockComponent, { block: block }, ticks.map(({ type, base }) => {
+        const x = (block.reversed ? block.end - base : base - block.start) / bpPerPx;
+        return (React.createElement("div", { key: base, className: cx(classes.tick, type === 'major' || type === 'labeledMajor'
+                ? classes.majorTick
+                : classes.minorTick), style: { left: x } }));
+    })));
+}
+const RenderedVerticalGuides = observer(({ model }) => {
+    const { staticBlocks, bpPerPx } = model;
+    return (React.createElement(React.Fragment, null, staticBlocks.map((block, index) => {
+        const k = `${block.key}-${index}`;
         if (block instanceof ContentBlock) {
-            const ticks = makeTicks(block.start, block.end, model.bpPerPx);
-            return (React.createElement(ContentBlockComponent, { key: `${block.key}-${index}`, block: block }, ticks.map(tick => {
-                const x = (block.reversed
-                    ? block.end - tick.base
-                    : tick.base - block.start) / model.bpPerPx;
-                return (React.createElement("div", { key: tick.base, className: cx(classes.tick, tick.type === 'major' || tick.type === 'labeledMajor'
-                        ? classes.majorTick
-                        : classes.minorTick), style: { left: x } }));
-            })));
+            return React.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        if (block instanceof ElidedBlock) {
-            return React.createElement(ElidedBlockComponent, { key: block.key, width: block.widthPx });
+        else if (block instanceof ElidedBlock) {
+            return React.createElement(ElidedBlockComponent, { key: k, width: block.widthPx });
         }
-        if (block instanceof InterRegionPaddingBlock) {
-            return (React.createElement(InterRegionPaddingBlockComponent, { key: block.key, width: block.widthPx, boundary: block.variant === 'boundary' }));
+        else if (block instanceof InterRegionPaddingBlock) {
+            return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
         }
         return null;
     })));
 });
-function VerticalGuides({ model }) {
+const Gridlines = observer(function ({ model }) {
     const { classes } = useStyles();
     // find the block that needs pinning to the left side for context
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
@@ -66,5 +69,5 @@ function VerticalGuides({ model }) {
                 width: model.staticBlocks.totalWidthPx,
             } },
             React.createElement(RenderedVerticalGuides, { model: model }))));
-}
-export default observer(VerticalGuides);
+});
+export default Gridlines;

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

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

package/esm/LinearGenomeView/components/ImportForm.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(4),
     },
 }));
-export default observer(function ({ model }) {
+const LinearGenomeViewImportForm = observer(function ({ model, }) {
     var _a;
     const { classes } = useStyles();
     const session = getSession(model);
@@ -140,3 +140,4 @@ export default observer(function ({ model }) {
                                     model.showAllRegionsInAssembly(selectedAsm);
                                 }, variant: "contained", color: "secondary" }, "Show all regions in assembly"))))))));
 });
+export default LinearGenomeViewImportForm;

package/esm/LinearGenomeView/components/LinearGenomeView.js

@@ -1,4 +1,4 @@
-import React, { lazy } from 'react';
+import React, { lazy, useEffect, useRef } from 'react';
 import { Button, Paper, Typography } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { LoadingEllipses } from '@jbrowse/core/ui';
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import TrackContainer from './TrackContainer';
 import TracksContainer from './TracksContainer';
+import { getSession } from '@jbrowse/core/util';
 const ImportForm = lazy(() => import('./ImportForm'));
 const useStyles = makeStyles()(theme => ({
     note: {
@@ -18,6 +19,23 @@ const useStyles = makeStyles()(theme => ({
 const LinearGenomeView = observer(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
     const { classes } = useStyles();
+    const ref = useRef(null);
+    const session = getSession(model);
+    useEffect(() => {
+        // sets the focused view id based on a click within the LGV; 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))) {
+                (_b = session.setFocusedViewId) === null || _b === void 0 ? void 0 : _b.call(session, model.id);
+            }
+        }
+        document.addEventListener('mousedown', handleSelectView);
+        document.addEventListener('keydown', handleSelectView);
+        return () => {
+            document.removeEventListener('mousedown', handleSelectView);
+            document.removeEventListener('keydown', handleSelectView);
+        };
+    }, [session, model]);
     if (!initialized && !error) {
         return React.createElement(LoadingEllipses, { variant: "h6" });
     }
@@ -26,7 +44,7 @@ const LinearGenomeView = observer(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (React.createElement("div", { style: { position: 'relative' } },
+    return (React.createElement("div", { style: { position: 'relative' }, ref: ref },
         React.createElement(HeaderComponent, { model: model }),
         React.createElement(MiniControlsComponent, { model: model }),
         React.createElement(TracksContainer, { model: model }, !tracks.length ? (React.createElement(Paper, { variant: "outlined", className: classes.note }, !model.hideNoTracksActive ? (React.createElement(React.Fragment, null,

package/esm/LinearGenomeView/components/MiniControls.js

@@ -7,23 +7,31 @@ import ZoomOut from '@mui/icons-material/ZoomOut';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 import { makeStyles } from 'tss-react/mui';
+import { getSession } from '@jbrowse/core/util';
 const useStyles = makeStyles()(theme => ({
-    bg: {
+    background: {
         position: 'absolute',
         right: 0,
         zIndex: 1001,
         background: theme.palette.background.paper,
     },
+    focusedBackground: {
+        background: theme.palette.secondary.light,
+        svg: {
+            fill: theme.palette.secondary.contrastText,
+        },
+    },
 }));
 const MiniControls = observer(function ({ model, }) {
-    const { classes } = useStyles();
-    const { bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
-    return hideHeader ? (React.createElement(Paper, { className: classes.bg },
+    const { classes, cx } = useStyles();
+    const { id, bpPerPx, maxBpPerPx, minBpPerPx, scaleFactor, hideHeader } = model;
+    const { focusedViewId } = getSession(model);
+    return hideHeader ? (React.createElement(Paper, { className: cx(classes.background, 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(ZoomOut, { fontSize: "small" })),
-        React.createElement(IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.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/OverviewRubberband.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, overview, ControlComponent, }: {
+declare const OverviewRubberband: ({ model, overview, ControlComponent, }: {
     model: LGV;
     overview: Base1DViewModel;
     ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default OverviewRubberband;

package/esm/LinearGenomeView/components/OverviewRubberband.js

@@ -32,7 +32,7 @@ const HoverTooltip = observer(function ({ model, open, guideX, overview, }) {
     return (React.createElement(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true },
         React.createElement("div", { className: classes.guide, style: { left: guideX } })));
 });
-export default observer(function OverviewRubberband({ model, overview, ControlComponent = React.createElement("div", null), }) {
+const OverviewRubberband = observer(function OverviewRubberband({ model, overview, ControlComponent = React.createElement("div", null), }) {
     const { cytobandOffset } = model;
     const [startX, setStartX] = useState();
     const [currentX, setCurrentX] = useState();
@@ -128,3 +128,4 @@ export default observer(function OverviewRubberband({ model, overview, ControlCo
         leftBpOffset && rightBpOffset ? (React.createElement(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });
+export default OverviewRubberband;

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

@@ -7,10 +7,10 @@ declare const Polygon: ({ model, overview, useOffset, }: {
     useOffset?: boolean | undefined;
 }) => React.JSX.Element | null;
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, children, }: {
+declare const OverviewScalebar: ({ model, children, }: {
     model: LGV;
     children: React.ReactNode;
 }) => React.JSX.Element;
-export default _default;
 export { Polygon };
 export { default as Cytobands } from './Cytobands';
+export default OverviewScalebar;

package/esm/LinearGenomeView/components/OverviewScalebar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Typography, useTheme, alpha } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
@@ -76,9 +76,7 @@ const Polygon = observer(function ({ model, overview, useOffset = true, }) {
     if (!contentBlocks.length) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = contentBlocks.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = contentBlocks.at(-1);
     const topLeft = (overview.bpToPx({
         ...first,
@@ -155,9 +153,7 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
     if (!visibleRegions.length) {
         return null;
     }
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const first = visibleRegions.at(0);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const last = visibleRegions.at(-1);
     const firstOverviewPx = overview.bpToPx({
         ...first,
@@ -185,17 +181,25 @@ const Scalebar = observer(function ({ model, scale, overview, }) {
                 } })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
         })));
 });
-export default observer(function OverviewScalebar({ model, children, }) {
+const OverviewScalebar = observer(function ({ model, children, }) {
     const { classes } = useStyles();
     const { totalBp, width, cytobandOffset, displayedRegions } = model;
-    const overview = Base1DView.create({
-        displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
-        interRegionPaddingWidth: 0,
-        minimumBlockWidth: model.minimumBlockWidth,
-    });
     const modWidth = width - cytobandOffset;
-    overview.setVolatileWidth(modWidth);
-    overview.showAllRegions();
+    const overview = useMemo(() => {
+        const overview = Base1DView.create({
+            displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+            interRegionPaddingWidth: 0,
+            minimumBlockWidth: model.minimumBlockWidth,
+        });
+        overview.setVolatileWidth(modWidth);
+        overview.showAllRegions();
+        return overview;
+    }, [
+        JSON.stringify(displayedRegions),
+        model.minimumBlockWidth,
+        modWidth,
+        displayedRegions,
+    ]);
     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 }) }),
@@ -206,3 +210,4 @@ export default observer(function OverviewScalebar({ model, children, }) {
 });
 export { Polygon };
 export { default as Cytobands } from './Cytobands';
+export default OverviewScalebar;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
 import { TextFieldProps as TFP } from '@mui/material';
 import { LinearGenomeViewModel } from '../../model';
-declare const _default: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
+declare const RefNameAutocomplete: ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp, minWidth, maxWidth, TextFieldProps, }: {
     model: LinearGenomeViewModel;
     onSelect?: ((region: BaseResult) => void) | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -15,4 +15,4 @@ declare const _default: ({ model, onSelect, assemblyName, style, fetchResults, o
     showHelp?: boolean | undefined;
     TextFieldProps?: TFP | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default RefNameAutocomplete;

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

@@ -5,7 +5,7 @@ import BaseResult, { RefSequenceResult, } from '@jbrowse/core/TextSearch/BaseRes
 import { Autocomplete } from '@mui/material';
 import { getDeduplicatedResult, getFiltered } from './util';
 import AutocompleteTextField from './AutocompleteTextField';
-export default observer(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+const RefNameAutocomplete = observer(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
     var _a;
     const session = getSession(model);
     const { assemblyManager } = session;
@@ -80,3 +80,4 @@ export default observer(function RefNameAutocomplete({ model, onSelect, assembly
                 }))) || []
                 : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => getFiltered(opts, inputValue), renderInput: params => (React.createElement(AutocompleteTextField, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
 });
+export default RefNameAutocomplete;

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

@@ -4,9 +4,7 @@ export interface Option {
     result: BaseResult;
 }
 export declare function getFiltered(opts: Option[], inputValue: string): Option[];
-export declare function aggregateResults(results: BaseResult[]): {
-    [key: string]: BaseResult[];
-};
+export declare function aggregateResults(results: BaseResult[]): Record<string, BaseResult[]>;
 export declare function getDeduplicatedResult(results: BaseResult[]): {
     result: BaseResult;
 }[];

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare function Rubberband({ model, ControlComponent, }: {
+declare const Rubberband: ({ model, ControlComponent, }: {
     model: LGV;
-    ControlComponent?: React.ReactElement;
-}): React.JSX.Element;
-declare const _default: typeof Rubberband;
-export default _default;
+    ControlComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+}) => React.JSX.Element;
+export default Rubberband;

package/esm/LinearGenomeView/components/Rubberband.js

@@ -13,7 +13,7 @@ const useStyles = makeStyles()({
         minHeight: 8,
     },
 });
-function Rubberband({ model, ControlComponent = React.createElement("div", null), }) {
+const Rubberband = observer(function ({ model, ControlComponent = React.createElement("div", null), }) {
     const ref = useRef(null);
     const { classes } = useStyles();
     const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, handleMenuItemClick, open, handleClose, mouseMove, mouseDown, mouseOut, } = useRangeSelect(ref, model);
@@ -24,5 +24,5 @@ function Rubberband({ model, ControlComponent = React.createElement("div", null)
                 top: anchorPosition.clientY,
             }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: model.rubberBandMenuItems() })) : null,
         React.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: ref, onMouseDown: mouseDown, onMouseMove: mouseMove, onMouseOut: mouseOut }, ControlComponent)));
-}
-export default observer(Rubberband);
+});
+export default Rubberband;

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

@@ -6,5 +6,5 @@ interface ScalebarProps {
     style?: React.CSSProperties;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<ScalebarProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const Scalebar: React.ForwardRefExoticComponent<ScalebarProps & React.RefAttributes<HTMLDivElement>>;
+export default Scalebar;

package/esm/LinearGenomeView/components/Scalebar.js

@@ -21,7 +21,7 @@ const useStyles = makeStyles()(theme => ({
         pointerEvents: 'none',
     },
     majorTickLabel: {
-        fontSize: '11px',
+        fontSize: 11,
         zIndex: 1,
         background: theme.palette.background.paper,
         lineHeight: 'normal',
@@ -35,10 +35,10 @@ const useStyles = makeStyles()(theme => ({
         pointerEvents: 'none',
     },
     refLabel: {
-        fontSize: '11px',
+        fontSize: 11,
         position: 'absolute',
-        left: '2px',
-        top: '-1px',
+        left: 2,
+        top: -1,
         fontWeight: 'bold',
         lineHeight: 'normal',
         zIndex: 1,
@@ -65,32 +65,37 @@ const RenderedRefNameLabels = observer(({ model }) => {
             }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` }, block.refName)) : null;
     })));
 });
-const RenderedScalebarLabels = observer(({ model }) => {
+const RenderedBlockTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
-    const { bpPerPx, staticBlocks } = model;
-    return (React.createElement(React.Fragment, null, staticBlocks.map((block, index) => {
-        const { reversed, start, end, key, widthPx } = block;
+    const { reversed, start, end } = block;
+    const ticks = makeTicks(start, end, bpPerPx, true, false);
+    return (React.createElement(ContentBlockComponent, { block: block }, ticks.map(({ type, base }) => {
+        if (type === 'major') {
+            const x = (reversed ? end - base : base - start) / bpPerPx;
+            const baseNumber = base + 1;
+            return (React.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (React.createElement(Typography, { className: classes.majorTickLabel }, getTickDisplayStr(baseNumber, bpPerPx))) : null));
+        }
+        return null;
+    })));
+};
+const RenderedScalebarLabels = observer(({ model }) => {
+    const { staticBlocks, bpPerPx } = model;
+    return (React.createElement(React.Fragment, null, staticBlocks.map((block, idx) => {
+        const { key, widthPx } = block;
+        const k = `${key}-${idx}`;
         if (block instanceof ContentBlock) {
-            const ticks = makeTicks(start, end, bpPerPx, true, false);
-            return (React.createElement(ContentBlockComponent, { key: `${key}-${index}`, block: block }, ticks.map(tick => {
-                if (tick.type === 'major') {
-                    const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                    const baseNumber = tick.base + 1;
-                    return (React.createElement("div", { key: tick.base, className: classes.tick, style: { left: x } }, baseNumber ? (React.createElement(Typography, { className: classes.majorTickLabel }, getTickDisplayStr(baseNumber, bpPerPx))) : null));
-                }
-                return null;
-            })));
+            return React.createElement(RenderedBlockTicks, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        if (block instanceof ElidedBlock) {
-            return React.createElement(ElidedBlockComponent, { key: key, width: widthPx });
+        else if (block instanceof ElidedBlock) {
+            return React.createElement(ElidedBlockComponent, { key: k, width: widthPx });
         }
-        if (block instanceof InterRegionPaddingBlock) {
-            return (React.createElement(InterRegionPaddingBlockComponent, { key: key, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
+        else if (block instanceof InterRegionPaddingBlock) {
+            return (React.createElement(InterRegionPaddingBlockComponent, { key: k, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         return null;
     })));
 });
-const Scalebar = React.forwardRef(({ model, style, className, ...other }, ref) => {
+const Scalebar = observer(React.forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
     const { classes, cx } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
     return (React.createElement(Paper, { "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -107,5 +112,5 @@ const Scalebar = React.forwardRef(({ model, style, className, ...other }, ref) =
                 } },
                 React.createElement(RenderedScalebarLabels, { model: model }))),
         React.createElement(RenderedRefNameLabels, { model: model })));
-});
-export default observer(Scalebar);
+}));
+export default Scalebar;

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

@@ -1,8 +1,7 @@
 import React from 'react';
 import { LinearGenomeViewModel } from '..';
-declare function SearchBox({ model, showHelp, }: {
-    showHelp?: boolean;
+declare const SearchBox: ({ model, showHelp, }: {
+    showHelp?: boolean | undefined;
     model: LinearGenomeViewModel;
-}): React.JSX.Element;
-declare const _default: typeof SearchBox;
-export default _default;
+}) => React.JSX.Element;
+export default SearchBox;

package/esm/LinearGenomeView/components/SearchBox.js

@@ -12,7 +12,7 @@ const useStyles = makeStyles()(() => ({
         minWidth: 100,
     },
 }));
-function SearchBox({ model, showHelp, }) {
+const SearchBox = observer(function ({ model, showHelp, }) {
     const { classes } = useStyles();
     const theme = useTheme();
     const session = getSession(model);
@@ -97,5 +97,5 @@ function SearchBox({ model, showHelp, }) {
                 },
             },
         } }));
-}
-export default observer(SearchBox);
+});
+export default SearchBox;

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

@@ -1,10 +1,9 @@
 import React from 'react';
-declare function SequenceDialog({ model, handleClose, }: {
+declare const SequenceSearchDialog: ({ model, handleClose, }: {
     model: {
         assemblyNames: string[];
-        toggleTrack(trackId: string): void;
+        showTrack: (trackId: string) => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof SequenceDialog;
-export default _default;
+}) => React.JSX.Element;
+export default SequenceSearchDialog;