react-cheminfo 0.9.0 → 0.10.0

package/src/color/ui/ColorScaleBar.tsx

@@ -0,0 +1,73 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import { colorScaleGradient } from '../core/gradient.ts';
+import type { ColorScale } from '../core/interpolate.ts';
+
+const DEFAULT_HEIGHT = 10;
+const DEFAULT_SAMPLES = 24;
+
+/** What {@link ColorScaleBar} draws. */
+export interface ColorScaleBarProps {
+  /** The scale to draw, from its low end at the left. */
+  scale: ColorScale;
+  /**
+   * How tall the strip is, in pixels.
+   * @default 10
+   */
+  height?: number;
+  /**
+   * How many colours the gradient is written from. A scale that turns around
+   * the colour wheel needs more of them than one that mixes three channels,
+   * because the browser can only interpolate the straight line between two.
+   * @default 24
+   */
+  samples?: number;
+  /**
+   * What a screen reader is told the strip shows.
+   * @default '' — the strip is decoration, and is hidden from the reader
+   */
+  label?: string;
+  /**
+   * Anything the caller has to set on the strip itself, a width above all.
+   * @default {}
+   */
+  style?: CSSProperties;
+}
+
+/**
+ * A colour scale as one strip of colour.
+ *
+ * The picker, the editor and any caller who has to show a ramp without its end
+ * values draw the same strip, so a scale looks the same wherever it is offered.
+ * @param props - See {@link ColorScaleBarProps}.
+ * @returns The strip.
+ */
+export function ColorScaleBar(props: ColorScaleBarProps): ReactElement {
+  const {
+    scale,
+    height = DEFAULT_HEIGHT,
+    samples = DEFAULT_SAMPLES,
+    label = '',
+    style = {},
+  } = props;
+
+  return (
+    <span
+      role={label === '' ? undefined : 'img'}
+      aria-label={label === '' ? undefined : label}
+      aria-hidden={label === '' ? true : undefined}
+      style={{
+        ...BAR_STYLE,
+        height,
+        backgroundImage: colorScaleGradient(scale, samples),
+        ...style,
+      }}
+    />
+  );
+}
+
+const BAR_STYLE = {
+  display: 'block',
+  width: '100%',
+  borderRadius: 3,
+} as const satisfies CSSProperties;

package/src/color/ui/ColorScaleEditor.tsx

@@ -0,0 +1,243 @@
+import { Button, HTMLSelect } from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+
+import { parseHexColor, toHexColor } from '../core/hex.ts';
+import type {
+  ColorInterpolation,
+  ColorScale,
+  ColorStop,
+} from '../core/interpolate.ts';
+import { colorAt } from '../core/interpolate.ts';
+import { MAXIMUM_CUSTOM_STOPS } from '../core/scaleText.ts';
+
+import { ColorScaleBar } from './ColorScaleBar.tsx';
+
+const MINIMUM_STOPS = 2;
+const POSITION_STEP = 0.01;
+const PREVIEW_HEIGHT = 16;
+const PREVIEW_SAMPLES = 48;
+
+/** What each path between two anchors is called. */
+const INTERPOLATION_LABELS: Array<{
+  value: ColorInterpolation;
+  label: string;
+}> = [
+  { value: 'rgb', label: 'RGB — mix the channels' },
+  { value: 'hsv', label: 'HSV — turn the short way' },
+  { value: 'hsv-long', label: 'HSV — turn the long way' },
+];
+
+/** What {@link ColorScaleEditor} edits. */
+export interface ColorScaleEditorProps {
+  /** The scale being edited; every anchor is a `#rgb` or `#rrggbb` colour. */
+  value: ColorScale;
+  /** Called with the edited scale on every change. */
+  onChange: (scale: ColorScale) => void;
+}
+
+/**
+ * A colour scale of the reader's own: the colours it passes through, where
+ * each one sits, and the path it takes between them.
+ *
+ * A colour is anchored rather than typed into a list, so two anchors and the
+ * HSV path already describe a whole rainbow, and an anchor never crosses its
+ * neighbours — the scale it draws is always the one the strip above shows.
+ * @param props - See {@link ColorScaleEditorProps}.
+ * @returns The preview, the anchors, and the picker of the path between them.
+ */
+export function ColorScaleEditor(props: ColorScaleEditorProps): ReactElement {
+  const { value, onChange } = props;
+  const stops = value.stops;
+
+  function write(next: readonly ColorStop[]): void {
+    onChange({ stops: next, interpolation: value.interpolation });
+  }
+
+  return (
+    <div style={PANEL_STYLE}>
+      <ColorScaleBar
+        scale={value}
+        height={PREVIEW_HEIGHT}
+        samples={PREVIEW_SAMPLES}
+        label="The scale being edited"
+      />
+
+      <div style={ROWS_STYLE}>
+        {stops.map((stop, index) => (
+          <div key={`${String(index)}-${stop.color}`} style={ROW_STYLE}>
+            <input
+              type="color"
+              aria-label={`Colour of anchor ${String(index + 1)}`}
+              value={normalizeColor(stop.color)}
+              style={SWATCH_STYLE}
+              onChange={(event) => {
+                write(replace(stops, index, { color: event.target.value }));
+              }}
+            />
+            <input
+              type="range"
+              aria-label={`Position of anchor ${String(index + 1)}`}
+              min={0}
+              max={1}
+              step={POSITION_STEP}
+              value={stop.position}
+              style={SLIDER_STYLE}
+              onChange={(event) => {
+                write(
+                  replace(stops, index, {
+                    position: hold(stops, index, event.target.valueAsNumber),
+                  }),
+                );
+              }}
+            />
+            <span style={POSITION_STYLE}>{stop.position.toFixed(2)}</span>
+            <Button
+              icon="cross"
+              variant="minimal"
+              size="small"
+              aria-label={`Remove anchor ${String(index + 1)}`}
+              disabled={stops.length <= MINIMUM_STOPS}
+              onClick={() => {
+                write(stops.filter((_, at) => at !== index));
+              }}
+            />
+          </div>
+        ))}
+      </div>
+
+      <div style={FOOTER_STYLE}>
+        <Button
+          icon="plus"
+          size="small"
+          text="Add a colour"
+          disabled={stops.length >= MAXIMUM_CUSTOM_STOPS}
+          onClick={() => {
+            write(withAddedStop(value));
+          }}
+        />
+        <HTMLSelect
+          aria-label="Path between two anchors"
+          value={value.interpolation}
+          options={INTERPOLATION_LABELS}
+          onChange={(event) => {
+            onChange({
+              stops,
+              interpolation: event.currentTarget.value as ColorInterpolation,
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function replace(
+  stops: readonly ColorStop[],
+  index: number,
+  patch: Partial<ColorStop>,
+): ColorStop[] {
+  return stops.map((stop, at) => (at === index ? { ...stop, ...patch } : stop));
+}
+
+/**
+ * A position an anchor may take: never past either of its neighbours, so the
+ * rows never reorder under a dragging finger.
+ * @param stops - The anchors as they stand.
+ * @param index - Which of them is being moved.
+ * @param position - Where it is being moved to.
+ * @returns The position it is allowed to take.
+ */
+function hold(
+  stops: readonly ColorStop[],
+  index: number,
+  position: number,
+): number {
+  if (!Number.isFinite(position)) return stops[index]?.position ?? 0;
+  const low = stops[index - 1]?.position ?? 0;
+  const high = stops[index + 1]?.position ?? 1;
+  return Math.min(high, Math.max(low, position));
+}
+
+/**
+ * The anchors with one more, dropped in the widest gap and taking the colour
+ * the scale already has there — so adding one changes nothing until it is moved.
+ * @param scale - The scale being edited.
+ * @returns Its anchors, with the new one among them.
+ */
+function withAddedStop(scale: ColorScale): ColorStop[] {
+  const stops = [...scale.stops];
+  let widest = 0;
+  let at = 1;
+  for (let index = 1; index < stops.length; index++) {
+    const span =
+      (stops[index]?.position ?? 0) - (stops[index - 1]?.position ?? 0);
+    if (span > widest) {
+      widest = span;
+      at = index;
+    }
+  }
+  const position =
+    ((stops[at]?.position ?? 1) + (stops[at - 1]?.position ?? 0)) / 2;
+  stops.splice(at, 0, { position, color: colorAt(scale, position) });
+  return stops;
+}
+
+/**
+ * A colour a `type="color"` input reads: it takes six digits and nothing else,
+ * so a short hex is spelled out first.
+ * @param color - The anchor's colour, `#rgb` or `#rrggbb`.
+ * @returns The same colour, in six digits.
+ */
+function normalizeColor(color: string): string {
+  return toHexColor(parseHexColor(color));
+}
+
+const PANEL_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 10,
+  padding: 12,
+  minWidth: 280,
+} as const satisfies CSSProperties;
+
+const ROWS_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+} as const satisfies CSSProperties;
+
+const ROW_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 8,
+} as const satisfies CSSProperties;
+
+const SWATCH_STYLE = {
+  width: 32,
+  height: 24,
+  padding: 0,
+  border: 0,
+  background: 'none',
+  cursor: 'pointer',
+} as const satisfies CSSProperties;
+
+const SLIDER_STYLE = {
+  flex: '1 1 auto',
+  minWidth: 90,
+  accentColor: 'var(--accent, currentColor)',
+} as const satisfies CSSProperties;
+
+const POSITION_STYLE = {
+  fontSize: 12,
+  fontVariantNumeric: 'tabular-nums',
+  width: 30,
+  textAlign: 'right',
+} as const satisfies CSSProperties;
+
+const FOOTER_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'wrap',
+  gap: 8,
+  justifyContent: 'space-between',
+} as const satisfies CSSProperties;

package/src/color/ui/ColorScaleSelect.tsx

@@ -0,0 +1,252 @@
+import {
+  Button,
+  Menu,
+  MenuDivider,
+  MenuItem,
+  PopoverNext,
+} from '@blueprintjs/core';
+import type { CSSProperties, ReactElement } from 'react';
+import { useState } from 'react';
+
+import type { ColorScale } from '../core/interpolate.ts';
+import { formatColorScale, resolveColorScale } from '../core/scaleText.ts';
+import type { ColorScaleKind } from '../core/scales.ts';
+import { COLOR_SCALES, COLOR_SCALE_KIND_LABELS } from '../core/scales.ts';
+
+import { ColorScaleBar } from './ColorScaleBar.tsx';
+import { ColorScaleEditor } from './ColorScaleEditor.tsx';
+
+const BUTTON_BAR_WIDTH = 72;
+
+/** What {@link ColorScaleSelect} chooses. */
+export interface ColorScaleSelectProps {
+  /**
+   * The scale in force: the id of one of {@link COLOR_SCALES}, or a scale of
+   * the reader's own as `formatColorScale` writes it.
+   */
+  value: string;
+  /** Called with the text of the scale that was chosen. */
+  onChange: (value: string) => void;
+  /**
+   * Caption written above the button.
+   * @default '' — no caption
+   */
+  label?: string;
+  /**
+   * Whether the menu offers a scale of the reader's own.
+   * @default true
+   */
+  allowCustom?: boolean;
+  /**
+   * Value of the `data-testid` attribute of the button, for the end-to-end tests.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The picker a quantity's colours are chosen with: every scale drawn as itself,
+ * and a way to build one.
+ *
+ * A ramp is picked by looking at it rather than by reading its name, so the
+ * menu is the strips; the reader who needs the rainbow their course used, or
+ * the grey a photocopier will keep, finds it without knowing what viridis is.
+ * @param props - See {@link ColorScaleSelectProps}.
+ * @returns The button, and the menu it opens.
+ */
+export function ColorScaleSelect(props: ColorScaleSelectProps): ReactElement {
+  const { value, onChange, label = '', allowCustom = true, testId } = props;
+  const [isOpen, setOpen] = useState(false);
+  const [isEditing, setEditing] = useState(false);
+  const resolved = resolveColorScale(value);
+
+  const content = isEditing ? (
+    <div>
+      <div style={EDITOR_HEADER_STYLE}>
+        <Button
+          icon="chevron-left"
+          variant="minimal"
+          size="small"
+          text="Scales"
+          onClick={() => {
+            setEditing(false);
+          }}
+        />
+        <Button
+          size="small"
+          text="Done"
+          onClick={() => {
+            setEditing(false);
+            setOpen(false);
+          }}
+        />
+      </div>
+      <ColorScaleEditor
+        value={resolved.scale}
+        onChange={(scale) => {
+          onChange(formatColorScale(scale));
+        }}
+      />
+    </div>
+  ) : (
+    <Menu style={MENU_STYLE}>
+      {COLOR_SCALES.map((entry, index) => (
+        <ScaleEntry
+          key={entry.id}
+          id={entry.id}
+          label={entry.label}
+          kind={entry.kind}
+          description={entry.description}
+          previous={COLOR_SCALES[index - 1]?.kind}
+          selected={entry.id === resolved.id}
+          onChange={onChange}
+        />
+      ))}
+      {allowCustom ? (
+        <>
+          <MenuDivider />
+          <MenuItem
+            icon="edit"
+            text="Custom…"
+            label={resolved.id === null ? 'in use' : undefined}
+            shouldDismissPopover={false}
+            onClick={() => {
+              setEditing(true);
+            }}
+          />
+        </>
+      ) : null}
+    </Menu>
+  );
+
+  return (
+    <label style={FIELD_STYLE}>
+      {label === '' ? null : <span style={CAPTION_STYLE}>{label}</span>}
+      <PopoverNext
+        // A fade, like the pickers a site puts beside this one: the default
+        // grows the panel from a third of its size over about a second, which
+        // reads as the row behaving differently control by control.
+        animation="minimal"
+        arrow={false}
+        placement="bottom-start"
+        isOpen={isOpen}
+        content={content}
+        onInteraction={(next) => {
+          setOpen(next);
+          if (!next) setEditing(false);
+        }}
+      >
+        <Button
+          alignText="start"
+          aria-label={label === '' ? 'Colour scale' : label}
+          data-testid={testId}
+          endIcon="caret-down"
+          fill
+          text={
+            <span style={BUTTON_TEXT_STYLE}>
+              <span>{resolved.label}</span>
+              <ColorScaleBar
+                scale={resolved.scale}
+                style={{ width: BUTTON_BAR_WIDTH }}
+              />
+            </span>
+          }
+        />
+      </PopoverNext>
+    </label>
+  );
+}
+
+/**
+ * One line of the menu, under the heading of its kind when the kind changes.
+ * @param props - The scale the line offers, and what precedes it.
+ * @param props.id - Id of the scale, which is what a link carries.
+ * @param props.label - What the line is called.
+ * @param props.kind - What the scale is for, which is the heading it sits under.
+ * @param props.description - One line on when to reach for it, read on hover.
+ * @param props.previous - Kind of the line above, so a heading is written once.
+ * @param props.selected - Whether it is the scale in force.
+ * @param props.onChange - Called with the id when the line is chosen.
+ * @returns The line, with its heading when it opens a kind.
+ */
+function ScaleEntry(props: {
+  id: string;
+  label: string;
+  kind: ColorScaleKind;
+  description: string;
+  previous: ColorScaleKind | undefined;
+  selected: boolean;
+  onChange: (value: string) => void;
+}): ReactElement {
+  const { id, label, kind, description, previous, selected, onChange } = props;
+  const entry = (
+    <MenuItem
+      roleStructure="listoption"
+      selected={selected}
+      htmlTitle={description}
+      text={
+        <span style={ITEM_STYLE}>
+          <span>{label}</span>
+          <ColorScaleBar scale={scaleOf(id)} />
+        </span>
+      }
+      onClick={() => {
+        onChange(id);
+      }}
+    />
+  );
+  if (previous === kind) return entry;
+  return (
+    <>
+      <MenuDivider title={COLOR_SCALE_KIND_LABELS[kind]} />
+      {entry}
+    </>
+  );
+}
+
+function scaleOf(id: string): ColorScale {
+  return resolveColorScale(id).scale;
+}
+
+const FIELD_STYLE = {
+  display: 'flex',
+  flex: '1 1 auto',
+  flexDirection: 'column',
+  gap: 3,
+  minWidth: 180,
+  maxWidth: 420,
+} as const satisfies CSSProperties;
+
+const CAPTION_STYLE = {
+  color: 'var(--text-muted, #5b6875)',
+  fontSize: 12,
+  fontWeight: 600,
+} as const satisfies CSSProperties;
+
+const BUTTON_TEXT_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  width: '100%',
+} as const satisfies CSSProperties;
+
+const ITEM_STYLE = {
+  display: 'grid',
+  gridTemplateColumns: '7rem 1fr',
+  alignItems: 'center',
+  gap: 10,
+  minWidth: 220,
+} as const satisfies CSSProperties;
+
+const MENU_STYLE = {
+  maxHeight: '60vh',
+  overflowY: 'auto',
+} as const satisfies CSSProperties;
+
+const EDITOR_HEADER_STYLE = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 8,
+  padding: '8px 12px 0',
+} as const satisfies CSSProperties;

package/src/color/ui/index.ts

@@ -1,2 +1,8 @@
+export type { ColorScaleBarProps } from './ColorScaleBar.tsx';
+export { ColorScaleBar } from './ColorScaleBar.tsx';
+export type { ColorScaleEditorProps } from './ColorScaleEditor.tsx';
+export { ColorScaleEditor } from './ColorScaleEditor.tsx';
 export type { ColorScaleLegendProps } from './ColorScaleLegend.tsx';
 export { ColorScaleLegend } from './ColorScaleLegend.tsx';
+export type { ColorScaleSelectProps } from './ColorScaleSelect.tsx';
+export { ColorScaleSelect } from './ColorScaleSelect.tsx';

package/src/core.ts

@@ -1,4 +1,5 @@
 export * from './about/core/index.ts';
+export * from './chart/core/index.ts';
 export * from './citation/core/index.ts';
 export * from './clipboard/core/index.ts';
 export * from './color/core/index.ts';
@@ -8,13 +9,17 @@ export * from './download/core/index.ts';
 export * from './ecosystem/core/index.ts';
 export * from './format/core/index.ts';
 export * from './orbital/core/index.ts';
+export * from './overlay/core/index.ts';
 export * from './pedagogy/core/index.ts';
 export * from './periodic/core/index.ts';
+export * from './projection/core/index.ts';
 export * from './router/core/index.ts';
+export * from './scatter/core/index.ts';
 export * from './seo/core/index.ts';
 export * from './share/core/index.ts';
 // The deck format and its navigation are framework-free, so a backend can read
 // a manifest without loading React: `react-cheminfo/slides` is the player.
 export * from './slides/core/index.ts';
+export * from './spectra/core/index.ts';
 export * from './tokens/core/index.ts';
 export * from './worker/core/index.ts';

package/src/credits/core/credits.ts

@@ -208,6 +208,26 @@ export const CREDITS = [
     description: 'the database, one file, read through the Node built-in.',
     license: 'Public domain',
   },
+  {
+    id: 'sqlite-wasm',
+    name: 'SQLite Wasm',
+    href: 'https://sqlite.org/wasm/',
+    description: 'runs the same engine in the page, compiled to WebAssembly.',
+    license: 'Public domain',
+  },
+  {
+    id: 'pouchdb',
+    name: 'PouchDB',
+    href: 'https://pouchdb.com/',
+    description: 'answers Mango selectors the way CouchDB answers them.',
+    license: 'Apache-2.0',
+  },
+  {
+    id: 'chemexper',
+    name: 'ChemExper',
+    href: 'https://www.chemexper.com/',
+    description: 'the catalogue the compounds and their spectra come from.',
+  },
   {
     id: 'react',
     name: 'React',