@jbrowse/plugin-dotplot-view 2.13.1 → 2.15.0

package/dist/LaunchDotplotView.js

@@ -18,7 +18,9 @@ function LaunchDotplotView(pluginManager) {
             });
             // http://localhost:3000/?config=test_data%2Fvolvox%2Fconfig.json&session=spec-{"views":[{"type":"DotplotView","views":[{"assembly":"volvox"},{"assembly":"volvox"}],"tracks":["volvox_fake_synteny"]}]}
             const idsNotFound = [];
-            tracks.forEach(track => tryTrack(model, track, idsNotFound));
+            tracks.forEach(track => {
+                tryTrack(model, track, idsNotFound);
+            });
             if (idsNotFound.length) {
                 throw new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`);
             }
@@ -34,7 +36,7 @@ function tryTrack(model, trackId, idsNotFound) {
         model.showTrack(trackId);
     }
     catch (e) {
-        if (`${e}`.match('Could not resolve identifier')) {
+        if (/Could not resolve identifier/.exec(`${e}`)) {
             idsNotFound.push(trackId);
         }
         else {

package/dist/ServerSideRenderedBlockContent.js

@@ -53,8 +53,12 @@ function LoadingMessage() {
     const [shown, setShown] = (0, react_1.useState)(false);
     const { classes } = useStyles();
     (0, react_1.useEffect)(() => {
-        const timeout = setTimeout(() => setShown(true), 300);
-        return () => clearTimeout(timeout);
+        const timeout = setTimeout(() => {
+            setShown(true);
+        }, 300);
+        return () => {
+            clearTimeout(timeout);
+        };
     }, []);
     return shown ? (react_1.default.createElement("div", { className: classes.loading },
         react_1.default.createElement(ui_1.LoadingEllipses, null))) : null;
@@ -62,7 +66,7 @@ function LoadingMessage() {
 function BlockMessage({ messageText }) {
     const { classes } = useStyles();
     return (react_1.default.createElement("div", { className: classes.blockMessage },
-        react_1.default.createElement(material_1.Typography, null, `${messageText}`)));
+        react_1.default.createElement(material_1.Typography, null, messageText)));
 }
 function BlockError({ error }) {
     const { classes } = useStyles();

package/dist/ServerSideSyntenyRendering.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 /**
- * A block whose content is rendered outside of the main thread and hydrated by this
- * component.
+ * A block whose content is rendered outside of the main thread and hydrated by
+ * this component.
  */
 interface ModelType {
     imageData: string;

package/dist/ServerSideSyntenyRendering.js

@@ -39,7 +39,7 @@ const ServerSideSyntenyRendering = (0, mobx_react_1.observer)(function ({ model,
         const context = canvas.getContext('2d');
         (0, offscreenCanvasPonyfill_1.drawImageOntoCanvasContext)(imageData, context);
         setDone(true);
-    }, [height, imageData, width]);
+    }, [imageData]);
     return (react_1.default.createElement("canvas", { "data-testid": `prerendered_canvas${done ? '_done' : ''}`, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 });
 exports.default = ServerSideSyntenyRendering;

package/esm/ComparativeRenderer/index.d.ts

@@ -2,11 +2,11 @@ import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
 import ComparativeRenderer, { RenderArgs as ComparativeRenderArgs, RenderArgsSerialized as ComparativeRenderArgsSerialized, RenderResults, ResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
 interface RenderArgs extends ComparativeRenderArgs {
-    adapterConfig: {};
+    adapterConfig: Record<string, unknown>;
     rendererType: string;
 }
 interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
-    adapterConfig: {};
+    adapterConfig: Record<string, unknown>;
     rendererType: string;
 }
 /**

package/esm/DotplotDisplay/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType';

package/esm/DotplotDisplay/stateModelFactory.d.ts

@@ -43,7 +43,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             error: unknown;
             message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-        onHorizontalScroll?: Function;
+        onHorizontalScroll?: () => void;
         blockState?: Record<string, any>;
     }>;
     readonly DisplayBlurb: React.FC<{
@@ -56,9 +56,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
             error: unknown;
             message: string | undefined;
         } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
-            id: import("mobx-state-tree" /**
-             * #method
-             */).IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
             type: import("mobx-state-tree").ISimpleType<string>;
             rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
         }, {
@@ -107,7 +105,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
      * #method
      */
     renderSvg(opts: ExportSvgOptions & {
-        theme: ThemeOptions;
+        theme?: ThemeOptions;
     }): Promise<React.JSX.Element | null>;
 } & {
     afterAttach(): void;

package/esm/DotplotDisplay/stateModelFactory.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { types } from 'mobx-state-tree';
 import { getConf, ConfigurationReference, } from '@jbrowse/core/configuration';

package/esm/DotplotReadVsRef/index.js

@@ -19,7 +19,9 @@ export default function DotplotReadVsRefMenuItem(pluginManager) {
                                         {
                                             label: 'Dotplot of read vs ref',
                                             icon: AddIcon,
-                                            onClick: () => onClick(feature, self),
+                                            onClick: () => {
+                                                onClick(feature, self);
+                                            },
                                         },
                                     ]
                                     : []),

package/esm/DotplotRenderer/ComparativeRenderRpc.d.ts

@@ -2,11 +2,11 @@ import RpcMethodType from '@jbrowse/core/pluggableElementTypes/RpcMethodType';
 import ComparativeRenderer, { RenderArgs as ComparativeRenderArgs, RenderArgsSerialized as ComparativeRenderArgsSerialized, RenderResults, ResultsSerialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 import { RemoteAbortSignal } from '@jbrowse/core/rpc/remoteAbortSignals';
 interface RenderArgs extends ComparativeRenderArgs {
-    adapterConfig: {};
+    adapterConfig: Record<string, unknown>;
     rendererType: string;
 }
 interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
-    adapterConfig: {};
+    adapterConfig: Record<string, unknown>;
     rendererType: string;
 }
 /**

package/esm/DotplotRenderer/DotplotRenderer.d.ts

@@ -3,6 +3,7 @@ import { Region } from '@jbrowse/core/util';
 import ComparativeRenderer, { RenderArgsDeserialized, RenderArgs } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 import { Dotplot1DViewModel } from '../DotplotView/model';
 export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
+    adapterConfig: AnyConfigurationModel;
     height: number;
     width: number;
     highResolutionScaling: number;

package/esm/DotplotRenderer/DotplotRenderer.js

@@ -53,7 +53,8 @@ export default class DotplotRenderer extends ComparativeRenderer {
         const thresholds = readConfObject(config, 'thresholds');
         const palette = readConfObject(config, 'thresholdsPalette');
         const isCallback = config.color.isCallback;
-        const [hview, vview] = views;
+        const hview = views[0];
+        const vview = views[1];
         const db1 = (_a = hview.dynamicBlocks.contentBlocks[0]) === null || _a === void 0 ? void 0 : _a.offsetPx;
         const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
         const warnings = [];
@@ -134,12 +135,12 @@ export default class DotplotRenderer extends ComparativeRenderer {
             const refName = feature.get('refName');
             const mate = feature.get('mate');
             const mateRef = mate.refName;
-            let r;
+            let r = 'black';
             if (colorBy === 'identity') {
                 const identity = feature.get('identity');
                 for (let i = 0; i < thresholds.length; i++) {
                     if (identity > +thresholds[i]) {
-                        r = palette[i];
+                        r = palette[i] || 'black';
                         break;
                     }
                 }

package/esm/DotplotView/1dview.js

@@ -70,7 +70,6 @@ const Dotplot1DView = Base1DView.extend(self => {
 const DotplotHView = Dotplot1DView.extend(self => ({
     views: {
         get width() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return getParent(self).viewWidth;
         },
     },
@@ -78,7 +77,6 @@ const DotplotHView = Dotplot1DView.extend(self => ({
 const DotplotVView = Dotplot1DView.extend(self => ({
     views: {
         get width() {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return getParent(self).viewHeight;
         },
     },

package/esm/DotplotView/components/Axes.js

@@ -64,7 +64,7 @@ export const HorizontalAxisRaw = observer(function ({ model, }) {
         ticks.map(([tick, x]) => x > 0 && x < width ? (React.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, ...getFillProps(theme.palette.text.primary) })) : null),
         ticks
             .filter(t => t[0].type === 'major')
-            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},${0})`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
+            .map(([tick, x]) => x > 10 && x < width ? (React.createElement("text", { x: x - 7, y: 0, transform: `rotate(${htextRotation},${x},0)`, key: `text-${JSON.stringify(tick)}`, fontSize: 11, dominantBaseline: "middle", textAnchor: "end", ...getFillProps(theme.palette.text.primary) }, getTickDisplayStr(tick.base + 1, bpPerPx))) : null),
         React.createElement("text", { y: borderY - 12, x: (viewWidth - borderX) / 2, textAnchor: "middle", fontSize: 11, dominantBaseline: "hanging", ...getFillProps(theme.palette.text.primary) }, hview.assemblyNames.join(','))));
 });
 export const VerticalAxis = observer(function ({ model, }) {

package/esm/DotplotView/components/DotplotControls.js

@@ -18,25 +18,35 @@ const DotplotControls = observer(function ({ model, }) {
             React.createElement(TrackSelectorIcon, null)),
         React.createElement(CascadingMenuButton, { menuItems: [
                 {
-                    onClick: () => model.squareView(),
+                    onClick: () => {
+                        model.squareView();
+                    },
                     label: 'Square view - same base pairs per pixel',
                 },
                 {
-                    onClick: () => model.squareViewProportional(),
+                    onClick: () => {
+                        model.squareViewProportional();
+                    },
                     label: 'Rectanglularize view - same total bp',
                 },
                 {
-                    onClick: () => model.showAllRegions(),
+                    onClick: () => {
+                        model.showAllRegions();
+                    },
                     label: 'Show all regions',
                 },
                 {
-                    onClick: () => model.setDrawCigar(!model.drawCigar),
+                    onClick: () => {
+                        model.setDrawCigar(!model.drawCigar);
+                    },
                     type: 'checkbox',
                     label: 'Draw CIGAR',
                     checked: model.drawCigar,
                 },
                 {
-                    onClick: () => model.setShowPanButtons(!model.showPanButtons),
+                    onClick: () => {
+                        model.setShowPanButtons(!model.showPanButtons);
+                    },
                     label: 'Show pan buttons',
                     type: 'checkbox',
                     checked: model.showPanButtons,
@@ -45,14 +55,18 @@ const DotplotControls = observer(function ({ model, }) {
                     label: 'Click and drag mode',
                     subMenu: [
                         {
-                            onClick: () => model.setCursorMode('move'),
+                            onClick: () => {
+                                model.setCursorMode('move');
+                            },
                             label: 'Pan by default, select region when ctrl/cmd key is held',
                             icon: CursorMove,
                             type: 'radio',
                             checked: model.cursorMode === 'move',
                         },
                         {
-                            onClick: () => model.setCursorMode('crosshair'),
+                            onClick: () => {
+                                model.setCursorMode('crosshair');
+                            },
                             label: 'Select region by default, pan when ctrl/cmd key is held',
                             icon: CursorMouse,
                             type: 'radio',
@@ -64,19 +78,25 @@ const DotplotControls = observer(function ({ model, }) {
                     label: 'Wheel scroll mode',
                     subMenu: [
                         {
-                            onClick: () => model.setWheelMode('pan'),
+                            onClick: () => {
+                                model.setWheelMode('pan');
+                            },
                             label: 'Pans view',
                             type: 'radio',
                             checked: model.wheelMode === 'pan',
                         },
                         {
-                            onClick: () => model.setWheelMode('zoom'),
+                            onClick: () => {
+                                model.setWheelMode('zoom');
+                            },
                             label: 'Zooms view',
                             type: 'radio',
                             checked: model.wheelMode === 'zoom',
                         },
                         {
-                            onClick: () => model.setWheelMode('none'),
+                            onClick: () => {
+                                model.setWheelMode('none');
+                            },
                             label: 'Disable',
                             type: 'radio',
                             checked: model.wheelMode === 'none',

package/esm/DotplotView/components/DotplotTooltip.js

@@ -40,7 +40,7 @@ export const TooltipWhereMouseovered = observer(function ({ model, mouserect, mo
         }
         : undefined);
     const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return mouserect ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
                 ...floatingStyles,
@@ -64,7 +64,7 @@ export const TooltipWhereClicked = observer(function ({ model, mousedown, moused
     });
     const clientPoint = useClientPoint(context, { x, y });
     const { getFloatingProps } = useInteractions([clientPoint]);
-    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
     return mousedown && Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 ? (React.createElement(Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         React.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
                 ...floatingStyles,

package/esm/DotplotView/components/DotplotView.js

@@ -122,7 +122,9 @@ const DotplotViewInternal = observer(function ({ model, }) {
         if (ref.current) {
             const curr = ref.current;
             curr.addEventListener('wheel', onWheel);
-            return () => curr.removeEventListener('wheel', onWheel);
+            return () => {
+                curr.removeEventListener('wheel', onWheel);
+            };
         }
         return () => { };
     }, [hview, vview, wheelMode, mousecurr, rootRect.height]);
@@ -135,17 +137,10 @@ const DotplotViewInternal = observer(function ({ model, }) {
             }
         }
         window.addEventListener('mousemove', globalMouseMove);
-        return () => window.removeEventListener('mousemove', globalMouseMove);
-    }, [
-        validPan,
-        mousecurrClient,
-        mousedownClient,
-        cursorMode,
-        ctrlKeyWasUsed,
-        mouseupClient,
-        hview,
-        vview,
-    ]);
+        return () => {
+            window.removeEventListener('mousemove', globalMouseMove);
+        };
+    }, [validPan, mousecurrClient, mousedownClient, mouseupClient, hview, vview]);
     useEffect(() => {
         function globalCtrlKeyDown(event) {
             if (event.metaKey || event.ctrlKey) {
@@ -181,19 +176,8 @@ const DotplotViewInternal = observer(function ({ model, }) {
                 window.removeEventListener('mouseup', globalMouseUp, true);
             };
         }
-        else {
-            return () => { };
-        }
-    }, [
-        validSelect,
-        mousedown,
-        mousecurr,
-        mouseup,
-        xdistance,
-        ydistance,
-        ctrlKeyWasUsed,
-        cursorMode,
-    ]);
+        return () => { };
+    }, [validSelect, mousedown, mouseup, xdistance, ydistance]);
     return (React.createElement("div", null,
         React.createElement(Header, { model: model, selection: !validSelect || !(mousedown && mouserect)
                 ? undefined
@@ -201,7 +185,11 @@ const DotplotViewInternal = observer(function ({ model, }) {
                     width: Math.abs(xdistance),
                     height: Math.abs(ydistance),
                 } }),
-        React.createElement("div", { ref: root, className: classes.root, onMouseLeave: () => setMouseOvered(false), onMouseEnter: () => setMouseOvered(true) },
+        React.createElement("div", { ref: root, className: classes.root, onMouseLeave: () => {
+                setMouseOvered(false);
+            }, onMouseEnter: () => {
+                setMouseOvered(true);
+            } },
             React.createElement("div", { className: classes.container },
                 React.createElement(VerticalAxis, { model: model }),
                 React.createElement(HorizontalAxis, { model: model }),
@@ -255,7 +243,7 @@ const DotplotViewInternal = observer(function ({ model, }) {
                     ] })),
             React.createElement(ResizeHandle, { onDrag: n => model.setHeight(model.height + n), className: classes.resizeHandle }))));
 });
-const DotplotView = observer(({ model }) => {
+const DotplotView = observer(function ({ model }) {
     const { initialized, loading, error } = model;
     if ((!initialized && !loading) || error) {
         return React.createElement(ImportForm, { model: model });

package/esm/DotplotView/components/DotplotWarnings.js

@@ -10,8 +10,14 @@ const DotplotWarnings = observer(function ({ model, }) {
     return trackWarnings.length && !hide ? (React.createElement(Alert, { severity: "warning" },
         "Warnings during render",
         ' ',
-        React.createElement(Button, { onClick: () => setShown(true) }, "More info"),
-        shown ? (React.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => setShown(false) })) : null,
-        React.createElement(Button, { variant: "contained", onClick: () => setHide(true) }, "Dismiss"))) : null;
+        React.createElement(Button, { onClick: () => {
+                setShown(true);
+            } }, "More info"),
+        shown ? (React.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => {
+                setShown(false);
+            } })) : null,
+        React.createElement(Button, { variant: "contained", onClick: () => {
+                setHide(true);
+            } }, "Dismiss"))) : null;
 });
 export default DotplotWarnings;

package/esm/DotplotView/components/ExportSvgDialog.js

@@ -12,7 +12,7 @@ function TextField2({ children, ...rest }) {
         React.createElement(TextField, { ...rest }, children)));
 }
 function useSvgLocal(key, val) {
-    return useLocalStorage('svg-' + key, val);
+    return useLocalStorage(`svg-${key}`, val);
 }
 export default function ExportSvgDialog({ model, handleClose, }) {
     const session = getSession(model);
@@ -25,13 +25,21 @@ export default function ExportSvgDialog({ model, handleClose, }) {
     return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Export SVG" },
         React.createElement(DialogContent, null,
             error ? (React.createElement(ErrorMessage, { error: error })) : loading ? (React.createElement(LoadingMessage, null)) : null,
-            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => setFilename(event.target.value) }),
-            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => setThemeName(event.target.value) }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
+            React.createElement(TextField2, { helperText: "filename", value: filename, onChange: event => {
+                    setFilename(event.target.value);
+                } }),
+            session.allThemes ? (React.createElement(TextField2, { select: true, label: "Theme", value: themeName, onChange: event => {
+                    setThemeName(event.target.value);
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 
             // @ts-expect-error
             val.name || '(Unknown name)'))))) : null,
-            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => setRasterizeLayers(val => !val) }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
+            offscreenCanvas ? (React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: rasterizeLayers, onChange: () => {
+                        setRasterizeLayers(val => !val);
+                    } }), label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (React.createElement(Typography, null, "Note: rasterizing layers not yet supported in this browser, so SVG size may be large"))),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => handleClose() }, "Cancel"),
+            React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
+                    handleClose();
+                } }, "Cancel"),
             React.createElement(Button, { variant: "contained", color: "primary", type: "submit", onClick: async () => {
                     setLoading(true);
                     setError(undefined);

package/esm/DotplotView/components/Grid.js

@@ -21,8 +21,8 @@ export const GridRaw = observer(function ({ model, children, }) {
     const ry = Math.max(viewHeight - vtop, 0);
     const w = Math.min(htop - hbottom, viewWidth);
     const h = Math.min(viewHeight - vbottom - ry, viewHeight);
-    let lastx = Infinity;
-    let lasty = Infinity;
+    let lastx = Number.POSITIVE_INFINITY;
+    let lasty = Number.POSITIVE_INFINITY;
     return (React.createElement(React.Fragment, null,
         React.createElement("rect", { x: rx, y: ry, width: w, height: h, ...getFillProps(theme.palette.background.default) }),
         React.createElement("g", null,

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

@@ -105,7 +105,9 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
     return (React.createElement(Paper, { style: { padding: 12 } },
         error ? React.createElement(ErrorMessage, { error: error }) : null,
         React.createElement(Typography, { style: { textAlign: 'center' } }, "Add a .paf, .out (MashMap), .delta (Mummer), .chain, .anchors or .anchors.simple (MCScan) file to view in the dotplot. These file types can also be gzipped. The first assembly should be the query sequence (e.g. left column of the PAF) and the second assembly should be the target sequence (e.g. right column of the PAF)"),
-        React.createElement(RadioGroup, { value: radioOption, onChange: event => setValue(event.target.value) },
+        React.createElement(RadioGroup, { value: radioOption, onChange: event => {
+                setValue(event.target.value);
+            } },
             React.createElement(Grid, { container: true, justifyContent: "center" },
                 React.createElement(Grid, { item: true },
                     React.createElement(FormControlLabel, { value: ".paf", control: React.createElement(Radio, null), label: ".paf" })),
@@ -129,10 +131,18 @@ const OpenTrack = observer(({ assembly1, assembly2, setSessionTrackData, }) => {
                     React.createElement("a", { href: "https://github.com/tanghaibao/jcvi/wiki/MCscan-(Python-version)" }, "(more info)")),
                 React.createElement("div", { style: { display: 'flex' } },
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => setFileLocation(loc) })),
+                        React.createElement(FileSelector, { name: ".anchors file", description: "", location: fileLocation, setLocation: loc => {
+                                setFileLocation(loc);
+                            } })),
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => setBed1Location(loc) })),
+                        React.createElement(FileSelector, { name: "genome 1 .bed (left column of anchors file)", description: "", location: bed1Location, setLocation: loc => {
+                                setBed1Location(loc);
+                            } })),
                     React.createElement("div", null,
-                        React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => setBed2Location(loc) }))))) : (React.createElement(FileSelector, { name: value ? value + ' location' : '', description: "", location: fileLocation, setLocation: loc => setFileLocation(loc) }))))));
+                        React.createElement(FileSelector, { name: "genome 2 .bed (right column of anchors file)", description: "", location: bed2Location, setLocation: loc => {
+                                setBed2Location(loc);
+                            } }))))) : (React.createElement(FileSelector, { name: value ? `${value} location` : '', description: "", location: fileLocation, setLocation: loc => {
+                    setFileLocation(loc);
+                } }))))));
 });
 export default OpenTrack;

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

@@ -41,6 +41,8 @@ const Selector = observer(({ model, assembly1, assembly2, setShowTrackId, }) =>
             React.createElement("i", null, "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 ",
             React.createElement(TrackSelectorIcon, null)),
-        filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => setValue(event.target.value) }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
+        filteredTracks.length ? (React.createElement(Select, { value: value, onChange: event => {
+                setValue(event.target.value);
+            } }, filteredTracks.map(track => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, getTrackName(track, session)))))) : (React.createElement(ErrorMessage, { error: `No synteny tracks found for ${assembly1},${assembly2}` }))));
 });
 export default Selector;

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

@@ -28,7 +28,9 @@ function TrackSelector({ setSessionTrackData, setShowTrackId, sessionTrackData,
     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(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" }))),
@@ -81,9 +83,13 @@ const DotplotImportForm = observer(({ model }) => {
                     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(AssemblySelector, { selected: assembly1, onChange: val => {
+                                    setAssembly1(val);
+                                }, session: session })),
                         React.createElement(Grid, { item: true },
-                            React.createElement(AssemblySelector, { selected: assembly2, onChange: val => setAssembly2(val), session: session })),
+                            React.createElement(AssemblySelector, { selected: assembly2, 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"))))),

package/esm/DotplotView/components/WarningDialog.js

@@ -17,9 +17,10 @@ const WarningDialog = observer(function WarningDialog({ trackWarnings, handleClo
     for (let i = 0; i < trackWarnings.length; i++) {
         const track = trackWarnings[i];
         const name = getConf(track, 'name');
-        for (let j = 0; j < track.displays[0].warnings.length; j++) {
-            const warning = track.displays[0].warnings[j];
-            rows.push({ name, ...warning, id: i + '_' + j });
+        const d = track.displays[0];
+        for (let j = 0; j < d.warnings.length; j++) {
+            const warning = d.warnings[j];
+            rows.push({ name, ...warning, id: `${i}_${j}` });
         }
     }
     const columns = [

package/esm/DotplotView/components/util.js

@@ -3,7 +3,7 @@ export function locstr(px, view, includeAsm = true) {
     const coord = Math.floor(start + offset);
     return oob
         ? 'out of bounds'
-        : `${includeAsm ? '{' + assemblyName + '}' : ''}${refName}:${coord.toLocaleString('en-US')}`;
+        : `${includeAsm ? `{${assemblyName}}` : ''}${refName}:${coord.toLocaleString('en-US')}`;
 }
 export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
     const blockLabelKeysToHide = new Set();
@@ -33,7 +33,9 @@ export function getBlockLabelKeysToHide(blocks, length, viewOffsetPx) {
 export function chooseGridPitch(scale, minMajorPitchPx, minMinorPitchPx) {
     scale = Math.abs(scale);
     const minMajorPitchBp = minMajorPitchPx * scale;
-    const majorMagnitude = Number.parseInt(Number(minMajorPitchBp).toExponential().split(/e/i)[1], 10);
+    const majorMagnitude = +Number(minMajorPitchBp)
+        .toExponential()
+        .split(/e/i)[1];
     let majorPitch = 10 ** majorMagnitude;
     while (majorPitch < minMajorPitchBp) {
         majorPitch *= 2;

package/esm/DotplotView/model.d.ts

@@ -448,12 +448,6 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
      * #action
      */
     setError(e: unknown): void;
-    /**
-     * #action
-     * removes the view itself from the state tree entirely by calling the
-     * parent removeView
-     */
-    closeView(): void;
     /**
      * #action
      */
@@ -552,7 +546,7 @@ export default function stateModelFactory(pm: PluginManager): import("mobx-state
     /**
      * #getter
      */
-    readonly error: {};
+    readonly error: unknown;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 export type DotplotViewStateModel = ReturnType<typeof stateModelFactory>;
 export type DotplotViewModel = Instance<DotplotViewStateModel>;