@jbrowse/plugin-dotplot-view 3.6.5 → 4.0.0

package/dist/DotplotView/components/DotplotView.js

@@ -1,275 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const mobx_1 = require("mobx");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const Axes_1 = require("./Axes");
-const Grid_1 = __importDefault(require("./Grid"));
-const Header_1 = __importDefault(require("./Header"));
-const ImportForm_1 = __importDefault(require("./ImportForm"));
-const TooltipWhereClicked = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipClick'))));
-const TooltipWhereMouseovered = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DotplotTooltipMouseover'))));
-const blank = { left: 0, top: 0, width: 0, height: 0 };
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    spacer: {
-        gridColumn: '1/2',
-        gridRow: '2/2',
-    },
-    root: {
-        position: 'relative',
-        marginBottom: theme.spacing(1),
-        overflow: 'hidden',
-    },
-    container: {
-        display: 'grid',
-        padding: 5,
-        position: 'relative',
-    },
-    overlay: {
-        pointerEvents: 'none',
-        overflow: 'hidden',
-        display: 'flex',
-        width: '100%',
-        gridRow: '1/2',
-        gridColumn: '2/2',
-        zIndex: 100,
-        '& path': {
-            cursor: 'crosshair',
-            fill: 'none',
-        },
-    },
-    content: {
-        position: 'relative',
-        gridColumn: '2/2',
-        gridRow: '1/2',
-    },
-    resizeHandle: {
-        height: 4,
-        background: '#ccc',
-        boxSizing: 'border-box',
-        borderTop: '1px solid #fafafa',
-    },
-}));
-function getOffset(coord, rect) {
-    return coord && [coord[0] - rect.left, coord[1] - rect.top];
-}
-const RenderedComponent = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.overlay, children: model.tracks.map(track => {
-            const [display] = track.displays;
-            const { RenderingComponent } = display;
-            return RenderingComponent ? ((0, jsx_runtime_1.jsx)(RenderingComponent, { model: display }, track.configuration.trackId)) : null;
-        }) }));
-});
-const DotplotViewInternal = (0, mobx_react_1.observer)(function ({ model, }) {
-    var _a, _b;
-    const { classes } = useStyles();
-    const [mousecurrClient, setMouseCurrClient] = (0, react_1.useState)();
-    const [mousedownClient, setMouseDownClient] = (0, react_1.useState)();
-    const [mouseOvered, setMouseOvered] = (0, react_1.useState)(false);
-    const [mouseupClient, setMouseUpClient] = (0, react_1.useState)();
-    const ref = (0, react_1.useRef)(null);
-    const root = (0, react_1.useRef)(null);
-    const distanceX = (0, react_1.useRef)(0);
-    const distanceY = (0, react_1.useRef)(0);
-    const scheduled = (0, react_1.useRef)(false);
-    const [ctrlKeyWasUsed, setCtrlKeyWasUsed] = (0, react_1.useState)(false);
-    const [ctrlKeyDown, setCtrlKeyDown] = (0, react_1.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);
-    (0, react_1.useEffect)(() => {
-        function onWheel(event) {
-            event.preventDefault();
-            distanceX.current += event.deltaX;
-            distanceY.current -= event.deltaY;
-            if (!scheduled.current) {
-                scheduled.current = true;
-                window.requestAnimationFrame(() => {
-                    (0, mobx_1.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]);
-    (0, react_1.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]);
-    (0, react_1.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);
-        };
-    }, []);
-    (0, react_1.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]);
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Header_1.default, { model: model, selection: !validSelect || !(mousedown && mouserect)
-                    ? undefined
-                    : {
-                        width: Math.abs(xdistance),
-                        height: Math.abs(ydistance),
-                    } }), (0, jsx_runtime_1.jsxs)("div", { ref: root, className: classes.root, onMouseLeave: () => {
-                    setMouseOvered(false);
-                }, onMouseEnter: () => {
-                    setMouseOvered(true);
-                }, children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(Axes_1.VerticalAxis, { model: model }), (0, jsx_runtime_1.jsx)(Axes_1.HorizontalAxis, { model: model }), (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: classes.content, children: [mouseOvered && validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereMouseovered, { model: model, mouserect: mouserect, mouserectClient: mouserectClient, xdistance: xdistance }) })) : null, validSelect ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(TooltipWhereClicked, { model: model, mousedown: mousedown, mousedownClient: mousedownClient, xdistance: xdistance, ydistance: ydistance }) })) : null, (0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(Grid_1.default, { model: model, children: validSelect && mousedown && mouserect ? ((0, jsx_runtime_1.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 }) }), (0, jsx_runtime_1.jsx)("div", { className: classes.spacer })] }), (0, jsx_runtime_1.jsx)(RenderedComponent, { model: model }), (0, jsx_runtime_1.jsx)(ui_1.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);
-                                        },
-                                    },
-                                ] })] }), (0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle })] })] }));
-});
-const DotplotView = (0, mobx_react_1.observer)(function ({ model }) {
-    const { initialized, loading, error } = model;
-    if ((!initialized && !loading) || error) {
-        return (0, jsx_runtime_1.jsx)(ImportForm_1.default, { model: model });
-    }
-    if (loading) {
-        return (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6" });
-    }
-    return (0, jsx_runtime_1.jsx)(DotplotViewInternal, { model: model });
-});
-exports.default = DotplotView;

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

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

package/dist/DotplotView/components/DotplotWarnings.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const WarningDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./WarningDialog'))));
-const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
-    const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
-    const [shown, setShown] = (0, react_1.useState)(false);
-    const [hide, setHide] = (0, react_1.useState)(false);
-    return trackWarnings.length && !hide ? ((0, jsx_runtime_1.jsxs)(material_1.Alert, { severity: "warning", children: ["Warnings during render", ' ', (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => {
-                    setShown(true);
-                }, children: "More info" }), shown ? ((0, jsx_runtime_1.jsx)(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
-                    setShown(false);
-                } })) : null, (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => {
-                    setHide(true);
-                }, children: "Dismiss" })] })) : null;
-});
-exports.default = DotplotWarnings;

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

@@ -1,7 +0,0 @@
-import type { ExportSvgOptions } from '../model';
-export default function ExportSvgDialog({ model, handleClose, }: {
-    model: {
-        exportSvg(opts: ExportSvgOptions): Promise<void>;
-    };
-    handleClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/DotplotView/components/ExportSvgDialog.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ExportSvgDialog;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-function LoadingMessage() {
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20, style: { marginRight: 20 } }), (0, jsx_runtime_1.jsx)(material_1.Typography, { display: "inline", children: "Creating SVG" })] }));
-}
-function TextField2({ children, ...rest }) {
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { ...rest, children: children }) }));
-}
-function useSvgLocal(key, val) {
-    return (0, util_1.useLocalStorage)(`svg-${key}`, val);
-}
-function ExportSvgDialog({ model, handleClose, }) {
-    const session = (0, util_1.getSession)(model);
-    const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
-    const [rasterizeLayers, setRasterizeLayers] = (0, react_1.useState)(offscreenCanvas);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)();
-    const [filename, setFilename] = useSvgLocal('file', 'jbrowse.svg');
-    const [themeName, setThemeName] = useSvgLocal('theme', session.themeName || 'default');
-    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: true, onClose: handleClose, title: "Export SVG", children: [(0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [error ? ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error })) : loading ? ((0, jsx_runtime_1.jsx)(LoadingMessage, {})) : null, (0, jsx_runtime_1.jsx)(TextField2, { helperText: "filename", value: filename, onChange: event => {
-                            setFilename(event.target.value);
-                        } }), session.allThemes ? ((0, jsx_runtime_1.jsx)(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
-                            setThemeName(event.target.value);
-                        }, children: Object.entries(session.allThemes()).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, offscreenCanvas ? ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: rasterizeLayers, onChange: () => {
-                                setRasterizeLayers(val => !val);
-                            } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                            handleClose();
-                        }, children: "Cancel" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
-                            setLoading(true);
-                            setError(undefined);
-                            try {
-                                await model.exportSvg({
-                                    rasterizeLayers,
-                                    filename,
-                                    themeName,
-                                });
-                                handleClose();
-                            }
-                            catch (e) {
-                                console.error(e);
-                                setError(e);
-                            }
-                            finally {
-                                setLoading(false);
-                            }
-                        }, children: "Submit" })] })] }));
-}

package/dist/DotplotView/components/Grid.d.ts

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

package/dist/DotplotView/components/Grid.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridRaw = void 0;
-exports.default = Grid;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-exports.GridRaw = (0, mobx_react_1.observer)(function ({ model, children, }) {
-    const { viewWidth, viewHeight, hview, vview } = model;
-    const hblocks = hview.dynamicBlocks.contentBlocks;
-    const vblocks = vview.dynamicBlocks.contentBlocks;
-    if (!hblocks.length || !vblocks.length) {
-        return null;
-    }
-    const htop = hview.displayedRegionsTotalPx - hview.offsetPx;
-    const vtop = vview.displayedRegionsTotalPx - vview.offsetPx;
-    const hbottom = hblocks[0].offsetPx - hview.offsetPx;
-    const vbottom = vblocks[0].offsetPx - vview.offsetPx;
-    const theme = (0, material_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("rect", { x: rx, y: ry, width: w, height: h, ...(0, util_1.getFillProps)(theme.palette.background.default) }), (0, jsx_runtime_1.jsxs)("g", { children: [hblocks.map(region => {
-                        const x = region.offsetPx - hview.offsetPx;
-                        const render = Math.floor(x) !== Math.floor(lastx);
-                        if (render) {
-                            lastx = x;
-                        }
-                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: x, y1: 0, x2: x, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
-                    }), vblocks.map(region => {
-                        const y = viewHeight - (region.offsetPx - vview.offsetPx);
-                        const render = Math.floor(y) !== Math.floor(lasty);
-                        if (render) {
-                            lasty = y;
-                        }
-                        return render ? ((0, jsx_runtime_1.jsx)("line", { x1: 0, y1: y, x2: viewWidth, y2: y, ...(0, util_1.getStrokeProps)(stroke) }, JSON.stringify(region))) : null;
-                    }), (0, jsx_runtime_1.jsx)("line", { x1: htop, y1: 0, x2: htop, y2: viewHeight, ...(0, util_1.getStrokeProps)(stroke) }), (0, jsx_runtime_1.jsx)("line", { x1: 0, y1: viewHeight - vtop, x2: viewWidth, y2: viewHeight - vtop, ...(0, util_1.getStrokeProps)(stroke) })] }), children] }));
-});
-function Grid({ model, children, }) {
-    const { viewWidth, viewHeight } = model;
-    return ((0, jsx_runtime_1.jsx)("svg", { width: viewWidth, height: viewHeight, style: { background: 'rgba(0,0,0,0.12)' }, children: (0, jsx_runtime_1.jsx)(exports.GridRaw, { model: model, children: children }) }));
-}

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

@@ -1,9 +0,0 @@
-import type { DotplotViewModel } from '../model';
-declare const DotplotHeader: ({ model, selection, }: {
-    model: DotplotViewModel;
-    selection?: {
-        width: number;
-        height: number;
-    };
-}) => import("react/jsx-runtime").JSX.Element;
-export default DotplotHeader;

package/dist/DotplotView/components/Header.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const DotplotControls_1 = __importDefault(require("./DotplotControls"));
-const DotplotWarnings_1 = __importDefault(require("./DotplotWarnings"));
-const PanButtons_1 = __importDefault(require("./PanButtons"));
-const useStyles = (0, mui_1.makeStyles)()({
-    bp: {
-        display: 'flex',
-        alignItems: 'center',
-        marginLeft: 10,
-    },
-    spacer: {
-        flexGrow: 1,
-    },
-    headerBar: {
-        display: 'flex',
-        position: 'relative',
-    },
-});
-const DotplotHeader = (0, mobx_react_1.observer)(function ({ model, selection, }) {
-    const { classes } = useStyles();
-    const { hview, vview, showPanButtons } = model;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.headerBar, children: [(0, jsx_runtime_1.jsx)(DotplotControls_1.default, { model: model }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: ["x: ", hview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(hview.currBp), (0, jsx_runtime_1.jsx)("br", {}), "y: ", vview.assemblyNames.join(','), " ", (0, util_1.getBpDisplayStr)(vview.currBp)] }), selection ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary", children: [`width:${(0, util_1.getBpDisplayStr)(hview.bpPerPx * selection.width)}`, " ", (0, jsx_runtime_1.jsx)("br", {}), `height:${(0, util_1.getBpDisplayStr)(vview.bpPerPx * selection.height)}`] })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.spacer }), (0, jsx_runtime_1.jsx)(DotplotWarnings_1.default, { model: model }), showPanButtons ? (0, jsx_runtime_1.jsx)(PanButtons_1.default, { model: model }) : null] }));
-});
-exports.default = DotplotHeader;

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

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

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

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const getAdapter_1 = require("./getAdapter");
-const selectors_1 = require("./selectors");
-const util_1 = require("./util");
-const ImportSyntenyOpenCustomTrack = (0, mobx_react_1.observer)(function ({ model, assembly1, assembly2, }) {
-    const [swap, setSwap] = (0, react_1.useState)(false);
-    const [bed2Location, setBed2Location] = (0, react_1.useState)();
-    const [bed1Location, setBed1Location] = (0, react_1.useState)();
-    const [fileLocation, setFileLocation] = (0, react_1.useState)();
-    const [indexFileLocation, setIndexFileLocation] = (0, react_1.useState)();
-    const [value, setValue] = (0, react_1.useState)('');
-    const [error, setError] = (0, react_1.useState)();
-    const fileName = (0, util_1.getName)(fileLocation);
-    const radioOption = value || (fileName ? (0, util_1.extName)((0, util_1.stripGz)(fileName)) : '');
-    (0, react_1.useEffect)(() => {
-        try {
-            if (fileLocation) {
-                const fn = fileName ? (0, util_1.basename)(fileName) : 'MyTrack';
-                const trackId = `${fn}-${Date.now()}-sessionTrack`;
-                setError(undefined);
-                model.setImportFormSyntenyTrack(0, {
-                    type: 'userOpened',
-                    value: {
-                        trackId,
-                        name: fn,
-                        assemblyNames: [assembly2, assembly1],
-                        type: 'SyntenyTrack',
-                        adapter: (0, getAdapter_1.getAdapter)({
-                            radioOption,
-                            assembly1: swap ? assembly2 : assembly1,
-                            assembly2: swap ? assembly1 : assembly2,
-                            fileLocation,
-                            indexFileLocation,
-                            bed1Location,
-                            bed2Location,
-                        }),
-                    },
-                });
-            }
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }, [
-        swap,
-        model,
-        fileName,
-        assembly1,
-        assembly2,
-        bed1Location,
-        bed2Location,
-        fileLocation,
-        indexFileLocation,
-        radioOption,
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 12 }, children: [error ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: error }) : null, (0, jsx_runtime_1.jsx)(material_1.Typography, { style: { textAlign: 'center' }, children: "Add a .paf (minimap2), .delta (Mummer), .chain (UCSC liftover), .anchors or .anchors.simple (MCScan), or .pif.gz (jbrowse CLI make-pif) file to view. These file types can also be gzipped." }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { value: radioOption, onChange: event => {
-                    setValue(event.target.value);
-                }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, justifyContent: "center", children: [
-                        '.paf',
-                        '.delta',
-                        '.out',
-                        '.chain',
-                        '.anchors',
-                        '.anchors.simple',
-                        '.pif.gz',
-                    ].map(extension => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: extension, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: extension }, extension))) }) }), (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, justifyContent: "center", children: radioOption === '.paf' ||
-                    radioOption === '.out' ||
-                    radioOption === '.delta' ||
-                    radioOption === '.chain' ? ((0, jsx_runtime_1.jsx)(selectors_1.SyntenyFileSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap })) : radioOption === '.anchors' || radioOption === '.anchors.simple' ? ((0, jsx_runtime_1.jsx)(selectors_1.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' ? ((0, jsx_runtime_1.jsx)(selectors_1.PifGzSelector, { radioOption: radioOption, fileLocation: fileLocation, setFileLocation: setFileLocation, assembly1: assembly1, assembly2: assembly2, swap: swap, setSwap: setSwap, indexFileLocation: indexFileLocation, setIndexFileLocation: setIndexFileLocation })) : null })] }));
-});
-exports.default = ImportSyntenyOpenCustomTrack;

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

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

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

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const configuration_1 = require("@jbrowse/core/configuration");
-const ui_1 = require("@jbrowse/core/ui");
-const Icons_1 = require("@jbrowse/core/ui/Icons");
-const util_1 = require("@jbrowse/core/util");
-const tracks_1 = require("@jbrowse/core/util/tracks");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-function isRelevantTrack(track, assembly1, assembly2) {
-    const assemblyNames = (0, configuration_1.readConfObject)(track, 'assemblyNames');
-    return (assemblyNames.includes(assembly1) &&
-        assemblyNames.includes(assembly2) &&
-        track.type.includes('Synteny'));
-}
-const ImportSyntenyTrackSelector = (0, mobx_react_1.observer)(function ({ model, assembly1, assembly2, }) {
-    var _a;
-    const session = (0, util_1.getSession)(model);
-    const { tracks, sessionTracks } = session;
-    const allTracks = [
-        ...tracks,
-        ...(sessionTracks || []),
-    ];
-    const filteredTracks = allTracks.filter(t => isRelevantTrack(t, assembly2, assembly1));
-    const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
-    const [value, setValue] = (0, react_1.useState)(resetTrack);
-    (0, react_1.useEffect)(() => {
-        setValue(resetTrack);
-    }, [resetTrack]);
-    (0, react_1.useEffect)(() => {
-        model.setImportFormSyntenyTrack(0, {
-            type: 'preConfigured',
-            value,
-        });
-    }, [model, value]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { style: { padding: 12 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Select a track from the select box below, the track will be shown when you hit \"Launch\". Note: there is a track selector ", (0, jsx_runtime_1.jsx)("i", { children: "inside" }), " the DotplotView, which can turn on one or more SyntenyTracks (more than one can be displayed at once). Look for the track selector icon", ' ', (0, jsx_runtime_1.jsx)(Icons_1.TrackSelector, {})] }), filteredTracks.length ? ((0, jsx_runtime_1.jsx)(material_1.Select, { value: value, onChange: event => {
-                    setValue(event.target.value);
-                }, children: filteredTracks.map(track => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: track.trackId, children: (0, tracks_1.getTrackName)(track, session) }, track.trackId))) })) : ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))] }));
-});
-exports.default = ImportSyntenyTrackSelector;

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

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