react-cheminfo 0.34.0 → 0.35.0

package/src/download/ui/useFigureDownload.tsx

@@ -0,0 +1,191 @@
+import type { ReactElement, ReactNode } from 'react';
+import { useCallback, useState } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { FigureFormat } from '../core/downloadFigure.ts';
+import type { FigureLayout } from '../core/figureLayout.ts';
+import { figureLayoutRedraws, figureLayoutSize } from '../core/figureLayout.ts';
+import type { FigurePixels } from '../core/figureScale.ts';
+import {
+  DEFAULT_FIGURE_SCALE,
+  FIGURE_SCALES,
+  defaultFigureScale,
+} from '../core/figureScale.ts';
+import { figureSize } from '../core/figureTarget.ts';
+
+import { FigureDownloadPanel } from './FigureDownloadPanel.tsx';
+import { useFigureActions } from './useFigureActions.ts';
+import type { FigureRenderer } from './useFigureRedraw.tsx';
+import { useFigureRedraw } from './useFigureRedraw.tsx';
+
+/** What the "Save figure" panel is set up with. */
+export interface FigureDownloadOptions {
+  /**
+   * The `id` of the box the figure is mounted in. Everything drawn inside it
+   * is saved — sixteen charts of a pair grid as readily as one scatter plot —
+   * and the controls floating over it are left behind.
+   */
+  targetId: string;
+  /**
+   * What the saved file is called, without its extension. Name it after the
+   * data rather than after the tool: a reader with four of these in a
+   * downloads folder cannot tell four `figure.png` apart.
+   * @default 'figure'
+   */
+  fileName?: string;
+  /**
+   * The format it opens on.
+   * @default 'png'
+   */
+  defaultFormat?: FigureFormat;
+  /**
+   * The resolution a PNG opens on, as a multiple of the figure on screen. An
+   * SVG opens at 1×, the size it has on screen, and each format keeps the
+   * multiple the reader last picked for it.
+   * @default 2
+   */
+  defaultScale?: number;
+  /**
+   * The resolutions offered.
+   * @default [1, 2, 3, 4]
+   */
+  scales?: readonly number[];
+  /**
+   * What is painted under the figure. `transparent` leaves it unpainted, for a
+   * figure going onto a coloured slide.
+   * @default the surface the figure is drawn on
+   */
+  background?: string;
+  /**
+   * What the panel is called.
+   * @default the chrome's own line, in the language of the page
+   */
+  title?: string;
+  /**
+   * Draws the figure at a size, for a file. When it is given the panel offers
+   * a size — as shown, 4:3, 16:9, a journal column, or typed — and a figure
+   * saved at a size other than its own is drawn again at that size, off the
+   * page, so its axes and labels are laid out for the new shape rather than
+   * stretched into it. Draw exactly what is on screen, with the same data,
+   * zoom and colours; only the box changes.
+   * @default undefined — the figure is saved at the size it has on screen
+   */
+  renderFigure?: FigureRenderer;
+}
+
+/** What {@link useFigureDownload} hands back. */
+export interface FigureDownloadState {
+  /** Whether the panel is showing. */
+  isOpen: boolean;
+  /**
+   * Show or hide the panel. Showing it measures the figure, so hand this to
+   * the popover's `onInteraction` rather than a setter of your own.
+   */
+  setOpen: (open: boolean) => void;
+  /** The panel, for the popover's `content`. */
+  panel: ReactElement;
+  /** The format picked, for a trigger that shows it. */
+  format: FigureFormat;
+  /**
+   * The copy drawn off the page while a figure is saved at another size, to
+   * be rendered anywhere in the caller's tree.
+   */
+  portal: ReactNode;
+}
+
+/**
+ * The "Save figure" panel — save as PNG or SVG, or copy as PNG — for a caller
+ * that brings its own trigger, such as a button in an editor's toolbar.
+ * `FigureDownload` is the same panel behind the family's own glyph.
+ * @param options - See {@link FigureDownloadOptions}.
+ * @returns See {@link FigureDownloadState}.
+ */
+export function useFigureDownload(
+  options: FigureDownloadOptions,
+): FigureDownloadState {
+  const { targetId, fileName, background, scales = FIGURE_SCALES } = options;
+  const { defaultFormat = 'png', defaultScale = DEFAULT_FIGURE_SCALE } =
+    options;
+  const { title, renderFigure } = options;
+
+  const t = useChromeT();
+  const [isOpen, setIsOpen] = useState(false);
+  const [format, setFormat] = useState<FigureFormat>(defaultFormat);
+  const [picked, setPicked] = useState<Record<FigureFormat, number>>(() => ({
+    png: defaultScale,
+    svg: defaultFigureScale('svg'),
+  }));
+  const scale = picked[format];
+  const [size, setSize] = useState<FigurePixels | null>(null);
+  const [layout, setLayout] = useState<FigureLayout>('screen');
+  const [custom, setCustom] = useState<FigurePixels | null>(null);
+  const { redraw, portal } = useFigureRedraw(renderFigure);
+  const redrawAt =
+    renderFigure !== undefined &&
+    size !== null &&
+    figureLayoutRedraws(layout, size, custom ?? size)
+      ? figureLayoutSize(layout, size, custom ?? size)
+      : null;
+  const { save, copy, busy, failure, notice, clear } = useFigureActions({
+    targetId,
+    format,
+    scale,
+    fileName,
+    background,
+    redrawAt,
+    redraw,
+  });
+
+  // The panel is held open from here rather than left to itself, because the
+  // figure has to be measured at the moment it opens: its size is what the
+  // panel writes out, and reading a bounding box on every render would cost a
+  // layout pass on a bar that is re-rendered on every pointer move.
+  const setOpen = useCallback(
+    (next: boolean) => {
+      setIsOpen(next);
+      if (!next) return;
+      setSize(figureSize(targetId));
+      clear();
+    },
+    [targetId, clear],
+  );
+
+  // What the last copy came to only describes the choices it was made with.
+  function changed<T>(apply: (value: T) => void): (value: T) => void {
+    return (value) => {
+      clear();
+      apply(value);
+    };
+  }
+
+  const panel = (
+    <FigureDownloadPanel
+      title={title ?? t('download.saveFigure')}
+      format={format}
+      scale={scale}
+      scales={scales}
+      size={size}
+      failure={failure}
+      notice={notice}
+      saving={busy}
+      onFormatChange={changed(setFormat)}
+      onScaleChange={changed((next: number) =>
+        setPicked((current) => ({ ...current, [format]: next })),
+      )}
+      onSave={save}
+      onCopy={copy}
+      sizing={
+        renderFigure === undefined
+          ? undefined
+          : {
+              layout,
+              custom,
+              onLayoutChange: changed(setLayout),
+              onCustomChange: changed(setCustom),
+            }
+      }
+    />
+  );
+
+  return { isOpen, setOpen, panel, format, portal };
+}

package/src/ecosystem/core/sites.ts

@@ -20,7 +20,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'learn',
     name: { lead: 'learn', alt: 'cheminfo', dot: true },
     host: 'learn.cheminfo.org',
-    repository: 'https://github.com/cheminfo/learn.cheminfo.org',
     tagline: 'Arrange the tools into a course and hand out its link.',
     group: 'computing',
     brand: '#0d9488',
@@ -31,7 +30,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'inchi',
     name: { lead: 'inchi', alt: 'cheminfo', dot: true },
     host: 'inchi.cheminfo.org',
-    repository: 'https://github.com/cheminfo/inchi.cheminfo.org',
     tagline: 'InChI and InChIKey from a structure, in the browser.',
     group: 'structures',
     brand: '#5b21b6',
@@ -42,7 +40,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'vcl',
     name: { lead: 'vcl', alt: 'cheminfo', dot: true },
     host: 'vcl.cheminfo.org',
-    repository: 'https://github.com/cheminfo/vcl.cheminfo.org',
     tagline: 'Combine a core and fragments into a screened library.',
     group: 'research',
     brand: '#2d72d2',
@@ -53,7 +50,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'smiles',
     name: { lead: 'smiles', alt: 'cheminfo', dot: true },
     host: 'smiles.cheminfo.org',
-    repository: 'https://github.com/cheminfo/smiles.cheminfo.org',
     tagline: 'Draw a structure, read its SMILES, learn the notation.',
     group: 'structures',
     brand: '#1c6e42',
@@ -64,8 +60,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'openbabel',
     name: { lead: 'openbabel', alt: 'cheminfo', dot: true },
     host: 'openbabel.cheminfo.org',
-    repository: 'https://github.com/cheminfo/openbabel.cheminfo.org',
-    publicRepository: true,
     tagline: 'Convert a structure between any pair of chemical file formats.',
     group: 'structures',
     brand: '#0f766e',
@@ -76,7 +70,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'chemcalc',
     name: { lead: 'Chem', alt: 'Calc' },
     host: 'www.chemcalc.org',
-    repository: 'https://github.com/cheminfo/chemcalc.org',
     tagline: 'Molecular formula, exact mass and isotopic distribution.',
     group: 'basics',
     brand: '#5b52e0',
@@ -87,8 +80,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'dbe',
     name: { lead: 'dbe', alt: 'cheminfo', dot: true },
     host: 'dbe.cheminfo.org',
-    repository: 'https://github.com/cheminfo/dbe.cheminfo.org',
-    publicRepository: true,
     tagline: 'Count rings and double bonds from a formula or a structure.',
     group: 'basics',
     brand: '#63123f',
@@ -101,8 +92,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'nmrium',
     name: { lead: 'NMR', alt: 'ium' },
     host: 'www.nmrium.org',
-    repository: 'https://github.com/cheminfo/nmrium',
-    publicRepository: true,
     tagline: 'Process and assign NMR spectra in the browser.',
     group: 'spectra',
     brand: '#ea580c',
@@ -116,7 +105,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     // of the cheminfo tools.
     name: { lead: 'metabo', alt: 'nmrium', dot: true },
     host: 'metabo.nmrium.com',
-    repository: 'https://github.com/cheminfo/metabo',
     tagline: 'Turn a batch of NMR spectra into a map of your samples.',
     group: 'spectra',
     brand: '#4d7c0f',
@@ -129,7 +117,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'derepflow',
     name: { lead: 'Derep', alt: 'Flow', ink: 'lead' },
     host: 'derepflow.cheminfo.org',
-    repository: 'https://github.com/cheminfo/derepflow',
     tagline: 'Identify the constituents of a mixture from its ¹³C spectrum.',
     group: 'spectra',
     brand: '#127ba3',
@@ -140,8 +127,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'surge',
     name: { lead: 'surge', alt: 'cheminfo', dot: true },
     host: 'surge.cheminfo.org',
-    repository: 'https://github.com/cheminfo/surge.cheminfo.org',
-    publicRepository: true,
     tagline: 'Every constitutional isomer of a molecular formula.',
     group: 'structures',
     brand: '#4338ca',
@@ -152,8 +137,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'tex',
     name: { lead: 'tex', alt: 'cheminfo', dot: true },
     host: 'tex.cheminfo.org',
-    repository: 'https://github.com/cheminfo/tex.cheminfo.org',
-    publicRepository: true,
     tagline: 'LaTeX formulas rendered to SVG or PNG from a URL.',
     group: 'computing',
     brand: '#a21caf',
@@ -164,7 +147,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'lcao',
     name: { lead: 'lcao', alt: 'cheminfo', dot: true },
     host: 'lcao.cheminfo.org',
-    repository: 'https://github.com/cheminfo/lcao.cheminfo.org',
     tagline: 'Combine atomic orbitals into molecular ones.',
     group: 'basics',
     brand: '#1565c0',
@@ -175,8 +157,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'regexp',
     name: { lead: 'regexp', alt: 'cheminfo', dot: true },
     host: 'regexp.cheminfo.org',
-    repository: 'https://github.com/cheminfo/regexp.cheminfo.org',
-    publicRepository: true,
     tagline: 'Learn regular expressions in a live playground.',
     group: 'computing',
     brand: '#1e3a8a',
@@ -187,8 +167,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'pdb',
     name: { lead: 'pdb', alt: 'cheminfo', dot: true },
     host: 'pdb.cheminfo.org',
-    repository: 'https://github.com/cheminfo/pdb.cheminfo.org',
-    publicRepository: true,
     tagline: 'A fast look at any Protein Data Bank entry.',
     group: 'research',
     brand: '#2563eb',
@@ -199,8 +177,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'elucidation',
     name: { lead: 'elucidation', alt: 'cheminfo', dot: true },
     host: 'elucidation.cheminfo.org',
-    repository: 'https://github.com/cheminfo/elucidation.cheminfo.org',
-    publicRepository: true,
     tagline: 'A structure from a 1H NMR spectrum and a formula.',
     group: 'spectra',
     brand: '#7e22ce',
@@ -211,7 +187,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'equilibrium',
     name: { lead: 'Equi', alt: 'Librium' },
     host: 'equilibrium.cheminfo.org',
-    repository: 'https://github.com/cheminfo/equilibrium.cheminfo.org',
     tagline: 'Chemical equilibria: pH, speciation and titration curves.',
     group: 'basics',
     brand: '#0b5754',
@@ -222,8 +197,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'polycarp',
     name: { lead: 'Poly', alt: 'Carp' },
     host: 'polycarp.cheminfo.org',
-    repository: 'https://github.com/cheminfo/polycarp.cheminfo.org',
-    publicRepository: true,
     tagline: 'Predict the microstructure of a radical copolymerisation.',
     group: 'research',
     brand: '#701a75',
@@ -234,7 +207,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: '3d',
     name: { lead: '3d', alt: 'cheminfo', dot: true },
     host: '3d.cheminfo.org',
-    repository: 'https://github.com/cheminfo/3d.cheminfo.org',
     tagline: 'Conformers in 3D from a structure you draw.',
     group: 'structures',
     brand: '#155e75',
@@ -245,7 +217,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'periodic-table',
     name: { lead: 'Periodic', alt: 'Table' },
     host: 'periodic-table.cheminfo.org',
-    repository: 'https://github.com/cheminfo/periodic-table.cheminfo.org',
     tagline: 'The periodic table, coloured, plotted and taken apart.',
     group: 'basics',
     brand: '#15803d',
@@ -256,8 +227,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'database',
     name: { lead: 'database', alt: 'cheminfo', dot: true },
     host: 'database.cheminfo.org',
-    repository: 'https://github.com/cheminfo/database.cheminfo.org',
-    publicRepository: true,
     tagline: 'Query a real chemical dataset in SQL and in Mango.',
     group: 'research',
     brand: '#7c2d12',
@@ -268,8 +237,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'symmetry',
     name: { lead: 'Symme', alt: 'Try' },
     host: 'symmetry.cheminfo.org',
-    repository: 'https://github.com/cheminfo/symmetry.cheminfo.org',
-    publicRepository: true,
     tagline: 'Find the symmetry of a molecule, a crystal or a pattern.',
     group: 'basics',
     brand: '#9f1239',
@@ -282,8 +249,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'osiris',
     name: { lead: 'osiris', alt: 'cheminfo', dot: true },
     host: 'osiris.cheminfo.org',
-    repository: 'https://github.com/cheminfo/osiris.cheminfo.org',
-    publicRepository: true,
     tagline: 'Predicted toxicity risks and properties, one molecule or many.',
     group: 'research',
     brand: '#854d0e',
@@ -297,8 +262,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'atoms',
     name: { lead: 'atoms', alt: 'cheminfo', dot: true },
     host: 'atoms.cheminfo.org',
-    repository: 'https://github.com/cheminfo/atoms.cheminfo.org',
-    publicRepository: true,
     tagline: 'Electrons, neutrons, Lewis structures and oxidation states.',
     group: 'practice',
     brand: '#b91c1c',
@@ -311,8 +274,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'moles',
     name: { lead: 'moles', alt: 'cheminfo', dot: true },
     host: 'moles.cheminfo.org',
-    repository: 'https://github.com/cheminfo/moles.cheminfo.org',
-    publicRepository: true,
     tagline: 'Balance a reaction, and work out its mass composition.',
     group: 'practice',
     brand: '#334155',
@@ -325,7 +286,6 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     id: 'inorganic',
     name: { lead: 'inorganic', alt: 'cheminfo', dot: true },
     host: 'inorganic.cheminfo.org',
-    repository: 'https://github.com/cheminfo/inorganic.cheminfo.org',
     tagline: 'Name an inorganic compound, and write its formula.',
     group: 'practice',
     brand: '#a3620a',

package/src/ecosystem/core/types.ts

@@ -65,16 +65,6 @@ export interface SiteRecord {
   name: SiteName;
   /** Where the site lives, written the way it is typed. */
   host: string;
-  /** Where the sources live, and what a Source link opens. */
-  repository: string;
-  /**
-   * Whether a visitor can open that repository. A private one is named
-   * nowhere: no licence-and-source section, no link from the version, no issue
-   * tracker a reader cannot reach. It is stated rather than assumed, so a site
-   * whose record forgets it advertises nothing rather than a dead link.
-   * @default false
-   */
-  publicRepository?: boolean;
   /** One line on what the site does. */
   tagline: string;
   /**

package/src/ir/core/irCommands.ts

@@ -120,10 +120,10 @@ export const irCommands = {
       'Writes what each labelled band might be under its wavenumber. Worth turning off once the chart is crowded.',
   },
   exportImage: {
-    title: 'Export as an image…',
+    title: 'Save figure…',
     shortcut: { keys: ['x'] },
     description:
-      'The chart as it stands, at a chosen resolution — PNG, or SVG, which is drawn again at whatever size it is printed rather than enlarged.',
+      'The chart as it stands, saved as a PNG or an SVG at a chosen resolution, or copied as a PNG.',
   },
   clear: {
     title: 'Close every spectrum',

package/src/ir/ui/IrAboutDialog.tsx

@@ -82,19 +82,6 @@ export function IrAboutDialog(props: IrAboutDialogProps) {
             reader with a colour vision deficiency.
           </li>
         </ul>
-
-        <h4 style={headingStyle}>Licence</h4>
-        <p style={paragraphStyle}>
-          MIT, in the{' '}
-          <a
-            href="https://github.com/cheminfo/glycans"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            cheminfo/glycans
-          </a>{' '}
-          monorepo.
-        </p>
       </DialogBody>
     </Dialog>
   );

package/src/ir/ui/IrCanvas.tsx

@@ -26,6 +26,12 @@ export interface IrCanvasProps {
    * @default undefined
    */
   attachChart?: (element: HTMLDivElement | null) => void;
+  /**
+   * The `id` put on the box the chart is drawn in, which the "Save figure"
+   * panel is pointed at.
+   * @default undefined
+   */
+  chartId?: string;
 }
 
 /**
@@ -44,7 +50,7 @@ export interface IrCanvasProps {
  * @returns The canvas.
  */
 export function IrCanvas(props: IrCanvasProps) {
-  const { highlight = null, onHighlight, attachChart } = props;
+  const { highlight = null, onHighlight, attachChart, chartId } = props;
   const { state, visibleSpectra, assigned } = useIrEditorState();
   const actions = useIrActions();
   const { domain, tool, selectedId } = state.view;
@@ -59,7 +65,7 @@ export function IrCanvas(props: IrCanvasProps) {
 
   return (
     <div style={rootStyle}>
-      <div ref={attachChart} style={chartStyle}>
+      <div ref={attachChart} id={chartId} style={chartStyle}>
         <IrChart
           spectra={visibleSpectra}
           mode={mode}

package/src/ir/ui/IrShell.tsx

@@ -1,10 +1,15 @@
 import type { Ref } from 'react';
-import { useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  useCallback,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { SplitPane, useFullscreen } from 'react-science/ui';
 
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
-import { ExportImageDialog } from '../../download/ui/ExportImageDialog.tsx';
-import { useDrawingBox } from '../../download/ui/useDrawingBox.ts';
+import { useFigureDownload } from '../../download/ui/useFigureDownload.tsx';
 import { PanelRail } from '../../panel/ui/PanelRail.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrCommandHandlers } from '../core/irCommands.ts';
@@ -58,12 +63,16 @@ export function IrShell(props: IrShellProps) {
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
-  const [isExportImageOpen, setIsExportImageOpen] = useState(false);
 
-  // The chart is the picture, so the box it is drawn in is what the export
-  // dialog is pointed at: the viewer around it is full of SVG — every icon in
-  // every toolbar is one — and the first found there would be a magnifier.
-  const chart = useDrawingBox();
+  // The chart is the picture, so the box it is drawn in is what the figure
+  // panel is pointed at: the viewer around it is full of SVG — every icon in
+  // every toolbar is one.
+  const chartId = useId();
+  const figure = useFigureDownload({
+    targetId: chartId,
+    fileName: pictureName(visibleSpectra, selectedSpectrum),
+  });
+  const { isOpen: isFigureOpen, setOpen: setFigureOpen } = figure;
   // The highlight is held here rather than in the reducer: what the pointer is
   // resting on is not part of the document and changes on every move across the
   // chart, so putting it through the reducer would run every panel's memo sixty
@@ -106,7 +115,7 @@ export function IrShell(props: IrShellProps) {
       togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
       toggleAssignments: () =>
         actions.setSettings({ showAssignments: !showAssignments }),
-      exportImage: () => setIsExportImageOpen(true),
+      exportImage: () => setFigureOpen(!isFigureOpen),
       clear: () => actions.clear(),
     }),
     [
@@ -117,6 +126,8 @@ export function IrShell(props: IrShellProps) {
       showAssignments,
       scaleValueAxis,
       toggleFullScreen,
+      isFigureOpen,
+      setFigureOpen,
     ],
   );
 
@@ -176,7 +187,7 @@ export function IrShell(props: IrShellProps) {
               default: in a narrow viewer the row would take the width it is
               short of out of them, and half an icon is what that looks like. */}
           <div style={railStyle}>
-            <IrToolbar />
+            <IrToolbar figure={figure} />
           </div>
 
           <SplitPane
@@ -189,7 +200,7 @@ export function IrShell(props: IrShellProps) {
             <IrCanvas
               highlight={highlight}
               onHighlight={setHighlight}
-              attachChart={chart.attach}
+              chartId={chartId}
             />
 
             <IrSidePanel highlight={highlight} onHighlight={setHighlight} />
@@ -215,19 +226,6 @@ export function IrShell(props: IrShellProps) {
         isOpen={isDocumentationOpen}
         onClose={() => setIsDocumentationOpen(false)}
       />
-
-      {/* `element`, not `content`: the chart is drawn to the box it was given,
-          so the box is the picture — measuring the marks inside it would crop
-          the frame to wherever the trace happens to reach and leave the axes
-          hanging. */}
-      <ExportImageDialog
-        isOpen={isExportImageOpen}
-        getDrawing={chart.getDrawing}
-        frame="element"
-        filename={pictureName(visibleSpectra, selectedSpectrum)}
-        label="Infrared spectrum"
-        onClose={() => setIsExportImageOpen(false)}
-      />
     </IrCommandProvider>
   );
 }
@@ -245,7 +243,7 @@ const ZOOM_STEP = 1.2;
 const DEFAULT_FRAME_WIDTH = 200;
 
 /**
- * What a picture of the chart is called before anything is typed in the box.
+ * What a picture of the chart is called.
  *
  * The spectrum being looked at, since a figure of the chart is a figure of that
  * spectrum, and a chemist who has one run open should not have to work out

package/src/ir/ui/IrToolbar.tsx

@@ -1,10 +1,20 @@
 import { Toolbar } from 'react-science/ui';
 
+import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
 import { boxZoomOnly } from '../core/irMode.ts';
 
 import { useIrCommandProps } from './irCommandContext.tsx';
 import { useIrEditorState } from './irStateContext.ts';
 
+/** What {@link IrToolbar} needs. */
+export interface IrToolbarProps {
+  /**
+   * The "Save figure" panel the picture button opens.
+   * @default undefined — the button only runs the `exportImage` command
+   */
+  figure?: FigureDownloadState;
+}
+
 /**
  * The tools, down the left of the chart.
  *
@@ -19,9 +29,11 @@ import { useIrEditorState } from './irStateContext.ts';
  * drag on that axis is a rectangle, so both buttons go dead with the square zoom
  * lit. Showing `read` as available there would offer a gesture the chart does not
  * make, and showing it as *active* would name the wrong one.
+ * @param props - Component props.
  * @returns The toolbar.
  */
-export function IrToolbar() {
+export function IrToolbar(props: IrToolbarProps) {
+  const { figure } = props;
   const { state, selectedSpectrum } = useIrEditorState();
   const command = useIrCommandProps();
   const { spectra } = state.data;
@@ -29,6 +41,8 @@ export function IrToolbar() {
   const { mode, pickBands, showAssignments } = state.settings;
 
   const isEmpty = spectra.length === 0;
+  // The popover opens the panel itself, so the command's own click is left out.
+  const exportCommand = command('exportImage');
   const settled = boxZoomOnly(mode);
 
   return (
@@ -92,11 +106,27 @@ export function IrToolbar() {
           window it was dragged to, the way up it is being read, the
           assignments written under the bands — so the picture is taken here
           rather than rebuilt from the spectra in a panel. */}
-      <Toolbar.Item
-        icon="media"
-        {...command('exportImage')}
-        disabled={isEmpty}
-      />
+      {figure === undefined ? (
+        <Toolbar.Item
+          icon="media"
+          {...command('exportImage')}
+          disabled={isEmpty}
+        />
+      ) : (
+        <Toolbar.PopoverItem
+          isOpen={figure.isOpen}
+          onInteraction={figure.setOpen}
+          content={figure.panel}
+          disabled={isEmpty}
+          itemProps={{
+            icon: 'media',
+            tooltip: exportCommand.tooltip,
+            'aria-label': exportCommand['aria-label'],
+            active: figure.isOpen,
+            disabled: isEmpty,
+          }}
+        />
+      )}
     </Toolbar>
   );
 }

package/src/ir/ui/index.ts

@@ -34,6 +34,7 @@ export { IrSidePanel } from './IrSidePanel.tsx';
 export type { IrStateProviderProps } from './IrStateProvider.tsx';
 export { IrStateProvider } from './IrStateProvider.tsx';
 export { IrStatusBar } from './IrStatusBar.tsx';
+export type { IrToolbarProps } from './IrToolbar.tsx';
 export { IrToolbar } from './IrToolbar.tsx';
 export type { IrTracesProps } from './IrTraces.tsx';
 export { IrTraces } from './IrTraces.tsx';