@jbrowse/plugin-dotplot-view 3.7.0 → 4.0.1

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

@@ -0,0 +1,6 @@
+import type { DotplotViewModel } from '../model.ts';
+declare const DotplotGrid: ({ model, children, }: {
+    model: DotplotViewModel;
+    children?: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default DotplotGrid;

package/esm/DotplotView/components/{Grid.js → DotplotGrid.js}

@@ -2,10 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-export const GridRaw = observer(function ({ model, children, }) {
+const DotplotGrid = observer(function DotplotGrid({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
     const vblocks = vview.dynamicBlocks.contentBlocks;
+    const theme = useTheme();
     if (!hblocks.length || !vblocks.length) {
         return null;
     }
@@ -13,31 +14,29 @@ export const GridRaw = observer(function ({ model, children, }) {
     const vtop = vview.displayedRegionsTotalPx - vview.offsetPx;
     const hbottom = hblocks[0].offsetPx - hview.offsetPx;
     const vbottom = vblocks[0].offsetPx - vview.offsetPx;
-    const theme = useTheme();
     const stroke = theme.palette.divider;
     const rx = Math.max(hbottom, 0);
     const ry = Math.max(viewHeight - vtop, 0);
     const w = Math.min(htop - hbottom, viewWidth);
     const h = Math.min(viewHeight - vbottom - ry, viewHeight);
-    let lastx = Number.POSITIVE_INFINITY;
-    let lasty = Number.POSITIVE_INFINITY;
-    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }), _jsxs("g", { children: [hblocks.map(region => {
+    const hlines = hblocks.filter((region, idx) => {
+        const x = Math.floor(region.offsetPx - hview.offsetPx);
+        const prevX = idx > 0 ? Math.floor(hblocks[idx - 1].offsetPx - hview.offsetPx) : null;
+        return x !== prevX;
+    });
+    const vlines = vblocks.filter((region, idx) => {
+        const y = Math.floor(viewHeight - (region.offsetPx - vview.offsetPx));
+        const prevY = idx > 0
+            ? Math.floor(viewHeight - (vblocks[idx - 1].offsetPx - vview.offsetPx))
+            : null;
+        return y !== prevY;
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }), _jsxs("g", { children: [hlines.map(region => {
                         const x = region.offsetPx - hview.offsetPx;
-                        const render = Math.floor(x) !== Math.floor(lastx);
-                        if (render) {
-                            lastx = x;
-                        }
-                        return render ? (_jsx("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) }, JSON.stringify(region))) : null;
-                    }), vblocks.map(region => {
+                        return (_jsx("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...getStrokeProps(stroke) }, region.key));
+                    }), vlines.map(region => {
                         const y = viewHeight - (region.offsetPx - vview.offsetPx);
-                        const render = Math.floor(y) !== Math.floor(lasty);
-                        if (render) {
-                            lasty = y;
-                        }
-                        return render ? (_jsx("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) }, JSON.stringify(region))) : null;
+                        return (_jsx("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...getStrokeProps(stroke) }, region.key));
                     }), _jsx("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...getStrokeProps(stroke) }), _jsx("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...getStrokeProps(stroke) })] }), children] }));
 });
-export default function Grid({ model, children, }) {
-    const { viewWidth, viewHeight } = model;
-    return (_jsx("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: _jsx(GridRaw, { model: model, children: children }) }));
-}
+export default DotplotGrid;

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

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

package/esm/DotplotView/components/DotplotGridWrapper.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import DotplotGrid from "./DotplotGrid.js";
+const DotplotGridWrapper = observer(function DotplotGridWrapper({ model, children, }) {
+    const { viewWidth, viewHeight } = model;
+    return (_jsx("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: _jsx(DotplotGrid, { model: model, children: children }) }));
+});
+export default DotplotGridWrapper;

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

@@ -1,6 +1,6 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 type Coord = [number, number] | undefined;
-export declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
+declare const DotplotTooltipClick: ({ model, mousedown, mousedownClient, xdistance, ydistance, }: {
     model: DotplotViewModel;
     mousedown: Coord;
     mousedownClient: Coord;

package/esm/DotplotView/components/DotplotTooltipClick.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-import { locstr } from './util';
-export const DotplotTooltipClick = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
+import { locstr } from "./util.js";
+const DotplotTooltipClick = observer(function DotplotTooltipClick({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
     const { hview, vview, viewHeight } = model;
-    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 x = (mousedownClient?.[0] || 0) - (xdistance < 0 ? 0 : 0);
+    const y = (mousedownClient?.[1] || 0) - (ydistance < 0 ? 0 : 0);
     return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'right' : 'left', clientPoint: { x, y }, children: [`x - ${locstr(mousedown[0], hview)}`, _jsx("br", {}), `y - ${locstr(viewHeight - mousedown[1], vview)}`, _jsx("br", {})] })) : null;
 });
 export default DotplotTooltipClick;

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 type Coord = [number, number] | undefined;
 declare const DotplotTooltipMouseover: ({ model, mouserect, mouserectClient, xdistance, }: {
     model: DotplotViewModel;

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
 import { observer } from 'mobx-react';
-import { locstr } from './util';
-const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
+import { locstr } from "./util.js";
+const DotplotTooltipMouseover = observer(function DotplotTooltipMouseover({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;
     return mouserect ? (_jsxs(BaseTooltip, { placement: xdistance < 0 ? 'left' : 'right', clientPoint: mouserectClient
             ? { x: mouserectClient[0], y: mouserectClient[1] }

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

@@ -1,4 +1,4 @@
-import type { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model.ts';
 type Coord = [number, number] | undefined;
 interface DotplotTooltipsProps {
     model: DotplotViewModel;

package/esm/DotplotView/components/DotplotTooltips.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
-const TooltipWhereClicked = lazy(() => import('./DotplotTooltipClick'));
-const TooltipWhereMouseovered = lazy(() => import('./DotplotTooltipMouseover'));
+const TooltipWhereClicked = lazy(() => import("./DotplotTooltipClick.js"));
+const TooltipWhereMouseovered = lazy(() => import("./DotplotTooltipMouseover.js"));
 export default function DotplotTooltips({ model, mouseOvered, validSelect, mouserect, mouserectClient, xdistance, mousedown, mousedownClient, ydistance, }) {
     return (_jsxs(_Fragment, { 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] }));
 }

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

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

package/esm/DotplotView/components/DotplotView.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 DotplotTooltips from './DotplotTooltips';
-import Header from './Header';
-import ImportForm from './ImportForm';
-import MouseInteractionLayer from './MouseInteractionLayer';
-import SelectionContextMenu from './SelectionContextMenu';
-import { useCtrlKeyTracking } from './hooks/useCtrlKeyTracking';
-import { useCursorMode } from './hooks/useCursorMode';
-import { useMouseCoordinates } from './hooks/useMouseCoordinates';
-import { useMouseMoveHandler } from './hooks/useMouseMoveHandler';
-import { useMouseUpHandler } from './hooks/useMouseUpHandler';
-import { useWheelHandler } from './hooks/useWheelHandler';
+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',
@@ -54,7 +54,7 @@ const useStyles = makeStyles()(theme => ({
         borderTop: '1px solid #fafafa',
     },
 }));
-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,7 +62,7 @@ const RenderedComponent = observer(({ model }) => {
             return RenderingComponent ? (_jsx(RenderingComponent, { model: display }, track.configuration.trackId)) : null;
         }) }));
 });
-const DotplotViewInternal = observer(function ({ model, }) {
+const DotplotViewInternal = observer(function DotplotViewInternal({ model, }) {
     const { classes } = useStyles();
     const { hview, vview, wheelMode, cursorMode } = model;
     const { mousecurrClient, mousedownClient, mouseupClient, mouseOvered, setMouseCurrClient, setMouseDownClient, setMouseUpClient, setMouseOvered, ref, root, rootRect, mousedown, mousecurr, mouseup, mouserect, mouserectClient, xdistance, ydistance, } = useMouseCoordinates();
@@ -82,14 +82,16 @@ const DotplotViewInternal = observer(function ({ model, }) {
                     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: [_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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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: () => {

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,10 +20,9 @@ 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);
@@ -37,7 +32,7 @@ function doSubmit({ model, assembly1, assembly2, }) {
         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

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