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

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;

package/esm/LinearGenomeView/components/SequenceSearchDialog.js

@@ -4,13 +4,13 @@ import { Dialog } from '@jbrowse/core/ui';
 import { getSnapshot } from 'mobx-state-tree';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
-import { getSession } from '@jbrowse/core/util';
+import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
 const useStyles = makeStyles()({
     dialogContent: {
         width: '40em',
     },
 });
-function SequenceDialog({ model, handleClose, }) {
+const SequenceSearchDialog = observer(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const [value, setValue] = useState('');
     const [searchForward, setSearchForward] = useState(true);
@@ -40,24 +40,26 @@ function SequenceDialog({ model, handleClose, }) {
                         const session = getSession(model);
                         const { assemblyManager } = session;
                         const assemblyName = model.assemblyNames[0];
-                        session.addTrackConf({
-                            trackId,
-                            name: `Sequence search ${value}`,
-                            assemblyNames: [assemblyName],
-                            type: 'FeatureTrack',
-                            adapter: {
-                                type: 'SequenceSearchAdapter',
-                                search: value,
-                                searchForward,
-                                searchReverse,
-                                caseInsensitive,
-                                sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
-                            },
-                        });
-                        model.toggleTrack(trackId);
+                        if (isSessionWithAddTracks(session)) {
+                            session.addTrackConf({
+                                trackId,
+                                name: `Sequence search ${value}`,
+                                assemblyNames: [assemblyName],
+                                type: 'FeatureTrack',
+                                adapter: {
+                                    type: 'SequenceSearchAdapter',
+                                    search: value,
+                                    searchForward,
+                                    searchReverse,
+                                    caseInsensitive,
+                                    sequenceAdapter: getSnapshot((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
+                                },
+                            });
+                            model.showTrack(trackId);
+                        }
                     }
                     handleClose();
                 }, variant: "contained", color: "primary" }, "Submit"),
             React.createElement(Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
-}
-export default observer(SequenceDialog);
+});
+export default SequenceSearchDialog;

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, }: {
+declare const TrackContainer: ({ model, track, }: {
     model: LGV;
     track: BaseTrackModel;
 }) => React.JSX.Element;
-export default _default;
+export default TrackContainer;

package/esm/LinearGenomeView/components/TrackContainer.js

@@ -27,7 +27,7 @@ const useStyles = makeStyles()({
         zIndex: 3,
     },
 });
-export default observer(function TrackContainer({ model, track, }) {
+const TrackContainer = observer(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
@@ -54,3 +54,4 @@ export default observer(function TrackContainer({ model, track, }) {
             }, onDragEnter: debouncedOnDragEnter }),
         React.createElement(ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 });
+export default TrackContainer;

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

@@ -4,5 +4,5 @@ interface Props {
     track: BaseTrackModel;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const TrackLabel: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default TrackLabel;

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -41,7 +41,7 @@ const useStyles = makeStyles()(theme => ({
         padding: theme.spacing(1),
     },
 }));
-const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
+const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, className }, ref) {
     var _a;
     const { classes, cx } = useStyles();
     const view = getContainingView(track);
@@ -77,5 +77,5 @@ const TrackLabel = React.forwardRef(function ({ track, className }, ref) {
                     .join(' ') })),
         React.createElement(CascadingMenuButton, { menuItems: items, "data-testid": "track_menu_icon" },
             React.createElement(MoreVertIcon, { fontSize: "small" }))));
-});
-export default observer(TrackLabel);
+}));
+export default TrackLabel;

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

@@ -2,9 +2,9 @@ import React from 'react';
 import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
 import { LinearGenomeViewModel } from '..';
 type LGV = LinearGenomeViewModel;
-declare const _default: ({ model, track, onDragEnter, }: {
+declare const TrackRenderingContainer: ({ model, track, onDragEnter, }: {
     model: LGV;
     track: BaseTrackModel;
     onDragEnter: () => void;
 }) => React.JSX.Element;
-export default _default;
+export default TrackRenderingContainer;

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -22,7 +22,7 @@ const useStyles = makeStyles()({
         zIndex: 2,
     },
 });
-export default observer(function TrackRenderingContainer({ model, track, onDragEnter, }) {
+const TrackRenderingContainer = observer(function ({ model, track, onDragEnter, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
@@ -48,3 +48,4 @@ export default observer(function TrackRenderingContainer({ model, track, onDragE
             } },
             React.createElement(DisplayBlurb, { model: display }))) : null)) : null));
 });
+export default TrackRenderingContainer;

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

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

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -19,7 +19,7 @@ const useStyles = makeStyles()({
         overflow: 'hidden',
     },
 });
-export default observer(function TracksContainer({ children, model, }) {
+const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
     const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
@@ -42,3 +42,4 @@ export default observer(function TracksContainer({ children, model, }) {
         additional,
         children));
 });
+export default TracksContainer;

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

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

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -12,12 +12,12 @@ const useStyles = makeStyles()({
         zIndex: 10,
     },
 });
-function VerticalGuide({ model, coordX }) {
+const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
     return (React.createElement(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true },
         React.createElement("div", { className: classes.guide, style: {
                 left: coordX,
                 background: 'red',
             } })));
-}
-export default observer(VerticalGuide);
+});
+export default VerticalGuide;