@jbrowse/plugin-dotplot-view 2.6.3 → 2.7.1

package/esm/DotplotView/components/DotplotView.js

@@ -7,7 +7,7 @@ import normalizeWheel from 'normalize-wheel';
 import ImportForm from './ImportForm';
 import Header from './Header';
 import Grid from './Grid';
-import { HorizontalAxis, VerticalAxis } from './Axes';
+import { VerticalAxis, HorizontalAxis } from './Axes';
 import { TooltipWhereClicked, TooltipWhereMouseovered } from './DotplotTooltip';
 const blank = { left: 0, top: 0, width: 0, height: 0 };
 const useStyles = makeStyles()(theme => ({

package/esm/DotplotView/components/DotplotWarnings.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-declare const _default: ({ model }: {
+declare const DotplotWarnings: ({ model, }: {
     model: DotplotViewModel;
 }) => React.JSX.Element | null;
-export default _default;
+export default DotplotWarnings;

package/esm/DotplotView/components/DotplotWarnings.js

@@ -3,7 +3,7 @@ import { Alert, Button } from '@mui/material';
 import { observer } from 'mobx-react';
 // lazy components
 const WarningDialog = lazy(() => import('./WarningDialog'));
-export default observer(function ({ model }) {
+const DotplotWarnings = observer(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
     const [shown, setShown] = useState(false);
     return trackWarnings.length ? (React.createElement(Alert, { severity: "warning" },
@@ -12,3 +12,4 @@ export default observer(function ({ model }) {
         React.createElement(Button, { onClick: () => setShown(true) }, "More info"),
         shown ? (React.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => setShown(false) })) : null)) : null;
 });
+export default DotplotWarnings;

package/esm/DotplotView/components/Header.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-declare const _default: ({ model, selection, }: {
+declare const DotplotHeader: ({ model, selection, }: {
     model: DotplotViewModel;
     selection?: {
         width: number;
         height: number;
     } | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default DotplotHeader;

package/esm/DotplotView/components/Header.js

@@ -1,21 +1,12 @@
-import React, { useState } from 'react';
-import { IconButton, Typography } from '@mui/material';
+import React from 'react';
+import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { getBpDisplayStr } from '@jbrowse/core/util';
-import { Menu } from '@jbrowse/core/ui';
-// icons
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import ZoomIn from '@mui/icons-material/ZoomIn';
-import MoreVert from '@mui/icons-material/MoreVert';
-import { CursorMouse, CursorMove } from './CursorIcon';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import DotplotWarnings from './DotplotWarnings';
 import PanButtons from './PanButtons';
+import DotplotControls from './DotplotControls';
 const useStyles = makeStyles()({
-    iconButton: {
-        margin: 5,
-    },
     bp: {
         display: 'flex',
         alignItems: 'center',
@@ -29,91 +20,7 @@ const useStyles = makeStyles()({
         position: 'relative',
     },
 });
-const DotplotControls = observer(({ model }) => {
-    const { classes } = useStyles();
-    const [menuAnchorEl, setMenuAnchorEl] = useState();
-    return (React.createElement("div", null,
-        React.createElement(IconButton, { onClick: model.zoomOutButton, className: classes.iconButton },
-            React.createElement(ZoomOut, null)),
-        React.createElement(IconButton, { onClick: model.zoomInButton, className: classes.iconButton },
-            React.createElement(ZoomIn, null)),
-        React.createElement(IconButton, { onClick: () => model.activateTrackSelector(), className: classes.iconButton, title: "Open track selector", "data-testid": "circular_track_select" },
-            React.createElement(TrackSelectorIcon, null)),
-        React.createElement(IconButton, { onClick: event => setMenuAnchorEl(event.currentTarget), className: classes.iconButton },
-            React.createElement(MoreVert, null)),
-        menuAnchorEl ? (React.createElement(Menu, { anchorEl: menuAnchorEl, open: true, onMenuItemClick: (_event, callback) => {
-                callback();
-                setMenuAnchorEl(undefined);
-            }, menuItems: [
-                {
-                    onClick: () => model.squareView(),
-                    label: 'Square view - same base pairs per pixel',
-                },
-                {
-                    onClick: () => model.squareViewProportional(),
-                    label: 'Rectanglularize view - same total bp',
-                },
-                {
-                    onClick: () => model.showAllRegions(),
-                    label: 'Show all regions',
-                },
-                {
-                    onClick: () => model.setDrawCigar(!model.drawCigar),
-                    type: 'checkbox',
-                    label: 'Draw CIGAR',
-                    checked: model.drawCigar,
-                },
-                {
-                    onClick: () => model.setShowPanButtons(!model.showPanButtons),
-                    label: 'Show pan buttons',
-                    type: 'checkbox',
-                    checked: model.showPanButtons,
-                },
-                {
-                    label: 'Click and drag mode',
-                    subMenu: [
-                        {
-                            onClick: () => model.setCursorMode('move'),
-                            label: 'Pan by default, select region when ctrl key is held',
-                            icon: CursorMove,
-                            type: 'radio',
-                            checked: model.cursorMode === 'move',
-                        },
-                        {
-                            onClick: () => model.setCursorMode('crosshair'),
-                            label: 'Select region by default, pan when ctrl key is held',
-                            icon: CursorMouse,
-                            type: 'radio',
-                            checked: model.cursorMode === 'crosshair',
-                        },
-                    ],
-                },
-                {
-                    label: 'Wheel scroll mode',
-                    subMenu: [
-                        {
-                            onClick: () => model.setWheelMode('pan'),
-                            label: 'Pans view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'pan',
-                        },
-                        {
-                            onClick: () => model.setWheelMode('zoom'),
-                            label: 'Zooms view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'zoom',
-                        },
-                        {
-                            onClick: () => model.setWheelMode('none'),
-                            label: 'Disable',
-                            type: 'radio',
-                            checked: model.wheelMode === 'none',
-                        },
-                    ],
-                },
-            ], onClose: () => setMenuAnchorEl(undefined) })) : null));
-});
-export default observer(function Header({ model, selection, }) {
+const DotplotHeader = observer(function ({ model, selection, }) {
     const { classes } = useStyles();
     const { hview, vview, showPanButtons } = model;
     return (React.createElement("div", { className: classes.headerBar },
@@ -137,3 +44,4 @@ export default observer(function Header({ model, selection, }) {
         React.createElement(DotplotWarnings, { model: model }),
         showPanButtons ? React.createElement(PanButtons, { model: model }) : null));
 });
+export default DotplotHeader;

package/esm/DotplotView/components/ImportCustomTrack.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { SnapshotIn } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const OpenTrack: ({ sessionTrackData, assembly1, assembly2, setSessionTrackData, }: {
+declare const OpenTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
     sessionTrackData: Conf;
     assembly1: string;
     assembly2: string;

package/esm/DotplotView/components/ImportCustomTrack.js

@@ -71,7 +71,7 @@ function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Locat
         throw new Error('Unknown type');
     }
 }
-const OpenTrack = observer(({ sessionTrackData, assembly1, assembly2, setSessionTrackData, }) => {
+const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
     const [bed2Location, setBed2Location] = useState();
     const [bed1Location, setBed1Location] = useState();
     const [fileLocation, setFileLocation] = useState();

package/esm/DotplotView/components/ImportSyntenyTrackSelector.js

@@ -17,7 +17,10 @@ const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) =>
     var _a;
     const session = getSession(model);
     const { tracks, sessionTracks } = session;
-    const allTracks = [...tracks, ...sessionTracks];
+    const allTracks = [
+        ...tracks,
+        ...(sessionTracks || []),
+    ];
     const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1));
     const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
     const [value, setValue] = useState(resetTrack);

package/esm/DotplotView/components/PanButtons.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-declare const _default: ({ model, }: {
+declare const PanButtons: ({ model, }: {
     model: DotplotViewModel;
 }) => React.JSX.Element;
-export default _default;
+export default PanButtons;

package/esm/DotplotView/components/PanButtons.js

@@ -24,7 +24,7 @@ const useStyles = makeStyles()({
         margin: 0,
     },
 });
-export default observer(function PanButtons({ model, }) {
+const PanButtons = observer(function PanButtons({ model, }) {
     const { classes } = useStyles();
     return (React.createElement(Paper, { className: classes.dpad, elevation: 6 },
         React.createElement("div", null),
@@ -52,3 +52,4 @@ export default observer(function PanButtons({ model, }) {
             } },
             React.createElement(ZoomOut, null))));
 });
+export default PanButtons;

package/esm/DotplotView/components/WarningDialog.d.ts

@@ -9,8 +9,8 @@ interface TrackWarning {
         }[];
     }[];
 }
-declare const _default: ({ trackWarnings, handleClose, }: {
+declare const WarningDialog: ({ trackWarnings, handleClose, }: {
     handleClose: () => void;
     trackWarnings: TrackWarning[];
 }) => React.JSX.Element;
-export default _default;
+export default WarningDialog;

package/esm/DotplotView/components/WarningDialog.js

@@ -11,7 +11,7 @@ const useStyles = makeStyles()({
         minWidth: 600,
     },
 });
-export default observer(function WarningDialog({ trackWarnings, handleClose, }) {
+const WarningDialog = observer(function WarningDialog({ trackWarnings, handleClose, }) {
     const { classes } = useStyles();
     const rows = [];
     for (let i = 0; i < trackWarnings.length; i++) {
@@ -33,3 +33,4 @@ export default observer(function WarningDialog({ trackWarnings, handleClose, })
             React.createElement("div", { style: { height: 600, width: '100%', overflow: 'auto' } },
                 React.createElement(DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true })))));
 });
+export default WarningDialog;

package/esm/DotplotView/components/util.js

@@ -60,9 +60,7 @@ export function makeTicks(regions, bpPerPx, emitMajor = true, emitMinor = true)
     const ticks = [];
     const gridPitch = chooseGridPitch(bpPerPx, 60, 15);
     const iterPitch = gridPitch.minorPitch || gridPitch.majorPitch;
-    for (let i = 0; i < regions.length; i++) {
-        const region = regions[i];
-        const { start, end, refName } = region;
+    for (const { start, end, refName } of regions) {
         let index = 0;
         const minBase = start;
         const maxBase = end;
@@ -71,8 +69,7 @@ export function makeTicks(regions, bpPerPx, emitMajor = true, emitMinor = true)
                 ticks.push({ type: 'minor', base: base - 1, index, refName });
                 index += 1;
             }
-            else if (emitMajor &&
-                Math.abs(base - region.start) > gridPitch.minorPitch) {
+            else if (emitMajor && Math.abs(base - start) > gridPitch.minorPitch) {
                 ticks.push({ type: 'major', base: base - 1, index, refName });
                 index += 1;
             }

package/esm/DotplotView/model.d.ts

@@ -213,28 +213,33 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         readonly textSearchAdapter: any;
         readonly adapterType: import("@jbrowse/core/pluggableElementTypes").AdapterType;
         readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-        readonly canConfigure: any;
+        readonly canConfigure: boolean | ({
+            [x: string]: any;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            setSubschema(slotName: string, data: unknown): any;
+        } & import("mobx-state-tree").IStateTreeNode<import("@jbrowse/core/configuration").AnyConfigurationSchemaType>) | undefined;
     } & {
         setMinimized(flag: boolean): void;
-        activateConfigurationUI(): void;
-        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void;
-        hideDisplay(displayId: string): number;
-        replaceDisplay(oldId: string, newId: string, initialSnapshot?: {} | undefined): void; /**
+        showDisplay(displayId: string, initialSnapshot?: {} | undefined): void; /**
          * #property
          */
+        hideDisplay(displayId: string): number;
+        replaceDisplay(oldId: string, newId: string, initialSnapshot?: {} | undefined): void;
     } & {
         trackMenuItems(): (import("@jbrowse/core/ui").MenuDivider | import("@jbrowse/core/ui").MenuSubHeader | import("@jbrowse/core/ui").NormalMenuItem | import("@jbrowse/core/ui").CheckboxMenuItem | import("@jbrowse/core/ui").RadioMenuItem | import("@jbrowse/core/ui").SubMenuItem | {
-            type: string; /**
+            type: string;
+            label: string; /**
              * #property
              */
-            label: string;
             subMenu: {
                 type: string;
                 label: string;
                 checked: boolean;
                 onClick: () => void;
             }[];
-        })[];
+        })[]; /**
+         * #property
+         */
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     viewTrackConfigs: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyModelType>;
 }, {

package/esm/DotplotView/model.js

@@ -478,8 +478,11 @@ export default function stateModelFactory(pm) {
         },
         // if any of our assemblies are temporary assemblies
         beforeDestroy() {
+            var _a;
             const session = getSession(self);
-            self.assemblyNames.forEach(asm => session.removeTemporaryAssembly(asm));
+            for (const name in self.assemblyNames) {
+                (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
+            }
         },
         afterAttach() {
             addDisposer(self, autorun(() => {

package/esm/DotplotView/svgcomponents/SVGBackground.js

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

package/esm/ServerSideRenderedBlockContent.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties } from 'react';
-declare const _default: ({ model, style, }: {
+declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;
         message?: string;
@@ -9,4 +9,4 @@ declare const _default: ({ model, style, }: {
     };
     style: CSSProperties;
 }) => React.JSX.Element | null;
-export default _default;
+export default ServerSideRenderedDotplotContent;

package/esm/ServerSideRenderedBlockContent.js

@@ -44,7 +44,7 @@ function BlockError({ error }) {
     return (React.createElement("div", { className: classes.blockError },
         React.createElement(Typography, null, `${error}`)));
 }
-export default observer(function ({ model, style, }) {
+const ServerSideRenderedDotplotContent = observer(function ({ model, style, }) {
     if (model.error) {
         return React.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
     }
@@ -59,3 +59,4 @@ export default observer(function ({ model, style, }) {
     }
     return null;
 });
+export default ServerSideRenderedDotplotContent;

package/esm/ServerSideSyntenyRendering.d.ts

@@ -3,21 +3,16 @@ import React from 'react';
  * A block whose content is rendered outside of the main thread and hydrated by this
  * component.
  */
-declare function ServerSideSyntenyRendering({ model, }: {
-    model: {
-        imageData: string;
-        style: Record<string, string>;
-        renderProps: {
-            width: number;
-            height: number;
-            highResolutionScaling?: number;
-        };
-    };
-}): React.JSX.Element;
-declare namespace ServerSideSyntenyRendering {
-    var propTypes: {
-        model: import("prop-types").Validator<any>;
+interface ModelType {
+    imageData: string;
+    style: Record<string, string>;
+    renderProps: {
+        width: number;
+        height: number;
+        highResolutionScaling?: number;
     };
 }
-declare const _default: typeof ServerSideSyntenyRendering;
-export default _default;
+declare const ServerSideSyntenyRendering: ({ model, }: {
+    model: ModelType;
+}) => React.JSX.Element;
+export default ServerSideSyntenyRendering;

package/esm/ServerSideSyntenyRendering.js

@@ -1,12 +1,7 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React, { useRef, useState, useEffect } from 'react';
-import { observer, PropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
-/**
- * A block whose content is rendered outside of the main thread and hydrated by this
- * component.
- */
-function ServerSideSyntenyRendering({ model, }) {
+const ServerSideSyntenyRendering = observer(function ({ model, }) {
     const { imageData, style, renderProps } = model;
     const { width, height, highResolutionScaling = 1 } = renderProps;
     const featureCanvas = useRef(null);
@@ -21,8 +16,5 @@ function ServerSideSyntenyRendering({ model, }) {
         setDone(true);
     }, [height, imageData, width]);
     return (React.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
-}
-ServerSideSyntenyRendering.propTypes = {
-    model: PropTypes.observableObject.isRequired,
-};
-export default observer(ServerSideSyntenyRendering);
+});
+export default ServerSideSyntenyRendering;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.6.3",
+  "version": "2.7.1",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -42,7 +42,6 @@
     "@types/file-saver": "^2.0.1",
     "@types/normalize-wheel": "^1.0.0",
     "clone": "^2.1.2",
-    "color": "^3.1.3",
     "file-saver": "^2.0.0",
     "normalize-wheel": "^1.0.1",
     "react-popper": "^2.0.0"
@@ -52,7 +51,7 @@
     "@jbrowse/plugin-alignments": "^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 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
 }