react-cheminfo 0.15.0 → 0.17.0

package/src/parallel/core/parallelTicks.ts

@@ -0,0 +1,168 @@
+/**
+ * How one axis is graduated.
+ *
+ * Five evenly spaced marks across the raw extent, not `chartAxisScale`'s nice
+ * ones: nicing moves the ends of the axis, and a figure whose whole job is to
+ * compare rows against each other must end exactly where the data does. A
+ * caller who wants round numbers asks for them with `nice`, per axis.
+ */
+
+import {
+  chartAxisScale,
+  chartTickDecimals,
+  chartTickLabel,
+} from '../../chart/core/chartAxisScale.ts';
+import { formatDecimal } from '../../format/core/numbers.ts';
+import { roundTo } from '../../format/core/roundTo.ts';
+
+import type { ParallelAxis, ParallelTick } from './parallelTypes.ts';
+
+/** How many graduations an axis carries when the caller asks for no number. */
+export const PARALLEL_TICK_COUNT = 5;
+
+/** The most decimals a graduation is ever written with. */
+const MOST_TICK_DECIMALS = 6;
+
+/** How far a label may sit from its own value: a tenth of the spacing. */
+const LABEL_TOLERANCE = 10;
+
+/** An axis's ends and the graduations written along it. */
+export interface ParallelGraduation {
+  /** The two ends of the axis, low first, after any nicing. */
+  domain: readonly [number, number];
+  /** The graduations, from the bottom of the axis to the top. */
+  ticks: readonly ParallelTick[];
+}
+
+/**
+ * The graduations of one axis, and the ends they are spread between.
+ *
+ * Three ways, in order: the caller's own list wins outright — a coded quantity
+ * reading `none`, `low`, `high` is nobody else's to invent; `nice` hands the
+ * axis to `chartAxisScale`, which rounds both ends outward to whole steps; and
+ * otherwise the extent is divided evenly and a mark whose label repeats the
+ * one below it is dropped, so an axis of whole numbers from 0 to 2 reads
+ * `0 1 2` rather than writing `1` twice.
+ * @param axis - The axis, for its formatting and how many marks it wants.
+ * @param min - The value at the bottom of the axis.
+ * @param max - The value at its top.
+ * @returns The ends and the graduations. See {@link ParallelGraduation}.
+ */
+export function parallelTicks(
+  axis: ParallelAxis,
+  min: number,
+  max: number,
+): ParallelGraduation {
+  const domain = [min, max] as const;
+  if (axis.ticks !== undefined) return { domain, ticks: axis.ticks };
+
+  const wanted = Math.max(2, Math.trunc(axis.tickCount ?? PARALLEL_TICK_COUNT));
+  if (axis.nice === true && axis.scale !== 'log') {
+    return nicedGraduation(axis, min, max, wanted);
+  }
+
+  const values = evenValues(min, max, wanted, axis.scale === 'log');
+  return { domain, ticks: labelled(values, axis.format) };
+}
+
+function nicedGraduation(
+  axis: ParallelAxis,
+  min: number,
+  max: number,
+  wanted: number,
+): ParallelGraduation {
+  const scale = chartAxisScale(min, max, { count: wanted, nice: true });
+  // Not `scale.labels`: those have a common power of ten lifted out of them,
+  // on the understanding that the caller writes it beside the axis name, and
+  // this figure writes only the name. Each graduation carries its own value.
+  const decimals = chartTickDecimals(scale.step);
+  const ticks: ParallelTick[] = [];
+  for (const value of scale.values) {
+    const label =
+      axis.format === undefined
+        ? chartTickLabel(value, decimals)
+        : axis.format(value);
+    if (ticks.at(-1)?.label === label) continue;
+    ticks.push({ value, label });
+  }
+  return { domain: scale.domain, ticks };
+}
+
+function evenValues(
+  min: number,
+  max: number,
+  wanted: number,
+  logarithmic: boolean,
+): number[] {
+  const values: number[] = [];
+  const low = logarithmic ? Math.log10(Math.max(min, smallestStep(max))) : min;
+  const high = logarithmic ? Math.log10(Math.max(max, smallestStep(max))) : max;
+  const span = high - low;
+  for (let index = 0; index < wanted; index++) {
+    const placed = low + (span * index) / (wanted - 1);
+    values.push(logarithmic ? 10 ** placed : placed);
+  }
+  return values;
+}
+
+function labelled(
+  values: readonly number[],
+  format: ((value: number) => string) | undefined,
+): ParallelTick[] {
+  const decimals = format === undefined ? tickDecimals(values) : 0;
+  const ticks: ParallelTick[] = [];
+  for (const value of values) {
+    const label =
+      format === undefined ? formatDecimal(value, decimals) : format(value);
+    if (ticks.at(-1)?.label === label) continue;
+    ticks.push({ value, label });
+  }
+  return ticks;
+}
+
+/**
+ * As many decimals as the spacing needs, and one more whenever rounding would
+ * move a mark by more than a tenth of that spacing — which is what keeps an
+ * axis from 12.3 to 157 reading `12 48 85 121 157` while one from −1.5 to 2.5
+ * still reads `−1.5 −0.5 0.5 1.5 2.5` rather than rounding both away.
+ * @param values - The graduations, in the axis's own units.
+ * @returns How many decimals each of their labels carries.
+ */
+function tickDecimals(values: readonly number[]): number {
+  const step = smallestGap(values);
+  const tolerance = step / LABEL_TOLERANCE;
+  let decimals = chartTickDecimals(step);
+  while (
+    decimals < MOST_TICK_DECIMALS &&
+    !faithful(values, decimals, tolerance)
+  ) {
+    decimals++;
+  }
+  return decimals;
+}
+
+function faithful(
+  values: readonly number[],
+  decimals: number,
+  tolerance: number,
+): boolean {
+  for (const value of values) {
+    if (Math.abs(value - roundTo(value, decimals)) > tolerance) return false;
+  }
+  return true;
+}
+
+function smallestGap(values: readonly number[]): number {
+  let smallest = Number.POSITIVE_INFINITY;
+  for (let index = 1; index < values.length; index++) {
+    const gap = Math.abs(
+      (values[index] as number) - (values[index - 1] as number),
+    );
+    if (gap > 0 && gap < smallest) smallest = gap;
+  }
+  return Number.isFinite(smallest) ? smallest : 1;
+}
+
+function smallestStep(max: number): number {
+  return max > 0 ? max * 1e-12 : 1;
+}

package/src/parallel/core/parallelTypes.ts

@@ -0,0 +1,159 @@
+/**
+ * What a parallel-coordinates figure is asked to draw: one axis per column,
+ * the intervals the reader brushed on them, and the quantity the lines are
+ * coloured by.
+ *
+ * The figure itself is index-based — every axis hands over its column as an
+ * `ArrayLike<number>` read in place — so a repaint costs an indexed read per
+ * value rather than a call. {@link parallelAxisOf} is the one place a row type
+ * is named, and it is run once per data change rather than once per repaint.
+ */
+
+import type { ColorScale } from '../../color/core/interpolate.ts';
+
+/** How a value is placed along an axis. */
+export type ParallelAxisScale = 'linear' | 'log';
+
+/** One labelled graduation a caller writes itself. */
+export interface ParallelTick {
+  /** Where it sits, in the axis's own units. */
+  value: number;
+  /** What is written beside it. */
+  label: string;
+}
+
+/** One vertical axis of a parallel-coordinates figure, and the column it draws. */
+export interface ParallelAxis {
+  /**
+   * A stable key, which is how a brushed range is reported and how a caller
+   * names the axis the colour is read from. Never an index: axes are added and
+   * reordered, and a range keyed on a position outlives the axis it belonged
+   * to.
+   */
+  id: string;
+  /** What it is called, written over the axis. */
+  label: string;
+  /**
+   * Every row's value, in the figure's row order. Read in place — nothing is
+   * copied — so a `Float64Array` is the cheapest thing to pass.
+   */
+  values: ArrayLike<number>;
+  /**
+   * The two ends of the axis, low first. Left out, they are the column's own
+   * smallest and largest finite value, and a column with no spread at all is
+   * opened by half a unit on each side so that it still draws.
+   * @default undefined — the column's own range
+   */
+  domain?: readonly [number, number];
+  /**
+   * How values are placed between the ends. `log` needs a domain whose low end
+   * is above zero; a value at or below zero is pinned to the low end.
+   * @default 'linear'
+   */
+  scale?: ParallelAxisScale;
+  /**
+   * How a tick is written. Left out, the ticks carry as many decimals as the
+   * spacing needs.
+   * @default undefined
+   */
+  format?: (value: number) => string;
+  /**
+   * The graduations, written out by the caller — what a coded quantity needs,
+   * where `0`, `1`, `2` should read `none`, `low`, `high`.
+   * @default undefined — the figure graduates the axis itself
+   */
+  ticks?: readonly ParallelTick[];
+  /**
+   * Roughly how many graduations to aim for, when the figure picks them.
+   * @default 5
+   */
+  tickCount?: number;
+  /**
+   * Whether the ends are rounded outward to whole tick steps. Off, so the axis
+   * ends exactly on the data — a reader comparing two molecules on a drug
+   * score must see the best one touch the top of its axis, not float below a
+   * round number nothing reached.
+   * @default false
+   */
+  nice?: boolean;
+  /**
+   * The unit written after the axis name, e.g. `g/mol`.
+   * @default '' — nothing is written
+   */
+  unit?: string;
+}
+
+/** An interval kept on one axis, in that axis's own units, low first. */
+export type ParallelRange = readonly [number, number];
+
+/**
+ * What one axis keeps: nothing, one interval, or several disjoint ones.
+ *
+ * A reader comparing molecules wants the light ones *and* the heavy ones, with
+ * nothing in between, which one interval cannot say. Several are read as a
+ * union — a row is kept when it falls in any of them — while the axes are
+ * still read as an intersection, so each axis narrows what the ones before it
+ * left. A bare interval means the same as a list holding only it, so a caller
+ * that only ever keeps one writes one.
+ */
+export type ParallelSelection = ParallelRange | readonly ParallelRange[] | null;
+
+/** Which rows a set of brushes keeps, keyed by axis id. */
+export type ParallelRanges = Readonly<Record<string, ParallelSelection>>;
+
+/** How the lines are coloured. */
+export interface ParallelColorBy {
+  /** The quantity read for each row, in the figure's row order. */
+  values: ArrayLike<number>;
+  /**
+   * The value at the low end of the ramp.
+   * @default the smallest finite value
+   */
+  min?: number;
+  /**
+   * The value at its high end.
+   * @default the largest finite value
+   */
+  max?: number;
+  /**
+   * The ramp, as the registry hands it over or as a plain list of colours.
+   * @default viridis — `resolveColorScale(DEFAULT_COLOR_SCALE_ID).scale`
+   */
+  scale?: ColorScale | readonly string[];
+  /**
+   * Whether the quantity is read on a base-10 logarithmic ramp.
+   * @default false
+   */
+  logarithmic?: boolean;
+}
+
+/** An axis described by the field to read off each row, rather than by its column. */
+export type ParallelAxisSource<Row> = Omit<ParallelAxis, 'values'> & {
+  /**
+   * The value this axis reads off one row. Called once per row per data
+   * change, never per repaint.
+   */
+  readonly value: (row: Row) => number;
+};
+
+/**
+ * One axis built by reading a field off each row.
+ *
+ * The one place a row type is named: the figure itself reads numbers out of a
+ * typed array, so a repaint costs an indexed read rather than a call per
+ * value. Call it inside a `useMemo` keyed on the rows.
+ * @param rows - The rows, in the order the figure will index them.
+ * @param axis - The axis, with the field to read instead of its values.
+ * @returns The axis, with its values filled in.
+ */
+export function parallelAxisOf<Row>(
+  rows: readonly Row[],
+  axis: ParallelAxisSource<Row>,
+): ParallelAxis {
+  const { value, ...rest } = axis;
+  const values = new Float64Array(rows.length);
+  for (let row = 0; row < rows.length; row++) {
+    values[row] = value(rows[row] as Row);
+  }
+  return { ...rest, values };
+}

package/src/parallel/ui/ParallelAxesLayer.tsx

@@ -0,0 +1,129 @@
+import type { ReactElement } from 'react';
+
+import type { ParallelAxisLayout } from '../core/parallelAxes.ts';
+import { PARALLEL_MARGIN, parallelValueToY } from '../core/parallelAxes.ts';
+import type { ParallelBand } from '../core/parallelBrush.ts';
+import { PARALLEL_BRUSH_HALF_WIDTH } from '../core/parallelBrush.ts';
+
+import {
+  PARALLEL_HANDLE_HEIGHT,
+  PARALLEL_TICK_LABEL_INSET,
+  PARALLEL_TICK_LABEL_STYLE,
+  PARALLEL_TICK_LENGTH,
+  parallelBandStyle,
+  parallelHandleStyle,
+} from './parallelStyles.ts';
+
+/** What {@link ParallelAxesLayer} draws. */
+export interface ParallelAxesLayerProps {
+  /** The axes, from left to right, already placed and graduated. */
+  layouts: readonly ParallelAxisLayout[];
+  /** Height of the drawing area, in pixels. */
+  innerHeight: number;
+  /** The bands each axis carries right now, the one being dragged included. */
+  bands: ReadonlyMap<string, ParallelBand[]>;
+  /** The ink the axes, their ticks and their labels are drawn in. */
+  axisInk: string;
+  /** The ink a band is filled and outlined in. */
+  bandInk: string;
+}
+
+/**
+ * The axes, their graduations and the intervals brushed on them.
+ *
+ * Every axis carries a `data-parallel-brush` rectangle over the strip a press
+ * on it reaches, which nothing points at: one surface over the whole figure
+ * takes every event, so the rectangle exists to be found — by a test driving
+ * a drag, and by a reader's eye, which is the same thing.
+ * @param props - See {@link ParallelAxesLayerProps}.
+ * @returns The axes.
+ */
+export function ParallelAxesLayer(props: ParallelAxesLayerProps): ReactElement {
+  const { layouts, innerHeight, bands, axisInk, bandInk } = props;
+  const stroke = { stroke: axisInk };
+
+  return (
+    <g
+      transform={`translate(${PARALLEL_MARGIN.left},${PARALLEL_MARGIN.top})`}
+      style={{ fill: axisInk }}
+      textAnchor="middle"
+    >
+      {layouts.map((layout) => {
+        const drawn = bands.get(layout.id);
+        return (
+          <g
+            key={layout.id}
+            className="parallel-axis"
+            data-parallel-axis={layout.id}
+            transform={`translate(${layout.x},0)`}
+          >
+            <line y2={innerHeight} style={stroke} />
+            {layout.ticks.map((tick) => (
+              <g
+                key={tick.value}
+                transform={`translate(0,${parallelValueToY(tick.value, layout)})`}
+              >
+                <line x1={-PARALLEL_TICK_LENGTH} style={stroke} />
+                <text
+                  x={-PARALLEL_TICK_LABEL_INSET}
+                  dy="0.32em"
+                  textAnchor="end"
+                  style={PARALLEL_TICK_LABEL_STYLE}
+                >
+                  {tick.label}
+                </text>
+              </g>
+            ))}
+            <rect
+              data-parallel-brush={layout.id}
+              x={-PARALLEL_BRUSH_HALF_WIDTH}
+              y={0}
+              width={PARALLEL_BRUSH_HALF_WIDTH * 2}
+              height={Math.max(0, innerHeight)}
+              fill="transparent"
+              pointerEvents="none"
+            />
+            {drawn?.map((band) => (
+              <BrushBand
+                key={`${band.top}:${band.bottom}`}
+                band={band}
+                ink={bandInk}
+              />
+            ))}
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+function BrushBand(props: { band: ParallelBand; ink: string }): ReactElement {
+  const { band, ink } = props;
+  const height = Math.max(0, band.bottom - band.top);
+  const width = PARALLEL_BRUSH_HALF_WIDTH * 2;
+  return (
+    <g className="parallel-axis-band" pointerEvents="none">
+      <rect
+        x={-PARALLEL_BRUSH_HALF_WIDTH}
+        y={band.top}
+        width={width}
+        height={height}
+        style={parallelBandStyle(ink)}
+      />
+      <rect
+        x={-PARALLEL_BRUSH_HALF_WIDTH}
+        y={band.top - PARALLEL_HANDLE_HEIGHT / 2}
+        width={width}
+        height={PARALLEL_HANDLE_HEIGHT}
+        style={parallelHandleStyle(ink)}
+      />
+      <rect
+        x={-PARALLEL_BRUSH_HALF_WIDTH}
+        y={band.bottom - PARALLEL_HANDLE_HEIGHT / 2}
+        width={width}
+        height={PARALLEL_HANDLE_HEIGHT}
+        style={parallelHandleStyle(ink)}
+      />
+    </g>
+  );
+}

package/src/parallel/ui/ParallelCoordinates.tsx

@@ -0,0 +1,252 @@
+import type { ReactElement } from 'react';
+import { useMemo, useState } from 'react';
+
+import { OverlayLayer } from '../../overlay/ui/OverlayLayer.tsx';
+import { joinClassNames } from '../../shared/ui/joinClassNames.ts';
+import { PARALLEL_MARGIN, parallelAxisLayouts } from '../core/parallelAxes.ts';
+import { parallelIncludedMask } from '../core/parallelFilter.ts';
+import {
+  parallelColorSteps,
+  parallelPalette,
+} from '../core/parallelPalette.ts';
+import type {
+  ParallelAxis,
+  ParallelRange,
+  ParallelRanges,
+} from '../core/parallelTypes.ts';
+
+import { ParallelAxesLayer } from './ParallelAxesLayer.tsx';
+import { ParallelLabels } from './ParallelLabels.tsx';
+import { ParallelTooltip } from './ParallelTooltip.tsx';
+import type { ParallelCoordinatesProps } from './parallelCoordinatesProps.ts';
+import { useParallelInk } from './parallelInk.ts';
+import {
+  parallelColorOf,
+  parallelFigureLabel,
+  parallelHighlightsOf,
+  parallelIsBrushed,
+  parallelRowCount,
+} from './parallelPlotModel.ts';
+import {
+  PARALLEL_SVG_STYLE,
+  parallelCanvasStyle,
+  parallelDropMarkStyle,
+  parallelFigureStyle,
+} from './parallelStyles.ts';
+import { useParallelAxisDrag } from './useParallelAxisDrag.ts';
+import { useParallelCanvas } from './useParallelCanvas.ts';
+import { useParallelGesture } from './useParallelGesture.ts';
+
+/** Height the figure takes when the caller names none. */
+const DEFAULT_HEIGHT = 320;
+
+/** The smallest drawing area the figure will lay out, in pixels. */
+const SMALLEST_SIDE = 10;
+
+/** No axis is brushed, shared so an uncontrolled figure never rebuilds it. */
+const NO_RANGES: ParallelRanges = Object.freeze({});
+
+/**
+ * One vertical axis per column, one line per row, and a brush on every axis.
+ *
+ * It is told nothing about what the rows are: a library of molecules, a set of
+ * runs and a table of measurements all arrive as one `ArrayLike<number>` per
+ * axis, read in place. The lines are painted into a canvas because ten
+ * thousand of them are not ten thousand elements; everything the reader points
+ * at, brushes or reads is SVG and HTML over the top.
+ *
+ * The brush reports on release, never while the band is being dragged, so a
+ * table filtering on the same intervals re-renders once per gesture. What it
+ * keeps is `parallelIncludedMask`, which that table should filter with — two
+ * definitions of "kept" is how a figure and the list under it come to disagree.
+ * @param props - See {@link ParallelCoordinatesProps}.
+ * @returns The figure, or what the caller asked to show in its place when
+ * there is nothing to draw.
+ */
+export function ParallelCoordinates(
+  props: ParallelCoordinatesProps,
+): ReactElement {
+  const { axes, width, height = DEFAULT_HEIGHT, empty, overlay } = props;
+  const { selected, renderTooltip, renderAxisLabel } = props;
+  const { className, testId, ink: inkProp, label: given } = props;
+  const { ranges: ownedRanges, defaultRanges, included: givenMask } = props;
+  const { color: givenColor, colorAxis, onRangeChange: report } = props;
+  const { onRangePreview, hovered, onHoverChange, onRowClick } = props;
+  const { several = false, onAxisOrder } = props;
+  const count = parallelRowCount(axes, props.count);
+  const innerWidth = Math.max(
+    width - PARALLEL_MARGIN.left - PARALLEL_MARGIN.right,
+    SMALLEST_SIDE,
+  );
+  const innerHeight = Math.max(
+    height - PARALLEL_MARGIN.top - PARALLEL_MARGIN.bottom,
+    SMALLEST_SIDE,
+  );
+
+  const [ownRanges, setOwnRanges] = useState<ParallelRanges>(
+    defaultRanges ?? NO_RANGES,
+  );
+  const ranges = ownedRanges ?? ownRanges;
+
+  const layouts = useMemo(
+    () => parallelAxisLayouts(axes, count, innerWidth, innerHeight),
+    [axes, count, innerWidth, innerHeight],
+  );
+  const values = useMemo(() => columnsOf(axes), [axes]);
+  const { ink, ref: figure } = useParallelInk(inkProp);
+  const color = useMemo(
+    () => parallelColorOf(givenColor, colorAxis, axes),
+    [givenColor, colorAxis, axes],
+  );
+  const steps = useMemo(
+    () => (color === undefined ? null : parallelColorSteps(color, count)),
+    [color, count],
+  );
+  const palette = useMemo(
+    () => (color === undefined ? [] : parallelPalette(color.scale)),
+    [color],
+  );
+  const included = useMemo(() => {
+    if (givenMask !== undefined) return givenMask;
+    if (!parallelIsBrushed(axes, ranges)) return null;
+    return parallelIncludedMask(axes, ranges, count);
+  }, [givenMask, axes, ranges, count]);
+
+  function commitRange(axisId: string, kept: readonly ParallelRange[]): void {
+    if (ownedRanges === undefined) {
+      setOwnRanges((previous) => ({ ...previous, [axisId]: kept }));
+    }
+    report?.(axisId, kept);
+  }
+
+  const gesture = useParallelGesture({
+    layouts,
+    values,
+    count,
+    innerHeight,
+    included,
+    ranges,
+    several,
+    onRangeChange: commitRange,
+    onRangePreview,
+    hovered,
+    onHoverChange,
+    onRowClick,
+  });
+
+  const highlights = useMemo(
+    () =>
+      parallelHighlightsOf(selected, gesture.hovered, ink.selection, ink.hover),
+    [selected, gesture.hovered, ink.selection, ink.hover],
+  );
+  const { lines: lineCanvas, marks: markCanvas } = useParallelCanvas({
+    width,
+    height,
+    layouts,
+    values,
+    count,
+    included,
+    steps,
+    palette,
+    highlights,
+    ink,
+  });
+
+  const axisDrag = useParallelAxisDrag({ layouts, onAxisOrder });
+  const dropAt =
+    axisDrag.active === null ? undefined : layouts[axisDrag.active.to];
+
+  const label = given ?? parallelFigureLabel(axes, count);
+  const canvasStyle = parallelCanvasStyle(height);
+  const hover =
+    gesture.pointer === null || gesture.hovered < 0
+      ? null
+      : { index: gesture.hovered, ...gesture.pointer };
+
+  return (
+    <div
+      ref={figure}
+      className={joinClassNames('parallel-coordinates', className)}
+      style={parallelFigureStyle(height)}
+      data-testid={testId}
+    >
+      {count === 0 || layouts.length === 0 ? (
+        empty
+      ) : (
+        <>
+          <canvas
+            ref={lineCanvas}
+            className="parallel-coordinates-canvas"
+            style={canvasStyle}
+          />
+          <canvas
+            ref={markCanvas}
+            className="parallel-coordinates-canvas"
+            style={canvasStyle}
+          />
+          <svg
+            width={Math.max(0, width)}
+            height={Math.max(0, height)}
+            style={PARALLEL_SVG_STYLE}
+            role="img"
+            aria-label={label}
+          >
+            <ParallelAxesLayer
+              layouts={layouts}
+              innerHeight={innerHeight}
+              bands={gesture.bands}
+              axisInk={ink.axis}
+              bandInk={ink.selection}
+            />
+            <rect
+              x={0}
+              y={0}
+              width={Math.max(0, width)}
+              height={Math.max(0, height)}
+              fill="transparent"
+              onClick={gesture.onClick}
+              {...gesture.surface}
+            />
+            {dropAt === undefined ? null : (
+              <line
+                data-parallel-drop={dropAt.id}
+                x1={PARALLEL_MARGIN.left + dropAt.x}
+                x2={PARALLEL_MARGIN.left + dropAt.x}
+                y1={PARALLEL_MARGIN.top}
+                y2={PARALLEL_MARGIN.top + innerHeight}
+                style={parallelDropMarkStyle(ink.selection)}
+              />
+            )}
+          </svg>
+          <ParallelLabels
+            axes={axes}
+            layouts={layouts}
+            render={renderAxisLabel}
+            drag={axisDrag}
+          />
+          {hover === null || renderTooltip === undefined ? null : (
+            <ParallelTooltip
+              x={hover.x}
+              y={hover.y}
+              boxWidth={width}
+              boxHeight={height}
+            >
+              {renderTooltip(hover)}
+            </ParallelTooltip>
+          )}
+        </>
+      )}
+      {overlay === undefined ? null : (
+        <OverlayLayer width={width} busy={gesture.brushing}>
+          {overlay}
+        </OverlayLayer>
+      )}
+    </div>
+  );
+}
+
+function columnsOf(axes: readonly ParallelAxis[]): Array<ArrayLike<number>> {
+  const columns: Array<ArrayLike<number>> = [];
+  for (const axis of axes) columns.push(axis.values);
+  return columns;
+}