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

package/esm/LinearGenomeView/linkedViewSync.js

@@ -1,52 +1,36 @@
-import { addDisposer, addMiddleware, getPath } from '@jbrowse/mobx-state-tree';
-function applyViewAction(view, name, args) {
-    switch (name) {
-        case 'horizontalScroll':
-            view.horizontalScroll(args[0]);
-            break;
-        case 'zoomTo':
-            view.zoomTo(args[0]);
-            break;
-        case 'showTrack':
-            view.showTrack(args[0]);
-            break;
-        case 'toggleTrack':
-            view.toggleTrack(args[0]);
-            break;
-        case 'hideTrack':
-            view.hideTrack(args[0]);
-            break;
-        case 'setTrackLabels':
-            view.setTrackLabels(args[0]);
-            break;
-        case 'setShowCenterLine':
-            view.setShowCenterLine(args[0]);
-            break;
-    }
+import { addDisposer, addMiddleware } from '@jbrowse/mobx-state-tree';
+const LINKED_ACTIONS = [
+    'horizontalScroll',
+    'zoomTo',
+    'showTrack',
+    'toggleTrack',
+    'launchTrack',
+    'launchToggleTrack',
+    'hideTrack',
+    'setTrackLabels',
+    'setShowCenterLine',
+];
+function isLinkedAction(name) {
+    return LINKED_ACTIONS.includes(name);
 }
 /**
- * Install a middleware that, while `linkViews` is on, replays each listed
- * action onto every other sub-view so panning/zooming/track-toggling stays in
- * sync. Used by linear-comparative-view and breakpoint-split-view.
+ * While `linkViews` is on, replay each pan, zoom and track toggle made on one
+ * sub-view onto every other, with the same arguments.
  */
-export function installLinkedViewSync(self, syncActions) {
-    addDisposer(self, addMiddleware(self, (rawCall, next) => {
-        const handler = rawCall.type === 'action' &&
-            rawCall.id === rawCall.rootId &&
-            self.linkViews
-            ? syncActions.find(action => action === rawCall.name)
-            : undefined;
-        if (handler) {
-            const sourcePath = getPath(rawCall.context);
-            next(rawCall);
+export function installLinkedViewSync(self) {
+    addDisposer(self, addMiddleware(self, (call, next) => {
+        next(call);
+        const { name, args, context } = call;
+        if (call.type === 'action' &&
+            call.id === call.rootId &&
+            self.linkViews &&
+            isLinkedAction(name)) {
             for (const view of self.views) {
-                if (getPath(view) !== sourcePath) {
-                    applyViewAction(view, handler, rawCall.args);
+                if (view !== context) {
+                    const action = view[name];
+                    void action(...args);
                 }
             }
         }
-        else {
-            next(rawCall);
-        }
     }));
 }

package/esm/LinearGenomeView/menuItems.d.ts

@@ -1,29 +1,27 @@
 import type { LinearGenomeViewModel } from './model.ts';
 import type { BpOffset } from './types.ts';
 import type { MenuItem } from '@jbrowse/core/ui';
+export declare function zoomMenuItems(self: LinearGenomeViewModel): MenuItem[];
+export declare function buildHighlightsSubMenuItems(self: LinearGenomeViewModel): MenuItem[];
 /**
- * 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.
+ * 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 declare function showAllRegionsMenuItem(self: LinearGenomeViewModel): MenuItem;
+export declare function buildMenuItems(self: LinearGenomeViewModel): MenuItem[];
 /**
- * Build the main view menu items
+ * 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 declare function buildMenuItems(self: LinearGenomeViewModel): MenuItem[];
+export declare function openSpanInNewView(view: LinearGenomeViewModel, start?: BpOffset, end?: BpOffset): import("@jbrowse/core/util").AbstractViewModel | undefined;
 /**
- * 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 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 declare function buildRubberBandMenuItems(self: LinearGenomeViewModel, launchItems: MenuItem[]): MenuItem[];
 /**

package/esm/LinearGenomeView/menuItems.js

@@ -1,41 +1,30 @@
-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 { makeShowSubMenu } from '@jbrowse/core/ui/showSubMenu';
 import { assembleLocStrings, getDialogHost, getSession, isSessionWithAddSessionTrack, toLocale, } from '@jbrowse/core/util';
-import { basePaintedAt } from '@jbrowse/core/util/Base1DUtils';
+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 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 +32,56 @@ 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);
+            },
+        },
+    ];
+}
 /**
- * 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 +90,24 @@ 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,
                     },
                 ]);
             },
-            icon: FolderOpenIcon,
         },
         ...(isSessionWithAddSessionTrack(session)
             ? [
@@ -89,30 +126,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 +162,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: 'Show 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: '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: '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: 'Show 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: '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',
-                    type: 'checkbox',
-                    checked: !self.hideHeaderOverview,
-                    onClick: () => {
-                        self.setHideHeaderOverview(!self.hideHeaderOverview);
-                    },
-                    disabled: self.hideHeader,
+            },
+            {
+                label: 'Show guidelines',
+                type: 'checkbox',
+                checked: self.showGridlines,
+                onClick: () => {
+                    self.setShowGridlines(!self.showGridlines);
                 },
-                {
-                    label: 'Show no tracks active button',
-                    type: 'checkbox',
-                    checked: !self.hideNoTracksActive,
-                    onClick: () => {
-                        self.setHideNoTracksActive(!self.hideNoTracksActive);
-                    },
+            },
+            {
+                label: 'Show 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: '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);
-                    },
+            },
+            { type: 'subHeader', label: 'Sequence' },
+            {
+                label: 'Show CDS reading frame colors',
+                type: 'checkbox',
+                checked: self.colorByCDS,
+                onClick: () => {
+                    self.setColorByCDS(!self.colorByCDS);
                 },
-                ...(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: 'Show 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
@@ -242,6 +307,21 @@ 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: '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',
@@ -275,13 +355,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,
                 },
             ]
             : []),
@@ -291,7 +382,7 @@ export function buildRubberBandMenuItems(self, launchItems) {
  * 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 +400,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);
             },
         },
         {