@jbrowse/plugin-dotplot-view 2.15.0 → 2.15.2

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { locstr } from './util';
+const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
+    const { hview, vview, viewHeight } = model;
+    return mouserect ? (React.createElement(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
+            ? { x: mouserectClient[0], y: mouserectClient[1] }
+            : undefined },
+        `x - ${locstr(mouserect[0], hview)}`,
+        React.createElement("br", null),
+        `y - ${locstr(viewHeight - mouserect[1], vview)}`,
+        React.createElement("br", null))) : null;
+});
+export default DotplotTooltipMouseover;

package/esm/DotplotView/components/DotplotView.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
 import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { transaction } from 'mobx';
@@ -7,7 +7,8 @@ import ImportForm from './ImportForm';
 import Header from './Header';
 import Grid from './Grid';
 import { VerticalAxis, HorizontalAxis } from './Axes';
-import { TooltipWhereClicked, TooltipWhereMouseovered } from './DotplotTooltip';
+const TooltipWhereClicked = lazy(() => import('./DotplotTooltipClick'));
+const TooltipWhereMouseovered = lazy(() => import('./DotplotTooltipMouseover'));
 const blank = { left: 0, top: 0, width: 0, height: 0 };
 const useStyles = makeStyles()(theme => ({
     spacer: {
@@ -194,8 +195,10 @@ const DotplotViewInternal = observer(function ({ model, }) {
                 React.createElement(VerticalAxis, { model: model }),
                 React.createElement(HorizontalAxis, { model: model }),
                 React.createElement("div", { ref: ref, className: classes.content },
-                    mouseOvered && validSelect ? (React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance })) : null,
-                    validSelect ? (React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance })) : null,
+                    mouseOvered && validSelect ? (React.createElement(Suspense, { fallback: null },
+                        React.createElement(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }))) : null,
+                    validSelect ? (React.createElement(Suspense, { fallback: null },
+                        React.createElement(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }))) : null,
                     React.createElement("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
                             if (event.button === 0) {
                                 const { clientX, clientY } = event;

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { SnapshotIn } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const OpenTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
+declare const ImportCustomTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
     sessionTrackData: Conf;
     assembly1: string;
     assembly2: string;
     setSessionTrackData: (arg: Conf) => void;
 }) => React.JSX.Element;
-export default OpenTrack;
+export default ImportCustomTrack;

package/esm/DotplotView/components/ImportForm/ImportCustomTrack.js

@@ -3,7 +3,7 @@ import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@
 import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
 import { basename, extName, getName, stripGz } from './util';
-function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Location, bed2Location, }) {
+function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }) {
     if (radioOption === '.paf') {
         return {
             type: 'PAFAdapter',
@@ -54,14 +54,23 @@ function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Locat
             assemblyNames: [assembly1, assembly2],
         };
     }
+    else if (radioOption === '.pif.gz') {
+        return {
+            type: 'PairwiseIndexedPAFAdapter',
+            pifGzLocation: fileLocation,
+            index: { location: indexFileLocation },
+            assemblyNames: [assembly1, assembly2],
+        };
+    }
     else {
         throw new Error(`Unknown to detect type ${radioOption} from filename (select radio button to clarify)`);
     }
 }
-const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
+const ImportCustomTrack = observer(function ({ assembly1, assembly2, setSessionTrackData, }) {
     const [bed2Location, setBed2Location] = useState();
     const [bed1Location, setBed1Location] = useState();
     const [fileLocation, setFileLocation] = useState();
+    const [indexFileLocation, setIndexFileLocation] = useState();
     const [value, setValue] = useState('');
     const [error, setError] = useState();
     const fileName = getName(fileLocation);
@@ -82,6 +91,7 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
                         assembly1,
                         assembly2,
                         fileLocation,
+                        indexFileLocation,
                         bed1Location,
                         bed2Location,
                     }),
@@ -99,12 +109,13 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
         bed1Location,
         bed2Location,
         fileLocation,
+        indexFileLocation,
         radioOption,
         setSessionTrackData,
     ]);
     return (React.createElement(Paper, { style: { padding: 12 } },
         error ? React.createElement(ErrorMessage, { error: error }) : null,
-        React.createElement(Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view in the dotplot. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
+        React.createElement(Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
         React.createElement(RadioGroup, { value: radioOption, onChange: event => {
                 setValue(event.target.value);
             } },
@@ -120,7 +131,9 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
                 React.createElement(Grid, { item: true },
                     React.createElement(FormControlLabel, { value: ".anchors", control: React.createElement(Radio, null), label: ".anchors" })),
                 React.createElement(Grid, { item: true },
-                    React.createElement(FormControlLabel, { value: ".anchors.simple", control: React.createElement(Radio, null), label: ".anchors.simple" })))),
+                    React.createElement(FormControlLabel, { value: ".anchors.simple", control: React.createElement(Radio, null), label: ".anchors.simple" })),
+                React.createElement(Grid, { item: true },
+                    React.createElement(FormControlLabel, { value: ".pif.gz", control: React.createElement(Radio, null), label: ".pif.gz" })))),
         React.createElement(Grid, { container: true, justifyContent: "center" },
             React.createElement(Grid, { item: true }, value === '.anchors' || value === '.anchors.simple' ? (React.createElement("div", null,
                 React.createElement("div", { style: { margin: 20 } },
@@ -141,8 +154,16 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
                     React.createElement("div", null,
                         React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
                                 setBed2Location(loc);
-                            } }))))) : (React.createElement(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                            } }))))) : value === '.pif.gz' ? (React.createElement("div", { style: { display: 'flex' } },
+                React.createElement("div", null,
+                    React.createElement(FileSelector, { name: `${value} location`, description: "", location: fileLocation, setLocation: loc => {
+                            setFileLocation(loc);
+                        } })),
+                React.createElement("div", null,
+                    React.createElement(FileSelector, { name: `${value} index location`, description: "", location: indexFileLocation, setLocation: loc => {
+                            setIndexFileLocation(loc);
+                        } })))) : (React.createElement(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
                     setFileLocation(loc);
                 } }))))));
 });
-export default OpenTrack;
+export default ImportCustomTrack;

package/esm/DotplotView/model.d.ts

@@ -194,6 +194,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
         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;
             label: string;
+            priority: number;
             subMenu: {
                 type: string;
                 label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.15.0",
+  "version": "2.15.2",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -61,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87eeb1fbf8311dbf88d5e75b5a265f03beffdda8"
+  "gitHead": "8a58cefbfe39af4c97bcb6ead354d72c9fef9224"
 }

package/dist/DotplotView/components/DotplotTooltip.js

@@ -1,84 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = void 0;
-const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const util_1 = require("./util");
-const material_1 = require("@mui/material");
-const react_2 = require("@floating-ui/react");
-function round(value) {
-    return Math.round(value * 1e5) / 1e5;
-}
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    // these styles come from
-    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-    tooltip: {
-        position: 'absolute',
-        pointerEvents: 'none',
-        backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.common.white,
-        fontFamily: theme.typography.fontFamily,
-        padding: '4px 8px',
-        fontSize: theme.typography.pxToRem(12),
-        lineHeight: `${round(14 / 10)}em`,
-        maxWidth: 300,
-        wordWrap: 'break-word',
-    },
-}));
-exports.TooltipWhereMouseovered = (0, mobx_react_1.observer)(function ({ model, mouserect, mouserectClient, xdistance, }) {
-    var _a, _b;
-    const { classes } = useStyles();
-    const { hview, vview, viewHeight } = model;
-    const theme = (0, material_1.useTheme)();
-    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
-        placement: xdistance < 0 ? 'left' : 'right',
-        strategy: 'fixed',
-    });
-    const clientPoint = (0, react_2.useClientPoint)(context, mouserectClient
-        ? {
-            x: mouserectClient[0],
-            y: mouserectClient[1],
-        }
-        : undefined);
-    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
-    return mouserect ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                ...floatingStyles,
-                zIndex: 100000,
-                pointerEvents: 'none',
-            }, ...getFloatingProps() },
-            `x - ${(0, util_1.locstr)(mouserect[0], hview)}`,
-            react_1.default.createElement("br", null),
-            `y - ${(0, util_1.locstr)(viewHeight - mouserect[1], vview)}`,
-            react_1.default.createElement("br", null)))) : null;
-});
-exports.TooltipWhereClicked = (0, mobx_react_1.observer)(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
-    var _a, _b;
-    const { classes } = useStyles();
-    const { hview, vview, viewHeight } = model;
-    const theme = (0, material_1.useTheme)();
-    const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
-    const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
-    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
-        placement: xdistance < 0 ? 'right' : 'left',
-    });
-    const clientPoint = (0, react_2.useClientPoint)(context, { x, y });
-    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
-    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                ...floatingStyles,
-                zIndex: 100000,
-                pointerEvents: 'none',
-            }, ...getFloatingProps() },
-            `x - ${(0, util_1.locstr)(mousedown[0], hview)}`,
-            react_1.default.createElement("br", null),
-            `y - ${(0, util_1.locstr)(viewHeight - mousedown[1], vview)}`,
-            react_1.default.createElement("br", null)))) : null;
-});

package/esm/DotplotView/components/DotplotTooltip.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { locstr } from './util';
-import { Portal, alpha, useTheme } from '@mui/material';
-import { useFloating, useClientPoint, useInteractions, } from '@floating-ui/react';
-function round(value) {
-    return Math.round(value * 1e5) / 1e5;
-}
-const useStyles = makeStyles()(theme => ({
-    // these styles come from
-    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
-    tooltip: {
-        position: 'absolute',
-        pointerEvents: 'none',
-        backgroundColor: alpha(theme.palette.grey[700], 0.9),
-        borderRadius: theme.shape.borderRadius,
-        color: theme.palette.common.white,
-        fontFamily: theme.typography.fontFamily,
-        padding: '4px 8px',
-        fontSize: theme.typography.pxToRem(12),
-        lineHeight: `${round(14 / 10)}em`,
-        maxWidth: 300,
-        wordWrap: 'break-word',
-    },
-}));
-export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
-    var _a, _b;
-    const { classes } = useStyles();
-    const { hview, vview, viewHeight } = model;
-    const theme = useTheme();
-    const { refs, floatingStyles, context } = useFloating({
-        placement: xdistance < 0 ? 'left' : 'right',
-        strategy: 'fixed',
-    });
-    const clientPoint = useClientPoint(context, mouserectClient
-        ? {
-            x: mouserectClient[0],
-            y: mouserectClient[1],
-        }
-        : undefined);
-    const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
-    return mouserect ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                ...floatingStyles,
-                zIndex: 100000,
-                pointerEvents: 'none',
-            }, ...getFloatingProps() },
-            `x - ${locstr(mouserect[0], hview)}`,
-            React.createElement("br", null),
-            `y - ${locstr(viewHeight - mouserect[1], vview)}`,
-            React.createElement("br", null)))) : null;
-});
-export const TooltipWhereClicked = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
-    var _a, _b;
-    const { classes } = useStyles();
-    const { hview, vview, viewHeight } = model;
-    const theme = useTheme();
-    const x = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[0]) || 0) - (xdistance < 0 ? 0 : 0);
-    const y = ((mousedownClient === null || mousedownClient === void 0 ? void 0 : mousedownClient[1]) || 0) - (ydistance < 0 ? 0 : 0);
-    const { refs, floatingStyles, context } = useFloating({
-        placement: xdistance < 0 ? 'right' : 'left',
-    });
-    const clientPoint = useClientPoint(context, { x, y });
-    const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
-    return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
-        React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
-                ...floatingStyles,
-                zIndex: 100000,
-                pointerEvents: 'none',
-            }, ...getFloatingProps() },
-            `x - ${locstr(mousedown[0], hview)}`,
-            React.createElement("br", null),
-            `y - ${locstr(viewHeight - mousedown[1], vview)}`,
-            React.createElement("br", null)))) : null;
-});