@jbrowse/plugin-linear-genome-view 3.6.5 → 4.0.0

package/esm/LinearGenomeView/components/useRangeSelect.js

@@ -1,11 +1,16 @@
-import { useEffect, useState } from 'react';
-import { getRelativeX } from './util';
+import { useCallback, useEffect, useState } from 'react';
+import { getRelativeX } from "./util.js";
 export function useRangeSelect(ref, model, shiftOnly) {
     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) {
@@ -28,14 +33,18 @@ export function useRangeSelect(ref, model, shiftOnly) {
             if (startX !== undefined && ref.current) {
                 const { clientX, clientY } = event;
                 const offsetX = getRelativeX(event, ref.current);
+                const isClick = Math.abs(offsetX - startX) <= 3;
                 setAnchorPosition({
                     offsetX,
                     clientX,
                     clientY,
+                    isClick,
                 });
-                const args = computeOffsets(offsetX);
-                if (args) {
-                    model.setOffsets(args.leftOffset, args.rightOffset);
+                if (!isClick) {
+                    const args = computeOffsets(offsetX);
+                    if (args) {
+                        model.setOffsets(args.leftOffset, args.rightOffset);
+                    }
                 }
                 setGuideX(undefined);
             }
@@ -49,15 +58,7 @@ export function useRangeSelect(ref, model, shiftOnly) {
             };
         }
         return () => { };
-    }, [startX, mouseDragging, model, ref]);
-    useEffect(() => {
-        if (!mouseDragging &&
-            currentX !== undefined &&
-            startX !== undefined &&
-            Math.abs(currentX - startX) <= 3) {
-            handleClose();
-        }
-    }, [mouseDragging, currentX, startX]);
+    }, [startX, mouseDragging, model, ref, handleClose]);
     function mouseDown(event) {
         if (shiftOnly && !event.shiftKey) {
             return;
@@ -84,24 +85,27 @@ export function useRangeSelect(ref, model, shiftOnly) {
     function mouseOut() {
         setGuideX(undefined);
     }
-    function handleClose() {
-        setAnchorPosition(undefined);
-        setStartX(undefined);
-        setCurrentX(undefined);
-    }
     function handleMenuItemClick(_, callback) {
         callback();
         handleClose();
     }
     const open = Boolean(anchorPosition);
+    const isClick = anchorPosition?.isClick;
+    const clickBpOffset = isClick
+        ? model.pxToBp(anchorPosition.offsetX)
+        : undefined;
     if (startX === undefined) {
         return {
             open,
+            isClick,
+            clickBpOffset,
             guideX,
             mouseDown,
             mouseMove,
             mouseOut,
+            handleClose,
             handleMenuItemClick,
+            anchorPosition,
         };
     }
     const right = anchorPosition ? anchorPosition.offsetX : currentX || 0;
@@ -112,7 +116,9 @@ export function useRangeSelect(ref, model, shiftOnly) {
     const numOfBpSelected = Math.ceil(width * model.bpPerPx);
     return {
         open,
-        rubberbandOn: true,
+        isClick,
+        clickBpOffset,
+        rubberbandOn: !isClick,
         mouseDown,
         mouseMove,
         mouseOut,

package/esm/LinearGenomeView/components/useWheelScroll.js

@@ -1,8 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { sum } from '@jbrowse/core/util';
 export function useWheelScroll(ref, model) {
-    const delta = useRef(0);
+    const zoomDelta = useRef(0);
+    const scrollDelta = useRef(0);
     const timeout = useRef(null);
+    const rafId = useRef(0);
     const scheduled = useRef(false);
     useEffect(() => {
         let samples = [];
@@ -19,17 +21,19 @@ export function useWheelScroll(ref, model) {
                             ? 500
                             : 150
                         : 75;
-                delta.current += event.deltaY / normalizer;
-                model.setScaleFactor(delta.current < 0 ? 1 - delta.current : 1 / (1 + delta.current));
+                zoomDelta.current += event.deltaY / normalizer;
+                model.setScaleFactor(zoomDelta.current < 0
+                    ? 1 - zoomDelta.current
+                    : 1 / (1 + zoomDelta.current));
                 if (timeout.current) {
                     clearTimeout(timeout.current);
                 }
                 timeout.current = setTimeout(() => {
                     model.setScaleFactor(1);
-                    model.zoomTo(delta.current > 0
-                        ? model.bpPerPx * (1 + delta.current)
-                        : model.bpPerPx / (1 - delta.current), event.clientX - ((curr === null || curr === void 0 ? void 0 : curr.getBoundingClientRect().left) || 0));
-                    delta.current = 0;
+                    model.zoomTo(zoomDelta.current > 0
+                        ? model.bpPerPx * (1 + zoomDelta.current)
+                        : model.bpPerPx / (1 - zoomDelta.current), event.clientX - (curr?.getBoundingClientRect().left || 0));
+                    zoomDelta.current = 0;
                     samples = [];
                 }, 300);
             }
@@ -37,21 +41,27 @@ export function useWheelScroll(ref, model) {
                 if (Math.abs(event.deltaX) > Math.abs(2 * event.deltaY)) {
                     event.preventDefault();
                 }
-                delta.current += event.deltaX;
+                scrollDelta.current += event.deltaX;
                 if (!scheduled.current) {
                     scheduled.current = true;
-                    window.requestAnimationFrame(() => {
-                        model.horizontalScroll(delta.current);
-                        delta.current = 0;
+                    rafId.current = window.requestAnimationFrame(() => {
+                        model.horizontalScroll(scrollDelta.current);
+                        scrollDelta.current = 0;
                         scheduled.current = false;
                     });
                 }
             }
         }
         if (curr) {
-            curr.addEventListener('wheel', onWheel);
+            curr.addEventListener('wheel', onWheel, { passive: false });
             return () => {
                 curr.removeEventListener('wheel', onWheel);
+                if (timeout.current) {
+                    clearTimeout(timeout.current);
+                }
+                if (rafId.current) {
+                    cancelAnimationFrame(rafId.current);
+                }
             };
         }
         return () => { };

package/esm/LinearGenomeView/components/util.d.ts

@@ -1,17 +1,5 @@
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-import type { SearchScope } from '@jbrowse/core/TextSearch/TextSearchManager';
 import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
-import type { SearchType } from '@jbrowse/core/data_adapters/BaseAdapter';
-import type { TextSearchManager } from '@jbrowse/core/util';
-export declare function fetchResults({ queryString, searchType, searchScope, rankSearchResults, textSearchManager, assembly, }: {
-    queryString: string;
-    searchScope: SearchScope;
-    rankSearchResults: (results: BaseResult[]) => BaseResult[];
-    searchType?: SearchType;
-    textSearchManager?: TextSearchManager;
-    assembly?: Assembly;
-}): Promise<BaseResult[]>;
-export declare function splitLast(str: string, split: string): [string, string];
+export { fetchResults, splitLast } from '../../searchUtils.ts';
 export declare function getRelativeX(event: {
     clientX: number;
     target: EventTarget | null;
@@ -23,3 +11,4 @@ export declare function getCytobands(assembly: Assembly | undefined, refName: st
     type: string;
     name: any;
 }[];
+export declare function shouldSwapTracks(lastSwapY: number | undefined, currentY: number, movingDown: boolean): boolean;

package/esm/LinearGenomeView/components/util.js

@@ -1,40 +1,21 @@
-import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
-import { dedupe } from '@jbrowse/core/util';
-export async function fetchResults({ queryString, searchType, searchScope, rankSearchResults, textSearchManager, assembly, }) {
-    var _a;
-    if (!textSearchManager) {
-        console.warn('No text search manager');
-    }
-    const textSearchResults = (await (textSearchManager === null || textSearchManager === void 0 ? void 0 : textSearchManager.search({
-        queryString,
-        searchType,
-    }, searchScope, rankSearchResults))) || [];
-    const refNameResults = ((_a = assembly === null || assembly === void 0 ? void 0 : assembly.allRefNames) === null || _a === void 0 ? void 0 : _a.filter(ref => ref.toLowerCase().startsWith(queryString.toLowerCase())).slice(0, 10).map(r => new BaseResult({
-        label: r,
-    }))) || [];
-    return dedupe([...refNameResults, ...textSearchResults], elt => elt.getId());
-}
-export function splitLast(str, split) {
-    const lastIndex = str.lastIndexOf(split);
-    if (lastIndex === -1) {
-        return [str, ''];
-    }
-    else {
-        const before = str.slice(0, lastIndex);
-        const after = str.slice(lastIndex + 1);
-        return [before, after];
-    }
-}
+export { fetchResults, splitLast } from "../../searchUtils.js";
 export function getRelativeX(event, element) {
-    return event.clientX - ((element === null || element === void 0 ? void 0 : element.getBoundingClientRect().left) || 0);
+    return event.clientX - (element?.getBoundingClientRect().left || 0);
 }
 export function getCytobands(assembly, refName) {
-    var _a;
-    return (((_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.map(f => ({
+    return (assembly?.cytobands
+        ?.map(f => ({
         refName: assembly.getCanonicalRefName(f.get('refName')) || f.get('refName'),
         start: f.get('start'),
         end: f.get('end'),
         type: f.get('gieStain'),
         name: f.get('name'),
-    })).filter(f => f.refName === refName)) || []);
+    }))
+        .filter(f => f.refName === refName) || []);
+}
+const MIN_DRAG_DISTANCE = 30;
+export function shouldSwapTracks(lastSwapY, currentY, movingDown) {
+    return (lastSwapY === undefined ||
+        (movingDown && currentY > lastSwapY + MIN_DRAG_DISTANCE) ||
+        (!movingDown && currentY < lastSwapY - MIN_DRAG_DISTANCE));
 }

package/esm/LinearGenomeView/index.d.ts

@@ -1,3 +1,3 @@
 import type PluginManager from '@jbrowse/core/PluginManager';
 export default function LinearGenomeViewF(pluginManager: PluginManager): void;
-export * from './model';
+export * from './model.ts';

package/esm/LinearGenomeView/index.js

@@ -1,14 +1,14 @@
 import { lazy } from 'react';
 import { ViewType } from '@jbrowse/core/pluggableElementTypes';
-import { stateModelFactory } from './model';
+import { stateModelFactory } from "./model.js";
 export default function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new ViewType({
             name: 'LinearGenomeView',
             displayName: 'Linear genome view',
             stateModel: stateModelFactory(pluginManager),
-            ReactComponent: lazy(() => import('./components/LinearGenomeView')),
+            ReactComponent: lazy(() => import("./components/LinearGenomeView.js")),
         });
     });
 }
-export * from './model';
+export * from "./model.js";

package/esm/LinearGenomeView/keyboardHandler.d.ts

@@ -0,0 +1,2 @@
+import type { LinearGenomeViewModel } from './model.ts';
+export declare function setupKeyboardHandler(self: LinearGenomeViewModel): void;

package/esm/LinearGenomeView/keyboardHandler.js

@@ -0,0 +1,29 @@
+import { getSession } from '@jbrowse/core/util';
+import { addDisposer } from '@jbrowse/mobx-state-tree';
+export function setupKeyboardHandler(self) {
+    function handler(e) {
+        const session = getSession(self);
+        if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
+            if (e.code === 'ArrowLeft') {
+                e.preventDefault();
+                self.slide(-0.9);
+            }
+            else if (e.code === 'ArrowRight') {
+                e.preventDefault();
+                self.slide(0.9);
+            }
+            else if (e.code === 'ArrowUp') {
+                e.preventDefault();
+                self.zoom(self.bpPerPx / 2);
+            }
+            else if (e.code === 'ArrowDown') {
+                e.preventDefault();
+                self.zoom(self.bpPerPx * 2);
+            }
+        }
+    }
+    document.addEventListener('keydown', handler);
+    addDisposer(self, () => {
+        document.removeEventListener('keydown', handler);
+    });
+}

package/esm/LinearGenomeView/menuItems.d.ts

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from './model.ts';
+import type { BpOffset } from './types.ts';
+import type { MenuItem } from '@jbrowse/core/ui';
+export declare function rewriteOnClicks(self: LinearGenomeViewModel, trackType: string, viewMenuActions: MenuItem[]): void;
+export declare function buildMenuItems(self: LinearGenomeViewModel): MenuItem[];
+export declare function buildRubberBandMenuItems(self: LinearGenomeViewModel): MenuItem[];
+export declare function buildRubberbandClickMenuItems(self: LinearGenomeViewModel, clickOffset: BpOffset): MenuItem[];

package/esm/LinearGenomeView/menuItems.js

@@ -0,0 +1,299 @@
+import { lazy } from 'react';
+import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { getSession, isSessionWithAddTracks, toLocale, } from '@jbrowse/core/util';
+import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import LabelIcon from '@mui/icons-material/Label';
+import MenuOpenIcon from '@mui/icons-material/MenuOpen';
+import PaletteIcon from '@mui/icons-material/Palette';
+import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
+import SearchIcon from '@mui/icons-material/Search';
+import SyncAltIcon from '@mui/icons-material/SyncAlt';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+const ReturnToImportFormDialog = lazy(() => import('@jbrowse/core/ui/ReturnToImportFormDialog'));
+const SequenceSearchDialog = lazy(() => import("./components/SequenceSearchDialog.js"));
+const ExportSvgDialog = lazy(() => import("./components/ExportSvgDialog.js"));
+const GetSequenceDialog = lazy(() => import("./components/GetSequenceDialog.js"));
+function toLocaleRounded(n) {
+    return toLocale(Math.round(n));
+}
+export function rewriteOnClicks(self, trackType, viewMenuActions) {
+    for (const action of viewMenuActions) {
+        if ('subMenu' in action) {
+            rewriteOnClicks(self, trackType, action.subMenu);
+        }
+        if ('onClick' in action) {
+            const holdOnClick = action.onClick;
+            action.onClick = (...args) => {
+                for (const track of self.tracks) {
+                    if (track.type === trackType) {
+                        holdOnClick.apply(track, [track, ...args]);
+                    }
+                }
+            };
+        }
+    }
+}
+export function buildMenuItems(self) {
+    if (!self.hasDisplayedRegions) {
+        return [];
+    }
+    const { canShowCytobands, showCytobands } = self;
+    const session = getSession(self);
+    const menuItems = [
+        {
+            label: 'Return to import form',
+            onClick: () => {
+                session.queueDialog(handleClose => [
+                    ReturnToImportFormDialog,
+                    {
+                        model: self,
+                        handleClose,
+                    },
+                ]);
+            },
+            icon: FolderOpenIcon,
+        },
+        ...(isSessionWithAddTracks(session)
+            ? [
+                {
+                    label: 'Sequence search',
+                    icon: SearchIcon,
+                    onClick: () => {
+                        session.queueDialog(handleClose => [
+                            SequenceSearchDialog,
+                            {
+                                model: self,
+                                handleClose,
+                            },
+                        ]);
+                    },
+                },
+            ]
+            : []),
+        {
+            label: 'Export SVG',
+            icon: PhotoCameraIcon,
+            onClick: () => {
+                session.queueDialog(handleClose => [
+                    ExportSvgDialog,
+                    {
+                        model: self,
+                        handleClose,
+                    },
+                ]);
+            },
+        },
+        {
+            label: 'Open track selector',
+            onClick: self.activateTrackSelector,
+            icon: TrackSelectorIcon,
+        },
+        {
+            label: 'Horizontally flip',
+            icon: SyncAltIcon,
+            onClick: self.horizontallyFlip,
+        },
+        {
+            label: 'Color by CDS and draw amino acids',
+            type: 'checkbox',
+            checked: self.colorByCDS,
+            icon: PaletteIcon,
+            onClick: () => {
+                self.setColorByCDS(!self.colorByCDS);
+            },
+        },
+        {
+            label: 'Show...',
+            icon: VisibilityIcon,
+            subMenu: [
+                {
+                    label: 'Show all regions in assembly',
+                    onClick: self.showAllRegionsInAssembly,
+                },
+                {
+                    label: 'Show center line',
+                    type: 'checkbox',
+                    checked: self.showCenterLine,
+                    onClick: () => {
+                        self.setShowCenterLine(!self.showCenterLine);
+                    },
+                },
+                {
+                    label: 'Show header',
+                    type: 'checkbox',
+                    checked: !self.hideHeader,
+                    onClick: () => {
+                        self.setHideHeader(!self.hideHeader);
+                    },
+                },
+                {
+                    label: 'Show track outlines',
+                    type: 'checkbox',
+                    checked: self.showTrackOutlines,
+                    onClick: () => {
+                        self.setShowTrackOutlines(!self.showTrackOutlines);
+                    },
+                },
+                {
+                    label: 'Show header overview',
+                    type: 'checkbox',
+                    checked: !self.hideHeaderOverview,
+                    onClick: () => {
+                        self.setHideHeaderOverview(!self.hideHeaderOverview);
+                    },
+                    disabled: self.hideHeader,
+                },
+                {
+                    label: 'Show no tracks active button',
+                    type: 'checkbox',
+                    checked: !self.hideNoTracksActive,
+                    onClick: () => {
+                        self.setHideNoTracksActive(!self.hideNoTracksActive);
+                    },
+                },
+                {
+                    label: 'Show guidelines',
+                    type: 'checkbox',
+                    checked: self.showGridlines,
+                    onClick: () => {
+                        self.setShowGridlines(!self.showGridlines);
+                    },
+                },
+                ...(canShowCytobands
+                    ? [
+                        {
+                            label: 'Show ideogram',
+                            type: 'checkbox',
+                            checked: self.showCytobands,
+                            onClick: () => {
+                                self.setShowCytobands(!showCytobands);
+                            },
+                        },
+                    ]
+                    : []),
+            ],
+        },
+        {
+            label: 'Track labels',
+            icon: LabelIcon,
+            subMenu: [
+                {
+                    label: 'Overlapping',
+                    icon: VisibilityIcon,
+                    type: 'radio',
+                    checked: self.trackLabelsSetting === 'overlapping',
+                    onClick: () => {
+                        self.setTrackLabels('overlapping');
+                    },
+                },
+                {
+                    label: 'Offset',
+                    icon: VisibilityIcon,
+                    type: 'radio',
+                    checked: self.trackLabelsSetting === 'offset',
+                    onClick: () => {
+                        self.setTrackLabels('offset');
+                    },
+                },
+                {
+                    label: 'Hidden',
+                    icon: VisibilityIcon,
+                    type: 'radio',
+                    checked: self.trackLabelsSetting === 'hidden',
+                    onClick: () => {
+                        self.setTrackLabels('hidden');
+                    },
+                },
+            ],
+        },
+    ];
+    for (const [key, value] of self.trackTypeActions.entries()) {
+        if (value.length) {
+            menuItems.push({
+                type: 'divider',
+            }, {
+                type: 'subHeader',
+                label: key,
+            });
+            for (const action of value) {
+                menuItems.push(action);
+            }
+        }
+    }
+    return menuItems;
+}
+export function buildRubberBandMenuItems(self) {
+    const { leftOffset, rightOffset } = self;
+    const leftRef = leftOffset?.refName ?? '';
+    const rightRef = rightOffset?.refName ?? '';
+    const leftCoord = toLocaleRounded((leftOffset?.coord ?? 0) + 1);
+    const rightCoord = toLocaleRounded(rightOffset?.coord ?? 0);
+    const rangeString = leftRef === rightRef
+        ? `${leftRef}:${leftCoord}-${rightCoord}`
+        : `${leftRef}:${leftCoord}..${rightRef}:${rightCoord}`;
+    return [
+        {
+            label: 'Zoom to region',
+            icon: ZoomInIcon,
+            onClick: () => {
+                self.moveTo(self.leftOffset, self.rightOffset);
+            },
+        },
+        {
+            label: 'Get sequence',
+            icon: MenuOpenIcon,
+            onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                    GetSequenceDialog,
+                    {
+                        model: self,
+                        handleClose,
+                    },
+                ]);
+            },
+        },
+        {
+            label: 'Copy range',
+            icon: ContentCopyIcon,
+            onClick: async () => {
+                const { default: copy } = await import('copy-to-clipboard');
+                copy(rangeString);
+            },
+        },
+    ];
+}
+export function buildRubberbandClickMenuItems(self, clickOffset) {
+    const { coord, refName } = clickOffset;
+    if (coord === undefined || refName === undefined) {
+        return [];
+    }
+    const locString = `${refName}:${toLocaleRounded(coord + 1)}`;
+    return [
+        {
+            label: 'Center view here',
+            icon: CenterFocusStrongIcon,
+            onClick: () => {
+                self.centerAt(coord, refName);
+            },
+        },
+        {
+            label: 'Zoom to base level',
+            icon: ZoomInIcon,
+            onClick: () => {
+                self.centerAt(coord, refName);
+                self.zoomTo(self.minBpPerPx);
+            },
+        },
+        {
+            label: `Copy coordinate (${locString})`,
+            icon: ContentCopyIcon,
+            onClick: async () => {
+                const { default: copy } = await import('copy-to-clipboard');
+                copy(locString);
+            },
+        },
+    ];
+}