@jbrowse/plugin-dotplot-view 2.6.2 → 2.7.0

package/dist/DotplotDisplay/components/DotplotDisplay.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import { DotplotDisplayModel } from '../stateModelFactory';
-declare function DotplotDisplay(props: {
+declare const DotplotDisplay: (props: {
     model: DotplotDisplayModel;
     children?: React.ReactNode;
-}): React.JSX.Element;
-declare const _default: typeof DotplotDisplay;
-export default _default;
+}) => React.JSX.Element;
+export default DotplotDisplay;

package/dist/DotplotDisplay/components/DotplotDisplay.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const util_1 = require("@jbrowse/core/util");
-function DotplotDisplay(props) {
+const DotplotDisplay = (0, mobx_react_1.observer)(function DotplotDisplay(props) {
     const { model, children } = props;
     const { offsetX = 0, offsetY = 0 } = model.data || {};
     const view = (0, util_1.getContainingView)(model);
@@ -19,5 +19,5 @@ function DotplotDisplay(props) {
                 left,
             } }),
         children));
-}
-exports.default = (0, mobx_react_1.observer)(DotplotDisplay);
+});
+exports.default = DotplotDisplay;

package/dist/DotplotDisplay/stateModelFactory.d.ts

@@ -50,7 +50,9 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     }>;
     readonly DisplayBlurb: React.FC<{
         model: {
-            id: string;
+            id: string; /**
+             * #getter
+             */
             type: string;
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
@@ -72,9 +74,7 @@ export declare function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     renderProps(): any;
     readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
     readonly DisplayMessageComponent: React.FC<any> | undefined;
-    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[]; /**
-     * #action
-     */
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
     regionCannotBeRendered(): null;
 } & {

package/dist/DotplotDisplay/stateModelFactory.js

@@ -43,9 +43,9 @@ function stateModelFactory(configSchema) {
     })))
         .views(self => ({
         get shouldDisplay() {
-            const view = (0, util_1.getContainingView)(self);
-            return (view.vview.bpPerPx === self.data.bpPerPxY &&
-                view.hview.bpPerPx === self.data.bpPerPxX);
+            const { vview, hview } = (0, util_1.getContainingView)(self);
+            return (vview.bpPerPx === self.data.bpPerPxY &&
+                hview.bpPerPx === self.data.bpPerPxX);
         },
         /**
          * #getter

package/dist/DotplotRenderer/DotplotRenderer.js

@@ -48,7 +48,7 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
         return args;
     }
     async drawDotplot(ctx, props) {
-        var _a, _b, _c;
+        var _a, _b;
         const { config, views, height, drawCigar, theme } = props;
         const color = (0, configuration_1.readConfObject)(config, 'color');
         const posColor = (0, configuration_1.readConfObject)(config, 'posColor');
@@ -132,7 +132,7 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
             width: vview.width,
         };
         const t = (0, ui_1.createJBrowseTheme)(theme);
-        (_c = hview.features) === null || _c === void 0 ? void 0 : _c.forEach(feature => {
+        for (const feature of hview.features || []) {
             const strand = feature.get('strand') || 1;
             const start = strand === 1 ? feature.get('start') : feature.get('end');
             const end = strand === 1 ? feature.get('end') : feature.get('start');
@@ -190,6 +190,8 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
                         const cigarOps = parseCigar(cigar);
                         ctx.beginPath();
                         ctx.moveTo(currX, height - currY);
+                        let lastDrawnX = currX;
+                        let lastDrawnY = currX;
                         for (let i = 0; i < cigarOps.length; i += 2) {
                             const val = +cigarOps[i];
                             const op = cigarOps[i + 1];
@@ -205,7 +207,13 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
                             }
                             currX = clampWithWarnX(currX, b1, b2, feature);
                             currY = clampWithWarnY(currY, e1, e2, feature);
-                            ctx.lineTo(currX, height - currY);
+                            // 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);
+                                lastDrawnX = currX;
+                                lastDrawnY = currY;
+                            }
                         }
                         ctx.stroke();
                     }
@@ -233,7 +241,7 @@ class DotplotRenderer extends ComparativeServerSideRendererType_1.default {
                     }
                 }
             }
-        });
+        }
         return { warnings };
     }
     async render(renderProps) {

package/dist/DotplotRenderer/components/DotplotRendering.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import { DotplotRenderArgsDeserialized } from '../DotplotRenderer';
-declare function DotplotRendering(props: DotplotRenderArgsDeserialized): React.JSX.Element;
-declare const _default: typeof DotplotRendering;
-export default _default;
+declare const DotplotRendering: (props: DotplotRenderArgsDeserialized) => React.JSX.Element;
+export default DotplotRendering;

package/dist/DotplotRenderer/components/DotplotRendering.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const ui_1 = require("@jbrowse/core/ui");
 const mobx_react_1 = require("mobx-react");
-function DotplotRendering(props) {
+const DotplotRendering = (0, mobx_react_1.observer)(function (props) {
     return react_1.default.createElement(ui_1.PrerenderedCanvas, { ...props });
-}
-exports.default = (0, mobx_react_1.observer)(DotplotRendering);
+});
+exports.default = DotplotRendering;

package/dist/DotplotView/blockTypes.d.ts

@@ -23,15 +23,7 @@ export declare class BaseBlock {
     /**
      * a block that should be shown as filled with data
      */
-    constructor(data: any);
-    /**
-     * rename the reference sequence of this block and return a new one
-     *
-     * @param refName -
-     * @returns either a new block with a renamed reference sequence,
-     * or the same block, if the ref name is not actually different
-     */
-    renameReference(refName: string): any;
+    constructor(data: Record<string, any>);
     toRegion(): {
         refName: string;
         start: number;

package/dist/DotplotView/blockTypes.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InterRegionPaddingBlock = exports.ElidedBlock = exports.ContentBlock = exports.BaseBlock = exports.BlockSet = void 0;
+const util_1 = require("@jbrowse/core/util");
 class BlockSet {
     constructor(blocks = []) {
         this.blocks = blocks;
@@ -31,7 +32,7 @@ class BlockSet {
     }
     get totalWidthPx() {
         return this.blocks.length
-            ? this.blocks.map(blocks => blocks.widthPx).reduce((a, b) => a + b)
+            ? (0, util_1.sum)(this.blocks.map(blocks => blocks.widthPx))
             : 0;
     }
     get offsetPx() {
@@ -57,20 +58,6 @@ class BaseBlock {
         this.end = data.end;
         this.key = data.key;
     }
-    /**
-     * rename the reference sequence of this block and return a new one
-     *
-     * @param refName -
-     * @returns either a new block with a renamed reference sequence,
-     * or the same block, if the ref name is not actually different
-     */
-    renameReference(refName) {
-        if (this.refName && refName !== this.refName) {
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return new this.constructor({ ...this, refName });
-        }
-        return this;
-    }
     toRegion() {
         return {
             refName: this.refName,

package/dist/DotplotView/components/Axes.js

@@ -44,6 +44,20 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
         width,
         staticBlocks: hview.staticBlocks,
     };
+    const ticks = hticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = (0, Base1DUtils_1.bpToPx)({
+                refName: tick.refName,
+                coord: tick.base,
+                self: hviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .filter(f => f[1] !== undefined)
+        .map(f => [f[0], f[1] - offsetPx]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         dblocks
             .filter(region => !hide.has(region.key))
@@ -53,24 +67,12 @@ exports.HorizontalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             const xoff = Math.floor(x - hview.offsetPx);
             return (react_1.default.createElement("text", { transform: `rotate(${htextRotation},${xoff},${y})`, key: JSON.stringify(region), x: xoff, y: y + 1, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "hanging", textAnchor: "end" }, region.refName));
         }),
-        hticks.map(tick => {
-            var _a;
-            const x = (((_a = (0, Base1DUtils_1.bpToPx)({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.divider }));
+        ticks.map(([tick, x]) => {
+            return (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, x1: x, x2: x, y1: 0, y2: tick.type === 'major' ? 6 : 4, strokeWidth: 1, stroke: theme.palette.grey[400] }));
         }),
-        hticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const x = (((_a = (0, Base1DUtils_1.bpToPx)({
-                refName: tick.refName,
-                coord: tick.base,
-                self: hviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, x]) => {
             const y = 0;
             return x > 10 ? (react_1.default.createElement("text", { x: x - 7, y: y, transform: `rotate(${htextRotation},${x},${y})`, key: `text-${JSON.stringify(tick)}`, fill: theme.palette.text.primary, fontSize: 11, dominantBaseline: "middle", textAnchor: "end" }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
         }),
@@ -93,6 +95,20 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
         width,
         staticBlocks: vview.staticBlocks,
     };
+    const ticks = vticks
+        .map(tick => {
+        var _a;
+        return [
+            tick,
+            (_a = (0, Base1DUtils_1.bpToPx)({
+                refName: tick.refName,
+                coord: tick.base,
+                self: vviewSnap,
+            })) === null || _a === void 0 ? void 0 : _a.offsetPx,
+        ];
+    })
+        .filter(f => f[1] !== undefined)
+        .map(f => [f[0], f[1] - offsetPx]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         dblocks
             .filter(region => !hide.has(region.key))
@@ -102,24 +118,10 @@ exports.VerticalAxisRaw = (0, mobx_react_1.observer)(function ({ model, }) {
             const yoff = Math.floor(viewHeight - y + offsetPx);
             return (react_1.default.createElement("text", { transform: `rotate(${vtextRotation},${x},${y})`, key: JSON.stringify(region), x: x, y: yoff, fill: theme.palette.text.primary, fontSize: 11, textAnchor: "end" }, region.refName));
         }),
-        vticks.map(tick => {
-            var _a;
-            const y = (((_a = (0, Base1DUtils_1.bpToPx)({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
-            return (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.divider }));
-        }),
-        vticks
-            .filter(tick => tick.type === 'major')
-            .map(tick => {
-            var _a;
-            const y = (((_a = (0, Base1DUtils_1.bpToPx)({
-                refName: tick.refName,
-                coord: tick.base,
-                self: vviewSnap,
-            })) === null || _a === void 0 ? void 0 : _a.offsetPx) || 0) - offsetPx;
+        ticks.map(([tick, y]) => (react_1.default.createElement("line", { key: `line-${JSON.stringify(tick)}`, y1: viewHeight - y, y2: viewHeight - y, x1: borderX, x2: borderX - (tick.type === 'major' ? 6 : 4), strokeWidth: 1, stroke: theme.palette.grey[400] }))),
+        ticks
+            .filter(t => t[0].type === 'major')
+            .map(([tick, y]) => {
             return y > 10 ? (react_1.default.createElement("text", { y: viewHeight - y - 3, x: borderX - 7, key: `text-${JSON.stringify(tick)}`, textAnchor: "end", fill: theme.palette.text.primary, dominantBaseline: "hanging", fontSize: 11 }, (0, util_1.getTickDisplayStr)(tick.base + 1, bpPerPx))) : null;
         }),
         react_1.default.createElement("text", { y: (viewHeight - borderY) / 2, x: 12, fill: theme.palette.text.primary, transform: `rotate(-90,12,${(viewHeight - borderY) / 2})`, textAnchor: "middle", fontSize: 11 }, vview.assemblyNames.join(','))));

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

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

package/dist/DotplotView/components/DotplotControls.js

@@ -0,0 +1,94 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
+// icons
+const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
+const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
+const CursorIcon_1 = require("./CursorIcon");
+const Icons_1 = require("@jbrowse/core/ui/Icons");
+const DotplotControls = (0, mobx_react_1.observer)(function ({ model, }) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomOutButton },
+            react_1.default.createElement(ZoomOut_1.default, null)),
+        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomInButton },
+            react_1.default.createElement(ZoomIn_1.default, null)),
+        react_1.default.createElement(material_1.IconButton, { onClick: () => model.activateTrackSelector(), title: "Open track selector" },
+            react_1.default.createElement(Icons_1.TrackSelector, null)),
+        react_1.default.createElement(CascadingMenuButton_1.default, { menuItems: [
+                {
+                    onClick: () => model.squareView(),
+                    label: 'Square view - same base pairs per pixel',
+                },
+                {
+                    onClick: () => model.squareViewProportional(),
+                    label: 'Rectanglularize view - same total bp',
+                },
+                {
+                    onClick: () => model.showAllRegions(),
+                    label: 'Show all regions',
+                },
+                {
+                    onClick: () => model.setDrawCigar(!model.drawCigar),
+                    type: 'checkbox',
+                    label: 'Draw CIGAR',
+                    checked: model.drawCigar,
+                },
+                {
+                    onClick: () => model.setShowPanButtons(!model.showPanButtons),
+                    label: 'Show pan buttons',
+                    type: 'checkbox',
+                    checked: model.showPanButtons,
+                },
+                {
+                    label: 'Click and drag mode',
+                    subMenu: [
+                        {
+                            onClick: () => model.setCursorMode('move'),
+                            label: 'Pan by default, select region when ctrl key is held',
+                            icon: CursorIcon_1.CursorMove,
+                            type: 'radio',
+                            checked: model.cursorMode === 'move',
+                        },
+                        {
+                            onClick: () => model.setCursorMode('crosshair'),
+                            label: 'Select region by default, pan when ctrl key is held',
+                            icon: CursorIcon_1.CursorMouse,
+                            type: 'radio',
+                            checked: model.cursorMode === 'crosshair',
+                        },
+                    ],
+                },
+                {
+                    label: 'Wheel scroll mode',
+                    subMenu: [
+                        {
+                            onClick: () => model.setWheelMode('pan'),
+                            label: 'Pans view',
+                            type: 'radio',
+                            checked: model.wheelMode === 'pan',
+                        },
+                        {
+                            onClick: () => model.setWheelMode('zoom'),
+                            label: 'Zooms view',
+                            type: 'radio',
+                            checked: model.wheelMode === 'zoom',
+                        },
+                        {
+                            onClick: () => model.setWheelMode('none'),
+                            label: 'Disable',
+                            type: 'radio',
+                            checked: model.wheelMode === 'none',
+                        },
+                    ],
+                },
+            ] },
+            react_1.default.createElement(MoreVert_1.default, null))));
+});
+exports.default = DotplotControls;

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-export declare function round(value: number): number;
 type Coord = [number, number] | undefined;
 export declare const TooltipWhereMouseovered: ({ model, mouserect, mouserectClient, xdistance, ydistance, }: {
     model: DotplotViewModel;

package/dist/DotplotView/components/DotplotTooltip.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = exports.round = void 0;
+exports.TooltipWhereClicked = exports.TooltipWhereMouseovered = void 0;
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
@@ -33,7 +33,6 @@ const react_popper_1 = require("react-popper");
 function round(value) {
     return Math.round(value * 1e5) / 1e5;
 }
-exports.round = round;
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     // these styles come from
     // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js

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

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

package/dist/DotplotView/components/DotplotWarnings.js

@@ -28,7 +28,7 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 // lazy components
 const WarningDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./WarningDialog'))));
-exports.default = (0, mobx_react_1.observer)(function ({ model }) {
+const DotplotWarnings = (0, mobx_react_1.observer)(function ({ model, }) {
     const trackWarnings = model.tracks.filter(t => { var _a; return (_a = t.displays[0].warnings) === null || _a === void 0 ? void 0 : _a.length; });
     const [shown, setShown] = (0, react_1.useState)(false);
     return trackWarnings.length ? (react_1.default.createElement(material_1.Alert, { severity: "warning" },
@@ -37,3 +37,4 @@ exports.default = (0, mobx_react_1.observer)(function ({ model }) {
         react_1.default.createElement(material_1.Button, { onClick: () => setShown(true) }, "More info"),
         shown ? (react_1.default.createElement(WarningDialog, { trackWarnings: trackWarnings, handleClose: () => setShown(false) })) : null)) : null;
 });
+exports.default = DotplotWarnings;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { DotplotViewModel } from '../model';
-declare const _default: ({ model, selection, }: {
+declare const DotplotHeader: ({ model, selection, }: {
     model: DotplotViewModel;
     selection?: {
         width: number;
         height: number;
     } | undefined;
 }) => React.JSX.Element;
-export default _default;
+export default DotplotHeader;

package/dist/DotplotView/components/Header.js

@@ -1,49 +1,17 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
 const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-// icons
-const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
-const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
-const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const CursorIcon_1 = require("./CursorIcon");
-const Icons_1 = require("@jbrowse/core/ui/Icons");
 const DotplotWarnings_1 = __importDefault(require("./DotplotWarnings"));
 const PanButtons_1 = __importDefault(require("./PanButtons"));
+const DotplotControls_1 = __importDefault(require("./DotplotControls"));
 const useStyles = (0, mui_1.makeStyles)()({
-    iconButton: {
-        margin: 5,
-    },
     bp: {
         display: 'flex',
         alignItems: 'center',
@@ -57,95 +25,11 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'relative',
     },
 });
-const DotplotControls = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    const [menuAnchorEl, setMenuAnchorEl] = (0, react_1.useState)();
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomOutButton, className: classes.iconButton },
-            react_1.default.createElement(ZoomOut_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: model.zoomInButton, className: classes.iconButton },
-            react_1.default.createElement(ZoomIn_1.default, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: () => model.activateTrackSelector(), className: classes.iconButton, title: "Open track selector", "data-testid": "circular_track_select" },
-            react_1.default.createElement(Icons_1.TrackSelector, null)),
-        react_1.default.createElement(material_1.IconButton, { onClick: event => setMenuAnchorEl(event.currentTarget), className: classes.iconButton },
-            react_1.default.createElement(MoreVert_1.default, null)),
-        menuAnchorEl ? (react_1.default.createElement(ui_1.Menu, { anchorEl: menuAnchorEl, open: true, onMenuItemClick: (_event, callback) => {
-                callback();
-                setMenuAnchorEl(undefined);
-            }, menuItems: [
-                {
-                    onClick: () => model.squareView(),
-                    label: 'Square view - same base pairs per pixel',
-                },
-                {
-                    onClick: () => model.squareViewProportional(),
-                    label: 'Rectanglularize view - same total bp',
-                },
-                {
-                    onClick: () => model.showAllRegions(),
-                    label: 'Show all regions',
-                },
-                {
-                    onClick: () => model.setDrawCigar(!model.drawCigar),
-                    type: 'checkbox',
-                    label: 'Draw CIGAR',
-                    checked: model.drawCigar,
-                },
-                {
-                    onClick: () => model.setShowPanButtons(!model.showPanButtons),
-                    label: 'Show pan buttons',
-                    type: 'checkbox',
-                    checked: model.showPanButtons,
-                },
-                {
-                    label: 'Click and drag mode',
-                    subMenu: [
-                        {
-                            onClick: () => model.setCursorMode('move'),
-                            label: 'Pan by default, select region when ctrl key is held',
-                            icon: CursorIcon_1.CursorMove,
-                            type: 'radio',
-                            checked: model.cursorMode === 'move',
-                        },
-                        {
-                            onClick: () => model.setCursorMode('crosshair'),
-                            label: 'Select region by default, pan when ctrl key is held',
-                            icon: CursorIcon_1.CursorMouse,
-                            type: 'radio',
-                            checked: model.cursorMode === 'crosshair',
-                        },
-                    ],
-                },
-                {
-                    label: 'Wheel scroll mode',
-                    subMenu: [
-                        {
-                            onClick: () => model.setWheelMode('pan'),
-                            label: 'Pans view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'pan',
-                        },
-                        {
-                            onClick: () => model.setWheelMode('zoom'),
-                            label: 'Zooms view',
-                            type: 'radio',
-                            checked: model.wheelMode === 'zoom',
-                        },
-                        {
-                            onClick: () => model.setWheelMode('none'),
-                            label: 'Disable',
-                            type: 'radio',
-                            checked: model.wheelMode === 'none',
-                        },
-                    ],
-                },
-            ], onClose: () => setMenuAnchorEl(undefined) })) : null));
-});
-exports.default = (0, mobx_react_1.observer)(function Header({ model, selection, }) {
+const DotplotHeader = (0, mobx_react_1.observer)(function ({ model, selection, }) {
     const { classes } = useStyles();
     const { hview, vview, showPanButtons } = model;
     return (react_1.default.createElement("div", { className: classes.headerBar },
-        react_1.default.createElement(DotplotControls, { model: model }),
+        react_1.default.createElement(DotplotControls_1.default, { model: model }),
         react_1.default.createElement(material_1.Typography, { className: classes.bp, variant: "body2", color: "textSecondary" },
             "x: ",
             hview.assemblyNames.join(','),
@@ -165,3 +49,4 @@ exports.default = (0, mobx_react_1.observer)(function Header({ model, selection,
         react_1.default.createElement(DotplotWarnings_1.default, { model: model }),
         showPanButtons ? react_1.default.createElement(PanButtons_1.default, { model: model }) : null));
 });
+exports.default = DotplotHeader;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { SnapshotIn } from 'mobx-state-tree';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 type Conf = SnapshotIn<AnyConfigurationModel>;
-declare const OpenTrack: ({ sessionTrackData, assembly1, assembly2, setSessionTrackData, }: {
+declare const OpenTrack: ({ assembly1, assembly2, setSessionTrackData, }: {
     sessionTrackData: Conf;
     assembly1: string;
     assembly2: string;

package/dist/DotplotView/components/ImportCustomTrack.js

@@ -99,7 +99,7 @@ function getAdapter({ radioOption, assembly1, assembly2, fileLocation, bed1Locat
         throw new Error('Unknown type');
     }
 }
-const OpenTrack = (0, mobx_react_1.observer)(({ sessionTrackData, assembly1, assembly2, setSessionTrackData, }) => {
+const OpenTrack = (0, mobx_react_1.observer)(({ assembly1, assembly2, setSessionTrackData, }) => {
     const [bed2Location, setBed2Location] = (0, react_1.useState)();
     const [bed1Location, setBed1Location] = (0, react_1.useState)();
     const [fileLocation, setFileLocation] = (0, react_1.useState)();

package/dist/DotplotView/components/ImportSyntenyTrackSelector.js

@@ -42,7 +42,10 @@ const Selector = (0, mobx_react_1.observer)(({ model, assembly1, assembly2, setS
     var _a;
     const session = (0, util_1.getSession)(model);
     const { tracks, sessionTracks } = session;
-    const allTracks = [...tracks, ...sessionTracks];
+    const allTracks = [
+        ...tracks,
+        ...(sessionTracks || []),
+    ];
     const filteredTracks = allTracks.filter(t => f(t, assembly2, assembly1));
     const resetTrack = ((_a = filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.trackId) || '';
     const [value, setValue] = (0, react_1.useState)(resetTrack);