react-cheminfo 0.11.0 → 0.12.0

package/src/scatter3d/core/confidenceEllipsoid.ts

@@ -3,13 +3,15 @@
  *
  * It is the outline of `scatter/core` with one dimension more, and it is
  * described the same way — a centre and the axes of the group's own spread,
- * in the data's units — so that turning it into something an SVG can draw
- * stays a separate step. Here that step matters more than it does on a map:
- * a shell has no `<ellipse>` to fall back on and has to be tessellated,
- * projected and painted back to front.
+ * in the data's units, measured by the same scan the map's outlines are — so
+ * that turning it into something an SVG can draw stays a separate step: the
+ * silhouette a camera sees of it.
  */
 
+import { rowMatrix } from '../../chart/core/matrix.ts';
 import type { EllipseSize } from '../../scatter/core/confidenceEllipse.ts';
+import { DEFAULT_ELLIPSE_SIZE } from '../../scatter/core/confidenceEllipse.ts';
+import { scatterGroupMoments } from '../../scatter/core/scatterGroupMoments.ts';
 
 import { standardDeviationsForCoverage3 } from './ellipsoidCoverage.ts';
 import type { Vector3 } from './orbitCamera.ts';
@@ -62,25 +64,22 @@ export function confidenceEllipsoid(
   points: readonly Vector3[],
   options: ConfidenceEllipsoidOptions = {},
 ): ConfidenceEllipsoid | null {
-  const { size = DEFAULT_SIZE, minimumPoints = 4 } = options;
-  const floor = Math.max(4, minimumPoints);
+  const { size = DEFAULT_ELLIPSE_SIZE, minimumPoints = 4 } = options;
+  const moments = scatterGroupMoments(rowMatrix(points), null, 1, 3);
+  const count = moments.counts[0] ?? 0;
+  if (moments.axes < 3 || count < Math.max(4, minimumPoints)) return null;
 
-  let count = 0;
-  let sumX = 0;
-  let sumY = 0;
-  let sumZ = 0;
-  for (const point of points) {
-    if (!isFinitePoint(point)) continue;
-    count++;
-    sumX += point[0];
-    sumY += point[1];
-    sumZ += point[2];
-  }
-  if (count < floor) return null;
-
-  const center: Vector3 = [sumX / count, sumY / count, sumZ / count];
-  const covariance = spreadAbout(points, center, count);
-  if (covariance === null) return null;
+  const { means, covariances: spread } = moments;
+  const center: Vector3 = [means[0] ?? 0, means[1] ?? 0, means[2] ?? 0];
+  const covariance: SymmetricMatrix3 = {
+    xx: spread[0] ?? 0,
+    xy: spread[1] ?? 0,
+    xz: spread[2] ?? 0,
+    yy: spread[4] ?? 0,
+    yz: spread[5] ?? 0,
+    zz: spread[8] ?? 0,
+  };
+  if (!isFinitePoint(center) || !isFiniteMatrix(covariance)) return null;
 
   const radius = ellipsoidStandardDeviations(size);
   if (!Number.isFinite(radius)) return null;
@@ -111,59 +110,13 @@ export function confidenceEllipsoid(
  * Public because a legend has to be able to say what a share came to without
  * building a shell to ask it.
  * @param size - How large the shell was asked to be.
- * @returns The number of standard deviations.
+ * @returns The number of standard deviations, never below zero — the same floor the map's outline keeps.
  */
 export function ellipsoidStandardDeviations(size: EllipseSize): number {
-  if (size.kind === 'standardDeviations') return size.standardDeviations;
-  return standardDeviationsForCoverage3(size.probability);
-}
-
-function spreadAbout(
-  points: readonly Vector3[],
-  center: Vector3,
-  count: number,
-): SymmetricMatrix3 | null {
-  let xx = 0;
-  let xy = 0;
-  let xz = 0;
-  let yy = 0;
-  let yz = 0;
-  let zz = 0;
-  for (const point of points) {
-    if (!isFinitePoint(point)) continue;
-    const dx = point[0] - center[0];
-    const dy = point[1] - center[1];
-    const dz = point[2] - center[2];
-    xx += dx * dx;
-    xy += dx * dy;
-    xz += dx * dz;
-    yy += dy * dy;
-    yz += dy * dz;
-    zz += dz * dz;
+  if (size.kind === 'standardDeviations') {
+    return Math.max(size.standardDeviations, 0);
   }
-  const divisor = count - 1;
-  const covariance: SymmetricMatrix3 = {
-    xx: xx / divisor,
-    xy: xy / divisor,
-    xz: xz / divisor,
-    yy: yy / divisor,
-    yz: yz / divisor,
-    zz: zz / divisor,
-  };
-  if (
-    !Number.isFinite(center[0]) ||
-    !Number.isFinite(center[1]) ||
-    !Number.isFinite(center[2]) ||
-    !Number.isFinite(covariance.xx) ||
-    !Number.isFinite(covariance.yy) ||
-    !Number.isFinite(covariance.zz) ||
-    !Number.isFinite(covariance.xy) ||
-    !Number.isFinite(covariance.xz) ||
-    !Number.isFinite(covariance.yz)
-  ) {
-    return null;
-  }
-  return covariance;
+  return standardDeviationsForCoverage3(size.probability);
 }
 
 function isFinitePoint(point: Vector3): boolean {
@@ -174,4 +127,13 @@ function isFinitePoint(point: Vector3): boolean {
   );
 }
 
-const DEFAULT_SIZE: EllipseSize = { kind: 'coverage', probability: 0.95 };
+function isFiniteMatrix(matrix: SymmetricMatrix3): boolean {
+  return (
+    Number.isFinite(matrix.xx) &&
+    Number.isFinite(matrix.xy) &&
+    Number.isFinite(matrix.xz) &&
+    Number.isFinite(matrix.yy) &&
+    Number.isFinite(matrix.yz) &&
+    Number.isFinite(matrix.zz)
+  );
+}

package/src/scatter3d/core/ellipsoidSilhouette.ts

@@ -3,11 +3,12 @@
  *
  * An orthographic camera sends the unit sphere to a filled ellipse, so a shell
  * — a sphere carried by three semi-axes — has an exact elliptical silhouette
- * whatever it is turned to. Taking it as such is what keeps the glass smooth:
- * a tessellated shell is only as round as the number of faces it was cut into,
- * and every seam between two of those faces is a line the reader can see.
+ * whatever it is turned to. Drawing it as that one ellipse is what keeps the
+ * glass smooth at any zoom and free of seams.
  */
 
+import { ellipseAxes } from '../../scatter/core/ellipseAxes.ts';
+
 import type { ConfidenceEllipsoid } from './confidenceEllipsoid.ts';
 import type { OrbitCamera } from './orbitCamera.ts';
 import { rotatePoint } from './orbitCamera.ts';
@@ -32,8 +33,8 @@ export interface EllipsoidSilhouette {
  * The three semi-axes are turned with the camera and their depth dropped,
  * which leaves a `2 x 3` map from the unit sphere to the screen. The image of
  * that sphere is the ellipse whose shape matrix is the map times its own
- * transpose, so the two radii are the square roots of that matrix's
- * eigenvalues and the tilt is half the angle of its off-diagonal term.
+ * transpose — a covariance in all but name — so it is decomposed by the same
+ * `ellipseAxes` a map outline is, collinear floor included.
  *
  * A group flat in one direction gives a matrix with a zero eigenvalue and
  * comes back as a segment, which is the honest picture of a group that has no
@@ -63,14 +64,7 @@ export function ellipsoidSilhouette(
   const yy = downX * downX + downY * downY + downZ * downZ;
   const xy = acrossX * downX + acrossY * downY + acrossZ * downZ;
 
-  const middle = (xx + yy) / 2;
-  const spread = Math.hypot((xx - yy) / 2, xy);
-  const major = Math.max(0, middle + spread);
-  const minor = Math.max(0, middle - spread);
-
-  return {
-    rx: Math.sqrt(major),
-    ry: Math.sqrt(minor),
-    angle: 0.5 * Math.atan2(2 * xy, xx - yy),
-  };
+  // The shape matrix is already in the screen's own frame, so the angle the
+  // decomposition reports is measured down from the right with no conversion.
+  return ellipseAxes({ xx, xy, yy });
 }

package/src/scatter3d/core/index.ts

@@ -3,10 +3,10 @@
  * a sample lands on screen from there, and the shell that holds a group.
  *
  * It is the two-dimensional `scatter` domain with one axis more, and the extra
- * axis changes more than it looks. Nothing can be handed to an SVG shape any
- * more — a shell has to be cut into faces, projected, and painted back to
- * front — and the three axes have to share one scale, because a solid seen
- * from an angle has no tick labels to record three different ones with.
+ * axis changes more than it looks. A shell is drawn as the silhouette the
+ * camera sees of it, painted back to front, and the three axes have to share
+ * one scale, because a solid seen from an angle has no tick labels to record
+ * three different ones with.
  *
  * Nothing here knows what produced the coordinates, and nothing here draws:
  * every function is arithmetic over plain numbers, so the geometry can be

package/src/scatter3d/ui/CloudFrameLayer.tsx

@@ -50,7 +50,7 @@ export const CloudFrameLayer = memo(function CloudFrameLayer(
     <g data-layer="frame" pointerEvents="none">
       {edges.map((edge, at) => (
         <line
-          key={at}
+          key={EDGE_KEYS[at]}
           x1={edge.x1}
           y1={edge.y1}
           x2={edge.x2}
@@ -93,5 +93,10 @@ export const CloudFrameLayer = memo(function CloudFrameLayer(
 /** Cut once, because the corners of a cube do not depend on the camera. */
 const EDGES = cubeEdges();
 
+/** Each edge named by its two corners, which stay put however the box turns. */
+const EDGE_KEYS = EDGES.map(
+  ([from, to]) => `${from.join(' ')}|${to.join(' ')}`,
+);
+
 /** The same size a chart writes an axis title at, so the two read alike. */
 const ARM_LABEL_SIZE = 11;

package/src/scatter3d/ui/CloudShellLayer.tsx

@@ -47,12 +47,11 @@ export interface CloudShellLayerProps {
  * a ring of facets, it stays a curve at any zoom, and there are no seams
  * between neighbouring faces to read as a wireframe.
  *
- * What the faces were for is kept in the fill. A ray through a shell crosses
- * it twice — the near wall and the far one — so the glass is darkest where the
- * reader looks through both walls at a glancing angle, which is the rim, and
- * lightest through the middle where the far wall is turned away. That is one
- * gradient, and it says the shell is a solid the same way a hundred and sixty
- * stacked polygons did.
+ * The depth is carried by the fill. A ray through a shell crosses it twice —
+ * the near wall and the far one — so the glass is darkest where the reader
+ * looks through both walls at a glancing angle, which is the rim, and lightest
+ * through the middle where the far wall is turned away. One radial gradient
+ * says the shell is a solid.
  * @param props - See {@link CloudShellLayerProps}.
  * @returns The shells.
  */

package/src/scatter3d/ui/ScatterCloud.tsx

@@ -6,51 +6,36 @@ import {
   useWheelZoom,
 } from '../../chart/ui/useWheelZoom.ts';
 import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
-import { nearestPointIndex } from '../../scatter/core/screenPoints.ts';
-import { ScatterLabelLayer } from '../../scatter/ui/ScatterLabelLayer.tsx';
 import { ScatterMarkLayer } from '../../scatter/ui/ScatterMarkLayer.tsx';
-import { surfacePosition } from '../../scatter/ui/lassoGesture.ts';
-import {
-  SCATTER_GROUP_LABEL_SIZE,
-  SCATTER_LABEL_SIZE,
-} from '../../scatter/ui/scatterLabelBoxes.ts';
-import { placeScatterLabels } from '../../scatter/ui/scatterLabelPlacement.ts';
-import {
-  scatterGroupLabels,
-  scatterPointLabels,
-} from '../../scatter/ui/scatterLabels.ts';
-import {
-  LASSO_STYLE,
-  scatterGroupInk,
-} from '../../scatter/ui/scatterPlotModel.ts';
+import { ScatterOverlayLayers } from '../../scatter/ui/ScatterOverlayLayers.tsx';
+import { ScatterPointLayer } from '../../scatter/ui/ScatterPointLayer.tsx';
+import { scatterGroupInk } from '../../scatter/ui/scatterPlotModel.ts';
 import { useScatterInteraction } from '../../scatter/ui/useScatterInteraction.ts';
+import { useScatterLabels } from '../../scatter/ui/useScatterLabels.ts';
 import { cubePoints } from '../core/cubePoints.ts';
 import type { OrbitCamera } from '../core/orbitCamera.ts';
 import { DEFAULT_ORBIT_CAMERA } from '../core/orbitCamera.ts';
 
 import { CloudFrameLayer } from './CloudFrameLayer.tsx';
-import { CloudPointLayer } from './CloudPointLayer.tsx';
 import type { CloudShell } from './CloudShellLayer.tsx';
 import { CloudShellLayer } from './CloudShellLayer.tsx';
-import { cloudView, projectCloud } from './cloudGeometry.ts';
+import { cloudPointRadii, cloudView, projectCloud } from './cloudGeometry.ts';
 import { clampCloudZoom } from './cloudZoom.ts';
 import { cloudLabel, cloudShells } from './scatterCloudModel.ts';
 import type { ScatterCloudProps } from './scatterCloudProps.ts';
 import { useOrbitDrag } from './useOrbitDrag.ts';
 
-export type { CloudGesture, ScatterCloudProps } from './scatterCloudProps.ts';
-
 /**
  * A cloud of samples in a box the reader can turn, with a glass shell around
  * each group.
  *
  * It is the flat scatter's twin and shares with it everything it can — the
- * selection, the lasso, the hover card, the labels and the group colours are
- * the same hooks and the same helpers — because a reader who has learned the
- * map must not have to learn this separately. What it cannot share is the
- * frame: three axes seen from an angle have no room for three sets of tick
- * labels, so the axes are all stretched to one cube, the frame names them, and
- * the numbers stay in the card the pointer raises.
+ * selection, the lasso, the keyboard cursor, the hover card, the labels and
+ * the group colours are the same hooks and the same layers — because a reader
+ * who has learned the map must not have to learn this separately. What it
+ * cannot share is the frame: three axes seen from an angle have no room for
+ * three sets of tick labels, so the axes are all stretched to one cube, the
+ * frame names them, and the numbers stay in the card the pointer raises.
  *
  * It draws in SVG rather than in WebGL, and that is a decision about saving
  * rather than about drawing. Every other figure in this package is saved from
@@ -65,9 +50,10 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
   const { ellipsoidMinimumPoints, ellipsoidFillOpacity } = props;
   const { showGroupLabels = false, pointLabels, pointRadius = 3.5 } = props;
   const { outlinedFrom, selected, defaultSelected, onSelectionChange } = props;
-  const { selectMode = 'replace', onHoverChange, overlay } = props;
-  const { onPointDoubleClick } = props;
-  const { gesture = 'turn', wheelZoom = true, label, testId } = props;
+  const { selectMode = 'replace', onHoverChange, onPinChange } = props;
+  const { onLassoChange, onPointDoubleClick, overlay } = props;
+  const { gesture = 'turn', wheelZoom = true, wheelZoomDelay } = props;
+  const { label, className, testId } = props;
 
   const [ownCamera, setOwnCamera] = useState<OrbitCamera>(DEFAULT_ORBIT_CAMERA);
   const [ownZoom, setOwnZoom] = useState(1);
@@ -84,6 +70,10 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
     () => projectCloud(cube, camera, view.viewport),
     [camera, cube, view.viewport],
   );
+  const radii = useMemo(
+    () => cloudPointRadii(cloud.depths, pointRadius),
+    [cloud.depths, pointRadius],
+  );
   const ink = useMemo(
     () => scatterGroupInk(groups, mutedGroups),
     [groups, mutedGroups],
@@ -113,20 +103,28 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
     touchLasso: selecting,
     hoverRadius: pointRadius + HOVER_SLACK,
     onHoverChange,
+    onPinChange,
+    onLassoChange,
+  });
+  const labels = useScatterLabels(cloud.points, {
+    pointLabels,
+    showGroupLabels,
+    groups,
+    groupOf,
+    colors: ink.colors,
+    radius: pointRadius,
+    bounds: view.rect,
   });
 
   // Everything a gesture callback reads is taken from here rather than from
   // the closure, so a caller that owns the camera and answers with an inline
   // arrow — which is how every caller writes it — does not rebuild the drag
   // sixty times during its own turn.
-  const live = useRef({ camera, zoom, points: cloud.points, props });
+  const live = useRef({ camera, zoom, interaction, props });
   useLayoutEffect(() => {
-    live.current = { camera, zoom, points: cloud.points, props };
+    live.current = { camera, zoom, interaction, props };
   });
 
-  const { select, mask } = interaction.selection;
-  const { moveTo, leave, pin, unpin, hovered } = interaction.hover;
-
   const onOrbit = useCallback((turn: (was: OrbitCamera) => OrbitCamera) => {
     const next = turn(live.current.camera);
     // Written back so the frames of one drag compose, rather than each of them
@@ -138,17 +136,9 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
 
   const onTap = useCallback(
     (tapX: number, tapY: number, mode: ScatterSelectionMode) => {
-      const radius = (live.current.props.pointRadius ?? 3.5) + HOVER_SLACK;
-      const index = nearestPointIndex(live.current.points, tapX, tapY, radius);
-      if (index === -1) {
-        unpin();
-        if (mode === 'replace') interaction.selection.clear();
-        return;
-      }
-      select([index], mode, 'point');
-      pin(index);
+      live.current.interaction.clickAt(tapX, tapY, mode);
     },
-    [interaction.selection, pin, select, unpin],
+    [],
   );
 
   const onWheel = useCallback((_x: number, _y: number, factor: number) => {
@@ -161,81 +151,27 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
 
   function handleDoubleClick(event: ReactMouseEvent<SVGRectElement>): void {
     if (onPointDoubleClick === undefined) return;
-    const at = surfacePosition(event, 0, 0);
-    const radius = (live.current.props.pointRadius ?? 3.5) + HOVER_SLACK;
-    const index = nearestPointIndex(live.current.points, at.x, at.y, radius);
-    if (index === -1) return;
-    onPointDoubleClick({
-      index,
-      x: at.x,
-      y: at.y,
-      clientX: event.clientX,
-      clientY: event.clientY,
-    });
+    const opened = interaction.openAt(event);
+    if (opened !== null) onPointDoubleClick(opened);
   }
 
   const orbit = useOrbitDrag({
     enabled: !selecting,
     onOrbit,
     onTap,
-    onMove: moveTo,
-    onLeave: leave,
+    onMove: interaction.hover.moveTo,
+    onLeave: interaction.hover.leave,
     mode: selectMode,
   });
   const { ref: wheelSurface } = useWheelZoom<SVGRectElement>({
     enabled: wheelZoom,
-    delay: CHART_WHEEL_DWELL,
+    delay: wheelZoomDelay ?? CHART_WHEEL_DWELL,
     onZoom: onWheel,
   });
 
-  const named = useMemo(
-    () =>
-      pointLabels === undefined
-        ? undefined
-        : placeScatterLabels(
-            scatterPointLabels(cloud.points, pointLabels, {
-              groupOf,
-              colors: ink.colors,
-            }),
-            {
-              fontSize: SCATTER_LABEL_SIZE,
-              radius: pointRadius,
-              bounds: view.rect,
-            },
-          ),
-    [cloud.points, groupOf, ink.colors, pointLabels, pointRadius, view.rect],
-  );
-  const crowds = useMemo(
-    () =>
-      showGroupLabels && groups !== undefined
-        ? placeScatterLabels(
-            scatterGroupLabels(
-              cloud.points,
-              groups.map((group) => group.label),
-              { groupOf, colors: ink.colors },
-            ),
-            {
-              fontSize: SCATTER_GROUP_LABEL_SIZE,
-              bold: true,
-              centered: true,
-              radius: pointRadius,
-              bounds: view.rect,
-            },
-          )
-        : undefined,
-    [
-      cloud.points,
-      groupOf,
-      groups,
-      ink.colors,
-      pointRadius,
-      showGroupLabels,
-      view.rect,
-    ],
-  );
-
   return (
     <div
+      className={className}
       data-testid={testId}
       style={{ position: 'relative', width, height }}
       role="img"
@@ -255,10 +191,10 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
           viewport={view.viewport}
           fillOpacity={ellipsoidFillOpacity}
         />
-        <CloudPointLayer
+        <ScatterPointLayer
           points={cloud.points}
-          depths={cloud.depths}
           order={cloud.order}
+          radii={radii}
           groupOf={groupOf}
           colors={ink.colors}
           opacities={ink.opacities}
@@ -267,19 +203,16 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
         />
         <ScatterMarkLayer
           points={cloud.points}
-          selected={mask}
-          hovered={hovered}
+          selected={interaction.selection.mask}
+          hovered={interaction.hover.hovered}
+          focused={interaction.keyboard.cursor}
+          radius={pointRadius}
+        />
+        <ScatterOverlayLayers
+          labels={labels}
           radius={pointRadius}
+          lassoPath={interaction.lasso.pathData}
         />
-        {named === undefined ? null : (
-          <ScatterLabelLayer labels={named} radius={pointRadius} />
-        )}
-        {crowds === undefined ? null : (
-          <ScatterLabelLayer labels={crowds} radius={pointRadius} strong />
-        )}
-        {interaction.lasso.pathData === '' ? null : (
-          <path d={interaction.lasso.pathData} {...LASSO_STYLE} />
-        )}
         <rect
           x={0}
           y={0}
@@ -287,6 +220,8 @@ export function ScatterCloud(props: ScatterCloudProps): ReactElement {
           height={Math.max(0, height)}
           ref={wheelSurface}
           fill="transparent"
+          tabIndex={0}
+          onKeyDown={interaction.keyboard.onKeyDown}
           onDoubleClick={handleDoubleClick}
           {...(selecting ? interaction.surface : orbit.surface)}
         />

package/src/scatter3d/ui/cloudGeometry.ts

@@ -1,13 +1,12 @@
 /**
  * Where the cube, the cloud and the shells land on screen for one camera.
  *
- * Everything a cloud draws is cut once, in cube units, and re-projected on
- * every turn — so an orbit costs one multiply-add per vertex and nothing else.
- * That is what keeps a drag smooth on a figure holding a dozen shells of a
- * hundred and sixty faces each, and it is why the cutting and the projecting
- * are two steps rather than one.
+ * Everything a cloud draws is fitted once, in cube units, and re-projected on
+ * every turn — so an orbit costs one rotation per sample and one silhouette
+ * per shell, and nothing is fitted again while the box is turning.
  */
 
+import { chartRoundPixel } from '../../chart/core/chartScale.ts';
 import type { ScreenPoints } from '../../scatter/core/screenPoints.ts';
 import type { ConfidenceEllipsoid } from '../core/confidenceEllipsoid.ts';
 import { ellipsoidSilhouette } from '../core/ellipsoidSilhouette.ts';
@@ -16,7 +15,7 @@ import type {
   OrbitViewport,
   Vector3,
 } from '../core/orbitCamera.ts';
-import { projectPoint } from '../core/orbitCamera.ts';
+import { depthFraction, projectPoint } from '../core/orbitCamera.ts';
 
 /** Room kept between the figure's edge and the cube, in pixels. */
 export const CLOUD_MARGIN = 16;
@@ -111,6 +110,36 @@ export function projectCloud(
   return { points: { x, y }, depths, order };
 }
 
+/**
+ * How large each dot is drawn, from how near the front of the box it sits.
+ *
+ * A fifth larger at the front than at the back: enough that the eye reads it
+ * as depth when it is looking for depth, and little enough that nobody takes
+ * it for a value — a dot size that carried a measurement would be a fourth
+ * dimension nothing labelled. It is read from the projection rather than from
+ * the data, so a turn changes it and a filter does not.
+ * @param depths - How far towards the reader each sample is, in cube units.
+ * @param radius - Radius of a dot at the middle of the box, in pixels.
+ * @returns One radius per sample, in pixels.
+ */
+export function cloudPointRadii(
+  depths: Float64Array,
+  radius: number,
+): Float64Array {
+  const radii = new Float64Array(depths.length);
+  for (let index = 0; index < depths.length; index++) {
+    const fraction = depthFraction(depths[index] as number);
+    radii[index] = radius * (NEAREST_SHRINK + DEPTH_RANGE * fraction);
+  }
+  return radii;
+}
+
+/** How much smaller than `radius` the dot at the very back is drawn. */
+const NEAREST_SHRINK = 0.9;
+
+/** How much the radius grows from the back of the box to its front. */
+const DEPTH_RANGE = 0.4;
+
 /** One shell's outline, ready to be filled. */
 export interface CloudOutline {
   /** Where its middle landed, in pixels from the left. */
@@ -142,11 +171,11 @@ export function projectShellOutline(
   const at = projectPoint(ellipsoid.center, camera, viewport);
   const { rx, ry, angle } = ellipsoidSilhouette(ellipsoid, camera);
   const outline = {
-    cx: round(at.x),
-    cy: round(at.y),
-    rx: round(rx * viewport.scale),
-    ry: round(ry * viewport.scale),
-    angle: round((angle * 180) / Math.PI),
+    cx: chartRoundPixel(at.x),
+    cy: chartRoundPixel(at.y),
+    rx: chartRoundPixel(rx * viewport.scale),
+    ry: chartRoundPixel(ry * viewport.scale),
+    angle: chartRoundPixel((angle * 180) / Math.PI),
     depth: at.depth,
   };
   for (const value of [outline.cx, outline.cy, outline.rx, outline.ry]) {
@@ -184,17 +213,11 @@ export function projectSegments(
     const start = projectPoint(from, camera, viewport);
     const end = projectPoint(to, camera, viewport);
     lines.push({
-      x1: round(start.x),
-      y1: round(start.y),
-      x2: round(end.x),
-      y2: round(end.y),
+      x1: chartRoundPixel(start.x),
+      y1: chartRoundPixel(start.y),
+      x2: chartRoundPixel(end.x),
+      y2: chartRoundPixel(end.y),
     });
   }
   return lines;
 }
-
-/*
- * Two decimals, which is under a tenth of a device pixel at any zoom a browser
- * offers and keeps the markup short enough to read in a failing test.
- */
-const round = (value: number): number => Math.round(value * 100) / 100;

package/src/scatter3d/ui/cloudShellStyles.ts

@@ -16,7 +16,7 @@ export const SHELL_FILL_OPACITY = 0.1;
  * The path through a shell grows as the secant of the angle it is seen at, so
  * at the silhouette it is unbounded and the rim would go opaque. Held to a few
  * walls it reads as the swell of a ball; unheld it reads as a ring drawn round
- * a disc, which is the wireframe this fill replaced.
+ * a disc.
  */
 const RIM_WALLS = 6;
 
@@ -35,23 +35,22 @@ export interface ShellGlassStop {
  * is two walls of it. Straight through the middle they are met square on and
  * the glass is at its thinnest; towards the rim the same two walls are met at
  * a closing angle and the path through them lengthens as the secant of it, so
- * the shell swells towards its edge and reads as round. That is the whole of
- * the modelling the tessellated version did, minus the seams between the faces
- * it needed to do it.
+ * the shell swells towards its edge and reads as round.
  *
  * The walls are composited rather than added, so two of them at a tenth are
- * not a fifth but a nineteenth-something — the same arithmetic the browser was
- * doing when they were stacked polygons.
+ * not a fifth but a nineteenth-something — the arithmetic a browser applies
+ * when it lays one translucent layer over another.
  * @param strength - How solid one wall is, after the group's own opacity.
  * @returns The stops, from the middle outwards.
  */
 export function shellGlassStops(strength: number): ShellGlassStop[] {
   const wall = Math.min(1, Math.max(0, strength));
   const clear = 1 - wall;
-  return GLASS_OFFSETS.map((offset) => ({
-    offset,
-    opacity: round(1 - clear ** wallsAt(offset)),
-  }));
+  const stops: ShellGlassStop[] = [];
+  for (const offset of GLASS_OFFSETS) {
+    stops.push({ offset, opacity: round(1 - clear ** wallsAt(offset)) });
+  }
+  return stops;
 }
 
 /**