@jbrowse/plugin-dotplot-view 2.17.0 → 2.18.0

package/esm/DotplotRenderer/configSchema.js

@@ -1,47 +1,28 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
-/**
- * #config DotplotRenderer
- * #category renderer
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+function x() { }
 export default ConfigurationSchema('DotplotRenderer', {
-    /**
-     * #slot
-     */
     color: {
         type: 'color',
         description: 'the color of each feature in a synteny, used with colorBy:default',
         defaultValue: '#f0f',
         contextVariable: ['feature'],
     },
-    /**
-     * #slot
-     */
     posColor: {
         type: 'color',
         description: 'the color for forward alignments, used with colorBy:strand',
         defaultValue: 'blue',
     },
-    /**
-     * #slot
-     */
     negColor: {
         type: 'color',
         description: 'the color for reverse alignments, used with colorBy:strand',
         defaultValue: 'red',
     },
-    /**
-     * #slot
-     */
     lineWidth: {
         type: 'number',
         description: 'width of the lines to be drawn',
-        defaultValue: 2.5, // 2.5 is similar to D-GENIES
+        defaultValue: 2.5,
     },
-    /**
-     * #slot
-     */
     colorBy: {
         type: 'stringEnum',
         model: types.enumeration('colorBy', [
@@ -61,17 +42,11 @@ export default ConfigurationSchema('DotplotRenderer', {
 </ul>`,
         defaultValue: 'default',
     },
-    /**
-     * #slot
-     */
     thresholdsPalette: {
         type: 'stringArray',
         defaultValue: ['#094b09', '#2ebd40', '#d5670b', '#ffd84b'],
         description: 'threshold colors, used with colorBy:identity',
     },
-    /**
-     * #slot
-     */
     thresholds: {
         type: 'stringArray',
         defaultValue: ['0.75', '0.5', '0.25', '0'],

package/esm/DotplotRenderer/drawDotplot.d.ts

@@ -1,6 +1,6 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
-import { Dotplot1DViewModel } from '../DotplotView/model';
+import type { Dotplot1DViewModel } from '../DotplotView/model';
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
+import type { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType';
 export interface DotplotRenderArgsDeserialized extends RenderArgsDeserialized {
     adapterConfig: AnyConfigurationModel;
     height: number;

package/esm/DotplotRenderer/drawDotplot.js

@@ -1,13 +1,13 @@
-import { readConfObject, } from '@jbrowse/core/configuration';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { createJBrowseTheme } from '@jbrowse/core/ui';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
-import { getSnapshot } from 'mobx-state-tree';
 import { MismatchParser } from '@jbrowse/plugin-alignments';
-import { createJBrowseTheme } from '@jbrowse/core/ui';
+import { getSnapshot } from 'mobx-state-tree';
 const { parseCigar } = MismatchParser;
 const r = 'fell outside of range due to CIGAR string';
 const lt = '(less than min coordinate of feature)';
 const gt = '(greater than max coordinate of feature)';
-const fudgeFactor = 1; // allow 1px fuzzyness before warn
+const fudgeFactor = 1;
 function drawCir(ctx, x, y, r = 1) {
     ctx.beginPath();
     ctx.arc(x, y, r / 2, 0, 2 * Math.PI);
@@ -30,8 +30,6 @@ export async function drawDotplot(ctx, props) {
     const db2 = (_b = vview.dynamicBlocks.contentBlocks[0]) === null || _b === void 0 ? void 0 : _b.offsetPx;
     const warnings = [];
     ctx.lineWidth = lineWidth;
-    // we operate on snapshots of these attributes of the hview/vview because
-    // it is significantly faster than accessing the mobx objects
     const { bpPerPx: hBpPerPx } = hview;
     const { bpPerPx: vBpPerPx } = vview;
     function clampWithWarnX(num, min, max, feature) {
@@ -174,7 +172,6 @@ export async function drawDotplot(ctx, props) {
                         }
                         currX = clampWithWarnX(currX, b1, b2, feature);
                         currY = clampWithWarnY(currY, e1, e2, feature);
-                        // only draw a line segment if it is bigger than 0.5px
                         if (Math.abs(currX - lastDrawnX) > 0.5 ||
                             Math.abs(currY - lastDrawnY) > 0.5) {
                             ctx.lineTo(currX, height - currY);

package/esm/DotplotRenderer/index.d.ts

@@ -1,2 +1,2 @@
-import PluginManager from '@jbrowse/core/PluginManager';
+import type PluginManager from '@jbrowse/core/PluginManager';
 export default function DotplotRendererF(pluginManager: PluginManager): void;

package/esm/DotplotRenderer/index.js

@@ -1,5 +1,5 @@
-import ReactComponent from './components/DotplotRendering';
 import DotplotRenderer from './DotplotRenderer';
+import ReactComponent from './components/DotplotRendering';
 import configSchema from './configSchema';
 export default function DotplotRendererF(pluginManager) {
     pluginManager.addRendererType(() => new DotplotRenderer({

package/esm/DotplotView/1dview.d.ts

@@ -1,4 +1,4 @@
-import { Instance } from 'mobx-state-tree';
+import type { Instance } from 'mobx-state-tree';
 declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
     id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[], import("@jbrowse/core/util").Region[]>, [undefined]>;
@@ -53,39 +53,14 @@ declare const Dotplot1DView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
 declare const DotplotHView: import("mobx-state-tree").IModelType<{
@@ -142,39 +117,14 @@ declare const DotplotHView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 } & {
     readonly width: any;
@@ -233,42 +183,17 @@ declare const DotplotVView: import("mobx-state-tree").IModelType<{
 } & {
     moveTo(start?: import("@jbrowse/core/util/Base1DUtils").BpOffset, end?: import("@jbrowse/core/util/Base1DUtils").BpOffset): void;
 } & {
-    /**
-     * #action
-     */
     setScaleFactor(n: number): void;
-    /**
-     * #action
-     */
     center(): void;
 } & {
-    /**
-     * #getter
-     * this uses padding=false and elision=false
-     */
     readonly dynamicBlocks: import("@jbrowse/core/util/blockTypes").BlockSet;
-    /**
-     * #getter
-     */
     readonly scaleFactor: number;
-    /**
-     * #getter
-     */
     readonly maxBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly minBpPerPx: number;
-    /**
-     * #getter
-     */
     readonly maxOffset: number;
-    /**
-     * #getter
-     */
     readonly minOffset: number;
 } & {
     readonly width: any;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
-export { DotplotVView, DotplotHView, Dotplot1DView };
+export { Dotplot1DView, DotplotHView, DotplotVView };
 export type Dotplot1DViewModel = Instance<typeof Dotplot1DView>;

package/esm/DotplotView/1dview.js

@@ -1,64 +1,35 @@
-import { getParent } from 'mobx-state-tree';
-import { observable } from 'mobx';
 import Base1DView from '@jbrowse/core/util/Base1DViewModel';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
-/**
- * #stateModel Dotplot1DView
- * ref https://mobx-state-tree.js.org/concepts/volatiles on volatile state used here
- */
-function x() { } // eslint-disable-line @typescript-eslint/no-unused-vars
+import { observable } from 'mobx';
+import { getParent } from 'mobx-state-tree';
+function x() { }
 const Dotplot1DView = Base1DView.extend(self => {
     const scaleFactor = observable.box(1);
     return {
         views: {
-            /**
-             * #getter
-             * this uses padding=false and elision=false
-             */
             get dynamicBlocks() {
                 return calculateDynamicBlocks(self, false, false);
             },
-            /**
-             * #getter
-             */
             get scaleFactor() {
                 return scaleFactor.get();
             },
-            /**
-             * #getter
-             */
             get maxBpPerPx() {
                 return self.totalBp / (self.width - 50);
             },
-            /**
-             * #getter
-             */
             get minBpPerPx() {
                 return 1 / 50;
             },
-            /**
-             * #getter
-             */
             get maxOffset() {
                 return self.displayedRegionsTotalPx - self.width * 0.2;
             },
-            /**
-             * #getter
-             */
             get minOffset() {
                 return -self.width * 0.8;
             },
         },
         actions: {
-            /**
-             * #action
-             */
             setScaleFactor(n) {
                 scaleFactor.set(n);
             },
-            /**
-             * #action
-             */
             center() {
                 const centerBp = self.totalBp / 2;
                 const centerPx = centerBp / self.bpPerPx;
@@ -81,4 +52,4 @@ const DotplotVView = Dotplot1DView.extend(self => ({
         },
     },
 }));
-export { DotplotVView, DotplotHView, Dotplot1DView };
+export { Dotplot1DView, DotplotHView, DotplotVView };

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

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

package/esm/DotplotView/components/Axes.js

@@ -1,11 +1,10 @@
 import React from 'react';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
-import { getSnapshot } from 'mobx-state-tree';
 import { getFillProps, getStrokeProps, getTickDisplayStr, } from '@jbrowse/core/util';
 import { bpToPx } from '@jbrowse/core/util/Base1DUtils';
 import { useTheme } from '@mui/material';
-// locals
+import { observer } from 'mobx-react';
+import { getSnapshot } from 'mobx-state-tree';
+import { makeStyles } from 'tss-react/mui';
 import { getBlockLabelKeysToHide } from './util';
 const useStyles = makeStyles()(() => ({
     vtext: {

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

@@ -1,4 +1,4 @@
-import { SvgIconProps } from '@mui/material/SvgIcon';
 import React from 'react';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
 export declare function CursorMove(props: SvgIconProps): React.JSX.Element;
 export declare function CursorMouse(props: SvgIconProps): React.JSX.Element;

package/esm/DotplotView/components/CursorIcon.js

@@ -1,5 +1,5 @@
-import SvgIcon from '@mui/material/SvgIcon';
 import React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
 export function CursorMove(props) {
     return (React.createElement(SvgIcon, { ...props },
         React.createElement("path", { fill: "currentColor", d: "M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z" })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 declare const DotplotControls: ({ model, }: {
     model: DotplotViewModel;
 }) => React.JSX.Element;

package/esm/DotplotView/components/DotplotControls.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { IconButton } from '@mui/material';
-import { observer } from 'mobx-react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// icons
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import ZoomIn from '@mui/icons-material/ZoomIn';
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 import MoreVert from '@mui/icons-material/MoreVert';
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
 import { CursorMouse, CursorMove } from './CursorIcon';
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
 const DotplotControls = observer(function ({ model, }) {
     return (React.createElement("div", null,
         React.createElement(IconButton, { onClick: () => {

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

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

package/esm/DotplotView/components/DotplotTooltipClick.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { observer } from 'mobx-react';
 import { locstr } from './util';
 export const DotplotTooltipClick = observer(function ({ model, mousedown, mousedownClient, xdistance, ydistance, }) {
     const { hview, vview, viewHeight } = model;

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

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

package/esm/DotplotView/components/DotplotTooltipMouseover.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { observer } from 'mobx-react';
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip';
+import { observer } from 'mobx-react';
 import { locstr } from './util';
 const DotplotTooltipMouseover = observer(function ({ model, mouserect, mouserectClient, xdistance, }) {
     const { hview, vview, viewHeight } = model;

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

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

package/esm/DotplotView/components/DotplotView.js

@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useRef, lazy, Suspense } from 'react';
+import React, { Suspense, lazy, useEffect, useRef, useState } from 'react';
 import { LoadingEllipses, Menu, ResizeHandle } from '@jbrowse/core/ui';
-import { observer } from 'mobx-react';
 import { transaction } from 'mobx';
+import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import ImportForm from './ImportForm';
-import Header from './Header';
+import { HorizontalAxis, VerticalAxis } from './Axes';
 import Grid from './Grid';
-import { VerticalAxis, HorizontalAxis } from './Axes';
+import Header from './Header';
+import ImportForm from './ImportForm';
 const TooltipWhereClicked = lazy(() => import('./DotplotTooltipClick'));
 const TooltipWhereMouseovered = lazy(() => import('./DotplotTooltipMouseover'));
 const blank = { left: 0, top: 0, width: 0, height: 0 };
@@ -32,7 +32,7 @@ const useStyles = makeStyles()(theme => ({
         width: '100%',
         gridRow: '1/2',
         gridColumn: '2/2',
-        zIndex: 100, // needs to be below controls
+        zIndex: 100,
         '& path': {
             cursor: 'crosshair',
             fill: 'none',
@@ -50,8 +50,6 @@ const useStyles = makeStyles()(theme => ({
         borderTop: '1px solid #fafafa',
     },
 }));
-// produces offsetX/offsetY coordinates from a clientX and an element's
-// getBoundingClientRect
 function getOffset(coord, rect) {
     return coord && [coord[0] - rect.left, coord[1] - rect.top];
 }
@@ -91,7 +89,6 @@ const DotplotViewInternal = observer(function ({ model, }) {
         (cursorMode === 'crosshair' && ctrlKeyWasUsed);
     const validSelect = (cursorMode === 'move' && ctrlKeyWasUsed) ||
         (cursorMode === 'crosshair' && !ctrlKeyWasUsed);
-    // use non-React wheel handler to properly prevent body scrolling
     useEffect(() => {
         function onWheel(event) {
             event.preventDefault();
@@ -160,8 +157,6 @@ const DotplotViewInternal = observer(function ({ model, }) {
             window.addEventListener('keyup', globalCtrlKeyUp);
         };
     }, []);
-    // detect a mouseup after a mousedown was submitted, autoremoves mouseup once
-    // that single mouseup is set
     useEffect(() => {
         function globalMouseUp(event) {
             if (Math.abs(xdistance) > 3 && Math.abs(ydistance) > 3 && validSelect) {
@@ -229,7 +224,6 @@ const DotplotViewInternal = observer(function ({ model, }) {
                                 if (mousedown && mouseup) {
                                     model.zoomInToMouseCoords(mousedown, mouseup);
                                 }
-                                // below line is needed to prevent tooltip from sticking
                                 setMouseOvered(false);
                             },
                         },
@@ -239,7 +233,6 @@ const DotplotViewInternal = observer(function ({ model, }) {
                                 if (mousedown && mouseup) {
                                     model.onDotplotView(mousedown, mouseup);
                                 }
-                                // below line is needed to prevent tooltip from sticking
                                 setMouseOvered(false);
                             },
                         },

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

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

package/esm/DotplotView/components/DotplotWarnings.js

@@ -1,7 +1,6 @@
 import React, { lazy, useState } from 'react';
 import { Alert, Button } from '@mui/material';
 import { observer } from 'mobx-react';
-// lazy components
 const WarningDialog = lazy(() => import('./WarningDialog'));
 const DotplotWarnings = observer(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });

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

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

package/esm/DotplotView/components/ExportSvgDialog.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
 import { getSession, useLocalStorage } from '@jbrowse/core/util';
+import { Button, Checkbox, CircularProgress, DialogActions, DialogContent, FormControlLabel, MenuItem, TextField, Typography, } from '@mui/material';
 function LoadingMessage() {
     return (React.createElement("div", null,
         React.createElement(CircularProgress, { size: 20, style: { marginRight: 20 } }),
@@ -30,9 +30,7 @@ export default function ExportSvgDialog({ model, handleClose, }) {
                 } }),
             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,
+                } }, Object.entries(session.allThemes()).map(([key, val]) => (React.createElement(MenuItem, { key: key, value: key }, 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"))),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DotplotViewModel } from '../model';
+import type { DotplotViewModel } from '../model';
 export declare const GridRaw: ({ model, children, }: {
     model: DotplotViewModel;
     children?: React.ReactNode;

package/esm/DotplotView/components/Grid.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { observer } from 'mobx-react';
-import { useTheme } from '@mui/material';
 import { getFillProps, getStrokeProps } from '@jbrowse/core/util';
+import { useTheme } from '@mui/material';
+import { observer } from 'mobx-react';
 export const GridRaw = observer(function ({ model, children, }) {
     const { viewWidth, viewHeight, hview, vview } = model;
     const hblocks = hview.dynamicBlocks.contentBlocks;
@@ -15,8 +15,6 @@ export const GridRaw = observer(function ({ model, children, }) {
     const vbottom = vblocks[0].offsetPx - vview.offsetPx;
     const theme = useTheme();
     const stroke = theme.palette.divider;
-    // Uses math.max/min avoid making very large SVG rect offscreen element,
-    // which can sometimes fail to draw
     const rx = Math.max(hbottom, 0);
     const ry = Math.max(viewHeight - vtop, 0);
     const w = Math.min(htop - hbottom, viewWidth);

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

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

package/esm/DotplotView/components/Header.js

@@ -1,11 +1,11 @@
 import React from 'react';
+import { getBpDisplayStr } from '@jbrowse/core/util';
 import { Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
-import { getBpDisplayStr } from '@jbrowse/core/util';
+import DotplotControls from './DotplotControls';
 import DotplotWarnings from './DotplotWarnings';
 import PanButtons from './PanButtons';
-import DotplotControls from './DotplotControls';
 const useStyles = makeStyles()({
     bp: {
         display: 'flex',

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SnapshotIn } from 'mobx-state-tree';
-import { AnyConfigurationModel } from '@jbrowse/core/configuration';
+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;

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

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from 'react';
-import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
+import React, { useEffect, useState } from 'react';
 import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
+import { FormControlLabel, Grid, Paper, Radio, RadioGroup, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { basename, extName, getName, stripGz } from './util';
 function getAdapter({ radioOption, assembly1, assembly2, fileLocation, indexFileLocation, bed1Location, bed2Location, }) {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DotplotViewModel } from '../../model';
+import type { DotplotViewModel } from '../../model';
 declare const Selector: ({ model, assembly1, assembly2, setShowTrackId, }: {
     model: DotplotViewModel;
     assembly1: string;