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

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef } from 'react';
+import React, { Suspense, useEffect, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
 import { getConf } from '@jbrowse/core/configuration';
+import { LoadingEllipses } from '@jbrowse/core/ui';
 const useStyles = makeStyles()({
     // aligns with block boundaries. check for example the breakpoint split view
     // demo to see if features align if wanting to change things
@@ -21,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;
@@ -38,7 +39,8 @@ export default observer(function TrackRenderingContainer({ model, track, onDragE
     }, [model.trackRefs, trackId]);
     return (React.createElement("div", { className: classes.trackRenderingContainer, style: { height: minimized ? 20 : height }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${model.id}-${trackId}` }, !minimized ? (React.createElement(React.Fragment, null,
         React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
-            React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll })),
+            React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
+                React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (React.createElement("div", { style: {
                 position: 'absolute',
                 left: 0,
@@ -46,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;

package/esm/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/esm/LinearGenomeView/components/ZoomControls.js

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

package/esm/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/esm/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/esm/LinearGenomeView/model.js

@@ -1227,6 +1227,39 @@ export function stateModelFactory(pluginManager) {
                 ? this.pxToBp(self.width / 2)
                 : undefined;
         },
+    }))
+        .actions(self => ({
+        afterCreate() {
+            function handler(e) {
+                const session = 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);
+            addDisposer(self, () => {
+                document.removeEventListener('keydown', handler);
+            });
+        },
     }));
 }
 export { default as ReactComponent, default as LinearGenomeView, } from './components/LinearGenomeView';

package/esm/LinearGenomeView/svgcomponents/SVGBackground.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
+import { stripAlpha } from '@jbrowse/core/util';
 export default function SVGBackground({ width, height, shift, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: theme.palette.background.default }));
+    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getSession } from '@jbrowse/core/util';
+import { getSession, stripAlpha } from '@jbrowse/core/util';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import { useTheme } from '@mui/material';
 // locals
@@ -14,6 +14,7 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
     const assemblyName = assemblyNames.length > 1 ? '' : assemblyNames[0];
     const assembly = assemblyManager.get(assemblyName);
     const theme = useTheme();
+    const c = stripAlpha(theme.palette.text.primary);
     const overview = Base1DView.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -26,9 +27,7 @@ export default 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,
@@ -38,16 +37,16 @@ export default function SVGHeader({ model, fontSize, cytobandHeight, rulerHeight
         ...last,
         coord: last.reversed ? last.start : last.end,
     }) || 0;
-    const c = +showCytobands * cytobandHeight;
+    const y = +showCytobands * cytobandHeight;
     return (React.createElement("g", { id: "header" },
-        React.createElement("text", { x: 0, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, assemblyName),
+        React.createElement("text", { x: 0, y: 0, dominantBaseline: "hanging", fontSize: fontSize, fill: c }, assemblyName),
         showCytobands ? (React.createElement("g", { transform: `translate(0 ${rulerHeight})` },
             React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }),
             React.createElement("rect", { stroke: "red", fill: "rgb(255,0,0,0.1)", width: Math.max(lastOverviewPx - firstOverviewPx, 0.5), height: HEADER_OVERVIEW_HEIGHT - 1, x: firstOverviewPx, y: 0.5 }),
             React.createElement("g", { transform: `translate(0,${HEADER_OVERVIEW_HEIGHT})` },
                 React.createElement(Polygon, { overview: overview, model: model, useOffset: false })))) : null,
-        React.createElement("g", { transform: `translate(0 ${fontSize + c})` },
+        React.createElement("g", { transform: `translate(0 ${fontSize + y})` },
             React.createElement(SVGScalebar, { model: model, fontSize: fontSize })),
-        React.createElement("g", { transform: `translate(0 ${rulerHeight + c})` },
+        React.createElement("g", { transform: `translate(0 ${rulerHeight + y})` },
             React.createElement(SVGRuler, { model: model, fontSize: fontSize }))));
 }

package/esm/LinearGenomeView/svgcomponents/SVGLinearGenomeView.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-refresh/only-export-components */
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { when } from 'mobx';

package/esm/LinearGenomeView/svgcomponents/SVGRuler.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getTickDisplayStr } from '@jbrowse/core/util';
+import { getTickDisplayStr, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 // locals
 import { makeTicks } from '../util';
@@ -7,17 +7,18 @@ import SVGRegionSeparators from './SVGRegionSeparators';
 function Ruler({ start, end, bpPerPx, reversed = false, major = true, minor = true, hideText = false, }) {
     const ticks = makeTicks(start, end, bpPerPx, major, minor);
     const theme = useTheme();
+    const c = stripAlpha(theme.palette.text.secondary);
     return (React.createElement(React.Fragment, null,
         ticks.map(tick => {
             const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-            return (React.createElement("line", { key: tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.text.secondary }));
+            return (React.createElement("line", { key: 'tick-' + tick.base, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: c }));
         }),
         !hideText
             ? ticks
                 .filter(tick => tick.type === 'major')
                 .map(tick => {
                 const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx;
-                return (React.createElement("text", { x: x - 3, y: 7 + 11, key: `label-${tick.base}`, fontSize: 11, fill: theme.palette.text.primary }, getTickDisplayStr(tick.base + 1, bpPerPx)));
+                return (React.createElement("text", { key: `label-${tick.base}`, x: x - 3, y: 7 + 11, fontSize: 11, fill: c }, getTickDisplayStr(tick.base + 1, bpPerPx)));
             })
             : null));
 }
@@ -25,6 +26,7 @@ export default function SVGRuler({ model, fontSize, }) {
     const { dynamicBlocks: { contentBlocks }, offsetPx: viewOffsetPx, bpPerPx, } = model;
     const renderRuler = contentBlocks.length < 5;
     const theme = useTheme();
+    const c = stripAlpha(theme.palette.text.primary);
     return (React.createElement(React.Fragment, null,
         React.createElement(SVGRegionSeparators, { model: model, height: 30 }),
         contentBlocks.map(block => {
@@ -37,7 +39,7 @@ export default function SVGRuler({ model, fontSize, }) {
                         React.createElement("rect", { x: 0, y: 0, width: widthPx, height: 100 }))),
                 React.createElement("g", { transform: `translate(${offset} 0)` },
                     React.createElement("g", { clipPath: `url(#${clipid})` },
-                        React.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: theme.palette.text.primary }, refName),
+                        React.createElement("text", { x: 4, y: fontSize, fontSize: fontSize, fill: c }, refName),
                         React.createElement("g", { transform: "translate(0 20)" },
                             React.createElement(Ruler, { hideText: !renderRuler, start: start, end: end, bpPerPx: bpPerPx, reversed: reversed }))))));
         })));

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getBpDisplayStr } from '@jbrowse/core/util';
+import { getBpDisplayStr, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
@@ -7,9 +7,12 @@ export default function SVGScalebar({ model, fontSize, }) {
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
+    const c = stripAlpha(theme.palette.text.secondary);
+    const x = x0 + (x1 - x0) / 2;
+    const y = fontSize;
     return (React.createElement(React.Fragment, null,
-        React.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: theme.palette.text.secondary }),
-        React.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        React.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: theme.palette.text.secondary }),
-        React.createElement("text", { x: x0 + (x1 - x0) / 2, y: fontSize * 2, textAnchor: "middle", fontSize: fontSize, fill: theme.palette.text.primary }, displayBp)));
+        React.createElement("line", { x1: x0, x2: x1, y1: 10, y2: 10, stroke: c }),
+        React.createElement("line", { x1: x0, x2: x0, y1: 5, y2: 15, stroke: c }),
+        React.createElement("line", { x1: x1, x2: x1, y1: 5, y2: 15, stroke: c }),
+        React.createElement("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "hanging", fontSize: fontSize, fill: c }, displayBp)));
 }

package/esm/index.d.ts

@@ -910,12 +910,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -939,7 +937,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -956,7 +954,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -1058,6 +1056,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
                 id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -1098,12 +1098,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -1127,7 +1125,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -1144,7 +1142,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -1246,9 +1244,11 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
-        ZoomControls: ({ model }: {
+        ZoomControls: ({ model, }: {
             model: {
                 id: string;
                 displayName: string | undefined;
@@ -1296,12 +1296,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -1325,7 +1323,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -1342,7 +1340,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -1444,6 +1442,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
                 id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -1484,12 +1484,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -1513,7 +1511,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -1530,7 +1528,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -1632,6 +1630,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
         LinearGenomeView: ({ model }: {
@@ -1682,12 +1682,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -1711,7 +1709,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -1728,7 +1726,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -1830,6 +1828,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
                 id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
                 displayName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
@@ -1870,12 +1870,10 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 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: import("@jbrowse/core/util/blockTypes").BaseBlock[];
                 coarseTotalBp: number;
                 leftOffset: import("./LinearGenomeView").BpOffset | undefined;
@@ -1899,7 +1897,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
                 readonly totalBp: number;
                 readonly maxBpPerPx: number;
                 readonly minBpPerPx: number;
-                readonly error: string | Error;
+                readonly error: {};
                 readonly maxOffset: number;
                 readonly minOffset: number;
                 readonly displayedRegionsTotalPx: number;
@@ -1916,7 +1914,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
             } & {
                 setShowCytobands(flag: boolean): void;
                 setWidth(newWidth: number): void;
-                setError(error: Error | undefined): void;
+                setError(error: unknown): void;
                 toggleHeader(): void;
                 toggleHeaderOverview(): void;
                 toggleNoTracksActive(): void;
@@ -2018,6 +2016,8 @@ export default class LinearGenomeViewPlugin extends Plugin {
                     end: number;
                     reversed: boolean;
                 } | undefined;
+            } & {
+                afterCreate(): void;
             }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         }) => import("react").JSX.Element;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -43,7 +43,7 @@
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
-    "clsx": "^1.0.4",
+    "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",
@@ -55,7 +55,7 @@
     "@jbrowse/core": "^2.0.0",
     "@mui/material": "^5.0.0",
     "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
@@ -65,5 +65,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "bbea587a402d9974acdd804a33f4b77f31a2fd5f"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }