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

package/esm/LinearGenomeView/afterAttach.js

@@ -1,144 +1,275 @@
-import { getSession, localStorageSetItem, parseLocString, } from '@jbrowse/core/util';
-import { addDisposer } from '@jbrowse/mobx-state-tree';
+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 } from '@jbrowse/core/util/tracks';
+import { addDisposer, getPropertyMembers } from '@jbrowse/mobx-state-tree';
 import { autorun, when } from 'mobx';
-function tryParseJson(s) {
+import { SearchResultsNotFoundError } from '../searchUtils.js';
+import { partitionLaunchKeys, warnUnknownLaunchKeys } from './initKeys.js';
+function warnInitKeyProblems(self, init) {
+    const { viewProps, unknown } = partitionLaunchKeys(init, new Set(Object.keys(getPropertyMembers(self).properties)));
+    const viewPropKeys = Object.keys(viewProps);
+    warnUnknownLaunchKeys('LinearGenomeView init', unknown);
+    if (viewPropKeys.length) {
+        console.warn(`LinearGenomeView init ignored view prop(s): ${viewPropKeys.join(', ')} — set these on the view alongside init, not inside it`);
+    }
+}
+// `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)) {
+        // `poppedOut` — the visible widget rendered in a modal, leaving the drawer
+        // column free — lives on SessionWithDrawerWidgets, whose type guard is
+        // product-core's, so duck-type it here rather than take an upward
+        // dependency. A session without the key has no modal to pop out into, so
+        // false is the right answer for it.
+        const poppedOut = 'poppedOut' in session && session.poppedOut === true;
+        // the same line App.tsx draws to decide whether to render the drawer column
+        // at all. A *minimized* drawer still holds a visibleWidget while taking no
+        // width, and showWidget un-minimizes it (product-core's DrawerWidgets), so
+        // `!!visibleWidget` alone reads "already open", skips the wait below, and
+        // hands navigation the pre-drawer width — the exact thing this is here to
+        // prevent.
+        const drawerWasOpen = !!session.visibleWidget && !session.minimized && !poppedOut;
+        const widthBefore = self.volatileWidth;
+        self.activateTrackSelector();
+        // a width change is only coming if the drawer is about to start taking
+        // space; popped out it never does, so don't sit out the timeout for it
+        if (!drawerWasOpen && !poppedOut) {
+            // 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(() => { });
+        }
+    }
+    else {
+        session.notify('init.tracklist was ignored: this application has no track selector drawer', 'warning');
+    }
+}
+// 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);
+        }
+        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 {
-        const v = JSON.parse(s);
-        return v && typeof v === 'object'
-            ? v
-            : undefined;
+        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
+            await self.navToLocString(init.loc, init.assembly, init.grow);
+        }
+        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 {
-        return undefined;
+    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);
+        }
     }
 }
-export function setupInitAutorun(self) {
-    addDisposer(self, autorun(async function initAutorun() {
-        const { init, initialized } = self;
-        if (!initialized) {
-            return;
+// showTrack funnels through showTrackGeneric, which surfaces any failure
+// (unresolved id, bad config, etc) as its own snackbar
+function showInitTracks(self, init) {
+    for (const t of asArray(init.tracks)) {
+        const { trackId, trackSnapshot, displaySnapshot } = normalizeTrackInit(t);
+        self.showTrack(trackId, trackSnapshot, displaySnapshot);
+    }
+}
+// backfill assemblyName on any session-authored highlights that omitted it so
+// downstream code (bookmark widget grid, addBookmark, etc) doesn't have to keep
+// falling back
+function backfillHighlightAssemblies(self) {
+    const fallback = self.assemblyNames[0];
+    if (self.highlight.length && 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);
         }
-        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);
-            }
-            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(',')}`));
-                }
-            }
-            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);
-                    }
-                }
-            }
-            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,
-                            });
-                        }
-                    }
-                }
+    }
+}
+/**
+ * Apply an init blob's `highlight` entries to a view, coercing each locstring
+ * or wire-format object and reporting a bad one without taking out its
+ * siblings.
+ *
+ * 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(self, 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) {
+                self.addToHighlights(highlight);
             }
-            self.setInit(undefined);
         }
-    }, { name: 'LGVInit' }));
+        catch (e) {
+            console.error(e);
+            session.notifyError(`Invalid init highlight ${JSON.stringify(h)}: ${e}`, e);
+        }
+    }
 }
-export function setupCoarseDynamicBlocksAutorun(self) {
+async function applyInit(self, init, { superseded }) {
+    const session = getSession(self);
+    warnInitKeyProblems(self, init);
+    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 setInit 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, and addToHighlights pushes, so a re-launch of the
+    // same spec (a StrictMode remount) doubles the bands. 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;
+    }
+    showInitTracks(self, init);
+    if (init.nav !== undefined) {
+        self.setHideHeader(!init.nav);
+    }
+    backfillHighlightAssemblies(self);
+    applyInitHighlights(self, session, init);
+}
+/**
+ * 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) {
     setupInitAutorun(self);
     setupCoarseDynamicBlocksAutorun(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,13 @@
-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 { 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 +18,30 @@ const useStyles = makeStyles()(theme => ({
     centerLineText: {
         position: 'absolute',
         left: 0,
-        pointerEvents: 'none',
+        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 { 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, ":", ' ', Math.max(Math.round(centerLineInfo.offset) + 1, 0).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;

package/esm/LinearGenomeView/components/CrisprGuidePanel.js

@@ -0,0 +1,144 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { IUPAC_MOTIF_REGEX } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import SearchPanelForm from './SearchPanelForm.js';
+import StrandCheckboxes from './StrandCheckboxes.js';
+import { addReferenceScanTrack } from './searchModes.js';
+const useStyles = makeStyles()({
+    row: {
+        display: 'flex',
+        gap: 12,
+        '& > *': {
+            flex: 1,
+        },
+    },
+    toggleRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 12,
+    },
+});
+// PAM 3' of the protospacer for Cas9-type enzymes, 5' for Cas12a. The two cut
+// offsets are bp from the PAM-proximal end of the protospacer to each strand's
+// cut: equal for a blunt cutter, staggered for Cas12a, which leaves a 5-nt 5'
+// overhang.
+const ENZYME_PRESETS = {
+    SpCas9: {
+        pam: 'NGG',
+        guideLength: 20,
+        pamLocation: '3prime',
+        cutOffset: 3,
+        cutOffsetBottom: 3,
+    },
+    SaCas9: {
+        pam: 'NNGRRT',
+        guideLength: 21,
+        pamLocation: '3prime',
+        cutOffset: 3,
+        cutOffsetBottom: 3,
+    },
+    'Cas12a (Cpf1)': {
+        pam: 'TTTV',
+        guideLength: 23,
+        pamLocation: '5prime',
+        cutOffset: 18,
+        cutOffsetBottom: 23,
+    },
+};
+// The one filter preset the panel offers. The adapter's slots are a free GC
+// range plus a poly-T flag; these are the conventional cutoffs, named in the
+// checkbox label so the numbers aren't hidden behind a word like "usable".
+const GC_FILTER = { minGcPercent: 40, maxGcPercent: 60 };
+const NO_FILTER = { minGcPercent: 0, maxGcPercent: 100 };
+const DEFAULT_ENZYME = 'SpCas9';
+const DEFAULT_PRESET = ENZYME_PRESETS[DEFAULT_ENZYME];
+const toBpCount = (str) => (str.trim() ? Number(str) : Number.NaN);
+const CrisprGuidePanel = observer(function CrisprGuidePanel({ model, handleClose, }) {
+    const { classes } = useStyles();
+    const [enzyme, setEnzyme] = useState(DEFAULT_ENZYME);
+    const [pam, setPam] = useState(DEFAULT_PRESET.pam);
+    const [pamLocation, setPamLocation] = useState(DEFAULT_PRESET.pamLocation);
+    const [guideLengthStr, setGuideLengthStr] = useState(String(DEFAULT_PRESET.guideLength));
+    const [cutOffsetStr, setCutOffsetStr] = useState(String(DEFAULT_PRESET.cutOffset));
+    // presets carry this; Custom is treated as a blunt cutter, so the panel does
+    // not grow a second offset field for a case config can express directly
+    const [cutOffsetBottom, setCutOffsetBottom] = useState(DEFAULT_PRESET.cutOffsetBottom);
+    const [searchForward, setSearchForward] = useState(true);
+    const [searchReverse, setSearchReverse] = useState(true);
+    const [filterQuality, setFilterQuality] = useState(false);
+    // `Number('')` is 0, so an emptied field would otherwise read as a valid zero
+    const guideLength = toBpCount(guideLengthStr);
+    const cutOffset = toBpCount(cutOffsetStr);
+    // both are bp counts used for fixed-length string slicing, so a fractional
+    // value would silently truncate and skew the placement
+    const guideLengthValid = Number.isInteger(guideLength) && guideLength > 0;
+    // a cut beyond either end of the protospacer draws its tick outside the glyph
+    // that is supposed to carry it, and outside the box that can be clicked
+    const cutOffsetValid = Number.isInteger(cutOffset) && cutOffset >= 0 && cutOffset <= guideLength;
+    // each PAM position must be a single IUPAC code (one base); other characters
+    // would leak into the match regex and break the fixed-length placement
+    const pamValid = IUPAC_MOTIF_REGEX.test(pam);
+    const canSubmit = pamValid &&
+        guideLengthValid &&
+        cutOffsetValid &&
+        (searchForward || searchReverse);
+    // a staggered cutter shows both offsets, e.g. "cut 18/23 bp from PAM"
+    const cutSummary = cutOffsetBottom === cutOffset
+        ? cutOffset
+        : `${cutOffset}/${cutOffsetBottom}`;
+    const presetSummary = ENZYME_PRESETS[enzyme]
+        ? `PAM ${pam} · ${guideLength} bp guide · cut ${cutSummary} bp from PAM`
+        : 'Set a custom PAM and geometry below';
+    function applyPreset(name) {
+        setEnzyme(name);
+        const preset = ENZYME_PRESETS[name];
+        if (preset) {
+            setPam(preset.pam);
+            setPamLocation(preset.pamLocation);
+            setGuideLengthStr(String(preset.guideLength));
+            setCutOffsetStr(String(preset.cutOffset));
+            setCutOffsetBottom(preset.cutOffsetBottom);
+        }
+    }
+    function handleSubmit() {
+        addReferenceScanTrack(model, {
+            trackId: `crispr_guides_${Date.now()}`,
+            name: enzyme === 'Custom'
+                ? `CRISPR guides ${pam}`
+                : `CRISPR guides ${enzyme} (${pam})`,
+            adapter: {
+                type: 'CrisprGuideAdapter',
+                pam,
+                guideLength,
+                pamLocation,
+                cutOffset,
+                cutOffsetBottom: enzyme === 'Custom' ? cutOffset : cutOffsetBottom,
+                searchForward,
+                searchReverse,
+                excludePolyT: filterQuality,
+                ...(filterQuality ? GC_FILTER : NO_FILTER),
+            },
+        });
+        handleClose();
+    }
+    return (_jsxs(SearchPanelForm, { onSubmit: handleSubmit, handleClose: handleClose, submitDisabled: !canSubmit, children: [_jsx(TextField, { select: true, variant: "outlined", size: "small", label: "Enzyme", value: enzyme, helperText: presetSummary, onChange: event => {
+                    applyPreset(event.target.value);
+                }, children: [...Object.keys(ENZYME_PRESETS), 'Custom'].map(name => (_jsx(MenuItem, { value: name, children: name }, name))) }), enzyme === 'Custom' ? (_jsxs(_Fragment, { children: [_jsx(TextField, { size: "small", label: "PAM (IUPAC)", value: pam, error: !pamValid, helperText: pamValid ? undefined : 'Use IUPAC codes only', onChange: event => {
+                            setPam(event.target.value.toUpperCase());
+                        } }), _jsxs("div", { className: classes.row, children: [_jsx(TextField, { size: "small", label: "Guide length (bp)", value: guideLengthStr, error: !guideLengthValid, helperText: guideLengthValid ? undefined : 'A whole number of bp', onChange: event => {
+                                    setGuideLengthStr(event.target.value);
+                                } }), _jsx(TextField, { size: "small", label: "Cut offset (bp)", value: cutOffsetStr, error: !cutOffsetValid, helperText: cutOffsetValid ? undefined : 'bp from the PAM, within the guide', onChange: event => {
+                                    setCutOffsetStr(event.target.value);
+                                } })] }), _jsxs("div", { className: classes.toggleRow, children: [_jsx(Typography, { variant: "body2", color: "textSecondary", children: "PAM location" }), _jsxs(ToggleButtonGroup, { exclusive: true, size: "small", value: pamLocation, onChange: (_event, value) => {
+                                    if (value) {
+                                        setPamLocation(value);
+                                    }
+                                }, children: [_jsx(ToggleButton, { value: "3prime", children: "3\u2032 (Cas9)" }), _jsx(ToggleButton, { value: "5prime", children: "5\u2032 (Cas12a)" })] })] })] })) : null, _jsx(StrandCheckboxes, { searchForward: searchForward, searchReverse: searchReverse, setSearchForward: setSearchForward, setSearchReverse: setSearchReverse }), _jsx(LabeledCheckbox, { size: "small", checked: filterQuality, onChange: val => {
+                    setFilterQuality(val);
+                }, label: "Keep only guides with 40-60% GC and no poly-T run" })] }));
+});
+export default CrisprGuidePanel;

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

@@ -1,9 +1,9 @@
-import type { Assembly } from '@jbrowse/core/assemblyManager/assembly';
-import type { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import type { Cytoband } from './util.ts';
+import type { ViewLayout } from '@jbrowse/core/util/Base1DUtils';
 import type { ContentBlock } from '@jbrowse/core/util/blockTypes';
-declare const Cytobands: ({ overview, block, assembly, }: {
-    overview: Base1DViewModel;
-    assembly?: Assembly;
+declare const Cytobands: ({ overview, block, cytobands, }: {
+    overview: ViewLayout;
+    cytobands: Cytoband[];
     block: ContentBlock;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Cytobands;