@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

package/esm/DotplotView/components/DotplotView.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useEffect, useRef, useState } from 'react';
-import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui';
-import { transaction } from 'mobx';
+import { LoadingEllipses, ResizeHandle } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { HorizontalAxis, VerticalAxis } from './Axes';
-import Grid from './Grid';
-import Header from './Header';
-import ImportForm from './ImportForm';
-const TooltipWhereClicked = lazy(() => import('./DotplotTooltipClick'));
-const TooltipWhereMouseovered = lazy(() => import('./DotplotTooltipMouseover'));
-const blank = { left: 0, top: 0, width: 0, height: 0 };
+import { HorizontalAxis, VerticalAxis } from "./Axes.js";
+import DotplotTooltips from "./DotplotTooltips.js";
+import Header from "./Header.js";
+import ImportForm from "./ImportForm/index.js";
+import MouseInteractionLayer from "./MouseInteractionLayer.js";
+import SelectionContextMenu from "./SelectionContextMenu.js";
+import { useCtrlKeyTracking } from "./hooks/useCtrlKeyTracking.js";
+import { useCursorMode } from "./hooks/useCursorMode.js";
+import { useMouseCoordinates } from "./hooks/useMouseCoordinates.js";
+import { useMouseMoveHandler } from "./hooks/useMouseMoveHandler.js";
+import { useMouseUpHandler } from "./hooks/useMouseUpHandler.js";
+import { useWheelHandler } from "./hooks/useWheelHandler.js";
 const useStyles = makeStyles()(theme => ({
     spacer: {
         gridColumn: '1/2',
@@ -51,10 +54,7 @@ const useStyles = makeStyles()(theme => ({
         borderTop: '1px solid #fafafa',
     },
 }));
-function getOffset(coord, rect) {
-    return coord && [coord[0] - rect.left, coord[1] - rect.top];
-}
-const RenderedComponent = observer(({ model }) => {
+const RenderedComponent = observer(function RenderedComponent({ model, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.overlay, children: model.tracks.map(track => {
             const [display] = track.displays;
@@ -62,119 +62,15 @@ const RenderedComponent = observer(({ model }) => {
             return RenderingComponent ? (_jsx(RenderingComponent, { model: display }, track.configuration.trackId)) : null;
         }) }));
 });
-const DotplotViewInternal = observer(function ({ model, }) {
-    var _a, _b;
+const DotplotViewInternal = observer(function DotplotViewInternal({ model, }) {
     const { classes } = useStyles();
-    const [mousecurrClient, setMouseCurrClient] = useState();
-    const [mousedownClient, setMouseDownClient] = useState();
-    const [mouseOvered, setMouseOvered] = useState(false);
-    const [mouseupClient, setMouseUpClient] = useState();
-    const ref = useRef(null);
-    const root = useRef(null);
-    const distanceX = useRef(0);
-    const distanceY = useRef(0);
-    const scheduled = useRef(false);
-    const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = useState(false);
-    const [ctrlKeyDown, setCtrlKeyDown] = useState(false);
-    const svg = ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || blank;
-    const rootRect = ((_b = ref.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || blank;
-    const mousedown = getOffset(mousedownClient, svg);
-    const mousecurr = getOffset(mousecurrClient, svg);
-    const mouseup = getOffset(mouseupClient, svg);
-    const mouserect = mouseup || mousecurr;
-    const mouserectClient = mouseupClient || mousecurrClient;
-    const xdistance = mousedown && mouserect ? mouserect[0] - mousedown[0] : 0;
-    const ydistance = mousedown && mouserect ? mouserect[1] - mousedown[1] : 0;
     const { hview, vview, wheelMode, cursorMode } = model;
-    const validPan = (cursorMode === 'move' && !ctrlKeyWasUsed) ||
-        (cursorMode === 'crosshair' && ctrlKeyWasUsed);
-    const validSelect = (cursorMode === 'move' && ctrlKeyWasUsed) ||
-        (cursorMode === 'crosshair' && !ctrlKeyWasUsed);
-    useEffect(() => {
-        function onWheel(event) {
-            event.preventDefault();
-            distanceX.current += event.deltaX;
-            distanceY.current -= event.deltaY;
-            if (!scheduled.current) {
-                scheduled.current = true;
-                window.requestAnimationFrame(() => {
-                    transaction(() => {
-                        if (wheelMode === 'pan') {
-                            hview.scroll(distanceX.current / 3);
-                            vview.scroll(distanceY.current / 10);
-                        }
-                        else if (wheelMode === 'zoom') {
-                            if (Math.abs(distanceY.current) > Math.abs(distanceX.current) * 2 &&
-                                mousecurr) {
-                                const val = distanceY.current < 0 ? 1.1 : 0.9;
-                                hview.zoomTo(hview.bpPerPx * val, mousecurr[0]);
-                                vview.zoomTo(vview.bpPerPx * val, rootRect.height - mousecurr[1]);
-                            }
-                        }
-                    });
-                    scheduled.current = false;
-                    distanceX.current = 0;
-                    distanceY.current = 0;
-                });
-            }
-        }
-        if (ref.current) {
-            const curr = ref.current;
-            curr.addEventListener('wheel', onWheel);
-            return () => {
-                curr.removeEventListener('wheel', onWheel);
-            };
-        }
-        return () => { };
-    }, [hview, vview, wheelMode, mousecurr, rootRect.height]);
-    useEffect(() => {
-        function globalMouseMove(event) {
-            setMouseCurrClient([event.clientX, event.clientY]);
-            if (mousecurrClient && mousedownClient && validPan && !mouseupClient) {
-                hview.scroll(-event.clientX + mousecurrClient[0]);
-                vview.scroll(event.clientY - mousecurrClient[1]);
-            }
-        }
-        window.addEventListener('mousemove', globalMouseMove);
-        return () => {
-            window.removeEventListener('mousemove', globalMouseMove);
-        };
-    }, [validPan, mousecurrClient, mousedownClient, mouseupClient, hview, vview]);
-    useEffect(() => {
-        function globalCtrlKeyDown(event) {
-            if (event.metaKey || event.ctrlKey) {
-                setCtrlKeyDown(true);
-            }
-        }
-        function globalCtrlKeyUp(event) {
-            if (!event.metaKey && !event.ctrlKey) {
-                setCtrlKeyDown(false);
-            }
-        }
-        window.addEventListener('keydown', globalCtrlKeyDown);
-        window.addEventListener('keyup', globalCtrlKeyUp);
-        return () => {
-            window.removeEventListener('keydown', globalCtrlKeyDown);
-            window.removeEventListener('keyup', globalCtrlKeyUp);
-        };
-    }, []);
-    useEffect(() => {
-        function globalMouseUp(event) {
-            if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
-                setMouseUpClient([event.clientX, event.clientY]);
-            }
-            else {
-                setMouseDownClient(undefined);
-            }
-        }
-        if (mousedown && !mouseup) {
-            window.addEventListener('mouseup', globalMouseUp, true);
-            return () => {
-                window.removeEventListener('mouseup', globalMouseUp, true);
-            };
-        }
-        return () => { };
-    }, [validSelect, mousedown, mouseup, xdistance, ydistance]);
+    const { mousecurrClient, mousedownClient, mouseupClient, mouseOvered, setMouseCurrClient, setMouseDownClient, setMouseUpClient, setMouseOvered, ref, root, rootRect, mousedown, mousecurr, mouseup, mouserect, mouserectClient, xdistance, ydistance, } = useMouseCoordinates();
+    const { ctrlKeyDown, validPan, validSelect, setCtrlKeyWasUsed, setCtrlKeyDown, } = useCursorMode(cursorMode);
+    useWheelHandler(ref, wheelMode, hview, vview, mousecurr, rootRect.height);
+    useMouseMoveHandler(mousecurrClient, mousedownClient, mouseupClient, validPan, hview, vview, setMouseCurrClient);
+    useCtrlKeyTracking(setCtrlKeyDown);
+    useMouseUpHandler(mousedown, mouseup, xdistance, ydistance, validSelect, setMouseUpClient, setMouseDownClient);
     return (_jsxs("div", { children: [_jsx(Header, { model: model, selection: !validSelect || !(mousedown && mouserect)
                     ? undefined
                     : {
@@ -184,54 +80,18 @@ const DotplotViewInternal = observer(function ({ model, }) {
                     setMouseOvered(false);
                 }, onMouseEnter: () => {
                     setMouseOvered(true);
-                }, children: [_jsxs("div", { className: classes.container, children: [_jsx(VerticalAxis, { model: model }), _jsx(HorizontalAxis, { model: model }), _jsxs("div", { ref: ref, className: classes.content, children: [mouseOvered && validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? (_jsx(Suspense, { fallback: null, children: _jsx(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null, _jsx("div", { style: { cursor: ctrlKeyDown ? 'pointer' : cursorMode }, onMouseDown: event => {
-                                            if (event.button === 0) {
-                                                const { clientX, clientY } = event;
-                                                setMouseDownClient([clientX, clientY]);
-                                                setMouseCurrClient([clientX, clientY]);
-                                                setCtrlKeyWasUsed(ctrlKeyDown);
-                                            }
-                                        }, children: _jsx(Grid, { model: model, children: validSelect && mousedown && mouserect ? (_jsx("rect", { fill: "rgba(255,0,0,0.3)", x: Math.min(mouserect[0], mousedown[0]), y: Math.min(mouserect[1], mousedown[1]), width: Math.abs(xdistance), height: Math.abs(ydistance) })) : null }) }), _jsx("div", { className: classes.spacer })] }), _jsx(RenderedComponent, { model: model }), _jsx(Menu, { open: Boolean(mouseup), onMenuItemClick: (_, callback) => {
-                                    callback();
-                                    setMouseUpClient(undefined);
-                                    setMouseDownClient(undefined);
-                                }, onClose: () => {
-                                    setMouseUpClient(undefined);
-                                    setMouseDownClient(undefined);
-                                }, anchorReference: "anchorPosition", anchorPosition: mouseupClient
-                                    ? {
-                                        top: mouseupClient[1] + 50,
-                                        left: mouseupClient[0] + 50,
-                                    }
-                                    : undefined, style: { zIndex: 800 }, menuItems: [
-                                    {
-                                        label: 'Zoom in',
-                                        onClick: () => {
-                                            if (mousedown && mouseup) {
-                                                model.zoomInToMouseCoords(mousedown, mouseup);
-                                            }
-                                            setMouseOvered(false);
-                                        },
-                                    },
-                                    {
-                                        label: 'Open linear synteny view',
-                                        onClick: () => {
-                                            if (mousedown && mouseup) {
-                                                model.onDotplotView(mousedown, mouseup);
-                                            }
-                                            setMouseOvered(false);
-                                        },
-                                    },
-                                ] })] }), _jsx(ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
+                }, children: [_jsxs("div", { className: classes.container, children: [_jsx(VerticalAxis, { model: model }), _jsx(HorizontalAxis, { model: model }), _jsxs("div", { ref: ref, className: classes.content, children: [_jsx(DotplotTooltips, { model: model, mouseOvered: mouseOvered, validSelect: validSelect, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance, mousedown: mousedown, mousedownClient: mousedownClient, ydistance: ydistance }), _jsx(MouseInteractionLayer, { model: model, ctrlKeyDown: ctrlKeyDown, cursorMode: cursorMode, validSelect: validSelect, mousedown: mousedown, mouserect: mouserect, xdistance: xdistance, ydistance: ydistance, setMouseDownClient: setMouseDownClient, setMouseCurrClient: setMouseCurrClient, setCtrlKeyWasUsed: setCtrlKeyWasUsed }), _jsx("div", { className: classes.spacer })] }), _jsx(RenderedComponent, { model: model }), _jsx(SelectionContextMenu, { model: model, mouseup: mouseup, mouseupClient: mouseupClient, mousedown: mousedown, setMouseUpClient: setMouseUpClient, setMouseDownClient: setMouseDownClient, setMouseOvered: setMouseOvered })] }), _jsx(ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
 });
-const DotplotView = observer(function ({ model }) {
-    const { initialized, loading, error } = model;
-    if ((!initialized && !loading) || error) {
+const DotplotView = observer(function DotplotView({ model, }) {
+    const { initialized, showLoading, error, loadingMessage } = model;
+    if (showLoading) {
+        return _jsx(LoadingEllipses, { variant: "h6", message: loadingMessage });
+    }
+    else if (!initialized || error) {
         return _jsx(ImportForm, { model: model });
     }
-    if (loading) {
-        return _jsx(LoadingEllipses, { variant: "h6" });
+    else {
+        return _jsx(DotplotViewInternal, { model: model });
     }
-    return _jsx(DotplotViewInternal, { model: model });
 });
 export default DotplotView;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const DotplotWarnings: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/esm/DotplotView/components/DotplotWarnings.js

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { lazy, useState } from 'react';
+import { Suspense, lazy, useState } from 'react';
 import { Alert, Button } from '@mui/material';
 import { observer } from 'mobx-react';
-const WarningDialog = lazy(() => import('./WarningDialog'));
-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 WarningDialog = lazy(() => import("./WarningDialog.js"));
+const DotplotWarnings = observer(function DotplotWarnings({ model, }) {
+    const trackWarnings = model.tracks.filter(t => t.displays[0].warnings?.length);
     const [shown, setShown] = useState(false);
     const [hide, setHide] = useState(false);
     return trackWarnings.length && !hide ? (_jsxs(Alert, { severity: "warning", children: ["Warnings during render", ' ', _jsx(Button, { onClick: () => {
                     setShown(true);
-                }, children: "More info" }), shown ? (_jsx(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                    setShown(false);
-                } })) : null, _jsx(Button, { variant: "contained", onClick: () => {
+                }, children: "More info" }), shown ? (_jsx(Suspense, { fallback: null, children: _jsx(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                        setShown(false);
+                    } }) })) : null, _jsx(Button, { variant: "contained", onClick: () => {
                     setHide(true);
                 }, children: "Dismiss" })] })) : null;
 });

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

@@ -1,4 +1,4 @@
-import type { ExportSvgOptions } from '../model';
+import type { ExportSvgOptions } from '../model.ts';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
         exportSvg(opts: ExportSvgOptions): Promise<void>;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 declare const DotplotHeader: ({ model, selection, }: {
     model: DotplotViewModel;
     selection?: {

package/esm/DotplotView/components/Header.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getBpDisplayStr } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import DotplotControls from './DotplotControls';
-import DotplotWarnings from './DotplotWarnings';
-import PanButtons from './PanButtons';
+import DotplotControls from "./DotplotControls.js";
+import DotplotWarnings from "./DotplotWarnings.js";
+import PanButtons from "./PanButtons.js";
 const useStyles = makeStyles()({
     bp: {
         display: 'flex',
@@ -20,7 +20,7 @@ const useStyles = makeStyles()({
         position: 'relative',
     },
 });
-const DotplotHeader = observer(function ({ model, selection, }) {
+const DotplotHeader = observer(function DotplotHeader({ model, selection, }) {
     const { classes } = useStyles();
     const { hview, vview, showPanButtons } = model;
     return (_jsxs("div", { className: classes.headerBar, children: [_jsx(DotplotControls, { model: model }), _jsxs(Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: ["x: ", hview.assemblyNames.join(','), " ", getBpDisplayStr(hview.currBp), _jsx("br", {}), "y: ", vview.assemblyNames.join(','), " ", getBpDisplayStr(vview.currBp)] }), selection ? (_jsxs(Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: [`width:${getBpDisplayStr(hview.bpPerPx * selection.width)}`, " ", _jsx("br", {}), `height:${getBpDisplayStr(vview.bpPerPx * selection.height)}`] })) : null, _jsx("div", { className: classes.spacer }), _jsx(DotplotWarnings, { model: model }), showPanButtons ? _jsx(PanButtons, { model: model }) : null] }));

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../../model';
+import type { DotplotViewModel } from '../../model.ts';
 declare const ImportSyntenyOpenCustomTrack: ({ model, assembly1, assembly2, }: {
     model: DotplotViewModel;
     assembly1: string;

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

@@ -3,10 +3,10 @@ import { useEffect, useState } from 'react';
 import { ErrorMessage } from '@jbrowse/core/ui';
 import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getAdapter } from './getAdapter';
-import { AnchorsFileSelector, PifGzSelector, SyntenyFileSelector, } from './selectors';
-import { basename, extName, getName, stripGz } from './util';
-const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, assembly2, }) {
+import { getAdapter } from "./getAdapter.js";
+import { AnchorsFileSelector, PifGzSelector, SyntenyFileSelector, } from "./selectors/index.js";
+import { basename, extName, getName, stripGz } from "./util.js";
+const ImportSyntenyOpenCustomTrack = observer(function ImportSyntenyOpenCustomTrack({ model, assembly1, assembly2, }) {
     const [swap, setSwap] = useState(false);
     const [bed2Location, setBed2Location] = useState();
     const [bed1Location, setBed1Location] = useState();
@@ -71,6 +71,7 @@ const ImportSyntenyOpenCustomTrack = observer(function ({ model, assembly1, asse
                     ].map(extension => (_jsx(FormControlLabel, { value: extension, control: _jsx(Radio, {}), label: extension }, extension))) }) }), _jsx(Grid, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
                     radioOption === '.out' ||
                     radioOption === '.delta' ||
-                    radioOption === '.chain' ? (_jsx(SyntenyFileSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap })) : radioOption === '.anchors' || radioOption === '.anchors.simple' ? (_jsx(AnchorsFileSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, bed1Location: bed1Location, setBed1Location: setBed1Location, bed2Location: bed2Location, setBed2Location: setBed2Location })) : radioOption === '.pif.gz' ? (_jsx(PifGzSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, indexFileLocation: indexFileLocation, setIndexFileLocation: setIndexFileLocation })) : null })] }));
+                    radioOption === '.chain' ? (_jsx(SyntenyFileSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap })) : radioOption === '.anchors' ||
+                    radioOption === '.anchors.simple' ? (_jsx(AnchorsFileSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, bed1Location: bed1Location, setBed1Location: setBed1Location, bed2Location: bed2Location, setBed2Location: setBed2Location })) : radioOption === '.pif.gz' ? (_jsx(PifGzSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, indexFileLocation: indexFileLocation, setIndexFileLocation: setIndexFileLocation })) : null })] }));
 });
 export default ImportSyntenyOpenCustomTrack;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../../model';
+import type { DotplotViewModel } from '../../model.ts';
 declare const ImportSyntenyTrackSelector: ({ model, assembly1, assembly2, }: {
     model: DotplotViewModel;
     assembly1: string;

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

@@ -13,8 +13,7 @@ function isRelevantTrack(track, assembly1, assembly2) {
         assemblyNames.includes(assembly2) &&
         track.type.includes('Synteny'));
 }
-const ImportSyntenyTrackSelector = observer(function ({ model, assembly1, assembly2, }) {
-    var _a;
+const ImportSyntenyTrackSelector = observer(function ImportSyntenyTrackSelector({ model, assembly1, assembly2, }) {
     const session = getSession(model);
     const { tracks, sessionTracks } = session;
     const allTracks = [
@@ -22,7 +21,7 @@ const ImportSyntenyTrackSelector = observer(function ({ model, assembly1, assemb
         ...(sessionTracks || []),
     ];
     const filteredTracks = allTracks.filter(t => isRelevantTrack(t, assembly2, assembly1));
-    const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
+    const resetTrack = filteredTracks[0]?.trackId || '';
     const [value, setValue] = useState(resetTrack);
     useEffect(() => {
         setValue(resetTrack);

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

@@ -1,4 +1,13 @@
-import type { DotplotViewModel } from '../../model';
+import type { DotplotViewModel } from '../../model.ts';
+export interface DotplotImportFormSyntenyOption {
+    value: string;
+    label: string;
+    ReactComponent: React.FC<{
+        model: DotplotViewModel;
+        assembly1: string;
+        assembly2: string;
+    }>;
+}
 declare const TrackSelector: ({ assembly1, assembly2, model, }: {
     model: DotplotViewModel;
     assembly1: string;

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

@@ -1,11 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
+import { getEnv } from '@jbrowse/core/util';
 import { FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, } from '@mui/material';
 import { observer } from 'mobx-react';
-import ImportSyntenyOpenCustomTrack from './ImportSyntenyOpenCustomTrack';
-import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelector';
-const TrackSelector = observer(function ({ assembly1, assembly2, model, }) {
+import ImportSyntenyOpenCustomTrack from "./ImportSyntenyOpenCustomTrack.js";
+import ImportSyntenyTrackSelector from "./ImportSyntenyTrackSelector.js";
+const TrackSelector = observer(function TrackSelector({ assembly1, assembly2, model, }) {
+    const { pluginManager } = getEnv(model);
     const [choice, setChoice] = useState('tracklist');
+    const customOptions = pluginManager.evaluateExtensionPoint('DotplotView-ImportFormSyntenyOptions', [], { model, assembly1, assembly2 });
+    const selectedCustomOption = customOptions.find(opt => opt.value === choice);
     useEffect(() => {
         if (choice === 'none') {
             model.setImportFormSyntenyTrack(0, { type: 'none' });
@@ -13,6 +17,6 @@ const TrackSelector = observer(function ({ assembly1, assembly2, model, }) {
     }, [model, choice]);
     return (_jsxs(_Fragment, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { id: "group-label", children: "(Optional) Select or add a synteny track" }), _jsxs(RadioGroup, { row: true, value: choice, onChange: event => {
                             setChoice(event.target.value);
-                        }, "aria-labelledby": "group-label", children: [_jsx(FormControlLabel, { value: "none", control: _jsx(Radio, {}), label: "None" }), _jsx(FormControlLabel, { value: "tracklist", control: _jsx(Radio, {}), label: "Existing track" }), _jsx(FormControlLabel, { value: "custom", control: _jsx(Radio, {}), label: "New track" })] })] }), choice === 'custom' ? (_jsx(ImportSyntenyOpenCustomTrack, { model: model, assembly2: assembly2, assembly1: assembly1 })) : null, choice === 'tracklist' ? (_jsx(ImportSyntenyTrackSelector, { model: model, assembly1: assembly1, assembly2: assembly2 })) : null] }));
+                        }, "aria-labelledby": "group-label", children: [_jsx(FormControlLabel, { value: "none", control: _jsx(Radio, {}), label: "None" }), _jsx(FormControlLabel, { value: "tracklist", control: _jsx(Radio, {}), label: "Existing track" }), _jsx(FormControlLabel, { value: "custom", control: _jsx(Radio, {}), label: "New track" }), customOptions.map(opt => (_jsx(FormControlLabel, { value: opt.value, control: _jsx(Radio, {}), label: opt.label }, opt.value)))] })] }), choice === 'custom' ? (_jsx(ImportSyntenyOpenCustomTrack, { model: model, assembly2: assembly2, assembly1: assembly1 })) : null, choice === 'tracklist' ? (_jsx(ImportSyntenyTrackSelector, { model: model, assembly1: assembly1, assembly2: assembly2 })) : null, selectedCustomOption ? (_jsx(selectedCustomOption.ReactComponent, { model: model, assembly1: assembly1, assembly2: assembly2 })) : null] }));
 });
 export default TrackSelector;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../../model';
+import type { DotplotViewModel } from '../../model.ts';
 declare const DotplotImportForm: ({ model, }: {
     model: DotplotViewModel;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,20 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { AssemblySelector, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, isSessionWithAddTracks } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, Container, FormControl, Grid, Paper, Typography, } from '@mui/material';
 import { toJS, transaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import TrackSelector from './TrackSelector';
+import TrackSelector from "./TrackSelector.js";
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(4),
         margin: '0 auto',
     },
-    assemblySelector: {
-        width: '75%',
-        margin: '0 auto',
-    },
 }));
 function doSubmit({ model, assembly1, assembly2, }) {
     const session = getSession(model);
@@ -24,21 +20,19 @@ function doSubmit({ model, assembly1, assembly2, }) {
     transaction(() => {
         if (isSessionWithAddTracks(session)) {
             toJS(importFormSyntenyTrackSelections).map((f, idx) => {
-                var _a;
                 if (f.type === 'userOpened') {
                     session.addTrackConf(f.value);
-                    model.toggleTrack((_a = f.value) === null || _a === void 0 ? void 0 : _a.trackId);
+                    model.toggleTrack(f.value?.trackId);
                 }
                 else if (f.type === 'preConfigured') {
                     model.showTrack(f.value, idx);
                 }
             });
         }
-        model.showAllRegions();
         model.setAssemblyNames(assembly2, assembly1);
     });
 }
-const DotplotImportForm = observer(function ({ model, }) {
+const DotplotImportForm = observer(function DotplotImportForm({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { assemblyNames } = session;

package/esm/DotplotView/components/ImportForm/selectors/AnchorsFileSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const AnchorsFileSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location, setBed1Location, bed2Location, setBed2Location, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default AnchorsFileSelector;

package/esm/DotplotView/components/ImportForm/selectors/AnchorsFileSelector.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileSelector } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import SwapAssemblies from './SwapAssemblies';
-const AnchorsFileSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location, setBed1Location, bed2Location, setBed2Location, radioOption, }) {
+import SwapAssemblies from "./SwapAssemblies.js";
+const AnchorsFileSelector = observer(function AnchorsFileSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, bed1Location, setBed1Location, bed2Location, setBed2Location, radioOption, }) {
     return (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", radioOption, " and .bed files for both genome assemblies from the MCScan (Python version) pipeline", ' ', _jsx("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)", children: "(more info)" })] }), _jsxs("div", { children: [_jsx(FileSelector, { inline: true, name: radioOption, location: fileLocation, setLocation: loc => {
                             setFileLocation(loc);
                         } }), _jsx(FileSelector, { inline: true, name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {

package/esm/DotplotView/components/ImportForm/selectors/PifGzSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const PifGzSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation, setIndexFileLocation, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default PifGzSelector;

package/esm/DotplotView/components/ImportForm/selectors/PifGzSelector.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { FileSelector } from '@jbrowse/core/ui';
 import { observer } from 'mobx-react';
-import SwapAssemblies from './SwapAssemblies';
-const PifGzSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation = undefined, setIndexFileLocation = () => { }, radioOption, }) {
+import SwapAssemblies from "./SwapAssemblies.js";
+const PifGzSelector = observer(function PifGzSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, indexFileLocation, setIndexFileLocation = () => { }, radioOption, }) {
     return (_jsxs("div", { children: [_jsxs("div", { style: { margin: 20 }, children: ["Open the ", radioOption, " and .pif.gz and index file (.pif.gz.tbi or .pif.gz.csi) files for created by `jbrowse make-pif`"] }), _jsxs("div", { style: { maxWidth: 400, margin: '0 auto' }, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: setFileLocation }), _jsx(FileSelector, { name: `${radioOption} index location (.tbi or .csi)`, inline: true, description: "", location: indexFileLocation, setLocation: setIndexFileLocation }), _jsx(SwapAssemblies, { swap: swap, radioOption: radioOption, assembly1: assembly1, assembly2: assembly2, setSwap: setSwap, text1: "query assembly", text2: "target assembly" })] })] }));
 });
 export default PifGzSelector;

package/esm/DotplotView/components/ImportForm/selectors/SwapAssemblies.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import HelpIcon from '@mui/icons-material/Help';
 import { Button, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { helpStrings } from './SelectorTypes';
+import { helpStrings } from "./SelectorTypes.js";
 const useStyles = makeStyles()({
     row: {
         display: 'flex',
@@ -16,7 +16,7 @@ const useStyles = makeStyles()({
         alignItems: 'center',
     },
 });
-const SwapAssemblies = observer(function ({ assembly1, assembly2, swap, setSwap, radioOption, helpContent, text1, text2, }) {
+const SwapAssemblies = observer(function SwapAssemblies({ assembly1, assembly2, swap, setSwap, radioOption, helpContent, text1, text2, }) {
     const { classes } = useStyles();
     return (_jsxs("div", { children: [_jsxs("div", { children: ["Verify or click swap", _jsx(Tooltip, { title: helpContent || (_jsx("code", { children: helpStrings[radioOption] })), children: _jsx(HelpIcon, {}) })] }), _jsxs("div", { className: classes.row, children: [_jsxs("div", { className: classes.swap, children: [_jsx("div", { children: _jsx("i", { children: swap ? assembly2 : assembly1 }) }), _jsx("div", { children: text1 }), _jsx("div", { children: _jsx("i", { children: swap ? assembly1 : assembly2 }) }), _jsx("div", { children: text2 })] }), _jsx(Button, { variant: "contained", onClick: () => {
                             if (setSwap) {

package/esm/DotplotView/components/ImportForm/selectors/SyntenyFileSelector.d.ts

@@ -1,3 +1,3 @@
-import type { SelectorProps } from './SelectorTypes';
+import type { SelectorProps } from './SelectorTypes.ts';
 declare const SyntenyFileSelector: ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }: SelectorProps) => import("react/jsx-runtime").JSX.Element;
 export default SyntenyFileSelector;

package/esm/DotplotView/components/ImportForm/selectors/SyntenyFileSelector.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FileSelector } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import SwapAssemblies from './SwapAssemblies';
+import SwapAssemblies from "./SwapAssemblies.js";
 const useStyles = makeStyles()({
     container: {
         display: 'flex',
@@ -10,7 +10,7 @@ const useStyles = makeStyles()({
         gap: 10,
     },
 });
-const SyntenyFileSelector = observer(function ({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }) {
+const SyntenyFileSelector = observer(function SyntenyFileSelector({ assembly1, assembly2, swap, setSwap, fileLocation, setFileLocation, radioOption, }) {
     const { classes } = useStyles();
     return (_jsxs("div", { className: classes.container, children: [_jsx(FileSelector, { name: `${radioOption} location`, inline: true, description: "", location: fileLocation, setLocation: loc => {
                     setFileLocation(loc);

package/esm/DotplotView/components/ImportForm/selectors/index.d.ts

@@ -1,3 +1,3 @@
-export { default as AnchorsFileSelector } from './AnchorsFileSelector';
-export { default as PifGzSelector } from './PifGzSelector';
-export { default as SyntenyFileSelector } from './SyntenyFileSelector';
+export { default as AnchorsFileSelector } from './AnchorsFileSelector.tsx';
+export { default as PifGzSelector } from './PifGzSelector.tsx';
+export { default as SyntenyFileSelector } from './SyntenyFileSelector.tsx';

package/esm/DotplotView/components/ImportForm/selectors/index.js

@@ -1,3 +1,3 @@
-export { default as AnchorsFileSelector } from './AnchorsFileSelector';
-export { default as PifGzSelector } from './PifGzSelector';
-export { default as SyntenyFileSelector } from './SyntenyFileSelector';
+export { default as AnchorsFileSelector } from "./AnchorsFileSelector.js";
+export { default as PifGzSelector } from "./PifGzSelector.js";
+export { default as SyntenyFileSelector } from "./SyntenyFileSelector.js";

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

@@ -0,0 +1,5 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const MinLengthSlider: ({ model, }: {
+    model: DotplotViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MinLengthSlider;