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

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,7 +1,7 @@
 import React from 'react';
 import { useTheme } from '@mui/material';
-import Color from 'color';
+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: Color(theme.palette.background.default).hex() }));
+    return (React.createElement("rect", { width: width + shift * 2, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

package/esm/LinearGenomeView/svgcomponents/SVGHeader.js

@@ -1,8 +1,7 @@
 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';
-import Color from 'color';
 // locals
 import { HEADER_OVERVIEW_HEIGHT } from '..';
 import Cytobands from '../components/Cytobands';
@@ -15,7 +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 = Color(theme.palette.text.primary).hex();
+    const c = stripAlpha(theme.palette.text.primary);
     const overview = Base1DView.create({
         displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
         interRegionPaddingWidth: 0,
@@ -28,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,

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,14 +1,13 @@
 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';
 import SVGRegionSeparators from './SVGRegionSeparators';
-import Color from 'color';
 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 = Color(theme.palette.text.secondary).hex();
+    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;
@@ -27,7 +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 = Color(theme.palette.text.primary).hex();
+    const c = stripAlpha(theme.palette.text.primary);
     return (React.createElement(React.Fragment, null,
         React.createElement(SVGRegionSeparators, { model: model, height: 30 }),
         contentBlocks.map(block => {

package/esm/LinearGenomeView/svgcomponents/SVGScalebar.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { getBpDisplayStr } from '@jbrowse/core/util';
+import { getBpDisplayStr, stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
-import Color from 'color';
 export default function SVGScalebar({ model, fontSize, }) {
     const { offsetPx, dynamicBlocks: { totalWidthPxWithoutBorders: totalWidthPx, totalBp }, } = model;
     const theme = useTheme();
     const displayBp = getBpDisplayStr(totalBp);
     const x0 = Math.max(-offsetPx, 0);
     const x1 = x0 + totalWidthPx;
-    const c = Color(theme.palette.text.secondary).hex();
+    const c = stripAlpha(theme.palette.text.secondary);
     const x = x0 + (x1 - x0) / 2;
     const y = fontSize;
     return (React.createElement(React.Fragment, null,

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.3",
+  "version": "2.7.0",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -43,8 +43,7 @@
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
-    "clsx": "^1.0.4",
-    "color": "^3.1.3",
+    "clsx": "^2.0.0",
     "copy-to-clipboard": "^3.3.1",
     "file-saver": "^2.0.0",
     "material-ui-popup-state": "^5.0.0",
@@ -56,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",
@@ -66,5 +65,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "dbe7fb1af01fc89f833d2744635eb44a17365b41"
 }