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

package/dist/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/dist/LinearGenomeView/components/RefNameAutocomplete/index.js

@@ -33,7 +33,7 @@ const BaseResults_1 = __importStar(require("@jbrowse/core/TextSearch/BaseResults
 const material_1 = require("@mui/material");
 const util_2 = require("./util");
 const AutocompleteTextField_1 = __importDefault(require("./AutocompleteTextField"));
-exports.default = (0, mobx_react_1.observer)(function RefNameAutocomplete({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
+const RefNameAutocomplete = (0, mobx_react_1.observer)(function ({ model, onSelect, assemblyName, style, fetchResults, onChange, value, showHelp = true, minWidth = 200, maxWidth = 550, TextFieldProps = {}, }) {
     var _a;
     const session = (0, util_1.getSession)(model);
     const { assemblyManager } = session;
@@ -108,3 +108,4 @@ exports.default = (0, mobx_react_1.observer)(function RefNameAutocomplete({ mode
                 }))) || []
                 : searchOptions, getOptionDisabled: option => option.group === 'limitOption', filterOptions: (opts, { inputValue }) => (0, util_2.getFiltered)(opts, inputValue), renderInput: params => (react_1.default.createElement(AutocompleteTextField_1.default, { showHelp: showHelp, params: params, inputBoxVal: inputBoxVal, TextFieldProps: TextFieldProps, setCurrentSearch: setCurrentSearch, setInputValue: setInputValue })), getOptionLabel: opt => typeof opt === 'string' ? opt : opt.result.getDisplayString() })));
 });
+exports.default = RefNameAutocomplete;

package/dist/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/dist/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/dist/LinearGenomeView/components/Rubberband.js

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

package/dist/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/dist/LinearGenomeView/components/Scalebar.js

@@ -26,7 +26,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         pointerEvents: 'none',
     },
     majorTickLabel: {
-        fontSize: '11px',
+        fontSize: 11,
         zIndex: 1,
         background: theme.palette.background.paper,
         lineHeight: 'normal',
@@ -40,10 +40,10 @@ const useStyles = (0, mui_1.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,
@@ -70,32 +70,37 @@ const RenderedRefNameLabels = (0, mobx_react_1.observer)(({ model }) => {
             }, className: classes.refLabel, "data-testid": `refLabel-${block.refName}` }, block.refName)) : null;
     })));
 });
-const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
+const RenderedBlockTicks = function ({ block, bpPerPx, }) {
     const { classes } = useStyles();
-    const { bpPerPx, staticBlocks } = model;
-    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, index) => {
-        const { reversed, start, end, key, widthPx } = block;
+    const { reversed, start, end } = block;
+    const ticks = (0, util_1.makeTicks)(start, end, bpPerPx, true, false);
+    return (react_1.default.createElement(Block_1.ContentBlock, { block: block }, ticks.map(({ type, base }) => {
+        if (type === 'major') {
+            const x = (reversed ? end - base : base - start) / bpPerPx;
+            const baseNumber = base + 1;
+            return (react_1.default.createElement("div", { key: base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_2.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
+        }
+        return null;
+    })));
+};
+const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
+    const { staticBlocks, bpPerPx } = model;
+    return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, idx) => {
+        const { key, widthPx } = block;
+        const k = `${key}-${idx}`;
         if (block instanceof blockTypes_1.ContentBlock) {
-            const ticks = (0, util_1.makeTicks)(start, end, bpPerPx, true, false);
-            return (react_1.default.createElement(Block_1.ContentBlock, { 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_1.default.createElement("div", { key: tick.base, className: classes.tick, style: { left: x } }, baseNumber ? (react_1.default.createElement(material_1.Typography, { className: classes.majorTickLabel }, (0, util_2.getTickDisplayStr)(baseNumber, bpPerPx))) : null));
-                }
-                return null;
-            })));
+            return react_1.default.createElement(RenderedBlockTicks, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        if (block instanceof blockTypes_1.ElidedBlock) {
-            return react_1.default.createElement(Block_1.ElidedBlock, { key: key, width: widthPx });
+        else if (block instanceof blockTypes_1.ElidedBlock) {
+            return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: widthPx });
         }
-        if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
-            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: key, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
+        else if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
+            return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         return null;
     })));
 });
-const Scalebar = react_1.default.forwardRef(({ model, style, className, ...other }, ref) => {
+const Scalebar = (0, mobx_react_1.observer)(react_1.default.forwardRef(function Scalebar2({ model, style, className, ...other }, ref) {
     const { classes, cx } = useStyles();
     const offsetLeft = model.staticBlocks.offsetPx - model.offsetPx;
     return (react_1.default.createElement(material_1.Paper, { "data-resizer": "true" // used to avoid click-and-drag scrolls on trackscontainer
@@ -112,5 +117,5 @@ const Scalebar = react_1.default.forwardRef(({ model, style, className, ...other
                 } },
                 react_1.default.createElement(RenderedScalebarLabels, { model: model }))),
         react_1.default.createElement(RenderedRefNameLabels, { model: model })));
-});
-exports.default = (0, mobx_react_1.observer)(Scalebar);
+}));
+exports.default = Scalebar;

package/dist/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/dist/LinearGenomeView/components/SearchBox.js

@@ -17,7 +17,7 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
         minWidth: 100,
     },
 }));
-function SearchBox({ model, showHelp, }) {
+const SearchBox = (0, mobx_react_1.observer)(function ({ model, showHelp, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
     const session = (0, util_1.getSession)(model);
@@ -102,5 +102,5 @@ function SearchBox({ model, showHelp, }) {
                 },
             },
         } }));
-}
-exports.default = (0, mobx_react_1.observer)(SearchBox);
+});
+exports.default = SearchBox;

package/dist/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/dist/LinearGenomeView/components/SequenceSearchDialog.js

@@ -35,7 +35,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         width: '40em',
     },
 });
-function SequenceDialog({ model, handleClose, }) {
+const SequenceSearchDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     const { classes } = useStyles();
     const [value, setValue] = (0, react_1.useState)('');
     const [searchForward, setSearchForward] = (0, react_1.useState)(true);
@@ -65,24 +65,26 @@ function SequenceDialog({ model, handleClose, }) {
                         const session = (0, util_1.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: (0, mobx_state_tree_1.getSnapshot)((_a = assemblyManager.get(assemblyName)) === null || _a === void 0 ? void 0 : _a.configuration.sequence.adapter),
-                            },
-                        });
-                        model.toggleTrack(trackId);
+                        if ((0, util_1.isSessionWithAddTracks)(session)) {
+                            session.addTrackConf({
+                                trackId,
+                                name: `Sequence search ${value}`,
+                                assemblyNames: [assemblyName],
+                                type: 'FeatureTrack',
+                                adapter: {
+                                    type: 'SequenceSearchAdapter',
+                                    search: value,
+                                    searchForward,
+                                    searchReverse,
+                                    caseInsensitive,
+                                    sequenceAdapter: (0, mobx_state_tree_1.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_1.default.createElement(material_1.Button, { onClick: () => handleClose(), variant: "contained", color: "secondary" }, "Close"))));
-}
-exports.default = (0, mobx_react_1.observer)(SequenceDialog);
+});
+exports.default = SequenceSearchDialog;

package/dist/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/dist/LinearGenomeView/components/TrackContainer.js

@@ -55,7 +55,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 3,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TrackContainer({ model, track, }) {
+const TrackContainer = (0, mobx_react_1.observer)(function ({ model, track, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { draggingTrackId } = model;
@@ -82,3 +82,4 @@ exports.default = (0, mobx_react_1.observer)(function TrackContainer({ model, tr
             }, onDragEnter: debouncedOnDragEnter }),
         react_1.default.createElement(ui_1.ResizeHandle, { onDrag: display.resizeHeight, className: classes.resizeHandle })));
 });
+exports.default = TrackContainer;

package/dist/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/dist/LinearGenomeView/components/TrackLabel.js

@@ -46,7 +46,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         padding: theme.spacing(1),
     },
 }));
-const TrackLabel = react_1.default.forwardRef(function ({ track, className }, ref) {
+const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(function TrackLabel2({ track, className }, ref) {
     var _a;
     const { classes, cx } = useStyles();
     const view = (0, util_1.getContainingView)(track);
@@ -82,5 +82,5 @@ const TrackLabel = react_1.default.forwardRef(function ({ track, className }, re
                     .join(' ') })),
         react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: items, "data-testid": "track_menu_icon" },
             react_1.default.createElement(MoreVert_1.default, { fontSize: "small" }))));
-});
-exports.default = (0, mobx_react_1.observer)(TrackLabel);
+}));
+exports.default = TrackLabel;

package/dist/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/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -47,7 +47,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 2,
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TrackRenderingContainer({ model, track, onDragEnter, }) {
+const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, track, onDragEnter, }) {
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
@@ -73,3 +73,4 @@ exports.default = (0, mobx_react_1.observer)(function TrackRenderingContainer({
             } },
             react_1.default.createElement(DisplayBlurb, { model: display }))) : null)) : null));
 });
+exports.default = TrackRenderingContainer;

package/dist/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/dist/LinearGenomeView/components/TracksContainer.js

@@ -47,7 +47,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         overflow: 'hidden',
     },
 });
-exports.default = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
+const TracksContainer = (0, mobx_react_1.observer)(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = (0, util_1.getEnv)(model);
     const { mouseDown: mouseDown1, mouseUp } = (0, hooks_1.useSideScroll)(model);
@@ -70,3 +70,4 @@ exports.default = (0, mobx_react_1.observer)(function TracksContainer({ children
         additional,
         children));
 });
+exports.default = TracksContainer;

package/dist/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/dist/LinearGenomeView/components/VerticalGuide.js

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

package/dist/LinearGenomeView/components/ZoomControls.d.ts

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

package/dist/LinearGenomeView/components/ZoomControls.js

@@ -43,7 +43,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         color: theme.palette.text.secondary,
     },
 }));
-function ZoomControls({ model }) {
+const ZoomControls = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes } = useStyles();
     const { maxBpPerPx, minBpPerPx, bpPerPx, scaleFactor } = model;
     const [value, setValue] = (0, react_1.useState)(-Math.log2(bpPerPx) * 100);
@@ -56,5 +56,5 @@ function ZoomControls({ model }) {
         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)), disabled: scaleFactor !== 1 }),
         react_1.default.createElement(material_1.IconButton, { "data-testid": "zoom_in", onClick: () => model.zoom(model.bpPerPx / 2), disabled: bpPerPx <= minBpPerPx + 0.0001 || scaleFactor !== 1, size: "large" },
             react_1.default.createElement(ZoomIn_1.default, null))));
-}
-exports.default = (0, mobx_react_1.observer)(ZoomControls);
+});
+exports.default = ZoomControls;

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

@@ -20,5 +20,5 @@ export declare function getCytobands(assembly: Assembly | undefined, refName: st
     refName: string;
     start: number;
     end: number;
-    type: any;
+    type: string;
 }[];

package/dist/LinearGenomeView/model.d.ts

@@ -87,12 +87,10 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     volatileWidth: number | undefined;
     minimumBlockWidth: number;
     draggingTrackId: string | undefined;
-    volatileError: Error | undefined;
+    volatileError: unknown;
     afterDisplayedRegionsSetCallbacks: Function[];
     scaleFactor: number;
-    trackRefs: {
-        [key: string]: HTMLDivElement;
-    };
+    trackRefs: Record<string, HTMLDivElement>;
     coarseDynamicBlocks: BaseBlock[];
     coarseTotalBp: number;
     leftOffset: BpOffset | undefined;
@@ -170,7 +168,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #getter
      */
-    readonly error: string | Error;
+    readonly error: {};
     /**
      * #getter
      */
@@ -224,7 +222,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setError(error: Error | undefined): void;
+    setError(error: unknown): void;
     /**
      * #action
      */
@@ -545,6 +543,8 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         end: number;
         reversed: boolean;
     } | undefined;
+} & {
+    afterCreate(): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type LinearGenomeViewStateModel = ReturnType<typeof stateModelFactory>;
 export type LinearGenomeViewModel = Instance<LinearGenomeViewStateModel>;

package/dist/LinearGenomeView/model.js

@@ -1256,6 +1256,39 @@ function stateModelFactory(pluginManager) {
                 ? this.pxToBp(self.width / 2)
                 : undefined;
         },
+    }))
+        .actions(self => ({
+        afterCreate() {
+            function handler(e) {
+                const session = (0, util_1.getSession)(self);
+                if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
+                    if (e.code === 'ArrowLeft') {
+                        e.preventDefault();
+                        // pan left
+                        self.slide(-0.9);
+                    }
+                    if (e.code === 'ArrowRight') {
+                        e.preventDefault();
+                        // pan right
+                        self.slide(0.9);
+                    }
+                    if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
+                        e.preventDefault();
+                        // zoom in
+                        self.zoom(self.bpPerPx / 2);
+                    }
+                    if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
+                        e.preventDefault();
+                        // zoom out
+                        self.zoom(self.bpPerPx * 2);
+                    }
+                }
+            }
+            document.addEventListener('keydown', handler);
+            (0, mobx_state_tree_1.addDisposer)(self, () => {
+                document.removeEventListener('keydown', handler);
+            });
+        },
     }));
 }
 exports.stateModelFactory = stateModelFactory;

package/dist/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const color_1 = __importDefault(require("color"));
+const util_1 = require("@jbrowse/core/util");
 function SVGBackground({ width, height, shift, }) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, color_1.default)(theme.palette.background.default).hex() }));
+    return (react_1.default.createElement("rect", { width: width + shift * 2, height: height, fill: (0, util_1.stripAlpha)(theme.palette.background.default) }));
 }
 exports.default = SVGBackground;

package/dist/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -7,7 +7,6 @@ const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
 const material_1 = require("@mui/material");
-const color_1 = __importDefault(require("color"));
 // locals
 const __1 = require("..");
 const Cytobands_1 = __importDefault(require("../components/Cytobands"));
@@ -20,7 +19,7 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const theme = (0, material_1.useTheme)();
-    const c = (0, color_1.default)(theme.palette.text.primary).hex();
+    const c = (0, util_1.stripAlpha)(theme.palette.text.primary);
     const overview = Base1DViewModel_1.default.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -33,9 +32,7 @@ function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight, }) {
     overview.setVolatileWidth(width);
     overview.showAllRegions();
     const block = overview.dynamicBlocks.contentBlocks[0];
-    // 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,

package/dist/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SVGTracks = exports.SVGRuler = exports.renderToSvg = exports.totalHeight = void 0;
+/* eslint-disable react-refresh/only-export-components */
 const react_1 = __importDefault(require("react"));
 const server_1 = require("react-dom/server");
 const mobx_1 = require("mobx");

package/dist/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -9,11 +9,10 @@ const material_1 = require("@mui/material");
 // locals
 const util_2 = require("../util");
 const SVGRegionSeparators_1 = __importDefault(require("./SVGRegionSeparators"));
-const color_1 = __importDefault(require("color"));
 function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
     const ticks = (0, util_2.makeTicks)(start, end, bpPerPx, major, minor);
     const theme = (0, material_1.useTheme)();
-    const c = (0, color_1.default)(theme.palette.text.secondary).hex();
+    const c = (0, util_1.stripAlpha)(theme.palette.text.secondary);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         ticks.map(tick => {
             const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
@@ -32,7 +31,7 @@ function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = (0, material_1.useTheme)();
-    const c = (0, color_1.default)(theme.palette.text.primary).hex();
+    const c = (0, util_1.stripAlpha)(theme.palette.text.primary);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(SVGRegionSeparators_1.default, { model: model, height: 30 }),
         contentBlocks.map(block => {

package/dist/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
-const color_1 = __importDefault(require("color"));
 function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
     const theme = (0, material_1.useTheme)();
     const displayBp = (0, util_1.getBpDisplayStr)(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
-    const c = (0, color_1.default)(theme.palette.text.secondary).hex();
+    const c = (0, util_1.stripAlpha)(theme.palette.text.secondary);
     const x = x0 + (x1 - x0) / 2;
     const y = fontSize;
     return (react_1.default.createElement(react_1.default.Fragment, null,