@jbrowse/plugin-dotplot-view 2.6.2 → 2.7.0

package/esm/DotplotView/components/Axes.js

@@ -38,6 +38,20 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
         width,
         staticBlocks: hview.staticBlocks,
     };
+    const ticks = hticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = bpToPx({
+                refName: tick.refName,
+                coord: tick.base,
+                self: hviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .filter(f => f[1] !== undefined)
+        .map(f => [f[0], f[1] - offsetPx]);
     return (React.createElement(React.Fragment, null,
         dblocks
             .filter(region => !hide.has(region.key))
@@ -47,24 +61,12 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
             const xoff = Math.floor(x - hview.offsetPx);
             return (React.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
         }),
-        hticks.map(tick => {
-            var _a;
-            const x = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.divider }));
+        ticks.map(([tick, x]) => {
+            return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
         }),
-        hticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const x = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, x]) => {
             const y = 0;
             return x > 10 ? (React.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
         }),
@@ -87,6 +89,20 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
         width,
         staticBlocks: vview.staticBlocks,
     };
+    const ticks = vticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = bpToPx({
+                refName: tick.refName,
+                coord: tick.base,
+                self: vviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .filter(f => f[1] !== undefined)
+        .map(f => [f[0], f[1] - offsetPx]);
     return (React.createElement(React.Fragment, null,
         dblocks
             .filter(region => !hide.has(region.key))
@@ -96,24 +112,10 @@ export const VerticalAxisRaw = observer(function ({ model, }) {
             const yoff = Math.floor(viewHeight - y + offsetPx);
             return (React.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
         }),
-        vticks.map(tick => {
-            var _a;
-            const y = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.divider }));
-        }),
-        vticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const y = (((_a = bpToPx({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks.map(([tick, y]) => (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, y]) => {
             return y > 10 ? (React.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null;
         }),
         React.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));

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

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

package/esm/DotplotView/components/DotplotControls.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
+// 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';
+const DotplotControls = observer(function ({ model, }) {
+    return (React.createElement("div", null,
+        React.createElement(IconButton, { onClick: model.zoomOutButton },
+            React.createElement(ZoomOut, null)),
+        React.createElement(IconButton, { onClick: model.zoomInButton },
+            React.createElement(ZoomIn, null)),
+        React.createElement(IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector" },
+            React.createElement(TrackSelectorIcon, null)),
+        React.createElement(CascadingMenuButton, { 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',
+                        },
+                    ],
+                },
+            ] },
+            React.createElement(MoreVert, null))));
+});
+export default DotplotControls;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-export declare function round(value: number): number;
 type Coord = [number, number] | undefined;
 export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
     model: DotplotViewModel;

package/esm/DotplotView/components/DotplotTooltip.js

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { locstr } from './util';
 import { Portal, alpha } from '@mui/material';
 import { usePopper } from 'react-popper';
-export function round(value) {
+function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
 const useStyles = makeStyles()(theme => ({

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;
             }