react-cheminfo 0.9.0 → 0.11.0

package/src/projection/ui/ProjectionSpaceMore.tsx

@@ -0,0 +1,169 @@
+import type { ReactElement } from 'react';
+
+import { chartAxisTitle } from '../../chart/core/chartLabels.ts';
+import { OverlayAction } from '../../overlay/ui/OverlayAction.tsx';
+import { OverlayGroup } from '../../overlay/ui/OverlayGroup.tsx';
+import { OverlayNumber } from '../../overlay/ui/OverlayNumber.tsx';
+import { OverlayPanel } from '../../overlay/ui/OverlayPanel.tsx';
+import type { OverlayOption } from '../../overlay/ui/OverlayRow.tsx';
+import { OverlaySegmented } from '../../overlay/ui/OverlaySegmented.tsx';
+import { OverlaySelect } from '../../overlay/ui/OverlaySelect.tsx';
+import type { ScatterSelectionMode } from '../../scatter/core/scatterSelection.ts';
+import type { CloudGesture } from '../../scatter3d/core/cloudGesture.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import {
+  PROJECTION_PANEL_NAME,
+  PROJECTION_PANEL_SECTION,
+} from '../core/projectionStrings.ts';
+import { PROJECTION_TAB_DEFAULTS } from '../core/projectionTabDefaults.ts';
+
+import type { ProjectionSpaceControlsProps } from './ProjectionSpaceControls.tsx';
+import { CLOUD_GESTURE_CHOICES } from './projectionCloudChoices.ts';
+
+/** What {@link ProjectionSpaceMore} needs beyond the cloud's own controls. */
+export interface ProjectionSpaceMoreProps extends ProjectionSpaceControlsProps {
+  /** The reduced space the controls apply to; its axes fill the three pickers. */
+  result: ProjectionResult;
+  /**
+   * How many samples are selected, which is what the clearing action needs
+   * before it can do anything.
+   * @default 0
+   */
+  selectedCount?: number;
+  /** Puts the box back where it was first seen. */
+  onResetView: () => void;
+  /** Empties the selection. */
+  onClearSelection: () => void;
+}
+
+/**
+ * What the cloud keeps behind the cog: its three axes, the dot size, and what
+ * the two drags do.
+ *
+ * It is the map's panel with one picker more and one action fewer. There is no
+ * "zoom to selection" here, because a box has no frame to draw round a crowd:
+ * the reader turns it until the crowd is facing them, which is the gesture the
+ * whole tab exists for, and a button that guessed an angle for them would
+ * usually guess wrong.
+ * @param props - See {@link ProjectionSpaceMoreProps}.
+ * @returns The panel behind the cog.
+ */
+export function ProjectionSpaceMore(
+  props: ProjectionSpaceMoreProps,
+): ReactElement {
+  const { result, options, onChange, copy } = props;
+  const { selectedCount = 0, onResetView, onClearSelection } = props;
+  const { action, help, tab } = copy;
+
+  const nothingPicked = selectedCount === 0;
+
+  return (
+    <OverlayPanel
+      title={tab.space}
+      onReset={() => onChange(PROJECTION_TAB_DEFAULTS.space)}
+      actions={
+        <>
+          <OverlayAction
+            text={action.resetView}
+            icon="reset"
+            onClick={onResetView}
+          />
+          <OverlayAction
+            text={action.clearSelection}
+            icon="cross"
+            disabled={nothingPicked}
+            onClick={onClearSelection}
+          />
+        </>
+      }
+    >
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.axes} divider={false}>
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.xAxis}
+          help={help.xAxis}
+          value={String(options.xAxis)}
+          options={axisChoices(result, [options.yAxis, options.zAxis])}
+          onChange={(value) => onChange({ xAxis: Number(value) })}
+        />
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.yAxis}
+          help={help.yAxis}
+          value={String(options.yAxis)}
+          options={axisChoices(result, [options.xAxis, options.zAxis])}
+          onChange={(value) => onChange({ yAxis: Number(value) })}
+        />
+        <OverlaySelect
+          label={PROJECTION_PANEL_NAME.zAxis}
+          help={help.zAxis}
+          value={String(options.zAxis)}
+          options={axisChoices(result, [options.xAxis, options.yAxis])}
+          onChange={(value) => onChange({ zAxis: Number(value) })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.drawing}>
+        <OverlayNumber
+          label={PROJECTION_PANEL_NAME.pointRadius}
+          help={help.pointRadius}
+          value={options.pointRadius}
+          min={1}
+          max={12}
+          step={0.5}
+          digits={1}
+          unit="px"
+          onChange={(pointRadius) => onChange({ pointRadius })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.handling}>
+        <OverlaySegmented<CloudGesture>
+          label={PROJECTION_PANEL_NAME.cloudGesture}
+          help={help.cloudGesture}
+          value={options.cloudGesture}
+          options={CLOUD_GESTURE_CHOICES}
+          onChange={(cloudGesture) => onChange({ cloudGesture })}
+        />
+      </OverlayGroup>
+      <OverlayGroup label={PROJECTION_PANEL_SECTION.selecting}>
+        <OverlaySegmented<ScatterSelectionMode>
+          label={PROJECTION_PANEL_NAME.selectMode}
+          help={help.selectMode}
+          value={options.selectMode}
+          options={SELECT_MODE_CHOICES}
+          onChange={(selectMode) => onChange({ selectMode })}
+        />
+      </OverlayGroup>
+    </OverlayPanel>
+  );
+}
+
+const AXIS_TAKEN_NOTE = 'Already drawn on another axis.';
+
+/** The same three words the map's panel offers, for the same reason. */
+const SELECT_MODE_CHOICES: ReadonlyArray<OverlayOption<ScatterSelectionMode>> =
+  [
+    { value: 'replace', label: 'Replace' },
+    { value: 'add', label: 'Add' },
+    { value: 'remove', label: 'Remove' },
+  ];
+
+/**
+ * The axes one picker offers, with the ones already drawn kept but unreachable.
+ * @param result - The reduced space being drawn.
+ * @param taken - The axes the other two pickers are showing.
+ * @returns The choices, in the order the run produced them.
+ */
+function axisChoices(
+  result: ProjectionResult,
+  taken: readonly number[],
+): OverlayOption[] {
+  const choices: OverlayOption[] = [];
+  for (const [index, axis] of result.axes.entries()) {
+    const drawn = taken.includes(index);
+    choices.push({
+      value: String(index),
+      label: chartAxisTitle(axis.name, { share: axis.share }),
+      disabled: drawn,
+      title: drawn ? AXIS_TAKEN_NOTE : undefined,
+    });
+  }
+  return choices;
+}

package/src/projection/ui/ProjectionSpaceTab.tsx

@@ -0,0 +1,217 @@
+import type { ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import type { ScatterPointOpen } from '../../scatter/ui/scatterPlotProps.ts';
+import type { SelectionChange } from '../../scatter/ui/useScatterSelection.ts';
+import type { OrbitCamera } from '../../scatter3d/core/orbitCamera.ts';
+import { ScatterCloud } from '../../scatter3d/ui/ScatterCloud.tsx';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type { ProjectionOptions } from '../core/projectionOptions.ts';
+import type { ProjectionResult } from '../core/projectionResult.ts';
+import type { ResolvedProjectionGroups } from '../core/projectionSamples.ts';
+
+import type { SelectionReport } from './ProjectionMapCaption.tsx';
+import { ProjectionMapCaption } from './ProjectionMapCaption.tsx';
+import { ProjectionMapLegend } from './ProjectionMapLegend.tsx';
+import { ProjectionSurface } from './ProjectionSurface.tsx';
+import type { ProjectionMapChrome } from './projectionMapChrome.ts';
+import {
+  projectionAxisTitle,
+  projectionMapCloud,
+  projectionScatterGroups,
+} from './projectionMapModel.ts';
+import { MINIMUM_SHELL_POINTS } from './projectionSpaceModel.ts';
+
+/** What {@link ProjectionSpaceTab} needs. */
+export interface ProjectionSpaceTabProps {
+  /** What the run produced, whatever produced it. */
+  result: ProjectionResult;
+  /** The groups, resolved once by the viewer so every tab colours alike. */
+  groups: ResolvedProjectionGroups;
+  /** What the cloud is showing, already resolved against `result`. */
+  options: ProjectionOptions;
+  /** The words the cloud writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** The key's title and entries, built once with the bar's explanation. */
+  chrome: ProjectionMapChrome;
+  /**
+   * What each sample is called, in the score matrix's row order.
+   * @default undefined — the setting has nothing to write and draws nothing
+   */
+  ids?: readonly string[];
+  /** Width of the figure, in pixels. */
+  width: number;
+  /** Height of the figure, in pixels. */
+  height: number;
+  /** The selected rows, as indices into the score matrix. */
+  selected: readonly number[];
+  /** Where the reader is standing, which the viewer keeps between visits. */
+  camera: OrbitCamera;
+  /** Called with the camera every frame of a turn leaves behind. */
+  onCameraChange: (camera: OrbitCamera) => void;
+  /** How far in the reader has zoomed. */
+  zoom: number;
+  /** Called with the zoom the wheel asks for. */
+  onZoomChange: (zoom: number) => void;
+  /**
+   * Whether the wheel zooms the box.
+   * @default true
+   */
+  wheelZoom?: boolean;
+  /**
+   * What the last gesture picked out, for the line over the picture.
+   * @default null — nothing has happened yet
+   */
+  report?: SelectionReport | null;
+  /**
+   * Called when a lasso is released or a dot is tapped.
+   * @default undefined
+   */
+  onSelectionChange?: (change: SelectionChange) => void;
+  /**
+   * Called with the row under the pointer, or `-1`.
+   * @default undefined
+   */
+  onHoverChange?: (index: number) => void;
+  /**
+   * Called when the reader double-clicks a sample.
+   * @default undefined
+   */
+  onPointDoubleClick?: (point: ScatterPointOpen) => void;
+  /**
+   * The card that follows the pointer, built by the viewer so that it says the
+   * same thing on every tab.
+   * @default undefined — no card is drawn
+   */
+  hoverCard?: ReactNode;
+  /**
+   * Value of the `data-testid` attribute of the figure.
+   * @default undefined
+   */
+  testId?: string;
+}
+
+/**
+ * The cloud: the same samples as the map, in a box the reader can turn.
+ *
+ * It earns a tab of its own rather than a switch on the map because it answers
+ * a different question. The map shows the two strongest patterns and is the
+ * right picture nine times in ten; the cloud is what a reader reaches for when
+ * two groups sit on top of each other there, because a third component often
+ * pulls them apart and no flat picture can show that.
+ *
+ * Everything it can share with the map it does share — the colours, the
+ * selection, the lasso, the key, the card and the names — so moving between
+ * the two tabs changes the picture and nothing else. What it cannot share is
+ * the scale: all three axes are stretched to one box, because a solid seen
+ * from an angle has nowhere to put three sets of tick labels, and a box drawn
+ * at three scales would tilt a group in a direction the data never did.
+ * @param props - See {@link ProjectionSpaceTabProps}.
+ * @returns The figure.
+ */
+export function ProjectionSpaceTab(
+  props: ProjectionSpaceTabProps,
+): ReactElement {
+  const { result, groups, options, copy, chrome, width, height } = props;
+  const { ids, selected, report = null, camera, zoom } = props;
+  const { onCameraChange, onZoomChange, wheelZoom } = props;
+  const { onSelectionChange, onHoverChange, hoverCard, testId } = props;
+  const { onPointDoubleClick } = props;
+  const { scores, fittedCount } = result;
+  const { xAxis, yAxis, zAxis, colorBy, pointRadius } = options;
+  const { showGroupLabels, showIds, selectMode, cloudGesture } = options;
+  const { ellipse: shells } = options;
+
+  const flat = useMemo(
+    () => projectionMapCloud(scores, xAxis, yAxis),
+    [scores, xAxis, yAxis],
+  );
+  const depth = useMemo(
+    () => projectionMapCloud(scores, zAxis, zAxis).x,
+    [scores, zAxis],
+  );
+
+  const colored = colorBy === 'group' && groups.entries.length > 0;
+
+  return (
+    <div style={{ position: 'relative' }} data-testid={testId}>
+      <ScatterCloud
+        x={flat.x}
+        y={flat.y}
+        z={depth}
+        width={width}
+        height={height}
+        xLabel={axisName(result, xAxis)}
+        yLabel={axisName(result, yAxis)}
+        zLabel={axisName(result, zAxis)}
+        groupOf={colored ? groups.groupOf : undefined}
+        groups={colored ? projectionScatterGroups(groups) : undefined}
+        ellipsoid={colored ? shells : null}
+        ellipsoidMinimumPoints={MINIMUM_SHELL_POINTS}
+        showGroupLabels={colored && showGroupLabels}
+        pointLabels={showIds ? ids : undefined}
+        pointRadius={pointRadius}
+        outlinedFrom={fittedCount}
+        selected={selected}
+        onSelectionChange={onSelectionChange}
+        selectMode={selectMode}
+        onHoverChange={onHoverChange}
+        onPointDoubleClick={onPointDoubleClick}
+        gesture={cloudGesture}
+        camera={camera}
+        onCameraChange={onCameraChange}
+        zoom={zoom}
+        onZoomChange={onZoomChange}
+        wheelZoom={wheelZoom}
+        overlay={
+          <ProjectionSurface>
+            {chrome.entries.length === 0 ? null : (
+              <ProjectionMapLegend
+                title={chrome.title}
+                entries={chrome.entries}
+                cloud={flat}
+                xDomain={CUBE_DOMAIN}
+                yDomain={CUBE_DOMAIN}
+                width={width}
+                height={height}
+              />
+            )}
+            <ProjectionMapCaption
+              report={report}
+              copy={copy}
+              mode={selectMode}
+              drawing={false}
+            />
+            {hoverCard}
+          </ProjectionSurface>
+        }
+      />
+    </div>
+  );
+}
+
+/**
+ * What an arm of the frame is called.
+ *
+ * The frame is the cloud's only record of which axis is which, so an axis the
+ * result cannot name is given its number rather than left blank: an unlabelled
+ * arm reads as a drawing error, and the reader cannot tell which of the three
+ * it was.
+ * @param result - The reduced space being drawn.
+ * @param index - Which axis.
+ * @returns The name to write on that arm.
+ */
+function axisName(result: ProjectionResult, index: number): string {
+  return projectionAxisTitle(result, index) ?? `Axis ${index + 1}`;
+}
+
+/**
+ * The range the key measures emptiness against.
+ *
+ * The key floats in whichever corner of the picture holds fewest dots, and it
+ * works that out from the cloud's own coordinates against a range. A turning
+ * box has no fixed range in data units — the same sample is at a different
+ * corner a second later — so the cube's own is used, which is stable and is
+ * what the corners of the picture actually are.
+ */
+const CUBE_DOMAIN: readonly [number, number] = [-1, 1];

package/src/projection/ui/ProjectionSurface.tsx

@@ -0,0 +1,63 @@
+import type { ReactElement, ReactNode } from 'react';
+import { useMemo } from 'react';
+
+import { overlayMetrics } from '../../overlay/core/overlayMetrics.ts';
+import type { OverlaySurface } from '../../overlay/ui/overlaySurface.ts';
+import {
+  OverlaySurfaceContext,
+  useCoarsePointer,
+  useOverlaySurface,
+} from '../../overlay/ui/overlaySurface.ts';
+
+/** What {@link ProjectionSurface} needs. */
+export interface ProjectionSurfaceProps {
+  /** The chrome drawn at the compact size: the settings bar, a floating key. */
+  children: ReactNode;
+  /**
+   * Width of the figure, in pixels, for the chrome that has to decide whether
+   * it still fits. Only the settings bar needs it — chrome inside a chart is
+   * already over a measured figure and inherits its width.
+   * @default undefined — whatever the surface above it was measured at
+   */
+  width?: number;
+}
+
+/**
+ * The compact measurements every piece of this viewer's chrome is drawn from.
+ *
+ * The viewer is meant to be embedded in somebody else's page, so its chrome
+ * takes the smallest measurements the overlay domain offers rather than the
+ * roomier ones a figure standing alone can afford. A finger still wins: the
+ * pointer is read here, and a coarse one is handed the largest set whatever
+ * the figure asked for.
+ *
+ * It is a surface of its own rather than an `OverlayLayer` because the
+ * settings bar is in the flow above the picture, and a layer is absolutely
+ * positioned over one — a bar inside a layer would float over the very data it
+ * introduces. Everything else about the surface it stands on is carried
+ * through, so a key nested inside a chart's own layer still fades with that
+ * chart and still knows it is repainting.
+ * @param props - See {@link ProjectionSurfaceProps}.
+ * @returns The chrome, drawn compact.
+ */
+export function ProjectionSurface(props: ProjectionSurfaceProps): ReactElement {
+  const { children, width } = props;
+  const above = useOverlaySurface();
+  const pointer = useCoarsePointer() ? 'coarse' : 'fine';
+
+  const surface = useMemo<OverlaySurface>(
+    () => ({
+      ...above,
+      metrics: overlayMetrics('compact', pointer),
+      pointer,
+      width: width ?? above.width,
+    }),
+    [above, pointer, width],
+  );
+
+  return (
+    <OverlaySurfaceContext.Provider value={surface}>
+      {children}
+    </OverlaySurfaceContext.Provider>
+  );
+}

package/src/projection/ui/ProjectionTabStrip.tsx

@@ -0,0 +1,144 @@
+import type { ReactElement } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import type { OverlayPillOption } from '../../overlay/ui/OverlayPills.tsx';
+import { OverlayPills } from '../../overlay/ui/OverlayPills.tsx';
+import type { ProjectionTab } from '../core/projectionTabs.ts';
+
+import {
+  projectionTabScroll,
+  projectionTabTrackStyle,
+} from './projectionBarStyles.ts';
+
+/** What {@link ProjectionTabStrip} needs. */
+export interface ProjectionTabStripProps {
+  /** The tabs the result can fill, in reading order. */
+  tabs: readonly ProjectionTab[];
+  /** The one showing. */
+  tab: ProjectionTab;
+  /** Called with the tab the reader moved to. */
+  onTabChange: (tab: ProjectionTab) => void;
+  /** What each tab is called, from the viewer's copy. */
+  labels: Readonly<Record<ProjectionTab, string>>;
+  /**
+   * What each tab is called on a bar with no room for the long name. They are
+   * written out rather than truncated: "How much each explains" cut to the
+   * width that fits reads "How much each e…", which says less than the one
+   * word the tab is about.
+   */
+  shortLabels: Readonly<Record<ProjectionTab, string>>;
+  /**
+   * Stem of the `id` every button carries, so the panel below can name the tab
+   * it belongs to and a screen reader can walk between the two.
+   */
+  baseId: string;
+  /**
+   * The `id` of the panel the buttons drive. One panel is shared, because only
+   * the showing tab is ever rendered.
+   */
+  panelId: string;
+  /**
+   * How much of itself the bar is writing, which decides whether the names are
+   * written in full and whether the strip may scroll rather than shrink.
+   * @default 'full'
+   */
+  tier?: OverlayTier;
+  /**
+   * The most room the strip may take once it is scrolling, which is whatever
+   * the settings and the glyphs at the far end do not need. Without it the row
+   * would hand the strip and the settings a share of the shortfall each, and
+   * the settings — a chip beside a cog — have nothing to give.
+   * @default Number.POSITIVE_INFINITY — the strip takes what it needs
+   */
+  maxWidth?: number;
+  /**
+   * What the strip is called, for a reader arriving by tab.
+   * @default 'Views'
+   */
+  label?: string;
+}
+
+/**
+ * The connected pills that move between a projection's four views.
+ *
+ * They are the package's one segmented control rather than a strip of their
+ * own, so a reader who has pressed the choices inside a settings card has
+ * already learned to press these — and the pills sit at the start of the same
+ * bar those settings sit at the end of, which is what makes the two read as
+ * one piece of chrome instead of two rows stacked over the figure.
+ *
+ * What a narrowing figure takes from them is words and never views. First the
+ * long names give way to the short ones; then, on a figure too narrow to hold
+ * four names however short, the strip scrolls and the view in force is brought
+ * into sight — a reader who cannot see which view they are on, or cannot reach
+ * the others, is stuck rather than merely short of room.
+ *
+ * The shell draws none at all when the result can fill only one tab: a single
+ * pill says nothing about the data and still costs the reader a glance to rule
+ * out. The bar itself stays, because the settings and the explanation still
+ * belong somewhere.
+ * @param props - See {@link ProjectionTabStripProps}.
+ * @returns The strip.
+ */
+export function ProjectionTabStrip(
+  props: ProjectionTabStripProps,
+): ReactElement {
+  const { tabs, tab, onTabChange, labels, shortLabels } = props;
+  const { baseId, panelId, tier = 'full', label } = props;
+  const { maxWidth = Number.POSITIVE_INFINITY } = props;
+  const track = useRef<HTMLDivElement>(null);
+
+  const scrolls = tier === 'tiny';
+  const written =
+    tier === 'full' || tier === 'condensed' ? labels : shortLabels;
+  const options = useMemo<Array<OverlayPillOption<ProjectionTab>>>(
+    () => tabs.map((entry) => ({ value: entry, label: written[entry] })),
+    [tabs, written],
+  );
+
+  useEffect(() => {
+    if (!scrolls) return;
+    showSelected(track.current);
+  }, [scrolls, tab, options, maxWidth]);
+
+  return (
+    <div ref={track} style={projectionTabTrackStyle(scrolls, maxWidth)}>
+      <OverlayPills<ProjectionTab>
+        role="tablist"
+        label={label ?? 'Views'}
+        value={tab}
+        options={options}
+        baseId={baseId}
+        panelId={panelId}
+        onChange={onTabChange}
+      />
+    </div>
+  );
+}
+
+/**
+ * Bring the view in force back into sight inside a scrolling strip.
+ *
+ * The box is scrolled by hand rather than through `scrollIntoView`, which asks
+ * every scrolling ancestor to move as well — so a figure halfway down somebody
+ * else's page would jump under the reader for a tab they can already see.
+ *
+ * Where the view sits is measured against the strip's own box rather than read
+ * off `offsetLeft`, which is relative to whichever ancestor happens to be
+ * positioned — here the card, several boxes further out.
+ * @param box - The scrolling box, when it has been laid out.
+ */
+function showSelected(box: HTMLDivElement | null): void {
+  if (box === null) return;
+  const selected = box.querySelector<HTMLElement>('[aria-selected="true"]');
+  if (selected === null) return;
+  const seen = selected.getBoundingClientRect();
+  const left = seen.left - box.getBoundingClientRect().left + box.scrollLeft;
+  box.scrollLeft = projectionTabScroll(
+    left,
+    left + seen.width,
+    box.scrollLeft,
+    box.clientWidth,
+  );
+}

package/src/projection/ui/ProjectionVariablesControls.tsx

@@ -0,0 +1,62 @@
+import type { ReactElement } from 'react';
+
+import type { OverlayTier } from '../../overlay/core/overlayTiers.ts';
+import { OverlayValueMenu } from '../../overlay/ui/OverlayValueMenu.tsx';
+import type { ProjectionCopy } from '../core/projectionCopy.ts';
+import type {
+  ProjectionOptions,
+  ProjectionVariablesView,
+} from '../core/projectionOptions.ts';
+
+import type { ProjectionVariablesAvailability } from './projectionViewChoices.ts';
+import { projectionViewChoices } from './projectionViewChoices.ts';
+
+/** What the "what differs" picker on the bar is drawn from. */
+export interface ProjectionVariablesControlsProps extends ProjectionVariablesAvailability {
+  /** Every option the panels are drawn from. */
+  options: ProjectionOptions;
+  /** The words the bar writes, already merged over the defaults. */
+  copy: ProjectionCopy;
+  /** Called with only the options that changed, for the viewer to merge. */
+  onChange: (patch: Partial<ProjectionOptions>) => void;
+  /**
+   * How much of itself the bar is writing.
+   * @default 'full'
+   */
+  tier?: OverlayTier;
+}
+
+/**
+ * The one control of the "what differs" tab that stays on the bar.
+ *
+ * "Show" is the only choice here that changes what the panels mean rather than
+ * how they are drawn, and it is the one a reader who has never met a loading
+ * needs first. A view whose data the run never reported is greyed rather than
+ * dropped, with the reason on the choice itself: a reader who cannot see that
+ * "Weights in your units" exists never learns to ask their colleague for a
+ * scaled model.
+ * @param props - See {@link ProjectionVariablesControlsProps}.
+ * @returns The picker.
+ */
+export function ProjectionVariablesControls(
+  props: ProjectionVariablesControlsProps,
+): ReactElement {
+  const { options, copy, onChange, tier = 'full' } = props;
+  const { canShowEffect, canRescale, canPickSample } = props;
+  const { bar, help } = copy;
+
+  return (
+    <OverlayValueMenu<ProjectionVariablesView>
+      label={help.variablesView.title}
+      keyWord={bar.key.variablesView}
+      showKey={tier === 'full'}
+      value={options.variablesView}
+      options={projectionViewChoices(copy, {
+        canShowEffect,
+        canRescale,
+        canPickSample,
+      })}
+      onChange={(variablesView) => onChange({ variablesView })}
+    />
+  );
+}