@jbrowse/plugin-linear-genome-view 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/LinearGenomeView/menuItems.js

@@ -1,41 +1,37 @@
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons';
+import { Highlighter, TrackSelector as TrackSelectorIcon, } from '@jbrowse/core/ui/Icons';
 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 LaunchIcon from '@mui/icons-material/Launch';
+import LayersIcon from '@mui/icons-material/Layers';
+import LayersClearIcon from '@mui/icons-material/LayersClear';
 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';
-import { ExportSvgDialog, GetSequenceDialog, ReturnToImportFormDialog, SequenceSearchDialog, } from './lazyDialogs.js';
+import { closeUpHost } from './closeUps.js';
+import { AddCloseUpDialog, ExportSvgDialog, GetSequenceDialog, RegionWidthEditorDialog, 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.
+ * Zoom all the way out — the bottom of the same "Zoom out 100x" ladder it sits
+ * under.
  *
  * 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) {
+function showAllRegionsMenuItem(self) {
     return {
         label: 'Show all regions in assembly',
         onClick: () => {
@@ -44,33 +40,71 @@ export function showAllRegionsMenuItem(self) {
     };
 }
 /**
- * Build the main view menu items
+ * The zoom ladder, shared by the header's zoom button and the view menu's
+ * "Zoom" — one definition so the two cannot drift, and the view menu is the
+ * only one of the two that survives `hideHeader`.
+ */
+export function zoomMenuItems(self) {
+    return [
+        ...[10, 50, 100].map(r => ({
+            label: `Zoom in ${r}x`,
+            onClick: () => {
+                self.zoom(self.bpPerPx / r);
+            },
+        })),
+        ...[10, 50, 100].map(r => ({
+            label: `Zoom out ${r}x`,
+            onClick: () => {
+                self.zoom(self.bpPerPx * r);
+            },
+        })),
+        showAllRegionsMenuItem(self),
+        {
+            label: 'Custom zoom',
+            onClick: () => {
+                getDialogHost(self).queueDialog(handleClose => [
+                    RegionWidthEditorDialog,
+                    { model: self, handleClose },
+                ]);
+            },
+        },
+    ];
+}
+/**
+ * Build the main view menu items. A row stacked in another view has no import
+ * form of its own, so only a top-level view offers the way back to one.
+ *
+ * Four actions, a Zoom group and a Show group. The four are what people open
+ * this menu to do — pick tracks, take a picture, search the sequence, start
+ * over — and the once-a-session settings that used to sit beside them are a
+ * popup away instead of in front of every reader every time.
  */
 export function buildMenuItems(self) {
     if (!self.hasDisplayedRegions) {
         return [];
     }
     const session = getSession(self);
+    const host = closeUpHost(self);
     const menuItems = [
         {
-            label: self.scalebarOnly ? 'Expand tracks' : 'Collapse to ruler',
-            icon: self.scalebarOnly ? ExpandMoreIcon : ExpandLessIcon,
+            label: 'Open track selector',
             onClick: () => {
-                self.setScalebarOnly(!self.scalebarOnly);
+                self.activateTrackSelector();
             },
+            icon: TrackSelectorIcon,
         },
         {
-            label: 'Return to import form',
+            label: 'Export SVG',
+            icon: PhotoCameraIcon,
             onClick: () => {
                 session.queueDialog(handleClose => [
-                    ReturnToImportFormDialog,
+                    ExportSvgDialog,
                     {
                         model: self,
                         handleClose,
                     },
                 ]);
             },
-            icon: FolderOpenIcon,
         },
         ...(isSessionWithAddSessionTrack(session)
             ? [
@@ -89,30 +123,37 @@ export function buildMenuItems(self) {
                 },
             ]
             : []),
-        {
-            label: 'Export SVG',
-            icon: PhotoCameraIcon,
-            onClick: () => {
-                session.queueDialog(handleClose => [
-                    ExportSvgDialog,
-                    {
-                        model: self,
-                        handleClose,
+        ...(self.isTopLevelView
+            ? [
+                {
+                    label: 'Return to import form',
+                    onClick: () => {
+                        session.queueDialog(handleClose => [
+                            ReturnToImportFormDialog,
+                            {
+                                model: self,
+                                handleClose,
+                            },
+                        ]);
                     },
-                ]);
-            },
-        },
-        {
-            label: 'Open track selector',
-            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),
+                    icon: FolderOpenIcon,
+                },
+            ]
+            : []),
+        // The one row a close-up adds, and the only one of its own it needs.
+        // Top-level rather than under Zoom: a close-up is a second panel on the
+        // page, and taking a panel away is not a zoom.
+        ...(host
+            ? [
+                {
+                    label: 'Remove close-up view',
+                    icon: LayersClearIcon,
+                    onClick: () => {
+                        host.removeCloseUp(self);
+                    },
+                },
+            ]
+            : []),
         {
             label: 'Horizontally flip',
             icon: SyncAltIcon,
@@ -121,24 +162,25 @@ export function buildMenuItems(self) {
             },
         },
         {
-            label: 'Color CDS by reading frame',
-            type: 'checkbox',
-            checked: self.colorByCDS,
-            icon: PaletteIcon,
-            onClick: () => {
-                self.setColorByCDS(!self.colorByCDS);
-            },
+            label: 'Zoom',
+            icon: ZoomInIcon,
+            subMenu: zoomMenuItems(self),
         },
         {
             label: 'Show...',
             icon: VisibilityIcon,
             subMenu: [
+                // Collapsing a row is about height and what it hides is the tracks, so
+                // it is the widest of the visibility answers and heads them. A checkbox
+                // rather than the pair of labels it was: "Collapse to ruler" turning
+                // into "Expand tracks" names the current state nowhere, and among
+                // checkboxes there is no room for the trick anyway.
                 {
-                    label: 'Show center line',
+                    label: 'Collapse to ruler',
                     type: 'checkbox',
-                    checked: self.showCenterLine,
+                    checked: self.scalebarOnly,
                     onClick: () => {
-                        self.setShowCenterLine(!self.showCenterLine);
+                        self.setScalebarOnly(!self.scalebarOnly);
                     },
                 },
                 {
@@ -154,21 +196,49 @@ export function buildMenuItems(self) {
                     },
                 },
                 {
-                    label: 'Show track outlines',
+                    label: 'Show header overview',
                     type: 'checkbox',
-                    checked: self.showTrackOutlines,
+                    checked: !self.hideHeaderOverview,
                     onClick: () => {
-                        self.setShowTrackOutlines(!self.showTrackOutlines);
+                        self.setHideHeaderOverview(!self.hideHeaderOverview);
+                    },
+                    disabled: self.hideHeader,
+                },
+                ...(self.canShowCytobands
+                    ? [
+                        {
+                            label: 'Show ideogram',
+                            type: 'checkbox',
+                            checked: self.showCytobands,
+                            onClick: () => {
+                                self.setShowCytobands(!self.showCytobands);
+                            },
+                        },
+                    ]
+                    : []),
+                {
+                    label: 'Show center line',
+                    type: 'checkbox',
+                    checked: self.showCenterLine,
+                    onClick: () => {
+                        self.setShowCenterLine(!self.showCenterLine);
                     },
                 },
                 {
-                    label: 'Show header overview',
+                    label: 'Show guidelines',
                     type: 'checkbox',
-                    checked: !self.hideHeaderOverview,
+                    checked: self.showGridlines,
                     onClick: () => {
-                        self.setHideHeaderOverview(!self.hideHeaderOverview);
+                        self.setShowGridlines(!self.showGridlines);
+                    },
+                },
+                {
+                    label: 'Show track outlines',
+                    type: 'checkbox',
+                    checked: self.showTrackOutlines,
+                    onClick: () => {
+                        self.setShowTrackOutlines(!self.showTrackOutlines);
                     },
-                    disabled: self.hideHeader,
                 },
                 {
                     label: 'Show no tracks active button',
@@ -178,36 +248,43 @@ export function buildMenuItems(self) {
                         self.setHideNoTracksActive(!self.hideNoTracksActive);
                     },
                 },
+                { type: 'subHeader', label: 'Highlights' },
                 {
-                    // 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',
+                    label: 'Show highlights',
                     type: 'checkbox',
-                    checked: self.showAminoAcids,
+                    checked: session.highlightsVisible,
                     onClick: () => {
-                        self.setShowAminoAcids(!self.showAminoAcids);
+                        session.setHighlightsVisible(!session.highlightsVisible);
                     },
                 },
                 {
-                    label: 'Show guidelines',
+                    label: 'Show highlight labels',
                     type: 'checkbox',
-                    checked: self.showGridlines,
+                    checked: self.labelsVisible,
                     onClick: () => {
-                        self.setShowGridlines(!self.showGridlines);
+                        self.setLabelsVisible(!self.labelsVisible);
+                    },
+                },
+                // The two answers to what the sequence draws as: one colours the
+                // codons, the other spells them out. Both lost the palette icon they
+                // used to carry — nothing else in this list has one.
+                { type: 'subHeader', label: 'Sequence' },
+                {
+                    label: 'Color CDS by reading frame',
+                    type: 'checkbox',
+                    checked: self.colorByCDS,
+                    onClick: () => {
+                        self.setColorByCDS(!self.colorByCDS);
+                    },
+                },
+                {
+                    label: 'Show amino acids when zoomed in',
+                    type: 'checkbox',
+                    checked: self.showAminoAcids,
+                    onClick: () => {
+                        self.setShowAminoAcids(!self.showAminoAcids);
                     },
                 },
-                ...(self.canShowCytobands
-                    ? [
-                        {
-                            label: 'Show ideogram',
-                            type: 'checkbox',
-                            checked: self.showCytobands,
-                            onClick: () => {
-                                self.setShowCytobands(!self.showCytobands);
-                            },
-                        },
-                    ]
-                    : []),
                 // 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
@@ -225,10 +302,24 @@ export function buildMenuItems(self) {
     return menuItems;
 }
 /**
- * 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.
+ * Build rubberband selection menu items. What a selection can open collects
+ * under one "Launch" submenu, which sorts last, below any row a plugin appends
+ * to the menu itself: a close-up view first, then `launchItems`, the
+ * plugin-supplied ones (`rubberBandLaunchMenuItems()`).
+ *
+ * A close-up is offered from HERE and nowhere else, because a drag is what the
+ * feature was always asking for and a menu item could not: the close-up shows
+ * one span of one place, and this is the gesture that names both. From the view
+ * menu it could only guess — a tenth of the middle, which is a span nobody
+ * picked.
+ *
+ * Only a view of its own offers it, which `isTopLevelView` is the whole of. A
+ * row of a comparative stack is already part of somebody's figure: the synteny
+ * ribbons and the breakpoint split panels are placed against each row's own
+ * height, and those views' exports draw one row per view, so a close-up grown
+ * there walks the ribbons off their rows and is dropped from the picture
+ * without a word. A close-up, living under a view rather than under the
+ * session, is not a top-level view either.
  */
 export function buildRubberBandMenuItems(self, launchItems) {
     // captured once here and used by the items below rather than re-read inside
@@ -242,6 +333,32 @@ export function buildRubberBandMenuItems(self, launchItems) {
     // 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));
+    const launch = [
+        ...(self.isTopLevelView
+            ? [
+                {
+                    label: 'Close-up view',
+                    icon: LayersIcon,
+                    helpText: 'A zoomed-in copy of this view, opened below its tracks. It stays centred on this view and pans with it.',
+                    onClick: () => {
+                        getDialogHost(self).queueDialog(handleClose => [
+                            AddCloseUpDialog,
+                            {
+                                model: self,
+                                leftOffset,
+                                rightOffset,
+                                handleClose: () => {
+                                    handleClose();
+                                    self.setOffsets();
+                                },
+                            },
+                        ]);
+                    },
+                },
+            ]
+            : []),
+        ...launchItems,
+    ];
     return [
         {
             label: 'Zoom to region',
@@ -275,13 +392,24 @@ export function buildRubberBandMenuItems(self, launchItems) {
                 void copyText(self, rangeString, 'range');
             },
         },
-        ...(launchItems.length
+        {
+            label: 'Highlight region',
+            icon: Highlighter,
+            onClick: () => {
+                const [region] = self.getSelectedRegions(leftOffset, rightOffset);
+                if (region) {
+                    getSession(self).addHighlight(region);
+                }
+            },
+        },
+        ...(launch.length
             ? [
                 {
                     label: 'Launch',
                     icon: LaunchIcon,
                     type: 'subMenu',
-                    subMenu: launchItems,
+                    priority: -1000,
+                    subMenu: launch,
                 },
             ]
             : []),