react-cheminfo 0.33.0 → 0.35.0

package/src/download/ui/useFigureActions.ts

@@ -0,0 +1,113 @@
+import { useCallback, useState } from 'react';
+
+import { writeImageToClipboard } from '../../clipboard/core/copyPng.ts';
+import type { FigureFormat } from '../core/downloadFigure.ts';
+import { downloadFigure } from '../core/downloadFigure.ts';
+import { figurePng } from '../core/figurePng.ts';
+import type { FigurePixels } from '../core/figureScale.ts';
+import { figureSvg } from '../core/figureSvg.ts';
+
+import type { FigureRedraw } from './useFigureRedraw.tsx';
+
+/** What the last copy came to, when it is worth a line of its own. */
+export type FigureNotice = 'copied' | 'copyUnsupported';
+
+/** What {@link useFigureActions} works from. */
+export interface FigureActionsOptions {
+  /** The `id` of the box the figure is mounted in. */
+  targetId: string;
+  /** Which file save writes. */
+  format: FigureFormat;
+  /** The multiple of the figure on screen it is painted at. */
+  scale: number;
+  /** What the saved file is called, without its extension. */
+  fileName?: string;
+  /** What is painted under the figure. */
+  background?: string;
+  /**
+   * The size the figure is drawn again at, off the page, or `null` to take
+   * the figure as it is on screen.
+   */
+  redrawAt: FigurePixels | null;
+  /** Draws the figure again, from {@link FigureRedraw}. */
+  redraw: FigureRedraw['redraw'];
+}
+
+/** What {@link useFigureActions} hands back. */
+export interface FigureActions {
+  /** Write the figure to a file, in the format picked. */
+  save: () => void;
+  /** Put the figure on the clipboard, as a PNG at the resolution picked. */
+  copy: () => void;
+  /** Whether a file or a copy is being written right now. */
+  busy: boolean;
+  /** What went wrong the last time, if anything. */
+  failure: string | null;
+  /** What the last copy came to, if it is still what the panel describes. */
+  notice: FigureNotice | null;
+  /** Forget the last outcome, once the choices it answered have changed. */
+  clear: () => void;
+}
+
+/**
+ * The two things the figure panel does: save the figure, and copy it.
+ *
+ * A copy is always a PNG, whatever format save is set to: a clipboard carries
+ * a picture, and the one every slide, chat window and issue accepts is a PNG.
+ * @param options - See {@link FigureActionsOptions}.
+ * @returns See {@link FigureActions}.
+ */
+export function useFigureActions(options: FigureActionsOptions): FigureActions {
+  const { targetId, format, scale, fileName, background } = options;
+  const { redrawAt, redraw } = options;
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<string | null>(null);
+  const [notice, setNotice] = useState<FigureNotice | null>(null);
+
+  function withFigure(write: (box: string | Element) => Promise<void>) {
+    return redrawAt === null
+      ? write(targetId)
+      : redraw(targetId, redrawAt, write);
+  }
+
+  function run(task: Promise<FigureNotice | null>): void {
+    setBusy(true);
+    setFailure(null);
+    setNotice(null);
+    void task
+      .then(setNotice, (error: unknown) => {
+        setFailure(error instanceof Error ? error.message : String(error));
+      })
+      .finally(() => setBusy(false));
+  }
+
+  function save(): void {
+    const options = { format, scale, fileName, background };
+    run(withFigure((box) => downloadFigure(box, options)).then(() => null));
+  }
+
+  function copy(): void {
+    // The clipboard is written before anything is awaited, with the picture
+    // still being painted: Safari only allows a write the click itself started.
+    const png = new Promise<Blob>((resolve, reject) => {
+      withFigure(async (box) => {
+        resolve(await figurePng(figureSvg(box, { background }), scale));
+      }).catch(reject);
+    });
+    // A browser whose clipboard takes text only never reads the picture, so
+    // its failure would otherwise go unhandled.
+    png.catch(() => undefined);
+    run(
+      writeImageToClipboard(png).then((copied) =>
+        copied ? 'copied' : 'copyUnsupported',
+      ),
+    );
+  }
+
+  const clear = useCallback(() => {
+    setFailure(null);
+    setNotice(null);
+  }, []);
+
+  return { save, copy, busy, failure, notice, clear };
+}

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}