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

package/esm/LinearGenomeView/afterAttach.js

@@ -1,145 +1,290 @@
-import { getSession, localStorageSetItem, parseLocString, } from '@jbrowse/core/util';
+import { getSession, isSessionModelWithWidgets, localStorageSetItem, resolveNamedRegions, } from '@jbrowse/core/util';
+import { coerceHighlight } from '@jbrowse/core/util/highlights';
+import { installInitAutorun } from '@jbrowse/core/util/installInitAutorun';
+import { normalizeTrackInit, warmTrackDisplayGeneric, } from '@jbrowse/core/util/tracks';
 import { addDisposer } from '@jbrowse/mobx-state-tree';
-import { autorun, when } from 'mobx';
-function tryParseJson(s) {
-    try {
-        const v = JSON.parse(s);
-        return v && typeof v === 'object'
-            ? v
-            : undefined;
+import { autorun, untracked, when } from 'mobx';
+import { SearchResultsNotFoundError } from '../searchUtils.js';
+// `init` is a frozen blob that often comes from hand-authored JSON, where a
+// lone entry gets written bare (`tracks: 'genes'`). A string is iterable, so
+// looping over it directly walked its characters — one track opened per letter.
+function asArray(arg) {
+    return arg === undefined ? [] : Array.isArray(arg) ? arg : [arg];
+}
+// Activate tracklist first so the drawer opens before we navigate, so
+// volatileWidth accounts for the drawer; otherwise navigation computes the
+// region at full width and the drawer then obscures part of it. Opening the
+// drawer shrinks the view, which the ResizeObserver reports as a volatileWidth
+// change — but only if the drawer wasn't already taking that width. So wait for
+// the change only when activating it actually opens the column.
+async function openTracklist(self, session, superseded) {
+    // activateTrackSelector throws without widget support, which would abort the
+    // rest of init (navigation included) over an optional extra
+    if (isSessionModelWithWidgets(session)) {
+        // `drawerVisible` is the line App.tsx draws to render the drawer column at
+        // all: a minimized, popped-out or modal-only widget takes no width. It
+        // lives on SessionWithDrawerWidgets, whose type guard is product-core's, so
+        // it is duck-typed rather than taken as an upward dependency; a session
+        // without it has no drawer column.
+        const drawerVisible = () => 'drawerVisible' in session && session.drawerVisible === true;
+        const drawerWasVisible = drawerVisible();
+        const widthBefore = self.volatileWidth;
+        self.activateTrackSelector();
+        // a width change is only coming if the drawer just started taking space
+        if (!drawerWasVisible && drawerVisible()) {
+            // Bounded so init can't wedge here if the drawer doesn't shrink the view
+            // (e.g. embedded or modal-drawer layouts, where no width change is
+            // coming), and superseded so a re-launch landing mid-wait isn't held
+            // behind an init that no longer matters
+            await when(() => self.volatileWidth !== widthBefore || superseded(), {
+                timeout: 1000,
+            }).catch(() => { });
+        }
     }
-    catch {
-        return undefined;
+    else {
+        session.notify('init.tracklist was ignored: this application has no track selector drawer', 'warning');
     }
 }
-export function setupInitAutorun(self) {
-    addDisposer(self, autorun(async function initAutorun() {
-        const { init, initialized } = self;
-        if (!initialized) {
-            return;
+// Restrict a whole-genome view to a named subset of the assembly's regions, in
+// the requested order. Entries may be globs (`*_hap1`) — see selectNamedRegions,
+// shared with the dotplot's per-axis `displayedRegionNames` so both views read
+// the same name list the same way.
+function showNamedRegions(self, session, assemblyName, names) {
+    const assembly = session.assemblyManager.get(assemblyName);
+    const all = assembly?.regions;
+    if (all) {
+        // resolveNamedRegions is what reports a list that matched nothing —
+        // otherwise a typo'd refName silently shows the whole genome and reads as
+        // displayedRegionNames being ignored. The FALLBACK stays here because it is
+        // this view's alone: nothing shown yet means show the whole genome rather
+        // than an empty view, but already navigated (URL params layered onto a
+        // defaultSession) means keep what's there, since a typo shouldn't discard
+        // the session's own navigation.
+        const regions = resolveNamedRegions({
+            regions: all,
+            names,
+            assemblyName,
+            getCanonicalRefName: assembly.getCanonicalRefName2,
+            allRefNames: assembly.allRefNames,
+            notify: message => {
+                session.notify(message, 'warning');
+            },
+        });
+        if (regions) {
+            // showRegions, not showAllRegionsInAssembly: `displayedRegionNames` is
+            // the spec naming what it wants shown, so it gets the width
+            self.showRegions(regions);
         }
-        if (init) {
-            const session = getSession(self);
-            const { assemblyManager } = session;
-            if (init.tracklist) {
-                self.activateTrackSelector();
-                const currentWidth = self.volatileWidth;
-                await when(() => self.volatileWidth !== currentWidth, {
-                    timeout: 500,
-                }).catch(() => {
-                });
-            }
-            try {
-                if (init.loc) {
-                    const asm = await assemblyManager.waitForAssembly(init.assembly);
-                    if (!asm) {
-                        throw new Error('Assembly not found');
-                    }
-                    await self.navToSearchString({
-                        input: init.loc,
-                        assembly: asm,
-                    });
-                }
-                else {
-                    self.showAllRegionsInAssembly(init.assembly);
-                }
-            }
-            catch (e) {
-                console.error(init, e);
-                session.notifyError(`${e}`, e);
+        else if (!self.hasDisplayedRegions) {
+            // The fallback IS "show me everything", so it keeps the margin.
+            self.showAllRegionsInAssembly(assemblyName);
+        }
+    }
+}
+async function navigateInit(self, session, init) {
+    try {
+        if (init.loc) {
+            // navToLocString waits for the assembly itself, and this autorun only
+            // runs once `initialized` confirms init.assembly has loaded regions, so
+            // no explicit waitForAssembly is needed here
+            // a spec that listed its tracks gets those tracks; one that only named
+            // a gene gets the track the gene was found in, as the search box would
+            await self.navToLocString(init.loc, init.assembly, init.grow, {
+                showHitTrack: init.showHitTrack ?? asArray(init.tracks).length === 0,
+            });
+        }
+        else if (init.displayedRegionNames?.length) {
+            // an explicit region list is a navigation request just like `loc`, so it
+            // applies even when regions already exist (URL params layered onto a
+            // defaultSession that already navigated)
+            //
+            // `?.length`, not the bare key: an empty array is truthy, so a spec
+            // writing `displayedRegionNames: []` took this path with nothing to name
+            // and got told its list of no names had matched no regions. That is why
+            // LinearSyntenyView's doSubmit omits the key rather than passing [].
+            showNamedRegions(self, session, init.assembly, init.displayedRegionNames);
+        }
+        else if (!self.hasDisplayedRegions) {
+            // a highlight-only init (nothing to navigate to) must not clobber a
+            // defaultSession's existing navigation, so only auto-navigate when
+            // nothing is shown yet
+            self.showAllRegionsInAssembly(init.assembly);
+        }
+    }
+    catch (e) {
+        console.error(init, e);
+        if (e instanceof SearchResultsNotFoundError) {
+            // a &loc= gene name that matched nothing is a soft miss, not an app error
+            session.notify(e.message, 'warning');
+        }
+        else {
+            session.notifyError(`${e}`, e);
+        }
+    }
+}
+// launchTrack funnels through showTrackGeneric, which surfaces any failure
+// (unresolved id, bad config, etc) as its own snackbar, and loads the picked
+// display's state model first when it is registered lazily
+async function showInitTracks(self, init) {
+    for (const t of asArray(init.tracks)) {
+        const { trackId, trackSnapshot, displaySnapshot } = normalizeTrackInit(t);
+        await self.launchTrack(trackId, trackSnapshot, displaySnapshot);
+    }
+}
+/**
+ * Add an init blob's `highlight` entries to the session, coercing each
+ * locstring or wire-format object and reporting a bad one without taking out
+ * its siblings. An entry without an assembly takes the launch's.
+ *
+ * Exported because a LinearSyntenyView row is a LinearGenomeView that does NOT
+ * go through this file's init autorun — the synteny view builds each row's
+ * snapshot and navigates it itself — so the row's own `highlight` had nowhere
+ * to be applied and was dropped in silence.
+ */
+export function applyInitHighlights(session, init) {
+    for (const h of asArray(init.highlight)) {
+        // parseLocString throws on an unknown refName or a malformed locstring, and
+        // one bad entry must take out neither its siblings nor the rest of init
+        try {
+            const highlight = coerceHighlight(h, init.assembly, refName => session.assemblyManager.isValidRefName(refName, init.assembly));
+            if (highlight) {
+                session.addHighlight(highlight);
             }
-            if (init.tracks) {
-                const idsNotFound = [];
-                for (const t of init.tracks) {
-                    try {
-                        if (typeof t === 'string') {
-                            self.showTrack(t);
-                        }
-                        else {
-                            self.showTrack(t.trackId, t.trackSnapshot ?? {}, t.displaySnapshot ?? {});
-                        }
-                    }
-                    catch (e) {
-                        const trackId = typeof t === 'string' ? t : t.trackId;
-                        if (/Could not resolve identifier/.exec(`${e}`)) {
-                            idsNotFound.push(trackId);
-                        }
-                        else {
-                            throw e;
-                        }
-                    }
-                }
-                if (idsNotFound.length) {
-                    session.notifyError(`Could not resolve identifiers: ${idsNotFound.join(',')}`, new Error(`Could not resolve identifiers: ${idsNotFound.join(',')}`));
+        }
+        catch (e) {
+            console.error(e);
+            session.notifyError(`Invalid init highlight ${JSON.stringify(h)}: ${e}`, e);
+        }
+    }
+}
+async function applyInit(self, pending, { superseded }) {
+    const session = getSession(self);
+    // A re-launch of a view already showing an assembly need not restate it:
+    // jb.setSession writes `loc` and track entries beside the built state, and
+    // the readiness gate resolved the same default before letting this run.
+    const init = pending.assembly
+        ? pending
+        : { ...pending, assembly: self.launchAssemblyName ?? pending.assembly };
+    if (init.tracklist) {
+        await openTracklist(self, session, superseded);
+    }
+    // `superseded`, not a bare isAlive: it subsumes the liveness check (the view
+    // may have been removed while the drawer or the navigation resolved, and
+    // reading or mutating a detached node throws) and also covers the case
+    // isAlive misses — a newer setLaunch landed mid-apply, so the rest of *this*
+    // blob is stale. Finishing it anyway appends its tracks and highlights under
+    // the one that replaced it. The drain loop applies the newer init next either
+    // way.
+    //
+    // Checked after each await rather than once at the top, and as early returns
+    // rather than nesting, so a step added later takes a guard beside it instead
+    // of another level of indent.
+    if (superseded()) {
+        return;
+    }
+    await navigateInit(self, session, init);
+    if (superseded()) {
+        return;
+    }
+    await showInitTracks(self, init);
+    if (superseded()) {
+        return;
+    }
+    if (init.nav !== undefined) {
+        self.setHideHeader(!init.nav);
+    }
+    applyInitHighlights(session, init);
+}
+/**
+ * The init autorun below waits for the view's width, which exists only once its
+ * component has rendered, and then loads the assembly and launches the tracks
+ * one at a time. The assembly and the display code each pending track needs can
+ * start loading now, all at once.
+ */
+function setupInitWarmup(self) {
+    addDisposer(self, autorun(function initWarmupAutorun() {
+        const pending = self.pendingLaunch;
+        const tracks = asArray(pending?.tracks);
+        // eslint-disable-next-line no-restricted-syntax -- EFFECT INPUT: the assembly and track configs only feed the loads started here; the pending launch is the key
+        untracked(() => {
+            const assembly = pending?.assembly ?? self.launchAssemblyName;
+            if (pending && assembly) {
+                try {
+                    getSession(self)
+                        .assemblyManager.waitForAssembly(assembly)
+                        .catch(() => { });
                 }
-            }
-            if (init.nav !== undefined) {
-                self.setHideHeader(!init.nav);
-            }
-            if (self.highlight.length) {
-                const fallback = self.assemblyNames[0];
-                if (fallback) {
-                    const normalized = self.highlight.map(h => h.assemblyName ? h : { ...h, assemblyName: fallback });
-                    if (normalized.some((h, i) => h !== self.highlight[i])) {
-                        self.setHighlight(normalized);
-                    }
+                catch {
+                    // navigation reports an assembly that cannot load
                 }
             }
-            if (init.highlight) {
-                for (const h of init.highlight) {
-                    const json = h.trim().startsWith('{') && tryParseJson(h);
-                    if (json &&
-                        typeof json.refName === 'string' &&
-                        typeof json.start === 'number' &&
-                        typeof json.end === 'number') {
-                        self.addToHighlights({
-                            refName: json.refName,
-                            start: json.start,
-                            end: json.end,
-                            assemblyName: typeof json.assemblyName === 'string'
-                                ? json.assemblyName
-                                : init.assembly,
-                            color: typeof json.color === 'string' ? json.color : undefined,
-                            label: typeof json.label === 'string' ? json.label : undefined,
-                        });
-                    }
-                    else {
-                        const p = parseLocString(h, refName => assemblyManager.isValidRefName(refName, init.assembly));
-                        const { start, end } = p;
-                        if (start !== undefined && end !== undefined) {
-                            self.addToHighlights({
-                                ...p,
-                                start,
-                                end,
-                                assemblyName: init.assembly,
-                            });
-                        }
-                    }
-                }
+            for (const t of tracks) {
+                const { trackId, displaySnapshot } = normalizeTrackInit(t);
+                warmTrackDisplayGeneric(self, trackId, displaySnapshot, assembly);
             }
-            self.setInit(undefined);
-        }
-    }, { name: 'LGVInit' }));
+        });
+    }, { name: 'LGVInitWarmup' }));
 }
-export function setupCoarseDynamicBlocksAutorun(self) {
+/**
+ * Autorun that handles the init state - navigating to initial location,
+ * showing tracks, etc.
+ */
+export function setupInitAutorun(self) {
+    installInitAutorun(self, {
+        name: 'LGVInit',
+        // `init` is what makes hasSomethingToShow / awaitingInitNavigation report
+        // "loading"
+        // until navigation populates displayedRegions, so the alternative gate
+        // (clearing `init` up front, the way SpreadsheetView does) would flash the
+        // import form mid-load.
+        ready: () => self.initialized,
+        // No pre-materialization phase to protect: the view is its own single row,
+        // and `error` already derives a failed init assembly declaratively (via
+        // initAssembly), so anything thrown out of applyInit is a failure of a
+        // step, not of the view coming up.
+        materialized: () => true,
+        apply: (init, ctx) => applyInit(self, init, ctx),
+    });
+}
+/**
+ * Autorun that updates coarse dynamic blocks with a delay
+ */
+function setupCoarseDynamicBlocksAutorun(self) {
     addDisposer(self, autorun(function coarseDynamicBlocksAutorun() {
         if (self.initialized) {
-            self.setCoarseDynamicBlocks(self.dynamicBlocks);
+            self.setCoarseDynamicBlocks(self.dynamicBlocks, self.bpPerPx);
         }
-    }, { delay: 500, name: 'LGVCoarseDynamicBlocks' }));
+    }, {
+        delay: 500,
+        name: 'LGVCoarseDynamicBlocks',
+    }));
 }
-export function setupLocalStorageAutorun(self) {
+/**
+ * Autorun that syncs view settings to localStorage
+ */
+function setupLocalStorageAutorun(self) {
     addDisposer(self, autorun(function localStorageAutorun() {
         const s = (s) => JSON.stringify(s);
-        const { showCytobandsSetting, showCenterLine, colorByCDS, showTrackOutlines, trackLabels, } = self;
-        localStorageSetItem('lgv-showCytobands', s(showCytobandsSetting));
+        const { showCytobands, showCenterLine, colorByCDS, showAminoAcids, showTrackOutlines, trackLabels, } = self;
+        localStorageSetItem('lgv-showCytobands', s(showCytobands));
         localStorageSetItem('lgv-showCenterLine', s(showCenterLine));
         localStorageSetItem('lgv-colorByCDS', s(colorByCDS));
+        localStorageSetItem('lgv-showAminoAcids', s(showAminoAcids));
         localStorageSetItem('lgv-showTrackOutlines', s(showTrackOutlines));
-        localStorageSetItem('lgv-trackLabels', trackLabels);
-    }, { name: 'LGVLocalStorage' }));
+        // skip writing the empty default — otherwise reads later round-trip to
+        // '' instead of null, hiding the config-fallback path
+        if (trackLabels) {
+            localStorageSetItem('lgv-trackLabels', trackLabels);
+        }
+    }, {
+        name: 'LGVLocalStorage',
+    }));
 }
+/**
+ * Sets up all afterAttach autoruns for the LinearGenomeView
+ */
 export function doAfterAttach(self) {
+    setupInitWarmup(self);
     setupInitAutorun(self);
     setupCoarseDynamicBlocksAutorun(self);
     setupLocalStorageAutorun(self);

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

@@ -2,5 +2,5 @@ import type { LinearGenomeViewModel } from '../index.ts';
 type LGV = LinearGenomeViewModel;
 declare const CenterLine: ({ model }: {
     model: LGV;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export default CenterLine;

package/esm/LinearGenomeView/components/CenterLine.js

@@ -1,12 +1,15 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clamp } from '@jbrowse/core/util';
+import { basePaintedAt } from '@jbrowse/core/util/Base1DUtils';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 const useStyles = makeStyles()(theme => ({
     centerLineContainer: {
         background: 'transparent',
         height: '100%',
-        zIndex: 4,
+        zIndex: 4, // above the track but under menu
         position: 'absolute',
         left: 0,
         border: `1px ${theme.palette.action.active} dashed`,
@@ -17,22 +20,30 @@ const useStyles = makeStyles()(theme => ({
     centerLineText: {
         position: 'absolute',
         left: 0,
-        pointerEvents: 'none',
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 2,
         whiteSpace: 'nowrap',
         fontWeight: 'bold',
     },
+    dismiss: {
+        // re-enable clicks disabled on the pointer-events:none container
+        pointerEvents: 'auto',
+        padding: 2,
+    },
 }));
 const CenterLine = observer(function CenterLine({ model }) {
-    const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model;
-    const ref = useRef(null);
+    const { bpPerPx, centerLineInfo, tracks, width } = model;
     const { classes } = useStyles();
     const startingPosition = width / 2;
-    return tracks.length ? (_jsx("div", { "data-testid": "centerline_container", className: classes.centerLineContainer, role: "presentation", ref: ref, style: {
+    return tracks.length ? (_jsx("div", { "data-testid": "centerline_container", className: classes.centerLineContainer, role: "presentation", style: {
             transform: `translateX(${startingPosition}px)`,
             width: Math.max(1 / bpPerPx, 1),
         }, children: centerLineInfo && (_jsxs("div", { "data-testid": "centerline_text", className: classes.centerLineText, role: "presentation", style: {
                 transform: `translateX(${Math.max(1 / bpPerPx, 1) + 5}px)`,
-                top: trackHeights,
-            }, children: [centerLineInfo.refName, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0)] })) })) : null;
+            }, children: [centerLineInfo.refName, ":", ' ', (clamp(basePaintedAt(centerLineInfo, centerLineInfo.offset), centerLineInfo.start, centerLineInfo.end - 1) + 1).toLocaleString('en-US'), _jsx(Tooltip, { title: "Hide center line", children: _jsx(IconButton, { className: classes.dismiss, onClick: () => {
+                            model.setShowCenterLine(false);
+                        }, children: _jsx(CloseIcon, { fontSize: "inherit" }) }) })] })) })) : null;
 });
 export default CenterLine;

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

@@ -0,0 +1,7 @@
+import type { LinearGenomeViewModel } from '../model.ts';
+import type { HoverHighlightPosition } from './HoverPositionHighlight.tsx';
+declare const ConnectedHoverHighlight: ({ model, getPosition, }: {
+    model: LinearGenomeViewModel;
+    getPosition: (widget: unknown, viewId: string) => HoverHighlightPosition | undefined;
+}) => import("react").JSX.Element | null;
+export default ConnectedHoverHighlight;

package/esm/LinearGenomeView/components/ConnectedHoverHighlight.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { getSession } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+import HoverPositionHighlight from './HoverPositionHighlight.js';
+// Draws a crosshair for every session widget "connected" to this view that is
+// currently publishing a hover position. Each cross-widget hover overlay (the
+// feature-detail sequence panel, the MAF sequence widget) supplies only its own
+// `getPosition`, which narrows an arbitrary widget to its model and returns the
+// hovered interval or undefined; the widget iteration and drawing are shared.
+const ConnectedHoverHighlight = observer(function ConnectedHoverHighlight({ model, getPosition, }) {
+    const session = getSession(model);
+    const widgets = 'widgets' in session ? session.widgets : undefined;
+    return !widgets ? null : (_jsx(_Fragment, { children: [...widgets].flatMap(([id, widget]) => {
+            const position = getPosition(widget, model.id);
+            return position
+                ? [
+                    _jsx(HoverPositionHighlight, { model: model, position: position }, `hover-${id}`),
+                ]
+                : [];
+        }) }));
+});
+export default ConnectedHoverHighlight;

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

@@ -0,0 +1,3 @@
+import type { SequenceSearchModeProps } from './searchModes.ts';
+declare const CrisprGuidePanel: ({ model, handleClose, }: SequenceSearchModeProps) => import("react").JSX.Element;
+export default CrisprGuidePanel;