react-cheminfo 0.9.0 → 0.10.0

package/lib/projection/ui/projectionPairsCeiling.js

@@ -0,0 +1,29 @@
+/**
+ * How many components the pair grid may be asked to lay out.
+ *
+ * The bar and the panel behind the cog both offer the count, and a ceiling
+ * worked out twice is a ceiling that ends up different in the two places — so
+ * the reader would find the same stepper dead on one and live on the other.
+ * It sits apart from both of them because it is arithmetic rather than a
+ * control, and a module that exports a component exports nothing else.
+ */
+import { SCATTER_MATRIX_MOST_AXES, scatterMatrixAxesThatFit, } from "../../scatter/ui/scatterMatrixLayout.js";
+/**
+ * The range the grid's count is held inside.
+ *
+ * Three things cap it 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 axisCount - How many components the run produced.
+ * @param width - Width of the figure, in pixels; `0` before it is measured.
+ * @returns See {@link ProjectionPairsCeiling}.
+ */
+export function projectionPairsCeiling(axisCount, width) {
+    const wanted = Math.min(SCATTER_MATRIX_MOST_AXES, Math.max(0, axisCount));
+    const fits = width > 0 ? scatterMatrixAxesThatFit(width, wanted) : wanted;
+    return { min: SMALLEST_GRID, max: Math.max(SMALLEST_GRID, fits) };
+}
+/** The fewest components a grid is worth drawing for. */
+const SMALLEST_GRID = 2;
+//# sourceMappingURL=projectionPairsCeiling.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionPairsCeiling.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionPairsCeiling.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EACL,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,yCAAyC,CAAC;AAUjD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,sBAAsB,CACpC,SAAiB,EACjB,KAAa;IAEb,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,wBAAwB,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC;IAC1E,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAC1E,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,IAAI,CAAC,EAAE,CAAC;AACpE,CAAC;AAED,yDAAyD;AACzD,MAAM,aAAa,GAAG,CAAC,CAAC"}

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

@@ -0,0 +1,51 @@
+/**
+ * What a viewer says about its selection, and the translation between the two
+ * ways of naming a row.
+ *
+ * A plot works in row numbers because that is what it drew, and a caller works
+ * in names because that is what its own table holds. Keeping the translation
+ * here, in one direction each way, is what lets the boundary between them be a
+ * documented promise rather than a habit each tab has to remember.
+ */
+import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+/** What a gesture did to a projection viewer's selection. */
+export interface ProjectionSelection {
+    /** The selected rows, by name, in the score matrix's row order. */
+    ids: readonly string[];
+    /** The same rows as indices into the score matrix. */
+    indices: readonly number[];
+    /** Whether the gesture replaced the previous selection, added to it, or cut from it. */
+    mode: ScatterSelectionMode;
+    /** Which gesture produced it. */
+    source: 'lasso' | 'point' | 'keyboard' | 'group' | 'clear' | 'all';
+}
+/**
+ * Where each name sits in the score matrix.
+ *
+ * The first row wins a repeated name. A duplicate id then costs the reader one
+ * unselectable row, which is a great deal better than silently moving their
+ * selection to whichever sample happened to be named the same thing last.
+ * @param ids - The row names, in the score matrix's row order.
+ * @returns The row each name stands for.
+ */
+export declare function indexProjectionIds(ids: readonly string[]): ReadonlyMap<string, number>;
+/**
+ * The rows a list of names stands for, ready for a plot to draw.
+ *
+ * A name nothing answers to is dropped rather than reported as a missing row:
+ * a caller restoring a selection saved before its data was filtered should get
+ * back the samples that are still there, not an error about the ones that are
+ * not.
+ * @param names - The names, or nothing at all.
+ * @param rowOfId - From {@link indexProjectionIds}.
+ * @returns The rows, in the order the names were given.
+ */
+export declare function projectionRowsOf(names: readonly string[] | undefined, rowOfId: ReadonlyMap<string, number>): readonly number[];
+/**
+ * The names a list of rows stands for, ready to hand back to a caller.
+ * @param rows - The rows, as indices into the score matrix.
+ * @param ids - The row names.
+ * @returns The names, in the order the rows were given.
+ */
+export declare function projectionNamesOf(rows: readonly number[], ids: readonly string[]): readonly string[];
+//# sourceMappingURL=projectionSelection.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionSelection.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionSelection.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wCAAwC,CAAC;AAEnF,6DAA6D;AAC7D,MAAM,WAAW,mBAAmB;IAClC,mEAAmE;IACnE,GAAG,EAAE,SAAS,MAAM,EAAE,CAAC;IACvB,sDAAsD;IACtD,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3B,wFAAwF;IACxF,IAAI,EAAE,oBAAoB,CAAC;IAC3B,iCAAiC;IACjC,MAAM,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,KAAK,CAAC;CACpE;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,GAAG,EAAE,SAAS,MAAM,EAAE,GACrB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAO7B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,EACpC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,GACnC,SAAS,MAAM,EAAE,CAQnB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,GAAG,EAAE,SAAS,MAAM,EAAE,GACrB,SAAS,MAAM,EAAE,CAOnB"}

package/lib/projection/ui/projectionSelection.js

@@ -0,0 +1,66 @@
+/**
+ * What a viewer says about its selection, and the translation between the two
+ * ways of naming a row.
+ *
+ * A plot works in row numbers because that is what it drew, and a caller works
+ * in names because that is what its own table holds. Keeping the translation
+ * here, in one direction each way, is what lets the boundary between them be a
+ * documented promise rather than a habit each tab has to remember.
+ */
+/**
+ * Where each name sits in the score matrix.
+ *
+ * The first row wins a repeated name. A duplicate id then costs the reader one
+ * unselectable row, which is a great deal better than silently moving their
+ * selection to whichever sample happened to be named the same thing last.
+ * @param ids - The row names, in the score matrix's row order.
+ * @returns The row each name stands for.
+ */
+export function indexProjectionIds(ids) {
+    const rows = new Map();
+    for (let index = 0; index < ids.length; index++) {
+        const id = ids[index];
+        if (id !== undefined && !rows.has(id))
+            rows.set(id, index);
+    }
+    return rows;
+}
+/**
+ * The rows a list of names stands for, ready for a plot to draw.
+ *
+ * A name nothing answers to is dropped rather than reported as a missing row:
+ * a caller restoring a selection saved before its data was filtered should get
+ * back the samples that are still there, not an error about the ones that are
+ * not.
+ * @param names - The names, or nothing at all.
+ * @param rowOfId - From {@link indexProjectionIds}.
+ * @returns The rows, in the order the names were given.
+ */
+export function projectionRowsOf(names, rowOfId) {
+    if (names === undefined)
+        return EMPTY_SELECTION;
+    const rows = [];
+    for (const name of names) {
+        const row = rowOfId.get(name);
+        if (row !== undefined)
+            rows.push(row);
+    }
+    return rows;
+}
+/**
+ * The names a list of rows stands for, ready to hand back to a caller.
+ * @param rows - The rows, as indices into the score matrix.
+ * @param ids - The row names.
+ * @returns The names, in the order the rows were given.
+ */
+export function projectionNamesOf(rows, ids) {
+    const names = [];
+    for (const row of rows) {
+        const name = ids[row];
+        if (name !== undefined)
+            names.push(name);
+    }
+    return names;
+}
+const EMPTY_SELECTION = [];
+//# sourceMappingURL=projectionSelection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionSelection.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionSelection.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAgBH;;;;;;;;GAQG;AACH,MAAM,UAAU,kBAAkB,CAChC,GAAsB;IAEtB,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;IACvC,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAChD,MAAM,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC;QACtB,IAAI,EAAE,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YAAE,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IAC7D,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAC9B,KAAoC,EACpC,OAAoC;IAEpC,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,eAAe,CAAC;IAChD,MAAM,IAAI,GAAa,EAAE,CAAC;IAC1B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC9B,IAAI,GAAG,KAAK,SAAS;YAAE,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACxC,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAuB,EACvB,GAAsB;IAEtB,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,IAAI,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;QACtB,IAAI,IAAI,KAAK,SAAS;YAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,eAAe,GAAsB,EAAE,CAAC"}

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

@@ -0,0 +1,59 @@
+/**
+ * What each tab answers when the reader presses the question mark.
+ *
+ * The viewer is meant to be embedded in somebody else's page, so the paragraph
+ * that used to stand under every figure now waits behind one glyph in the bar:
+ * a reader who wants it opens it, and everybody else pays no vertical space
+ * for it. Not one word of it was dropped in the move — the sentences are the
+ * reason a reader who has never met a component can read the figure at all —
+ * so they are built here, where what a tab claims about its own numbers can be
+ * checked without rendering a chart.
+ */
+import type { ExplainedShares } from '../core/explainedShares.ts';
+import type { LoadingProfiles } from '../core/loadingProfiles.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+/**
+ * What the pair grid says about itself.
+ * @param copy - The words the viewer writes.
+ * @param groupLabel - What the set of groups is called.
+ * @param colored - Whether colour stands for the group at all; uncoloured, the
+ * sentence naming the colour would name something the grid is not drawing.
+ * @returns The paragraph.
+ */
+export declare function projectionPairsInfo(copy: ProjectionCopy, groupLabel: string, colored: boolean): string;
+/**
+ * What the "what differs" panels say about themselves.
+ *
+ * Both sentences are needed and neither stands in for the other: the first
+ * says what a panel draws, which changes with the view, and the second says
+ * what its colours mean, which is the only place the grey line is named.
+ * @param profiles - The panels as they were built, or `null` when the run
+ * reported no weights and there is nothing to explain.
+ * @param copy - The words the viewer writes.
+ * @param sample - What the one selected sample is called.
+ * @returns The paragraph.
+ */
+export declare function projectionVariablesInfo(profiles: LoadingProfiles | null, copy: ProjectionCopy, sample: string): string;
+/**
+ * What the shares figure says about itself, including its own arithmetic.
+ *
+ * The computed sentence sits between the two written ones because it is the
+ * answer the reader came for — how many components they have to keep — while
+ * the sentences around it say what a bar is and what its colour means.
+ * @param shares - The bars, already worked out.
+ * @param copy - The words the viewer writes.
+ * @returns The paragraph.
+ */
+export declare function projectionSharesInfo(shares: ExplainedShares | null, copy: ProjectionCopy): string;
+/**
+ * What the shares tab says about its own numbers, in two sentences at most.
+ *
+ * The second is left out when the reader asked for no target, and when the
+ * first component already reaches it: "the first 1 components together" is
+ * both ungrammatical and a restatement of the sentence before it.
+ * @param shares - The bars.
+ * @param copy - The words the viewer writes.
+ * @returns The sentence.
+ */
+export declare function projectionSharesSentence(shares: ExplainedShares, copy: ProjectionCopy): string;
+//# sourceMappingURL=projectionTabInfo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionTabInfo.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionTabInfo.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAKhE;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,cAAc,EACpB,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,OAAO,GACf,MAAM,CAIR;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,eAAe,GAAG,IAAI,EAChC,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,MAAM,GACb,MAAM,CAIR;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,eAAe,GAAG,IAAI,EAC9B,IAAI,EAAE,cAAc,GACnB,MAAM,CAKR;AAED;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CACtC,MAAM,EAAE,eAAe,EACvB,IAAI,EAAE,cAAc,GACnB,MAAM,CAkBR"}

package/lib/projection/ui/projectionTabInfo.js

@@ -0,0 +1,108 @@
+/**
+ * What each tab answers when the reader presses the question mark.
+ *
+ * The viewer is meant to be embedded in somebody else's page, so the paragraph
+ * that used to stand under every figure now waits behind one glyph in the bar:
+ * a reader who wants it opens it, and everybody else pays no vertical space
+ * for it. Not one word of it was dropped in the move — the sentences are the
+ * reason a reader who has never met a component can read the figure at all —
+ * so they are built here, where what a tab claims about its own numbers can be
+ * checked without rendering a chart.
+ */
+import { chartShare } from "../../chart/core/chartLabels.js";
+import { fillCopy } from "../core/projectionCopy.js";
+import { legendTitle, variablesCaption } from "./projectionVariablesWords.js";
+/**
+ * What the pair grid says about itself.
+ * @param copy - The words the viewer writes.
+ * @param groupLabel - What the set of groups is called.
+ * @param colored - Whether colour stands for the group at all; uncoloured, the
+ * sentence naming the colour would name something the grid is not drawing.
+ * @returns The paragraph.
+ */
+export function projectionPairsInfo(copy, groupLabel, colored) {
+    if (!colored)
+        return copy.intro.pairs;
+    const key = fillCopy(copy.legend.pairs, { groups: groupLabel });
+    return `${copy.intro.pairs} ${key}`;
+}
+/**
+ * What the "what differs" panels say about themselves.
+ *
+ * Both sentences are needed and neither stands in for the other: the first
+ * says what a panel draws, which changes with the view, and the second says
+ * what its colours mean, which is the only place the grey line is named.
+ * @param profiles - The panels as they were built, or `null` when the run
+ * reported no weights and there is nothing to explain.
+ * @param copy - The words the viewer writes.
+ * @param sample - What the one selected sample is called.
+ * @returns The paragraph.
+ */
+export function projectionVariablesInfo(profiles, copy, sample) {
+    if (profiles === null)
+        return '';
+    const caption = variablesCaption(profiles, copy);
+    return `${caption} ${legendTitle(profiles, copy, sample)}`;
+}
+/**
+ * What the shares figure says about itself, including its own arithmetic.
+ *
+ * The computed sentence sits between the two written ones because it is the
+ * answer the reader came for — how many components they have to keep — while
+ * the sentences around it say what a bar is and what its colour means.
+ * @param shares - The bars, already worked out.
+ * @param copy - The words the viewer writes.
+ * @returns The paragraph.
+ */
+export function projectionSharesInfo(shares, copy) {
+    if (shares === null)
+        return copy.intro.shares;
+    const counted = projectionSharesSentence(shares, copy);
+    const parts = [copy.intro.shares, counted, copy.legend.shares];
+    return parts.filter((part) => part !== '').join(' ');
+}
+/**
+ * What the shares tab says about its own numbers, in two sentences at most.
+ *
+ * The second is left out when the reader asked for no target, and when the
+ * first component already reaches it: "the first 1 components together" is
+ * both ungrammatical and a restatement of the sentence before it.
+ * @param shares - The bars.
+ * @param copy - The words the viewer writes.
+ * @returns The sentence.
+ */
+export function projectionSharesSentence(shares, copy) {
+    const { components, target, reachesTargetAt } = shares;
+    const first = components[0];
+    if (first === undefined)
+        return '';
+    const opening = fillCopy(copy.sentence.sharesFirst, {
+        percent: writeShare(first.share),
+    });
+    if (target === 0 || reachesTargetAt === 1)
+        return opening;
+    if (reachesTargetAt !== null) {
+        return `${opening} ${fillCopy(copy.sentence.sharesTarget, {
+            count: String(reachesTargetAt),
+            percent: writeShare(components[reachesTargetAt - 1]?.cumulative ?? 0),
+        })}`;
+    }
+    return `${opening} ${fillCopy(copy.sentence.sharesNoTarget, {
+        count: String(components.length),
+        percent: writeShare(components.at(-1)?.cumulative ?? 0),
+    })}`;
+}
+/**
+ * A share written as a percentage, at the precision every other figure of the
+ * family writes it at.
+ *
+ * The bars beside this sentence are named `PC1 — 73.0 %`, so a sentence saying
+ * 72.96% would put the same quantity on screen twice in two shapes and leave
+ * the reader deciding whether they are one number or two.
+ * @param share - The share, between 0 and 1.
+ * @returns It, written out.
+ */
+function writeShare(share) {
+    return `${chartShare(share)}%`;
+}
+//# sourceMappingURL=projectionTabInfo.js.map

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

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

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

@@ -0,0 +1,49 @@
+/**
+ * The two figures a tab and the settings bar both have to know about.
+ *
+ * The panels of "what differs" and the bars of "how much each explains" are
+ * each read twice: once by the figure that draws them, and once by the
+ * question mark in the bar, which says in words what the picture says in
+ * marks. Building them here means the pair cannot disagree, and that a
+ * paragraph quoting `95.8%` is quoting the number the bars were drawn from
+ * rather than a second calculation of it.
+ */
+import type { ExplainedShares } from '../core/explainedShares.ts';
+import type { LoadingProfiles } from '../core/loadingProfiles.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ProjectionSamples } from '../core/projectionSamples.ts';
+/** What {@link useProjectionModels} needs. */
+export interface ProjectionModelsInput {
+    /** What the run produced, whatever produced it. */
+    result: ProjectionResult;
+    /** Who the rows are, for naming the sample a panel rebuilds. */
+    samples: ProjectionSamples;
+    /** Every option, already made safe against the result. */
+    options: ProjectionOptions;
+    /** The selected rows, as indices into the score matrix. */
+    selected: readonly number[];
+}
+/** The figures the tabs and the bar share. */
+export interface ProjectionModels {
+    /**
+     * The "what differs" panels, or `null` when the run reported no weights and
+     * the tab is not offered at all.
+     */
+    profiles: LoadingProfiles | null;
+    /** The "how much each explains" bars. */
+    shares: ExplainedShares;
+    /**
+     * What the one selected sample is called, which is the only row a panel ever
+     * names. With none or several selected it is the row number, so the sentence
+     * about it still reads.
+     */
+    sampleName: string;
+}
+/**
+ * Build both, once per change.
+ * @param input - See {@link ProjectionModelsInput}.
+ * @returns See {@link ProjectionModels}.
+ */
+export declare function useProjectionModels(input: ProjectionModelsInput): ProjectionModels;
+//# sourceMappingURL=projectionTabModels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionTabModels.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionTabModels.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAKH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,8CAA8C;AAC9C,MAAM,WAAW,qBAAqB;IACpC,mDAAmD;IACnD,MAAM,EAAE,gBAAgB,CAAC;IACzB,gEAAgE;IAChE,OAAO,EAAE,iBAAiB,CAAC;IAC3B,0DAA0D;IAC1D,OAAO,EAAE,iBAAiB,CAAC;IAC3B,2DAA2D;IAC3D,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;CAC7B;AAED,8CAA8C;AAC9C,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC,yCAAyC;IACzC,MAAM,EAAE,eAAe,CAAC;IACxB;;;;OAIG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,qBAAqB,GAC3B,gBAAgB,CA+BlB"}

package/lib/projection/ui/projectionTabModels.js

@@ -0,0 +1,59 @@
+/**
+ * The two figures a tab and the settings bar both have to know about.
+ *
+ * The panels of "what differs" and the bars of "how much each explains" are
+ * each read twice: once by the figure that draws them, and once by the
+ * question mark in the bar, which says in words what the picture says in
+ * marks. Building them here means the pair cannot disagree, and that a
+ * paragraph quoting `95.8%` is quoting the number the bars were drawn from
+ * rather than a second calculation of it.
+ */
+import { useMemo } from 'react';
+import { explainedShares } from "../core/explainedShares.js";
+import { loadingProfiles } from "../core/loadingProfiles.js";
+/**
+ * Build both, once per change.
+ * @param input - See {@link ProjectionModelsInput}.
+ * @returns See {@link ProjectionModels}.
+ */
+export function useProjectionModels(input) {
+    const { result, samples, options, selected } = input;
+    const { loadings, axes, scores } = result;
+    const one = selected.length === 1 ? (selected[0] ?? -1) : -1;
+    const profiles = useMemo(() => {
+        if (loadings === undefined)
+            return null;
+        return loadingProfiles({
+            loadings,
+            axes,
+            view: options.variablesView,
+            count: options.variablesCount,
+            spread: options.spread,
+            sharedScale: options.sharedScale,
+            order: options.variableOrder,
+            sampleScores: one < 0 ? undefined : rowScores(scores, one, options.variablesCount),
+        });
+    }, [loadings, axes, scores, options, one]);
+    const shares = useMemo(() => explainedShares(axes, { target: options.shareTarget }), [axes, options.shareTarget]);
+    return {
+        profiles,
+        shares,
+        sampleName: samples.ids[one] ?? `Row ${one + 1}`,
+    };
+}
+/**
+ * One row of the score matrix, read where it stands.
+ * @param scores - Where every sample landed.
+ * @param row - Which row.
+ * @param count - How many components the panels draw.
+ * @returns That sample's scores.
+ */
+function rowScores(scores, row, count) {
+    const wanted = Math.max(0, Math.min(count, scores.columns));
+    const values = new Array(wanted);
+    for (let column = 0; column < wanted; column++) {
+        values[column] = scores.get(row, column);
+    }
+    return values;
+}
+//# sourceMappingURL=projectionTabModels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionTabModels.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionTabModels.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAIhC,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAkC7D;;;;GAIG;AACH,MAAM,UAAU,mBAAmB,CACjC,KAA4B;IAE5B,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACrD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAE1C,MAAM,GAAG,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE7D,MAAM,QAAQ,GAAG,OAAO,CAAyB,GAAG,EAAE;QACpD,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAO,IAAI,CAAC;QACxC,OAAO,eAAe,CAAC;YACrB,QAAQ;YACR,IAAI;YACJ,IAAI,EAAE,OAAO,CAAC,aAAa;YAC3B,KAAK,EAAE,OAAO,CAAC,cAAc;YAC7B,MAAM,EAAE,OAAO,CAAC,MAAM;YACtB,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,KAAK,EAAE,OAAO,CAAC,aAAa;YAC5B,YAAY,EACV,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,cAAc,CAAC;SACvE,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAE3C,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,WAAW,EAAE,CAAC,EAC5D,CAAC,IAAI,EAAE,OAAO,CAAC,WAAW,CAAC,CAC5B,CAAC;IAEF,OAAO;QACL,QAAQ;QACR,MAAM;QACN,UAAU,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,OAAO,GAAG,GAAG,CAAC,EAAE;KACjD,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,MAAkB,EAAE,GAAW,EAAE,KAAa;IAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC;IAC5D,MAAM,MAAM,GAAG,IAAI,KAAK,CAAS,MAAM,CAAC,CAAC;IACzC,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,EAAE,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC"}

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

@@ -0,0 +1,131 @@
+/**
+ * Every rule the tabs are drawn with.
+ *
+ * They are here rather than in each tab because the tabs have to read as one
+ * figure seen several ways: a panel title on "what differs" and the name over
+ * a bar on "how much each explains" are the same size and the same grey, or
+ * the reader meets what looks like two products in one viewer. Every colour is
+ * a family token, so a tab on any site of the family is that site's own grey.
+ *
+ * The numbers are the ones an embedded figure can afford. The viewer is a
+ * guest on somebody else's page, so nothing here reserves room for chrome that
+ * is not carrying information: the explanation is behind the question mark in
+ * the bar and the key floats on the picture, which leaves the tab itself
+ * spending its height on the figure alone.
+ */
+/** Height a tab takes when the viewer does not say, and the least one panel gets. */
+export declare const PROJECTION_TAB_HEIGHT = 420;
+export declare const SMALLEST_PANEL = 110;
+/** Room the title over a panel takes, which the panel itself gives up. */
+export declare const PANEL_TITLE_ROOM = 18;
+/**
+ * Where the plot rectangle falls inside a figure whose two axes are both
+ * named, which is every scores map this viewer draws.
+ *
+ * It is the frame's own arithmetic repeated rather than measured, because the
+ * chrome that has to stay off the axis labels — the floating key — is laid out
+ * in HTML beside the drawing rather than inside it, and has nothing to measure
+ * until after it has been placed.
+ */
+export declare const PROJECTION_PLOT_ROOM: {
+    readonly top: 10;
+    readonly right: 12;
+    readonly bottom: number;
+    readonly left: number;
+};
+/**
+ * The rectangle the data is drawn in, as a layer of its own.
+ *
+ * Chrome placed in it is placed against the picture rather than against the
+ * figure's box, which is what keeps a floating key off the axis labels without
+ * either of them knowing about the other. It takes no pointer events: only the
+ * card inside it takes those back.
+ */
+export declare const PROJECTION_PLOT_AREA_STYLE: {
+    readonly position: "absolute";
+    readonly top: 10;
+    readonly right: 12;
+    readonly bottom: number;
+    readonly left: number;
+    readonly pointerEvents: "none";
+};
+/** A column of panels, tight enough that the stack reads as one figure. */
+export declare const STACK_STYLE: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly gap: 2;
+};
+/**
+ * A panel's title.
+ *
+ * The swatch carries the component's colour and the words never do: the
+ * palette holds a yellow, and a yellow title on a white ground is a title
+ * nobody reads.
+ */
+export declare const PANEL_TITLE_STYLE: {
+    readonly display: "inline-flex";
+    readonly alignItems: "center";
+    readonly gap: 5;
+    readonly color: "var(--text)";
+    readonly fontSize: 11;
+    readonly fontWeight: 600;
+};
+/** The square of colour in front of a panel's title or a bar's name. */
+export declare const SWATCH_STYLE: {
+    readonly display: "inline-block";
+    readonly width: 9;
+    readonly height: 9;
+    readonly borderRadius: 2;
+};
+/**
+ * Everything, as a percentage.
+ *
+ * The shares tab draws its vertical axis from nothing to this rather than from
+ * 0 to 1, so its ticks read 0, 25, 50 … and a reader never has to multiply a
+ * fraction in their head to compare a bar with the sentence about it.
+ */
+export declare const WHOLE_SHARE = 100;
+/** Room under the shares plot for the component names and the caption below them. */
+export declare const SHARES_BOTTOM_ROOM: number;
+/** Where the left edge of the shares plot falls, which its names are laid out from. */
+export declare const SHARES_LEFT_ROOM: number;
+/** Where the right edge of the shares plot falls. */
+export declare const SHARES_RIGHT_ROOM: 12;
+/** Baselines of a component's name and of the caption under the names. */
+export declare const SHARES_NAME_OFFSET = 15;
+export declare const SHARES_CAPTION_OFFSET: number;
+/** The layer the component names are written in, outside the frame's own clip. */
+export declare const AXIS_LAYER_STYLE: {
+    readonly position: "absolute";
+    readonly inset: 0;
+    readonly pointerEvents: "none";
+};
+/** One component's name under its bar. */
+export declare const AXIS_NAME_STYLE: {
+    readonly fill: "var(--text-muted)";
+    readonly fontSize: 11;
+    readonly userSelect: "none";
+};
+/** What the horizontal axis measures, written under the names. */
+export declare const AXIS_CAPTION_STYLE: {
+    readonly fill: "var(--text-muted)";
+    readonly fontSize: 12;
+    readonly fontWeight: 500;
+    readonly userSelect: "none";
+};
+/** The running total's own name, written at the right-hand end of its line. */
+export declare const TOTAL_LABEL_STYLE: {
+    readonly fill: "var(--text-muted)";
+    readonly fontSize: 11;
+    readonly fontWeight: 600;
+    readonly userSelect: "none";
+};
+/**
+ * How much one press of the target stepper moves it, in percentage points.
+ *
+ * The bar and the panel behind the cog step the same setting, so they step it
+ * by the same amount: a reader who nudges the target on one and then on the
+ * other must not find it moving in two different sizes.
+ */
+export declare const PROJECTION_SHARE_STEP = 5;
+//# sourceMappingURL=projectionTabStyles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionTabStyles.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionTabStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAUH,qFAAqF;AACrF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,0EAA0E;AAC1E,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;;;;;;;GAQG;AACH,eAAO,MAAM,oBAAoB;;;;;CAQvB,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B;;;;;;;CAOL,CAAC;AAEnC,2EAA2E;AAC3E,eAAO,MAAM,WAAW;;;;CAIU,CAAC;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB;;;;;;;CAOI,CAAC;AAEnC,wEAAwE;AACxE,eAAO,MAAM,YAAY;;;;;CAKS,CAAC;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,qFAAqF;AACrF,eAAO,MAAM,kBAAkB,QAC+C,CAAC;AAE/E,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,QAC2C,CAAC;AAEzE,qDAAqD;AACrD,eAAO,MAAM,iBAAiB,IAA2B,CAAC;AAE1D,0EAA0E;AAC1E,eAAO,MAAM,kBAAkB,KAAK,CAAC;AACrC,eAAO,MAAM,qBAAqB,QACW,CAAC;AAE9C,kFAAkF;AAClF,eAAO,MAAM,gBAAgB;;;;CAIK,CAAC;AAEnC,0CAA0C;AAC1C,eAAO,MAAM,eAAe;;;;CAIM,CAAC;AAEnC,kEAAkE;AAClE,eAAO,MAAM,kBAAkB;;;;;CAKG,CAAC;AAEnC,+EAA+E;AAC/E,eAAO,MAAM,iBAAiB;;;;;CAKI,CAAC;AAEnC;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,IAAI,CAAC"}