react-cheminfo 0.66.0 → 0.67.0

package/src/molstar/core/trajectory.ts

@@ -0,0 +1,117 @@
+/**
+ * The frames of a trajectory: how many there are, which one is shown, and
+ * playing them in a loop.
+ *
+ * molstar keeps a trajectory as one data node and shows one of its frames
+ * through a `ModelFromTrajectory` node whose `modelIndex` says which. Playing
+ * is molstar's own model-index animation, which steps that index; showing one
+ * frame sets it.
+ */
+
+import type { PluginContext } from 'molstar/lib/mol-plugin/context.js';
+import { AnimateModelIndex } from 'molstar/lib/mol-plugin-state/animation/built-in/model-index.js';
+import { PluginStateObject } from 'molstar/lib/mol-plugin-state/objects.js';
+import { ModelFromTrajectory } from 'molstar/lib/mol-plugin-state/transforms/model.js';
+import { StateSelection } from 'molstar/lib/mol-state/index.js';
+
+/** How fast molstar's model-index animation can step, frames per second. */
+export const PLAYBACK_FPS_RANGE = { minimum: 5, maximum: 60 } as const;
+
+/**
+ * How many frames the trajectory on screen holds.
+ * @param plugin - The molstar context.
+ * @returns The most frames of any trajectory shown; 0 when none is.
+ */
+export function trajectoryFrameCount(plugin: PluginContext): number {
+  const state = plugin.state.data;
+  let count = 0;
+  for (const model of modelCells(plugin)) {
+    const trajectory = StateSelection.findAncestorOfType(
+      state.tree,
+      state.cells,
+      model.transform.ref,
+      PluginStateObject.Molecule.Trajectory,
+    );
+    count = Math.max(count, trajectory?.obj?.data.frameCount ?? 0);
+  }
+  return count;
+}
+
+/**
+ * Show one frame of every trajectory on screen, and everything built on it:
+ * the drawn model, its surface and the measurements over it.
+ * @param plugin - The molstar context.
+ * @param index - The frame, from 0.
+ * @returns Nothing; resolves once the state tree is updated.
+ */
+export async function showTrajectoryFrame(
+  plugin: PluginContext,
+  index: number,
+): Promise<void> {
+  const update = plugin.build();
+  for (const model of modelCells(plugin)) {
+    update.to(model).update({ modelIndex: index });
+  }
+  await update.commit();
+}
+
+/**
+ * The frame on screen.
+ * @param plugin - The molstar context.
+ * @returns The index of the frame the first trajectory shows; 0 when none is.
+ */
+export function shownTrajectoryFrame(plugin: PluginContext): number {
+  return modelCells(plugin)[0]?.transform.params?.modelIndex ?? 0;
+}
+
+/**
+ * Play the frames in a loop, or stop them where they stand.
+ * @param plugin - The molstar context.
+ * @param playing - Whether to play. A trajectory of one frame never plays.
+ * @param framesPerSecond - How fast, clamped into {@link PLAYBACK_FPS_RANGE}.
+ * @returns Nothing; resolves once the animation is started or stopped.
+ */
+export async function setTrajectoryPlayback(
+  plugin: PluginContext,
+  playing: boolean,
+  framesPerSecond: number,
+): Promise<void> {
+  if (!playing || trajectoryFrameCount(plugin) < 2) {
+    await stopTrajectory(plugin);
+    return;
+  }
+  await plugin.managers.animation.play(AnimateModelIndex, {
+    mode: { name: 'loop', params: { direction: 'forward' } },
+    duration: {
+      name: 'sequential',
+      params: { maxFps: clampFramesPerSecond(framesPerSecond) },
+    },
+  });
+}
+
+/**
+ * Stop the frames where they stand.
+ * @param plugin - The molstar context.
+ * @returns Nothing; resolves once the animation is stopped.
+ */
+export async function stopTrajectory(plugin: PluginContext): Promise<void> {
+  const animation = plugin.managers.animation;
+  if (animation.isAnimating) await animation.stop();
+}
+
+/**
+ * A frame rate molstar's model-index animation accepts.
+ * @param framesPerSecond - Any rate.
+ * @returns The rate, rounded and clamped into {@link PLAYBACK_FPS_RANGE}.
+ */
+export function clampFramesPerSecond(framesPerSecond: number): number {
+  const { minimum, maximum } = PLAYBACK_FPS_RANGE;
+  if (!Number.isFinite(framesPerSecond)) return minimum;
+  return Math.min(maximum, Math.max(minimum, Math.round(framesPerSecond)));
+}
+
+function modelCells(plugin: PluginContext) {
+  return plugin.state.data.select(
+    StateSelection.Generators.ofTransformer(ModelFromTrajectory),
+  );
+}

package/src/panel/ui/PanelRail.tsx

@@ -55,6 +55,9 @@ export function PanelRail<TId extends string>(
           id={panel.id}
           icon={panel.icon}
           tooltip={panel.title}
+          // A tooltip is not an accessible name: without this every toggle is
+          // an icon-only button with no name at all.
+          aria-label={panel.title}
           active={openIds.includes(panel.id)}
           onClick={() => onToggle(panel.id)}
         />

package/src/raman.ts

@@ -9,9 +9,10 @@
  */
 
 export type { LoadedIrSpectrum } from './ir/core/analysisSpectra.ts';
-export type { IrEditorHandle } from './ir/core/irEditorApi.ts';
+export type { IrEditorHandle, IrPlotClick } from './ir/core/irEditorApi.ts';
 export type { IrSpectrum } from './ir/core/irSpectrum.ts';
 export { toIrSpectra } from './ir/core/toIrSpectrum.ts';
+export type { IrHostPanel } from './ir/ui/irHostPanels.ts';
 export type {
   RamanEditorHandle,
   RamanEditorProps,

package/src/router/core/basePath.ts

@@ -4,8 +4,8 @@ import { trimTrailingSlash } from './address.ts';
  * Where a site is mounted, read off the page rather than off the build.
  *
  * The build is mount-agnostic — vite is given a relative base, so the same
- * `dist` serves `https://surge.cheminfo.org/` and
- * `https://www.cheminfo.org/surge/`. What tells the two apart is the `<base>`
+ * `dist` serves `https://isomers.cheminfo.org/` and
+ * `https://www.cheminfo.org/isomers/`. What tells the two apart is the `<base>`
  * the deployment stamps into the page it hands out, and `document.baseURI`
  * resolves it against the address actually opened. So this answers correctly
  * whether or not a slash closes the address, and on an address the SPA

package/src/router/core/siteAddresses.ts

@@ -16,7 +16,7 @@ import {
  *
  * The mount is read off the page, not off the build: the build carries no
  * mount, and the `<base>` a deployment stamps into its pages is what tells
- * `https://surge.cheminfo.org/` from `https://www.cheminfo.org/surge/`. Under
+ * `https://isomers.cheminfo.org/` from `https://www.cheminfo.org/isomers/`. Under
  * Node there is no page, and the mount is the root.
  * @param siteId - The site, as `ECOSYSTEM_SITES` names it.
  * @param options - A mount path to use instead of the one read off the page.

package/src/seo/core/siteFiles.ts

@@ -130,7 +130,7 @@ export function originOf(options: SiteOrigin): string {
   const origin = options.origin ?? `https://${resolveSite(options.site).host}`;
   if (!HTTP_ORIGIN.test(origin) || !URL.canParse(origin)) {
     throw new Error(
-      `an origin is an absolute address, e.g. https://surge.cheminfo.org: ${JSON.stringify(origin)}`,
+      `an origin is an absolute address, e.g. https://isomers.cheminfo.org: ${JSON.stringify(origin)}`,
     );
   }
   return trimTrailingSlash(origin);

package/src/server/answerAddresses.ts

@@ -6,9 +6,9 @@
  * The two are written however the deployment writes them — an origin, an
  * origin and a mount, with or without a trailing slash — and a page is named
  * from the site's own root, `/titration` and `titration` alike: every helper
- * joins the two with exactly one slash, so `https://www.cheminfo.org/surge`
- * and `https://www.cheminfo.org/surge/` both put `/generator` at
- * `https://www.cheminfo.org/surge/generator`.
+ * joins the two with exactly one slash, so `https://www.cheminfo.org/isomers`
+ * and `https://www.cheminfo.org/isomers/` both put `/generator` at
+ * `https://www.cheminfo.org/isomers/generator`.
  */
 
 import { trimTrailingSlash } from '../router/core/address.ts';

package/src/structure/core/index.ts

@@ -82,3 +82,11 @@ export type {
   StructureSourceInput,
 } from './structureSource.ts';
 export { structureSource } from './structureSource.ts';
+export type {
+  StructureTransfer,
+  StructureTransferSource,
+} from './structureTransfer.ts';
+export {
+  carriesStructure,
+  readStructureTransfer,
+} from './structureTransfer.ts';

package/src/structure/core/structureTransfer.ts

@@ -0,0 +1,37 @@
+/** What a paste or a drop carried that a structure can be read from. */
+export type StructureTransfer =
+  { kind: 'files'; files: File[] } | { kind: 'text'; text: string };
+
+/** The part of a `DataTransfer` a structure is read from. */
+export interface StructureTransferSource {
+  files: ArrayLike<File>;
+  getData: (format: string) => string;
+}
+
+/**
+ * What a paste or a drop holds: its files when it carries any, otherwise its
+ * text — a SMILES, an idCode, a molfile. A file copied in the file manager also
+ * carries its name as text, so the files win.
+ * @param transfer - The clipboard or drag data, `null` when the event has none.
+ * @returns The files or the trimmed text, or `null` when there is nothing.
+ */
+export function readStructureTransfer(
+  transfer: StructureTransferSource | null,
+): StructureTransfer | null {
+  if (transfer === null) return null;
+  if (transfer.files.length > 0) {
+    return { kind: 'files', files: Array.from(transfer.files) };
+  }
+  const text = transfer.getData('text').trim();
+  return text === '' ? null : { kind: 'text', text };
+}
+
+/**
+ * Whether a drag in progress may carry a structure. Until the drop only the
+ * types are readable, never the content, so a file or plain text is enough.
+ * @param types - `DataTransfer.types` of the drag.
+ * @returns Whether it is worth offering to take the drop.
+ */
+export function carriesStructure(types: readonly string[]): boolean {
+  return types.includes('Files') || types.includes('text/plain');
+}

package/src/structure/ui/EditorImportButton.tsx

@@ -0,0 +1,59 @@
+import { Button } from '@blueprintjs/core';
+import type { ReactElement } from 'react';
+import { useRef } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import { ActionTooltip } from '../../shared/ui/ActionTooltip.tsx';
+import type { StructureTransfer } from '../core/structureTransfer.ts';
+
+/** What {@link EditorImportButton} needs. */
+export interface EditorImportButtonProps {
+  /** Called with the files chosen. */
+  onImport: (transfer: StructureTransfer) => void;
+  /**
+   * The file types the picker offers, as an `accept` attribute.
+   * @default undefined
+   */
+  accept?: string;
+}
+
+/**
+ * The editor's open button, beside the export one, for a visitor who cannot
+ * drag a file onto the canvas — on a phone, or from a picker.
+ * @param props - See {@link EditorImportButtonProps}.
+ * @returns The button and its hidden file input.
+ */
+export function EditorImportButton(
+  props: EditorImportButtonProps,
+): ReactElement {
+  const { onImport, accept } = props;
+  const t = useChromeT();
+  const input = useRef<HTMLInputElement>(null);
+
+  return (
+    <>
+      <ActionTooltip content={t('structure.import.open')} placement="left">
+        <Button
+          variant="minimal"
+          size="small"
+          icon="import"
+          aria-label={t('structure.import.open')}
+          onClick={() => input.current?.click()}
+        />
+      </ActionTooltip>
+      <input
+        ref={input}
+        type="file"
+        accept={accept}
+        hidden
+        data-testid="structure-editor-file"
+        onChange={(event) => {
+          const files = Array.from(event.currentTarget.files ?? []);
+          // Cleared, so choosing the same file again is a change.
+          event.currentTarget.value = '';
+          if (files.length > 0) onImport({ kind: 'files', files });
+        }}
+      />
+    </>
+  );
+}

package/src/structure/ui/EditorImportProblem.tsx

@@ -0,0 +1,63 @@
+import { Button, Callout } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+
+import type { StructureImportProblem } from './useStructureImport.ts';
+
+/** What {@link EditorImportProblem} needs. */
+export interface EditorImportProblemProps {
+  /** What went wrong. */
+  problem: StructureImportProblem;
+  /** Forget it. */
+  onDismiss: () => void;
+}
+
+/**
+ * The line along the bottom of the canvas that says a drop loaded nothing,
+ * and that the drawing is still there.
+ * @param props - See {@link EditorImportProblemProps}.
+ * @returns The line.
+ */
+export function EditorImportProblem(
+  props: EditorImportProblemProps,
+): ReactElement {
+  const { problem, onDismiss } = props;
+  const t = useChromeT();
+  return (
+    <div role="alert" style={PLACE}>
+      <Callout intent="danger" icon={null} compact style={LINE}>
+        <span style={TEXT}>
+          {problem.file === null
+            ? t('structure.import.unreadableText')
+            : t('structure.import.unreadableFile', { name: problem.file })}
+        </span>
+        <Button
+          variant="minimal"
+          size="small"
+          icon="cross"
+          aria-label={t('overlay.dismiss')}
+          onClick={onDismiss}
+        />
+      </Callout>
+    </div>
+  );
+}
+
+/** Clear of the tool palette, two 21px columns in a 2px border, at the left. */
+const PLACE: CSSProperties = {
+  position: 'absolute',
+  right: 4,
+  bottom: 4,
+  left: 52,
+  zIndex: 10,
+};
+
+const LINE: CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  fontSize: 12,
+};
+
+const TEXT: CSSProperties = { flex: 1 };

package/src/structure/ui/StructureDrop.tsx

@@ -0,0 +1,66 @@
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
+
+import { useChromeT } from '../../i18n/ui/useT.ts';
+import type { StructureTransfer } from '../core/structureTransfer.ts';
+
+import { StructureDropOverlay } from './StructureDropOverlay.tsx';
+import { useStructureDrop } from './useStructureDrop.ts';
+
+/** What {@link StructureDrop} needs. */
+export interface StructureDropProps {
+  /** Called with the files or the text dropped. */
+  onDrop: (transfer: StructureTransfer) => void;
+  /** What the drop lands on. */
+  children: ReactNode;
+  /**
+   * What the overlay says while something is dragged over.
+   * @default 'Drop to load the structure', in the page's language
+   */
+  label?: string;
+  /**
+   * Take no drop, while a load is already running for instance.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Class of the wrapping element.
+   * @default undefined
+   */
+  className?: string;
+  /**
+   * Extra style for the wrapping element, which is positioned so the overlay
+   * covers it.
+   * @default undefined
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * Make an area take a structure file, or structure text dragged from another
+ * page, with the same veil the structure editor raises over its canvas. What
+ * was dropped is handed over unread: the page knows which formats it takes.
+ * @param props - See {@link StructureDropProps}.
+ * @returns The area.
+ */
+export function StructureDrop(props: StructureDropProps): ReactElement {
+  const { onDrop, children, label, disabled = false } = props;
+  const { className, style } = props;
+  const t = useChromeT();
+  const drop = useStructureDrop(disabled ? undefined : onDrop);
+
+  return (
+    <div
+      className={className}
+      style={{ position: 'relative', ...style }}
+      {...drop.targetProps}
+    >
+      {children}
+      {drop.over ? (
+        <StructureDropOverlay
+          label={label ?? t('structure.import.drop')}
+          handlers={drop.overlayProps}
+        />
+      ) : null}
+    </div>
+  );
+}

package/src/structure/ui/StructureDropOverlay.tsx

@@ -0,0 +1,50 @@
+import { Icon } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import type { DropHandlers } from './useStructureDrop.ts';
+
+/** What {@link StructureDropOverlay} needs. */
+export interface StructureDropOverlayProps {
+  /** What the overlay says. */
+  label: string;
+  /** The overlay handlers of `useStructureDrop`. */
+  handlers: DropHandlers;
+}
+
+/**
+ * The veil a drop target raises while a file or text is dragged over it.
+ * @param props - See {@link StructureDropOverlayProps}.
+ * @returns The overlay.
+ */
+export function StructureDropOverlay(
+  props: StructureDropOverlayProps,
+): ReactElement {
+  const { label, handlers } = props;
+  return (
+    <div data-testid="structure-drop-overlay" style={OVERLAY} {...handlers}>
+      {/* Nothing inside takes the pointer, so leaving the overlay is the only
+          dragleave it hears. */}
+      <Icon icon="import" size={28} style={PASSIVE} />
+      <span style={PASSIVE}>{label}</span>
+    </div>
+  );
+}
+
+const OVERLAY: CSSProperties = {
+  position: 'absolute',
+  inset: 0,
+  zIndex: 20,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  border: '2px dashed var(--accent)',
+  borderRadius: 'inherit',
+  background: 'color-mix(in oklab, var(--accent) 10%, rgb(255 255 255 / 88%))',
+  color: 'var(--accent)',
+  fontSize: 14,
+  fontWeight: 600,
+};
+
+const PASSIVE: CSSProperties = { pointerEvents: 'none' };