react-cheminfo 0.10.0 → 0.12.0

package/src/projection/ui/ProjectionPairsMore.tsx

@@ -8,14 +8,13 @@ import type {
   ProjectionColorBy,
   ProjectionOptions,
 } from '../core/projectionOptions.ts';
-import { PROJECTION_PANEL_NAME } from '../core/projectionStrings.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
 import { projectionColourChoices } from './projectionMapChoices.ts';
 import { projectionPairsCeiling } from './projectionPairsCeiling.ts';
 
 /** What the grid keeps behind the cog is drawn from. */
-export interface ProjectionPairsMoreProps {
+interface ProjectionPairsMoreProps {
   /** What the grid is showing, already resolved against the result. */
   options: ProjectionOptions;
   /** Called with only the options that changed, for the viewer to merge. */
@@ -55,7 +54,7 @@ export function ProjectionPairsMore(
 ): ReactElement {
   const { options, onChange, copy, groupLabel, hasGroups = false } = props;
   const { axisCount, width } = props;
-  const { bar, help, tab } = copy;
+  const { bar, help, panel, tab } = copy;
   const ceiling = projectionPairsCeiling(axisCount, width);
 
   return (
@@ -64,7 +63,7 @@ export function ProjectionPairsMore(
       onReset={() => onChange(PROJECTION_TAB_DEFAULTS.pairs)}
     >
       <OverlayNumber
-        label={PROJECTION_PANEL_NAME.pairCount}
+        label={panel.name.pairCount}
         help={help.pairCount}
         value={options.pairCount}
         min={ceiling.min}
@@ -72,7 +71,7 @@ export function ProjectionPairsMore(
         onChange={(pairCount) => onChange({ pairCount })}
       />
       <OverlaySegmented<ProjectionColorBy>
-        label={PROJECTION_PANEL_NAME.colorBy}
+        label={panel.name.colorBy}
         help={help.colorBy}
         value={options.colorBy}
         disabled={!hasGroups}
@@ -80,7 +79,7 @@ export function ProjectionPairsMore(
         onChange={(colorBy) => onChange({ colorBy })}
       />
       <OverlayNumber
-        label={PROJECTION_PANEL_NAME.pointRadius}
+        label={panel.name.pointRadius}
         help={help.pointRadius}
         value={options.pointRadius}
         min={1}

package/src/projection/ui/ProjectionPairsTab.tsx

@@ -3,12 +3,13 @@ import { useMemo } from 'react';
 
 import type { OverlayLegendEntry } from '../../overlay/ui/OverlayLegend.tsx';
 import { OverlayLegend } from '../../overlay/ui/OverlayLegend.tsx';
-import type { ScatterMatrixAxis } from '../../scatter/ui/ScatterMatrix.tsx';
 import { ScatterMatrix } from '../../scatter/ui/ScatterMatrix.tsx';
-import type { ScatterGroup } from '../../scatter/ui/ScatterPlot.tsx';
+import type { ScatterGroup } from '../../scatter/ui/scatterFigureProps.ts';
 import { SCATTER_MATRIX_MOST_AXES } from '../../scatter/ui/scatterMatrixLayout.ts';
+import type { ScatterMatrixAxis } from '../../scatter/ui/scatterMatrixProps.ts';
+import { fillCopy } from '../core/fillCopy.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
-import { PROJECTION_COPY, fillCopy } from '../core/projectionCopy.ts';
+import { PROJECTION_COPY } from '../core/projectionCopy.ts';
 import type { ProjectionOptions } from '../core/projectionOptions.ts';
 import { DEFAULT_PROJECTION_OPTIONS } from '../core/projectionOptions.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
@@ -19,7 +20,7 @@ import { MINIMUM_OUTLINE_POINTS } from './projectionMapModel.ts';
 import { PROJECTION_TAB_HEIGHT } from './projectionTabStyles.ts';
 
 /** What {@link ProjectionPairsTab} needs. */
-export interface ProjectionPairsTabProps {
+interface ProjectionPairsTabProps {
   /** What the run produced. */
   result: ProjectionResult;
   /** The groups as every figure of this viewer draws them. */

package/src/projection/ui/ProjectionPanel.tsx

@@ -1,6 +1,7 @@
 import type { PointerEvent, ReactElement } from 'react';
 import { useRef, useState } from 'react';
 
+import type { ScatterPointOpen } from '../../scatter/ui/scatterFigureProps.ts';
 import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 import type { ProjectionSamples } from '../core/projectionSamples.ts';
@@ -9,14 +10,16 @@ import { ProjectionMapTab } from './ProjectionMapTab.tsx';
 import { ProjectionPairsTab } from './ProjectionPairsTab.tsx';
 import { ProjectionReadout } from './ProjectionReadout.tsx';
 import { ProjectionSharesTab } from './ProjectionSharesTab.tsx';
-import type { ProjectionVariableTrack } from './ProjectionVariablesTab.tsx';
+import { ProjectionSpaceTab } from './ProjectionSpaceTab.tsx';
 import { ProjectionVariablesTab } from './ProjectionVariablesTab.tsx';
 import type { ProjectionMapView } from './projectionMapView.ts';
 import type { ProjectionModels } from './projectionTabModels.ts';
+import type { ProjectionVariableTrack } from './projectionVariablesModel.ts';
+import type { ProjectionSampleOpen } from './projectionViewerProps.ts';
 import type { ProjectionStateApi } from './useProjectionState.ts';
 
 /** What {@link ProjectionPanel} needs. */
-export interface ProjectionPanelProps {
+interface ProjectionPanelProps {
   /** The tab, the options and the selection every tab shares. */
   state: ProjectionStateApi;
   /** What the run produced, whatever produced it. */
@@ -46,6 +49,11 @@ export interface ProjectionPanelProps {
    * @default undefined
    */
   onHoverSample?: (id: string | null) => void;
+  /**
+   * Called when the reader double-clicks a sample, on either figure.
+   * @default undefined
+   */
+  onSampleDoubleClick?: (sample: ProjectionSampleOpen) => void;
   /**
    * Called as the pointer crosses the "what differs" panels.
    * @default undefined
@@ -83,6 +91,7 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
   const { state, result, samples, copy, models, map } = props;
   const { width, height, formatValue, baseId, panelId, strip } = props;
   const { onHoverSample, onTrackVariable, touchLasso, wheelZoom } = props;
+  const { onSampleDoubleClick } = props;
 
   const box = useRef<HTMLDivElement>(null);
   const pointer = useRef(NOWHERE);
@@ -102,6 +111,19 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
     onHoverSample?.(index < 0 ? null : (samples.ids[index] ?? null));
   }
 
+  // The figures speak in row numbers, because that is what a hit test hands
+  // back; every callback out of the viewer speaks in names, so a caller never
+  // has to keep a second copy of the row order. The translation is one line
+  // and it belongs here, once, rather than in each of the two tabs.
+  const openSample =
+    onSampleDoubleClick === undefined
+      ? undefined
+      : (point: ScatterPointOpen) => {
+          const id = samples.ids[point.index];
+          if (id === undefined) return;
+          onSampleDoubleClick({ ...point, id });
+        };
+
   return (
     <div
       ref={box}
@@ -143,6 +165,46 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
           height={height}
         />
       ) : null}
+      {state.tab === 'space' ? (
+        <ProjectionSpaceTab
+          result={result}
+          groups={state.groups}
+          options={state.options}
+          copy={copy}
+          chrome={map.spaceChrome}
+          ids={samples.ids}
+          width={width}
+          height={height}
+          selected={state.selected}
+          camera={map.camera}
+          onCameraChange={map.setCamera}
+          zoom={map.zoom}
+          onZoomChange={map.setZoom}
+          wheelZoom={wheelZoom}
+          report={map.report}
+          onSelectionChange={map.settle}
+          onHoverChange={noteHover}
+          onPointDoubleClick={openSample}
+          hoverCard={
+            anchor.index < 0 ? null : (
+              <ProjectionReadout
+                index={anchor.index}
+                result={result}
+                samples={samples}
+                groups={state.groups}
+                xAxis={state.options.xAxis}
+                yAxis={state.options.yAxis}
+                zAxis={state.options.zAxis}
+                x={anchor.x}
+                y={anchor.y}
+                boxWidth={width}
+                boxHeight={height}
+                formatValue={formatValue}
+              />
+            )
+          }
+        />
+      ) : null}
       {state.tab === 'map' ? (
         <ProjectionMapTab
           result={result}
@@ -160,6 +222,7 @@ export function ProjectionPanel(props: ProjectionPanelProps): ReactElement {
           selected={state.selected}
           onSelectionChange={map.settle}
           onHoverChange={noteHover}
+          onPointDoubleClick={openSample}
           touchLasso={touchLasso}
           hoverCard={
             anchor.index < 0 ? null : (

package/src/projection/ui/ProjectionReadout.tsx

@@ -12,7 +12,7 @@ import type {
 import { formatProjectionValue } from './projectionFormat.ts';
 
 /** What {@link ProjectionReadout} says, and where. */
-export interface ProjectionReadoutProps {
+interface ProjectionReadoutProps {
   /** The row the card is about, as an index into the score matrix. */
   index: number;
   /** What the run produced, for the axis names and the sample's own scores. */
@@ -25,6 +25,13 @@ export interface ProjectionReadoutProps {
   xAxis: number;
   /** Which axis is drawn vertically. */
   yAxis: number;
+  /**
+   * Which axis runs away from the reader, on the cloud. It is the one place a
+   * cloud's third number is written at all: the box carries no tick labels, so
+   * a reader who wants a value points at the sample.
+   * @default undefined — the card names two axes, as the map's does
+   */
+  zAxis?: number;
   /** Where the pointer is, in pixels from the figure's left. */
   x: number;
   /** Where the pointer is, in pixels from the figure's top. */
@@ -80,6 +87,7 @@ export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
     groups,
     xAxis,
     yAxis,
+    zAxis,
     x,
     y,
     boxWidth,
@@ -91,10 +99,13 @@ export function ProjectionReadout(props: ProjectionReadoutProps): ReactElement {
     testId,
   } = props;
 
+  const drawn = useMemo(
+    () => (zAxis === undefined ? [xAxis, yAxis] : [xAxis, yAxis, zAxis]),
+    [xAxis, yAxis, zAxis],
+  );
   const rows = useMemo(
-    () =>
-      readoutRows(index, result, samples, groups, xAxis, yAxis, formatValue),
-    [formatValue, groups, index, result, samples, xAxis, yAxis],
+    () => readoutRows(index, result, samples, groups, drawn, formatValue),
+    [drawn, formatValue, groups, index, result, samples],
   );
 
   return (
@@ -118,15 +129,14 @@ function readoutRows(
   result: ProjectionResult,
   samples: ProjectionSamples,
   groups: ResolvedProjectionGroups,
-  xAxis: number,
-  yAxis: number,
+  drawn: readonly number[],
   formatValue: (value: number) => string,
 ): OverlayReadoutRow[] {
   const rows: OverlayReadoutRow[] = [];
   const { axes, scores } = result;
   const known = index >= 0 && index < scores.rows;
 
-  for (const axis of [xAxis, yAxis]) {
+  for (const axis of drawn) {
     const name = axes[axis]?.name;
     if (name === undefined) continue;
     rows.push({

package/src/projection/ui/ProjectionSharesAxis.tsx

@@ -0,0 +1,67 @@
+import type { ReactElement } from 'react';
+
+import { chartBand, chartBandCenter } from '../../chart/core/chartBand.ts';
+import type { ExplainedShares } from '../core/explainedShares.ts';
+
+import {
+  AXIS_CAPTION_STYLE,
+  AXIS_LAYER_STYLE,
+  AXIS_NAME_STYLE,
+  SHARES_BOTTOM_ROOM,
+  SHARES_CAPTION_OFFSET,
+  SHARES_LEFT_ROOM,
+  SHARES_NAME_OFFSET,
+  SHARES_RIGHT_ROOM,
+} from './projectionTabStyles.ts';
+
+/** What {@link SharesAxis} writes. */
+interface SharesAxisProps {
+  /** The bars, for their names. */
+  shares: ExplainedShares;
+  /** Total width of the figure, in pixels, which the slots are laid out in. */
+  width: number;
+  /** Total height, which fixes the baseline the names sit on. */
+  height: number;
+  /** What the axis measures, written under the names. */
+  caption: string;
+}
+
+/**
+ * The component names under the bars, and what the axis measures under them.
+ *
+ * They are written in a layer of their own because a frame clips its children
+ * to the plot and these sit below it — the same reason the tracked line chart
+ * writes its slot names this way rather than as frame children.
+ * @param props - See {@link SharesAxisProps}.
+ * @returns The names.
+ */
+export function SharesAxis(props: SharesAxisProps): ReactElement {
+  const { shares, width, height, caption } = props;
+  const right = Math.max(SHARES_LEFT_ROOM, width - SHARES_RIGHT_ROOM);
+  const band = chartBand(shares.components.length, SHARES_LEFT_ROOM, right);
+  const baseline = height - SHARES_BOTTOM_ROOM;
+
+  return (
+    <svg width="100%" height="100%" style={AXIS_LAYER_STYLE}>
+      {shares.components.map((component, index) => (
+        <text
+          key={component.number}
+          x={chartBandCenter(band, index)}
+          y={baseline + SHARES_NAME_OFFSET}
+          textAnchor="middle"
+          style={AXIS_NAME_STYLE}
+        >
+          {component.label}
+        </text>
+      ))}
+      <text
+        x={(SHARES_LEFT_ROOM + right) / 2}
+        y={baseline + SHARES_CAPTION_OFFSET}
+        textAnchor="middle"
+        style={AXIS_CAPTION_STYLE}
+      >
+        {caption}
+      </text>
+    </svg>
+  );
+}

package/src/projection/ui/ProjectionSharesMarks.tsx

@@ -1,31 +1,27 @@
 import type { ReactElement } from 'react';
 
 import type { ChartBand } from '../../chart/core/chartBand.ts';
-import { chartBand, chartBandCenter } from '../../chart/core/chartBand.ts';
+import { chartBandCenter } from '../../chart/core/chartBand.ts';
+import { chartShare } from '../../chart/core/chartLabels.ts';
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ChartFrameRender } from '../../chart/ui/ChartFrame.tsx';
+import { roundTo } from '../../format/core/roundTo.ts';
 import type { ExplainedShares } from '../core/explainedShares.ts';
+import { fillCopy } from '../core/fillCopy.ts';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
 
-import {
-  AXIS_CAPTION_STYLE,
-  AXIS_LAYER_STYLE,
-  AXIS_NAME_STYLE,
-  SHARES_BOTTOM_ROOM,
-  SHARES_CAPTION_OFFSET,
-  SHARES_LEFT_ROOM,
-  SHARES_NAME_OFFSET,
-  SHARES_RIGHT_ROOM,
-  TOTAL_LABEL_STYLE,
-  WHOLE_SHARE,
-} from './projectionTabStyles.ts';
+import { TOTAL_LABEL_STYLE, WHOLE_SHARE } from './projectionTabStyles.ts';
 
 /** What {@link SharesMarks} draws. */
-export interface SharesMarksProps {
+interface SharesMarksProps {
   /** The bars, their running total and the target they are measured against. */
   shares: ExplainedShares;
   /** The frame they are drawn in. */
   frame: ChartFrameRender;
   /** The slots the bars stand on. */
   band: ChartBand;
+  /** The words the chart writes: the running total's name and the hover card. */
+  copy: ProjectionCopy;
 }
 
 /**
@@ -42,7 +38,7 @@ export interface SharesMarksProps {
  * @returns The marks.
  */
 export function SharesMarks(props: SharesMarksProps): ReactElement {
-  const { shares, frame, band } = props;
+  const { shares, frame, band, copy } = props;
   const { components, target, reachesTargetAt } = shares;
   const { plot, y } = frame;
   const zero = y.offset;
@@ -67,12 +63,12 @@ export function SharesMarks(props: SharesMarksProps): ReactElement {
         height={Math.abs(zero - top)}
         fill={component.color}
       >
-        <title>{hoverCard(shares, index)}</title>
+        <title>{hoverCard(shares, index, copy.sentence.shareCard)}</title>
       </rect>,
     );
     lastX = middle;
     lastY = y.offset + component.cumulative * WHOLE_SHARE * y.factor;
-    path += `${index === 0 ? 'M' : 'L'}${round(middle)} ${round(lastY)}`;
+    path += `${index === 0 ? 'M' : 'L'}${chartRoundPixel(middle)} ${chartRoundPixel(lastY)}`;
     dots.push(<circle key={component.number} cx={middle} cy={lastY} r={2.5} />);
   }
 
@@ -97,64 +93,14 @@ export function SharesMarks(props: SharesMarksProps): ReactElement {
         textAnchor="end"
         style={TOTAL_LABEL_STYLE}
       >
-        {`Running total ${(total * WHOLE_SHARE).toFixed(1)}%`}
+        {fillCopy(copy.sentence.runningTotal, {
+          percent: chartShare(total),
+        })}
       </text>
     </>
   );
 }
 
-/** What {@link SharesAxis} writes. */
-export interface SharesAxisProps {
-  /** The bars, for their names. */
-  shares: ExplainedShares;
-  /** Total width of the figure, in pixels, which the slots are laid out in. */
-  width: number;
-  /** Total height, which fixes the baseline the names sit on. */
-  height: number;
-  /** What the axis measures, written under the names. */
-  caption: string;
-}
-
-/**
- * The component names under the bars, and what the axis measures under them.
- *
- * They are written in a layer of their own because a frame clips its children
- * to the plot and these sit below it — the same reason the tracked line chart
- * writes its slot names this way rather than as frame children.
- * @param props - See {@link SharesAxisProps}.
- * @returns The names.
- */
-export function SharesAxis(props: SharesAxisProps): ReactElement {
-  const { shares, width, height, caption } = props;
-  const right = Math.max(SHARES_LEFT_ROOM, width - SHARES_RIGHT_ROOM);
-  const band = chartBand(shares.components.length, SHARES_LEFT_ROOM, right);
-  const baseline = height - SHARES_BOTTOM_ROOM;
-
-  return (
-    <svg width="100%" height="100%" style={AXIS_LAYER_STYLE}>
-      {shares.components.map((component, index) => (
-        <text
-          key={component.number}
-          x={chartBandCenter(band, index)}
-          y={baseline + SHARES_NAME_OFFSET}
-          textAnchor="middle"
-          style={AXIS_NAME_STYLE}
-        >
-          {component.label}
-        </text>
-      ))}
-      <text
-        x={(SHARES_LEFT_ROOM + right) / 2}
-        y={baseline + SHARES_CAPTION_OFFSET}
-        textAnchor="middle"
-        style={AXIS_CAPTION_STYLE}
-      >
-        {caption}
-      </text>
-    </svg>
-  );
-}
-
 /**
  * The dashed rule at the target, and the light band over the components that
  * reach it.
@@ -207,18 +153,26 @@ function targetMark(
  * fifty who wants it.
  * @param shares - The bars.
  * @param index - Which one, from 0.
+ * @param template - The card's sentence, from the copy.
  * @returns The card's text.
  */
-function hoverCard(shares: ExplainedShares, index: number): string {
+function hoverCard(
+  shares: ExplainedShares,
+  index: number,
+  template: string,
+): string {
   const component = shares.components[index];
   if (component === undefined) return '';
-  const own = (component.share * WHOLE_SHARE).toFixed(2);
-  const together = (component.cumulative * WHOLE_SHARE).toFixed(2);
-  const line = `${component.label} — ${own}% of the differences. The first ${component.number} together: ${together}%.`;
+  const line = fillCopy(template, {
+    component: component.label,
+    share: chartShare(component.share, CARD_SHARE_DIGITS),
+    count: String(component.number),
+    total: chartShare(component.cumulative, CARD_SHARE_DIGITS),
+  });
   const { eigenvalue } = component;
   return eigenvalue === undefined
     ? line
-    : `${line}\nλ = ${Math.round(eigenvalue * ROUNDING) / ROUNDING}`;
+    : `${line}\nλ = ${roundTo(eigenvalue, EIGENVALUE_DECIMALS)}`;
 }
 
 /** The light wash over the components that reach the target. */
@@ -235,7 +189,11 @@ const TARGET_BAND = 'color-mix(in srgb, var(--border-strong) 22%, transparent)';
 const DOT_GAP = 6;
 const LABEL_ROOM = 12;
 
-/** Decimals the fine print rounds an eigenvalue to. */
-const ROUNDING = 1000;
+/**
+ * Decimals the hover card writes a share with: one more than the axis titles,
+ * because the card is the fine print a reader opens to read the number itself.
+ */
+const CARD_SHARE_DIGITS = 2;
 
-const round = (value: number): number => Math.round(value * 100) / 100;
+/** Decimals the fine print rounds an eigenvalue to. */
+const EIGENVALUE_DECIMALS = 3;

package/src/projection/ui/ProjectionSharesMore.tsx

@@ -2,17 +2,13 @@ import type { ReactElement } from 'react';
 
 import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
 import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
-import { PROJECTION_PANEL_NAME } from '../core/projectionStrings.ts';
 import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
 
 import type { ProjectionSharesControlsProps } from './ProjectionSharesControls.tsx';
 import { PROJECTION_SHARE_STEP, WHOLE_SHARE } from './projectionTabStyles.ts';
 
 /** What the shares panel behind the cog is drawn from. */
-export type ProjectionSharesMoreProps = Omit<
-  ProjectionSharesControlsProps,
-  'tier'
->;
+type ProjectionSharesMoreProps = Omit<ProjectionSharesControlsProps, 'tier'>;
 
 /**
  * What the shares figure keeps behind the cog: the one target it has, named
@@ -31,7 +27,7 @@ export function ProjectionSharesMore(
   props: ProjectionSharesMoreProps,
 ): ReactElement {
   const { options, onChange, copy } = props;
-  const { help, tab } = copy;
+  const { help, panel, tab } = copy;
 
   return (
     <OverlayPanel
@@ -39,7 +35,7 @@ export function ProjectionSharesMore(
       onReset={() => onChange(PROJECTION_TAB_DEFAULTS.shares)}
     >
       <OverlayNumber
-        label={PROJECTION_PANEL_NAME.shareTarget}
+        label={panel.name.shareTarget}
         help={help.shareTarget}
         value={Math.round(options.shareTarget * WHOLE_SHARE)}
         min={0}

package/src/projection/ui/ProjectionSharesTab.tsx

@@ -7,7 +7,8 @@ import type { ProjectionCopy } from '../core/projectionCopy.ts';
 import { PROJECTION_COPY } from '../core/projectionCopy.ts';
 import type { ProjectionResult } from '../core/projectionResult.ts';
 
-import { SharesAxis, SharesMarks } from './ProjectionSharesMarks.tsx';
+import { SharesAxis } from './ProjectionSharesAxis.tsx';
+import { SharesMarks } from './ProjectionSharesMarks.tsx';
 import {
   PROJECTION_TAB_HEIGHT,
   SHARES_BOTTOM_ROOM,
@@ -15,7 +16,7 @@ import {
 } from './projectionTabStyles.ts';
 
 /** What {@link ProjectionSharesTab} needs. */
-export interface ProjectionSharesTabProps {
+interface ProjectionSharesTabProps {
   /** What the run produced; every axis must carry a share. */
   result: ProjectionResult;
   /** The bars, worked out once by the viewer and explained in its bar. */
@@ -93,6 +94,7 @@ export function ProjectionSharesTab(
         {(frame) => (
           <SharesMarks
             shares={shares}
+            copy={copy}
             frame={frame}
             band={chartBand(slots, frame.plot.left, frame.plot.right, {
               padding: BAR_GAP,