@jbrowse/plugin-linear-genome-view 2.11.1 → 2.12.0

package/dist/LinearGenomeView/components/Gridlines.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const blockTypes_1 = require("@jbrowse/core/util/blockTypes");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
 const Block_1 = require("../../BaseLinearDisplay/components/Block");
@@ -50,13 +49,13 @@ const RenderedVerticalGuides = (0, mobx_react_1.observer)(({ model }) => {
     const { staticBlocks, bpPerPx } = model;
     return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, index) => {
         const k = `${block.key}-${index}`;
-        if (block instanceof blockTypes_1.ContentBlock) {
+        if (block.type === 'ContentBlock') {
             return react_1.default.createElement(RenderedBlockLines, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        else if (block instanceof blockTypes_1.ElidedBlock) {
+        else if (block.type === 'ElidedBlock') {
             return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: block.widthPx });
         }
-        else if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
+        else if (block.type === 'InterRegionPaddingBlock') {
             return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: block.widthPx, boundary: block.variant === 'boundary' }));
         }
         return null;

package/dist/LinearGenomeView/components/Highlight.js

@@ -61,26 +61,6 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model, highlig
     const dismissHighlight = () => {
         model.removeHighlight(highlight);
     };
-    const menuItems = [
-        {
-            label: 'Dismiss highlight',
-            icon: Close_1.default,
-            onClick: () => dismissHighlight(),
-        },
-        {
-            label: 'Bookmark highlighted region',
-            icon: Bookmark_1.default,
-            onClick: () => {
-                let bookmarkWidget = session.widgets.get('GridBookmark');
-                if (!bookmarkWidget) {
-                    bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-                }
-                // @ts-ignore
-                bookmarkWidget.addBookmark(highlight);
-                dismissHighlight();
-            },
-        },
-    ];
     function handleClose() {
         setOpen(false);
     }
@@ -118,7 +98,26 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model, highlig
         react_1.default.createElement(ui_1.Menu, { anchorEl: anchorEl.current, onMenuItemClick: (_event, callback) => {
                 callback(session);
                 handleClose();
-            }, open: open, onClose: handleClose, menuItems: menuItems }))) : null;
+            }, open: open, onClose: handleClose, menuItems: [
+                {
+                    label: 'Dismiss highlight',
+                    icon: Close_1.default,
+                    onClick: () => dismissHighlight(),
+                },
+                {
+                    label: 'Bookmark highlighted region',
+                    icon: Bookmark_1.default,
+                    onClick: () => {
+                        let bookmarkWidget = session.widgets.get('GridBookmark');
+                        if (!bookmarkWidget) {
+                            bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+                        }
+                        // @ts-ignore
+                        bookmarkWidget.addBookmark(highlight);
+                        dismissHighlight();
+                    },
+                },
+            ] }))) : null;
 });
 const HighlightGroup = (0, mobx_react_1.observer)(function HighlightGroup({ model, }) {
     return model.highlight.map((highlight, idx) => (react_1.default.createElement(Highlight, { key: JSON.stringify(highlight) + '-' + idx, model: model, highlight: highlight })));

package/dist/LinearGenomeView/components/OverviewScalebar.js

@@ -33,7 +33,6 @@ const mobx_react_1 = require("mobx-react");
 // core
 const Base1DViewModel_1 = __importDefault(require("@jbrowse/core/util/Base1DViewModel"));
 const util_1 = require("@jbrowse/core/util");
-const blockTypes_1 = require("@jbrowse/core/util/blockTypes");
 // locals
 const __1 = require("..");
 const util_2 = require("../util");
@@ -176,7 +175,7 @@ const Scalebar = (0, mobx_react_1.observer)(function ({ model, scale, overview,
                 borderColor: color,
             } }),
         overviewVisibleRegions.map((block, idx) => {
-            return !(block instanceof blockTypes_1.ContentBlock) ? (react_1.default.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scalebarContig, style: {
+            return !(block.type === 'ContentBlock') ? (react_1.default.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scalebarContig, style: {
                     width: block.widthPx,
                     left: block.offsetPx,
                     backgroundColor: '#999',

package/dist/LinearGenomeView/components/Scalebar.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const blockTypes_1 = require("@jbrowse/core/util/blockTypes");
 const mobx_react_1 = require("mobx-react");
 const react_1 = __importDefault(require("react"));
 const Block_1 = require("../../BaseLinearDisplay/components/Block");
@@ -61,7 +60,7 @@ const RenderedRefNameLabels = (0, mobx_react_1.observer)(({ model }) => {
         }
     });
     return (react_1.default.createElement(react_1.default.Fragment, null, model.staticBlocks.map((block, index) => {
-        return block instanceof blockTypes_1.ContentBlock &&
+        return block.type === 'ContentBlock' &&
             (block.isLeftEndOfDisplayedRegion || index === lastLeftBlock) ? (react_1.default.createElement(material_1.Typography, { key: `refLabel-${block.key}-${index}`, style: {
                 left: index === lastLeftBlock
                     ? Math.max(0, -model.offsetPx)
@@ -88,13 +87,13 @@ const RenderedScalebarLabels = (0, mobx_react_1.observer)(({ model }) => {
     return (react_1.default.createElement(react_1.default.Fragment, null, staticBlocks.map((block, idx) => {
         const { key, widthPx } = block;
         const k = `${key}-${idx}`;
-        if (block instanceof blockTypes_1.ContentBlock) {
+        if (block.type === 'ContentBlock') {
             return react_1.default.createElement(RenderedBlockTicks, { key: k, block: block, bpPerPx: bpPerPx });
         }
-        else if (block instanceof blockTypes_1.ElidedBlock) {
+        else if (block.type === 'ElidedBlock') {
             return react_1.default.createElement(Block_1.ElidedBlock, { key: k, width: widthPx });
         }
-        else if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
+        else if (block.type === 'InterRegionPaddingBlock') {
             return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: k, width: widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
         return null;

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -30,10 +30,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         },
     },
     trackName: {
-        margin: '0 auto',
-        width: '90%',
         fontSize: '0.8rem',
-        pointerEvents: 'none',
     },
     iconButton: {
         padding: theme.spacing(1),
@@ -87,7 +84,10 @@ const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(functio
         react_1.default.createElement(TrackLabelDragHandle_1.default, { track: track, trackId: trackId, view: view }),
         react_1.default.createElement(material_1.IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             react_1.default.createElement(Close_1.default, { fontSize: "small" })),
-        react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName },
+        react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
+                // avoid becoming a click-and-drag action on the lgv
+                event.stopPropagation();
+            } },
             react_1.default.createElement(ui_1.SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
                     .filter(f => !!f)
                     .join(' ') })),

package/dist/LinearGenomeView/components/TrackRenderingContainer.js

@@ -51,19 +51,24 @@ const TrackRenderingContainer = (0, mobx_react_1.observer)(function ({ model, tr
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
+    const { trackRefs, id, scaleFactor } = model;
     const trackId = (0, configuration_1.getConf)(track, 'trackId');
     const ref = (0, react_1.useRef)(null);
     const minimized = track.minimized;
     (0, react_1.useEffect)(() => {
         if (ref.current) {
-            model.trackRefs[trackId] = ref.current;
+            trackRefs[trackId] = ref.current;
         }
         return () => {
-            delete model.trackRefs[trackId];
+            delete trackRefs[trackId];
         };
-    }, [model.trackRefs, trackId]);
-    return (react_1.default.createElement("div", { className: classes.trackRenderingContainer, style: { height: minimized ? 20 : height }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${model.id}-${trackId}` }, !minimized ? (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
+    }, [trackRefs, trackId]);
+    return (react_1.default.createElement("div", { className: classes.trackRenderingContainer, style: {
+            height: minimized ? 20 : height,
+        }, onScroll: evt => display.setScrollTop(evt.currentTarget.scrollTop), onDragEnter: onDragEnter, "data-testid": `trackRenderingContainer-${id}-${trackId}` }, !minimized ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: {
+                transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
+            } },
             react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(ui_1.LoadingEllipses, null) },
                 react_1.default.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (react_1.default.createElement("div", { style: {

package/dist/LinearGenomeView/components/hooks.d.ts

@@ -42,7 +42,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     rightBpOffset: {
         coord: number;
@@ -53,7 +53,7 @@ export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement>, mod
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     anchorPosition: AnchorPosition | undefined;
     numOfBpSelected: number;

package/dist/LinearGenomeView/components/hooks.js

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWheelScroll = exports.useRangeSelect = exports.useSideScroll = void 0;
 const react_1 = require("react");
-const normalize_wheel_1 = __importDefault(require("normalize-wheel"));
 const util_1 = require("./util");
 function useSideScroll(model) {
     const [mouseDragging, setMouseDragging] = (0, react_1.useState)(false);
@@ -214,11 +210,10 @@ function useWheelScroll(ref, model) {
         const curr = ref.current;
         // if ctrl is held down, zoom in with y-scroll
         // else scroll horizontally with x-scroll
-        function onWheel(origEvent) {
-            const event = (0, normalize_wheel_1.default)(origEvent);
-            if (origEvent.ctrlKey === true) {
-                origEvent.preventDefault();
-                delta.current += event.pixelY / 500;
+        function onWheel(event) {
+            if (event.ctrlKey === true) {
+                event.preventDefault();
+                delta.current += event.deltaY / 500;
                 model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
                 if (timeout.current) {
                     clearTimeout(timeout.current);
@@ -227,7 +222,7 @@ function useWheelScroll(ref, model) {
                     model.setScaleFactor(1);
                     model.zoomTo(delta.current > 0
                         ? model.bpPerPx * (1 + delta.current)
-                        : model.bpPerPx / (1 - delta.current), origEvent.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
+                        : model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
                     delta.current = 0;
                 }, 300);
             }
@@ -235,10 +230,10 @@ function useWheelScroll(ref, model) {
                 // this is needed to stop the event from triggering "back button
                 // action" on MacOSX etc.  but is a heuristic to avoid preventing the
                 // inner-track scroll behavior
-                if (Math.abs(event.pixelX) > Math.abs(2 * event.pixelY)) {
-                    origEvent.preventDefault();
+                if (Math.abs(event.deltaX) > Math.abs(2 * event.deltaY)) {
+                    event.preventDefault();
                 }
-                delta.current += event.pixelX;
+                delta.current += event.deltaX;
                 if (!scheduled.current) {
                     // use rAF to make it so multiple event handlers aren't fired per-frame
                     // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/

package/dist/LinearGenomeView/model.d.ts

@@ -62,16 +62,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     type: import("mobx-state-tree").IType<string | undefined, string, string>;
     offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
     bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-        refName: import("mobx-state-tree").ISimpleType<string>;
-        start: import("mobx-state-tree").ISimpleType<number>;
-        end: import("mobx-state-tree").ISimpleType<number>;
-        reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    } & {
-        assemblyName: import("mobx-state-tree").ISimpleType<string>;
-    }, {
-        setRefName(newRefName: string): void;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<Region[], Region[], Region[]>, [undefined]>;
     tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
     hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
@@ -364,6 +355,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     getSelectedRegions(leftOffset?: BpOffset, rightOffset?: BpOffset): {
         start: number;
         end: number;
+        type: string;
         regionNumber?: number | undefined;
         reversed?: boolean | undefined;
         refName: string;
@@ -584,7 +576,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     };
     /**
      * #getter
@@ -598,7 +590,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean | undefined;
     } | undefined;
 } & {
     afterCreate(): void;
@@ -611,16 +603,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     type: import("mobx-state-tree").IType<string | undefined, string, string>;
     offsetPx: import("mobx-state-tree").IType<number | undefined, number, number>;
     bpPerPx: import("mobx-state-tree").IType<number | undefined, number, number>;
-    displayedRegions: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
-        refName: import("mobx-state-tree").ISimpleType<string>;
-        start: import("mobx-state-tree").ISimpleType<number>;
-        end: import("mobx-state-tree").ISimpleType<number>;
-        reversed: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    } & {
-        assemblyName: import("mobx-state-tree").ISimpleType<string>;
-    }, {
-        setRefName(newRefName: string): void;
-    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    displayedRegions: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<Region[], Region[], Region[]>, [undefined]>;
     tracks: import("mobx-state-tree").IArrayType<import("mobx-state-tree").IAnyType>;
     hideHeader: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;

package/dist/LinearGenomeView/model.js

@@ -120,7 +120,7 @@ function stateModelFactory(pluginManager) {
          * advised to use the entire set of chromosomes if your assembly is very
          * fragmented
          */
-        displayedRegions: mobx_state_tree_1.types.array(mst_1.Region),
+        displayedRegions: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.frozen(), []),
         /**
          * #property
          * array of currently displayed tracks state models instances
@@ -317,7 +317,7 @@ function stateModelFactory(pluginManager) {
          * #getter
          */
         get totalBp() {
-            return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0);
+            return (0, util_1.sum)(self.displayedRegions.map(r => r.end - r.start));
         },
         /**
          * #getter