react-cheminfo 0.9.0 → 0.11.0

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

@@ -0,0 +1,34 @@
+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 shares control is drawn from. */
+export interface ProjectionSharesControlsProps {
+    /** What the figure is showing; only the target is read here. */
+    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 much of itself the bar is writing. The caption in front of the
+     * stepper is the first thing to go, since the percentage beside it is what
+     * the reader is looking at and the name is in every announcement.
+     * @default 'full'
+     */
+    tier?: OverlayTier;
+}
+/**
+ * How much of the differences the reader wants accounted for, which is the
+ * only thing this tab has to change.
+ *
+ * It is written on the bar rather than left behind the cog because it is the
+ * tab's whole question — how many components do I have to keep — and a reader
+ * should not have to open anything to see the answer the figure is drawn
+ * against. The panel behind the cog offers the same setting named and
+ * explained; here it is the value alone.
+ * @param props - See {@link ProjectionSharesControlsProps}.
+ * @returns The stepper.
+ */
+export declare function ProjectionSharesControls(props: ProjectionSharesControlsProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesControls.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesControls.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,6CAA6C;AAC7C,MAAM,WAAW,6BAA6B;IAC5C,gEAAgE;IAChE,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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,6BAA6B,GACnC,YAAY,CAed"}

package/lib/projection/ui/ProjectionSharesControls.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from "./projectionTabStyles.js";
+/**
+ * How much of the differences the reader wants accounted for, which is the
+ * only thing this tab has to change.
+ *
+ * It is written on the bar rather than left behind the cog because it is the
+ * tab's whole question — how many components do I have to keep — and a reader
+ * should not have to open anything to see the answer the figure is drawn
+ * against. The panel behind the cog offers the same setting named and
+ * explained; here it is the value alone.
+ * @param props - See {@link ProjectionSharesControlsProps}.
+ * @returns The stepper.
+ */
+export function ProjectionSharesControls(props) {
+    const { options, onChange, copy, tier = 'full' } = props;
+    return (_jsx(OverlayNumber, { label: copy.help.shareTarget.title, hideLabel: tier !== 'full', value: Math.round(options.shareTarget * WHOLE_SHARE), min: 0, max: WHOLE_SHARE, step: PROJECTION_SHARE_STEP, unit: "%", onChange: (target) => onChange({ shareTarget: target / WHOLE_SHARE }) }));
+}
+//# sourceMappingURL=ProjectionSharesControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesControls.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesControls.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAoC,CAAC;AAInE,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAmB9E;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,wBAAwB,CACtC,KAAoC;IAEpC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,EAAE,GAAG,KAAK,CAAC;IAEzD,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,EAClC,SAAS,EAAE,IAAI,KAAK,MAAM,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,EACpD,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC,GACrE,CACH,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,49 @@
+import type { ReactElement } from 'react';
+import type { ChartBand } from '../../chart/core/chartBand.ts';
+import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+import type { ExplainedShares } from '../core/explainedShares.ts';
+/** What {@link SharesMarks} draws. */
+export interface SharesMarksProps {
+    /** The bars, their running total and the target they are measured against. */
+    shares: ExplainedShares;
+    /** The frame they are drawn in. */
+    frame: ChartFrameRender;
+    /** The slots the bars stand on. */
+    band: ChartBand;
+}
+/**
+ * The bars, the running total over them, and the target they are measured
+ * against.
+ *
+ * Every bar takes its own component's colour. The total is one grey line with
+ * a dot per component and its name at its right-hand end, so the reader is
+ * never sent to a key to find out which of the two things on the chart is
+ * which. The target is one dashed rule and a light band reaching the first
+ * component that meets it — one honest marker, where Kaiser's rule and an
+ * elbow would be two folk rules a novice reads as verdicts.
+ * @param props - See {@link SharesMarksProps}.
+ * @returns The marks.
+ */
+export declare function SharesMarks(props: SharesMarksProps): ReactElement;
+/** What {@link SharesAxis} writes. */
+export interface SharesAxisProps {
+    /** The bars, for their names. */
+    shares: ExplainedShares;
+    /** Total width of the figure, in pixels, which the slots are laid out in. */
+    width: number;
+    /** Total height, which fixes the baseline the names sit on. */
+    height: number;
+    /** What the axis measures, written under the names. */
+    caption: string;
+}
+/**
+ * The component names under the bars, and what the axis measures under them.
+ *
+ * They are written in a layer of their own because a frame clips its children
+ * to the plot and these sit below it — the same reason the tracked line chart
+ * writes its slot names this way rather than as frame children.
+ * @param props - See {@link SharesAxisProps}.
+ * @returns The names.
+ */
+export declare function SharesAxis(props: SharesAxisProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesMarks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesMarks.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesMarks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAE/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAelE,sCAAsC;AACtC,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,MAAM,EAAE,eAAe,CAAC;IACxB,mCAAmC;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA4DjE;AAED,sCAAsC;AACtC,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,MAAM,EAAE,eAAe,CAAC;IACxB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA6B/D"}

package/lib/projection/ui/ProjectionSharesMarks.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { chartBand, chartBandCenter } from "../../chart/core/chartBand.js";
+import { AXIS_CAPTION_STYLE, AXIS_LAYER_STYLE, AXIS_NAME_STYLE, SHARES_BOTTOM_ROOM, SHARES_CAPTION_OFFSET, SHARES_LEFT_ROOM, SHARES_NAME_OFFSET, SHARES_RIGHT_ROOM, TOTAL_LABEL_STYLE, WHOLE_SHARE, } from "./projectionTabStyles.js";
+/**
+ * The bars, the running total over them, and the target they are measured
+ * against.
+ *
+ * Every bar takes its own component's colour. The total is one grey line with
+ * a dot per component and its name at its right-hand end, so the reader is
+ * never sent to a key to find out which of the two things on the chart is
+ * which. The target is one dashed rule and a light band reaching the first
+ * component that meets it — one honest marker, where Kaiser's rule and an
+ * elbow would be two folk rules a novice reads as verdicts.
+ * @param props - See {@link SharesMarksProps}.
+ * @returns The marks.
+ */
+export function SharesMarks(props) {
+    const { shares, frame, band } = props;
+    const { components, target, reachesTargetAt } = shares;
+    const { plot, y } = frame;
+    const zero = y.offset;
+    const bars = [];
+    const dots = [];
+    let path = '';
+    let lastX = plot.left;
+    let lastY = zero;
+    for (let index = 0; index < components.length; index++) {
+        const component = components[index];
+        if (component === undefined)
+            continue;
+        const top = y.offset + component.share * WHOLE_SHARE * y.factor;
+        const middle = chartBandCenter(band, index);
+        bars.push(_jsx("rect", { "data-component": component.number, x: middle - band.bandWidth / 2, y: Math.min(top, zero), width: band.bandWidth, height: Math.abs(zero - top), fill: component.color, children: _jsx("title", { children: hoverCard(shares, index) }) }, component.number));
+        lastX = middle;
+        lastY = y.offset + component.cumulative * WHOLE_SHARE * y.factor;
+        path += `${index === 0 ? 'M' : 'L'}${round(middle)} ${round(lastY)}`;
+        dots.push(_jsx("circle", { cx: middle, cy: lastY, r: 2.5 }, component.number));
+    }
+    const total = components.at(-1)?.cumulative ?? 0;
+    return (_jsxs(_Fragment, { children: [target > 0 ? targetMark(target, reachesTargetAt, frame, band) : null, _jsx("g", { "data-shares": "bars", children: bars }), _jsx("path", { "data-shares": "total", d: path, fill: "none", stroke: "var(--text-muted)", strokeWidth: 1.5 }), _jsx("g", { "data-shares": "total-dots", fill: "var(--text-muted)", children: dots }), _jsx("text", { x: lastX - DOT_GAP, y: Math.max(plot.top + LABEL_ROOM, lastY - DOT_GAP), textAnchor: "end", style: TOTAL_LABEL_STYLE, children: `Running total ${(total * WHOLE_SHARE).toFixed(1)}%` })] }));
+}
+/**
+ * The component names under the bars, and what the axis measures under them.
+ *
+ * They are written in a layer of their own because a frame clips its children
+ * to the plot and these sit below it — the same reason the tracked line chart
+ * writes its slot names this way rather than as frame children.
+ * @param props - See {@link SharesAxisProps}.
+ * @returns The names.
+ */
+export function SharesAxis(props) {
+    const { shares, width, height, caption } = props;
+    const right = Math.max(SHARES_LEFT_ROOM, width - SHARES_RIGHT_ROOM);
+    const band = chartBand(shares.components.length, SHARES_LEFT_ROOM, right);
+    const baseline = height - SHARES_BOTTOM_ROOM;
+    return (_jsxs("svg", { width: "100%", height: "100%", style: AXIS_LAYER_STYLE, children: [shares.components.map((component, index) => (_jsx("text", { x: chartBandCenter(band, index), y: baseline + SHARES_NAME_OFFSET, textAnchor: "middle", style: AXIS_NAME_STYLE, children: component.label }, component.number))), _jsx("text", { x: (SHARES_LEFT_ROOM + right) / 2, y: baseline + SHARES_CAPTION_OFFSET, textAnchor: "middle", style: AXIS_CAPTION_STYLE, children: caption })] }));
+}
+/**
+ * The dashed rule at the target, and the light band over the components that
+ * reach it.
+ * @param target - The cumulative share the marker aims at.
+ * @param reachesTargetAt - The first component to meet it, counting from one.
+ * @param frame - The frame the marks are drawn in.
+ * @param band - The slots the bars stand on.
+ * @returns The marker.
+ */
+function targetMark(target, reachesTargetAt, frame, band) {
+    const { plot, y } = frame;
+    const at = y.offset + target * WHOLE_SHARE * y.factor;
+    const covered = reachesTargetAt === null
+        ? 0
+        : band.offset + band.step * reachesTargetAt - plot.left;
+    return (_jsxs("g", { "data-shares": "target", children: [covered > 0 ? (_jsx("rect", { x: plot.left, y: plot.top, width: covered, height: plot.bottom - plot.top, fill: TARGET_BAND })) : null, _jsx("line", { x1: plot.left, x2: plot.right, y1: at, y2: at, stroke: "var(--border-strong)", strokeWidth: 1, strokeDasharray: "4 3" })] }));
+}
+/**
+ * What the pointer is told about one bar: its own share, the running total up
+ * to it, and the variance of its scores as fine print for the one reader in
+ * fifty who wants it.
+ * @param shares - The bars.
+ * @param index - Which one, from 0.
+ * @returns The card's text.
+ */
+function hoverCard(shares, index) {
+    const component = shares.components[index];
+    if (component === undefined)
+        return '';
+    const own = (component.share * WHOLE_SHARE).toFixed(2);
+    const together = (component.cumulative * WHOLE_SHARE).toFixed(2);
+    const line = `${component.label} — ${own}% of the differences. The first ${component.number} together: ${together}%.`;
+    const { eigenvalue } = component;
+    return eigenvalue === undefined
+        ? line
+        : `${line}\nλ = ${Math.round(eigenvalue * ROUNDING) / ROUNDING}`;
+}
+/** The light wash over the components that reach the target. */
+const TARGET_BAND = 'color-mix(in srgb, var(--border-strong) 22%, transparent)';
+/**
+ * How far the total's name sits from its last dot, and how far it is kept
+ * below the top of the plot.
+ *
+ * A whole model's total is 100 %, which lands the last dot on the very top
+ * rule — and a name six pixels above that is six pixels outside the frame's
+ * clip, so it would simply not be drawn.
+ */
+const DOT_GAP = 6;
+const LABEL_ROOM = 12;
+/** Decimals the fine print rounds an eigenvalue to. */
+const ROUNDING = 1000;
+const round = (value) => Math.round(value * 100) / 100;
+//# sourceMappingURL=ProjectionSharesMarks.js.map

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

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

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

@@ -0,0 +1,19 @@
+import type { ReactElement } from 'react';
+import type { ProjectionSharesControlsProps } from './ProjectionSharesControls.tsx';
+/** What the shares panel behind the cog is drawn from. */
+export type ProjectionSharesMoreProps = Omit<ProjectionSharesControlsProps, 'tier'>;
+/**
+ * What the shares figure keeps behind the cog: the one target it has, named
+ * and explained, and the way back to the share the figure came with.
+ *
+ * The stepper is on the bar as well, and that is not an oversight. The bar
+ * writes the number because the number is the tab's whole question — how much
+ * of the differences am I asking to account for — while this is the only place
+ * it is called anything, the only place the sentence behind its name is
+ * offered, and the only place a reader who has stepped it somewhere odd can
+ * put it back.
+ * @param props - See {@link ProjectionSharesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export declare function ProjectionSharesMore(props: ProjectionSharesMoreProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesMore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesMore.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAGpF,0DAA0D;AAC1D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,6BAA6B,EAC7B,MAAM,CACP,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,yBAAyB,GAC/B,YAAY,CAqBd"}

package/lib/projection/ui/ProjectionSharesMore.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { OverlayPanel } from "../../overlay/ui/OverlayPanel.js";
+import { PROJECTION_PANEL_NAME } from "../core/projectionStrings.js";
+import { PROJECTION_TAB_DEFAULTS } from "../core/projectionTabDefaults.js";
+import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from "./projectionTabStyles.js";
+/**
+ * What the shares figure keeps behind the cog: the one target it has, named
+ * and explained, and the way back to the share the figure came with.
+ *
+ * The stepper is on the bar as well, and that is not an oversight. The bar
+ * writes the number because the number is the tab's whole question — how much
+ * of the differences am I asking to account for — while this is the only place
+ * it is called anything, the only place the sentence behind its name is
+ * offered, and the only place a reader who has stepped it somewhere odd can
+ * put it back.
+ * @param props - See {@link ProjectionSharesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionSharesMore(props) {
+    const { options, onChange, copy } = props;
+    const { help, tab } = copy;
+    return (_jsx(OverlayPanel, { title: tab.shares, onReset: () => onChange(PROJECTION_TAB_DEFAULTS.shares), children: _jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.shareTarget, help: help.shareTarget, value: Math.round(options.shareTarget * WHOLE_SHARE), min: 0, max: WHOLE_SHARE, step: PROJECTION_SHARE_STEP, unit: "%", onChange: (target) => onChange({ shareTarget: target / WHOLE_SHARE }) }) }));
+}
+//# sourceMappingURL=ProjectionSharesMore.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesMore.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesMore.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAoC,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAmC,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAG3E,OAAO,EAAE,qBAAqB,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAQ9E;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,oBAAoB,CAClC,KAAgC;IAEhC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC;IAE3B,OAAO,CACL,KAAC,YAAY,IACX,KAAK,EAAE,GAAG,CAAC,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,uBAAuB,CAAC,MAAM,CAAC,YAEvD,KAAC,aAAa,IACZ,KAAK,EAAE,qBAAqB,CAAC,WAAW,EACxC,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,EACpD,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,WAAW,EAChB,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,GAAG,EACR,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,MAAM,GAAG,WAAW,EAAE,CAAC,GACrE,GACW,CAChB,CAAC;AACJ,CAAC"}

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

@@ -0,0 +1,50 @@
+import type { ReactElement } from 'react';
+import type { ExplainedShares } from '../core/explainedShares.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+/** What {@link ProjectionSharesTab} needs. */
+export interface ProjectionSharesTabProps {
+    /** What the run produced; every axis must carry a share. */
+    result: ProjectionResult;
+    /** The bars, worked out once by the viewer and explained in its bar. */
+    shares: ExplainedShares;
+    /**
+     * The words the tab writes.
+     * @default PROJECTION_COPY
+     */
+    copy?: ProjectionCopy;
+    /**
+     * Width of the figure, in pixels, from the viewer's measurement.
+     * @default 0 — nothing is drawn until the figure has been measured
+     */
+    width?: number;
+    /**
+     * Height of the figure, in pixels.
+     * @default 420
+     */
+    height?: number;
+    /**
+     * Value of the `data-testid` attribute of the wrapper.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * One bar per component, each in its own component's colour, with the running
+ * total drawn over them.
+ *
+ * The colour is the whole point of this tab. On most charts of explained
+ * shares the bars are one colour, or a gradient, and a reader who asks what it
+ * means is right to ask, because it means nothing. Here every bar carries the
+ * colour its component carries on every other tab, so the reader learns one
+ * colour language rather than two.
+ *
+ * It is the one figure of the viewer with no key at all: every bar is named
+ * under itself in its own colour, and the running total writes its name at its
+ * right-hand end, so a key would be a second place to look for something both
+ * marks already say about themselves.
+ * @param props - See {@link ProjectionSharesTabProps}.
+ * @returns The figure.
+ */
+export declare function ProjectionSharesTab(props: ProjectionSharesTabProps): ReactElement;
+//# sourceMappingURL=ProjectionSharesTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesTab.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AASpE,8CAA8C;AAC9C,MAAM,WAAW,wBAAwB;IACvC,4DAA4D;IAC5D,MAAM,EAAE,gBAAgB,CAAC;IACzB,wEAAwE;IACxE,MAAM,EAAE,eAAe,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAyCd"}

package/lib/projection/ui/ProjectionSharesTab.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { chartBand } from "../../chart/core/chartBand.js";
+import { ChartFrame } from "../../chart/ui/ChartFrame.js";
+import { PROJECTION_COPY } from "../core/projectionCopy.js";
+import { SharesAxis, SharesMarks } from "./ProjectionSharesMarks.js";
+import { PROJECTION_TAB_HEIGHT, SHARES_BOTTOM_ROOM, WHOLE_SHARE, } from "./projectionTabStyles.js";
+/**
+ * One bar per component, each in its own component's colour, with the running
+ * total drawn over them.
+ *
+ * The colour is the whole point of this tab. On most charts of explained
+ * shares the bars are one colour, or a gradient, and a reader who asks what it
+ * means is right to ask, because it means nothing. Here every bar carries the
+ * colour its component carries on every other tab, so the reader learns one
+ * colour language rather than two.
+ *
+ * It is the one figure of the viewer with no key at all: every bar is named
+ * under itself in its own colour, and the running total writes its name at its
+ * right-hand end, so a key would be a second place to look for something both
+ * marks already say about themselves.
+ * @param props - See {@link ProjectionSharesTabProps}.
+ * @returns The figure.
+ */
+export function ProjectionSharesTab(props) {
+    const { result, shares, copy = PROJECTION_COPY, testId } = props;
+    const { width = 0, height = PROJECTION_TAB_HEIGHT } = props;
+    const slots = shares.components.length;
+    return (_jsx("div", { "data-testid": testId, children: _jsx(ChartFrame, { width: width, height: height, margins: { bottom: SHARES_BOTTOM_ROOM }, x: {
+                domain: [0, slots],
+                showTicks: false,
+                showGrid: false,
+                nice: false,
+            }, y: { domain: [0, WHOLE_SHARE], label: VERTICAL_CAPTION, tickCount: 5 }, label: `${result.method}. ${copy.intro.shares}`, overlay: _jsx(SharesAxis, { shares: shares, width: width, height: height, caption: HORIZONTAL_CAPTION }), children: (frame) => (_jsx(SharesMarks, { shares: shares, frame: frame, band: chartBand(slots, frame.plot.left, frame.plot.right, {
+                    padding: BAR_GAP,
+                }) })) }) }));
+}
+/** Share of a slot left empty between two bars. */
+const BAR_GAP = 0.3;
+/**
+ * The two axis captions, in words the reader already has.
+ *
+ * They are constants rather than copy because {@link ProjectionCopy} carries
+ * no slot for an axis, and adding one for two strings would put a translation
+ * seam in the middle of a figure.
+ */
+const HORIZONTAL_CAPTION = 'Components, strongest first';
+const VERTICAL_CAPTION = 'Share of the differences explained';
+//# sourceMappingURL=ProjectionSharesTab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSharesTab.js","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSharesTab.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA+B,CAAC;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,4BAA6B,CAAC;AACtE,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,GACZ,MAAM,0BAA0B,CAAC;AA8BlC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAA+B;IAE/B,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,GAAG,eAAe,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACjE,MAAM,EAAE,KAAK,GAAG,CAAC,EAAE,MAAM,GAAG,qBAAqB,EAAE,GAAG,KAAK,CAAC;IAE5D,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;IAEvC,OAAO,CACL,6BAAkB,MAAM,YACtB,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,EAAE,MAAM,EAAE,kBAAkB,EAAE,EACvC,CAAC,EAAE;gBACD,MAAM,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC;gBAClB,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE,KAAK;aACZ,EACD,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,EAAE,EACtE,KAAK,EAAE,GAAG,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,EAC/C,OAAO,EACL,KAAC,UAAU,IACT,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,kBAAkB,GAC3B,YAGH,CAAC,KAAK,EAAE,EAAE,CAAC,CACV,KAAC,WAAW,IACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE;oBACxD,OAAO,EAAE,OAAO;iBACjB,CAAC,GACF,CACH,GACU,GACT,CACP,CAAC;AACJ,CAAC;AAED,mDAAmD;AACnD,MAAM,OAAO,GAAG,GAAG,CAAC;AAEpB;;;;;;GAMG;AACH,MAAM,kBAAkB,GAAG,6BAA6B,CAAC;AACzD,MAAM,gBAAgB,GAAG,oCAAoC,CAAC"}

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

@@ -0,0 +1,51 @@
+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';
+import type { ProjectionReading } from './projectionBarReadings.ts';
+/** What the cloud's controls are drawn from, wherever in the bar they sit. */
+export interface ProjectionSpaceControlsProps {
+    /** What the cloud 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. */
+    groupLabel: string;
+    /**
+     * Whether the samples carry groups at all. Without them the shells stand for
+     * nothing, so their control is greyed rather than removed.
+     * @default false
+     */
+    hasGroups?: boolean;
+    /**
+     * What the settings currently read, built once for the bar and handed down.
+     * @default [] — nothing is written, which is what the cog's panel wants
+     */
+    readings?: readonly ProjectionReading[];
+    /**
+     * How much of itself the bar is writing.
+     * @default 'full'
+     */
+    tier?: OverlayTier;
+}
+/**
+ * The cloud settings a reader changes while looking at the picture.
+ *
+ * One of them is not on the map's bar at all, and it is the first: what a
+ * plain drag does. Turning the box and drawing a lasso both want that drag,
+ * and neither can be given a modifier without taking one that already means
+ * "add" or "take away" inside a lasso — so the choice is written on the bar
+ * where the reader can see it, rather than left as a shortcut they would have
+ * to be told about. It leads the row because it is the only setting on the bar
+ * that changes what the reader's own hand does.
+ *
+ * The rest are the map's, unchanged: how large the shells are, and the two
+ * name switches. The axes and the dot size wait behind the cog exactly as they
+ * do on the map.
+ * @param props - See {@link ProjectionSpaceControlsProps}.
+ * @returns The controls.
+ */
+export declare function ProjectionSpaceControls(props: ProjectionSpaceControlsProps): ReactElement;
+//# sourceMappingURL=ProjectionSpaceControls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSpaceControls.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSpaceControls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAQtE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAMpE,8EAA8E;AAC9E,MAAM,WAAW,4BAA4B;IAC3C,sEAAsE;IACtE,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,wCAAwC;IACxC,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,4BAA4B,GAClC,YAAY,CAoEd"}

package/lib/projection/ui/ProjectionSpaceControls.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayChip } from "../../overlay/ui/OverlayChip.js";
+import { OverlaySegmented } from "../../overlay/ui/OverlaySegmented.js";
+import { OverlaySelect } from "../../overlay/ui/OverlaySelect.js";
+import { OverlayToggle } from "../../overlay/ui/OverlayToggle.js";
+import { OverlayValueMenu } from "../../overlay/ui/OverlayValueMenu.js";
+import { CLOUD_GESTURE_CHOICES } from "./projectionCloudChoices.js";
+import { ellipseKey, ellipseSize } from "./projectionEllipse.js";
+import { ellipsoidChoices } from "./projectionEllipsoid.js";
+import { projectionColourChoices } from "./projectionMapChoices.js";
+/**
+ * The cloud settings a reader changes while looking at the picture.
+ *
+ * One of them is not on the map's bar at all, and it is the first: what a
+ * plain drag does. Turning the box and drawing a lasso both want that drag,
+ * and neither can be given a modifier without taking one that already means
+ * "add" or "take away" inside a lasso — so the choice is written on the bar
+ * where the reader can see it, rather than left as a shortcut they would have
+ * to be told about. It leads the row because it is the only setting on the bar
+ * that changes what the reader's own hand does.
+ *
+ * The rest are the map's, unchanged: how large the shells are, and the two
+ * name switches. The axes and the dot size wait behind the cog exactly as they
+ * do on the map.
+ * @param props - See {@link ProjectionSpaceControlsProps}.
+ * @returns The controls.
+ */
+export function ProjectionSpaceControls(props) {
+    const { options, onChange, copy, groupLabel, hasGroups = false } = props;
+    const { readings = NO_READINGS, tier = 'full' } = props;
+    const { bar, help } = copy;
+    const uncoloured = !hasGroups || options.colorBy === 'none';
+    const names = (_jsxs(_Fragment, { children: [_jsx(OverlayToggle, { label: bar.switches.showGroupLabels, help: help.showGroupLabels, icon: GROUP_LABELS_GLYPH, hideLabel: true, checked: options.showGroupLabels, disabled: uncoloured, onChange: (showGroupLabels) => onChange({ showGroupLabels }) }), _jsx(OverlayToggle, { label: bar.switches.showIds, help: help.showIds, icon: IDS_GLYPH, hideLabel: true, checked: options.showIds, onChange: (showIds) => onChange({ showIds }) })] }));
+    if (tier === 'chip' || tier === 'tiny') {
+        return (_jsxs(_Fragment, { children: [_jsx(OverlayChip, { label: bar.settings, settings: chipSettings(readings), children: _jsx(SpaceSettings, { options: options, onChange: onChange, copy: copy, groupLabel: groupLabel, hasGroups: hasGroups }) }), names] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(OverlayValueMenu, { label: help.cloudGesture.title, keyWord: bar.key.cloudGesture, showKey: tier === 'full', value: options.cloudGesture, options: CLOUD_GESTURE_CHOICES, onChange: (cloudGesture) => onChange({ cloudGesture }) }), _jsx(OverlayValueMenu, { label: help.ellipse.title, keyWord: bar.key.ellipse, showKey: tier === 'full', value: ellipseKey(options.ellipse), disabled: uncoloured, disabledReason: UNCOLOURED_REASON, options: ellipsoidChoices(options.ellipse), onChange: (value) => onChange({ ellipse: ellipseSize(value) }) }), names] }));
+}
+/**
+ * What the chip reads out, which is every setting spelled in full.
+ * @param readings - What the settings currently read.
+ * @returns The chip's own settings.
+ */
+function chipSettings(readings) {
+    const settings = [];
+    for (const reading of readings) {
+        settings.push({
+            label: reading.label,
+            value: reading.value,
+            swatches: reading.swatches,
+        });
+    }
+    return settings;
+}
+/**
+ * The same settings with their captions, for the panel the chip opens.
+ * @param props - See {@link SpaceSettingsProps}.
+ * @returns The captioned controls.
+ */
+function SpaceSettings(props) {
+    const { options, onChange, copy, groupLabel, hasGroups } = props;
+    const { bar, help } = copy;
+    return (_jsxs(_Fragment, { children: [_jsx(OverlaySegmented, { label: help.cloudGesture.title, help: help.cloudGesture, value: options.cloudGesture, options: CLOUD_GESTURE_CHOICES, onChange: (cloudGesture) => onChange({ cloudGesture }) }), _jsx(OverlaySegmented, { label: help.colorBy.title, help: help.colorBy, value: options.colorBy, disabled: !hasGroups, options: projectionColourChoices(groupLabel, bar.uncoloured), onChange: (colorBy) => onChange({ colorBy }) }), _jsx(OverlaySelect, { label: help.ellipse.title, help: help.ellipse, value: ellipseKey(options.ellipse), disabled: !hasGroups || options.colorBy === 'none', options: ellipsoidChoices(options.ellipse), onChange: (value) => onChange({ ellipse: ellipseSize(value) }) })] }));
+}
+/** The two glyphs the name switches ride as, the same pair the map uses. */
+const GROUP_LABELS_GLYPH = 'tag';
+const IDS_GLYPH = 'id-number';
+const UNCOLOURED_REASON = 'Shells follow the groups, so colour the cloud by them first.';
+/** No readings at all, which is what the panel behind the cog is handed. */
+const NO_READINGS = [];
+//# sourceMappingURL=ProjectionSpaceControls.js.map

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

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

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

@@ -0,0 +1,32 @@
+import type { ReactElement } from 'react';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ProjectionSpaceControlsProps } from './ProjectionSpaceControls.tsx';
+/** What {@link ProjectionSpaceMore} needs beyond the cloud's own controls. */
+export interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
+    /** The reduced space the controls apply to; its axes fill the three pickers. */
+    result: ProjectionResult;
+    /**
+     * How many samples are selected, which is what the clearing action needs
+     * before it can do anything.
+     * @default 0
+     */
+    selectedCount?: number;
+    /** Puts the box back where it was first seen. */
+    onResetView: () => void;
+    /** Empties the selection. */
+    onClearSelection: () => void;
+}
+/**
+ * What the cloud keeps behind the cog: its three axes, the dot size, and what
+ * the two drags do.
+ *
+ * It is the map's panel with one picker more and one action fewer. There is no
+ * "zoom to selection" here, because a box has no frame to draw round a crowd:
+ * the reader turns it until the crowd is facing them, which is the gesture the
+ * whole tab exists for, and a button that guessed an angle for them would
+ * usually guess wrong.
+ * @param props - See {@link ProjectionSpaceMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export declare function ProjectionSpaceMore(props: ProjectionSpaceMoreProps): ReactElement;
+//# sourceMappingURL=ProjectionSpaceMore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionSpaceMore.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionSpaceMore.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAY1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAOpE,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAC;AAGlF,8EAA8E;AAC9E,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E,gFAAgF;IAChF,MAAM,EAAE,gBAAgB,CAAC;IACzB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,6BAA6B;IAC7B,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,YAAY,CAmFd"}