react-cheminfo 0.14.0 → 0.16.0

package/lib/parallel/ui/parallelGestureModel.js

@@ -0,0 +1,80 @@
+/**
+ * The questions the gesture asks that need neither React nor state: where a
+ * press landed, which axis it reached, and which band each axis should be
+ * drawn with once the one being dragged is taken into account.
+ *
+ * Kept out of the hook the way `lassoGesture.ts` is kept out of its own — each
+ * of these has exactly one answer, and none of them needs a render to be read.
+ */
+import { surfacePosition } from "../../scatter/ui/lassoGesture.js";
+import { PARALLEL_MARGIN } from "../core/parallelAxes.js";
+import { PARALLEL_BRUSH_HALF_WIDTH, parallelBandOf, } from "../core/parallelBrush.js";
+/**
+ * Where an event landed, relative to the top left of the drawing area.
+ * @param event - The event, for where on the surface it happened.
+ * @returns The position, in pixels from the corner of the drawing area.
+ */
+export function parallelPointOf(event) {
+    const position = surfacePosition(event, 0, 0);
+    return {
+        x: position.x - PARALLEL_MARGIN.left,
+        y: position.y - PARALLEL_MARGIN.top,
+    };
+}
+/**
+ * Which axis a press at that horizontal position took hold of.
+ * @param x - Pixels from the left of the drawing area.
+ * @param axes - The axes, from left to right.
+ * @returns The axis's index, or `-1` when the press landed between two of them.
+ */
+export function parallelAxisNear(x, axes) {
+    let nearest = -1;
+    let nearestDistance = PARALLEL_BRUSH_HALF_WIDTH;
+    for (let index = 0; index < axes.length; index++) {
+        const axis = axes[index];
+        if (axis === undefined)
+            continue;
+        const distance = Math.abs(x - axis.x);
+        if (distance <= nearestDistance) {
+            nearestDistance = distance;
+            nearest = index;
+        }
+    }
+    return nearest;
+}
+/**
+ * One axis, by the id a range is keyed on.
+ * @param axes - The axes, from left to right.
+ * @param axisId - The id to find.
+ * @returns The axis, or `undefined` when it is no longer drawn.
+ */
+export function parallelAxisById(axes, axisId) {
+    for (const axis of axes) {
+        if (axis.id === axisId)
+            return axis;
+    }
+    return undefined;
+}
+/**
+ * The band to draw on each axis: the one being dragged where there is one, and
+ * the interval in force everywhere else.
+ * @param axes - The axes, from left to right.
+ * @param ranges - The interval each axis keeps, or `null` for none.
+ * @param draft - The band being dragged, or `null` when nothing is.
+ * @returns The bands, keyed by axis id; an axis with none is left out.
+ */
+export function parallelBandsOf(axes, ranges, draft) {
+    const drawn = new Map();
+    for (const axis of axes) {
+        if (draft !== null && draft.axis === axis.id) {
+            drawn.set(axis.id, draft.band);
+            continue;
+        }
+        const range = ranges[axis.id];
+        if (range === null || range === undefined)
+            continue;
+        drawn.set(axis.id, parallelBandOf(range, axis));
+    }
+    return drawn;
+}
+//# sourceMappingURL=parallelGestureModel.js.map

package/lib/parallel/ui/parallelGestureModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelGestureModel.js","sourceRoot":"","sources":["../../../src/parallel/ui/parallelGestureModel.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAEnE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1D,OAAO,EACL,yBAAyB,EACzB,cAAc,GACf,MAAM,0BAA0B,CAAC;AAWlC;;;;GAIG;AACH,MAAM,UAAU,eAAe,CAAC,KAAmB;IAIjD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,OAAO;QACL,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,IAAI;QACpC,CAAC,EAAE,QAAQ,CAAC,CAAC,GAAG,eAAe,CAAC,GAAG;KACpC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,CAAS,EACT,IAAmC;IAEnC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC;IACjB,IAAI,eAAe,GAAG,yBAAyB,CAAC;IAChD,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QACjD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACzB,IAAI,IAAI,KAAK,SAAS;YAAE,SAAS;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;QACtC,IAAI,QAAQ,IAAI,eAAe,EAAE,CAAC;YAChC,eAAe,GAAG,QAAQ,CAAC;YAC3B,OAAO,GAAG,KAAK,CAAC;QAClB,CAAC;IACH,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB,CAC9B,IAAmC,EACnC,MAAc;IAEd,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,EAAE,KAAK,MAAM;YAAE,OAAO,IAAI,CAAC;IACtC,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAC7B,IAAmC,EACnC,MAAsB,EACtB,KAA2B;IAE3B,MAAM,KAAK,GAAG,IAAI,GAAG,EAAwB,CAAC;IAC9C,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,IAAI,KAAK,IAAI,CAAC,EAAE,EAAE,CAAC;YAC7C,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;YAC/B,SAAS;QACX,CAAC;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC9B,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS;YAAE,SAAS;QACpD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAClD,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC"}

package/lib/parallel/ui/parallelInk.d.ts

@@ -0,0 +1,76 @@
+/**
+ * The colours the canvas is painted with, read off the figure itself.
+ *
+ * A canvas takes a colour, not a CSS declaration, so `var(--accent)` means
+ * nothing to it — and the family's accent is the one colour a site owns, so it
+ * cannot be written into a shared library either. The figure therefore asks
+ * the browser what its own tokens resolved to, once it is on the page, and
+ * paints with the answer.
+ */
+import type { ParallelInk } from './parallelCoordinatesProps.ts';
+/** The four tokens the figure paints from, as the page resolved them. */
+export interface ParallelTokenInk {
+    /** What `--text` resolved to. */
+    text: string;
+    /** What `--text-muted` resolved to. */
+    textMuted: string;
+    /** What `--surface` resolved to. */
+    surface: string;
+    /** What `--accent` resolved to, or the text colour when a site declares none. */
+    accent: string;
+}
+/** Every colour the figure paints with, resolved to something a canvas takes. */
+export interface ParallelInkValues {
+    /** The rows a brush left out. */
+    excluded: string;
+    /** The rows nothing is colouring. */
+    line: string;
+    /** The row under the pointer. */
+    hover: string;
+    /** The rows singled out elsewhere. */
+    selection: string;
+    /** The halo a singled-out line is drawn over. */
+    halo: string;
+    /** The axis lines, their ticks and their labels. */
+    axis: string;
+    /** How strongly a kept line is drawn. */
+    includedAlpha: number;
+}
+/**
+ * What the figure's own tokens resolved to.
+ * @param element - The figure, once it is on the page, or `null` before it is.
+ * @returns The four colours. Off the page — a server render, a test — the
+ * family's own token values stand in, so the figure never paints with nothing.
+ */
+export declare function readParallelTokens(element: Element | null): ParallelTokenInk;
+/**
+ * The inks to paint with, from the page's tokens and the caller's overrides.
+ * @param tokens - What the figure's own tokens resolved to.
+ * @param ink - What the caller insists on, over every one of them.
+ * @returns The inks.
+ */
+export declare function parallelInkFrom(tokens: ParallelTokenInk, ink?: ParallelInk): ParallelInkValues;
+/**
+ * The inks to paint with, read off one element.
+ * @param element - The figure, once it is on the page, or `null` before it is.
+ * @param ink - What the caller insists on, over everything read off the page.
+ * @returns The inks.
+ */
+export declare function readParallelInk(element: Element | null, ink?: ParallelInk): ParallelInkValues;
+/** The inks, and the ref that has to reach the figure for them to be read. */
+export interface ParallelInkBinding {
+    /** The colours to paint with. */
+    ink: ParallelInkValues;
+    /** Put on the figure's outermost element. */
+    ref: (element: Element | null) => void;
+}
+/**
+ * The inks, with the page's own tokens read the moment the figure is mounted.
+ *
+ * A callback ref rather than an effect, because the question is asked once, of
+ * the element itself, and there is nothing to keep in step afterwards.
+ * @param ink - What the caller insists on.
+ * @returns The inks and the ref. See {@link ParallelInkBinding}.
+ */
+export declare function useParallelInk(ink?: ParallelInk): ParallelInkBinding;
+//# sourceMappingURL=parallelInk.d.ts.map

package/lib/parallel/ui/parallelInk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelInk.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/parallelInk.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAQH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAgBjE,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,iFAAiF;IACjF,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,iFAAiF;AACjF,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAC;IACjB,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,SAAS,EAAE,MAAM,CAAC;IAClB,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,IAAI,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,gBAAgB,CAa5E;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,MAAM,EAAE,gBAAgB,EACxB,GAAG,GAAE,WAAgB,GACpB,iBAAiB,CAUnB;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,OAAO,GAAG,IAAI,EACvB,GAAG,GAAE,WAAgB,GACpB,iBAAiB,CAEnB;AAED,8EAA8E;AAC9E,MAAM,WAAW,kBAAkB;IACjC,iCAAiC;IACjC,GAAG,EAAE,iBAAiB,CAAC;IACvB,6CAA6C;IAC7C,GAAG,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,GAAG,GAAE,WAAgB,GAAG,kBAAkB,CAuBxE"}

package/lib/parallel/ui/parallelInk.js

@@ -0,0 +1,113 @@
+/**
+ * The colours the canvas is painted with, read off the figure itself.
+ *
+ * A canvas takes a colour, not a CSS declaration, so `var(--accent)` means
+ * nothing to it — and the family's accent is the one colour a site owns, so it
+ * cannot be written into a shared library either. The figure therefore asks
+ * the browser what its own tokens resolved to, once it is on the page, and
+ * paints with the answer.
+ */
+import { useCallback, useMemo, useState } from 'react';
+import { parseHexColor } from "../../color/core/hex.js";
+import { FAMILY_TOKEN_VALUES } from "../../tokens/core/familyTokens.js";
+import { PARALLEL_INCLUDED_ALPHA } from "../core/parallelPaint.js";
+/**
+ * The rows a brush left out. A light grey rather than a translucent black:
+ * overlapping segments of one stroked path accumulate alpha, so a translucent
+ * black saturates wherever the library is dense, while this is the colour the
+ * pile can only converge on.
+ */
+const EXCLUDED = 'rgba(171, 179, 191, 0.16)';
+/** How solid the halo under a singled-out line is. */
+const HALO_ALPHA = 0.85;
+/** The halo a page that declares no surface colour still gets. */
+const WHITE_HALO = `rgba(255, 255, 255, ${HALO_ALPHA})`;
+/**
+ * What the figure's own tokens resolved to.
+ * @param element - The figure, once it is on the page, or `null` before it is.
+ * @returns The four colours. Off the page — a server render, a test — the
+ * family's own token values stand in, so the figure never paints with nothing.
+ */
+export function readParallelTokens(element) {
+    const text = tokenColor(element, '--text', FAMILY_TOKEN_VALUES['--text']);
+    return {
+        text,
+        textMuted: tokenColor(element, '--text-muted', FAMILY_TOKEN_VALUES['--text-muted']),
+        surface: tokenColor(element, '--surface', FAMILY_TOKEN_VALUES['--surface']),
+        // A site that declares no accent still singles a row out, in its ink.
+        accent: tokenColor(element, '--accent', text),
+    };
+}
+/**
+ * The inks to paint with, from the page's tokens and the caller's overrides.
+ * @param tokens - What the figure's own tokens resolved to.
+ * @param ink - What the caller insists on, over every one of them.
+ * @returns The inks.
+ */
+export function parallelInkFrom(tokens, ink = {}) {
+    return {
+        excluded: ink.excluded ?? EXCLUDED,
+        line: ink.line ?? tokens.textMuted,
+        hover: ink.hover ?? tokens.text,
+        selection: ink.selection ?? tokens.accent,
+        halo: ink.halo ?? haloOf(tokens.surface),
+        axis: ink.axis ?? tokens.textMuted,
+        includedAlpha: ink.includedAlpha ?? PARALLEL_INCLUDED_ALPHA,
+    };
+}
+/**
+ * The inks to paint with, read off one element.
+ * @param element - The figure, once it is on the page, or `null` before it is.
+ * @param ink - What the caller insists on, over everything read off the page.
+ * @returns The inks.
+ */
+export function readParallelInk(element, ink = {}) {
+    return parallelInkFrom(readParallelTokens(element), ink);
+}
+/**
+ * The inks, with the page's own tokens read the moment the figure is mounted.
+ *
+ * A callback ref rather than an effect, because the question is asked once, of
+ * the element itself, and there is nothing to keep in step afterwards.
+ * @param ink - What the caller insists on.
+ * @returns The inks and the ref. See {@link ParallelInkBinding}.
+ */
+export function useParallelInk(ink = {}) {
+    const [tokens, setTokens] = useState(readFamilyTokens);
+    const { excluded, line, hover, selection, halo, axis, includedAlpha } = ink;
+    const ref = useCallback((element) => {
+        if (element !== null)
+            setTokens(readParallelTokens(element));
+    }, []);
+    const resolved = useMemo(() => parallelInkFrom(tokens, {
+        excluded,
+        line,
+        hover,
+        selection,
+        halo,
+        axis,
+        includedAlpha,
+    }), [tokens, excluded, line, hover, selection, halo, axis, includedAlpha]);
+    return { ink: resolved, ref };
+}
+function readFamilyTokens() {
+    return readParallelTokens(null);
+}
+function tokenColor(element, name, fallback) {
+    const resolve = globalThis.getComputedStyle;
+    if (element === null || typeof resolve !== 'function')
+        return fallback;
+    const declared = resolve(element).getPropertyValue(name).trim();
+    return declared === '' ? fallback : declared;
+}
+function haloOf(surface) {
+    try {
+        const { red, green, blue } = parseHexColor(surface);
+        return `rgba(${red}, ${green}, ${blue}, ${HALO_ALPHA})`;
+    }
+    catch {
+        // A surface written as anything but a hex colour still gets a halo.
+        return WHITE_HALO;
+    }
+}
+//# sourceMappingURL=parallelInk.js.map

package/lib/parallel/ui/parallelInk.js.map

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

package/lib/parallel/ui/parallelPlotModel.d.ts

@@ -0,0 +1,55 @@
+/**
+ * The small answers the figure needs before it renders: how many rows there
+ * are, what is colouring the lines, which rows are drawn over the mass, and
+ * what a screen reader is told.
+ *
+ * Kept out of the component for the reason `scatterPlotModel.ts` is: none of
+ * them needs React to be read or checked, and a component that is mostly
+ * arithmetic is a component nobody can see the layout in.
+ */
+import type { ParallelHighlight } from '../core/parallelPaint.ts';
+import type { ParallelAxis, ParallelColorBy, ParallelRanges } from '../core/parallelTypes.ts';
+/**
+ * How many rows the figure draws.
+ * @param axes - The axes, whose columns are read.
+ * @param count - What the caller insists on, if anything.
+ * @returns The count — the shortest column, so no axis is ever read past its
+ * own end.
+ */
+export declare function parallelRowCount(axes: readonly ParallelAxis[], count?: number): number;
+/**
+ * The quantity the lines are coloured by.
+ * @param color - The quantity the caller gave outright.
+ * @param colorAxis - The id of an axis already drawn, for the common case.
+ * @param axes - The axes, to find that id among.
+ * @returns The quantity, or `undefined` when the lines all take one ink. An
+ * axis named by `colorAxis` lends its own domain as well as its values, so the
+ * ramp and the axis beside it read the same range.
+ */
+export declare function parallelColorOf(color: ParallelColorBy | undefined, colorAxis: string | undefined, axes: readonly ParallelAxis[]): ParallelColorBy | undefined;
+/**
+ * Whether any axis on the figure carries an interval at all.
+ * @param axes - The axes, whose ids the intervals are keyed by.
+ * @param ranges - The interval each axis keeps.
+ * @returns Whether anything is brushed, which is what decides whether a line
+ * is ever drawn in the excluded ink.
+ */
+export declare function parallelIsBrushed(axes: readonly ParallelAxis[], ranges: ParallelRanges): boolean;
+/**
+ * The rows drawn over the mass, in the order they are painted.
+ * @param selected - The rows singled out elsewhere.
+ * @param hovered - The row under the pointer, or `-1`.
+ * @param selectionInk - The ink a singled-out row takes.
+ * @param hoverInk - The ink the hovered row takes.
+ * @returns The highlights, the hovered row last so that it paints on top and
+ * a row that is both selected and hovered is drawn once rather than twice.
+ */
+export declare function parallelHighlightsOf(selected: readonly number[] | undefined, hovered: number, selectionInk: string, hoverInk: string): ParallelHighlight[];
+/**
+ * What a screen reader is told the figure shows.
+ * @param axes - The axes, from left to right.
+ * @param count - How many rows are drawn.
+ * @returns The sentence, naming every axis and how much is on the figure.
+ */
+export declare function parallelFigureLabel(axes: readonly ParallelAxis[], count: number): string;
+//# sourceMappingURL=parallelPlotModel.d.ts.map

package/lib/parallel/ui/parallelPlotModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelPlotModel.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/parallelPlotModel.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,cAAc,EACf,MAAM,0BAA0B,CAAC;AAElC;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,KAAK,CAAC,EAAE,MAAM,GACb,MAAM,CAUR;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,eAAe,GAAG,SAAS,EAClC,SAAS,EAAE,MAAM,GAAG,SAAS,EAC7B,IAAI,EAAE,SAAS,YAAY,EAAE,GAC5B,eAAe,GAAG,SAAS,CAe7B;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,MAAM,EAAE,cAAc,GACrB,OAAO,CAMT;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,EACvC,OAAO,EAAE,MAAM,EACf,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,MAAM,GACf,iBAAiB,EAAE,CAUrB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,YAAY,EAAE,EAC7B,KAAK,EAAE,MAAM,GACZ,MAAM,CAMR"}

package/lib/parallel/ui/parallelPlotModel.js

@@ -0,0 +1,113 @@
+/**
+ * The small answers the figure needs before it renders: how many rows there
+ * are, what is colouring the lines, which rows are drawn over the mass, and
+ * what a screen reader is told.
+ *
+ * Kept out of the component for the reason `scatterPlotModel.ts` is: none of
+ * them needs React to be read or checked, and a component that is mostly
+ * arithmetic is a component nobody can see the layout in.
+ */
+import { formatInteger } from "../../format/core/numbers.js";
+/**
+ * How many rows the figure draws.
+ * @param axes - The axes, whose columns are read.
+ * @param count - What the caller insists on, if anything.
+ * @returns The count — the shortest column, so no axis is ever read past its
+ * own end.
+ */
+export function parallelRowCount(axes, count) {
+    if (count !== undefined)
+        return Math.max(0, Math.trunc(count));
+    let shortest = 0;
+    for (let index = 0; index < axes.length; index++) {
+        const axis = axes[index];
+        if (axis === undefined)
+            continue;
+        const length = axis.values.length;
+        if (index === 0 || length < shortest)
+            shortest = length;
+    }
+    return shortest;
+}
+/**
+ * The quantity the lines are coloured by.
+ * @param color - The quantity the caller gave outright.
+ * @param colorAxis - The id of an axis already drawn, for the common case.
+ * @param axes - The axes, to find that id among.
+ * @returns The quantity, or `undefined` when the lines all take one ink. An
+ * axis named by `colorAxis` lends its own domain as well as its values, so the
+ * ramp and the axis beside it read the same range.
+ */
+export function parallelColorOf(color, colorAxis, axes) {
+    if (color !== undefined)
+        return color;
+    if (colorAxis === undefined)
+        return undefined;
+    for (const axis of axes) {
+        if (axis.id !== colorAxis)
+            continue;
+        const domain = axis.domain;
+        if (domain === undefined)
+            return { values: axis.values };
+        return {
+            values: axis.values,
+            min: Math.min(domain[0], domain[1]),
+            max: Math.max(domain[0], domain[1]),
+            logarithmic: axis.scale === 'log',
+        };
+    }
+    return undefined;
+}
+/**
+ * Whether any axis on the figure carries an interval at all.
+ * @param axes - The axes, whose ids the intervals are keyed by.
+ * @param ranges - The interval each axis keeps.
+ * @returns Whether anything is brushed, which is what decides whether a line
+ * is ever drawn in the excluded ink.
+ */
+export function parallelIsBrushed(axes, ranges) {
+    for (const axis of axes) {
+        const range = ranges[axis.id];
+        if (range !== null && range !== undefined)
+            return true;
+    }
+    return false;
+}
+/**
+ * The rows drawn over the mass, in the order they are painted.
+ * @param selected - The rows singled out elsewhere.
+ * @param hovered - The row under the pointer, or `-1`.
+ * @param selectionInk - The ink a singled-out row takes.
+ * @param hoverInk - The ink the hovered row takes.
+ * @returns The highlights, the hovered row last so that it paints on top and
+ * a row that is both selected and hovered is drawn once rather than twice.
+ */
+export function parallelHighlightsOf(selected, hovered, selectionInk, hoverInk) {
+    const highlights = [];
+    if (selected !== undefined) {
+        for (const row of selected) {
+            if (row < 0 || row === hovered)
+                continue;
+            highlights.push({ row, color: selectionInk });
+        }
+    }
+    if (hovered >= 0)
+        highlights.push({ row: hovered, color: hoverInk });
+    return highlights;
+}
+/**
+ * What a screen reader is told the figure shows.
+ * @param axes - The axes, from left to right.
+ * @param count - How many rows are drawn.
+ * @returns The sentence, naming every axis and how much is on the figure.
+ */
+export function parallelFigureLabel(axes, count) {
+    const names = [];
+    for (const axis of axes)
+        names.push(axis.label);
+    const rows = count === 1 ? '1 row' : `${formatInteger(count)} rows`;
+    if (names.length === 0)
+        return `Parallel coordinates of ${rows}.`;
+    return `Parallel coordinates of ${rows}, on ${names.join(', ')}.`;
+}
+//# sourceMappingURL=parallelPlotModel.js.map

package/lib/parallel/ui/parallelPlotModel.js.map

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

package/lib/parallel/ui/parallelStyles.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Every rule the figure is drawn with.
+ *
+ * The library ships no stylesheet for a figure — a chart writes inline style
+ * objects, so a site that never renders one pays nothing and a site that does
+ * cannot forget to import a file. The two colours that are not fixed here, the
+ * axis ink and the band's, are resolved off the page by `parallelInk.ts` and
+ * written onto the elements, so an override applies to the canvas and to the
+ * markup alike.
+ */
+import type { CSSProperties } from 'react';
+/** A layer covering the whole figure, stacked over the ones before it. */
+export declare const PARALLEL_LAYER_STYLE: {
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * The block the figure occupies, which every layer is positioned against.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The wrapper's rules.
+ */
+export declare function parallelFigureStyle(height: number): CSSProperties;
+/**
+ * One of the two canvases, stretched over the figure.
+ * @param height - Total height of the figure, in pixels.
+ * @returns The canvas's rules.
+ */
+export declare function parallelCanvasStyle(height: number): CSSProperties;
+/** The drawing surface the axes, the bands and the pointer target live in. */
+export declare const PARALLEL_SVG_STYLE: {
+    readonly display: "block";
+    readonly overflow: "visible";
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * The layer the axis names sit in. It is HTML rather than SVG text so that a
+ * name can carry a tooltip, and it lets every pointer event through so that a
+ * brush started under a name still starts.
+ */
+export declare const PARALLEL_LABELS_STYLE: {
+    readonly pointerEvents: "none";
+    readonly position: "absolute";
+    readonly inset: 0;
+};
+/**
+ * One axis name, centred over its axis and taking the pointer back.
+ * @param left - Where the axis stands, in pixels from the figure's left edge.
+ * @returns The name's rules.
+ */
+export declare function parallelLabelStyle(left: number): CSSProperties;
+/** One tick written out, tabular so a column of them lines up on the point. */
+export declare const PARALLEL_TICK_LABEL_STYLE: {
+    readonly fontSize: 10;
+    readonly fontVariantNumeric: "tabular-nums";
+    readonly userSelect: "none";
+};
+/** How far a tick mark reaches out of the axis, in pixels. */
+export declare const PARALLEL_TICK_LENGTH = 4;
+/** How far a tick label ends before its axis. */
+export declare const PARALLEL_TICK_LABEL_INSET = 7;
+/**
+ * The interval one brush keeps, filled in the site's own colour.
+ * @param ink - The colour to fill and outline it in.
+ * @returns The band's rules.
+ */
+export declare function parallelBandStyle(ink: string): CSSProperties;
+/**
+ * Either edge of a band, drawn so the reader can see it can be dragged.
+ * @param ink - The colour to draw it in.
+ * @returns The handle's rules.
+ */
+export declare function parallelHandleStyle(ink: string): CSSProperties;
+/** How tall an edge handle is drawn, in pixels. */
+export declare const PARALLEL_HANDLE_HEIGHT = 3;
+/**
+ * The card over the row under the pointer.
+ * @param left - Where it sits, in pixels from the figure's left edge.
+ * @param top - Where it sits, in pixels from its top edge.
+ * @returns The card's rules.
+ */
+export declare function parallelTooltipStyle(left: number, top: number): CSSProperties;
+//# sourceMappingURL=parallelStyles.d.ts.map

package/lib/parallel/ui/parallelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallelStyles.d.ts","sourceRoot":"","sources":["../../../src/parallel/ui/parallelStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C,0EAA0E;AAC1E,eAAO,MAAM,oBAAoB;;;CAGC,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAMjE;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAMjE;AAED,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB;;;;;CAIG,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;CAGA,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,aAAa,CAY9D;AAED,+EAA+E;AAC/E,eAAO,MAAM,yBAAyB;;;;CAIJ,CAAC;AAEnC,8DAA8D;AAC9D,eAAO,MAAM,oBAAoB,IAAI,CAAC;AAEtC,iDAAiD;AACjD,eAAO,MAAM,yBAAyB,IAAI,CAAC;AAE3C;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAO5D;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAE9D;AAED,mDAAmD;AACnD,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAiB7E"}