@jbrowse/plugin-linear-genome-view 4.2.1 → 5.0.0-beta.1

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const TracksContainer: ({ children, model, }: {
     children: React.ReactNode;
     model: LGV;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default TracksContainer;

package/esm/LinearGenomeView/components/TracksContainer.js

@@ -1,49 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef } from 'react';
-import { Menu } from '@jbrowse/core/ui';
-import { getEnv } from '@jbrowse/core/util';
+import { PluggableElements } from '@jbrowse/core/ui';
+import { OverlayPointerProvider } from '@jbrowse/core/ui/highlightChipReveal';
+import { useMouseTracking } from '@jbrowse/core/ui/useMouseTracking';
+import { getEnv, getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import Gridlines from "./Gridlines.js";
-import Rubberband from "./Rubberband.js";
-import Scalebar from "./Scalebar.js";
-import VerticalGuide from "./VerticalGuide.js";
-import { SCALE_BAR_HEIGHT } from "../consts.js";
-import { useRangeSelect } from "./useRangeSelect.js";
-import { useSideScroll } from "./useSideScroll.js";
-import { useWheelScroll } from "./useWheelScroll.js";
-const CenterLine = lazy(() => import("./CenterLine.js"));
-const Highlight = lazy(() => import("./Highlight.js"));
-const RubberbandSpan = lazy(() => import("./RubberbandSpan.js"));
+import { SCALE_BAR_HEIGHT } from '../consts.js';
+import Gridlines from './Gridlines.js';
+import OverviewHighlightBand from './OverviewHighlightBand.js';
+import PaddingBlocks from './PaddingBlocks.js';
+import RangeSelectOverlay from './RangeSelectOverlay.js';
+import Rubberband from './Rubberband.js';
+import Scalebar from './Scalebar.js';
+import VerticalGuide from './VerticalGuide.js';
+import { useRangeSelect } from './useRangeSelect.js';
+import { useSideScroll } from './useSideScroll.js';
+import { getHighlightColor, highlightKey } from './util.js';
+const CenterLine = lazy(() => import('./CenterLine.js'));
+const Highlight = lazy(() => import('./Highlight.js'));
 const useStyles = makeStyles()({
     tracksContainer: {
         position: 'relative',
         contain: 'layout style',
     },
+    scalebarHighlights: {
+        position: 'absolute',
+        top: 0,
+        height: SCALE_BAR_HEIGHT,
+        width: '100%',
+        // above Rubberband div (825) so bands show over the scalebar,
+        // below RubberbandSpan (830) so the selection rect stays on top
+        zIndex: 826,
+        pointerEvents: 'none',
+    },
 });
 const TracksContainer = observer(function TracksContainer({ children, model, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(model);
-    const { mouseDown: mouseDown1, mouseUp } = useSideScroll(model);
-    const { stickyViewHeaders, rubberbandTop, showGridlines, showCenterLine, isScalebarRefNameMenuOpen, } = model;
+    const { mouseDown: sideScrollMouseDown, mouseUp } = useSideScroll(model);
+    const { showGridlines, showCenterLine } = model;
     const ref = useRef(null);
-    const { guideX, rubberbandOn, leftBpOffset, rightBpOffset, numOfBpSelected, width, left, anchorPosition, open, isClick, clickBpOffset, handleMenuItemClick, handleClose, mouseMove, mouseDown: mouseDown2, } = useRangeSelect(ref, model, true);
-    useWheelScroll(ref, model);
-    const additional = pluginManager.evaluateExtensionPoint('LinearGenomeView-TracksContainerComponent', undefined, { model });
-    return (_jsxs("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
-            mouseDown1(event);
-            mouseDown2(event);
-        }, onMouseMove: mouseMove, onMouseUp: mouseUp, children: [showGridlines ? _jsx(Gridlines, { model: model }) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), guideX !== undefined && !isScalebarRefNameMenuOpen ? (_jsx(VerticalGuide, { model: model, coordX: guideX })) : rubberbandOn ? (_jsx(Suspense, { fallback: null, children: _jsx(RubberbandSpan, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, numOfBpSelected: numOfBpSelected, width: width, left: left, top: rubberbandTop, sticky: stickyViewHeaders }) })) : null, model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), anchorPosition ? (_jsx(Menu, { anchorReference: "anchorPosition", anchorPosition: {
-                    left: anchorPosition.clientX,
-                    top: anchorPosition.clientY,
-                }, onMenuItemClick: handleMenuItemClick, open: open, onClose: handleClose, menuItems: isClick && clickBpOffset
-                    ? model.rubberbandClickMenuItems(clickBpOffset)
-                    : model.rubberBandMenuItems() })) : null, _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
-                        height: SCALE_BAR_HEIGHT,
-                        boxSizing: 'border-box',
-                    } }) }), _jsx(HighlightGroup, { model: model }), additional, children] }));
+    // shift-drag range select over the whole tracks area. This is intentionally
+    // a separate range-select instance from the one inside <Rubberband> (the
+    // scalebar control); don't dedupe them — they cover different regions.
+    const range = useRangeSelect(ref, model, true);
+    // published rather than held (see `useMouseTracking`): the highlight bands
+    // read it, and a position in state here would re-render the whole tracks area
+    // every frame the pointer moves over it
+    const { mouseTracker, handleMouseMove, handleMouseLeave } = useMouseTracking();
+    return (_jsx("div", { ref: ref, "data-testid": "tracksContainer", className: classes.tracksContainer, onMouseDown: event => {
+            sideScrollMouseDown(event);
+            range.mouseDown(event);
+        }, onMouseMove: event => {
+            handleMouseMove(event);
+            range.mouseMove(event);
+        }, onMouseLeave: () => {
+            handleMouseLeave();
+            range.mouseOut();
+        }, onMouseUp: mouseUp, children: _jsxs(OverlayPointerProvider, { value: mouseTracker, children: [showGridlines ? (_jsxs(_Fragment, { children: [_jsx(Gridlines, { model: model }), _jsx(PaddingBlocks, { model: model })] })) : null, _jsx(Suspense, { fallback: null, children: showCenterLine ? _jsx(CenterLine, { model: model }) : null }), _jsx(RangeSelectOverlay, { model: model, range: range }), model.volatileGuides.map((guide, idx) => (_jsx(VerticalGuide, { model: model, coordX: guide.xPos }, idx))), _jsx(Rubberband, { model: model, ControlComponent: _jsx(Scalebar, { model: model, style: {
+                            height: SCALE_BAR_HEIGHT,
+                            boxSizing: 'border-box',
+                        } }) }), _jsx(ScalebarHighlightGroup, { model: model }), _jsx(HighlightGroup, { model: model }), _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-TracksContainerComponent", props: { model } }), children] }) }));
 });
 const HighlightGroup = observer(function HighlightGroup({ model, }) {
-    return model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, `${JSON.stringify(highlight)}-${idx}`))) })) : null;
+    return getSession(model).highlightsVisible && model.highlight.length ? (_jsx(Suspense, { fallback: null, children: model.highlight.map((highlight, idx) => (_jsx(Highlight, { model: model, highlight: highlight }, highlightKey(highlight, idx)))) })) : null;
+});
+const ScalebarHighlightGroup = observer(function ScalebarHighlightGroup({ model, }) {
+    const theme = useTheme();
+    const { pluginManager } = getEnv(model);
+    const { classes } = useStyles();
+    const viewBands = getSession(model).highlightsVisible
+        ? model.highlight.map((h, idx) => {
+            const coords = model.getHighlightCoords(h);
+            return coords ? (_jsx(OverviewHighlightBand, { coords: coords, background: getHighlightColor(h, theme).toRgbString() }, highlightKey(h, idx))) : null;
+        })
+        : [];
+    return (_jsxs("div", { className: classes.scalebarHighlights, children: [viewBands, _jsx(PluggableElements, { pluginManager: pluginManager, name: "LinearGenomeView-ScalebarHighlightComponent", props: { model } })] }));
 });
 export default TracksContainer;

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

@@ -3,5 +3,5 @@ type LGV = LinearGenomeViewModel;
 declare const VerticalGuide: ({ model, coordX, }: {
     model: LGV;
     coordX: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default VerticalGuide;

package/esm/LinearGenomeView/components/VerticalGuide.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { stringify } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { GuideLabel } from '../../shared/coordLabels.js';
+import { stickyChromeTops } from '../stickyChrome.js';
 const useStyles = makeStyles()({
     guide: {
         pointerEvents: 'none',
@@ -13,19 +14,11 @@ const useStyles = makeStyles()({
         background: 'red',
         zIndex: 1001,
     },
-    tooltipTarget: {
-        position: 'sticky',
-        left: 0,
-        width: 1,
-    },
 });
 const VerticalGuide = observer(function VerticalGuide({ model, coordX, }) {
     const { classes } = useStyles();
-    const { stickyViewHeaders, rubberbandTop } = model;
-    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { open: true, placement: "top", title: stringify(model.pxToBp(coordX)), arrow: true, children: _jsx("div", { className: classes.tooltipTarget, style: {
-                        transform: `translateX(${coordX + 6}px)`,
-                        top: rubberbandTop,
-                        position: stickyViewHeaders ? 'sticky' : undefined,
-                    } }) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
+    const { width, stickyViewHeaders, headerHeight } = model;
+    const { scalebar } = stickyChromeTops({ stickyViewHeaders, headerHeight });
+    return (_jsxs(_Fragment, { children: [_jsx(GuideLabel, { coordX: coordX, viewWidth: width, stickyTop: scalebar, children: stringify(model.pxToBp(coordX)) }), _jsx("div", { className: classes.guide, style: { transform: `translateX(${coordX}px)` } })] }));
 });
 export default VerticalGuide;

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

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+declare const ZoomButton: ({ model, direction, small, }: {
+    model: LinearGenomeViewModel;
+    direction: 'in' | 'out';
+    small?: boolean;
+}) => import("react").JSX.Element;
+export default ZoomButton;

package/esm/LinearGenomeView/components/ZoomButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ZoomIn from '@mui/icons-material/ZoomIn';
+import ZoomOut from '@mui/icons-material/ZoomOut';
+import { IconButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+// epsilon guards against the button flickering to disabled from float rounding
+// exactly at the zoom limit
+const EPSILON = 0.0001;
+const ZoomButton = observer(function ZoomButton({ model, direction, small, }) {
+    // disabled tracks the debounced coarseBpPerPx (not live bpPerPx) so it doesn't
+    // flicker disabled during a zoom animation
+    const { maxBpPerPx, minBpPerPx, coarseBpPerPx } = model;
+    const out = direction === 'out';
+    const disabled = out
+        ? coarseBpPerPx >= maxBpPerPx - EPSILON
+        : coarseBpPerPx <= minBpPerPx + EPSILON;
+    const fontSize = small ? 'small' : undefined;
+    return (_jsx(Tooltip, { title: out ? 'Zoom out 2x' : 'Zoom in 2x', children: _jsx("span", { children: _jsx(IconButton, { "data-testid": out ? 'zoom_out' : 'zoom_in', size: small ? 'small' : undefined, disabled: disabled, onClick: () => {
+                    model.zoom(out ? model.bpPerPx * 2 : model.bpPerPx / 2);
+                }, children: out ? (_jsx(ZoomOut, { fontSize: fontSize })) : (_jsx(ZoomIn, { fontSize: fontSize })) }) }) }));
+});
+export default ZoomButton;

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

@@ -0,0 +1,9 @@
+import type { LinearGenomeViewModel } from '../index.ts';
+import type { ReactNode } from 'react';
+type LGV = LinearGenomeViewModel;
+declare const ZoomTransform: ({ model, offset, children, }: {
+    model: LGV;
+    offset?: number;
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export default ZoomTransform;

package/esm/LinearGenomeView/components/ZoomTransform.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()({
+    zoomContainer: {
+        position: 'absolute',
+        top: 0,
+        height: '100%',
+        width: '100%',
+        pointerEvents: 'none',
+    },
+    innerContainer: {
+        position: 'absolute',
+        height: '100%',
+        pointerEvents: 'none',
+    },
+});
+// Shared zoom/scroll-transform wrapper for the gridline ticks and padding-block
+// overlays. Lays the overlay out in the staticBlocks frame and shifts it into
+// the viewport by `staticBlocksTranslateX`, so it tracks scroll — but a
+// re-render only patches this div's transform plus the child's path `d`
+// strings, so it stays cheap per frame.
+const ZoomTransform = observer(function ZoomTransform({ model, offset = 0, children, }) {
+    const { classes } = useStyles();
+    const { staticBlocks, staticBlocksTranslateX } = model;
+    return (_jsx("div", { className: classes.zoomContainer, children: _jsx("div", { className: classes.innerContainer, style: {
+                // unrounded, unlike ScalebarCoordinateLabels: the children here are
+                // paths and boxes rather than text, so there is no glyph to blur
+                transform: `translateX(${staticBlocksTranslateX - offset}px)`,
+                width: staticBlocks.totalWidthPx,
+            }, children: children }) }));
+});
+export default ZoomTransform;

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

@@ -0,0 +1 @@
+export declare const DEFAULT_MOTIFS = "# name<space>site \u2014 '^' or, cutting downstream, '(n/m)'. Edit freely.\nEcoRI   G^AATTC\nBamHI   G^GATCC\nHindIII A^AGCTT\nNotI    GC^GGCCGC\nXhoI    C^TCGAG\nSalI    G^TCGAC\nPstI    CTGCA^G\nSmaI    CCC^GGG\nKpnI    GGTAC^C\nSacI    GAGCT^C\nXbaI    T^CTAGA\nSpeI    A^CTAGT\nNcoI    C^CATGG\nNdeI    CA^TATG\nEcoRV   GAT^ATC\nBglII   A^GATCT";

package/esm/LinearGenomeView/components/defaultMotifs.js

@@ -0,0 +1,22 @@
+// A starting point, not a database: this is only the initial value of the motif
+// textarea, so a user can wipe it and paste their own enzyme set (or any motif
+// set at all) from REBASE or elsewhere. Sites use REBASE notation: '^' for a cut
+// inside the site, '(n/m)' for the type IIS enzymes that cut downstream of it —
+// the prefill sticks to the classic '^' cutters, but both parse.
+export const DEFAULT_MOTIFS = `# name<space>site — '^' or, cutting downstream, '(n/m)'. Edit freely.
+EcoRI   G^AATTC
+BamHI   G^GATCC
+HindIII A^AGCTT
+NotI    GC^GGCCGC
+XhoI    C^TCGAG
+SalI    G^TCGAC
+PstI    CTGCA^G
+SmaI    CCC^GGG
+KpnI    GGTAC^C
+SacI    GAGCT^C
+XbaI    T^CTAGA
+SpeI    A^CTAGT
+NcoI    C^CATGG
+NdeI    CA^TATG
+EcoRV   GAT^ATC
+BglII   A^GATCT`;

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

@@ -1,9 +1,8 @@
-import type { BpOffset } from '../types.ts';
-import type { Feature } from '@jbrowse/core/util';
+import type { StatusCallback } from '@jbrowse/core/util';
+import type { StopToken } from '@jbrowse/core/util/stopToken';
 import type { Region } from '@jbrowse/core/util/types';
-export declare function fetchSequence(model: {
-    leftOffset?: BpOffset;
-    rightOffset?: BpOffset;
-    getSelectedRegions: (left?: BpOffset, right?: BpOffset) => Region[];
-    setOffsets: (left?: BpOffset, right?: BpOffset) => void;
-}, regions: Region[]): Promise<Feature[]>;
+import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
+export declare function fetchSequence(model: IAnyStateTreeNode, regions: Region[], opts?: {
+    stopToken?: StopToken;
+    statusCallback?: StatusCallback;
+}): Promise<import("@jbrowse/core/util").Feature[]>;

package/esm/LinearGenomeView/components/fetchSequence.js

@@ -1,26 +1,34 @@
-import { getConf } from '@jbrowse/core/configuration';
+import { getSequenceAdapterConfig } from '@jbrowse/core/assemblyManager/assembly';
 import { getSession } from '@jbrowse/core/util';
-export async function fetchSequence(model, regions) {
+export async function fetchSequence(model, regions, opts = {}) {
     const session = getSession(model);
-    const { leftOffset, rightOffset } = model;
-    if (!leftOffset || !rightOffset) {
-        throw new Error('no offsets on model to use for range');
-    }
     const assemblyNames = new Set(regions.map(r => r.assemblyName));
     if (assemblyNames.size > 1) {
         throw new Error('not able to fetch sequences from multiple assemblies currently');
     }
     const { rpcManager, assemblyManager } = session;
-    const assemblyName = leftOffset.assemblyName || rightOffset.assemblyName || '';
+    const assemblyName = regions[0]?.assemblyName;
+    if (!assemblyName) {
+        throw new Error('no assemblyName found on the selected region');
+    }
     const assembly = assemblyManager.get(assemblyName);
     if (!assembly) {
         throw new Error(`assembly ${assemblyName} not found`);
     }
-    const adapterConfig = getConf(assembly, ['sequence', 'adapter']);
+    // Undefined here means the assembly's `configuration` safeReference is
+    // unresolved — the assembly outlived the config entry it points at. NOT an
+    // assembly whose sequence carries no residues: a ChromSizesAdapter one still
+    // has a `sequence.adapter`, and fails later, inside the adapter. Say which
+    // this is; passing the undefined on fails in getAdapterPre as "could not
+    // determine adapter type", naming neither the assembly nor what was wanted.
+    const adapterConfig = getSequenceAdapterConfig(assembly);
+    if (!adapterConfig) {
+        throw new Error(`assembly ${assemblyName} has no resolved configuration, so its sequence adapter cannot be read`);
+    }
     const sessionId = 'getSequence';
     return rpcManager.call(sessionId, 'CoreGetFeatures', {
         adapterConfig,
         regions,
-        sessionId,
+        ...opts,
     });
 }

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

@@ -0,0 +1,15 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+import type { MenuItem, RecentLocation } from '@jbrowse/core/ui';
+/**
+ * What a navigated result is worth remembering as. The display string is what
+ * the row shows; the location is what reopening it opens, and is absent for a
+ * freehand query, whose label is the searchable thing. Paired with the
+ * `BaseResult` the menu rebuilds below so the round trip stays visible in one
+ * place: a row replayed through it records the same pair it came from.
+ */
+export declare function recentLocationOf(option: BaseResult): RecentLocation;
+export declare function recentLocationsMenu({ recentLocations, onNavigate, onClear, }: {
+    recentLocations: RecentLocation[];
+    onNavigate: (option: BaseResult) => void;
+    onClear: () => void;
+}): MenuItem[];

package/esm/LinearGenomeView/components/recentLocationsMenu.js

@@ -0,0 +1,36 @@
+import BaseResult from '@jbrowse/core/TextSearch/BaseResults';
+/**
+ * What a navigated result is worth remembering as. The display string is what
+ * the row shows; the location is what reopening it opens, and is absent for a
+ * freehand query, whose label is the searchable thing. Paired with the
+ * `BaseResult` the menu rebuilds below so the round trip stays visible in one
+ * place: a row replayed through it records the same pair it came from.
+ */
+export function recentLocationOf(option) {
+    return { label: option.getDisplayString(), loc: option.getLocation() };
+}
+// Builds the "Recent ▸" submenu shared by the header search box and the import
+// form overflow menus, so both surfaces stay identical. Empty when there is no
+// history yet, so the ⋮ button only appears once there is something to show.
+export function recentLocationsMenu({ recentLocations, onNavigate, onClear, }) {
+    return recentLocations.length
+        ? [
+            {
+                label: 'Recent',
+                subMenu: [
+                    ...recentLocations.map(({ label, loc }) => ({
+                        label,
+                        onClick: () => {
+                            // a row that recorded a location navigates straight to it; one
+                            // with only a label goes back through the search path, which is
+                            // where a freehand query resolved the first time
+                            onNavigate(new BaseResult({ label, locString: loc }));
+                        },
+                    })),
+                    { type: 'divider' },
+                    { label: 'Clear recent locations', onClick: onClear },
+                ],
+            },
+        ]
+        : [];
+}

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

@@ -0,0 +1,13 @@
+export interface SequenceSearchModel {
+    assemblyNames: string[];
+    showTrack: (trackId: string) => void;
+}
+export interface SequenceSearchModeProps {
+    model: SequenceSearchModel;
+    handleClose: () => void;
+}
+export declare function addReferenceScanTrack(model: SequenceSearchModel, args: {
+    trackId: string;
+    name: string;
+    adapter: Record<string, unknown>;
+}): void;

package/esm/LinearGenomeView/components/searchModes.js

@@ -0,0 +1,22 @@
+import { getSession, isSessionWithAddSessionTrack } from '@jbrowse/core/util';
+// Creates a FeatureTrack that scans the assembly's reference sequence and shows
+// it. `adapter` carries the type + params only: the scan adapters resolve the
+// sequence from the track's assembly at fetch time (getSequenceSubAdapter), so
+// no sequence adapter is baked into the track config here.
+export function addReferenceScanTrack(model, args) {
+    const session = getSession(model);
+    const assemblyName = model.assemblyNames[0];
+    if (isSessionWithAddSessionTrack(session)) {
+        session.addSessionTrackConf({
+            trackId: args.trackId,
+            name: args.name,
+            assemblyNames: [assemblyName],
+            type: 'FeatureTrack',
+            adapter: args.adapter,
+        });
+        model.showTrack(args.trackId);
+    }
+    else {
+        session.notify('This session does not support adding tracks', 'warning');
+    }
+}

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

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+import type { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import type { MenuItem } from '@jbrowse/core/ui';
+export declare function getTrackOrderSubMenu({ view, track, }: {
+    view: LinearGenomeViewModel;
+    track: BaseTrackModel;
+}): MenuItem[];

package/esm/LinearGenomeView/components/trackLabelMenuItems.js

@@ -0,0 +1,67 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import PushPinIcon from '@mui/icons-material/PushPin';
+// Pin/unpin and reorder items for a single track. Pinning is only meaningful in
+// a top-level view; the to-top/to-bottom jumps are redundant with up/down when
+// there are only two tracks, so they need a third track to appear.
+export function getTrackOrderSubMenu({ view, track, }) {
+    const { isTopLevelView, tracks } = view;
+    const { pinned } = track;
+    const canMove = tracks.length > 1;
+    const canJump = tracks.length > 2;
+    return [
+        ...(isTopLevelView
+            ? [
+                {
+                    label: pinned ? 'Unpin track' : 'Pin track',
+                    icon: PushPinIcon,
+                    onClick: () => {
+                        track.setPinned(!pinned);
+                    },
+                },
+            ]
+            : []),
+        ...(canJump
+            ? [
+                {
+                    label: 'Move track to top',
+                    icon: KeyboardDoubleArrowUpIcon,
+                    onClick: () => {
+                        view.moveTrackToTop(track.id);
+                    },
+                },
+            ]
+            : []),
+        ...(canMove
+            ? [
+                {
+                    label: 'Move track up',
+                    icon: KeyboardArrowUpIcon,
+                    onClick: () => {
+                        view.moveTrackUp(track.id);
+                    },
+                },
+                {
+                    label: 'Move track down',
+                    icon: KeyboardArrowDownIcon,
+                    onClick: () => {
+                        view.moveTrackDown(track.id);
+                    },
+                },
+            ]
+            : []),
+        ...(canJump
+            ? [
+                {
+                    label: 'Move track to bottom',
+                    icon: KeyboardDoubleArrowDownIcon,
+                    onClick: () => {
+                        view.moveTrackToBottom(track.id);
+                    },
+                },
+            ]
+            : []),
+    ];
+}

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

@@ -1,84 +1,29 @@
-import type React from 'react';
 import type { LinearGenomeViewModel } from '../index.ts';
+import type React from 'react';
 interface AnchorPosition {
     offsetX: number;
     clientX: number;
     clientY: number;
-    isClick?: boolean;
+    isClick: boolean;
 }
 export declare function useRangeSelect(ref: React.RefObject<HTMLDivElement | null>, model: LinearGenomeViewModel, shiftOnly?: boolean): {
     open: boolean;
     isClick: boolean | undefined;
-    clickBpOffset: {
-        coord: number;
-        index: number;
-        refName: string;
-        oob: boolean;
-        assemblyName: string;
-        offset: number;
-        start: number;
-        end: number;
-        reversed?: boolean;
-    } | undefined;
-    guideX: number | undefined;
-    mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
-    mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
-    mouseOut: () => void;
-    handleClose: () => void;
-    handleMenuItemClick: (_: unknown, callback: () => void) => void;
-    anchorPosition: AnchorPosition | undefined;
-    rubberbandOn?: undefined;
-    leftBpOffset?: undefined;
-    rightBpOffset?: undefined;
-    numOfBpSelected?: undefined;
-    width?: undefined;
-    left?: undefined;
-} | {
-    open: boolean;
-    isClick: boolean | undefined;
-    clickBpOffset: {
-        coord: number;
-        index: number;
-        refName: string;
-        oob: boolean;
-        assemblyName: string;
-        offset: number;
-        start: number;
-        end: number;
-        reversed?: boolean;
-    } | undefined;
+    clickBpOffset: import("@jbrowse/core/util/Base1DUtils").PxToBpResult | undefined;
     guideX: number | undefined;
     rubberbandOn: boolean;
     mouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseMove: (event: React.MouseEvent<HTMLDivElement>) => void;
     mouseOut: () => void;
     handleClose: () => void;
-    handleMenuItemClick: (_: unknown, callback: () => void) => void;
-    leftBpOffset: {
-        coord: number;
-        index: number;
-        refName: string;
-        oob: boolean;
-        assemblyName: string;
-        offset: number;
-        start: number;
-        end: number;
-        reversed?: boolean;
-    };
-    rightBpOffset: {
-        coord: number;
-        index: number;
-        refName: string;
-        oob: boolean;
-        assemblyName: string;
-        offset: number;
-        start: number;
-        end: number;
-        reversed?: boolean;
-    };
+    handleMenuItemClick: (callback: () => void) => void;
     anchorPosition: AnchorPosition | undefined;
-    numOfBpSelected: number;
-    width: number;
-    left: number;
+    rubberband: {
+        leftBpOffset: ReturnType<LinearGenomeViewModel['pxToBp']>;
+        rightBpOffset: ReturnType<LinearGenomeViewModel['pxToBp']>;
+        numOfBpSelected: number;
+        width: number;
+        left: number;
+    } | undefined;
 };
 export {};