react-cheminfo 0.65.0 → 0.67.0

package/src/molecule3d/core/animatedPng.ts

@@ -0,0 +1,79 @@
+/**
+ * Frames of a scene as one animated PNG, which loops forever.
+ *
+ * An APNG is a PNG whose frames every browser plays, and whose first frame
+ * any program that does not play them still shows. It keeps every colour of a
+ * shaded molecule, which a GIF's 256 cannot.
+ */
+
+import type * as Upng from '@pdf-lib/upng';
+
+/** How many frames a second are played, and saved, when nobody says. */
+export const DEFAULT_FRAMES_PER_SECOND = 25;
+
+/** One frame: its pixels as RGBA bytes, row by row from the top. */
+export interface RgbaFrame {
+  width: number;
+  height: number;
+  data: Uint8ClampedArray | Uint8Array;
+}
+
+/**
+ * Encode frames as one animated PNG, every frame shown for the same time, the
+ * whole looping forever. The encoder is loaded on first use.
+ * @param frames - The frames, in order, all the same size.
+ * @param framesPerSecond - How many are shown per second.
+ * @returns The PNG file.
+ * @throws {Error} When there is no frame, or the frames differ in size.
+ */
+export async function encodeAnimatedPng(
+  frames: readonly RgbaFrame[],
+  framesPerSecond: number,
+): Promise<Uint8Array<ArrayBuffer>> {
+  const first = frames[0];
+  if (first === undefined) throw new Error('There is no frame to encode.');
+  const { width, height } = first;
+  const buffers: ArrayBuffer[] = [];
+  const delays: number[] = [];
+  const delay = Math.max(1, Math.round(1000 / framesPerSecond));
+  for (const frame of frames) {
+    if (frame.width !== width || frame.height !== height) {
+      throw new Error('Every frame of an animated PNG must be the same size.');
+    }
+    buffers.push(rgbaBuffer(frame));
+    delays.push(delay);
+  }
+  const upng = await loadEncoder();
+  // 0 colours: lossless.
+  return new Uint8Array(upng.encode(buffers, width, height, 0, delays));
+}
+
+/**
+ * The bytes of a frame in an ArrayBuffer of their own size, which the encoder
+ * reads whole.
+ * @param frame - The frame.
+ * @returns Its RGBA bytes.
+ */
+function rgbaBuffer(frame: RgbaFrame): ArrayBuffer {
+  const { data } = frame;
+  const { buffer, byteOffset, byteLength } = data;
+  if (
+    buffer instanceof ArrayBuffer &&
+    byteOffset === 0 &&
+    byteLength === buffer.byteLength
+  ) {
+    return buffer;
+  }
+  return new Uint8Array(data).buffer;
+}
+
+type Encoder = Pick<typeof Upng, 'encode'>;
+
+async function loadEncoder(): Promise<Encoder> {
+  const { default: loaded } = (await import('@pdf-lib/upng')) as {
+    default: Encoder | { default: Encoder };
+  };
+  // A bundler hands the ES build's one default object; Node's own import hands
+  // the exports of the CommonJS build, whose default is that object.
+  return 'encode' in loaded ? loaded : loaded.default;
+}

package/src/molecule3d/core/file.ts

@@ -0,0 +1,23 @@
+/**
+ * A molfile for the viewer, with the parser molstar has to read it with.
+ *
+ * A file of several models — an SDF of several records, an XYZ of several
+ * frames — is a series of frames of one molecule, which the viewer can play
+ * and export as an animated PNG.
+ */
+export interface Molecule3DFile {
+  /**
+   * molstar's format id: `mol` reads V2000, `sdf` reads V2000 and V3000, `xyz`
+   * reads bare coordinates and infers the bonds from the distances.
+   */
+  format: 'mol' | 'sdf' | 'xyz';
+  /** The file text. It must carry 3D coordinates. */
+  data: string;
+  /**
+   * Names the molecule the file draws, when several files draw one — one per
+   * normal mode, say. Replacing a file by another of the same name keeps the
+   * camera where the reader left it, instead of framing a new molecule.
+   * @default undefined — every other file is another molecule
+   */
+  moleculeId?: string;
+}

package/src/molecule3d/core/index.ts

@@ -1,3 +1,5 @@
+export type { RgbaFrame } from './animatedPng.ts';
+export { DEFAULT_FRAMES_PER_SECOND, encodeAnimatedPng } from './animatedPng.ts';
 export type {
   Molecule3DCamera,
   Molecule3DRotation,
@@ -33,8 +35,8 @@ export {
   MEASUREMENT_LABELS,
   sameMeasurements,
 } from './measurement.ts';
+export type { Molecule3DFile } from './file.ts';
 export type {
-  Molecule3DFile,
   Molecule3DSettings,
   Molecule3DTools,
   RepresentationId,

package/src/molecule3d/core/settings.ts

@@ -3,14 +3,6 @@
  * free of React and molstar so a site can persist and validate them.
  */
 
-/** A molfile for the viewer, with the parser molstar has to read it with. */
-export interface Molecule3DFile {
-  /** molstar's format id: `mol` reads V2000, `sdf` reads V2000 and V3000. */
-  format: 'mol' | 'sdf';
-  /** The molfile text. It must carry 3D coordinates. */
-  data: string;
-}
-
 /** Ways the model can be drawn, in the order the picker offers them. */
 export const REPRESENTATIONS = [
   'ball-and-stick',

package/src/molecule3d/ui/Molecule3DExport.tsx

@@ -16,15 +16,28 @@ import {
 import { FigureDownloadPanel } from '../../download/ui/FigureDownloadPanel.tsx';
 import { useFigureTask } from '../../download/ui/useFigureTask.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
 
 /** Props of {@link Molecule3DExport}. */
 export interface Molecule3DExportProps {
   /** Reads the size of the canvas on screen, when the popover opens. */
   getSize: () => FigurePixels | null;
-  /** Writes the file. */
-  onExport: (format: FigureFormat, scale: number) => Promise<void>;
+  /**
+   * Writes the file: every frame, as an animated PNG, when `animated` is set.
+   */
+  onExport: (
+    format: FigureFormat,
+    scale: number,
+    animated: boolean,
+  ) => Promise<void>;
   /** Puts a PNG at that scale on the clipboard, and says what came of it. */
   onCopy: (scale: number) => Promise<FigureNotice>;
+  /**
+   * How many frames the scene holds. Above one, a PNG may hold them all, as an
+   * animation.
+   * @default 1
+   */
+  frameCount?: number;
 }
 
 /**
@@ -33,11 +46,14 @@ export interface Molecule3DExportProps {
  * @returns The panel.
  */
 export function Molecule3DExport(props: Molecule3DExportProps): ReactElement {
-  const { getSize, onExport, onCopy } = props;
+  const { getSize, onExport, onCopy, frameCount = 1 } = props;
   const t = useChromeT();
   const [size] = useState(getSize);
   const [format, setFormat] = useState<FigureFormat>('png');
   const [scale, setScale] = useState(DEFAULT_FIGURE_SCALE);
+  const [frames, setFrames] = useState<FrameChoice>('all');
+  const offerFrames = frameCount > 1 && format === 'png';
+  const animated = offerFrames && frames === 'all';
   const { run, busy, failure, notice, clear } = useFigureTask();
 
   // What the last copy came to only describes the choices it was made with.
@@ -61,8 +77,30 @@ export function Molecule3DExport(props: Molecule3DExportProps): ReactElement {
       rasterSvg
       onFormatChange={changed(setFormat)}
       onScaleChange={changed(setScale)}
-      onSave={() => run(onExport(format, scale).then(() => null))}
+      onSave={() => run(onExport(format, scale, animated).then(() => null))}
       onCopy={() => run(onCopy(scale))}
-    />
+    >
+      {offerFrames && (
+        <OverlaySegmented<FrameChoice>
+          label={t('molecule3d.frames')}
+          help={{
+            title: t('molecule3d.frames'),
+            body: t('molecule3d.framesHelp'),
+          }}
+          value={frames}
+          options={[
+            { value: 'one', label: t('molecule3d.frames.one') },
+            {
+              value: 'all',
+              label: t('molecule3d.frames.all', { count: frameCount }),
+            },
+          ]}
+          onChange={changed(setFrames)}
+        />
+      )}
+    </FigureDownloadPanel>
   );
 }
+
+/** The frame on screen, or every frame as an animated PNG. */
+type FrameChoice = 'one' | 'all';

package/src/molecule3d/ui/Molecule3DToolbar.tsx

@@ -225,11 +225,18 @@ export function Molecule3DToolbar(props: Molecule3DToolbarProps): ReactElement {
 
 const TOOLTIP_PROPS = { placement: 'right' } as const;
 
+// A canvas too short for both cards puts the second one beside the first,
+// rather than cutting it off; the column itself lets clicks through to the
+// canvas between and below the cards.
 const COLUMN_STYLE: CSSProperties = {
   display: 'flex',
   flexDirection: 'column',
+  flexWrap: 'wrap',
+  alignContent: 'flex-start',
+  alignItems: 'flex-start',
   gap: 6,
-  pointerEvents: 'auto',
+  height: '100%',
+  pointerEvents: 'none',
 };
 
-const CARD_STYLE: CSSProperties = { padding: 0 };
+const CARD_STYLE: CSSProperties = { padding: 0, pointerEvents: 'auto' };

package/src/molecule3d/ui/MoleculeCanvas3D.tsx

@@ -10,6 +10,7 @@ import type { CSSProperties, ReactElement } from 'react';
 import { useEffect, useRef, useState } from 'react';
 
 import { DEFAULT_SPIN_SPEED } from '../../molstar/core/index.ts';
+import { DEFAULT_FRAMES_PER_SECOND } from '../core/animatedPng.ts';
 import type { Molecule3DHighlight } from '../core/highlight.ts';
 import type { Measurement, MeasurementKind } from '../core/measurement.ts';
 import {
@@ -21,14 +22,13 @@ import { Molecule3DExport } from './Molecule3DExport.tsx';
 import { Molecule3DOptions } from './Molecule3DOptions.tsx';
 import { Molecule3DStage } from './Molecule3DStage.tsx';
 import { Molecule3DToolbar } from './Molecule3DToolbar.tsx';
-import { createMolecule3DViewer } from './createViewer.ts';
 import { highlightColorOf } from './highlightColor.ts';
 import type { MoleculeViewer3DProps } from './moleculeViewer3DProps.ts';
 import { useControlledState } from './useControlledState.ts';
 import { useImageExport } from './useImageExport.ts';
 import { useMoleculeScene } from './useMoleculeScene.ts';
+import { useMoleculeViewer } from './useMoleculeViewer.ts';
 import { usePolarSurfaceArea } from './usePolarSurfaceArea.ts';
-import type { Molecule3DViewer } from './viewer.ts';
 
 /** Props of {@link MoleculeCanvas3D}. */
 export interface MoleculeCanvas3DProps extends Omit<
@@ -56,6 +56,8 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
     defaultSpinning = false,
     onSpinningChange,
     spinSpeed = DEFAULT_SPIN_SPEED,
+    playing = false,
+    framesPerSecond = DEFAULT_FRAMES_PER_SECOND,
     measurements: measurementsProp,
     onMeasurementsChange,
     highlights = NO_HIGHLIGHTS,
@@ -82,6 +84,7 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
     readonly Measurement[]
   >(measurementsProp, NO_MEASUREMENTS, onMeasurementsChange);
   const [measureKind, setMeasureKind] = useState<MeasurementKind | null>(null);
+  const [frameCount, setFrameCount] = useState(0);
   const polarSurfaceArea = usePolarSurfaceArea(
     molfile,
     settings.surfaceColoring === 'polarity',
@@ -90,51 +93,31 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
   // A callback ref: the element arriving is what creates the viewer, and every
   // effect keyed on it runs again, in order, after the viewer exists.
   const [container, setContainer] = useState<HTMLDivElement | null>(null);
-  const viewerRef = useRef<Molecule3DViewer | null>(null);
   // The viewer is created once, so what its callbacks read is kept fresh here.
-  const latest = useRef({
-    measurements,
-    setMeasurements,
-    onFailureChange,
-    background,
-  });
+  const latest = useRef({ measurements, setMeasurements });
   useEffect(() => {
-    latest.current = {
-      measurements,
-      setMeasurements,
-      onFailureChange,
-      background,
-    };
+    latest.current = { measurements, setMeasurements };
+  });
+  const viewerRef = useMoleculeViewer(container, {
+    background,
+    onMeasure: (measurement) => {
+      const current = latest.current;
+      current.setMeasurements([...current.measurements, measurement]);
+    },
+    onFrameCountChange: setFrameCount,
   });
 
   useEffect(() => {
-    if (container === null) return;
-    const viewer = createMolecule3DViewer(container, {
-      background: latest.current.background,
-      onMeasure: (measurement) => {
-        const current = latest.current;
-        current.setMeasurements([...current.measurements, measurement]);
-      },
-    });
-    viewerRef.current = viewer;
-    const observer = new ResizeObserver(() => {
-      viewer.handleResize();
-    });
-    observer.observe(container);
-    return () => {
-      observer.disconnect();
-      viewerRef.current = null;
-      viewer.dispose();
-    };
-  }, [container]);
+    void viewerRef.current?.setSpin(spinning, spinSpeed);
+  }, [container, viewerRef, spinning, spinSpeed]);
 
   useEffect(() => {
-    void viewerRef.current?.setSpin(spinning, spinSpeed);
-  }, [container, spinning, spinSpeed]);
+    void viewerRef.current?.frames.play(playing, framesPerSecond);
+  }, [container, viewerRef, playing, framesPerSecond]);
 
   useEffect(() => {
     void viewerRef.current?.setMeasureKind(measureKind);
-  }, [container, measureKind]);
+  }, [container, viewerRef, measureKind]);
 
   // Kept out of the scene: a new highlight repaints the model, never redraws it.
   useEffect(() => {
@@ -142,7 +125,7 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
       highlights,
       highlightColorOf(container),
     );
-  }, [container, highlights]);
+  }, [container, viewerRef, highlights]);
 
   const { resetView } = useMoleculeScene({
     container,
@@ -160,6 +143,7 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
     container,
     viewerRef,
     fileName,
+    framesPerSecond,
   );
 
   return (
@@ -202,6 +186,7 @@ export function MoleculeCanvas3D(props: MoleculeCanvas3DProps): ReactElement {
                     getSize={canvasSize}
                     onExport={exportImage}
                     onCopy={copyImage}
+                    frameCount={frameCount}
                   />
                 }
               />
@@ -231,6 +216,7 @@ const CANVAS_STYLE: CSSProperties = { position: 'absolute', inset: 0 };
 const OVERLAY_STYLE: CSSProperties = {
   position: 'absolute',
   top: 8,
+  bottom: 8,
   left: 8,
   zIndex: 2,
   display: 'flex',

package/src/molecule3d/ui/drawScene.ts

@@ -1,5 +1,6 @@
+import type { Molecule3DFile } from '../core/file.ts';
 import type { Measurement } from '../core/measurement.ts';
-import type { Molecule3DFile, Molecule3DSettings } from '../core/settings.ts';
+import type { Molecule3DSettings } from '../core/settings.ts';
 import { normalizeMolecule3DSettings } from '../core/settings.ts';
 
 import type { Molecule3DViewer } from './viewer.ts';

package/src/molecule3d/ui/exportMoleculeImage.ts

@@ -4,13 +4,22 @@ import { FIGURE_PNG_TYPE } from '../../download/core/figurePng.ts';
 import { figurePixels } from '../../download/core/figureScale.ts';
 import { FIGURE_SVG_TYPE } from '../../download/core/figureSvg.ts';
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
+import { encodeAnimatedPng } from '../core/animatedPng.ts';
 import type { ImageSize } from '../core/exportImage.ts';
 import { dataUriBytes, rasterSvgMarkup } from '../core/exportImage.ts';
 
-/** The one thing an export asks of a viewer: a picture of its scene. */
+/** What an export asks of a viewer: a picture of its scene. */
 export interface SceneCapture {
   /** Render the scene at that pixel size, as a `data:` URI. */
   captureImage: (size: ImageSize) => Promise<string | undefined>;
+  /**
+   * The frames of the scene, each rendered at that pixel size, for an animated
+   * PNG.
+   * @default undefined — the viewer has a single frame to give
+   */
+  frames?: {
+    capture: (size: ImageSize) => Promise<ImageData[] | undefined>;
+  };
 }
 
 /** What {@link exportMoleculeImage} writes. */
@@ -22,6 +31,12 @@ export interface MoleculeImageRequest {
   size: ImageSize;
   /** File name without its extension. */
   fileName: string;
+  /**
+   * Every frame of the scene as one animated PNG, played at this many frames a
+   * second, rather than the frame on screen. Ignored for an SVG.
+   * @default undefined — the frame on screen
+   */
+  framesPerSecond?: number;
 }
 
 /**
@@ -54,11 +69,21 @@ export async function exportMoleculeImage(
   viewer: SceneCapture,
   request: MoleculeImageRequest,
 ): Promise<void> {
-  const { format, scale, size, fileName } = request;
+  const { format, scale, size, fileName, framesPerSecond } = request;
   const pixels = figurePixels(size, scale);
+  const base = sanitizeFileName(fileName, 'molecule');
+  if (format === 'png' && framesPerSecond !== undefined) {
+    if (viewer.frames === undefined) {
+      throw new Error('This viewer has no frames to animate.');
+    }
+    const frames = await viewer.frames.capture(pixels);
+    if (frames === undefined) return;
+    const bytes = await encodeAnimatedPng(frames, framesPerSecond);
+    downloadBlob(new Blob([bytes], { type: FIGURE_PNG_TYPE }), `${base}.png`);
+    return;
+  }
   const dataUri = await viewer.captureImage(pixels);
   if (dataUri === undefined) return;
-  const base = sanitizeFileName(fileName, 'molecule');
   if (format === 'png') {
     downloadBlob(
       new Blob([dataUriBytes(dataUri)], { type: FIGURE_PNG_TYPE }),

package/src/molecule3d/ui/moleculeFrames.ts

@@ -0,0 +1,88 @@
+/**
+ * The frames of the file a viewer shows: how many there are, whether they
+ * play, and a picture of each.
+ *
+ * Kept apart from the viewer because every redraw of the scene has to go
+ * through it: a running animation must not step a state tree being rebuilt —
+ * it finds no model and stops itself — so the frames are stopped first and
+ * started again once the new file is drawn.
+ */
+
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+
+import type { FramePlayback, MolstarPlugin } from '../../molstar/core/index.ts';
+import {
+  captureFrames,
+  setTrajectoryPlayback,
+  stopTrajectory,
+} from '../../molstar/core/index.ts';
+import { DEFAULT_FRAMES_PER_SECOND } from '../core/animatedPng.ts';
+import type { ImageSize } from '../core/exportImage.ts';
+
+/** The frames of what one viewer shows. */
+export class MoleculeFrames {
+  readonly #plugin: MolstarPlugin;
+  readonly #onCountChange: (frameCount: number) => void;
+  // Kept across redraws, so the next file plays as the last one did.
+  #playback: FramePlayback = {
+    playing: false,
+    framesPerSecond: DEFAULT_FRAMES_PER_SECOND,
+  };
+
+  /**
+   * Follow the frames of what `plugin` draws.
+   * @param plugin - The canvas.
+   * @param onCountChange - Called with how many frames each scene drawn holds.
+   */
+  constructor(
+    plugin: MolstarPlugin,
+    onCountChange: (frameCount: number) => void,
+  ) {
+    this.#plugin = plugin;
+    this.#onCountChange = onCountChange;
+  }
+
+  /**
+   * Redraw the scene with the frames stopped, then report how many the new
+   * scene holds and play them if playback is on.
+   * @param plugin - The molstar context.
+   * @param draw - Draws the scene, and resolves with how many frames it holds.
+   * @returns Nothing; resolves once the scene is drawn and playing.
+   */
+  async redraw(
+    plugin: PluginContext,
+    draw: () => Promise<number>,
+  ): Promise<void> {
+    await stopTrajectory(plugin);
+    this.#onCountChange(await draw());
+    const { playing, framesPerSecond } = this.#playback;
+    await setTrajectoryPlayback(plugin, playing, framesPerSecond);
+  }
+
+  /**
+   * Play the frames in a loop, or stop them, now and for every scene drawn
+   * afterwards. A scene of one frame stays still.
+   * @param playing - Whether to play.
+   * @param framesPerSecond - How fast.
+   * @returns Nothing; resolves once the animation is started or stopped.
+   */
+  play(playing: boolean, framesPerSecond: number): Promise<void> {
+    this.#playback = { playing, framesPerSecond };
+    return this.#plugin.run((plugin) =>
+      setTrajectoryPlayback(plugin, playing, framesPerSecond),
+    );
+  }
+
+  /**
+   * Render every frame off screen, as a still picture of the scene is
+   * rendered. Playback pauses while they are taken.
+   * @param size - Pixel size of each picture.
+   * @returns The pictures, in order; `undefined` once the canvas is disposed.
+   * @throws {Error} When the plugin has no screenshot helper.
+   */
+  capture(size: ImageSize): Promise<ImageData[] | undefined> {
+    return this.#plugin.run((plugin) =>
+      captureFrames(plugin, size, this.#playback),
+    );
+  }
+}

package/src/molecule3d/ui/moleculeViewer3DProps.ts

@@ -2,13 +2,10 @@ import type { ReactNode } from 'react';
 
 import type { ViewerCapability } from '../../orbital/ui/capability.ts';
 import type { Molecule3DCamera } from '../core/camera.ts';
+import type { Molecule3DFile } from '../core/file.ts';
 import type { Molecule3DHighlight } from '../core/highlight.ts';
 import type { Measurement } from '../core/measurement.ts';
-import type {
-  Molecule3DFile,
-  Molecule3DSettings,
-  Molecule3DTools,
-} from '../core/settings.ts';
+import type { Molecule3DSettings, Molecule3DTools } from '../core/settings.ts';
 
 /**
  * Props of `MoleculeViewer3D`.
@@ -69,6 +66,18 @@ export interface MoleculeViewer3DProps {
    * @default 1 / 3
    */
   spinSpeed?: number;
+  /**
+   * Whether the frames of a file holding several are played in a loop. A file
+   * of one model stays still whatever this says.
+   * @default false
+   */
+  playing?: boolean;
+  /**
+   * How many frames are shown per second while playing, and in an animated
+   * PNG; molstar plays between 5 and 60.
+   * @default 25
+   */
+  framesPerSecond?: number;
   /**
    * The measurements drawn over the model, when the site owns them. They name
    * atoms by position, so they carry over to another conformer of the same

package/src/molecule3d/ui/renderMolecule.ts

@@ -15,7 +15,8 @@ import { StructureFromModel } from 'molstar/lib/mol-plugin-state/transforms/mode
 import { StructureRepresentation3D } from 'molstar/lib/mol-plugin-state/transforms/representation.js';
 import type { StateTransformer } from 'molstar/lib/mol-state/index.js';
 
-import type { Molecule3DFile, RepresentationId } from '../core/settings.ts';
+import type { Molecule3DFile } from '../core/file.ts';
+import type { RepresentationId } from '../core/settings.ts';
 
 import type { MoleculeStyle } from './viewerTypes.ts';
 
@@ -48,7 +49,7 @@ const STICK_SCALE = 1.2;
  * @param plugin - The molstar context.
  * @param molfile - Molfile text plus the format id.
  * @param style - See {@link MoleculeStyle}.
- * @returns Nothing; resolves once the model is on screen.
+ * @returns How many frames the file holds, the first of which is on screen.
  * @throws {Error} When the file parses to zero atoms. molstar's `mol` parser returns
  * exactly that on a V3000 file, with no error, so without this check the viewer
  * would show an empty scene and report nothing.
@@ -57,7 +58,7 @@ export async function renderMolecule(
   plugin: PluginContext,
   molfile: Molecule3DFile,
   style: MoleculeStyle = {},
-): Promise<void> {
+): Promise<number> {
   const { representation = 'ball-and-stick', sizeFactor = 1 } = style;
   await clearMolecule(plugin);
   const data = await plugin.builders.data.rawData(
@@ -99,6 +100,7 @@ export async function renderMolecule(
       ),
     )
     .commit();
+  return trajectory.data?.frameCount ?? 1;
 }
 
 /**

package/src/molecule3d/ui/sceneDrawer.ts

@@ -11,9 +11,10 @@
  */
 
 import type { Molecule3DCamera } from '../core/camera.ts';
+import type { Molecule3DFile } from '../core/file.ts';
 import type { Measurement } from '../core/measurement.ts';
 import { sameMeasurements } from '../core/measurement.ts';
-import type { Molecule3DFile, Molecule3DSettings } from '../core/settings.ts';
+import type { Molecule3DSettings } from '../core/settings.ts';
 import { sameMolecule3DSettings } from '../core/settings.ts';
 
 import type { SceneViewer } from './drawScene.ts';
@@ -103,7 +104,7 @@ export class SceneDrawer {
     const { molfile, settings, measurements, frameNewMolecule } = request;
     const isNew =
       molfile !== null &&
-      (this.#framed === null || !sameFile(this.#framed, molfile));
+      (this.#framed === null || !sameMolecule(this.#framed, molfile));
     this.#framed = molfile;
     // A link's camera is spent on the first molecule framed; afterwards the
     // camera is the reader's and a new molecule is framed as usual.
@@ -119,6 +120,17 @@ export class SceneDrawer {
   }
 }
 
+// Two files a site names alike draw one molecule, whatever their text.
+function sameMolecule(first: Molecule3DFile, second: Molecule3DFile): boolean {
+  if (
+    first.moleculeId !== undefined &&
+    first.moleculeId === second.moleculeId
+  ) {
+    return true;
+  }
+  return sameFile(first, second);
+}
+
 function sameFile(
   first: Molecule3DFile | null,
   second: Molecule3DFile | null,