react-cheminfo 0.9.0 → 0.11.0

package/lib/scatter/ui/ScatterEllipseLayer.d.ts

@@ -0,0 +1,69 @@
+import type { ReactElement } from 'react';
+import type { ChartScale } from '../../chart/core/chartScale.ts';
+import type { EllipseSize } from '../core/confidenceEllipse.ts';
+/** What {@link ScatterEllipseLayer} needs. */
+export interface ScatterEllipseLayerProps {
+    /** Horizontal coordinate of every point, in data units. */
+    x: ArrayLike<number>;
+    /** Vertical coordinate of every point, in the same order. */
+    y: ArrayLike<number>;
+    /**
+     * Which group each point belongs to, as an index into `colors`. A point with
+     * `-1`, or an index outside the range, is left out of every outline.
+     */
+    groupOf: ArrayLike<number>;
+    /** The colour of each group, in group order. */
+    colors: readonly string[];
+    /** Data to pixels, horizontally. */
+    scaleX: ChartScale;
+    /** Data to pixels, vertically; its `factor` is negative. */
+    scaleY: ChartScale;
+    /**
+     * How much of each group its outline holds.
+     * @default { kind: 'coverage', probability: 0.95 }
+     */
+    size?: EllipseSize;
+    /**
+     * How many points a group needs before it is outlined at all. Below it the
+     * shape says more about the sample than about the group.
+     * @default 3
+     */
+    minimumPoints?: number;
+    /**
+     * How strongly each outline is drawn, in group order.
+     * @default undefined — every outline is drawn at full strength
+     */
+    opacities?: readonly number[];
+    /**
+     * How solid each region is; `0` draws nothing at all, since the fill is the
+     * whole outline. Turn it down when many groups overlap, since the fills
+     * compound.
+     * @default SCATTER_OUTLINE_FILL_OPACITY
+     */
+    fillOpacity?: number;
+    /**
+     * Called with the groups too small to outline, as indices into `colors`,
+     * whenever that set changes. An outline that quietly fails to appear reads
+     * as a bug in the plot, so the caller is handed what its caption has to
+     * account for.
+     * @default undefined
+     */
+    onSkippedGroups?: (groups: readonly number[]) => void;
+}
+/**
+ * One outline per group, drawn through both scales.
+ *
+ * The outline is measured in the data's own units and drawn in pixels, and the
+ * two axes almost never carry the same number of units per pixel — so scaling
+ * the two radii and keeping the data-space angle would draw an ellipse of the
+ * wrong shape at the wrong tilt. `scatterOutlineShape` transforms the spread
+ * first and decomposes it after, which is exact on a linear axis.
+ *
+ * The outlines are drawn under the dots, which is what lets the region be
+ * filled at all: the fill says where a group sits without taking the dots the
+ * reader is there to count.
+ * @param props - See {@link ScatterEllipseLayerProps}.
+ * @returns The outlines.
+ */
+export declare const ScatterEllipseLayer: import("react").MemoExoticComponent<(props: ScatterEllipseLayerProps) => ReactElement>;
+//# sourceMappingURL=ScatterEllipseLayer.d.ts.map

package/lib/scatter/ui/ScatterEllipseLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterEllipseLayer.d.ts","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterEllipseLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAK9E,8CAA8C;AAC9C,MAAM,WAAW,wBAAwB;IACvC,2DAA2D;IAC3D,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACrB,6DAA6D;IAC7D,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACrB;;;OAGG;IACH,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3B,gDAAgD;IAChD,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;IAC1B,oCAAoC;IACpC,MAAM,EAAE,UAAU,CAAC;IACnB,4DAA4D;IAC5D,MAAM,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,KAAK,IAAI,CAAC;CACvD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,mBAAmB,8CACvB,wBAAwB,KAC9B,YAAY,CAiCb,CAAC"}

package/lib/scatter/ui/ScatterEllipseLayer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from 'react';
+import { confidenceEllipse } from "../core/confidenceEllipse.js";
+import { scatterOutlineShape } from "./scatterOutlineShape.js";
+/**
+ * One outline per group, drawn through both scales.
+ *
+ * The outline is measured in the data's own units and drawn in pixels, and the
+ * two axes almost never carry the same number of units per pixel — so scaling
+ * the two radii and keeping the data-space angle would draw an ellipse of the
+ * wrong shape at the wrong tilt. `scatterOutlineShape` transforms the spread
+ * first and decomposes it after, which is exact on a linear axis.
+ *
+ * The outlines are drawn under the dots, which is what lets the region be
+ * filled at all: the fill says where a group sits without taking the dots the
+ * reader is there to count.
+ * @param props - See {@link ScatterEllipseLayerProps}.
+ * @returns The outlines.
+ */
+export const ScatterEllipseLayer = memo(function ScatterEllipseLayer(props) {
+    const { x, y, groupOf, colors, scaleX, scaleY, size = DEFAULT_SIZE, minimumPoints = 3, opacities, fillOpacity, onSkippedGroups, } = props;
+    const clouds = groupClouds(x, y, groupOf, colors.length);
+    const outlines = [];
+    const skipped = [];
+    for (let group = 0; group < clouds.length; group++) {
+        const color = colors[group];
+        const cloud = clouds[group];
+        if (color === undefined || cloud === undefined)
+            continue;
+        const measured = confidenceEllipse(cloud, { size, minimumPoints });
+        if (measured === null) {
+            skipped.push(group);
+            continue;
+        }
+        const ink = { color, opacity: opacities?.[group], fillOpacity };
+        outlines.push(scatterOutlineShape(group, measured, scaleX, scaleY, ink));
+    }
+    useSkippedReport(skipped, onSkippedGroups);
+    return _jsx("g", { "data-layer": "ellipses", children: outlines });
+});
+/** What a group is outlined at when the caller says nothing. */
+const DEFAULT_SIZE = { kind: 'coverage', probability: 0.95 };
+/* Each group's points, gathered once so every group is measured in one pass. */
+function groupClouds(x, y, groupOf, groups) {
+    const clouds = new Array(groups);
+    for (let group = 0; group < groups; group++)
+        clouds[group] = [];
+    const total = Math.min(x.length, y.length, groupOf.length);
+    for (let index = 0; index < total; index++) {
+        const group = groupOf[index];
+        if (group === undefined || group < 0 || group >= groups)
+            continue;
+        const px = x[index];
+        const py = y[index];
+        if (px === undefined || py === undefined)
+            continue;
+        clouds[group]?.push({ x: px, y: py });
+    }
+    return clouds;
+}
+/*
+ * Report the skipped groups once each time the set changes. A fresh array is
+ * built every render, so it is the joined indices that are compared and not
+ * the array, which is what keeps a caller storing the answer from re-rendering
+ * for ever.
+ */
+function useSkippedReport(skipped, report) {
+    const last = useRef('');
+    const key = skipped.join(' ');
+    useEffect(() => {
+        if (last.current === key)
+            return;
+        last.current = key;
+        report?.(skipped);
+    });
+}
+//# sourceMappingURL=ScatterEllipseLayer.js.map

package/lib/scatter/ui/ScatterEllipseLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterEllipseLayer.js","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterEllipseLayer.tsx"],"names":[],"mappings":"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"}

package/lib/scatter/ui/ScatterLabelLayer.d.ts

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+import type { PlacedScatterLabel } from './scatterLabelPlacement.ts';
+/** What {@link ScatterLabelLayer} draws. */
+export interface ScatterLabelLayerProps {
+    /** The words and where they go, from `placeScatterLabels`. */
+    labels: readonly PlacedScatterLabel[];
+    /**
+     * Radius of the dot a label stands beside, which a line back to it starts
+     * clear of.
+     * @default 3.5
+     */
+    radius?: number;
+    /**
+     * Whether the words are set in the heavier weight, for a group's name over
+     * its own crowd rather than a sample's name beside one dot.
+     * @default false
+     */
+    strong?: boolean;
+}
+/**
+ * The words written on a cloud of points.
+ *
+ * Every label is drawn twice over: once in the page's own background as a
+ * thick stroke and once in its colour as a fill. Without that halo a name
+ * landing on a crowd of dots is unreadable exactly where a reader most wants
+ * to read it, and the alternatives — a solid box behind each word, or moving
+ * the words off the data — either hide the dots the label is about or break
+ * the link between the two.
+ *
+ * A word that had to be pushed clear of another word gets a thin line back to
+ * what it names; the lines are drawn first so every halo cuts through them,
+ * which is what keeps a line from striking through the word it arrives at.
+ *
+ * The layer carries no event handler and no state, like every other layer of
+ * the plot: the gestures land on one transparent rectangle above it.
+ * @param props - See {@link ScatterLabelLayerProps}.
+ * @returns The words.
+ */
+export declare const ScatterLabelLayer: import("react").MemoExoticComponent<(props: ScatterLabelLayerProps) => ReactElement>;
+//# sourceMappingURL=ScatterLabelLayer.d.ts.map

package/lib/scatter/ui/ScatterLabelLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterLabelLayer.d.ts","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterLabelLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAErE,4CAA4C;AAC5C,MAAM,WAAW,sBAAsB;IACrC,8DAA8D;IAC9D,MAAM,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACtC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,iBAAiB,8CACrB,sBAAsB,KAC5B,YAAY,CA+Cb,CAAC"}

package/lib/scatter/ui/ScatterLabelLayer.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { SCATTER_GROUP_LABEL_SIZE, SCATTER_LABEL_SIZE, } from "./scatterLabelBoxes.js";
+/**
+ * The words written on a cloud of points.
+ *
+ * Every label is drawn twice over: once in the page's own background as a
+ * thick stroke and once in its colour as a fill. Without that halo a name
+ * landing on a crowd of dots is unreadable exactly where a reader most wants
+ * to read it, and the alternatives — a solid box behind each word, or moving
+ * the words off the data — either hide the dots the label is about or break
+ * the link between the two.
+ *
+ * A word that had to be pushed clear of another word gets a thin line back to
+ * what it names; the lines are drawn first so every halo cuts through them,
+ * which is what keeps a line from striking through the word it arrives at.
+ *
+ * The layer carries no event handler and no state, like every other layer of
+ * the plot: the gestures land on one transparent rectangle above it.
+ * @param props - See {@link ScatterLabelLayerProps}.
+ * @returns The words.
+ */
+export const ScatterLabelLayer = memo(function ScatterLabelLayer(props) {
+    const { labels, radius = 3.5, strong = false } = props;
+    const lines = [];
+    const written = [];
+    for (let index = 0; index < labels.length; index++) {
+        const label = labels[index];
+        if (label === undefined)
+            continue;
+        const leader = label.leader;
+        if (leader !== undefined) {
+            const across = leader.x - label.x;
+            const down = leader.y - label.y;
+            const away = Math.hypot(across, down);
+            const start = Math.min((radius + LEADER_GAP) / away, 1);
+            lines.push(_jsx("line", { x1: round(label.x + across * start), y1: round(label.y + down * start), x2: round(leader.x), y2: round(leader.y), stroke: label.color, ...LEADER_STYLE }, index));
+        }
+        written.push(_jsx("text", { x: round(label.textX), y: round(label.textY), fill: label.color, textAnchor: label.anchor, dominantBaseline: "middle", style: strong ? STRONG_LABEL_STYLE : LABEL_STYLE, children: label.text }, index));
+    }
+    return (_jsxs("g", { "data-layer": "labels", paintOrder: "stroke", stroke: "var(--surface)", children: [lines, written] }));
+});
+/** How far a line back to a dot starts clear of that dot. */
+const LEADER_GAP = 2;
+/**
+ * The line from a word to what it names. Thin and faint: it is a pointer and
+ * not a reading, and drawn at full strength forty of them read as data.
+ */
+const LEADER_STYLE = {
+    strokeWidth: 0.75,
+    strokeOpacity: 0.55,
+    fill: 'none',
+};
+/**
+ * A sample's own name. Small, because there is one per dot and the map is the
+ * thing being read; the halo is what makes it legible rather than the size.
+ */
+const LABEL_STYLE = {
+    fontSize: SCATTER_LABEL_SIZE,
+    strokeWidth: 3,
+    strokeLinejoin: 'round',
+    userSelect: 'none',
+};
+/** A group's name, which stands over a crowd and has to win against it. */
+const STRONG_LABEL_STYLE = {
+    fontSize: SCATTER_GROUP_LABEL_SIZE,
+    fontWeight: 600,
+    strokeWidth: 3.5,
+    strokeLinejoin: 'round',
+    userSelect: 'none',
+};
+/*
+ * Two decimals, which is under a tenth of a device pixel at any zoom a browser
+ * offers and keeps the markup short enough to read in a failing test.
+ */
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ScatterLabelLayer.js.map

package/lib/scatter/ui/ScatterLabelLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterLabelLayer.js","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterLabelLayer.tsx"],"names":[],"mappings":"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"}

package/lib/scatter/ui/ScatterMarkLayer.d.ts

@@ -0,0 +1,68 @@
+import type { ReactElement } from 'react';
+import type { ScreenPoints } from '../core/screenPoints.ts';
+import type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
+export type { ScatterPixelMark } from './scatterMarkGlyph.tsx';
+/** What {@link ScatterMarkLayer} draws. */
+export interface ScatterMarkLayerProps {
+    /** Where every point sits, in the frame's pixels. */
+    points: ScreenPoints;
+    /**
+     * One entry per point, a non-zero entry meaning selected.
+     * @default undefined — nothing is ringed
+     */
+    selected?: Uint8Array;
+    /**
+     * The point under the pointer, or `-1`.
+     * @default -1
+     */
+    hovered?: number;
+    /**
+     * The point the keyboard cursor is on, or `-1`.
+     * @default -1
+     */
+    focused?: number;
+    /**
+     * Radius of a dot in the layer below, which every ring is measured out from.
+     * @default 3.5
+     */
+    radius?: number;
+    /**
+     * Which group each point belongs to; only the group averages read it.
+     * @default undefined — no average can be worked out
+     */
+    groupOf?: ArrayLike<number>;
+    /**
+     * The colour of each group, in group order.
+     * @default undefined
+     */
+    colors?: readonly string[];
+    /**
+     * Whether each group's average is marked with a cross. A sample far from its
+     * own cross is the one the grouping fits worst.
+     * @default false
+     */
+    showGroupMeans?: boolean;
+    /**
+     * Points drawn over the cloud that are not samples — a cluster centre.
+     * @default undefined
+     */
+    marks?: readonly ScatterPixelMark[];
+    /**
+     * Side of the square a mark is drawn in, in pixels.
+     * @default 11
+     */
+    markSize?: number;
+}
+/**
+ * The rings, the group averages and the marks that sit over the cloud.
+ *
+ * Selection is a ring and never a change of colour: a dot's colour is the one
+ * thing the reader came for, and recolouring it to say "chosen" trades the
+ * answer for the question. The pointer's ring sits wider and heavier and the
+ * keyboard cursor's is wider again and dashed, so a reader driving the plot by
+ * keyboard while the mouse rests on it can still tell the three apart.
+ * @param props - See {@link ScatterMarkLayerProps}.
+ * @returns The rings and marks.
+ */
+export declare function ScatterMarkLayer(props: ScatterMarkLayerProps): ReactElement;
+//# sourceMappingURL=ScatterMarkLayer.d.ts.map

package/lib/scatter/ui/ScatterMarkLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterMarkLayer.d.ts","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterMarkLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG/D,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,2CAA2C;AAC3C,MAAM,WAAW,qBAAqB;IACpC,qDAAqD;IACrD,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA+B3E"}

package/lib/scatter/ui/ScatterMarkLayer.js

@@ -0,0 +1,134 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { markGlyph } from "./scatterMarkGlyph.js";
+/**
+ * The rings, the group averages and the marks that sit over the cloud.
+ *
+ * Selection is a ring and never a change of colour: a dot's colour is the one
+ * thing the reader came for, and recolouring it to say "chosen" trades the
+ * answer for the question. The pointer's ring sits wider and heavier and the
+ * keyboard cursor's is wider again and dashed, so a reader driving the plot by
+ * keyboard while the mouse rests on it can still tell the three apart.
+ * @param props - See {@link ScatterMarkLayerProps}.
+ * @returns The rings and marks.
+ */
+export function ScatterMarkLayer(props) {
+    const { points, selected, hovered = -1, focused = -1, radius = 3.5, groupOf, colors, showGroupMeans = false, marks, markSize = 11, } = props;
+    const glyphs = showGroupMeans
+        ? groupMeanGlyphs(points, groupOf, colors, markSize)
+        : [];
+    const laid = marks?.length ?? 0;
+    for (let index = 0; index < laid; index++) {
+        const mark = marks?.[index];
+        if (mark !== undefined)
+            glyphs.push(markGlyph(mark, markSize, `k${index}`));
+    }
+    return (_jsxs("g", { "data-layer": "marks", strokeWidth: 2.2, strokeLinecap: "round", children: [selectionRings(points, selected, radius), ring(points, hovered, radius + GAPS.hover, 'hover', 2), ring(points, focused, radius + GAPS.focus, 'focus', 1, '2 2'), glyphs] }));
+}
+/**
+ * How far outside the dot each ring sits: tight for a selection, clear of that
+ * for the pointer, clear of both for a cursor that can land where it already is.
+ */
+const GAPS = { selection: 2.5, hover: 5.5, focus: 8.5 };
+const RING_STYLE = { fill: 'none', stroke: 'var(--accent)' };
+const SELECTION_WIDTH = 1.5;
+/**
+ * A ring around every selected point, keyed by the point it rings.
+ *
+ * The rings are built here rather than one component per point: a lasso over a
+ * crowd selects thousands at once, and a component call per ring is the cost
+ * this layer exists to avoid.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param selected - One entry per point, a non-zero entry meaning selected.
+ * @param radius - Radius of a dot in the layer below.
+ * @returns One ring per selected point that has somewhere to be drawn.
+ */
+function selectionRings(points, selected, radius) {
+    const rings = [];
+    if (selected === undefined)
+        return rings;
+    const count = Math.min(points.x.length, points.y.length, selected.length);
+    for (let index = 0; index < count; index++) {
+        if (selected[index] === 0)
+            continue;
+        const x = points.x[index];
+        const y = points.y[index];
+        if (x === undefined || !Number.isFinite(x))
+            continue;
+        if (y === undefined || !Number.isFinite(y))
+            continue;
+        rings.push(_jsx("circle", { "data-ring": "select", cx: round(x), cy: round(y), r: radius + GAPS.selection, strokeWidth: SELECTION_WIDTH, ...RING_STYLE }, index));
+    }
+    return rings;
+}
+/**
+ * The one ring that says where the pointer or the keyboard cursor is.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param index - The point to ring, or `-1` for none.
+ * @param radius - Radius of the ring itself, in pixels.
+ * @param kind - What the ring is saying, as its `data-ring` attribute.
+ * @param width - How heavily it is drawn.
+ * @param dashes - Its `stroke-dasharray`, for a cursor that must read as one.
+ * @returns The ring, or `null` when there is no point to draw it on.
+ */
+function ring(points, index, radius, kind, width, dashes) {
+    if (index < 0)
+        return null;
+    const x = points.x[index];
+    const y = points.y[index];
+    if (x === undefined || !Number.isFinite(x))
+        return null;
+    if (y === undefined || !Number.isFinite(y))
+        return null;
+    return (_jsx("circle", { "data-ring": kind, cx: round(x), cy: round(y), r: radius, strokeWidth: width, strokeDasharray: dashes, ...RING_STYLE }));
+}
+/**
+ * A cross at each group's average, in the group's own colour.
+ * @param points - Where every point sits, in the frame's pixels.
+ * @param groupOf - Which group each point belongs to.
+ * @param colors - The colour of each group, in group order.
+ * @param size - Side of the square a cross is drawn in, in pixels.
+ * @returns One cross per group that anything belongs to.
+ */
+function groupMeanGlyphs(points, groupOf, colors, size) {
+    const glyphs = [];
+    if (groupOf === undefined || colors === undefined)
+        return glyphs;
+    const sums = groupMeans(points, groupOf, colors.length);
+    for (let group = 0; group < colors.length; group++) {
+        const seen = sums[group * 3 + 2] ?? 0;
+        const color = colors[group];
+        if (seen === 0 || color === undefined)
+            continue;
+        const x = (sums[group * 3] ?? 0) / seen;
+        const y = (sums[group * 3 + 1] ?? 0) / seen;
+        const at = { label: 'Group average', x, y, color };
+        glyphs.push(markGlyph(at, size, `m${group}`));
+    }
+    return glyphs;
+}
+/*
+ * Each group's running total, as `x`, `y` and how many landed in it. Averaging
+ * pixels is the same answer as averaging data values on a linear axis and one
+ * pass fewer; one flat array costs nothing for a group nobody belongs to.
+ */
+function groupMeans(points, groupOf, groups) {
+    const sums = new Float64Array(groups * 3);
+    const total = Math.min(points.x.length, points.y.length, groupOf.length);
+    for (let index = 0; index < total; index++) {
+        const group = groupOf[index];
+        if (group === undefined || group < 0 || group >= groups)
+            continue;
+        const x = points.x[index];
+        const y = points.y[index];
+        if (x === undefined || !Number.isFinite(x))
+            continue;
+        if (y === undefined || !Number.isFinite(y))
+            continue;
+        sums[group * 3] = (sums[group * 3] ?? 0) + x;
+        sums[group * 3 + 1] = (sums[group * 3 + 1] ?? 0) + y;
+        sums[group * 3 + 2] = (sums[group * 3 + 2] ?? 0) + 1;
+    }
+    return sums;
+}
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ScatterMarkLayer.js.map

package/lib/scatter/ui/ScatterMarkLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterMarkLayer.js","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterMarkLayer.tsx"],"names":[],"mappings":"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"}

package/lib/scatter/ui/ScatterMatrix.d.ts

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import type { ScatterMatrixProps } from './scatterMatrixProps.ts';
+export type { ScatterMatrixAxis, ScatterMatrixProps, } from './scatterMatrixProps.ts';
+/**
+ * The same map drawn for every pair of axes, sharing one scale per axis.
+ *
+ * The diagonal draws the axis' own distribution split by group rather than the
+ * line `y = x`: that line is identical in every grid ever drawn, says nothing
+ * about the data, and reads to an end user as a correlation, which is the
+ * opposite of what orthogonal axes are. The distribution answers the question
+ * the reader actually has — does this component separate my groups on its own?
+ *
+ * Every group is measured once over every laid-out axis rather than once per
+ * cell, so six components cost one pass over the scores and not thirty-six.
+ * @param props - See {@link ScatterMatrixProps}.
+ * @returns The grid.
+ */
+export declare function ScatterMatrix(props: ScatterMatrixProps): ReactElement;
+//# sourceMappingURL=ScatterMatrix.d.ts.map

package/lib/scatter/ui/ScatterMatrix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterMatrix.d.ts","sourceRoot":"","sources":["../../../src/scatter/ui/ScatterMatrix.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAwBzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAiHrE"}

package/lib/scatter/ui/ScatterMatrix.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { chartBinCounts } from "../../chart/core/chartBins.js";
+import { chartColumnExtent } from "../../chart/core/chartExtent.js";
+import { OverlayLayer } from "../../overlay/ui/OverlayLayer.js";
+import { scatterSelectionMask } from "../core/scatterSelection.js";
+import { ScatterMatrixCell } from "./ScatterMatrixCell.js";
+import { scatterGroupSpread } from "./scatterGroupSpread.js";
+import { SCATTER_MATRIX_GAP as GAP, SCATTER_MATRIX_MARGINS as MARGINS, SCATTER_MATRIX_MOST_AXES, SCATTER_MATRIX_ROOM as ROOM, SCATTER_MATRIX_SMALLEST_OUTLINE, SCATTER_MATRIX_SMALLEST_PLOT, scatterMatrixAxesThatFit, scatterMatrixPlotSide, } from "./scatterMatrixLayout.js";
+/**
+ * The same map drawn for every pair of axes, sharing one scale per axis.
+ *
+ * The diagonal draws the axis' own distribution split by group rather than the
+ * line `y = x`: that line is identical in every grid ever drawn, says nothing
+ * about the data, and reads to an end user as a correlation, which is the
+ * opposite of what orthogonal axes are. The distribution answers the question
+ * the reader actually has — does this component separate my groups on its own?
+ *
+ * Every group is measured once over every laid-out axis rather than once per
+ * cell, so six components cost one pass over the scores and not thirty-six.
+ * @param props - See {@link ScatterMatrixProps}.
+ * @returns The grid.
+ */
+export function ScatterMatrix(props) {
+    const { scores, axes, width, groupOf, groups, selected } = props;
+    const { overlay, testId, onSelectPair, onHoverChange } = props;
+    const { bins = DEFAULT_BINS, pointRadius = DEFAULT_RADIUS } = props;
+    const { ellipse = DEFAULT_ELLIPSE, ellipseMinimumPoints = 3 } = props;
+    const { count = Math.min(SCATTER_MATRIX_MOST_AXES, axes.length) } = props;
+    const wanted = Math.min(count, axes.length, scores.columns);
+    const shown = scatterMatrixAxesThatFit(width, wanted);
+    const side = Math.max(SCATTER_MATRIX_SMALLEST_PLOT, scatterMatrixPlotSide(width, shown));
+    const shape = useMemo(() => {
+        const series = groups?.length ?? 1;
+        const extents = [];
+        const spread = [];
+        for (let axis = 0; axis < shown; axis++) {
+            const over = chartColumnExtent(scores, axis, { padding: EXTENT_PADDING });
+            extents.push(over);
+            spread.push(chartBinCounts(scores, axis, over, bins, groupOf ?? null, series));
+        }
+        return { extents, spread };
+    }, [scores, shown, bins, groupOf, groups]);
+    const colors = useMemo(() => {
+        if (groups === undefined)
+            return undefined;
+        const inks = [];
+        for (const group of groups)
+            inks.push(group.color);
+        return inks;
+    }, [groups]);
+    // Nothing is measured for a grid that will not draw the answer: no groups,
+    // outlines turned off, or cells too small to hold one legibly.
+    const outlined = ellipse !== null &&
+        groupOf !== undefined &&
+        (groups?.length ?? 0) > 0 &&
+        side >= SCATTER_MATRIX_SMALLEST_OUTLINE;
+    const groupSpread = useMemo(() => {
+        if (!outlined || groupOf === undefined || ellipse === null) {
+            return undefined;
+        }
+        return scatterGroupSpread({
+            scores,
+            groupOf,
+            groups: groups?.length ?? 0,
+            axes: shown,
+            size: ellipse,
+            minimumPoints: ellipseMinimumPoints,
+        });
+    }, [outlined, scores, groupOf, groups, shown, ellipse, ellipseMinimumPoints]);
+    // An empty selection is not a selection. Dimming exists to set what the
+    // reader picked against what they did not, so with nothing picked there is
+    // nothing to set it against, and dimming every dot would leave the grid
+    // looking blank rather than looking unselected.
+    const mask = useMemo(() => {
+        if (selected === undefined)
+            return undefined;
+        const built = scatterSelectionMask(selected, scores.rows);
+        return built.includes(1) ? built : undefined;
+    }, [selected, scores]);
+    const grid = {
+        ...props,
+        ...shape,
+        shown,
+        side,
+        room: ROOM,
+        colors,
+        groupOf,
+        groupSpread,
+        mask,
+        pointRadius,
+        onSelectPair,
+        onHoverChange,
+    };
+    const cells = [];
+    for (let row = 0; row < shown; row++) {
+        for (let column = 0; column < shown; column++) {
+            cells.push(_jsx(ScatterMatrixCell, { grid: grid, row: row, column: column }, `${column}-${row}`));
+        }
+    }
+    const rest = Math.max(0, shown - 1);
+    const inner = `${side + MARGINS.right + MARGINS.left}px `;
+    const above = `${side + MARGINS.top + MARGINS.bottom}px `;
+    return (_jsxs("div", { style: { position: 'relative', width }, "data-testid": testId, children: [_jsx("div", { style: {
+                    ...GRID_STYLE,
+                    gridTemplateColumns: `${side + MARGINS.right + ROOM.left}px ${inner.repeat(rest)}`,
+                    gridTemplateRows: `${above.repeat(rest)}${side + MARGINS.top + ROOM.bottom}px`,
+                }, children: cells }), overlay === undefined ? null : (_jsx(OverlayLayer, { width: width, children: overlay }))] }));
+}
+/** Bins cut, dot radius and clear space when none is named. */
+const DEFAULT_BINS = 24;
+const DEFAULT_RADIUS = 2;
+const EXTENT_PADDING = 0.06;
+/**
+ * What a group is outlined at when the caller says nothing, held as one
+ * constant so that a grid redrawn on a hover does not measure its groups again
+ * for a size that never changed.
+ */
+const DEFAULT_ELLIPSE = { kind: 'coverage', probability: 0.95 };
+const GRID_STYLE = {
+    display: 'grid',
+    gap: GAP,
+    justifyContent: 'start',
+};
+//# sourceMappingURL=ScatterMatrix.js.map