react-cheminfo 0.14.0 → 0.16.0

package/src/ecosystem/core/sites.ts

@@ -79,6 +79,19 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#d63384',
     mark: { plate: '#5b52e0', accent: '#ff8ac2' },
   },
+  {
+    id: 'dbe',
+    name: { lead: 'dbe', alt: 'cheminfo', dot: true },
+    host: 'dbe.cheminfo.org',
+    repository: 'https://github.com/cheminfo/dbe.cheminfo.org',
+    tagline: 'Count rings and double bonds from a formula or a structure.',
+    group: 'basics',
+    brand: '#63123f',
+    // The emerald the mark's double bond is drawn in sits at 2.5:1 on white,
+    // so the second half of the wordmark takes this darkened form instead.
+    brandAlt: '#047857',
+    mark: { plate: '#63123f', accent: '#10b981' },
+  },
   {
     id: 'nmrium',
     name: { lead: 'NMR', alt: 'ium' },
@@ -236,6 +249,33 @@ export const ECOSYSTEM_SITES: readonly EcosystemSite[] = [
     brandAlt: '#0b6e85',
     mark: { plate: '#7c2d12', accent: '#06b6d4' },
   },
+  {
+    id: 'symmetry',
+    name: { lead: 'Symme', alt: 'Try' },
+    host: 'symmetry.cheminfo.org',
+    repository: 'https://github.com/cheminfo/symmetry.cheminfo.org',
+    tagline: 'Find the symmetry of a molecule, a crystal or a pattern.',
+    group: 'basics',
+    brand: '#9f1239',
+    // The gold that carries the apex of the mark sits at 2.2:1 on white, so
+    // the second half of the wordmark takes this darkened amber instead.
+    brandAlt: '#b45309',
+    mark: { plate: '#9f1239', accent: '#f59e0b' },
+  },
+  {
+    id: 'osiris',
+    name: { lead: 'osiris', alt: 'cheminfo', dot: true },
+    host: 'osiris.cheminfo.org',
+    repository: 'https://github.com/cheminfo/osiris.cheminfo.org',
+    tagline: 'Predicted toxicity risks and properties, one molecule or many.',
+    group: 'research',
+    brand: '#854d0e',
+    // The lapis and the gold are equiluminant — 1.02:1 against each other — so
+    // the mark draws the same blue lightened, and this darkened form is what
+    // the second half of the wordmark is set in.
+    brandAlt: '#1d4ed8',
+    mark: { plate: '#854d0e', accent: '#60a5fa' },
+  },
 ];
 
 /**

package/src/ecosystem/core/types.ts

@@ -8,6 +8,7 @@ export type SiteId =
   | 'smiles'
   | 'openbabel'
   | 'chemcalc'
+  | 'dbe'
   | 'nmrium'
   | 'metabo'
   | 'derepflow'
@@ -21,7 +22,9 @@ export type SiteId =
   | 'polycarp'
   | '3d'
   | 'periodic-table'
-  | 'database';
+  | 'database'
+  | 'symmetry'
+  | 'osiris';
 
 /** A site's name, split the way its own wordmark splits it. */
 export interface SiteName {

package/src/ecosystem/ui/Wordmark.tsx

@@ -3,12 +3,22 @@ import type { CSSProperties, ReactElement } from 'react';
 import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
 import { siteById } from '../core/lookup.ts';
 import { siteNameColors } from '../core/nameColors.ts';
-import type { SiteId } from '../core/sites.ts';
+import type { EcosystemSite, SiteId } from '../core/sites.ts';
 
 /** What a site's written name needs. */
 export interface WordmarkProps {
-  /** The site whose name is written. */
-  siteId: SiteId;
+  /**
+   * The site whose name is written, passed rather than named — for a site that
+   * is deliberately not one of `ECOSYSTEM_SITES`. One of `site` and `siteId` is
+   * required.
+   * @default undefined
+   */
+  site?: EcosystemSite;
+  /**
+   * The same site, named rather than passed, which is what a header knows.
+   * @default undefined
+   */
+  siteId?: SiteId;
   /**
    * Size of the name, in pixels. The weight comes from the surrounding
    * context, so the same wordmark suits a header bar and a heading.
@@ -32,12 +42,17 @@ export interface WordmarkProps {
  * its address.
  * @param props - The site, the size of the name, and extra class names.
  * @returns The name, as one inline element that never wraps mid-address.
+ * @throws {Error} When neither `site` nor `siteId` is given.
  */
 export function Wordmark(props: WordmarkProps): ReactElement {
-  const { siteId, size = 17, className } = props;
-  const site = siteById(siteId);
-  const { lead, alt, dot } = site.name;
-  const colors = siteNameColors(site);
+  const { site, siteId, size = 17, className } = props;
+  const written = site ?? (siteId === undefined ? undefined : siteById(siteId));
+  if (written === undefined) {
+    throw new Error('Wordmark needs one of its `site` and `siteId` props');
+  }
+
+  const { lead, alt, dot } = written.name;
+  const colors = siteNameColors(written);
 
   return (
     <span

package/src/ecosystem/ui/glyphs.tsx

@@ -129,6 +129,18 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <path d="M23 24V18" stroke="#ffffff" />
     </g>
   ),
+  // A ring with a double bond drawn inside it: the two things a DBE adds up,
+  // and the equals sign the E of the name already is.
+  dbe: (alt) => (
+    <g fill="none" strokeLinecap="round" strokeLinejoin="round">
+      <path
+        d="M16 5 25.53 10.5 25.53 21.5 16 27 6.47 21.5 6.47 10.5Z"
+        stroke="#ffffff"
+        strokeWidth="2.4"
+      />
+      <path d="M10.8 12.9h10.4M10.8 19.1h10.4" stroke={alt} strokeWidth="2.9" />
+    </g>
+  ),
   // The ring and the substituent dots of the DerepFlow logo do not survive
   // 16 px, so the mark keeps the two elements that carry its meaning: the
   // compound, and the tick that says it has been identified.
@@ -363,4 +375,38 @@ export const GLYPHS: Record<SiteId, (alt: string) => ReactNode> = {
       <ellipse cx="16" cy="9.4" rx="10.2" ry="3.9" fill={alt} />
     </>
   ),
+  // A tetrahedron seen from slightly above, four balls at its corners: the
+  // first shape a chemist meets symmetry in. The apex carries the answering
+  // colour, which is also the C3 axis every base triangle turns about.
+  symmetry: (alt) => (
+    <>
+      <g stroke="#ffffff" strokeWidth="1.8" strokeLinecap="round" fill="none">
+        <path d="M16 6.4 6.6 24.4M16 6.4 25.4 24.4M16 6.4 16 17.6" />
+        <path d="M6.6 24.4 25.4 24.4" />
+        <path d="M6.6 24.4 16 17.6M25.4 24.4 16 17.6" opacity="0.5" />
+      </g>
+      <circle cx="16" cy="17.6" r="2.5" fill="#ffffff" opacity="0.55" />
+      <circle cx="6.6" cy="24.4" r="3.2" fill="#ffffff" />
+      <circle cx="25.4" cy="24.4" r="3.2" fill="#ffffff" />
+      <circle cx="16" cy="6.4" r="3.6" fill={alt} />
+    </>
+  ),
+  // Three axes with one line crossing them: a parallel-coordinates plot, which
+  // is how this site reads a set of molecules against one another. The line
+  // carries the answering colour because the line is the molecule.
+  osiris: (alt) => (
+    <>
+      <g stroke="#ffffff" strokeWidth="2.2" strokeLinecap="round" fill="none">
+        <path d="M7.4 6.8V25.2M16 6.8V25.2M24.6 6.8V25.2" />
+      </g>
+      <path
+        d="M7.4 21.6 16 10.4 24.6 17.2"
+        fill="none"
+        stroke={alt}
+        strokeWidth="3.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>
+  ),
 };

package/src/parallel/core/index.ts

@@ -0,0 +1,80 @@
+/**
+ * What a parallel-coordinates figure has to work out before it can draw: where
+ * each axis stands, how a value on it becomes a pixel, which row the pointer
+ * is over, which rows the brushes keep, and the canvas pass that paints them.
+ *
+ * The brush is the part worth reading twice. It is a pure function of a press
+ * and a pointer rather than a behaviour attached to an element, so every one
+ * of its four gestures — create, move, resize from either edge, clear — is
+ * covered by tests in a runtime with no DOM, and the figure stays declarative.
+ */
+
+export type { ParallelAxisLayout, ParallelAxisPixels } from './parallelAxes.ts';
+export {
+  PARALLEL_MARGIN,
+  parallelAxisLayouts,
+  parallelAxisPixels,
+  parallelPixelAt,
+  parallelValueToY,
+  parallelYToValue,
+} from './parallelAxes.ts';
+export type {
+  ParallelBand,
+  ParallelBrushDrag,
+  ParallelBrushGrip,
+} from './parallelBrush.ts';
+export {
+  PARALLEL_BRUSH_HALF_WIDTH,
+  PARALLEL_BRUSH_HANDLE_REACH,
+  PARALLEL_BRUSH_SMALLEST,
+  parallelBandAt,
+  parallelBandOf,
+  parallelBrushGrip,
+  parallelIsBand,
+  parallelRangeOf,
+} from './parallelBrush.ts';
+export type { ParallelExtent } from './parallelExtent.ts';
+export {
+  PARALLEL_DEGENERATE_PADDING,
+  parallelExtent,
+} from './parallelExtent.ts';
+export {
+  parallelIncludedMask,
+  parallelKeptCount,
+  parallelRangeKeeps,
+} from './parallelFilter.ts';
+export type { ParallelPoint, ParallelSegment } from './parallelHit.ts';
+export {
+  PARALLEL_HOVER_TOLERANCE,
+  parallelNearestRow,
+  parallelSegmentAt,
+} from './parallelHit.ts';
+export type {
+  ParallelHighlight,
+  ParallelHighlightPaint,
+  ParallelPaint,
+} from './parallelPaint.ts';
+export {
+  PARALLEL_INCLUDED_ALPHA,
+  paintParallelHighlights,
+  paintParallelLines,
+  preparePlotCanvas,
+  traceParallelRow,
+} from './parallelPaint.ts';
+export {
+  PARALLEL_PALETTE_STEPS,
+  parallelColorSteps,
+  parallelPalette,
+} from './parallelPalette.ts';
+export type { ParallelGraduation } from './parallelTicks.ts';
+export { PARALLEL_TICK_COUNT, parallelTicks } from './parallelTicks.ts';
+export type {
+  ParallelAxis,
+  ParallelAxisScale,
+  ParallelAxisSource,
+  ParallelColorBy,
+  ParallelRange,
+  ParallelRanges,
+  ParallelTick,
+} from './parallelTypes.ts';
+export { parallelAxisOf } from './parallelTypes.ts';

package/src/parallel/core/parallelAxes.ts

@@ -0,0 +1,207 @@
+/**
+ * Where each axis stands, how far it reaches, and how a value on it becomes a
+ * pixel.
+ *
+ * The first axis sits flush with the left of the drawing area and the last one
+ * flush with the right, rather than inset the way a two-axis chart insets its
+ * plot: the axes *are* the figure here, and a reader comparing the leftmost
+ * column against the rightmost must see both of them, not a margin.
+ */
+
+import { chartScale } from '../../chart/core/chartScale.ts';
+
+import { parallelExtent } from './parallelExtent.ts';
+import { parallelTicks } from './parallelTicks.ts';
+import type {
+  ParallelAxis,
+  ParallelAxisScale,
+  ParallelTick,
+} from './parallelTypes.ts';
+
+/** Room kept around the drawing area for the axis names and the tick labels. */
+export const PARALLEL_MARGIN = {
+  /** Above the drawing area, where the axis names are written. */
+  top: 26,
+  /** To the right of it, so the last axis's labels are not clipped. */
+  right: 54,
+  /** Below it. */
+  bottom: 22,
+  /** To its left, where the first axis's tick labels are written. */
+  left: 54,
+} as const;
+
+/** How a value on one axis becomes a pixel, as the two numbers a multiply-add needs. */
+export interface ParallelAxisPixels {
+  /** The pixel the value zero lands on — or the value one, on a log axis. */
+  readonly offset: number;
+  /** Pixels per unit, negative because an axis grows upward. Zero when the axis is flat. */
+  readonly factor: number;
+  /** Whether a value is read through its base-10 logarithm first. */
+  readonly logarithmic: boolean;
+  /** The smallest value a log axis can place; anything at or below it is pinned there. */
+  readonly floor: number;
+}
+
+/** One axis, placed and measured, ready to draw. */
+export interface ParallelAxisLayout {
+  /** The axis this lays out. */
+  id: string;
+  /** Its name. */
+  label: string;
+  /** The unit written after the name, or an empty string. */
+  unit: string;
+  /** Horizontal centre, in pixels from the left of the drawing area. */
+  x: number;
+  /** The value at the bottom of the axis. */
+  min: number;
+  /** The value at its top. */
+  max: number;
+  /** How values are placed between them. */
+  scale: ParallelAxisScale;
+  /** Its graduations, already written out, from the bottom up. */
+  ticks: readonly ParallelTick[];
+  /** How a value on it becomes a pixel, worked out once here. */
+  pixels: ParallelAxisPixels;
+}
+
+/** A flat axis: every value lands on the top of the drawing area. */
+const FLAT: ParallelAxisPixels = {
+  offset: 0,
+  factor: 0,
+  logarithmic: false,
+  floor: 1,
+};
+
+/** How far below the largest value a log axis may reach when its low end is not positive. */
+const LOG_FLOOR_SHARE = 1e-12;
+
+/**
+ * Place every axis across the drawing area and work out what it reaches.
+ * @param axes - The axes, from left to right.
+ * @param count - How many rows the columns are read over.
+ * @param innerWidth - Width between the first and the last axis, in pixels.
+ * @param innerHeight - Height of the drawing area, in pixels.
+ * @returns One layout per axis, in the order they were given. A single axis is
+ * centred; two or more are spread evenly with the outer ones flush with the
+ * edges.
+ */
+export function parallelAxisLayouts(
+  axes: readonly ParallelAxis[],
+  count: number,
+  innerWidth: number,
+  innerHeight: number,
+): ParallelAxisLayout[] {
+  const layouts: ParallelAxisLayout[] = [];
+  const total = axes.length;
+  for (let index = 0; index < total; index++) {
+    const axis = axes[index];
+    if (axis === undefined) continue;
+    const extent = axisExtent(axis, count);
+    const graduation = parallelTicks(axis, extent.min, extent.max);
+    const [min, max] = graduation.domain;
+    const scale = axis.scale ?? 'linear';
+    layouts.push({
+      id: axis.id,
+      label: axis.label,
+      unit: axis.unit ?? '',
+      x: total === 1 ? innerWidth / 2 : (innerWidth * index) / (total - 1),
+      min,
+      max,
+      scale,
+      ticks: graduation.ticks,
+      pixels: parallelAxisPixels(min, max, scale, innerHeight),
+    });
+  }
+  return layouts;
+}
+
+/**
+ * The mapping that puts `max` at the top of the drawing area and `min` at its
+ * bottom.
+ * @param min - The value at the bottom.
+ * @param max - The value at the top.
+ * @param scale - How values are placed between them.
+ * @param innerHeight - Height of the drawing area, in pixels.
+ * @returns The mapping. An axis with no span, or one drawn in no height at
+ * all, comes back flat, which pins every value to the top rather than dividing
+ * by zero.
+ */
+export function parallelAxisPixels(
+  min: number,
+  max: number,
+  scale: ParallelAxisScale,
+  innerHeight: number,
+): ParallelAxisPixels {
+  if (max - min <= 0 || innerHeight <= 0) return FLAT;
+  if (scale !== 'log') {
+    const linear = chartScale(min, max, innerHeight, 0);
+    return { ...linear, logarithmic: false, floor: 1 };
+  }
+  const floor = min > 0 ? min : max > 0 ? max * LOG_FLOOR_SHARE : 1;
+  const low = Math.log10(floor);
+  const high = Math.log10(Math.max(max, floor));
+  if (high - low <= 0) return FLAT;
+  const mapping = chartScale(low, high, innerHeight, 0);
+  return { ...mapping, logarithmic: true, floor };
+}
+
+/**
+ * Where one value falls on an axis, in pixels.
+ *
+ * For a single conversion — a tick, a brushed edge, a highlighted crossing.
+ * Inside a loop over rows, read `axis.pixels` and write the multiply-add out.
+ * @param pixels - The axis's mapping.
+ * @param value - The value to place.
+ * @returns The pixel, measured from the top of the drawing area. A value
+ * outside the axis lands outside the drawing area and is not clipped.
+ */
+export function parallelPixelAt(
+  pixels: ParallelAxisPixels,
+  value: number,
+): number {
+  if (pixels.factor === 0) return pixels.offset;
+  const placed = pixels.logarithmic
+    ? Math.log10(Math.max(value, pixels.floor))
+    : value;
+  return pixels.offset + placed * pixels.factor;
+}
+
+/**
+ * Where one value falls on an axis, in pixels.
+ * @param value - The value to place.
+ * @param axis - The axis it belongs to.
+ * @returns The pixel, measured from the top of the drawing area.
+ */
+export function parallelValueToY(
+  value: number,
+  axis: ParallelAxisLayout,
+): number {
+  return parallelPixelAt(axis.pixels, value);
+}
+
+/**
+ * What value a pixel on an axis stands for — the brush's direction.
+ * @param y - The pixel, measured from the top of the drawing area.
+ * @param axis - The axis it belongs to.
+ * @returns The value there, or the top of a flat axis. Zero comes back
+ * unsigned, so an interval that reaches the end of an axis never reads `-0`.
+ */
+export function parallelYToValue(y: number, axis: ParallelAxisLayout): number {
+  const { pixels, max } = axis;
+  if (pixels.factor === 0) return max;
+  const placed = (y - pixels.offset) / pixels.factor;
+  if (pixels.logarithmic) return 10 ** placed;
+  return placed === 0 ? 0 : placed;
+}
+
+function axisExtent(
+  axis: ParallelAxis,
+  count: number,
+): { min: number; max: number } {
+  const domain = axis.domain;
+  if (domain === undefined) return parallelExtent(axis.values, count);
+  return {
+    min: Math.min(domain[0], domain[1]),
+    max: Math.max(domain[0], domain[1]),
+  };
+}

package/src/parallel/core/parallelBrush.ts

@@ -0,0 +1,145 @@
+/**
+ * The brush, as arithmetic rather than as a library.
+ *
+ * Everything a vertical brush does — create by dragging on a bare axis, move
+ * the band, drag either edge, clear by pressing outside it — is four answers
+ * to one question: which part of the axis the press landed on. Written this
+ * way it is a pure function of a press and a pointer, so the whole gesture is
+ * covered by tests in a runtime with no DOM at all, which is the one thing a
+ * DOM-mutating brush could never be.
+ */
+
+import type { ParallelAxisLayout } from './parallelAxes.ts';
+import { parallelValueToY, parallelYToValue } from './parallelAxes.ts';
+import type { ParallelRange } from './parallelTypes.ts';
+
+/** A band kept on one axis, in pixels from the top of the drawing area. */
+export interface ParallelBand {
+  /** The upper edge, which is the higher value. */
+  top: number;
+  /** The lower edge, which is the lower value. */
+  bottom: number;
+}
+
+/** Which part of an axis a press landed on. */
+export type ParallelBrushGrip = 'create' | 'move' | 'top' | 'bottom';
+
+/** A drag in progress on one axis. */
+export interface ParallelBrushDrag {
+  /** The axis being brushed, by its id. */
+  axis: string;
+  /** What the press took hold of. */
+  grip: ParallelBrushGrip;
+  /** Where the press landed, in pixels from the top of the drawing area. */
+  originY: number;
+  /** The band as it stood when the press landed. */
+  origin: ParallelBand;
+}
+
+/** How close to an edge a press has to land to take hold of it, in pixels. */
+export const PARALLEL_BRUSH_HANDLE_REACH = 4;
+
+/** How tall a released band has to be to count as a band rather than a click. */
+export const PARALLEL_BRUSH_SMALLEST = 1;
+
+/** How far either side of an axis a press still reaches it, in pixels. */
+export const PARALLEL_BRUSH_HALF_WIDTH = 9;
+
+/**
+ * What a press at that height takes hold of.
+ * @param y - Where the press landed, in pixels from the top of the drawing area.
+ * @param band - The band already on that axis, or `null` when it carries none.
+ * @returns The grip. A press within {@link PARALLEL_BRUSH_HANDLE_REACH} of an
+ * edge takes that edge, a press inside the band moves it, and anything else —
+ * including a press on a bare axis — starts a new one.
+ */
+export function parallelBrushGrip(
+  y: number,
+  band: ParallelBand | null,
+): ParallelBrushGrip {
+  if (band === null) return 'create';
+  if (Math.abs(y - band.top) <= PARALLEL_BRUSH_HANDLE_REACH) return 'top';
+  if (Math.abs(y - band.bottom) <= PARALLEL_BRUSH_HANDLE_REACH) return 'bottom';
+  if (y > band.top && y < band.bottom) return 'move';
+  return 'create';
+}
+
+/**
+ * The band a drag stands at, now that the pointer is there.
+ * @param drag - The drag, as it began.
+ * @param y - Where the pointer is, in pixels from the top of the drawing area.
+ * @param height - Height of the drawing area, in pixels.
+ * @returns The band, held inside the drawing area at both ends. Dragging one
+ * edge past the other swaps them rather than inverting the band, and a band
+ * being moved keeps its height rather than being squashed against an end.
+ */
+export function parallelBandAt(
+  drag: ParallelBrushDrag,
+  y: number,
+  height: number,
+): ParallelBand {
+  const to = clamp(y, 0, height);
+  if (drag.grip === 'create') return order(drag.originY, to);
+  if (drag.grip === 'top') return order(to, drag.origin.bottom);
+  if (drag.grip === 'bottom') return order(drag.origin.top, to);
+  const shift = clamp(
+    to - drag.originY,
+    -drag.origin.top,
+    height - drag.origin.bottom,
+  );
+  return {
+    top: drag.origin.top + shift,
+    bottom: drag.origin.bottom + shift,
+  };
+}
+
+/**
+ * Whether a released band keeps anything, or was a click that clears the axis.
+ * @param band - The band, as the pointer left it.
+ * @returns Whether it is tall enough to be an interval.
+ */
+export function parallelIsBand(band: ParallelBand): boolean {
+  return band.bottom - band.top >= PARALLEL_BRUSH_SMALLEST;
+}
+
+/**
+ * Where an interval sits on its axis, in pixels.
+ * @param range - The interval, low value first.
+ * @param axis - The axis it belongs to.
+ * @returns The band.
+ */
+export function parallelBandOf(
+  range: ParallelRange,
+  axis: ParallelAxisLayout,
+): ParallelBand {
+  return order(
+    parallelValueToY(range[1], axis),
+    parallelValueToY(range[0], axis),
+  );
+}
+
+/**
+ * What interval a band keeps, in the axis's own units.
+ * @param band - The band, in pixels from the top of the drawing area.
+ * @param axis - The axis it belongs to.
+ * @returns The interval, low value first — which is the order every filter in
+ * the family reads, and getting it backwards keeps nothing at all.
+ */
+export function parallelRangeOf(
+  band: ParallelBand,
+  axis: ParallelAxisLayout,
+): ParallelRange {
+  const low = parallelYToValue(band.bottom, axis);
+  const high = parallelYToValue(band.top, axis);
+  return low <= high ? [low, high] : [high, low];
+}
+
+function order(a: number, b: number): ParallelBand {
+  return a <= b ? { top: a, bottom: b } : { top: b, bottom: a };
+}
+
+function clamp(value: number, low: number, high: number): number {
+  if (value < low) return low;
+  if (value > high) return high;
+  return value;
+}

package/src/parallel/core/parallelExtent.ts

@@ -0,0 +1,56 @@
+/**
+ * The two ends of one axis, read off its own column.
+ *
+ * Deliberately not `chartPadExtent`: a parallel-coordinates axis ends exactly
+ * on the data, because the reader compares rows against each other rather than
+ * against a round number, and the best row has to touch the top of its axis.
+ * The only opening is for a column with no spread at all, which would
+ * otherwise draw no axis and place every row on one pixel.
+ */
+
+/** How far a column with no spread at all is opened, on each side. */
+export const PARALLEL_DEGENERATE_PADDING = 0.5;
+
+/** The two ends of an axis, low first. */
+export interface ParallelExtent {
+  /** The value at the bottom of the axis. */
+  min: number;
+  /** The value at its top. */
+  max: number;
+}
+
+/**
+ * The smallest and the largest finite value of one column.
+ * @param values - The column, read in place.
+ * @param count - How many rows to read, from the start.
+ * @returns The extent. A column holding no finite value at all comes back as
+ * half a unit either side of zero, and a constant one as half a unit either
+ * side of its value, so that both still draw an axis.
+ */
+export function parallelExtent(
+  values: ArrayLike<number>,
+  count: number,
+): ParallelExtent {
+  const rows = Math.min(count, values.length);
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+  for (let row = 0; row < rows; row++) {
+    const value = values[row] as number;
+    if (!Number.isFinite(value)) continue;
+    if (value < min) min = value;
+    if (value > max) max = value;
+  }
+  if (min > max) {
+    return {
+      min: -PARALLEL_DEGENERATE_PADDING,
+      max: PARALLEL_DEGENERATE_PADDING,
+    };
+  }
+  if (min === max) {
+    return {
+      min: min - PARALLEL_DEGENERATE_PADDING,
+      max: max + PARALLEL_DEGENERATE_PADDING,
+    };
+  }
+  return { min, max };
+}