react-cheminfo 0.9.0 → 0.10.0

package/lib/projection/ui/ProjectionVariablesMore.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OverlayGroup } from "../../overlay/ui/OverlayGroup.js";
+import { OverlayNumber } from "../../overlay/ui/OverlayNumber.js";
+import { OverlayPanel } from "../../overlay/ui/OverlayPanel.js";
+import { OverlaySegmented } from "../../overlay/ui/OverlaySegmented.js";
+import { OverlaySelect } from "../../overlay/ui/OverlaySelect.js";
+import { OverlayToggle } from "../../overlay/ui/OverlayToggle.js";
+import { PROJECTION_PANEL_NAME, PROJECTION_PANEL_SECTION, } from "../core/projectionStrings.js";
+import { PROJECTION_TAB_DEFAULTS } from "../core/projectionTabDefaults.js";
+import { projectionViewChoices } from "./projectionViewChoices.js";
+/**
+ * What the "what differs" tab keeps behind the cog: which view the panels
+ * draw, how many of them there are, what they are measured against, and how
+ * the marks along them are drawn.
+ *
+ * Six settings in one column is a list the eye slides off, so the two that
+ * decide what a panel *is* stand at the top under no heading at all, and the
+ * rest are filed under what they are about — the scale the panels are read
+ * against, then the marks drawn on them. The first two need no heading
+ * precisely because they are first: a caption over the top of a panel repeats
+ * the panel's own title.
+ * @param props - See {@link ProjectionVariablesMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionVariablesMore(props) {
+    const { options, copy, axisCount, continuous, onChange } = props;
+    const { canShowEffect, canRescale, canPickSample } = props;
+    const { help, tab } = copy;
+    return (_jsxs(OverlayPanel, { title: tab.variables, onReset: () => onChange(PROJECTION_TAB_DEFAULTS.variables), children: [_jsx(OverlaySelect, { label: PROJECTION_PANEL_NAME.variablesView, help: help.variablesView, value: options.variablesView, options: projectionViewChoices(copy, {
+                    canShowEffect,
+                    canRescale,
+                    canPickSample,
+                }), onChange: (variablesView) => onChange({ variablesView }) }), _jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.variablesCount, help: help.variablesCount, value: options.variablesCount, min: 1, max: Math.max(1, axisCount), onChange: (variablesCount) => onChange({ variablesCount }) }), _jsxs(OverlayGroup, { label: PROJECTION_PANEL_SECTION.scale, children: [_jsx(OverlayToggle, { label: PROJECTION_PANEL_NAME.sharedScale, help: help.sharedScale, checked: options.sharedScale, onChange: (sharedScale) => onChange({ sharedScale }) }), _jsx(OverlayNumber, { label: PROJECTION_PANEL_NAME.spread, help: help.spread, value: options.spread, min: SMALLEST_REACH, max: LARGEST_REACH, step: SMALLEST_REACH, digits: 1, disabled: options.variablesView !== 'effect', onChange: (spread) => onChange({ spread }) })] }), _jsxs(OverlayGroup, { label: PROJECTION_PANEL_SECTION.drawing, children: [_jsx(OverlayToggle, { label: PROJECTION_PANEL_NAME.showAverage, help: help.showAverage, checked: options.showAverage, onChange: (showAverage) => onChange({ showAverage }) }), _jsx(OverlaySegmented, { label: PROJECTION_PANEL_NAME.variableOrder, help: help.variableOrder, value: options.variableOrder, disabled: continuous, options: ORDER_CHOICES, onChange: (variableOrder) => onChange({ variableOrder }) })] })] }));
+}
+/**
+ * The two orders the bars of a panel can be drawn in.
+ *
+ * Both are written as what the reader gets rather than as what the code does,
+ * because "original" and "strongest" name the sort rather than the picture it
+ * produces.
+ */
+const ORDER_CHOICES = [
+    { value: 'original', label: 'Your order' },
+    { value: 'strongest', label: 'Strongest first' },
+];
+/**
+ * How far the average sample may be pushed, in standard deviations.
+ *
+ * Half a deviation is the smallest step worth a redraw, and four reaches past
+ * every sample of a well-behaved component in both directions, so anything
+ * beyond it draws a sample nobody in the table resembles.
+ */
+const SMALLEST_REACH = 0.5;
+const LARGEST_REACH = 4;
+//# sourceMappingURL=ProjectionVariablesMore.js.map

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

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

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

@@ -0,0 +1,78 @@
+import type { ReactElement } from 'react';
+import type { LoadingProfiles } from '../core/loadingProfiles.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
+export type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
+/** What {@link ProjectionVariablesTab} needs. */
+export interface ProjectionVariablesTabProps {
+    /**
+     * The panels as the viewer built them, or `null` when the run reported no
+     * weights and there is nothing to draw.
+     */
+    profiles: LoadingProfiles | null;
+    /**
+     * What the panels are showing.
+     * @default DEFAULT_PROJECTION_OPTIONS
+     */
+    options?: ProjectionOptions;
+    /**
+     * The words the tab writes.
+     * @default PROJECTION_COPY
+     */
+    copy?: ProjectionCopy;
+    /**
+     * What the one selected sample is called, which the `sample` view rebuilds.
+     * @default 'the selected sample'
+     */
+    sampleName?: string;
+    /**
+     * Width of the panels, in pixels, from the viewer's measurement.
+     * @default 0 — nothing is drawn until the figure has been measured
+     */
+    width?: number;
+    /**
+     * Height the whole stack is given, in pixels, shared out between the panels.
+     * @default 420
+     */
+    height?: number;
+    /**
+     * Called on every measurement the pointer enters, and with `null` when it
+     * leaves. The readout is written here rather than left to the caller, so a
+     * page lighting a band on a spectrum beside the viewer never has to work out
+     * what the slot it was handed is called.
+     * @default undefined
+     */
+    onTrackVariable?: (track: ProjectionVariableTrack | null) => void;
+    /**
+     * How a number is written in the readout.
+     * @default a rounding to three decimals with the trailing zeros dropped
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Value of the `data-testid` attribute of the stack.
+     * @default undefined
+     */
+    testId?: string;
+}
+/**
+ * One panel per component, each drawing what that component leans on.
+ *
+ * Colour is the component here and nothing else: the palette's component order
+ * is disjoint from its group order over the first four of each, so a reader
+ * who learnt "blue is setosa" on the map never reads "blue is PC 1" here as
+ * though it meant the same thing. A component's direction is arbitrary, so its
+ * sign is carried by geometry — above or below the zero line — and never by a
+ * second colour, which would advertise a meaning the arithmetic does not have.
+ * Nothing is coloured along the horizontal axis either: a rainbow across the
+ * measurements encodes the slot number, which the reader can already see.
+ *
+ * The panels carry no key. Every one of them is titled with its own swatch and
+ * its own name, so a key would repeat what the titles already say; the one
+ * thing the titles cannot say — that the faint grey line behind them is the
+ * average sample — is the first thing the question mark in the bar does.
+ * @param props - See {@link ProjectionVariablesTabProps}.
+ * @returns The stack of panels.
+ */
+export declare function ProjectionVariablesTab(props: ProjectionVariablesTabProps): ReactElement;
+//# sourceMappingURL=ProjectionVariablesTab.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionVariablesTab.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionVariablesTab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAWtE,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAW7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAE7E,iDAAiD;AACjD,MAAM,WAAW,2BAA2B;IAC1C;;;OAGG;IACH,QAAQ,EAAE,eAAe,GAAG,IAAI,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,IAAI,KAAK,IAAI,CAAC;IAClE;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAyEd"}

package/lib/projection/ui/ProjectionVariablesTab.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { chartAxisTitle } from "../../chart/core/chartLabels.js";
+import { TrackedLineChart } from "../../chart/ui/TrackedLineChart.js";
+import { TrackedStickChart } from "../../chart/ui/TrackedStickChart.js";
+import { PROJECTION_COPY } from "../core/projectionCopy.js";
+import { DEFAULT_PROJECTION_OPTIONS } from "../core/projectionOptions.js";
+import { PANEL_TITLE_ROOM, PANEL_TITLE_STYLE, PROJECTION_TAB_HEIGHT, SMALLEST_PANEL, STACK_STYLE, SWATCH_STYLE, } from "./projectionTabStyles.js";
+import { namesOfSlots, panelSeries, panelSticks, ticksOfSlots, variableTrack, writeValue, } from "./projectionVariablesModel.js";
+import { axisCaption, legendTitle } from "./projectionVariablesWords.js";
+/**
+ * One panel per component, each drawing what that component leans on.
+ *
+ * Colour is the component here and nothing else: the palette's component order
+ * is disjoint from its group order over the first four of each, so a reader
+ * who learnt "blue is setosa" on the map never reads "blue is PC 1" here as
+ * though it meant the same thing. A component's direction is arbitrary, so its
+ * sign is carried by geometry — above or below the zero line — and never by a
+ * second colour, which would advertise a meaning the arithmetic does not have.
+ * Nothing is coloured along the horizontal axis either: a rainbow across the
+ * measurements encodes the slot number, which the reader can already see.
+ *
+ * The panels carry no key. Every one of them is titled with its own swatch and
+ * its own name, so a key would repeat what the titles already say; the one
+ * thing the titles cannot say — that the faint grey line behind them is the
+ * average sample — is the first thing the question mark in the bar does.
+ * @param props - See {@link ProjectionVariablesTabProps}.
+ * @returns The stack of panels.
+ */
+export function ProjectionVariablesTab(props) {
+    const { profiles, onTrackVariable, testId } = props;
+    const { options = DEFAULT_PROJECTION_OPTIONS, copy = PROJECTION_COPY } = props;
+    const { width = 0, height = PROJECTION_TAB_HEIGHT } = props;
+    const { sampleName = A_SAMPLE, formatValue = writeValue } = props;
+    const categories = useMemo(() => namesOfSlots(profiles), [profiles]);
+    const tickLabels = useMemo(() => ticksOfSlots(profiles), [profiles]);
+    function report(panel, event) {
+        if (onTrackVariable === undefined || profiles === null)
+            return;
+        onTrackVariable(event === null
+            ? null
+            : variableTrack(profiles, event.index, panel, formatValue));
+    }
+    if (profiles === null) {
+        return _jsx("div", { style: STACK_STYLE, "data-testid": testId });
+    }
+    const average = options.showAverage && profiles.mean !== undefined;
+    const last = profiles.profiles.length - 1;
+    const room = Math.max(SMALLEST_PANEL, Math.floor(height / (last + 1)));
+    const bars = profiles.axis.kind === 'named' && !inTheirOwnUnits(profiles);
+    const peaks = profiles.axis.kind === 'peaks' ? profiles.axis : null;
+    const scale = profiles.sharedScale
+        ? { domain: [profiles.domain.min, profiles.domain.max] }
+        : {};
+    return (_jsx("div", { style: STACK_STYLE, "data-testid": testId, children: profiles.profiles.map((profile, panel) => (_jsxs("div", { children: [_jsxs("span", { style: PANEL_TITLE_STYLE, children: [_jsx("span", { style: { ...SWATCH_STYLE, background: profile.color } }), chartAxisTitle(profile.label, { share: profile.share })] }), peaks === null ? (_jsx(TrackedLineChart, { categories: categories, tickLabels: tickLabels, series: panelSeries(profiles, profile, bars, average, copy), width: width, height: room - PANEL_TITLE_ROOM, y: { ...scale, label: profiles.valueLabel }, xLabel: panel === last ? axisCaption(profiles.axis) : undefined, label: `${profile.label}. ${legendTitle(profiles, copy, sampleName)}`, onTrack: (event) => {
+                        report(panel, event);
+                    } })) : (_jsx(TrackedStickChart, { positions: positionsOf(peaks.values, profiles.order), categories: categories, series: panelSticks(profiles, profile, average, copy), width: width, height: room - PANEL_TITLE_ROOM, y: { ...scale, label: profiles.valueLabel }, xLabel: panel === last ? axisCaption(profiles.axis) : undefined, label: `${profile.label}. ${legendTitle(profiles, copy, sampleName)}`, onTrack: (event) => {
+                        report(panel, event);
+                    } }))] }, profile.index))) }));
+}
+/**
+ * Where each drawn slot sits on the axis.
+ *
+ * A slot is not a measurement: the panels can be ordered by strength rather
+ * than by position, and a stick has to stand where its measurement was
+ * measured whichever order they were drawn in.
+ * @param values - Where each measurement sits.
+ * @param order - Which measurement each slot holds.
+ * @returns One position per slot.
+ */
+function positionsOf(values, order) {
+    const positions = new Array(order.length);
+    for (let slot = 0; slot < order.length; slot++) {
+        positions[slot] = values[order[slot] ?? slot] ?? Number.NaN;
+    }
+    return positions;
+}
+/**
+ * Whether the panels are drawing the data's own units rather than weights.
+ *
+ * Bars are read from the zero line, and in those two views zero is not where
+ * the reader's eye starts: an absorbance sits on a baseline, so bars grown
+ * from nothing would be one tall column per measurement with the pattern
+ * hidden in their tips. Those views draw lines whatever the axis is.
+ * @param built - The panels as they were built.
+ * @returns Whether zero is a meaningless place to grow a bar from.
+ */
+function inTheirOwnUnits(built) {
+    return built.view === 'effect' || built.view === 'sample';
+}
+/** What the rebuilt sample is called when the viewer has not named it. */
+const A_SAMPLE = 'the selected sample';
+//# sourceMappingURL=ProjectionVariablesTab.js.map

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

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

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

@@ -0,0 +1,32 @@
+import type { ReactElement } from 'react';
+import type { ProjectionViewerProps } from './projectionViewerProps.ts';
+export type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
+export type { ProjectionSelection } from './projectionSelection.ts';
+export type { ProjectionViewerProps } from './projectionViewerProps.ts';
+/**
+ * A dimension-reduction result, shown as a map a reader can interrogate.
+ *
+ * It knows nothing about principal components: a method fills in what it has
+ * and leaves the rest out, and the viewer offers exactly the tabs the result
+ * can support — which is why a two-dimensional UMAP renders as one clean chart
+ * with no strip of views rather than four tabs, three of them empty.
+ *
+ * It is built to be a guest on somebody else's page, so it is one bar and one
+ * figure and nothing else: the views, the settings of the view showing and the
+ * question mark that explains it share a single thirty-pixel row above the
+ * picture, and every pixel below that row is the picture. Nothing stands under
+ * it — the key floats in the emptiest corner of the plot, and the paragraph
+ * that used to sit beneath the figure is behind the question mark, kept whole
+ * for the reader who wants it and costing nothing to the reader who does not.
+ *
+ * The four tabs are one tool rather than four because they share one piece of
+ * state: a pair promoted from the grid arrives on the map, and the lasso drawn
+ * there is still selected when the reader comes back to it. What the reader
+ * picked leaves by name — `onSelectionChange` reports the ids from
+ * `samples.ids` — so a page filtering its own table beside the figure never
+ * has to keep a second copy of the row order to read them with.
+ * @param props - See {@link ProjectionViewerProps}.
+ * @returns The viewer.
+ */
+export declare function ProjectionViewer(props: ProjectionViewerProps): ReactElement;
+//# sourceMappingURL=ProjectionViewer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectionViewer.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/ProjectionViewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAYzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAGxE,YAAY,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAC5E,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CA0E3E"}

package/lib/projection/ui/ProjectionViewer.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef } from 'react';
+import { useContainerSize } from "../../hooks/ui/useContainerSize.js";
+import { mergeProjectionCopy } from "../core/projectionCopy.js";
+import { ProjectionBar } from "./ProjectionBar.js";
+import { ProjectionPanel } from "./ProjectionPanel.js";
+import { formatProjectionValue } from "./projectionFormat.js";
+import { useProjectionMapView } from "./projectionMapView.js";
+import { useProjectionModels } from "./projectionTabModels.js";
+import { PROJECTION_TAB_HEIGHT } from "./projectionTabStyles.js";
+import { useProjectionState } from "./useProjectionState.js";
+/**
+ * A dimension-reduction result, shown as a map a reader can interrogate.
+ *
+ * It knows nothing about principal components: a method fills in what it has
+ * and leaves the rest out, and the viewer offers exactly the tabs the result
+ * can support — which is why a two-dimensional UMAP renders as one clean chart
+ * with no strip of views rather than four tabs, three of them empty.
+ *
+ * It is built to be a guest on somebody else's page, so it is one bar and one
+ * figure and nothing else: the views, the settings of the view showing and the
+ * question mark that explains it share a single thirty-pixel row above the
+ * picture, and every pixel below that row is the picture. Nothing stands under
+ * it — the key floats in the emptiest corner of the plot, and the paragraph
+ * that used to sit beneath the figure is behind the question mark, kept whole
+ * for the reader who wants it and costing nothing to the reader who does not.
+ *
+ * The four tabs are one tool rather than four because they share one piece of
+ * state: a pair promoted from the grid arrives on the map, and the lasso drawn
+ * there is still selected when the reader comes back to it. What the reader
+ * picked leaves by name — `onSelectionChange` reports the ids from
+ * `samples.ids` — so a page filtering its own table beside the figure never
+ * has to keep a second copy of the row order to read them with.
+ * @param props - See {@link ProjectionViewerProps}.
+ * @returns The viewer.
+ */
+export function ProjectionViewer(props) {
+    const { result, samples, className, testId, onTrackVariable } = props;
+    const { onHoverSample, touchLasso, height = PROJECTION_TAB_HEIGHT } = props;
+    const { wheelZoom = true } = props;
+    const { formatValue = formatProjectionValue, fileName = 'projection' } = props;
+    const copy = useMemo(() => mergeProjectionCopy(props.copy), [props.copy]);
+    const state = useProjectionState(props);
+    const figure = useRef(null);
+    const measured = useContainerSize(figure);
+    const width = measured.width > 0 ? measured.width : ASSUMED_WIDTH;
+    const models = useProjectionModels({
+        result,
+        samples,
+        options: state.options,
+        selected: state.selected,
+    });
+    const map = useProjectionMapView({
+        result,
+        copy,
+        groups: state.groups,
+        options: state.options,
+        selected: state.selected,
+        onSettle: state.settleSelection,
+    });
+    const baseId = useId();
+    const panelId = `${baseId}-panel`;
+    const strip = state.tabs.length > 1;
+    return (_jsxs("div", { ref: figure, className: className === undefined
+            ? 'projection-viewer'
+            : `projection-viewer ${className}`, "data-testid": testId, style: VIEWER_STYLE, children: [_jsx(ProjectionBar, { state: state, result: result, copy: copy, models: models, map: map, baseId: baseId, panelId: panelId, fileName: fileName, width: width }), _jsx(ProjectionPanel, { state: state, result: result, samples: samples, copy: copy, models: models, map: map, width: width, height: height, formatValue: formatValue, baseId: baseId, panelId: panelId, strip: strip, onHoverSample: onHoverSample, onTrackVariable: onTrackVariable, touchLasso: touchLasso, wheelZoom: wheelZoom })] }));
+}
+/**
+ * The width a figure is drawn at before its container has been measured.
+ *
+ * A guess corrected on the first measurement beats an empty box: the viewer
+ * then renders on a server, renders in a test with no DOM at all, and never
+ * leaves a hole in the page for the frame or two a resize observer takes to
+ * report. The number is a common single-column figure, so the correction is
+ * usually small enough that nothing visibly jumps.
+ */
+const ASSUMED_WIDTH = 640;
+/**
+ * The bar and the figure, with nothing between them.
+ *
+ * The gap is zero on purpose: the bar carries a hairline along its foot, and
+ * that line is what separates the chrome from the picture. A gap as well would
+ * read as a seam between two components rather than as one figure.
+ */
+const VIEWER_STYLE = {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+};
+//# sourceMappingURL=ProjectionViewer.js.map

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

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

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

@@ -0,0 +1,19 @@
+/**
+ * The viewer a dimension-reduction run is read in.
+ *
+ * Only the two components a site mounts are exported. The four tabs, their
+ * option bars and the arithmetic behind them stay inside the package: a tab is
+ * offered because the result can fill it, never because a caller asked for it,
+ * and exporting them separately would invite a site to show an empty one.
+ *
+ * `ProjectionViewer` takes any result — a principal component analysis, a
+ * k-means run, a UMAP embedding — while `PcaViewer` is the shortcut for the
+ * commonest of them, taking a fitted model and the rows it was fitted on.
+ */
+export type { PcaViewerProps } from './PcaViewer.tsx';
+export { PcaViewer } from './PcaViewer.tsx';
+export type { ProjectionSelection } from './projectionSelection.ts';
+export type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
+export type { ProjectionViewerProps } from './projectionViewerProps.ts';
+export { ProjectionViewer } from './ProjectionViewer.tsx';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,YAAY,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AACpE,YAAY,EAAE,uBAAuB,EAAE,MAAM,+BAA+B,CAAC;AAC7E,YAAY,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/projection/ui/index.js

@@ -0,0 +1,15 @@
+/**
+ * The viewer a dimension-reduction run is read in.
+ *
+ * Only the two components a site mounts are exported. The four tabs, their
+ * option bars and the arithmetic behind them stay inside the package: a tab is
+ * offered because the result can fill it, never because a caller asked for it,
+ * and exporting them separately would invite a site to show an empty one.
+ *
+ * `ProjectionViewer` takes any result — a principal component analysis, a
+ * k-means run, a UMAP embedding — while `PcaViewer` is the shortcut for the
+ * commonest of them, taking a fitted model and the rows it was fitted on.
+ */
+export { PcaViewer } from "./PcaViewer.js";
+export { ProjectionViewer } from "./ProjectionViewer.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/projection/ui/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAC;AAI5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAwB,CAAC"}

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

@@ -0,0 +1,92 @@
+/**
+ * How much of itself the settings bar writes at the width the figure has.
+ *
+ * The bar never wraps: a second row would change the figure's height as the
+ * host page resized, and an embedded figure that moves somebody else's layout
+ * while it is being read is worse than one whose settings have been written
+ * shorter. So what a narrowing figure loses is words, one rung at a time —
+ * the key word in front of each value, then the long form of the tab names,
+ * then the boxes around the settings, which gather into one chip that still
+ * reads the configuration. No rung ever takes a control away.
+ *
+ * Nothing here is a magic number. The thresholds come out of the content: a
+ * viewer with two tabs stays roomy far longer than one with six, and a site
+ * that has translated the tab names has changed exactly these widths. The
+ * ladder itself lives in the overlay domain; what this adds is the room a
+ * projection's own controls need that the ladder cannot see, because a stepper
+ * is two buttons around a number rather than words on a button.
+ */
+import type { OverlayMetrics } from '../../overlay/core/overlayMetrics.ts';
+import type { OverlayTier, OverlayTierWidths } from '../../overlay/core/overlayTiers.ts';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+import type { ProjectionReading } from './projectionBarReadings.ts';
+/** What the bar is holding, for the width it needs to hold it. */
+export interface ProjectionBarRoom {
+    /** What each pill of the strip reads; empty when there is no strip. */
+    tabLabels: readonly string[];
+    /** The short form of each, in the same order. */
+    shortTabLabels: readonly string[];
+    /** What the tab showing writes at the far end. */
+    readings: readonly ProjectionReading[];
+    /**
+     * How many bare glyphs ride at the very end: the `?` and the cog.
+     * @default 2
+     */
+    glyphs?: number;
+}
+/**
+ * How many bare glyphs the bar carries at its end on this tab.
+ *
+ * The save glyph rides every tab, because every tab draws a figure somebody may
+ * want to keep. The question mark and the cog ride all but the shares one,
+ * whose figure needs no explanation its own axes do not already give. The map
+ * carries two more: the switches that write the names onto the picture. They
+ * are glyphs because a switch has no value to write — it is thrown or it is not
+ * — so a word beside one would be a caption rather than a reading, and being
+ * already as small as a control can be drawn, they are the one thing on the bar
+ * that never folds.
+ * @param tab - The tab showing.
+ * @returns How many button-sized glyphs the far end must keep room for.
+ */
+export declare function projectionBarGlyphs(tab: ProjectionTab): number;
+/**
+ * How much of itself the bar writes at this width.
+ *
+ * The width is the figure's own, never the page's: an embedded figure has no
+ * idea how wide the page around it is, and the same viewer four hundred pixels
+ * wide in a wide page and filling a phone is the same problem. An unmeasured
+ * figure is given the roomiest rung, so a bar never opens folded and springs
+ * open a frame later on every page that embeds it.
+ * @param width - Width of the figure, in pixels.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The rung.
+ */
+export declare function projectionBarTier(width: number, room: ProjectionBarRoom, metrics: OverlayMetrics): OverlayTier;
+/**
+ * The figure width each rung needs, for this content at these measurements.
+ *
+ * Published so the ladder can be read and pinned rather than guessed at: the
+ * numbers a four-tab principal component viewer folds at are an answer, not a
+ * decision anybody made.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @returns The four widths, in pixels.
+ */
+export declare function projectionBarTierWidths(room: ProjectionBarRoom, metrics: OverlayMetrics): OverlayTierWidths;
+/**
+ * How much of the figure's width the far end of the bar is about to take.
+ *
+ * The row is one flex line whose two ends are told they may both shrink, and a
+ * chip beside a cog cannot shrink — it would simply hang off the edge, taking
+ * the cog with it. So the strip of views is given a ceiling instead: whatever
+ * the settings and the glyphs do not need. The estimate is the ladder's own,
+ * and it errs high, which costs the reader a few pixels of scroll rather than
+ * a control they cannot reach.
+ * @param room - See {@link ProjectionBarRoom}.
+ * @param metrics - The measurements the bar is drawn from.
+ * @param tier - The rung the bar is on, which decides how much it writes.
+ * @returns The width in pixels, the bar's own padding included.
+ */
+export declare function projectionBarEndRoom(room: ProjectionBarRoom, metrics: OverlayMetrics, tier: OverlayTier): number;
+//# sourceMappingURL=projectionBarModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"projectionBarModel.d.ts","sourceRoot":"","sources":["../../../src/projection/ui/projectionBarModel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAU3E,OAAO,KAAK,EACV,WAAW,EACX,iBAAiB,EAClB,MAAM,oCAAoC,CAAC;AAK5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,kEAAkE;AAClE,MAAM,WAAW,iBAAiB;IAChC,uEAAuE;IACvE,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,iDAAiD;IACjD,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,kDAAkD;IAClD,QAAQ,EAAE,SAAS,iBAAiB,EAAE,CAAC;IACvC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,aAAa,GAAG,MAAM,CAG9D;AAWD;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,cAAc,GACtB,WAAW,CAKb;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CACrC,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,cAAc,GACtB,iBAAiB,CASnB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,WAAW,GAChB,MAAM,CAmBR"}