react-cheminfo 0.9.0 → 0.11.0

package/lib/projection/ui/ProjectionPairsControls.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from 'react';
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+/** What the pair grid's own stepper is drawn from. */
+export interface ProjectionPairsControlsProps {
+    /** What the grid is showing, already resolved against the result. */
+    options: ProjectionOptions;
+    /** Called with only the options that changed, for the viewer to merge. */
+    onChange: (patch: Partial<ProjectionOptions>) => void;
+    /** The words the bar writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** How many components the run produced, which caps the grid. */
+    axisCount: number;
+    /** Width of the figure, in pixels, which caps it again. */
+    width: number;
+    /**
+     * How much of itself the bar is writing. The caption in front of the
+     * stepper is the first thing to go, since the number beside it is what the
+     * reader is looking at and the name is in every announcement.
+     * @default 'full'
+     */
+    tier?: OverlayTier;
+}
+/**
+ * How many components the grid lays out, which is the one thing a reader of
+ * this tab actually changes.
+ *
+ * Its ceiling is three things at once: six, which is where thirty-six cells
+ * stop being worth the room; what the run produced; and what the width can
+ * draw at a readable size. Pressing past any of them is dead rather than
+ * silently ignored, so the number in the bar is the number on the screen.
+ * @param props - See {@link ProjectionPairsControlsProps}.
+ * @returns The stepper.
+ */
+export declare function ProjectionPairsControls(props: ProjectionPairsControlsProps): ReactElement;
+//# sourceMappingURL=ProjectionPairsControls.d.ts.map

package/lib/projection/ui/ProjectionPairsControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPairsControls.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPairsControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAItE,sDAAsD;AACtD,MAAM,WAAW,4BAA4B;IAC3C,qEAAqE;IACrE,OAAO,EAAE,iBAAiB,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,4BAA4B,GAClC,YAAY,CAcd"}

package/lib/projection/ui/ProjectionPairsControls.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { projectionPairsCeiling } from "./projectionPairsCeiling.js";
+/**
+ * How many components the grid lays out, which is the one thing a reader of
+ * this tab actually changes.
+ *
+ * Its ceiling is three things at once: six, which is where thirty-six cells
+ * stop being worth the room; what the run produced; and what the width can
+ * draw at a readable size. Pressing past any of them is dead rather than
+ * silently ignored, so the number in the bar is the number on the screen.
+ * @param props - See {@link ProjectionPairsControlsProps}.
+ * @returns The stepper.
+ */
+export function ProjectionPairsControls(props) {
+    const { options, onChange, copy, axisCount, width, tier = 'full' } = props;
+    const ceiling = projectionPairsCeiling(axisCount, width);
+    return (_jsx(OverlayNumber, { label: copy.help.pairCount.title, hideLabel: tier !== 'full', value: options.pairCount, min: ceiling.min, max: ceiling.max, onChange: (pairCount) => onChange({ pairCount }) }));
+}
+//# sourceMappingURL=ProjectionPairsControls.js.map

package/lib/projection/ui/ProjectionPairsControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPairsControls.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPairsControls.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAoC,CAAC;AAInE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAuBrE;;;;;;;;;;GAUG;AACH,MAAM,UAAU,uBAAuB,CACrC,KAAmC;IAEnC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,OAAO,GAAG,sBAAsB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAChC,SAAS,EAAE,IAAI,KAAK,MAAM,EAC1B,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC,GAChD,CACH,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionPairsMore.d.ts

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+/** What the grid keeps behind the cog is drawn from. */
+export interface ProjectionPairsMoreProps {
+    /** What the grid is showing, already resolved against the result. */
+    options: ProjectionOptions;
+    /** Called with only the options that changed, for the viewer to merge. */
+    onChange: (patch: Partial<ProjectionOptions>) => void;
+    /** The words the bar writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** What the set of groups is called, which is what `Colour by` offers. */
+    groupLabel: string;
+    /** How many components the run produced, which caps the grid. */
+    axisCount: number;
+    /** Width of the figure, in pixels, which caps it again. */
+    width: number;
+    /**
+     * Whether the samples carry groups at all.
+     * @default false
+     */
+    hasGroups?: boolean;
+}
+/**
+ * What the grid keeps behind the cog: how many components it lays out, what
+ * the colour means, and how large a dot is in a cell a fifth of the map's
+ * width.
+ *
+ * Three settings get no headings at all. A heading earns its line once the eye
+ * has more than about four names to run down, and a panel of three filed under
+ * two captions has been catalogued rather than laid out.
+ *
+ * The count is here as well as on the bar, and deliberately: the bar writes the
+ * number because it is what the reader is looking at, while the panel is the
+ * only place it is named, explained, and can be put back where it started.
+ * @param props - See {@link ProjectionPairsMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export declare function ProjectionPairsMore(props: ProjectionPairsMoreProps): ReactElement;
+//# sourceMappingURL=ProjectionPairsMore.d.ts.map

package/lib/projection/ui/ProjectionPairsMore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPairsMore.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPairsMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AAOtC,wDAAwD;AACxD,MAAM,WAAW,wBAAwB;IACvC,qEAAqE;IACrE,OAAO,EAAE,iBAAiB,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACtD,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAwCd"}

package/lib/projection/ui/ProjectionPairsMore.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { OverlayPanel } from "../../overlay/ui/OverlayPanel.js";
+import { OverlaySegmented } from "../../overlay/ui/OverlaySegmented.js";
+import { PROJECTION_PANEL_NAME } from "../core/projectionStrings.js";
+import { PROJECTION_TAB_DEFAULTS } from "../core/projectionTabDefaults.js";
+import { projectionColourChoices } from "./projectionMapChoices.js";
+import { projectionPairsCeiling } from "./projectionPairsCeiling.js";
+/**
+ * What the grid keeps behind the cog: how many components it lays out, what
+ * the colour means, and how large a dot is in a cell a fifth of the map's
+ * width.
+ *
+ * Three settings get no headings at all. A heading earns its line once the eye
+ * has more than about four names to run down, and a panel of three filed under
+ * two captions has been catalogued rather than laid out.
+ *
+ * The count is here as well as on the bar, and deliberately: the bar writes the
+ * number because it is what the reader is looking at, while the panel is the
+ * only place it is named, explained, and can be put back where it started.
+ * @param props - See {@link ProjectionPairsMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionPairsMore(props) {
+    const { options, onChange, copy, groupLabel, hasGroups = false } = props;
+    const { axisCount, width } = props;
+    const { bar, help, tab } = copy;
+    const ceiling = projectionPairsCeiling(axisCount, width);
+    return (_jsxs(OverlayPanel, { title: tab.pairs, onReset: () => onChange(PROJECTION_TAB_DEFAULTS.pairs), children: [_jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.pairCount, help: help.pairCount, value: options.pairCount, min: ceiling.min, max: ceiling.max, onChange: (pairCount) => onChange({ pairCount }) }), _jsx(OverlaySegmented, { label: PROJECTION_PANEL_NAME.colorBy, help: help.colorBy, value: options.colorBy, disabled: !hasGroups, options: projectionColourChoices(groupLabel, bar.uncoloured), onChange: (colorBy) => onChange({ colorBy }) }), _jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.pointRadius, help: help.pointRadius, value: options.pointRadius, min: 1, max: 12, step: 0.5, digits: 1, unit: "px", onChange: (pointRadius) => onChange({ pointRadius }) })] }));
+}
+//# sourceMappingURL=ProjectionPairsMore.js.map

package/lib/projection/ui/ProjectionPairsMore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPairsMore.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPairsMore.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAmC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAuC,CAAC;AAMzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAE3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAuBrE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAA+B;IAE/B,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IACnC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAChC,MAAM,OAAO,GAAG,sBAAsB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAEzD,OAAO,CACL,MAAC,YAAY,IACX,KAAK,EAAE,GAAG,CAAC,KAAK,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC,KAAK,CAAC,aAEtD,KAAC,aAAa,IACZ,KAAK,EAAE,qBAAqB,CAAC,SAAS,EACtC,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,OAAO,CAAC,SAAS,EACxB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC,GAChD,EACF,KAAC,gBAAgB,IACf,KAAK,EAAE,qBAAqB,CAAC,OAAO,EACpC,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAE,OAAO,CAAC,OAAO,EACtB,QAAQ,EAAE,CAAC,SAAS,EACpB,OAAO,EAAE,uBAAuB,CAAC,UAAU,EAAE,GAAG,CAAC,UAAU,CAAC,EAC5D,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,GAC5C,EACF,KAAC,aAAa,IACZ,KAAK,EAAE,qBAAqB,CAAC,WAAW,EACxC,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,OAAO,CAAC,WAAW,EAC1B,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,EAAE,EACP,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,CAAC,EACT,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,GACpD,IACW,CAChB,CAAC;AACJ,CAAC"}

package/lib/projection/ui/ProjectionPairsTab.d.ts

@@ -0,0 +1,66 @@
+import type { ReactElement } from 'react';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+/** What {@link ProjectionPairsTab} needs. */
+export interface ProjectionPairsTabProps {
+    /** What the run produced. */
+    result: ProjectionResult;
+    /** The groups as every figure of this viewer draws them. */
+    groups: ResolvedProjectionGroups;
+    /**
+     * What the grid is showing.
+     * @default DEFAULT_PROJECTION_OPTIONS
+     */
+    options?: ProjectionOptions;
+    /**
+     * The words the tab writes.
+     * @default PROJECTION_COPY
+     */
+    copy?: ProjectionCopy;
+    /**
+     * Width of the grid, in pixels, from the viewer's measurement.
+     * @default 0 — nothing is drawn until the figure has been measured
+     */
+    width?: number;
+    /**
+     * Height the tab is given, in pixels. The cells are square, so it is a floor
+     * under the block rather than a size the grid is fitted to — without it the
+     * page jumps as the reader moves between the tabs.
+     * @default 420
+     */
+    height?: number;
+    /**
+     * The selected rows, as indices; the rest are drawn faint.
+     * @default undefined — every row is drawn at full strength
+     */
+    selected?: readonly number[];
+    /**
+     * Called with the pair a cell stands for, so the map can take it over.
+     * @default undefined — the cells are not clickable
+     */
+    onSelectPair?: (xAxis: number, yAxis: number) => void;
+    /**
+     * Value of the `data-testid` attribute of the wrapper.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * Every pair of the leading components, drawn as one grid, with the same group
+ * outlines the map draws.
+ *
+ * Colour is the group here, exactly as it is on the map, and that is the point
+ * of the tab: the grid has to read as the same picture seen from more angles,
+ * so a reader who found their clusters on the map can look for the pair that
+ * separates them better. The outlines are what makes that comparison quick —
+ * two rings that overlap in one cell and stand apart in another answer the
+ * tab's question without counting a single dot. Clicking a cell promotes its
+ * pair to the map rather than opening anything, so the finding stays in the
+ * figure the reader already knows how to interrogate.
+ * @param props - See {@link ProjectionPairsTabProps}.
+ * @returns The grid and its key.
+ */
+export declare function ProjectionPairsTab(props: ProjectionPairsTabProps): ReactElement;
+//# sourceMappingURL=ProjectionPairsTab.d.ts.map

package/lib/projection/ui/ProjectionPairsTab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPairsTab.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPairsTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AAM7E,6CAA6C;AAC7C,MAAM,WAAW,uBAAuB;IACtC,6BAA6B;IAC7B,MAAM,EAAE,gBAAgB,CAAC;IACzB,4DAA4D;IAC5D,MAAM,EAAE,wBAAwB,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,uBAAuB,GAC7B,YAAY,CA+Cd"}

package/lib/projection/ui/ProjectionPairsTab.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { OverlayLegend } from "../../overlay/ui/OverlayLegend.js";
+import { ScatterMatrix } from "../../scatter/ui/ScatterMatrix.js";
+import { SCATTER_MATRIX_MOST_AXES } from "../../scatter/ui/scatterMatrixLayout.js";
+import { PROJECTION_COPY, fillCopy } from "../core/projectionCopy.js";
+import { DEFAULT_PROJECTION_OPTIONS } from "../core/projectionOptions.js";
+import { ProjectionSurface } from "./ProjectionSurface.js";
+import { MINIMUM_OUTLINE_POINTS } from "./projectionMapModel.js";
+import { PROJECTION_TAB_HEIGHT } from "./projectionTabStyles.js";
+/**
+ * Every pair of the leading components, drawn as one grid, with the same group
+ * outlines the map draws.
+ *
+ * Colour is the group here, exactly as it is on the map, and that is the point
+ * of the tab: the grid has to read as the same picture seen from more angles,
+ * so a reader who found their clusters on the map can look for the pair that
+ * separates them better. The outlines are what makes that comparison quick —
+ * two rings that overlap in one cell and stand apart in another answer the
+ * tab's question without counting a single dot. Clicking a cell promotes its
+ * pair to the map rather than opening anything, so the finding stays in the
+ * figure the reader already knows how to interrogate.
+ * @param props - See {@link ProjectionPairsTabProps}.
+ * @returns The grid and its key.
+ */
+export function ProjectionPairsTab(props) {
+    const { result, groups, onSelectPair, testId } = props;
+    const { options = DEFAULT_PROJECTION_OPTIONS, copy = PROJECTION_COPY } = props;
+    const { width = 0, height = PROJECTION_TAB_HEIGHT, selected } = props;
+    const axes = useMemo(() => result.axes.map((axis) => ({ name: axis.name, share: axis.share })), [result.axes]);
+    const inks = useMemo(() => groups.entries.map(({ id, label, color }) => ({ id, label, color })), [groups]);
+    const colored = options.colorBy === 'group' && inks.length > 0;
+    return (_jsx("div", { style: { minHeight: height }, "data-testid": testId, children: _jsx(ScatterMatrix, { scores: result.scores, axes: axes, count: Math.min(options.pairCount, SCATTER_MATRIX_MOST_AXES), width: width, groupOf: colored ? groups.groupOf : undefined, groups: colored ? inks : undefined, ellipse: colored ? options.ellipse : null, ellipseMinimumPoints: MINIMUM_OUTLINE_POINTS, selected: selected, pointRadius: Math.max(1, options.pointRadius - CROWDED_CELL), onSelectPair: onSelectPair, overlay: colored ? (_jsx(ProjectionSurface, { children: _jsx(OverlayLegend, { placement: "top-right", title: fillCopy(copy.legend.mapNoEllipse, {
+                        groups: groups.label,
+                    }), entries: legendEntries(groups) }) })) : undefined }) }));
+}
+/**
+ * The key: the same groups the map lists, in the same order and the same
+ * colours, because the two tabs have to be read as one picture.
+ *
+ * It floats in the top right corner rather than standing under the grid. The
+ * cell it covers a little of is the mirror of one across the diagonal, so
+ * unlike every other corner of this figure, nothing there is unique.
+ * @param groups - The groups as every figure draws them.
+ * @returns The entries.
+ */
+function legendEntries(groups) {
+    return groups.entries.map((entry) => ({
+        id: entry.id,
+        label: entry.label,
+        color: entry.color,
+        count: entry.count,
+    }));
+}
+/**
+ * How much smaller a dot is in a cell of the grid than on the map.
+ *
+ * A cell is a fifth of the map's width holding every one of its samples, so a
+ * dot sized for the map fills it in solid; the grid answers "does this pair
+ * separate my groups", which needs the shape of the cloud rather than the
+ * individual sample.
+ */
+const CROWDED_CELL = 1.5;
+//# sourceMappingURL=ProjectionPairsTab.js.map

package/lib/projection/ui/ProjectionPairsTab.js.map

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

package/lib/projection/ui/ProjectionPanel.d.ts

@@ -0,0 +1,79 @@
+import type { ReactElement } from 'react';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ProjectionSamples } from '../core/projectionSamples.ts';
+import type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
+import type { ProjectionMapView } from './projectionMapView.ts';
+import type { ProjectionModels } from './projectionTabModels.ts';
+import type { ProjectionSampleOpen } from './projectionViewerProps.ts';
+import type { ProjectionStateApi } from './useProjectionState.ts';
+/** What {@link ProjectionPanel} needs. */
+export interface ProjectionPanelProps {
+    /** The tab, the options and the selection every tab shares. */
+    state: ProjectionStateApi;
+    /** What the run produced, whatever produced it. */
+    result: ProjectionResult;
+    /** Who the rows are. */
+    samples: ProjectionSamples;
+    /** The words the viewer writes, already merged over the defaults. */
+    copy: ProjectionCopy;
+    /** The two figures the bar explains and a tab draws. */
+    models: ProjectionModels;
+    /** The map's frame, its last report, and the words around it. */
+    map: ProjectionMapView;
+    /** Width of the figure, in pixels. */
+    width: number;
+    /** Height of the figure, in pixels. */
+    height: number;
+    /** How a number is written in a hover card and a readout. */
+    formatValue: (value: number) => string;
+    /** Stem of the `id` every pill carries, which names this panel's own tab. */
+    baseId: string;
+    /** The `id` the pills point at, when there are pills. */
+    panelId: string;
+    /** Whether the bar carries a strip of views at all. */
+    strip: boolean;
+    /**
+     * Called with the row under the pointer on the map, or `null`.
+     * @default undefined
+     */
+    onHoverSample?: (id: string | null) => void;
+    /**
+     * Called when the reader double-clicks a sample, on either figure.
+     * @default undefined
+     */
+    onSampleDoubleClick?: (sample: ProjectionSampleOpen) => void;
+    /**
+     * Called as the pointer crosses the "what differs" panels.
+     * @default undefined
+     */
+    onTrackVariable?: (track: ProjectionVariableTrack | null) => void;
+    /**
+     * Whether a drag on a touch screen draws a lasso rather than scrolling.
+     * @default false
+     */
+    touchLasso?: boolean;
+    /**
+     * Whether the wheel zooms the map, once the pointer has rested on it.
+     * @default false
+     */
+    wheelZoom?: boolean;
+}
+/**
+ * The one figure showing, and the card that follows the pointer over it.
+ *
+ * The four tabs are drawn here rather than in the shell because only one of
+ * them is ever rendered and all four sit in the same box under the same bar: a
+ * reader moving between them should see the picture change and nothing else
+ * move. The pointer is tracked at this level for the same reason — the card is
+ * the viewer's, so it says the same thing wherever it is raised.
+ *
+ * The box is named whether or not there is a strip of tabs above it, because
+ * that name is what the save glyph in the bar points at: a figure is saved by
+ * the `id` of the box holding it, and a box named only where there happen to be
+ * several tabs would be savable on some viewers and not on others.
+ * @param props - See {@link ProjectionPanelProps}.
+ * @returns The panel.
+ */
+export declare function ProjectionPanel(props: ProjectionPanelProps): ReactElement;
+//# sourceMappingURL=ProjectionPanel.d.ts.map

package/lib/projection/ui/ProjectionPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionPanel.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,YAAY,EAAE,MAAM,OAAO,CAAC;AAIxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAOtE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAE5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,0CAA0C;AAC1C,MAAM,WAAW,oBAAoB;IACnC,+DAA+D;IAC/D,KAAK,EAAE,kBAAkB,CAAC;IAC1B,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB;IACxB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,IAAI,EAAE,cAAc,CAAC;IACrB,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,iEAAiE;IACjE,GAAG,EAAE,iBAAiB,CAAC;IACvB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,6EAA6E;IAC7E,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,OAAO,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,KAAK,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC7D;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8JzE"}

package/lib/projection/ui/ProjectionPanel.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { ProjectionMapTab } from "./ProjectionMapTab.js";
+import { ProjectionPairsTab } from "./ProjectionPairsTab.js";
+import { ProjectionReadout } from "./ProjectionReadout.js";
+import { ProjectionSharesTab } from "./ProjectionSharesTab.js";
+import { ProjectionSpaceTab } from "./ProjectionSpaceTab.js";
+import { ProjectionVariablesTab } from "./ProjectionVariablesTab.js";
+/**
+ * The one figure showing, and the card that follows the pointer over it.
+ *
+ * The four tabs are drawn here rather than in the shell because only one of
+ * them is ever rendered and all four sit in the same box under the same bar: a
+ * reader moving between them should see the picture change and nothing else
+ * move. The pointer is tracked at this level for the same reason — the card is
+ * the viewer's, so it says the same thing wherever it is raised.
+ *
+ * The box is named whether or not there is a strip of tabs above it, because
+ * that name is what the save glyph in the bar points at: a figure is saved by
+ * the `id` of the box holding it, and a box named only where there happen to be
+ * several tabs would be savable on some viewers and not on others.
+ * @param props - See {@link ProjectionPanelProps}.
+ * @returns The panel.
+ */
+export function ProjectionPanel(props) {
+    const { state, result, samples, copy, models, map } = props;
+    const { width, height, formatValue, baseId, panelId, strip } = props;
+    const { onHoverSample, onTrackVariable, touchLasso, wheelZoom } = props;
+    const { onSampleDoubleClick } = props;
+    const box = useRef(null);
+    const pointer = useRef(NOWHERE);
+    const [anchor, setAnchor] = useState(NO_ANCHOR);
+    function trackPointer(event) {
+        const rect = box.current?.getBoundingClientRect();
+        if (rect === undefined)
+            return;
+        pointer.current = {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+    }
+    function noteHover(index) {
+        setAnchor({ index, ...pointer.current });
+        onHoverSample?.(index < 0 ? null : (samples.ids[index] ?? null));
+    }
+    // The figures speak in row numbers, because that is what a hit test hands
+    // back; every callback out of the viewer speaks in names, so a caller never
+    // has to keep a second copy of the row order. The translation is one line
+    // and it belongs here, once, rather than in each of the two tabs.
+    const openSample = onSampleDoubleClick === undefined
+        ? undefined
+        : (point) => {
+            const id = samples.ids[point.index];
+            if (id === undefined)
+                return;
+            onSampleDoubleClick({ ...point, id });
+        };
+    return (_jsxs("div", { ref: box, id: panelId, role: strip ? 'tabpanel' : undefined, "aria-labelledby": strip ? `${baseId}-${state.tab}` : undefined, onPointerMove: trackPointer, children: [state.tab === 'pairs' ? (_jsx(ProjectionPairsTab, { result: result, groups: state.groups, options: state.options, copy: copy, width: width, height: height, selected: state.selected, onSelectPair: state.selectPair })) : null, state.tab === 'variables' ? (_jsx(ProjectionVariablesTab, { profiles: models.profiles, options: state.options, copy: copy, sampleName: models.sampleName, width: width, height: height, onTrackVariable: onTrackVariable, formatValue: formatValue })) : null, state.tab === 'shares' ? (_jsx(ProjectionSharesTab, { result: result, shares: models.shares, copy: copy, width: width, height: height })) : null, state.tab === 'space' ? (_jsx(ProjectionSpaceTab, { result: result, groups: state.groups, options: state.options, copy: copy, chrome: map.spaceChrome, ids: samples.ids, width: width, height: height, selected: state.selected, camera: map.camera, onCameraChange: map.setCamera, zoom: map.zoom, onZoomChange: map.setZoom, wheelZoom: wheelZoom, report: map.report, onSelectionChange: map.settle, onHoverChange: noteHover, onPointDoubleClick: openSample, hoverCard: anchor.index < 0 ? null : (_jsx(ProjectionReadout, { index: anchor.index, result: result, samples: samples, groups: state.groups, xAxis: state.options.xAxis, yAxis: state.options.yAxis, zAxis: state.options.zAxis, x: anchor.x, y: anchor.y, boxWidth: width, boxHeight: height, formatValue: formatValue })) })) : null, state.tab === 'map' ? (_jsx(ProjectionMapTab, { result: result, groups: state.groups, options: state.options, copy: copy, chrome: map.chrome, ids: samples.ids, viewport: map.viewport, onViewportChange: map.setViewport, wheelZoom: wheelZoom, report: map.report, width: width, height: height, selected: state.selected, onSelectionChange: map.settle, onHoverChange: noteHover, onPointDoubleClick: openSample, touchLasso: touchLasso, hoverCard: anchor.index < 0 ? null : (_jsx(ProjectionReadout, { index: anchor.index, result: result, samples: samples, groups: state.groups, xAxis: state.options.xAxis, yAxis: state.options.yAxis, x: anchor.x, y: anchor.y, boxWidth: width, boxHeight: height, formatValue: formatValue })) })) : null] }));
+}
+/** Where the pointer is before it has been anywhere. */
+const NOWHERE = { x: 0, y: 0 };
+/**
+ * No row under the pointer, which is what draws no card at all.
+ *
+ * The pointer's position is kept in a ref and read into this state only when
+ * the row under it changes, because a card that re-rendered the figure on
+ * every pointer move would repaint two thousand dots sixty times a second to
+ * shift a tooltip by three pixels. Between two rows the card therefore stands
+ * where it was raised, which is where the reader is already looking.
+ */
+const NO_ANCHOR = { index: -1, x: 0, y: 0 };
+//# sourceMappingURL=ProjectionPanel.js.map

package/lib/projection/ui/ProjectionPanel.js.map

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

package/lib/projection/ui/ProjectionReadout.d.ts

@@ -0,0 +1,72 @@
+import type { ReactElement } from 'react';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ProjectionSamples, ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+/** What {@link ProjectionReadout} says, and where. */
+export interface ProjectionReadoutProps {
+    /** The row the card is about, as an index into the score matrix. */
+    index: number;
+    /** What the run produced, for the axis names and the sample's own scores. */
+    result: ProjectionResult;
+    /** Who the rows are. */
+    samples: ProjectionSamples;
+    /** The groups as the figure draws them, for the row's group and its colour. */
+    groups: ResolvedProjectionGroups;
+    /** Which axis is drawn horizontally, from 0. */
+    xAxis: number;
+    /** Which axis is drawn vertically. */
+    yAxis: number;
+    /**
+     * Which axis runs away from the reader, on the cloud. It is the one place a
+     * cloud's third number is written at all: the box carries no tick labels, so
+     * a reader who wants a value points at the sample.
+     * @default undefined — the card names two axes, as the map's does
+     */
+    zAxis?: number;
+    /** Where the pointer is, in pixels from the figure's left. */
+    x: number;
+    /** Where the pointer is, in pixels from the figure's top. */
+    y: number;
+    /** Width of the figure, so the card can be flipped rather than clipped. */
+    boxWidth: number;
+    /** Height of the figure. */
+    boxHeight: number;
+    /**
+     * How a number is written.
+     * @default a rounding to three decimals with the trailing zeros dropped
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * The most rows shown before a `+ n more` footer.
+     * @default 12
+     */
+    maxRows?: number;
+    /**
+     * Whether the card stays until it is dismissed.
+     * @default false
+     */
+    pinned?: boolean;
+    /**
+     * Called when the reader dismisses a pinned card.
+     * @default undefined
+     */
+    onUnpin?: () => void;
+    /**
+     * Value of the `data-testid` attribute of the card.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * The card that says everything known about the sample under the pointer.
+ *
+ * It opens with what the reader can name the sample by, and only then with the
+ * two numbers the figure is drawn from: a card that led with `−2.257` would be
+ * asking a reader who has never met a component to care about the arithmetic
+ * before they have found their own sample in it. Whatever else is known comes
+ * last and in the caller's own order, because it is the part they came for and
+ * the part this package cannot guess at.
+ * @param props - See {@link ProjectionReadoutProps}.
+ * @returns The card.
+ */
+export declare function ProjectionReadout(props: ProjectionReadoutProps): ReactElement;
+//# sourceMappingURL=ProjectionReadout.d.ts.map

package/lib/projection/ui/ProjectionReadout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionReadout.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionReadout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAK1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EACV,iBAAiB,EACjB,wBAAwB,EACzB,MAAM,8BAA8B,CAAC;AAItC,sDAAsD;AACtD,MAAM,WAAW,sBAAsB;IACrC,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,MAAM,EAAE,gBAAgB,CAAC;IACzB,wBAAwB;IACxB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,+EAA+E;IAC/E,MAAM,EAAE,wBAAwB,CAAC;IACjC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,CAAC,EAAE,MAAM,CAAC;IACV,6DAA6D;IAC7D,CAAC,EAAE,MAAM,CAAC;IACV,2EAA2E;IAC3E,QAAQ,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CA2C7E"}

package/lib/projection/ui/ProjectionReadout.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { OverlayReadout } from "../../overlay/ui/OverlayReadout.js";
+import { formatProjectionValue } from "./projectionFormat.js";
+/**
+ * The card that says everything known about the sample under the pointer.
+ *
+ * It opens with what the reader can name the sample by, and only then with the
+ * two numbers the figure is drawn from: a card that led with `−2.257` would be
+ * asking a reader who has never met a component to care about the arithmetic
+ * before they have found their own sample in it. Whatever else is known comes
+ * last and in the caller's own order, because it is the part they came for and
+ * the part this package cannot guess at.
+ * @param props - See {@link ProjectionReadoutProps}.
+ * @returns The card.
+ */
+export function ProjectionReadout(props) {
+    const { index, result, samples, groups, xAxis, yAxis, zAxis, x, y, boxWidth, boxHeight, formatValue = formatProjectionValue, maxRows = 12, pinned = false, onUnpin, testId, } = props;
+    const drawn = useMemo(() => (zAxis === undefined ? [xAxis, yAxis] : [xAxis, yAxis, zAxis]), [xAxis, yAxis, zAxis]);
+    const rows = useMemo(() => readoutRows(index, result, samples, groups, drawn, formatValue), [drawn, formatValue, groups, index, result, samples]);
+    return (_jsx(OverlayReadout, { x: x, y: y, boxWidth: boxWidth, boxHeight: boxHeight, title: samples.ids[index] ?? '', rows: rows, maxRows: maxRows, pinned: pinned, onUnpin: onUnpin, testId: testId }));
+}
+function readoutRows(index, result, samples, groups, drawn, formatValue) {
+    const rows = [];
+    const { axes, scores } = result;
+    const known = index >= 0 && index < scores.rows;
+    for (const axis of drawn) {
+        const name = axes[axis]?.name;
+        if (name === undefined)
+            continue;
+        rows.push({
+            label: name,
+            value: formatValue(known ? scores.get(index, axis) : Number.NaN),
+        });
+    }
+    const group = groups.entries[groups.groupOf[index] ?? -1];
+    if (group !== undefined) {
+        rows.push({ label: groups.label, value: group.label, color: group.color });
+    }
+    if (known && samples.fields !== undefined) {
+        for (const field of samples.fields(index)) {
+            rows.push({ label: field.label, value: field.value });
+        }
+    }
+    return rows;
+}
+//# sourceMappingURL=ProjectionReadout.js.map

package/lib/projection/ui/ProjectionReadout.js.map

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