@jbrowse/plugin-linear-genome-view 2.11.2 → 2.12.1

package/esm/LinearGenomeView/components/TrackLabel.js

@@ -25,10 +25,7 @@ const useStyles = makeStyles()(theme => ({
         },
     },
     trackName: {
-        margin: '0 auto',
-        width: '90%',
         fontSize: '0.8rem',
-        pointerEvents: 'none',
     },
     iconButton: {
         padding: theme.spacing(1),
@@ -82,7 +79,10 @@ const TrackLabel = observer(React.forwardRef(function TrackLabel2({ track, class
         React.createElement(TrackLabelDragHandle, { track: track, trackId: trackId, view: view }),
         React.createElement(IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             React.createElement(CloseIcon, { fontSize: "small" })),
-        React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName },
+        React.createElement(Typography, { variant: "body1", component: "span", className: classes.trackName, onMouseDown: event => {
+                // avoid becoming a click-and-drag action on the lgv
+                event.stopPropagation();
+            } },
             React.createElement(SanitizedHTML, { html: [trackName, minimized ? '(minimized)' : '']
                     .filter(f => !!f)
                     .join(' ') })),

package/esm/LinearGenomeView/components/TrackRenderingContainer.js

@@ -26,19 +26,24 @@ const TrackRenderingContainer = observer(function ({ model, track, onDragEnter,
     const { classes } = useStyles();
     const display = track.displays[0];
     const { height, RenderingComponent, DisplayBlurb } = display;
+    const { trackRefs, id, scaleFactor } = model;
     const trackId = getConf(track, 'trackId');
     const ref = useRef(null);
     const minimized = track.minimized;
     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.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.createElement(React.Fragment, null,
-        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: { transform: `scaleX(${model.scaleFactor})` } },
+    }, [trackRefs, trackId]);
+    return (React.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.createElement(React.Fragment, null,
+        React.createElement("div", { ref: ref, className: classes.renderingComponentContainer, style: {
+                transform: scaleFactor !== 1 ? `scaleX(${scaleFactor})` : undefined,
+            } },
             React.createElement(Suspense, { fallback: React.createElement(LoadingEllipses, null) },
                 React.createElement(RenderingComponent, { model: display, onHorizontalScroll: model.horizontalScroll }))),
         DisplayBlurb ? (React.createElement("div", { style: {

package/esm/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;
     };
     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;
     };
     anchorPosition: AnchorPosition | undefined;
     numOfBpSelected: number;

package/esm/LinearGenomeView/components/hooks.js

@@ -1,5 +1,4 @@
 import { useRef, useEffect, useState } from 'react';
-import normalizeWheel from 'normalize-wheel';
 import { getRelativeX } from './util';
 export function useSideScroll(model) {
     const [mouseDragging, setMouseDragging] = useState(false);
@@ -206,11 +205,10 @@ export 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 = normalizeWheel(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);
@@ -219,7 +217,7 @@ export 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);
             }
@@ -227,10 +225,10 @@ export 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/esm/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>;
@@ -94,15 +85,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
 } & {
     volatileWidth: number | undefined;
     minimumBlockWidth: number;
-    draggingTrackId: string | undefined;
+    draggingTrackId: undefined | string;
     volatileError: unknown;
     afterDisplayedRegionsSetCallbacks: Function[];
     scaleFactor: number;
     trackRefs: Record<string, HTMLDivElement>;
     coarseDynamicBlocks: BaseBlock[];
     coarseTotalBp: number;
-    leftOffset: BpOffset | undefined;
-    rightOffset: BpOffset | undefined;
+    leftOffset: undefined | BpOffset;
+    rightOffset: undefined | BpOffset;
 } & {
     /**
      * #getter
@@ -336,7 +327,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     /**
      * #action
      */
-    setTrackLabels(setting: 'overlapping' | 'offset' | 'hidden'): void;
+    setTrackLabels(setting: "overlapping" | "offset" | "hidden"): void;
     /**
      * #action
      */
@@ -365,15 +356,15 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         start: number;
         end: number;
         type: string;
-        regionNumber?: number | undefined;
-        reversed?: boolean | undefined;
+        regionNumber?: number;
+        reversed?: boolean;
         refName: string;
         assemblyName: string;
         key: string;
         offsetPx: number;
         widthPx: number;
-        variant?: string | undefined;
-        isLeftEndOfDisplayedRegion?: boolean | undefined;
+        variant?: string;
+        isLeftEndOfDisplayedRegion?: boolean;
     }[];
     /**
      * #action
@@ -585,7 +576,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean;
     };
     /**
      * #getter
@@ -599,7 +590,7 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
         offset: number;
         start: number;
         end: number;
-        reversed: boolean;
+        reversed?: boolean;
     } | undefined;
 } & {
     afterCreate(): void;
@@ -612,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/esm/LinearGenomeView/model.js

@@ -1,7 +1,7 @@
 import { lazy } from 'react';
 import { getConf } from '@jbrowse/core/configuration';
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-import { ElementId, Region as MUIRegion } from '@jbrowse/core/util/types/mst';
+import { ElementId } from '@jbrowse/core/util/types/mst';
 import { assembleLocString, clamp, findLast, getContainingView, getSession, isViewContainer, isSessionModelWithWidgets, isSessionWithAddTracks, localStorageGetItem, localStorageSetItem, measureText, springAnimate, sum, } from '@jbrowse/core/util';
 import calculateDynamicBlocks from '@jbrowse/core/util/calculateDynamicBlocks';
 import calculateStaticBlocks from '@jbrowse/core/util/calculateStaticBlocks';
@@ -91,7 +91,7 @@ export function stateModelFactory(pluginManager) {
          * advised to use the entire set of chromosomes if your assembly is very
          * fragmented
          */
-        displayedRegions: types.array(MUIRegion),
+        displayedRegions: types.optional(types.frozen(), []),
         /**
          * #property
          * array of currently displayed tracks state models instances
@@ -288,7 +288,7 @@ export function stateModelFactory(pluginManager) {
          * #getter
          */
         get totalBp() {
-            return self.displayedRegions.reduce((a, b) => a + b.end - b.start, 0);
+            return sum(self.displayedRegions.map(r => r.end - r.start));
         },
         /**
          * #getter

package/esm/LinearGenomeView/util.d.ts

@@ -23,9 +23,9 @@ export declare function makeTicks(start: number, end: number, bpPerPx: number, e
 export declare function generateLocations(regions: ParsedLocString[] | undefined, assemblyManager: AssemblyManager, assemblyName?: string): Promise<{
     assemblyName: string;
     parentRegion: import("@jbrowse/core/assemblyManager/assembly").BasicRegion;
-    end?: number | undefined;
-    start?: number | undefined;
-    reversed?: boolean | undefined;
+    end?: number;
+    start?: number;
+    reversed?: boolean;
     refName: string;
 }[]>;
 /**