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

package/esm/LinearGenomeView/menuItems.js

@@ -1,41 +1,31 @@
-import { 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 { Highlighter, TrackSelector as TrackSelectorIcon, } from '@jbrowse/core/ui/Icons';
+import { highlightListMenuItems, radioItems, subMenuIfAny, } from '@jbrowse/core/ui/menuItems';
+import { makeShowSubMenu } from '@jbrowse/core/ui/showSubMenu';
+import { assembleLocStrings, getDialogHost, getEnv, getSession, isSessionWithAddSessionTrack, toLocale, } from '@jbrowse/core/util';
+import { basePaintedAt, computeMoveToLayout, } from '@jbrowse/core/util/Base1DUtils';
 import { copyText } from '@jbrowse/core/util/copyText';
+import { renameIds } from '@jbrowse/core/util/types/mst';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import CenterFocusStrongIcon from '@mui/icons-material/CenterFocusStrong';
+import CodeIcon from '@mui/icons-material/Code';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FitScreenIcon from '@mui/icons-material/FitScreen';
 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 OpenInNewIcon from '@mui/icons-material/OpenInNew';
 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 { 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.
- *
- * 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: () => {
@@ -43,8 +33,57 @@ export function showAllRegionsMenuItem(self) {
         },
     };
 }
+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 },
+                ]);
+            },
+        },
+    ];
+}
+export function buildHighlightsSubMenuItems(self) {
+    const session = getSession(self);
+    return [
+        {
+            label: 'Show highlights',
+            type: 'checkbox',
+            checked: session.highlightsVisible,
+            onClick: () => {
+                session.setHighlightsVisible(!session.highlightsVisible);
+            },
+        },
+        {
+            label: 'Show highlight labels',
+            type: 'checkbox',
+            checked: session.highlightLabelsVisible,
+            onClick: () => {
+                session.setHighlightLabelsVisible(!session.highlightLabelsVisible);
+            },
+        },
+        ...highlightListMenuItems(session, getEnv(self).pluginManager),
+    ];
+}
 /**
- * Build the main view menu items
+ * 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.
  */
 export function buildMenuItems(self) {
     if (!self.hasDisplayedRegions) {
@@ -53,24 +92,36 @@ export function buildMenuItems(self) {
     const session = getSession(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,
+                        chooseWidth: true,
                     },
                 ]);
             },
-            icon: FolderOpenIcon,
+        },
+        {
+            label: 'Export R script',
+            icon: CodeIcon,
+            onClick: () => {
+                import('./rExport/exportLinearView.js')
+                    .then(({ downloadRScript }) => downloadRScript(self))
+                    .catch((e) => {
+                    session.notifyError(`${e}`, e);
+                });
+            },
         },
         ...(isSessionWithAddSessionTrack(session)
             ? [
@@ -89,30 +140,35 @@ 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,
+                },
+            ]
+            : []),
+        ...(self.isTopLevelView && self.tracks.length
+            ? [
+                {
+                    label: 'Fit tracks to window',
+                    icon: FitScreenIcon,
+                    disabled: !self.scrollPortExcess,
+                    onClick: () => {
+                        self.fitTracksToWindow();
+                    },
+                },
+            ]
+            : []),
         {
             label: 'Horizontally flip',
             icon: SyncAltIcon,
@@ -120,115 +176,138 @@ export function buildMenuItems(self) {
                 self.horizontallyFlip();
             },
         },
-        {
-            label: 'Color CDS by reading frame',
-            type: 'checkbox',
-            checked: self.colorByCDS,
-            icon: PaletteIcon,
-            onClick: () => {
-                self.setColorByCDS(!self.colorByCDS);
+        ...makeShowSubMenu([
+            showAllRegionsMenuItem(self),
+            {
+                label: 'Ruler only',
+                type: 'checkbox',
+                checked: self.scalebarOnly,
+                onClick: () => {
+                    self.setScalebarOnly(!self.scalebarOnly);
+                },
             },
-        },
-        {
-            label: 'Show...',
-            icon: VisibilityIcon,
-            subMenu: [
-                {
-                    label: 'Show center line',
-                    type: 'checkbox',
-                    checked: self.showCenterLine,
-                    onClick: () => {
-                        self.setShowCenterLine(!self.showCenterLine);
-                    },
+            {
+                label: '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);
                 },
-                {
-                    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);
-                    },
+            },
+            {
+                label: 'Header overview',
+                type: 'checkbox',
+                checked: !self.hideHeaderOverview,
+                onClick: () => {
+                    self.setHideHeaderOverview(!self.hideHeaderOverview);
                 },
-                {
-                    label: 'Show track outlines',
-                    type: 'checkbox',
-                    checked: self.showTrackOutlines,
-                    onClick: () => {
-                        self.setShowTrackOutlines(!self.showTrackOutlines);
+                disabled: self.hideHeader,
+            },
+            ...(self.canShowCytobands
+                ? [
+                    {
+                        label: 'Ideogram',
+                        type: 'checkbox',
+                        checked: self.showCytobands,
+                        onClick: () => {
+                            self.setShowCytobands(!self.showCytobands);
+                        },
                     },
+                ]
+                : []),
+            {
+                label: 'Center line',
+                type: 'checkbox',
+                checked: self.showCenterLine,
+                onClick: () => {
+                    self.setShowCenterLine(!self.showCenterLine);
                 },
-                {
-                    label: 'Show header overview',
-                    type: 'checkbox',
-                    checked: !self.hideHeaderOverview,
-                    onClick: () => {
-                        self.setHideHeaderOverview(!self.hideHeaderOverview);
-                    },
-                    disabled: self.hideHeader,
+            },
+            {
+                label: 'Guidelines',
+                type: 'checkbox',
+                checked: self.axisGrid,
+                onClick: () => {
+                    self.setAxisGrid(!self.axisGrid);
                 },
-                {
-                    label: 'Show no tracks active button',
-                    type: 'checkbox',
-                    checked: !self.hideNoTracksActive,
-                    onClick: () => {
-                        self.setHideNoTracksActive(!self.hideNoTracksActive);
-                    },
+            },
+            {
+                label: 'Track outlines',
+                type: 'checkbox',
+                checked: self.showTrackOutlines,
+                onClick: () => {
+                    self.setShowTrackOutlines(!self.showTrackOutlines);
                 },
-                {
-                    // 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: '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);
-                    },
+            },
+            { type: 'subHeader', label: 'Sequence' },
+            {
+                label: 'CDS reading frame colors',
+                type: 'checkbox',
+                checked: self.colorByFrame,
+                onClick: () => {
+                    self.setColorByFrame(!self.colorByFrame);
                 },
-                ...(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
-                // 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);
-                }),
-            ],
+            },
+            {
+                label: 'Amino acids when zoomed in',
+                type: 'checkbox',
+                checked: self.showAminoAcids,
+                onClick: () => {
+                    self.setShowAminoAcids(!self.showAminoAcids);
+                },
+            },
+        ]),
+        {
+            label: 'Highlights',
+            icon: Highlighter,
+            subMenu: self.highlightsSubMenuItems(),
+        },
+        {
+            label: 'Track labels',
+            icon: LabelIcon,
+            subMenu: radioItems(TRACK_LABEL_OPTIONS, self.effectiveTrackLabels, setting => {
+                self.setTrackLabels(setting);
+            }),
         },
     ];
     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.
+ * Open a copy of the view, tracks and their settings included, framed on the
+ * span between two offsets. The same copy as the view menu's "Copy view", and
+ * nothing links it back to the original.
+ */
+export function openSpanInNewView(view, start, end) {
+    if (!start || !end) {
+        return undefined;
+    }
+    const { bpPerPx, offsetPx } = computeMoveToLayout(view, start, end);
+    return getSession(view).addView(view.type, {
+        ...renameIds(getSnapshot(view)),
+        windowWidthBp: bpPerPx * view.width,
+        windowStartBp: offsetPx * bpPerPx,
+    });
+}
+/**
+ * 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 new linear genome view of the span first, then
+ * `launchItems`, the plugin-supplied ones (`rubberBandLaunchMenuItems()`).
+ *
+ * The new view is a copy of this one, so only a top-level view offers it: a row
+ * of a comparative view carries that view's framing, such as a hidden header.
  */
 export function buildRubberBandMenuItems(self, launchItems) {
     // captured once here and used by the items below rather than re-read inside
@@ -241,7 +320,23 @@ export function buildRubberBandMenuItems(self, launchItems) {
     // 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));
+    const regions = self.getSelectedRegions(leftOffset, rightOffset);
+    const rangeString = assembleLocStrings(regions);
+    const launch = [
+        ...(self.isTopLevelView
+            ? [
+                {
+                    label: 'Linear genome view',
+                    icon: OpenInNewIcon,
+                    helpText: 'A new view of this span, with the same tracks. It scrolls and zooms on its own.',
+                    onClick: () => {
+                        openSpanInNewView(self, leftOffset, rightOffset);
+                    },
+                },
+            ]
+            : []),
+        ...launchItems,
+    ];
     return [
         {
             label: 'Zoom to region',
@@ -251,10 +346,9 @@ export function buildRubberBandMenuItems(self, launchItems) {
             },
         },
         {
-            label: 'Get sequence',
+            label: 'Get sequence...',
             icon: MenuOpenIcon,
             onClick: () => {
-                const regions = self.getSelectedRegions(leftOffset, rightOffset);
                 getDialogHost(self).queueDialog(handleClose => [
                     GetSequenceDialog,
                     {
@@ -275,23 +369,29 @@ export function buildRubberBandMenuItems(self, launchItems) {
                 void copyText(self, rangeString, 'range');
             },
         },
-        ...(launchItems.length
-            ? [
-                {
-                    label: 'Launch',
-                    icon: LaunchIcon,
-                    type: 'subMenu',
-                    subMenu: launchItems,
-                },
-            ]
-            : []),
+        {
+            label: 'Highlight region',
+            icon: Highlighter,
+            onClick: () => {
+                const session = getSession(self);
+                for (const region of regions) {
+                    session.addHighlight(region);
+                }
+            },
+        },
+        ...subMenuIfAny({
+            label: 'Launch',
+            icon: LaunchIcon,
+            priority: -1000,
+            subMenu: launch,
+        }),
     ];
 }
 /**
  * Build rubberband click menu items (single click on rubberband area)
  */
 export function buildRubberbandClickMenuItems(self, clickOffset) {
-    const { refName, start, end, reversed, offset } = clickOffset;
+    const { refName, start, end, reversed, offset, index } = clickOffset;
     if (refName === undefined || start === undefined || end === undefined) {
         return [];
     }
@@ -309,15 +409,15 @@ export function buildRubberbandClickMenuItems(self, clickOffset) {
             label: 'Center view here',
             icon: CenterFocusStrongIcon,
             onClick: () => {
-                self.centerAt(coord0, refName);
+                self.centerAt(coord0, refName, index);
             },
         },
         {
             label: 'Zoom to base level',
             icon: ZoomInIcon,
             onClick: () => {
-                self.centerAt(coord0, refName);
                 self.zoomTo(self.minBpPerPx);
+                self.centerAt(coord0, refName, index);
             },
         },
         {