@jbrowse/plugin-breakpoint-split-view 3.7.0 → 4.0.0

package/esm/BreakpointSplitView/components/useRangeSelect.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useState } from 'react';
+import { transaction } from 'mobx';
+import { getRelativeX } from "./rubberbandUtil.js";
+export function useRangeSelect(ref, model) {
+    const [startX, setStartX] = useState();
+    const [currentX, setCurrentX] = useState();
+    const [anchorPosition, setAnchorPosition] = useState();
+    const [guideX, setGuideX] = useState();
+    const mouseDragging = startX !== undefined && anchorPosition === undefined;
+    const handleClose = useCallback(() => {
+        setAnchorPosition(undefined);
+        setStartX(undefined);
+        setCurrentX(undefined);
+    }, []);
+    useEffect(() => {
+        function computeOffsets(offsetX) {
+            if (startX === undefined) {
+                return;
+            }
+            const leftPx = Math.min(startX, offsetX);
+            const rightPx = Math.max(startX, offsetX);
+            return model.views.map(view => ({
+                leftOffset: view.pxToBp(leftPx),
+                rightOffset: view.pxToBp(rightPx),
+            }));
+        }
+        function globalMouseMove(event) {
+            if (ref.current && mouseDragging) {
+                const relativeX = getRelativeX(event, ref.current);
+                setCurrentX(relativeX);
+            }
+        }
+        function globalMouseUp(event) {
+            if (startX !== undefined && ref.current) {
+                const { clientX, clientY } = event;
+                const offsetX = getRelativeX(event, ref.current);
+                if (Math.abs(offsetX - startX) <= 3) {
+                    handleClose();
+                    return;
+                }
+                setAnchorPosition({
+                    offsetX,
+                    clientX,
+                    clientY,
+                });
+                const offsets = computeOffsets(offsetX);
+                if (offsets) {
+                    transaction(() => {
+                        for (const [idx, elt] of offsets.entries()) {
+                            model.views[idx].setOffsets(elt.leftOffset, elt.rightOffset);
+                        }
+                    });
+                }
+                setGuideX(undefined);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove);
+            window.addEventListener('mouseup', globalMouseUp);
+            return () => {
+                window.removeEventListener('mousemove', globalMouseMove);
+                window.removeEventListener('mouseup', globalMouseUp);
+            };
+        }
+        return () => { };
+    }, [startX, mouseDragging, model, ref, handleClose]);
+    function mouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const relativeX = getRelativeX(event, ref.current);
+        setStartX(relativeX);
+        setCurrentX(relativeX);
+    }
+    function mouseMove(event) {
+        setGuideX(getRelativeX(event, ref.current));
+    }
+    function mouseOut() {
+        setGuideX(undefined);
+        transaction(() => {
+            for (const view of model.views) {
+                view.setOffsets(undefined, undefined);
+            }
+        });
+    }
+    function handleMenuItemClick(_, callback) {
+        callback();
+        handleClose();
+    }
+    const open = Boolean(anchorPosition);
+    if (startX === undefined) {
+        return {
+            open,
+            guideX,
+            mouseDown,
+            mouseMove,
+            mouseOut,
+            handleMenuItemClick,
+        };
+    }
+    const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
+    const left = Math.min(right, startX);
+    const width = Math.abs(right - startX);
+    const leftBpOffset = model.views.map(view => view.pxToBp(left));
+    const rightBpOffset = model.views.map(view => view.pxToBp(left + width));
+    const numOfBpSelected = model.views.map(view => Math.ceil(width * view.bpPerPx));
+    return {
+        open,
+        rubberbandOn: true,
+        mouseDown,
+        mouseMove,
+        mouseOut,
+        handleClose,
+        handleMenuItemClick,
+        leftBpOffset,
+        rightBpOffset,
+        anchorPosition,
+        numOfBpSelected,
+        width,
+        left,
+    };
+}

package/esm/BreakpointSplitView/components/util.js

@@ -32,13 +32,12 @@ export function getBadlyPairedAlignments(features) {
     return [...candidates.values()].filter(v => v.length > 1);
 }
 export function getMatchedAlignmentFeatures(features) {
-    var _a;
     const candidates = new Map();
     const alreadySeen = new Set();
     for (const feature of features.values()) {
         const id = feature.id();
         const unmapped = feature.get('flags') & 4;
-        const hasSA = !!((_a = feature.get('tags')) === null || _a === void 0 ? void 0 : _a.SA);
+        const hasSA = !!feature.get('tags')?.SA;
         if (!alreadySeen.has(id) && !unmapped && hasSA) {
             const n = feature.get('name');
             let val = candidates.get(n);

package/esm/BreakpointSplitView/getClip.js

@@ -1,7 +1,7 @@
-const startClip = new RegExp(/(\d+)[SH]$/);
-const endClip = new RegExp(/^(\d+)([SH])/);
+const startClip = /(\d+)[SH]$/;
+const endClip = /^(\d+)([SH])/;
 export function getClip(cigar, strand) {
     return strand === -1
-        ? +(startClip.exec(cigar) || [])[1] || 0
-        : +(endClip.exec(cigar) || [])[1] || 0;
+        ? +(startClip.exec(cigar)?.[1] ?? 0)
+        : +(endClip.exec(cigar)?.[1] ?? 0);
 }

package/esm/BreakpointSplitView/index.js

@@ -1,13 +1,13 @@
 import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
-import stateModelFactory from './model';
+import stateModelFactory from "./model.js";
 export default function BreakpointSplitViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'BreakpointSplitView',
             displayName: 'Breakpoint split view',
             stateModel: stateModelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/BreakpointSplitView')),
+            ReactComponent: lazy(() => import("./components/BreakpointSplitView.js")),
         });
     });
 }