react-cheminfo 0.9.0 → 0.11.0

package/lib/projection/ui/projectionBarStyles.js

@@ -0,0 +1,154 @@
+/**
+ * Every rule the settings bar over the figure is drawn with.
+ *
+ * They sit apart from the rules the tabs themselves are drawn with because the
+ * bar is the viewer's own chrome rather than part of any figure: it is one row
+ * whatever the tab, and what changes with the figure's width is how much of
+ * itself it writes rather than what it holds. Every colour is a family token,
+ * so the bar on any site of the family is that site's own grey.
+ */
+/**
+ * The row the settings bar is laid into, which is one height for every tab.
+ *
+ * Two of the four tabs put a picker on the bar and two put a stepper, and a
+ * picker is the taller of the two whatever size the surface asks it for.
+ * Without a floor the bar would be six pixels shorter on the pair grid than on
+ * the map, and the whole figure under it would jump every time the reader
+ * moved between them — which is the one thing an embedded figure must never do
+ * to the page hosting it.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The row's rules.
+ */
+export function projectionBarRowStyle(metrics) {
+    return {
+        display: 'flex',
+        alignItems: 'stretch',
+        minHeight: metrics.paddingY * 2 + Math.max(metrics.controlHeight, PICKER_HEIGHT),
+    };
+}
+/** How tall a picker stands, which no measurement of ours makes it smaller. */
+const PICKER_HEIGHT = 30;
+/**
+ * The box the strip of views sits in.
+ *
+ * On every width but the narrowest it refuses to shrink, so a bar whose
+ * estimate was a few pixels out clips nothing and the views keep their words.
+ * At the last rung it becomes a scroller instead: a figure three hundred
+ * pixels wide cannot hold four names however short they are written, and a
+ * strip that scrolls is one the reader can still reach every view from, where
+ * a strip squeezed further is a row of initials nobody can read.
+ *
+ * Two things make that scroller read as deliberate rather than as a fault. Its
+ * ceiling is set by the caller from what the settings and the glyphs need, so
+ * the row can never push the cog off the edge of the figure; and its trailing
+ * edge fades, so a name cut in half says there is more to the right instead of
+ * looking clipped. The scrollbar itself is hidden — inside a thirty pixel bar
+ * it would take a fifth of the height and say nothing the fade does not.
+ * @param scrolls - Whether the strip is at the rung that lets it scroll.
+ * @param maxWidth - The most it may take, in pixels.
+ * @returns The box's rules.
+ */
+export function projectionTabTrackStyle(scrolls, maxWidth) {
+    if (!scrolls)
+        return { display: 'flex', flexShrink: 0 };
+    return {
+        boxSizing: 'border-box',
+        display: 'flex',
+        minWidth: 0,
+        maxWidth,
+        paddingRight: PROJECTION_TRACK_FADE,
+        overflowX: 'auto',
+        scrollbarWidth: 'none',
+        maskImage: TRACK_FADE_MASK,
+        WebkitMaskImage: TRACK_FADE_MASK,
+    };
+}
+/**
+ * How wide the strip's trailing edge fades over.
+ *
+ * The same run of pixels is kept clear after the last view as well, so a
+ * reader scrolled to the end of the strip is not shown its last name fading
+ * out — which would say there is more when there is not.
+ */
+const PROJECTION_TRACK_FADE = 14;
+const TRACK_FADE_MASK = `linear-gradient(to right, black calc(100% - ${PROJECTION_TRACK_FADE}px), transparent)`;
+/**
+ * Where a scrolling strip has to sit for the view in force to be read.
+ *
+ * A view wider than the strip itself is shown from its start rather than its
+ * end: on the narrowest figures the name in force does not fit at all, and a
+ * reader shown its last three letters cannot tell which view they are on.
+ * @param left - The view's left edge inside the strip.
+ * @param right - Its right edge.
+ * @param scrollLeft - Where the strip is scrolled to now.
+ * @param clientWidth - How much of the strip is in sight.
+ * @returns Where it should be scrolled to; unchanged when the view is in sight.
+ */
+export function projectionTabScroll(left, right, scrollLeft, clientWidth) {
+    const room = clientWidth - PROJECTION_TRACK_FADE;
+    if (right - left >= room || left < scrollLeft)
+        return left;
+    if (right > scrollLeft + room)
+        return right - room;
+    return scrollLeft;
+}
+/**
+ * The settings at the far end of the bar.
+ *
+ * They never shrink. A flex row hands its shrinkage out in proportion to what
+ * each side asked for, which would take pixels off a chip that is already the
+ * shortest honest way to write the configuration — so the strip of views is
+ * the one thing that gives, and it gives by scrolling rather than by clipping.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The end's rules.
+ */
+export function projectionBarEndStyle(metrics) {
+    return {
+        display: 'flex',
+        flexShrink: 0,
+        alignItems: 'center',
+        gap: metrics.gap,
+    };
+}
+/**
+ * The figure's own explanation, once it has folded in behind the cog.
+ *
+ * On the narrowest figures the question mark is the glyph that goes, because
+ * the reader still has to be able to reach the settings and the second tier —
+ * so the paragraph it used to open is written at the head of the panel the cog
+ * opens instead. Not one word of it is dropped in the move.
+ *
+ * It brings its own room and its own hairline, because the panel under it
+ * brings both of those and the popover holding the two brings neither: a
+ * paragraph flush against the edge of a card reads as a rendering fault, and
+ * one running straight into a panel header reads as part of the header.
+ *
+ * The band and the measure are two rules rather than one. Capping the band
+ * itself would stop its hairline short of both edges of a panel wider than the
+ * cap, which reads as a mis-drawn line rather than as a division — so the band
+ * takes the panel's width and the sentence inside it is what is held to a
+ * readable measure.
+ * @param metrics - The measurements the chrome is drawn from.
+ * @returns The band's rules.
+ */
+export function projectionFoldedCaptionStyle(metrics) {
+    return {
+        padding: `${metrics.gap + 5}px ${metrics.gap + 8}px ${metrics.gap + 4}px`,
+        borderBottom: '1px solid var(--border)',
+        color: 'var(--text)',
+        fontSize: metrics.labelSize + 1,
+        lineHeight: 1.4,
+        textWrap: 'pretty',
+    };
+}
+/**
+ * The sentence inside that band.
+ *
+ * Capped short of a wide panel, because a line running the full width of one
+ * is a line the eye loses the start of on the way back from the end of it.
+ */
+export const PROJECTION_CAPTION_TEXT_STYLE = {
+    margin: 0,
+    maxWidth: 280,
+};
+//# sourceMappingURL=projectionBarStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionBarStyles.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionBarStyles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAuB;IAC3D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,SAAS;QACrB,SAAS,EACP,OAAO,CAAC,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,aAAa,EAAE,aAAa,CAAC;KACxE,CAAC;AACJ,CAAC;AAED,+EAA+E;AAC/E,MAAM,aAAa,GAAG,EAAE,CAAC;AAEzB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,uBAAuB,CACrC,OAAgB,EAChB,QAAgB;IAEhB,IAAI,CAAC,OAAO;QAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC;IACxD,OAAO;QACL,SAAS,EAAE,YAAY;QACvB,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,CAAC;QACX,QAAQ;QACR,YAAY,EAAE,qBAAqB;QACnC,SAAS,EAAE,MAAM;QACjB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE,eAAe;QAC1B,eAAe,EAAE,eAAe;KACjC,CAAC;AACJ,CAAC;AAED;;;;;;GAMG;AACH,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAEjC,MAAM,eAAe,GAAG,+CAA+C,qBAAqB,mBAAmB,CAAC;AAEhH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,mBAAmB,CACjC,IAAY,EACZ,KAAa,EACb,UAAkB,EAClB,WAAmB;IAEnB,MAAM,IAAI,GAAG,WAAW,GAAG,qBAAqB,CAAC;IACjD,IAAI,KAAK,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG,UAAU;QAAE,OAAO,IAAI,CAAC;IAC3D,IAAI,KAAK,GAAG,UAAU,GAAG,IAAI;QAAE,OAAO,KAAK,GAAG,IAAI,CAAC;IACnD,OAAO,UAAU,CAAC;AACpB,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,qBAAqB,CAAC,OAAuB;IAC3D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,OAAO,CAAC,GAAG;KACjB,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,4BAA4B,CAC1C,OAAuB;IAEvB,OAAO;QACL,OAAO,EAAE,GAAG,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,MAAM,OAAO,CAAC,GAAG,GAAG,CAAC,IAAI;QACzE,YAAY,EAAE,yBAAyB;QACvC,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE,OAAO,CAAC,SAAS,GAAG,CAAC;QAC/B,UAAU,EAAE,GAAG;QACf,QAAQ,EAAE,QAAQ;KACnB,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG;IAC3C,MAAM,EAAE,CAAC;IACT,QAAQ,EAAE,GAAG;CACmB,CAAC"}

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

@@ -0,0 +1,18 @@
+/**
+ * What the cloud's own settings offer.
+ *
+ * One list, read by the value menu on the bar and by the segmented control in
+ * the panel behind the cog, so the two can never offer different words for the
+ * same thing.
+ */
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
+/**
+ * What a plain drag does.
+ *
+ * Written as the action rather than as the name of a mode: `Turn` and `Select`
+ * are what the reader's hand is about to do, where `Orbit` would be a state
+ * they have to translate first.
+ */
+export declare const CLOUD_GESTURE_CHOICES: ReadonlyArray<OverlayOption<CloudGesture>>;
+//# sourceMappingURL=projectionCloudChoices.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionCloudChoices.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionCloudChoices.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEzE;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC,aAAa,CAAC,YAAY,CAAC,CAI1E,CAAC"}

package/lib/projection/ui/projectionCloudChoices.js

@@ -0,0 +1,19 @@
+/**
+ * What the cloud's own settings offer.
+ *
+ * One list, read by the value menu on the bar and by the segmented control in
+ * the panel behind the cog, so the two can never offer different words for the
+ * same thing.
+ */
+/**
+ * What a plain drag does.
+ *
+ * Written as the action rather than as the name of a mode: `Turn` and `Select`
+ * are what the reader's hand is about to do, where `Orbit` would be a state
+ * they have to translate first.
+ */
+export const CLOUD_GESTURE_CHOICES = [
+    { value: 'turn', label: 'Turn' },
+    { value: 'select', label: 'Select' },
+];
+//# sourceMappingURL=projectionCloudChoices.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionCloudChoices.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionCloudChoices.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAChC;IACE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC"}

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

@@ -0,0 +1,50 @@
+/**
+ * How large a group outline is: what the picker offers, what each choice
+ * reads, and how one travels through a `<select>` and back.
+ *
+ * All of it in one module because the same size has to be written twice — in
+ * the control that sets it and in the legend sentence that explains it — and a
+ * pair like that drifts apart the moment each file spells it for itself.
+ */
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+/**
+ * How much of a group its outline holds, written the way a sentence wants it.
+ *
+ * A share rather than a multiple of the spread, because on a map a number of
+ * standard deviations does not hold the fraction everyone has been taught it
+ * does — two of them cover about 86 % of a group and not 95 % — and a legend
+ * quoting the multiple is how a figure comes to promise more than it draws.
+ * @param size - How large the outlines are, or `null` for none.
+ * @returns The share, e.g. `95%`; the empty string when nothing is outlined.
+ */
+export declare function ellipseCoverageText(size: EllipseSize | null): string;
+/**
+ * What one choice of the outline picker reads.
+ * @param size - The size that choice stands for, or `null` for no outlines.
+ * @returns The label, e.g. `95% of samples`, or `2 SD (about 86%)`.
+ */
+export declare function ellipseSizeLabel(size: EllipseSize | null): string;
+/**
+ * The sizes the picker offers, with the current one kept in the list.
+ *
+ * A site that asked for a size of its own — a multiple of the spread, or a
+ * share the four do not cover — keeps its place at the head of the list, so
+ * opening the picker never silently changes the figure.
+ * @param current - The size the map is drawn at, or `null` for no outlines.
+ * @returns The choices, in the order they are offered.
+ */
+export declare function ellipseChoices(current: EllipseSize | null): OverlayOption[];
+/**
+ * The value one size travels as, through a picker that only carries strings.
+ * @param size - The size, or `null` for no outlines.
+ * @returns The value.
+ */
+export declare function ellipseKey(size: EllipseSize | null): string;
+/**
+ * The size a picker's value stands for.
+ * @param key - The value, from {@link ellipseKey}.
+ * @returns The size; `null` for no outlines, and for anything unreadable, since a figure with no outlines is the safe reading of a value nobody wrote.
+ */
+export declare function ellipseSize(key: string): EllipseSize | null;
+//# sourceMappingURL=projectionEllipse.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionEllipse.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionEllipse.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAG3E;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAOpE;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAKjE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,aAAa,EAAE,CAe3E;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAI3D;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAQ3D"}

package/lib/projection/ui/projectionEllipse.js

@@ -0,0 +1,101 @@
+/**
+ * How large a group outline is: what the picker offers, what each choice
+ * reads, and how one travels through a `<select>` and back.
+ *
+ * All of it in one module because the same size has to be written twice — in
+ * the control that sets it and in the legend sentence that explains it — and a
+ * pair like that drifts apart the moment each file spells it for itself.
+ */
+import { coverageForStandardDeviations } from "../../scatter/core/ellipseCoverage.js";
+/**
+ * How much of a group its outline holds, written the way a sentence wants it.
+ *
+ * A share rather than a multiple of the spread, because on a map a number of
+ * standard deviations does not hold the fraction everyone has been taught it
+ * does — two of them cover about 86 % of a group and not 95 % — and a legend
+ * quoting the multiple is how a figure comes to promise more than it draws.
+ * @param size - How large the outlines are, or `null` for none.
+ * @returns The share, e.g. `95%`; the empty string when nothing is outlined.
+ */
+export function ellipseCoverageText(size) {
+    if (size === null)
+        return '';
+    const share = size.kind === 'coverage'
+        ? size.probability
+        : coverageForStandardDeviations(size.standardDeviations);
+    return `${Math.round(share * 100)}%`;
+}
+/**
+ * What one choice of the outline picker reads.
+ * @param size - The size that choice stands for, or `null` for no outlines.
+ * @returns The label, e.g. `95% of samples`, or `2 SD (about 86%)`.
+ */
+export function ellipseSizeLabel(size) {
+    if (size === null)
+        return NO_OUTLINES_LABEL;
+    const share = ellipseCoverageText(size);
+    if (size.kind === 'coverage')
+        return `${share} of samples`;
+    return `${size.standardDeviations} SD (about ${share})`;
+}
+/**
+ * The sizes the picker offers, with the current one kept in the list.
+ *
+ * A site that asked for a size of its own — a multiple of the spread, or a
+ * share the four do not cover — keeps its place at the head of the list, so
+ * opening the picker never silently changes the figure.
+ * @param current - The size the map is drawn at, or `null` for no outlines.
+ * @returns The choices, in the order they are offered.
+ */
+export function ellipseChoices(current) {
+    const choices = [
+        { value: NO_ELLIPSE, label: ellipseSizeLabel(null) },
+    ];
+    for (const probability of ELLIPSE_SHARES) {
+        const size = { kind: 'coverage', probability };
+        choices.push({ value: ellipseKey(size), label: ellipseSizeLabel(size) });
+    }
+    const key = ellipseKey(current);
+    for (const choice of choices) {
+        if (choice.value === key)
+            return choices;
+    }
+    choices.splice(1, 0, { value: key, label: ellipseSizeLabel(current) });
+    return choices;
+}
+/**
+ * The value one size travels as, through a picker that only carries strings.
+ * @param size - The size, or `null` for no outlines.
+ * @returns The value.
+ */
+export function ellipseKey(size) {
+    if (size === null)
+        return NO_ELLIPSE;
+    if (size.kind === 'coverage')
+        return `share:${size.probability}`;
+    return `sd:${size.standardDeviations}`;
+}
+/**
+ * The size a picker's value stands for.
+ * @param key - The value, from {@link ellipseKey}.
+ * @returns The size; `null` for no outlines, and for anything unreadable, since a figure with no outlines is the safe reading of a value nobody wrote.
+ */
+export function ellipseSize(key) {
+    if (key === NO_ELLIPSE)
+        return null;
+    const value = Number(key.slice(key.indexOf(':') + 1));
+    if (!Number.isFinite(value))
+        return null;
+    if (key.startsWith('sd:')) {
+        return { kind: 'standardDeviations', standardDeviations: value };
+    }
+    return { kind: 'coverage', probability: value };
+}
+/*
+ * Written as shares of the samples rather than as multiples of the spread,
+ * which is the one decision this control makes for the reader.
+ */
+const ELLIPSE_SHARES = [0.5, 0.9, 0.95, 0.99];
+const NO_ELLIPSE = 'none';
+const NO_OUTLINES_LABEL = 'No outlines';
+//# sourceMappingURL=projectionEllipse.js.map

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * How large a group's shell is, in the words the cloud writes.
+ *
+ * It is the flat map's `projectionEllipse` with one dimension more, and the
+ * two cannot share an implementation for the one reason worth having a second
+ * module for: the same share is a different distance in three dimensions than
+ * in two. A shell drawn where the map's 95 % outline is drawn holds about 74 %
+ * of its group, so a cloud quoting the map's number promises a fifth of the
+ * samples it does not contain.
+ */
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+/**
+ * How much of a group its shell holds, written the way a sentence wants it.
+ * @param size - How large the shells are, or `null` for none.
+ * @returns The share, e.g. `95%`; the empty string when nothing is shelled.
+ */
+export declare function ellipsoidCoverageText(size: EllipseSize | null): string;
+/**
+ * What one choice of the cloud's shell picker reads.
+ * @param size - The size that choice stands for, or `null` for no shells.
+ * @returns The label, e.g. `95% of samples`, or `2 SD (about 74%)`.
+ */
+export declare function ellipsoidSizeLabel(size: EllipseSize | null): string;
+/**
+ * The sizes the cloud's picker offers, with the current one kept in the list.
+ *
+ * The same shares the map offers, because a share means the same thing in both
+ * pictures — it is the distance it comes out at that differs, and that is the
+ * geometry's business rather than the reader's. A size given in standard
+ * deviations is the one place the difference shows, and it is written here
+ * with the share a shell at that distance actually holds: two of them cover
+ * 86 % of a flat group and 74 % of a solid one.
+ * @param current - The size the cloud is drawn at, or `null` for no shells.
+ * @returns The choices, in the order they are offered.
+ */
+export declare function ellipsoidChoices(current: EllipseSize | null): OverlayOption[];
+//# sourceMappingURL=projectionEllipsoid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionEllipsoid.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionEllipsoid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yCAAyC,CAAC;AAO3E;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAOtE;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAKnE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,aAAa,EAAE,CAe7E"}

package/lib/projection/ui/projectionEllipsoid.js

@@ -0,0 +1,71 @@
+/**
+ * How large a group's shell is, in the words the cloud writes.
+ *
+ * It is the flat map's `projectionEllipse` with one dimension more, and the
+ * two cannot share an implementation for the one reason worth having a second
+ * module for: the same share is a different distance in three dimensions than
+ * in two. A shell drawn where the map's 95 % outline is drawn holds about 74 %
+ * of its group, so a cloud quoting the map's number promises a fifth of the
+ * samples it does not contain.
+ */
+import { coverageForStandardDeviations3 } from "../../scatter3d/core/ellipsoidCoverage.js";
+import { ellipseKey } from "./projectionEllipse.js";
+const WHOLE_SHARE = 100;
+/**
+ * How much of a group its shell holds, written the way a sentence wants it.
+ * @param size - How large the shells are, or `null` for none.
+ * @returns The share, e.g. `95%`; the empty string when nothing is shelled.
+ */
+export function ellipsoidCoverageText(size) {
+    if (size === null)
+        return '';
+    const share = size.kind === 'coverage'
+        ? size.probability
+        : coverageForStandardDeviations3(size.standardDeviations);
+    return `${Math.round(share * WHOLE_SHARE)}%`;
+}
+/**
+ * What one choice of the cloud's shell picker reads.
+ * @param size - The size that choice stands for, or `null` for no shells.
+ * @returns The label, e.g. `95% of samples`, or `2 SD (about 74%)`.
+ */
+export function ellipsoidSizeLabel(size) {
+    if (size === null)
+        return NO_SHELLS_LABEL;
+    const share = ellipsoidCoverageText(size);
+    if (size.kind === 'coverage')
+        return `${share} of samples`;
+    return `${size.standardDeviations} SD (about ${share})`;
+}
+/**
+ * The sizes the cloud's picker offers, with the current one kept in the list.
+ *
+ * The same shares the map offers, because a share means the same thing in both
+ * pictures — it is the distance it comes out at that differs, and that is the
+ * geometry's business rather than the reader's. A size given in standard
+ * deviations is the one place the difference shows, and it is written here
+ * with the share a shell at that distance actually holds: two of them cover
+ * 86 % of a flat group and 74 % of a solid one.
+ * @param current - The size the cloud is drawn at, or `null` for no shells.
+ * @returns The choices, in the order they are offered.
+ */
+export function ellipsoidChoices(current) {
+    const choices = [
+        { value: ellipseKey(null), label: ellipsoidSizeLabel(null) },
+    ];
+    for (const probability of SHELL_SHARES) {
+        const size = { kind: 'coverage', probability };
+        choices.push({ value: ellipseKey(size), label: ellipsoidSizeLabel(size) });
+    }
+    const key = ellipseKey(current);
+    for (const choice of choices) {
+        if (choice.value === key)
+            return choices;
+    }
+    choices.splice(1, 0, { value: key, label: ellipsoidSizeLabel(current) });
+    return choices;
+}
+/* The same four the map offers, so the two pictures are set the same way. */
+const SHELL_SHARES = [0.5, 0.9, 0.95, 0.99];
+const NO_SHELLS_LABEL = 'No shells';
+//# sourceMappingURL=projectionEllipsoid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionEllipsoid.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionEllipsoid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH,OAAO,EAAE,8BAA8B,EAAE,MAAM,2CAA2C,CAAC;AAE3F,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,WAAW,GAAG,GAAG,CAAC;AAExB;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,IAAwB;IAC5D,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO,EAAE,CAAC;IAC7B,MAAM,KAAK,GACT,IAAI,CAAC,IAAI,KAAK,UAAU;QACtB,CAAC,CAAC,IAAI,CAAC,WAAW;QAClB,CAAC,CAAC,8BAA8B,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;IAC9D,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC;AAC/C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAwB;IACzD,IAAI,IAAI,KAAK,IAAI;QAAE,OAAO,eAAe,CAAC;IAC1C,MAAM,KAAK,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC1C,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;QAAE,OAAO,GAAG,KAAK,aAAa,CAAC;IAC3D,OAAO,GAAG,IAAI,CAAC,kBAAkB,cAAc,KAAK,GAAG,CAAC;AAC1D,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,gBAAgB,CAAC,OAA2B;IAC1D,MAAM,OAAO,GAAoB;QAC/B,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAAE;KAC7D,CAAC;IACF,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACvC,MAAM,IAAI,GAAgB,EAAE,IAAI,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;QAC5D,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM,GAAG,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;IAChC,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,MAAM,CAAC,KAAK,KAAK,GAAG;YAAE,OAAO,OAAO,CAAC;IAC3C,CAAC;IACD,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;IACzE,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,6EAA6E;AAC7E,MAAM,YAAY,GAAsB,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAE/D,MAAM,eAAe,GAAG,WAAW,CAAC"}

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

@@ -0,0 +1,13 @@
+/**
+ * A number as a hover card writes it.
+ *
+ * Three decimals, with the trailing zeros dropped, so a column of scores lines
+ * up on its decimal point without `0.478000` claiming six digits of precision
+ * that a projection of four measurements does not have. A value that is not a
+ * number at all is written as a dash rather than as `NaN`, which reads to
+ * everyone outside programming as a fault in the page.
+ * @param value - The number.
+ * @returns It, written out.
+ */
+export declare function formatProjectionValue(value: number): string;
+//# sourceMappingURL=projectionFormat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionFormat.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionFormat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAG3D"}

package/lib/projection/ui/projectionFormat.js

@@ -0,0 +1,19 @@
+/**
+ * A number as a hover card writes it.
+ *
+ * Three decimals, with the trailing zeros dropped, so a column of scores lines
+ * up on its decimal point without `0.478000` claiming six digits of precision
+ * that a projection of four measurements does not have. A value that is not a
+ * number at all is written as a dash rather than as `NaN`, which reads to
+ * everyone outside programming as a fault in the page.
+ * @param value - The number.
+ * @returns It, written out.
+ */
+export function formatProjectionValue(value) {
+    if (!Number.isFinite(value))
+        return UNKNOWN_VALUE;
+    return String(Number(value.toFixed(DECIMALS)));
+}
+const DECIMALS = 3;
+const UNKNOWN_VALUE = '—';
+//# sourceMappingURL=projectionFormat.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionFormat.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionFormat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,MAAM,UAAU,qBAAqB,CAAC,KAAa;IACjD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;QAAE,OAAO,aAAa,CAAC;IAClD,OAAO,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,CAAC;AACnB,MAAM,aAAa,GAAG,GAAG,CAAC"}

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

@@ -0,0 +1,31 @@
+/**
+ * What the map's two settings offer, in the two lengths the bar needs.
+ *
+ * The same choices are written twice — once as bare shares on a value menu
+ * whose own heading already says what they are shares of, and once as whole
+ * sentences in the panel a reader opens with room to read them — so both are
+ * built here and neither file spells the other's list for itself.
+ */
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import type { ProjectionColorBy, ProjectionOptions } from '../core/projectionOptions.ts';
+/**
+ * What the colour may stand for.
+ * @param groupLabel - What the set of groups is called.
+ * @param uncoloured - What "the colour stands for nothing" reads.
+ * @returns The two choices.
+ */
+export declare function projectionColourChoices(groupLabel: string, uncoloured: string): ReadonlyArray<OverlayOption<ProjectionColorBy>>;
+/**
+ * How large the outlines may be, written as bare shares.
+ *
+ * A menu opens under its own heading, so a choice reading `95%` is already
+ * inside a list called `Group outlines` and the words "of samples" are not
+ * needed a fifth time. They stay on the pointer, because `2 SD (about 86%)` is
+ * the one case where the share alone hides which size a site actually asked
+ * for.
+ * @param options - What the map is showing.
+ * @param noOutlines - What "no outlines at all" reads.
+ * @returns The choices, in the order they are offered.
+ */
+export declare function projectionOutlineChoices(options: ProjectionOptions, noOutlines: string): readonly OverlayOption[];
+//# sourceMappingURL=projectionMapChoices.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionMapChoices.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionMapChoices.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,KAAK,EACV,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,8BAA8B,CAAC;AAQtC;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,GACjB,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAKjD;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,iBAAiB,EAC1B,UAAU,EAAE,MAAM,GACjB,SAAS,aAAa,EAAE,CAW1B"}

package/lib/projection/ui/projectionMapChoices.js

@@ -0,0 +1,46 @@
+/**
+ * What the map's two settings offer, in the two lengths the bar needs.
+ *
+ * The same choices are written twice — once as bare shares on a value menu
+ * whose own heading already says what they are shares of, and once as whole
+ * sentences in the panel a reader opens with room to read them — so both are
+ * built here and neither file spells the other's list for itself.
+ */
+import { ellipseChoices, ellipseCoverageText, ellipseSize, } from "./projectionEllipse.js";
+/**
+ * What the colour may stand for.
+ * @param groupLabel - What the set of groups is called.
+ * @param uncoloured - What "the colour stands for nothing" reads.
+ * @returns The two choices.
+ */
+export function projectionColourChoices(groupLabel, uncoloured) {
+    return [
+        { value: 'group', label: groupLabel },
+        { value: 'none', label: uncoloured },
+    ];
+}
+/**
+ * How large the outlines may be, written as bare shares.
+ *
+ * A menu opens under its own heading, so a choice reading `95%` is already
+ * inside a list called `Group outlines` and the words "of samples" are not
+ * needed a fifth time. They stay on the pointer, because `2 SD (about 86%)` is
+ * the one case where the share alone hides which size a site actually asked
+ * for.
+ * @param options - What the map is showing.
+ * @param noOutlines - What "no outlines at all" reads.
+ * @returns The choices, in the order they are offered.
+ */
+export function projectionOutlineChoices(options, noOutlines) {
+    const choices = [];
+    for (const choice of ellipseChoices(options.ellipse)) {
+        const share = ellipseCoverageText(ellipseSize(choice.value));
+        choices.push({
+            value: choice.value,
+            label: share === '' ? noOutlines : share,
+            title: choice.label,
+        });
+    }
+    return choices;
+}
+//# sourceMappingURL=projectionMapChoices.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionMapChoices.js","sourceRoot":"","sources":["../../../src/projection/ui/projectionMapChoices.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,WAAW,GACZ,MAAM,wBAAwB,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,UAAU,uBAAuB,CACrC,UAAkB,EAClB,UAAkB;IAElB,OAAO;QACL,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE;QACrC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE;KACrC,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,wBAAwB,CACtC,OAA0B,EAC1B,UAAkB;IAElB,MAAM,OAAO,GAAoB,EAAE,CAAC;IACpC,KAAK,MAAM,MAAM,IAAI,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;QACrD,MAAM,KAAK,GAAG,mBAAmB,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAC7D,OAAO,CAAC,IAAI,CAAC;YACX,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK;YACxC,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB,CAAC,CAAC;IACL,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC"}