@jbrowse/plugin-dotplot-view 2.18.0 → 3.0.1

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

@@ -1,12 +1,12 @@
-import React, { useEffect, useState } from 'react';
+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 { Button, Container, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
-import { transaction } from 'mobx';
+import { Button, Container, FormControl, Grid2, Paper, Typography, } from '@mui/material';
+import { toJS, transaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import ImportCustomTrack from './ImportCustomTrack';
-import ImportSyntenyTrackSelector from './ImportSyntenyTrackSelector';
+import TrackSelector from './TrackSelector';
 const useStyles = makeStyles()(theme => ({
     importFormContainer: {
         padding: theme.spacing(4),
@@ -17,81 +17,55 @@ const useStyles = makeStyles()(theme => ({
         margin: '0 auto',
     },
 }));
-function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData, assembly1, assembly2, model, }) {
-    const [choice, setChoice] = useState('tracklist');
-    useEffect(() => {
-        if (choice === 'none') {
-            setSessionTrackData(undefined);
-            setShowTrackId(undefined);
+function doSubmit({ model, assembly1, assembly2, }) {
+    const session = getSession(model);
+    const { importFormSyntenyTrackSelections } = model;
+    model.setError(undefined);
+    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);
+                }
+                else if (f.type === 'preConfigured') {
+                    model.showTrack(f.value, idx);
+                }
+            });
         }
-    }, [choice, setSessionTrackData, setShowTrackId]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, null,
-            React.createElement(FormLabel, { id: "group-label" }, "(Optional) Select or add a synteny track"),
-            React.createElement(RadioGroup, { row: true, value: choice, onChange: event => {
-                    setChoice(event.target.value);
-                }, "aria-labelledby": "group-label" },
-                React.createElement(FormControlLabel, { value: "none", control: React.createElement(Radio, null), label: "None" }),
-                React.createElement(FormControlLabel, { value: "tracklist", control: React.createElement(Radio, null), label: "Existing track" }),
-                React.createElement(FormControlLabel, { value: "custom", control: React.createElement(Radio, null), label: "New track" }))),
-        choice === 'custom' ? (React.createElement(ImportCustomTrack, { setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, assembly2: assembly2, assembly1: assembly1 })) : null,
-        choice === 'tracklist' ? (React.createElement(ImportSyntenyTrackSelector, { model: model, assembly1: assembly1, assembly2: assembly2, setShowTrackId: setShowTrackId })) : null));
+        model.showAllRegions();
+        model.setAssemblyNames(assembly2, assembly1);
+    });
 }
-const DotplotImportForm = observer(({ model }) => {
+const DotplotImportForm = observer(function ({ model, }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { assemblyNames } = session;
     const [assembly2, setAssembly2] = useState(assemblyNames[0] || '');
     const [assembly1, setAssembly1] = useState(assemblyNames[0] || '');
     const [error, setError] = useState();
-    const [sessionTrackData, setSessionTrackData] = useState();
-    const [showTrackId, setShowTrackId] = useState();
-    function onOpenClick() {
-        try {
-            if (!isSessionWithAddTracks(session)) {
-                return;
-            }
-            setError(undefined);
-            model.setError(undefined);
-            transaction(() => {
-                if (sessionTrackData) {
-                    session.addTrackConf(sessionTrackData);
-                    model.toggleTrack(sessionTrackData.trackId);
-                }
-                else if (showTrackId) {
-                    model.showTrack(showTrackId);
-                }
-                model.setViews([
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                    { bpPerPx: 0.1, offsetPx: 0 },
-                ]);
-                model.setAssemblyNames(assembly2, assembly1);
-            });
-        }
-        catch (e) {
-            console.error(e);
-            setError(e);
-        }
-    }
     const displayError = error || model.error;
-    return (React.createElement(Container, { className: classes.importFormContainer },
-        displayError ? React.createElement(ErrorMessage, { error: displayError }) : null,
-        React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", className: classes.assemblySelector },
-            React.createElement(Grid, { item: true },
-                React.createElement(Paper, { style: { padding: 12 } },
-                    React.createElement(Typography, { style: { textAlign: 'center' } }, "Select assemblies for dotplot view"),
-                    React.createElement(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center" },
-                        React.createElement(Grid, { item: true },
-                            React.createElement(AssemblySelector, { selected: assembly1, onChange: val => {
-                                    setAssembly1(val);
-                                }, session: session })),
-                        React.createElement(Grid, { item: true },
-                            React.createElement(AssemblySelector, { selected: assembly2, onChange: val => {
+    return (_jsxs(Container, { className: classes.importFormContainer, children: [displayError ? _jsx(ErrorMessage, { error: displayError }) : null, _jsxs(Paper, { style: { padding: 12 }, children: [_jsx(Typography, { style: { textAlign: 'center' }, children: "Select assemblies for dotplot view" }), _jsxs(Grid2, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", children: [_jsx(AssemblySelector, { helperText: "x-axis assembly", selected: assembly2, session: session, onChange: val => {
                                     setAssembly2(val);
-                                }, session: session })),
-                        React.createElement(Grid, { item: true },
-                            React.createElement(FormControl, null,
-                                React.createElement(Button, { onClick: onOpenClick, variant: "contained", color: "primary" }, "Launch"))))),
-                React.createElement(TrackSelector, { setShowTrackId: setShowTrackId, assembly2: assembly2, assembly1: assembly1, setSessionTrackData: setSessionTrackData, sessionTrackData: sessionTrackData, model: model })))));
+                                } }), _jsx(AssemblySelector, { helperText: "y-axis assembly", selected: assembly1, session: session, onChange: val => {
+                                    setAssembly1(val);
+                                } }), _jsx(FormControl, { children: _jsx(Button, { onClick: () => {
+                                        ;
+                                        (async () => {
+                                            try {
+                                                setError(undefined);
+                                                doSubmit({
+                                                    assembly1,
+                                                    assembly2,
+                                                    model,
+                                                });
+                                            }
+                                            catch (e) {
+                                                console.error(e);
+                                                setError(e);
+                                            }
+                                        })();
+                                    }, variant: "contained", color: "primary", children: "Launch" }) })] }), _jsx(TrackSelector, { assembly2: assembly2, assembly1: assembly1, model: model })] })] }));
 });
 export default DotplotImportForm;

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

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

package/esm/DotplotView/components/PanButtons.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import ArrowDropUp from '@mui/icons-material/ArrowDropUp';
 import ArrowLeft from '@mui/icons-material/ArrowLeft';
@@ -25,36 +25,18 @@ const useStyles = makeStyles()({
 });
 const PanButtons = observer(function PanButtons({ model, }) {
     const { classes } = useStyles();
-    return (React.createElement(Paper, { className: classes.dpad, elevation: 6 },
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.vview.scroll(100);
-            } },
-            React.createElement(ArrowDropUp, null)),
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.hview.scroll(-100);
-            } },
-            React.createElement(ArrowLeft, null)),
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.hview.scroll(100);
-            } },
-            React.createElement(ArrowRight, null)),
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.vview.scroll(-100);
-            } },
-            React.createElement(ArrowDropDown, null)),
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.zoomIn();
-            } },
-            React.createElement(ZoomIn, null)),
-        React.createElement("div", null),
-        React.createElement(IconButton, { className: classes.icon, onClick: () => {
-                model.zoomOut();
-            } },
-            React.createElement(ZoomOut, null))));
+    return (_jsxs(Paper, { className: classes.dpad, elevation: 6, children: [_jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.vview.scroll(100);
+                }, children: _jsx(ArrowDropUp, {}) }), _jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.hview.scroll(-100);
+                }, children: _jsx(ArrowLeft, {}) }), _jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.hview.scroll(100);
+                }, children: _jsx(ArrowRight, {}) }), _jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.vview.scroll(-100);
+                }, children: _jsx(ArrowDropDown, {}) }), _jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.zoomIn();
+                }, children: _jsx(ZoomIn, {}) }), _jsx("div", {}), _jsx(IconButton, { className: classes.icon, onClick: () => {
+                    model.zoomOut();
+                }, children: _jsx(ZoomOut, {}) })] }));
 });
 export default PanButtons;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
 interface Warning {
     message: string;
@@ -13,5 +12,5 @@ interface TrackWarning {
 declare const WarningDialog: ({ trackWarnings, handleClose, }: {
     handleClose: () => void;
     trackWarnings: TrackWarning[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default WarningDialog;

package/esm/DotplotView/components/WarningDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { getConf } from '@jbrowse/core/configuration';
 import { Dialog } from '@jbrowse/core/ui';
 import { measureGridWidth } from '@jbrowse/core/util';
@@ -32,10 +32,6 @@ const WarningDialog = observer(function WarningDialog({ trackWarnings, handleClo
         { field: 'message', width: measureGridWidth(rows.map(r => r.message)) },
         { field: 'effect', width: measureGridWidth(rows.map(r => r.effect)) },
     ];
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Dotplot rendered with warnings" },
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(DialogContentText, null, "Found warnings while rendering the dotplot. This is often due to out-of-bound features that may indicate the wrong assemblies are being used. Check that the query and target are configured correctly, and that the right assemblies are being compared."),
-            React.createElement("div", { style: { height: 600, width: '100%', overflow: 'auto' } },
-                React.createElement(DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true })))));
+    return (_jsx(Dialog, { open: true, onClose: handleClose, maxWidth: "xl", title: "Dotplot rendered with warnings", children: _jsxs(DialogContent, { className: classes.content, children: [_jsx(DialogContentText, { children: "Found warnings while rendering the dotplot. This is often due to out-of-bound features that may indicate the wrong assemblies are being used. Check that the query and target are configured correctly, and that the right assemblies are being compared." }), _jsx("div", { style: { height: 600, width: '100%', overflow: 'auto' }, children: _jsx(DataGrid, { rows: rows, columns: columns, disableRowSelectionOnClick: true, rowHeight: 25, disableColumnMenu: true }) })] }) }));
 });
 export default WarningDialog;

package/esm/DotplotView/model.d.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import type { ImportFormSyntenyTrack } from './types';
 import type PluginManager from '@jbrowse/core/PluginManager';
 import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
 import type { Instance, SnapshotIn } from 'mobx-state-tree';
@@ -214,6 +215,11 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     wheelMode: string;
     borderX: number;
     borderY: number;
+    importFormSyntenyTrackSelections: import("mobx").IObservableArray<ImportFormSyntenyTrack>;
+} & {
+    importFormRemoveRow(idx: number): void;
+    clearImportFormSyntenyTracks(): void;
+    setImportFormSyntenyTrack(arg: number, val: ImportFormSyntenyTrack): void;
 } & {
     readonly width: number;
 } & {
@@ -410,14 +416,10 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
 } & {
     menuItems(): ({
         label: string;
-        onClick: () => void;
         icon: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
             muiName: string;
         };
-    } | {
-        label: string;
         onClick: () => void;
-        icon?: undefined;
     } | {
         label: string;
         onClick: () => import("@jbrowse/core/util").Widget;

package/esm/DotplotView/model.js

@@ -2,13 +2,13 @@ import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import { getSession, getTickDisplayStr, isSessionModelWithWidgets, localStorageGetItem, max, measureText, minmax, } from '@jbrowse/core/util';
+import { getSession, getTickDisplayStr, isSessionModelWithWidgets, localStorageGetBoolean, localStorageGetItem, max, measureText, minmax, } from '@jbrowse/core/util';
 import { getParentRenderProps } from '@jbrowse/core/util/tracks';
 import { ElementId } from '@jbrowse/core/util/types/mst';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
 import { saveAs } from 'file-saver';
-import { autorun, transaction } from 'mobx';
+import { autorun, observable, transaction } from 'mobx';
 import { addDisposer, cast, getParent, getRoot, getSnapshot, resolveIdentifier, types, } from 'mobx-state-tree';
 import { Dotplot1DView, DotplotHView, DotplotVView } from './1dview';
 import { getBlockLabelKeysToHide, makeTicks } from './components/util';
@@ -48,10 +48,22 @@ export default function stateModelFactory(pm) {
         volatileWidth: undefined,
         volatileError: undefined,
         cursorMode: localStorageGetItem('dotplot-cursorMode') || 'crosshair',
-        showPanButtons: Boolean(JSON.parse(localStorageGetItem('dotplot-showPanbuttons') || 'true')),
+        showPanButtons: localStorageGetBoolean('dotplot-showPanbuttons', true),
         wheelMode: localStorageGetItem('dotplot-wheelMode') || 'zoom',
         borderX: 100,
         borderY: 100,
+        importFormSyntenyTrackSelections: observable.array(),
+    }))
+        .actions(self => ({
+        importFormRemoveRow(idx) {
+            self.importFormSyntenyTrackSelections.splice(idx, 1);
+        },
+        clearImportFormSyntenyTracks() {
+            self.importFormSyntenyTrackSelections.clear();
+        },
+        setImportFormSyntenyTrack(arg, val) {
+            self.importFormSyntenyTrackSelections[arg] = val;
+        },
     }))
         .views(self => ({
         get width() {
@@ -309,7 +321,7 @@ export default function stateModelFactory(pm) {
         beforeDestroy() {
             var _a;
             const session = getSession(self);
-            for (const name in self.assemblyNames) {
+            for (const name of self.assemblyNames) {
                 (_a = session.removeTemporaryAssembly) === null || _a === void 0 ? void 0 : _a.call(session, name);
             }
         },
@@ -389,31 +401,16 @@ export default function stateModelFactory(pm) {
             return [
                 {
                     label: 'Return to import form',
+                    icon: FolderOpenIcon,
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
                             ReturnToImportFormDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
-                    icon: FolderOpenIcon,
-                },
-                {
-                    label: 'Square view - same bp per pixel',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Rectangular view - same total bp',
-                    onClick: () => {
-                        self.squareView();
-                    },
-                },
-                {
-                    label: 'Show all regions',
-                    onClick: () => {
-                        self.showAllRegions();
-                    },
                 },
                 {
                     label: 'Export SVG',
@@ -421,7 +418,10 @@ export default function stateModelFactory(pm) {
                     onClick: () => {
                         getSession(self).queueDialog(handleClose => [
                             ExportSvgDialog,
-                            { model: self, handleClose },
+                            {
+                                model: self,
+                                handleClose,
+                            },
                         ]);
                     },
                 },

package/esm/DotplotView/svgcomponents/SVGBackground.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 export default function SVGBackground({ width, height, }: {
     width: number;
     height: number;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/esm/DotplotView/svgcomponents/SVGBackground.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { stripAlpha } from '@jbrowse/core/util';
 import { useTheme } from '@mui/material';
 export default function SVGBackground({ width, height, }) {
     const theme = useTheme();
-    return (React.createElement("rect", { x: 0, y: 0, width: width, height: height, fill: stripAlpha(theme.palette.background.default) }));
+    return (_jsx("rect", { x: 0, y: 0, width: width, height: height, fill: stripAlpha(theme.palette.background.default) }));
 }

package/esm/DotplotView/svgcomponents/SVGDotplotView.js

@@ -1,9 +1,8 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { getSession, renderToStaticMarkup } from '@jbrowse/core/util';
 import { ThemeProvider } from '@mui/material';
 import { when } from 'mobx';
-import { getRoot } from 'mobx-state-tree';
 import SVGBackground from './SVGBackground';
 import { HorizontalAxisRaw, VerticalAxisRaw } from '../components/Axes';
 import { GridRaw } from '../components/Grid';
@@ -11,7 +10,6 @@ export async function renderToSvg(model, opts) {
     var _a;
     await when(() => model.initialized);
     const { themeName = 'default', Wrapper = ({ children }) => children } = opts;
-    const { createRootFn } = getRoot(model);
     const session = getSession(model);
     const theme = (_a = session.allThemes) === null || _a === void 0 ? void 0 : _a.call(session)[themeName];
     const { width, borderX, viewWidth, viewHeight, tracks, height } = model;
@@ -22,17 +20,5 @@ export async function renderToSvg(model, opts) {
         return { track, result: await display.renderSvg({ ...opts, theme }) };
     }));
     const w = width + shift * 2;
-    return renderToStaticMarkup(React.createElement(ThemeProvider, { theme: createJBrowseTheme(theme) },
-        React.createElement(Wrapper, null,
-            React.createElement("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString() },
-                React.createElement(SVGBackground, { width: w, height: height }),
-                React.createElement(VerticalAxisRaw, { model: model }),
-                React.createElement("g", { transform: `translate(${borderX} 0)` },
-                    React.createElement(GridRaw, { model: model }),
-                    React.createElement("defs", null,
-                        React.createElement("clipPath", { id: "clip-ruler" },
-                            React.createElement("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }))),
-                    React.createElement("g", { clipPath: "url(#clip-ruler)" }, displayResults.map(({ result }, i) => (React.createElement("g", { key: i }, result))))),
-                React.createElement("g", { transform: `translate(${borderX} ${viewHeight})` },
-                    React.createElement(HorizontalAxisRaw, { model: model }))))), createRootFn);
+    return renderToStaticMarkup(_jsx(ThemeProvider, { theme: createJBrowseTheme(theme), children: _jsx(Wrapper, { children: _jsxs("svg", { width: width, height: height, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: [0, 0, w, height].toString(), children: [_jsx(SVGBackground, { width: w, height: height }), _jsx(VerticalAxisRaw, { model: model }), _jsxs("g", { transform: `translate(${borderX} 0)`, children: [_jsx(GridRaw, { model: model }), _jsx("defs", { children: _jsx("clipPath", { id: "clip-ruler", children: _jsx("rect", { x: 0, y: 0, width: viewWidth, height: viewHeight }) }) }), _jsx("g", { clipPath: "url(#clip-ruler)", children: displayResults.map(({ result }, i) => (_jsx("g", { children: result }, i))) })] }), _jsx("g", { transform: `translate(${borderX} ${viewHeight})`, children: _jsx(HorizontalAxisRaw, { model: model }) })] }) }) }));
 }

package/esm/DotplotView/types.d.ts

@@ -0,0 +1,12 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { SnapshotIn } from 'mobx-state-tree';
+export type Conf = SnapshotIn<AnyConfigurationModel>;
+export type ImportFormSyntenyTrack = {
+    type: 'preConfigured';
+    value: string;
+} | {
+    type: 'userOpened';
+    value: Conf;
+} | {
+    type: 'none';
+};

package/esm/DotplotView/types.js

@@ -0,0 +1 @@
+export {};

package/esm/ServerSideRenderedBlockContent.d.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties } from 'react';
-import React from 'react';
 declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
     model: {
         error?: unknown;
@@ -9,5 +8,5 @@ declare const ServerSideRenderedDotplotContent: ({ model, style, }: {
         reactElement?: React.ReactElement;
     };
     style: CSSProperties;
-}) => React.JSX.Element | null;
+}) => import("react/jsx-runtime").JSX.Element | null;
 export default ServerSideRenderedDotplotContent;

package/esm/ServerSideRenderedBlockContent.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { LoadingEllipses } from '@jbrowse/core/ui';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
@@ -34,31 +35,28 @@ function LoadingMessage() {
             clearTimeout(timeout);
         };
     }, []);
-    return shown ? (React.createElement("div", { className: classes.loading },
-        React.createElement(LoadingEllipses, null))) : null;
+    return shown ? (_jsx("div", { className: classes.loading, children: _jsx(LoadingEllipses, {}) })) : null;
 }
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.blockMessage },
-        React.createElement(Typography, null, messageText)));
+    return (_jsx("div", { className: classes.blockMessage, children: _jsx(Typography, { children: messageText }) }));
 }
 function BlockError({ error }) {
     const { classes } = useStyles();
-    return (React.createElement("div", { className: classes.blockError },
-        React.createElement(Typography, null, `${error}`)));
+    return (_jsx("div", { className: classes.blockError, children: _jsx(Typography, { children: `${error}` }) }));
 }
 const ServerSideRenderedDotplotContent = observer(function ({ model, style, }) {
     if (model.error) {
-        return React.createElement(BlockError, { error: model.error, "data-testid": "reload_button" });
+        return _jsx(BlockError, { error: model.error, "data-testid": "reload_button" });
     }
     else if (model.message) {
-        return React.createElement(BlockMessage, { messageText: model.message });
+        return _jsx(BlockMessage, { messageText: model.message });
     }
     else if (!model.filled) {
-        return React.createElement(LoadingMessage, null);
+        return _jsx(LoadingMessage, {});
     }
     else if (model.shouldDisplay) {
-        return React.createElement("div", { style: style }, model.reactElement);
+        return _jsx("div", { style: style, children: model.reactElement });
     }
     return null;
 });

package/esm/ServerSideSyntenyRendering.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface ModelType {
     imageData: string;
     style: Record<string, string>;
@@ -10,5 +9,5 @@ interface ModelType {
 }
 declare const ServerSideSyntenyRendering: ({ model, }: {
     model: ModelType;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default ServerSideSyntenyRendering;

package/esm/ServerSideSyntenyRendering.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { drawImageOntoCanvasContext } from '@jbrowse/core/util/offscreenCanvasPonyfill';
 import { observer } from 'mobx-react';
 const ServerSideSyntenyRendering = observer(function ({ model, }) {
@@ -15,6 +16,6 @@ const ServerSideSyntenyRendering = observer(function ({ model, }) {
         drawImageOntoCanvasContext(imageData, context);
         setDone(true);
     }, [imageData]);
-    return (React.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+    return (_jsx("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 });
 export default ServerSideSyntenyRendering;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-dotplot-view",
-  "version": "2.18.0",
+  "version": "3.0.1",
   "description": "JBrowse 2 dotplot view",
   "keywords": [
     "jbrowse",
@@ -36,28 +36,28 @@
     "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
+    "@jbrowse/core": "^3.0.1",
+    "@jbrowse/plugin-alignments": "^3.0.1",
     "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "@types/file-saver": "^2.0.1",
-    "file-saver": "^2.0.0"
-  },
-  "peerDependencies": {
-    "@jbrowse/core": "^2.0.0",
-    "@jbrowse/plugin-alignments": "^2.0.0",
-    "@mui/material": "^6.0.0",
+    "file-saver": "^2.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
     "rxjs": "^7.0.0",
     "tss-react": "^4.0.0"
   },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
+  "gitHead": "aa2f1d1a89d2361c7fd1a93fe29506fa4554f5cc"
 }

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

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