@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/svg/svgReady.js

@@ -0,0 +1,165 @@
+import { when } from 'mobx';
+import { whenViewSettled } from '../util/whenViewSettled.js';
+// Elapsed, not idle. An idle bound would be the better instrument — a slow
+// export progresses, a stuck one does not — but there is no signal to hang it
+// on: `svgReady` is a computed that stays false for the whole fetch, so mobx
+// never re-evaluates the predicate to say work is still landing, and only one
+// of the five display families exposes `isLoading`.
+//
+// So the number carries the whole argument, and it is picked to make a false
+// failure implausible rather than merely unlikely: half an hour, against real
+// exports over remote 1000 Genomes data that finish in about ten seconds and a
+// worst measured case in low minutes. A caller that knows it is slower than
+// that passes its own bound; nothing here fails an export that is merely slow.
+const SVG_READY_TIMEOUT_MS = 1_800_000;
+/**
+ * Whether an off-screen (SVG) export can read this display's data now: the held
+ * data is current for what is on screen, or the fetch reached a terminal state.
+ *
+ * Single-sourced for the same reason as `computeDisplayPhase`: every display
+ * family expresses freshness differently — spatial coverage (per-region), a
+ * signature compare (global, dotplot, synteny) — but the *policy* wrapping it
+ * is identical, and each of the five
+ * hand-written copies this replaced was one place to forget a terminal and hang
+ * the export, or to forget freshness and capture a stale viewport (both have
+ * shipped; see agent-docs/reference/SVG_EXPORT.md).
+ *
+ * `dataCurrent` is a **thunk**, evaluated only after the terminals are ruled
+ * out, for the same MobX reason `computeDisplayPhase`'s `loading` is: freshness
+ * typically reads the containing view's `visibleRegions` / `loadedRegions`, and
+ * the `when()` in `awaitSvgReady` shouldn't subscribe to that churn while a
+ * banner is up.
+ */
+export function computeSvgReady({ error, regionTooLarge, extraTerminal, fetchCanceled }, dataCurrent) {
+    return (!!error || regionTooLarge || extraTerminal || fetchCanceled || dataCurrent());
+}
+/**
+ * Off-screen renderers (SVG export, headless jbrowse-img) must wait until the
+ * display reaches a terminal state before reading its data. That whole policy
+ * lives in `svgReady`; this is the one shared way to await it, so renderers
+ * never re-inline `data != null || error || …`. `svgReady` is a terminal state
+ * (data loaded, or error / too-large / canceled), so it resolves once the fetch
+ * it observes settles; the half-hour `timeoutMs` is only a backstop for a gate
+ * that cannot converge. If a throwing `svgReady` getter rejects the wait, that
+ * error propagates faithfully rather than being masked.
+ *
+ * It then fails the export if the terminal it settled on was the error
+ * (`throwOnExportErrors`, below, for why that is fatal), making this the exact
+ * display-level twin of `awaitViewInitialized`: both wait for `settled || error`
+ * and both refuse to continue on the error, so the postcondition of each is
+ * "there is something to draw". Folded in rather than left to the caller because
+ * `svgReady` is *true* on error, so a caller that awaits and stops there gets a
+ * display with nothing to draw and no sign of why.
+ *
+ * Every display uses this one, including the ones with nowhere to draw an error
+ * (dotplot, synteny) — a display never has to know whether it owns the surface
+ * it paints, because the thing that made that distinction matter, reporting all
+ * the failures rather than one, is `awaitSvgRenders`'s job.
+ *
+ * A standing user cancel fails the export the same way an error does, and for
+ * the same reason the error is folded in rather than left to the caller: the
+ * cancel terminal makes `svgReady` *true* over a display with nothing to draw,
+ * so a caller that awaits and stops there exports that track blank in silence.
+ * On screen the same state shows "Loading canceled / Retry", so the loud
+ * failure matches what the user is looking at.
+ */
+export async function awaitSvgReady(model, timeoutMs = SVG_READY_TIMEOUT_MS) {
+    // Only the bound is rewritten. A `svgReady` getter that throws rejects here
+    // too, and that error is the caller's answer, not a timeout.
+    await when(() => model.svgReady, { timeout: timeoutMs }).catch((e) => {
+        throw e instanceof Error && e.message === 'WHEN_TIMEOUT'
+            ? new Error(`a display never became ready to export, after ${Math.round(timeoutMs / 60_000)} minutes. ` +
+                'Every wait here ends on data, an error or a cancel, so this is ' +
+                'none of the three: a gate that cannot converge. Pass a longer ' +
+                'timeoutMs if this export really does take longer than that.')
+            : e;
+    });
+    throwOnExportErrors([
+        model.error == null && model.fetchCanceled
+            ? new Error('data loading was canceled — Retry the track, then export')
+            : model.error,
+    ]);
+}
+/**
+ * The view-level counterpart, for the wait every `renderToSvg` opens with:
+ * `whenViewSettled` in the export's own vocabulary. Why the bare
+ * `when(() => view.initialized)` it replaced could not fail — only hang — is
+ * documented there.
+ *
+ * Only a view that never initialized is fatal *here*. A track error on an
+ * initialized view is fatal too, but it is the displays' readiness waits that
+ * report it (`throwOnExportErrors`), after this one has let the export start.
+ */
+export async function awaitViewInitialized(view) {
+    if (!(await whenViewSettled(view))) {
+        // the wait only resolves on one of the two, so `error` is set here — and
+        // routing it through the shared thrower keeps one wording for "the export
+        // failed", whichever half of the export noticed
+        throwOnExportErrors([view.error]);
+    }
+}
+/**
+ * How the export answers "a track failed": by failing. A track whose data won't
+ * load has its error caught by the fetch layer and stored on the display, so the
+ * render itself still returns — with that track blank.
+ *
+ * An export is a standalone artifact, so a failed track is fatal: the dialog
+ * shows its error banner and saves nothing, and a headless caller (jbrowse-img)
+ * exits nonzero instead of writing a broken image. Drawing the error into the
+ * figure instead costs more than the red rect it leaves in the picture: on a
+ * shared surface (dotplot plot rect, synteny band) the box covers the tracks
+ * that *did* render, and a snapshot regenerated while a display is broken
+ * absorbs the stack trace as expected output — which is how a real crash sat
+ * inside two committed goldens without turning anything red.
+ *
+ * `regionTooLarge` is deliberately not routed here — see `SvgChrome`.
+ *
+ * The failures are kept on the thrown error so that nesting one `awaitSvgRenders`
+ * inside another (synteny: rows of tracks *and* levels of ribbons) still reports
+ * every leaf rather than one per group.
+ */
+export function throwOnExportErrors(errors) {
+    const failed = errors.filter(e => e != null);
+    if (failed.length > 0) {
+        throw Object.assign(new Error(`Cannot export: ${failed.join('\n')}`, { cause: failed[0] }), { exportFailures: failed });
+    }
+}
+/**
+ * The individual failures behind one rejection: the list `throwOnExportErrors`
+ * attached, or the rejection itself for anything else (a body that threw, which
+ * is a failure the same way a 404 is).
+ */
+function leafFailures(error) {
+    return error !== null &&
+        typeof error === 'object' &&
+        'exportFailures' in error &&
+        Array.isArray(error.exportFailures)
+        ? error.exportFailures
+        : [error];
+}
+async function settledOrThrow(renders) {
+    const settled = await Promise.allSettled(renders);
+    throwOnExportErrors(settled.flatMap(r => r.status === 'rejected' ? leafFailures(r.reason) : []));
+    return settled.flatMap(r => (r.status === 'fulfilled' ? [r.value] : []));
+}
+/**
+ * `Promise.all` for the renders a view fans out, differing in the one way an
+ * export needs: it fails with **every** failure instead of whichever rejected
+ * first. Exporting a session with three broken tracks should not mean finding
+ * the second one by fixing the first and exporting again. Nest it freely — an
+ * inner fan-out's failures are flattened into the outer one's report.
+ *
+ * That is also what lets every display await through the plain `awaitSvgReady`.
+ * A display on a shared surface (the dotplot's plot rect, a synteny level's
+ * band) has nowhere to draw an error and nothing complete to say alone; the
+ * alternative is for it to stay silent and let its view read the combined error
+ * back *after* the waits, which nothing enforces and every new shared-surface
+ * view has to rediscover. Here the display just throws, and being complete is
+ * the fan-out's job rather than the display's.
+ */
+export async function awaitSvgRenders(renders) {
+    // the mapped-tuple return type `Promise.all` also declares, and also can't
+    // produce from a value-level `map`. Past the throw inside, every entry is
+    // fulfilled, so the array really is that tuple.
+    return (await settledOrThrow(renders));
+}

package/esm/svg/trackNames.d.ts

@@ -0,0 +1,29 @@
+import type { AnyConfigurationModel } from '../configuration/index.ts';
+import type { NotificationSink, TrackCatalog } from '../util/index.ts';
+/**
+ * The name an export writes for a track. HTML in a config's name is stripped
+ * before it is measured or drawn, so the reserved gutter matches the glyphs.
+ *
+ * In core rather than in the LGV plugin because the skip notification below has
+ * to name tracks the same way the labels do, and the views that need to send it
+ * are not all LGV-family — a circular view depends on neither.
+ */
+export declare function svgTrackName(track: {
+    configuration: AnyConfigurationModel;
+}, session: TrackCatalog): string;
+/**
+ * Tell the user which visible tracks the export left out, by default because
+ * their display type implements no `renderSvg`. Called once per reason per
+ * export, after the renders — the stacked views flatten every row's
+ * `skippedTracks` into one call rather than notifying per row.
+ *
+ * A track shown in several rows is named once.
+ *
+ * Skipping is deliberate (see `SvgExportTrack.renderSvg`), so this is
+ * informational rather than an error. But it is not silent: a figure that is
+ * quietly short a track is worse than one whose author was told why, and the
+ * reader of the file has no way to tell the difference afterwards.
+ */
+export declare function notifySkippedSvgTracks(session: NotificationSink & TrackCatalog, skipped: {
+    configuration: AnyConfigurationModel;
+}[], reason?: string): void;

package/esm/svg/trackNames.js

@@ -0,0 +1,34 @@
+import { coarseStripHTML } from '../util/index.js';
+import { getTrackName } from '../util/tracks.js';
+/**
+ * The name an export writes for a track. HTML in a config's name is stripped
+ * before it is measured or drawn, so the reserved gutter matches the glyphs.
+ *
+ * In core rather than in the LGV plugin because the skip notification below has
+ * to name tracks the same way the labels do, and the views that need to send it
+ * are not all LGV-family — a circular view depends on neither.
+ */
+export function svgTrackName(track, session) {
+    return coarseStripHTML(getTrackName(track.configuration, session));
+}
+/**
+ * Tell the user which visible tracks the export left out, by default because
+ * their display type implements no `renderSvg`. Called once per reason per
+ * export, after the renders — the stacked views flatten every row's
+ * `skippedTracks` into one call rather than notifying per row.
+ *
+ * A track shown in several rows is named once.
+ *
+ * Skipping is deliberate (see `SvgExportTrack.renderSvg`), so this is
+ * informational rather than an error. But it is not silent: a figure that is
+ * quietly short a track is worse than one whose author was told why, and the
+ * reader of the file has no way to tell the difference afterwards.
+ */
+export function notifySkippedSvgTracks(session, skipped, reason) {
+    const names = [...new Set(skipped.map(t => svgTrackName(t, session)))];
+    if (names.length > 0) {
+        const why = reason ??
+            `${names.length === 1 ? 'Its display type does' : 'Their display types do'} not support SVG export.`;
+        session.notify(`Not included in the SVG: ${names.join(', ')}. ${why}`, 'info');
+    }
+}

package/esm/svg/wrapSvgExport.d.ts

@@ -0,0 +1,12 @@
+import type { ThemeOptions } from '@mui/material';
+export declare function wrapSvgExport({ theme, width, height, margin, fontFamily, Wrapper, children, }: {
+    theme: ThemeOptions | undefined;
+    width: number;
+    height: number;
+    margin?: number;
+    fontFamily?: string;
+    Wrapper?: React.FC<{
+        children: React.ReactNode;
+    }>;
+    children: React.ReactNode;
+}): string;

package/esm/svg/wrapSvgExport.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SVGExportRoot } from './SvgExport.js';
+import { SvgThemeProviders } from './SvgThemeProviders.js';
+import { serializeSvg } from './serializeSvg.js';
+// The identical tail every view's `renderToSvg` ends in: the export theme's
+// providers, the caller-supplied Wrapper, the root <svg>, and serialization to
+// a file's markup. Callers keep their own layout math and children.
+export function wrapSvgExport({ theme, width, height, margin, fontFamily, Wrapper = ({ children }) => children, children, }) {
+    return serializeSvg(_jsx(SvgThemeProviders, { theme: theme, children: _jsx(Wrapper, { children: _jsx(SVGExportRoot, { width: width, height: height, margin: margin, fontFamily: fontFamily, children: children }) }) }));
+}

package/esm/ui/ActionLink.d.ts

@@ -0,0 +1,7 @@
+/** A Link that acts as a button — no real navigation, just calls onClick. */
+export default function ActionLink({ onClick, children, className, title, }: {
+    onClick: () => void;
+    children: React.ReactNode;
+    className?: string;
+    title?: string;
+}): import("react").JSX.Element;

package/esm/ui/ActionLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from '@mui/material';
+/** A Link that acts as a button — no real navigation, just calls onClick. */
+export default function ActionLink({ onClick, children, className, title, }) {
+    return (_jsx(Link, { href: "#", className: className, title: title, onClick: (e) => {
+            e.preventDefault();
+            onClick();
+        }, children: children }));
+}

package/esm/ui/AddCustomPluginDialog.d.ts

@@ -0,0 +1,14 @@
+import type { PluginDefinition } from '../pluginDefinitions.ts';
+/**
+ * The "add a plugin by url" form, shared by every place a plugin can be
+ * installed from outside the store — the in-session plugin store widget and
+ * Desktop's global plugins dialog — so both mint the same definition shapes
+ * from the same fields.
+ *
+ * `onAdd` returns false to reject the definition and keep the dialog open (the
+ * plugin store rejects a name already installed).
+ */
+export default function AddCustomPluginDialog({ onClose, onAdd, }: {
+    onClose: () => void;
+    onAdd: (definition: PluginDefinition) => boolean;
+}): import("react").JSX.Element;

package/esm/ui/AddCustomPluginDialog.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Collapse, DialogContentText, IconButton, TextField, } from '@mui/material';
+import { cx, makeStyles } from '../util/tss-react/index.js';
+import SubmitDialog from './SubmitDialog.js';
+const useStyles = makeStyles()({
+    dialogContent: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    expand: {
+        transform: 'rotate(0deg)',
+        marginLeft: 'auto',
+        // Material's `shortest` duration and default easing, spelled out
+        transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+    },
+    expandOpen: {
+        transform: 'rotate(180deg)',
+    },
+});
+/**
+ * The "add a plugin by url" form, shared by every place a plugin can be
+ * installed from outside the store — the in-session plugin store widget and
+ * Desktop's global plugins dialog — so both mint the same definition shapes
+ * from the same fields.
+ *
+ * `onAdd` returns false to reject the definition and keep the dialog open (the
+ * plugin store rejects a name already installed).
+ */
+export default function AddCustomPluginDialog({ onClose, onAdd, }) {
+    const { classes } = useStyles();
+    const [umdPluginName, setUMDPluginName] = useState('');
+    const [umdPluginUrl, setUMDPluginUrl] = useState('');
+    const [esmPluginUrl, setESMPluginUrl] = useState('');
+    const [advancedOptionsOpen, setAdvancedOptionsOpen] = useState(false);
+    const ready = Boolean((umdPluginName && umdPluginUrl) || esmPluginUrl);
+    return (_jsx(SubmitDialog, { open: true, maxWidth: "sm", fullWidth: true, title: "Add custom plugin", submitDisabled: !ready, onCancel: onClose, onSubmit: () => {
+            const definition = umdPluginName && umdPluginUrl
+                ? { name: umdPluginName, umdUrl: umdPluginUrl }
+                : { esmUrl: esmPluginUrl };
+            if (onAdd(definition)) {
+                onClose();
+            }
+        }, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "Enter the name of the plugin and its URL. The name should match what is defined in the plugin's build." }), _jsx(TextField, { label: "Plugin name", variant: "outlined", fullWidth: true, margin: "dense", value: umdPluginName, onChange: event => {
+                        setUMDPluginName(event.target.value);
+                    } }), _jsx(TextField, { label: "Plugin URL", variant: "outlined", fullWidth: true, margin: "dense", value: umdPluginUrl, onChange: event => {
+                        setUMDPluginUrl(event.target.value);
+                    } }), _jsxs(DialogContentText, { onClick: () => {
+                        setAdvancedOptionsOpen(!advancedOptionsOpen);
+                    }, children: [_jsx(IconButton, { className: cx(classes.expand, {
+                                [classes.expandOpen]: advancedOptionsOpen,
+                            }), "aria-expanded": advancedOptionsOpen, "aria-label": "show more", children: _jsx(ExpandMoreIcon, {}) }), "Advanced options"] }), _jsx(Collapse, { in: advancedOptionsOpen, children: _jsxs("div", { className: classes.dialogContent, children: [_jsx(DialogContentText, { children: "The above fields assume that the plugin is built in UMD format. For an ESM build, enter its URL here instead; it carries its own name, so the fields above stay empty." }), _jsx(TextField, { label: "ESM build URL", variant: "outlined", fullWidth: true, margin: "dense", value: esmPluginUrl, onChange: event => {
+                                    setESMPluginUrl(event.target.value);
+                                } })] }) })] }) }));
+}

package/esm/ui/AddGenomePane.d.ts

@@ -0,0 +1,8 @@
+import type { FormState } from '../util/assemblyConfigUtils.ts';
+declare const AddGenomePane: ({ form, setForm, loading, onStageAnother, }: {
+    form: FormState;
+    setForm: (update: (prev: FormState) => FormState) => void;
+    loading?: string;
+    onStageAnother?: () => Promise<boolean>;
+}) => import("react").JSX.Element;
+export default AddGenomePane;

package/esm/ui/AddGenomePane.js

@@ -0,0 +1,228 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { Alert, Button, Link, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { adapterHasSequence, applyClassifiedFiles, applyPrimaryFile, applyTwoBitFile, classifyLocations, clearSequenceFiles, formHasSequence, getMissingSidecars, isBlank, isFormReady, isSequenceRole, partitionExtraLocations, urlTextToLocations, } from '../util/assemblyConfigUtils.js';
+import { getFileName } from '../util/getFileName.js';
+import { fileToLocation } from '../util/index.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import AdvancedOptions from './AdvancedOptions.js';
+import FileDropZone from './FileDropZone.js';
+import FileSelector from './FileSelector/FileSelector.js';
+import { EmptySourceTypeProvider } from './FileSelector/emptySourceType.js';
+import SequenceAdapterInputs from './SequenceAdapterInputs.js';
+const shortAdapterLabels = {
+    IndexedFastaAdapter: 'Indexed FASTA',
+    BgzipFastaAdapter: 'Compressed FASTA',
+    FastaAdapter: 'FASTA',
+    TwoBitAdapter: '2bit',
+    ChromSizesAdapter: 'chrom.sizes, no sequence',
+};
+const useStyles = makeStyles()(theme => ({
+    intro: {
+        marginBottom: theme.spacing(1),
+    },
+    links: {
+        marginTop: theme.spacing(1),
+        display: 'flex',
+        gap: theme.spacing(2),
+    },
+    recognized: {
+        marginTop: theme.spacing(2),
+    },
+    recognizedRow: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(1),
+    },
+    check: {
+        color: theme.palette.success.main,
+    },
+    filename: {
+        flexGrow: 1,
+    },
+    muted: {
+        color: theme.palette.text.secondary,
+    },
+    name: {
+        marginTop: theme.spacing(2),
+    },
+    advanced: {
+        marginTop: theme.spacing(1),
+    },
+    extras: {
+        marginTop: theme.spacing(1),
+        color: theme.palette.text.secondary,
+    },
+}));
+// The "More options" expander revealing AdvancedOptions (display name, refName
+// aliases, cytobands). Shared by the recognition card and the manual form so the
+// optional extras always hide behind the same affordance.
+const MoreOptions = observer(function MoreOptions({ form, setForm, showMore, setShowMore, }) {
+    const { classes } = useStyles();
+    return (_jsxs("div", { className: classes.advanced, children: [_jsx(Button, { variant: "text", size: "small", startIcon: showMore ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: () => {
+                    setShowMore(!showMore);
+                }, children: showMore ? 'Fewer options' : 'More options' }), showMore ? _jsx(AdvancedOptions, { form: form, setForm: setForm }) : null] }));
+});
+// A required index for the chosen adapter that the drop didn't include, so we
+// give the user a place to point at it inline. Plain-FASTA auto-indexing has no
+// required input, so it's surfaced as a caption by the caller instead.
+const RequiredIndexInputs = observer(function RequiredIndexInputs({ form, setForm, onEdit, }) {
+    const { classes } = useStyles();
+    const missing = getMissingSidecars(form);
+    return missing.length ? (_jsxs("div", { className: classes.advanced, children: [_jsx(Alert, { severity: "warning", children: "This format needs its index file(s). Add them below." }), missing.map(({ field, label }) => (_jsx(FileSelector, { inline: true, name: label, location: form[field], setLocation: (loc) => {
+                    onEdit(field);
+                    setForm(f => ({ ...f, [field]: loc }));
+                } }, field)))] })) : null;
+});
+// The compact confirmation shown once a sequence is recognized: name (editable),
+// a one-line summary of what was detected, and required index inputs. Everything
+// else lives behind "More options".
+const RecognitionCard = observer(function RecognitionCard({ form, setForm, onEdit, onChangeFile, showMore, setShowMore, }) {
+    const { classes } = useStyles();
+    const primaryLoc = isBlank(form.twoBitLocation)
+        ? form.fastaLocation
+        : form.twoBitLocation;
+    const { used, unused } = partitionExtraLocations(form);
+    const autoIndex = form.adapterSelection === 'FastaAdapter';
+    return (_jsxs("div", { className: classes.recognized, children: [_jsxs("div", { className: classes.recognizedRow, children: [_jsx(CheckCircleIcon, { fontSize: "small", className: classes.check }), _jsxs(Typography, { variant: "body2", className: classes.filename, children: [_jsx("b", { children: getFileName(primaryLoc) }), _jsxs("span", { className: classes.muted, children: [' · ', shortAdapterLabels[form.adapterSelection]] })] }), _jsx(Link, { component: "button", type: "button", variant: "body2", onClick: () => {
+                            onChangeFile();
+                        }, children: "change" })] }), _jsx(TextField, { className: classes.name, label: "Genome name", variant: "outlined", size: "small", fullWidth: true, value: form.assemblyName, onChange: event => {
+                    onEdit('assemblyName');
+                    const { value } = event.target;
+                    setForm(f => ({ ...f, assemblyName: value }));
+                }, slotProps: { htmlInput: { 'data-testid': 'assembly-name' } } }), used.length ? (_jsxs(Typography, { variant: "caption", component: "div", className: classes.extras, children: ["Also loading: ", used.map(loc => getFileName(loc)).join(', ')] })) : null, unused.length ? (_jsxs(Typography, { variant: "caption", component: "div", className: classes.extras, children: [shortAdapterLabels[form.adapterSelection], " does not use", ' ', unused.map(loc => getFileName(loc)).join(', '), ", so it will be ignored."] })) : null, autoIndex ? (_jsx(Typography, { variant: "caption", component: "div", className: classes.extras, children: "A FASTA index will be built on open (may take a minute for large or remote files)." })) : null, _jsx(RequiredIndexInputs, { form: form, setForm: setForm, onEdit: onEdit }), _jsx(MoreOptions, { form: form, setForm: setForm, showMore: showMore, setShowMore: setShowMore })] }));
+});
+// The escape hatch: pick the format and every file slot by hand, for assemblies
+// whose filenames don't follow the conventions we auto-detect.
+const ManualEntry = observer(function ManualEntry({ form, setForm, showMore, setShowMore, onBack, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { label: "Genome name", helperText: "The genome name e.g. hg38", variant: "outlined", fullWidth: true, value: form.assemblyName, onChange: event => {
+                    const { value } = event.target;
+                    setForm(f => ({ ...f, assemblyName: value }));
+                }, slotProps: { htmlInput: { 'data-testid': 'assembly-name' } } }), _jsx(SequenceAdapterInputs, { form: form, setForm: setForm, setPrimaryFile: (loc) => {
+                    setForm(f => applyPrimaryFile(f, loc));
+                }, setTwoBitFile: (loc) => {
+                    setForm(f => applyTwoBitFile(f, loc));
+                } }), _jsx(MoreOptions, { form: form, setForm: setForm, showMore: showMore, setShowMore: setShowMore }), _jsx("div", { className: classes.links, children: _jsx(Link, { component: "button", type: "button", variant: "body2", onClick: () => {
+                        onBack();
+                    }, children: "\u2190 Use automatic file detection" }) })] }));
+});
+// Where the files come from: a drop zone or a box of URLs, with a link to swap
+// between them. It stays mounted for the whole flow, including after a sequence
+// is recognized, so that more files can be added to the same genome — and so
+// that the box someone is typing a URL into cannot be unmounted out from under
+// them the moment a prefix of that URL looks like a FASTA.
+const SourceInput = observer(function SourceInput({ source, setSource, urls, setUrls, hasSequence, onDropFiles, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [source === 'files' ? (_jsx(FileDropZone, { message: hasSequence
+                    ? 'Drop any other files for this genome here — index, refName aliases, cytobands'
+                    : 'Drop your genome files here — FASTA, .fa.gz, or .2bit, plus any .fai/.gzi index — or click to browse', onDrop: onDropFiles })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body2", className: classes.intro, children: "Paste a URL to a sequence file (FASTA, .fa.gz, or .2bit) or a .chrom.sizes, plus any index files, one per line. We fill in the rest." }), _jsx(TextField, { variant: "outlined", placeholder: [
+                            'https://example.com/hg38.fa.gz',
+                            'https://example.com/hg38.fa.gz.fai',
+                            'https://example.com/hg38.fa.gz.gzi',
+                        ].join('\n'), multiline: true, rows: 5, fullWidth: true, value: urls, onChange: event => {
+                            setUrls(event.target.value);
+                        }, slotProps: { htmlInput: { 'data-testid': 'genome-urls' } } })] })), _jsx("div", { className: classes.links, children: _jsx(Link, { component: "button", type: "button", variant: "body2", onClick: () => {
+                        setSource(source === 'files' ? 'urls' : 'files');
+                    }, children: source === 'files' ? 'Open from a URL' : 'Use local files' }) })] }));
+});
+// What the current file set says about itself: what couldn't be placed, whether
+// it holds more than one genome, and what is still missing. Every file that
+// arrives is accounted for in one of these — a set that silently produces no
+// notice and no recognition card reads as a dead drop zone.
+const FileNotices = observer(function FileNotices({ locations, hasSequence, canStageAnother, onEnterManually, }) {
+    const { classes } = useStyles();
+    const classified = classifyLocations(locations);
+    const placed = classified.filter(f => f.role).map(f => f.location);
+    const unrecognized = classified.filter(f => !f.role).map(f => f.location);
+    const sequences = classified.filter(f => isSequenceRole(f.role));
+    const primary = sequences.at(-1)?.location;
+    return (_jsxs(_Fragment, { children: [unrecognized.length ? (_jsxs(Alert, { severity: "warning", className: classes.intro, action: _jsx(Button, { color: "inherit", size: "small", onClick: onEnterManually, children: "Enter details manually" }), children: ["Couldn't place: ", unrecognized.map(loc => getFileName(loc)).join(', ')] })) : null, sequences.length > 1 && primary ? (_jsxs(Alert, { severity: "warning", className: classes.intro, children: ["This is more than one genome. The form holds one at a time, so only", ' ', getFileName(primary), " is being read", canStageAnother
+                        ? ' — open the rest one at a time with "Add another genome".'
+                        : '.'] })) : null, !hasSequence && placed.length ? (_jsxs(Alert, { severity: "info", className: classes.intro, children: ["Got ", placed.map(loc => getFileName(loc)).join(', '), ". Add the sequence itself \u2014 a FASTA, .fa.gz, or .2bit \u2014 to go with it."] })) : null] }));
+});
+// What a sequence-free assembly costs, said where the choice is made rather
+// than left for the empty track to imply. A .chrom.sizes is the right input for
+// a whole-genome or synteny view and the wrong one for everything that reads a
+// base, and the two are not obvious from the file itself.
+const NoSequenceWarning = observer(function NoSequenceWarning() {
+    const { classes } = useStyles();
+    return (_jsxs(Alert, { severity: "warning", className: classes.intro, children: ["This genome will have no sequence \u2014 a ", _jsx("code", { children: ".chrom.sizes" }), " carries reference names and lengths and nothing else. The sequence track and GC content draw nothing, CRAM tracks cannot decode without the reference, and a feature's DNA or protein sequence is unavailable. Whole-genome and synteny views read no bases, which is what the format is for; open a FASTA or 2bit instead if you need any of the above."] }));
+});
+// Drop/paste a genome's files, auto-detect the format, and confirm. Falls back
+// to a manual format picker when filenames don't match our conventions. Produces
+// a FormState the caller turns into an assembly config (desktop indexes plain
+// FASTA via faidx; web keeps it unindexed). Pass onStageAnother to allow queuing
+// several genomes before submitting (desktop multi-assembly open).
+const AddGenomePane = observer(function AddGenomePane({ form, setForm, loading = '', onStageAnother, }) {
+    const { classes } = useStyles();
+    const [source, setSource] = useState('files');
+    const [manual, setManual] = useState(false);
+    const [dropped, setDropped] = useState([]);
+    const [urls, setUrls] = useState('');
+    const [showMore, setShowMore] = useState(false);
+    // fields the user filled in themselves, which the file set does not overwrite
+    const [edited, setEdited] = useState(() => new Set());
+    const markEdited = (field) => {
+        setEdited(prev => new Set(prev).add(field));
+    };
+    const reclassify = (next, nextUrls) => {
+        setForm(f => applyClassifiedFiles(f, [...next, ...urlTextToLocations(nextUrls)], edited));
+    };
+    const all = [...dropped, ...urlTextToLocations(urls)];
+    const hasSequence = formHasSequence(form);
+    const resetInputs = () => {
+        setDropped([]);
+        setUrls('');
+        setEdited(new Set());
+        setShowMore(false);
+    };
+    // Swap the sequence file but keep the name/advanced fields the user entered.
+    // A hand-edited name stays marked so it survives the next drop; the sidecars
+    // do not, because clearSequenceFiles just blanked them and a mark would stop
+    // the replacement file set from filling them back in.
+    const changeFile = () => {
+        setForm(clearSequenceFiles);
+        setDropped([]);
+        setUrls('');
+        setShowMore(false);
+        setEdited(prev => new Set([...prev].filter(f => f === 'assemblyName')));
+    };
+    // The pane's inputs are cleared by the staging actually landing, not by the
+    // click: on desktop a plain FASTA is indexed first, which takes as long as it
+    // takes and can still fail on a name already in use. Clearing up front left
+    // the recognition card describing a genome whose files had vanished from the
+    // box, and erased anything typed while the index ran.
+    const stageAnother = async () => {
+        if (await onStageAnother?.()) {
+            resetInputs();
+        }
+    };
+    return (_jsxs(EmptySourceTypeProvider, { value: source === 'urls' ? 'url' : 'file', children: [adapterHasSequence(form.adapterSelection) ? null : _jsx(NoSequenceWarning, {}), manual ? (_jsx(ManualEntry, { form: form, setForm: setForm, showMore: showMore, setShowMore: setShowMore, onBack: () => {
+                    setManual(false);
+                    setShowMore(false);
+                } })) : (_jsxs(_Fragment, { children: [_jsx(SourceInput, { source: source, setSource: setSource, urls: urls, hasSequence: hasSequence, setUrls: value => {
+                            setUrls(value);
+                            reclassify(dropped, value);
+                        }, onDropFiles: files => {
+                            const next = [...dropped, ...files.map(f => fileToLocation(f))];
+                            setDropped(next);
+                            reclassify(next, urls);
+                        } }), _jsx(FileNotices, { locations: all, hasSequence: hasSequence, canStageAnother: !!onStageAnother, onEnterManually: () => {
+                            setManual(true);
+                            setShowMore(false);
+                        } }), hasSequence ? (_jsxs(_Fragment, { children: [_jsx(RecognitionCard, { form: form, setForm: setForm, onEdit: markEdited, onChangeFile: () => {
+                                    changeFile();
+                                }, showMore: showMore, setShowMore: setShowMore }), onStageAnother ? (_jsx("div", { className: classes.links, children: _jsx(Button, { variant: "text", size: "small", 
+                                    // the same gate the caller's submit button uses: staging a
+                                    // form the config builder will refuse only reports its
+                                    // internal "FASTA, FAI, and GZI locations are all required"
+                                    disabled: !!loading || !isFormReady(form), onClick: () => {
+                                        void stageAnother();
+                                    }, children: "Add another genome" }) })) : null] })) : null] }))] }));
+});
+export default AddGenomePane;

package/esm/ui/AdvancedOptions.d.ts

@@ -0,0 +1,6 @@
+import type { FormState } from '../util/assemblyConfigUtils.ts';
+declare const AdvancedOptions: ({ form, setForm, }: {
+    form: FormState;
+    setForm: (update: (prev: FormState) => FormState) => void;
+}) => import("react").JSX.Element;
+export default AdvancedOptions;

package/esm/ui/AdvancedOptions.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeSetField } from '../util/assemblyConfigUtils.js';
+import FileSelector from './FileSelector/FileSelector.js';
+// Display name plus the optional refName-aliases and cytobands files. Shared by
+// every add-assembly surface (desktop Open genome dialog, in-app Assembly
+// manager) behind a "More options" expander so it never adds to the up-front
+// load.
+const AdvancedOptions = observer(function AdvancedOptions({ form, setForm, }) {
+    const setField = makeSetField(setForm);
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { label: "Assembly display name", helperText: '(optional) A human readable display name e.g. "Homo sapiens (hg38)"', variant: "outlined", fullWidth: true, value: form.assemblyDisplayName, onChange: event => {
+                    const { value } = event.target;
+                    setForm(f => ({ ...f, assemblyDisplayName: value }));
+                } }), _jsx(FileSelector, { inline: true, name: "refName aliases", description: "Remap equivalent refNames (e.g. chr1 and 1). Tab-separated file such as a UCSC .chromAliases file.", location: form.refNameAliasesLocation, setLocation: setField('refNameAliasesLocation') }), _jsx(FileSelector, { inline: true, name: "Cytobands", description: "UCSC cytoBand.txt / cytoBandIdeo.txt format (.gz allowed).", location: form.cytobandsLocation, setLocation: setField('cytobandsLocation') })] }));
+});
+export default AdvancedOptions;

package/esm/ui/AppLogo.d.ts

@@ -3,5 +3,5 @@ declare const Logo: ({ session, }: {
     session: {
         configuration: AnyConfigurationModel;
     };
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Logo;

package/esm/ui/AppLogo.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-import { LogoFull } from "./Logo.js";
-import { readConfObject } from "../configuration/index.js";
+import { readConfObject } from '../configuration/index.js';
+import { LogoFull } from './Logo.js';
 const Logo = observer(function Logo({ session, }) {
     const { configuration } = session;
     const logoPath = readConfObject(configuration, 'logoPath');