@jbrowse/core 4.3.0 → 5.0.0-beta.1

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');

package/esm/ui/AssemblySelector.d.ts

@@ -1,13 +1,10 @@
-import type { AbstractSessionModel } from '../util/index.ts';
-import type { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
-declare const AssemblySelector: ({ session, onChange, label, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
-    session: AbstractSessionModel;
+import type { AssemblyHost } from '../util/index.ts';
+declare const AssemblySelector: ({ session, onChange, label, selected, fullWidth, helperText, }: {
+    session: AssemblyHost;
     label?: string;
     helperText?: string;
     onChange: (arg: string) => void;
     selected?: string;
-    localStorageKey?: string;
-    InputProps?: IIP;
-    TextFieldProps?: TFP;
-}) => import("react/jsx-runtime").JSX.Element;
+    fullWidth?: boolean;
+}) => import("react").JSX.Element;
 export default AssemblySelector;

package/esm/ui/AssemblySelector.js

@@ -1,39 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { MenuItem, TextField } from '@mui/material';
 import { observer } from 'mobx-react';
-import { useLocalStorage } from "../util/index.js";
-import { makeStyles } from "../util/tss-react/index.js";
+import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()({
     importFormEntry: {
         minWidth: 180,
     },
 });
-const AssemblySelector = observer(function AssemblySelector({ session, onChange, label = 'Assembly', selected, InputProps, TextFieldProps, localStorageKey, helperText = 'Select assembly to view', }) {
+const AssemblySelector = observer(function AssemblySelector({ session, onChange, label = 'Assembly', selected, fullWidth, helperText = 'Select assembly to view', }) {
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
-    const config = new URLSearchParams(window.location.search).get('config');
-    const [lastSelected, setLastSelected] = useLocalStorage(`lastAssembly-${[
-        window.location.host + window.location.pathname,
-        config,
-        localStorageKey,
-    ].join('-')}`, selected, typeof jest === 'undefined' && Boolean(localStorageKey));
-    const selection = assemblyNames.includes(lastSelected || '')
-        ? lastSelected
-        : selected;
-    useEffect(() => {
-        if (selection && selection !== selected) {
-            onChange(selection);
-        }
-    }, [selection, onChange, selected]);
+    // ignore a stale/removed selection so MUI doesn't warn about an out-of-range
+    // select value
+    const value = selected && assemblyNames.includes(selected) ? selected : '';
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (_jsx(TextField, { select: true, "data-testid": "assembly-selector-textfield", label: label, variant: "outlined", helperText: error || helperText, value: selection || '', onChange: event => {
-            setLastSelected(event.target.value);
-        }, error: !!error, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps, slotProps: {
-            input: InputProps,
-            htmlInput: {
-                'data-testid': 'assembly-selector',
-            },
-        }, children: assemblyNames.map(name => (_jsx(MenuItem, { value: name, children: assemblyManager.get(name)?.displayName || name }, name))) }));
+    return (_jsx(TextField, { select: true, label: label, variant: "outlined", helperText: error || helperText, value: value, fullWidth: fullWidth, onChange: event => {
+            onChange(event.target.value);
+        }, error: !!error, disabled: !!error, className: classes.importFormEntry, children: assemblyNames.map(name => (_jsx(MenuItem, { value: name, children: assemblyManager.get(name)?.displayName || name }, name))) }));
 });
 export default AssemblySelector;

package/esm/ui/BaseExportSvgDialog.d.ts

@@ -0,0 +1,16 @@
+import type { IAnyStateTreeNode } from '@jbrowse/mobx-state-tree';
+export interface BaseExportSvgOptions {
+    rasterizeLayers: boolean;
+    format: 'svg' | 'png';
+    filename: string;
+    themeName: string;
+    fontFamily: string;
+}
+declare const _default: ({ model, handleClose, exportSvg, children, checkboxes, }: {
+    model: IAnyStateTreeNode;
+    handleClose: () => void;
+    exportSvg: (opts: BaseExportSvgOptions) => Promise<void>;
+    children?: React.ReactNode;
+    checkboxes?: React.ReactNode;
+}) => import("react").JSX.Element;
+export default _default;

package/esm/ui/BaseExportSvgDialog.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CircularProgress, MenuItem, TextField, ToggleButton, ToggleButtonGroup, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { getSession } from '../util/index.js';
+import ErrorBanner from './ErrorBanner.js';
+import LabeledCheckbox from './LabeledCheckbox.js';
+import SubmitDialog from './SubmitDialog.js';
+import { useExportSvgPreference } from './useExportSvgPreference.js';
+// Generic CSS families only, so exported text resolves in any SVG renderer
+// (browser, Inkscape, Illustrator) without embedding a named font like Roboto.
+// The 'default' sentinel is the selected default; it maps to no font-family so
+// the renderer decides (see the exportSvg call below).
+const DEFAULT_FONT = 'default';
+const fontFamilyOptions = [
+    { value: DEFAULT_FONT, label: 'Default' },
+    { value: 'sans-serif', label: 'Sans-serif' },
+    { value: 'serif', label: 'Serif' },
+    { value: 'monospace', label: 'Monospace' },
+    { value: 'system-ui, sans-serif', label: 'System UI' },
+];
+export default observer(function BaseExportSvgDialog({ model, handleClose, exportSvg, children, checkboxes, }) {
+    const session = getSession(model);
+    const offscreenCanvas = typeof OffscreenCanvas !== 'undefined';
+    // persisted like every other option here, but still gated on the capability:
+    // the checkbox isn't rendered without OffscreenCanvas, so a stored `true` must
+    // not survive into a browser that can't rasterize
+    const [rasterizePreference, setRasterizePreference] = useExportSvgPreference('rasterize', true);
+    const rasterizeLayers = offscreenCanvas && rasterizePreference;
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [format, setFormat] = useExportSvgPreference('format', 'svg');
+    const [filename, setFilename] = useExportSvgPreference('file', 'jbrowse.svg');
+    const [themePreference, setThemeName] = useExportSvgPreference('theme', session.themeName || 'default');
+    // A stored name outlives the theme it names: an admin drops an `extraThemes`
+    // entry, or another JBrowse on this origin writes `svg-theme`, which has no
+    // instance scope. Unguarded it draws a blank Select and makes
+    // `getActiveThemeOptions` answer undefined, so the export comes out stock.
+    // `session.themeName` guards the name it stores the same way.
+    const allThemes = session.allThemes?.();
+    const themeName = allThemes?.[themePreference]
+        ? themePreference
+        : session.themeName || 'default';
+    const [fontFamily, setFontFamily] = useExportSvgPreference('fontfamily', DEFAULT_FONT);
+    return (_jsxs(SubmitDialog, { open: true, title: "Export image", submitDisabled: loading, onCancel: handleClose, onSubmit: async () => {
+            setLoading(true);
+            setError(undefined);
+            try {
+                await exportSvg({
+                    rasterizeLayers,
+                    format,
+                    filename,
+                    themeName,
+                    fontFamily: fontFamily === DEFAULT_FONT ? '' : fontFamily,
+                });
+                handleClose();
+            }
+            catch (e) {
+                console.error(e);
+                setError(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        }, children: [error ? (_jsx(ErrorBanner, { error: error })) : loading ? (_jsxs("div", { children: [_jsx(CircularProgress, { size: 20, style: { marginRight: 20 } }), _jsxs(Typography, { sx: { display: 'inline' }, children: ["Creating ", format.toUpperCase()] })] })) : null, _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8 }, children: [_jsx(TextField, { label: "Filename", value: filename, onChange: event => {
+                                    setFilename(event.target.value);
+                                } }), _jsxs(ToggleButtonGroup, { value: format, exclusive: true, onChange: (_event, value) => {
+                                    if (value) {
+                                        setFormat(value);
+                                        if (filename.endsWith('.svg') && value === 'png') {
+                                            setFilename(filename.replace(/\.svg$/, '.png'));
+                                        }
+                                        else if (filename.endsWith('.png') && value === 'svg') {
+                                            setFilename(filename.replace(/\.png$/, '.svg'));
+                                        }
+                                    }
+                                }, size: "small", children: [_jsx(ToggleButton, { value: "svg", children: "SVG" }), _jsx(ToggleButton, { value: "png", children: "PNG" })] })] }), children, allThemes ? (_jsx(TextField, { select: true, label: "Theme", variant: "outlined", style: { minWidth: 200 }, value: themeName, onChange: event => {
+                            setThemeName(event.target.value);
+                        }, children: Object.entries(allThemes).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) })) : null, _jsx(TextField, { select: true, label: "Font", variant: "outlined", style: { minWidth: 200 }, value: fontFamily, onChange: event => {
+                            setFontFamily(event.target.value);
+                        }, children: fontFamilyOptions.map(({ value, label }) => (_jsx(MenuItem, { value: value, children: label }, value))) }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [checkboxes, offscreenCanvas ? (_jsx(LabeledCheckbox, { checked: rasterizeLayers, onChange: val => {
+                                    setRasterizePreference(val);
+                                }, label: "Rasterize canvas based tracks? File may be much larger if this is turned off" })) : (_jsx(Typography, { children: "Note: rasterizing layers not yet supported in this browser, so SVG size may be large" }))] })] })] }));
+});

package/esm/ui/BaseTooltip.d.ts

@@ -1,8 +1,19 @@
-export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement, }: {
-    placement?: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+export default function BaseTooltip({ clientPoint: clientPointCoords, anchor, id, children, placement, }: {
+    placement?: TooltipPlacement;
+    /** Follow the pointer. The cursor-anchored mode, and the older of the two. */
     clientPoint?: {
         x: number;
         y: number;
     };
+    /**
+     * Hang off an element instead — what a control's hover label wants, where
+     * following the cursor across a button reads as a stray box. Mutually
+     * exclusive with `clientPoint`; `@jbrowse/display-ui`'s `useTooltip` is what
+     * drives this arm.
+     */
+    anchor?: HTMLElement;
+    /** For a trigger pointing at this with `aria-describedby`. */
+    id?: string;
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").ReactPortal | null;