@jbrowse/plugin-linear-genome-view 4.3.0 → 5.0.0-beta.2

package/esm/LinearGenomeView/menuItems.js

@@ -1,9 +1,14 @@
 import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
-import { getSession, isSessionWithAddTracks, toLocale, } from '@jbrowse/core/util';
+import { radioItems } from '@jbrowse/core/ui/menuItems';
+import { assembleLocStrings, getDialogHost, getSession, isSessionWithAddSessionTrack, toLocale, } from '@jbrowse/core/util';
+import { basePaintedAt } from '@jbrowse/core/util/Base1DUtils';
+import { copyText } from '@jbrowse/core/util/copyText';
 import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-import LabelIcon from '@mui/icons-material/Label';
+import LaunchIcon from '@mui/icons-material/Launch';
 import MenuOpenIcon from '@mui/icons-material/MenuOpen';
 import PaletteIcon from '@mui/icons-material/Palette';
 import PhotoCameraIcon from '@mui/icons-material/PhotoCamera';
@@ -11,34 +16,49 @@ 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';
-import { ExportSvgDialog, GetSequenceDialog, ReturnToImportFormDialog, SequenceSearchDialog, } from "./lazyDialogs.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]);
-                    }
-                }
-            };
-        }
-    }
+import { ExportSvgDialog, GetSequenceDialog, ReturnToImportFormDialog, SequenceSearchDialog, } from './lazyDialogs.js';
+const TRACK_LABEL_OPTIONS = [
+    { value: 'overlapping', label: 'Overlapping' },
+    { value: 'offset', label: 'Offset' },
+    { value: 'hidden', label: 'Hidden' },
+];
+/**
+ * Zoom all the way out, shared by the view menu and the header's zoom menu —
+ * one definition so the two cannot drift in label, and the view menu is the
+ * only one of the two that survives `hideHeader`.
+ *
+ * The zoom menu earns it on the merits: this is the bottom of the same "Zoom
+ * out 100x" ladder, and it is where someone already zooming looks.
+ *
+ * The label is the import form's button text verbatim (`ImportForm.tsx`), which
+ * is where most people meet the phrase. No icon: the four-arrows glyph it
+ * carried reads as "fullscreen", and nothing else names the same gesture, so a
+ * substitute would be decoration rather than a distinction.
+ */
+export function showAllRegionsMenuItem(self) {
+    return {
+        label: 'Show all regions in assembly',
+        onClick: () => {
+            self.showAllRegionsInAssembly();
+        },
+    };
 }
+/**
+ * Build the main view menu items
+ */
 export function buildMenuItems(self) {
     if (!self.hasDisplayedRegions) {
         return [];
     }
-    const { canShowCytobands, showCytobands } = self;
     const session = getSession(self);
     const menuItems = [
+        {
+            label: self.scalebarOnly ? 'Expand tracks' : 'Collapse to ruler',
+            icon: self.scalebarOnly ? ExpandMoreIcon : ExpandLessIcon,
+            onClick: () => {
+                self.setScalebarOnly(!self.scalebarOnly);
+            },
+        },
         {
             label: 'Return to import form',
             onClick: () => {
@@ -52,7 +72,7 @@ export function buildMenuItems(self) {
             },
             icon: FolderOpenIcon,
         },
-        ...(isSessionWithAddTracks(session)
+        ...(isSessionWithAddSessionTrack(session)
             ? [
                 {
                     label: 'Sequence search',
@@ -84,16 +104,24 @@ export function buildMenuItems(self) {
         },
         {
             label: 'Open track selector',
-            onClick: self.activateTrackSelector,
+            onClick: () => {
+                self.activateTrackSelector();
+            },
             icon: TrackSelectorIcon,
         },
+        // Top-level rather than under a "Navigation" group: with scroll-to-zoom
+        // gone from here the group held two rows, and a popup for two is a click
+        // charged for nothing. Not under "Show...", which is visibility toggles.
+        showAllRegionsMenuItem(self),
         {
             label: 'Horizontally flip',
             icon: SyncAltIcon,
-            onClick: self.horizontallyFlip,
+            onClick: () => {
+                self.horizontallyFlip();
+            },
         },
         {
-            label: 'Color by CDS and draw amino acids',
+            label: 'Color CDS by reading frame',
             type: 'checkbox',
             checked: self.colorByCDS,
             icon: PaletteIcon,
@@ -105,10 +133,6 @@ export function buildMenuItems(self) {
             label: 'Show...',
             icon: VisibilityIcon,
             subMenu: [
-                {
-                    label: 'Show all regions in assembly',
-                    onClick: self.showAllRegionsInAssembly,
-                },
                 {
                     label: 'Show center line',
                     type: 'checkbox',
@@ -121,6 +145,10 @@ export function buildMenuItems(self) {
                     label: 'Show header',
                     type: 'checkbox',
                     checked: !self.hideHeader,
+                    // opts out of the checkbox "stay open" default: with the header
+                    // hidden these same items are reachable from MiniControls, which this
+                    // row unmounts — leaving the menu anchored to a removed node
+                    keepMenuOpen: false,
                     onClick: () => {
                         self.setHideHeader(!self.hideHeader);
                     },
@@ -150,6 +178,16 @@ export function buildMenuItems(self) {
                         self.setHideNoTracksActive(!self.hideNoTracksActive);
                     },
                 },
+                {
+                    // no icon: the palette it used to carry sat directly against the
+                    // color-by-CDS one above it, which is the reason it moved here
+                    label: 'Show amino acids when zoomed in',
+                    type: 'checkbox',
+                    checked: self.showAminoAcids,
+                    onClick: () => {
+                        self.setShowAminoAcids(!self.showAminoAcids);
+                    },
+                },
                 {
                     label: 'Show guidelines',
                     type: 'checkbox',
@@ -158,95 +196,74 @@ export function buildMenuItems(self) {
                         self.setShowGridlines(!self.showGridlines);
                     },
                 },
-                ...(canShowCytobands
+                ...(self.canShowCytobands
                     ? [
                         {
                             label: 'Show ideogram',
                             type: 'checkbox',
                             checked: self.showCytobands,
                             onClick: () => {
-                                self.setShowCytobands(!showCytobands);
+                                self.setShowCytobands(!self.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');
-                    },
-                },
+                // Where a track's name is drawn, and "Hidden" is one of the three
+                // answers, so this is a visibility setting like everything above it.
+                // Inline under a subheader rather than in a submenu of its own: it was a
+                // top-level row for three radios, and nesting it here instead would have
+                // put those radios a popup further from the hamburger than they were.
+                // The icons went with it — all three rows carried the same one, which
+                // told a reader nothing about which to pick.
+                { type: 'subHeader', label: 'Track labels' },
+                ...radioItems(TRACK_LABEL_OPTIONS, self.effectiveTrackLabels, setting => {
+                    self.setTrackLabels(setting);
+                }),
             ],
         },
     ];
-    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) {
+/**
+ * Build rubberband selection menu items. `launchItems` are the plugin-supplied
+ * things a selection can start (`rubberBandLaunchMenuItems()`); they collect
+ * under one "Launch" submenu so the menu stays three actions plus a group
+ * however many plugins are loaded, and vanish entirely when none apply.
+ */
+export function buildRubberBandMenuItems(self, launchItems) {
+    // captured once here and used by the items below rather than re-read inside
+    // their onClick: the menu's onClose runs first and may release the selection,
+    // which would leave the click reading undefined and silently doing nothing
     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}`;
+    // The same regions `Get sequence` fetches and `Zoom to region` navigates to,
+    // named the way the header names what it is showing. Arithmetic on the two
+    // offsets' `coord` cannot do this: `coord` is the POINT convention, so on a
+    // reversed region it names neither the base painted at the pixel nor the ends
+    // in ascending order, and a `leftRef === rightRef` test calls a selection
+    // crossing a collapsed intron one range when it is two.
+    const rangeString = assembleLocStrings(self.getSelectedRegions(leftOffset, rightOffset));
     return [
         {
             label: 'Zoom to region',
             icon: ZoomInIcon,
             onClick: () => {
-                self.moveTo(self.leftOffset, self.rightOffset);
+                self.moveTo(leftOffset, rightOffset);
             },
         },
         {
             label: 'Get sequence',
             icon: MenuOpenIcon,
             onClick: () => {
-                getSession(self).queueDialog(handleClose => [
+                const regions = self.getSelectedRegions(leftOffset, rightOffset);
+                getDialogHost(self).queueDialog(handleClose => [
                     GetSequenceDialog,
                     {
                         model: self,
-                        handleClose,
+                        regions,
+                        handleClose: () => {
+                            handleClose();
+                            self.setOffsets();
+                        },
                     },
                 ]);
             },
@@ -254,41 +271,60 @@ export function buildRubberBandMenuItems(self) {
         {
             label: 'Copy range',
             icon: ContentCopyIcon,
-            onClick: async () => {
-                const { default: copy } = await import('copy-to-clipboard');
-                copy(rangeString);
+            onClick: () => {
+                void copyText(self, rangeString, 'range');
             },
         },
+        ...(launchItems.length
+            ? [
+                {
+                    label: 'Launch',
+                    icon: LaunchIcon,
+                    type: 'subMenu',
+                    subMenu: launchItems,
+                },
+            ]
+            : []),
     ];
 }
+/**
+ * Build rubberband click menu items (single click on rubberband area)
+ */
 export function buildRubberbandClickMenuItems(self, clickOffset) {
-    const { coord, refName } = clickOffset;
-    if (coord === undefined || refName === undefined) {
+    const { refName, start, end, reversed, offset } = clickOffset;
+    if (refName === undefined || start === undefined || end === undefined) {
         return [];
     }
-    const locString = `${refName}:${toLocaleRounded(coord + 1)}`;
+    // `basePaintedAt`, not `coord`: `coord` is the point convention, which on a
+    // reversed region names the base one PAST the one under the pointer — and at
+    // the region's first column names a base off the end of the contig entirely.
+    // Forward the two agree, so this only ever moves the reversed answer.
+    //
+    // The result is 0-based, which is what `centerAt` takes (it goes through
+    // `bpToPx`); the label adds the 1 back.
+    const coord0 = basePaintedAt({ start, end, reversed }, offset);
+    const locString = `${refName}:${toLocale(coord0 + 1)}`;
     return [
         {
             label: 'Center view here',
             icon: CenterFocusStrongIcon,
             onClick: () => {
-                self.centerAt(coord, refName);
+                self.centerAt(coord0, refName);
             },
         },
         {
             label: 'Zoom to base level',
             icon: ZoomInIcon,
             onClick: () => {
-                self.centerAt(coord, refName);
+                self.centerAt(coord0, refName);
                 self.zoomTo(self.minBpPerPx);
             },
         },
         {
             label: `Copy coordinate (${locString})`,
             icon: ContentCopyIcon,
-            onClick: async () => {
-                const { default: copy } = await import('copy-to-clipboard');
-                copy(locString);
+            onClick: () => {
+                void copyText(self, locString, 'coordinate');
             },
         },
     ];