react-cheminfo 0.16.0 → 0.18.0

package/src/parallel/ui/ParallelLabels.tsx

@@ -5,6 +5,7 @@ import { PARALLEL_MARGIN } from '../core/parallelAxes.ts';
 import type { ParallelAxis } from '../core/parallelTypes.ts';
 
 import { PARALLEL_LABELS_STYLE, parallelLabelStyle } from './parallelStyles.ts';
+import type { ParallelAxisDrag } from './useParallelAxisDrag.ts';
 
 /** What {@link ParallelLabels} writes. */
 export interface ParallelLabelsProps {
@@ -17,6 +18,11 @@ export interface ParallelLabelsProps {
    * @default undefined
    */
   render?: ((axis: ParallelAxis, index: number) => ReactNode) | undefined;
+  /**
+   * The gesture that moves an axis by its name.
+   * @default undefined — the axes are fixed
+   */
+  drag?: ParallelAxisDrag | undefined;
 }
 
 /**
@@ -29,17 +35,32 @@ export interface ParallelLabelsProps {
  * @returns The names.
  */
 export function ParallelLabels(props: ParallelLabelsProps): ReactElement {
-  const { axes, layouts, render } = props;
+  const { axes, layouts, render, drag } = props;
+  const draggable = drag?.enabled ?? false;
+  const active = drag?.active ?? null;
 
   return (
     <div className="parallel-coordinates-labels" style={PARALLEL_LABELS_STYLE}>
       {layouts.map((layout, index) => {
         const axis = axes[index];
+        const moving = active !== null && active.from === index;
         return (
           <div
             key={layout.id}
             className="parallel-axis-label"
-            style={parallelLabelStyle(PARALLEL_MARGIN.left + layout.x)}
+            data-parallel-label={layout.id}
+            style={parallelLabelStyle({
+              left: PARALLEL_MARGIN.left + layout.x,
+              draggable,
+              dx: moving ? active.dx : null,
+            })}
+            {...drag?.propsFor(index)}
+            {...(draggable
+              ? {
+                  role: 'button',
+                  'aria-label': `${layout.label}: move this axis with the left and right arrow keys`,
+                }
+              : null)}
           >
             {axis !== undefined && render !== undefined
               ? render(axis, index)

package/src/parallel/ui/index.ts

@@ -29,6 +29,14 @@ export {
 } from './parallelInk.ts';
 export { ParallelLabels } from './ParallelLabels.tsx';
 export type { ParallelLabelsProps } from './ParallelLabels.tsx';
+export type { ParallelCommit, ParallelDraft } from './parallelGestureModel.ts';
+export {
+  parallelAxisById,
+  parallelAxisNear,
+  parallelBandsOf,
+  parallelCommitOf,
+  parallelPointOf,
+} from './parallelGestureModel.ts';
 export {
   parallelColorOf,
   parallelFigureLabel,
@@ -43,6 +51,13 @@ export type {
   ParallelCanvases,
 } from './useParallelCanvas.ts';
 export { useParallelCanvas } from './useParallelCanvas.ts';
+export type {
+  ParallelAxisDrag,
+  ParallelAxisDragOptions,
+  ParallelAxisDragState,
+  ParallelAxisHandleProps,
+} from './useParallelAxisDrag.ts';
+export { useParallelAxisDrag } from './useParallelAxisDrag.ts';
 export type {
   ParallelGesture,
   ParallelGestureOptions,

package/src/parallel/ui/parallelCoordinatesProps.ts

@@ -84,10 +84,11 @@ export interface ParallelCoordinatesProps {
   height?: number;
 
   /**
-   * The interval each axis keeps, keyed by axis id. Present, the caller owns
-   * the brushes — which is what lets a table beside the figure filter on the
-   * same ranges. The band being dragged stays inside the component either way,
-   * so a controlled parent is never asked to re-render sixty times a second.
+   * What each axis keeps, keyed by axis id: one interval, several, or `null`.
+   * Present, the caller owns the brushes — which is what lets a table beside
+   * the figure filter on the same ranges. The band being dragged stays inside
+   * the component either way, so a controlled parent is never asked to
+   * re-render sixty times a second.
    * @default undefined — the figure keeps its own
    */
   ranges?: ParallelRanges;
@@ -97,17 +98,25 @@ export interface ParallelCoordinatesProps {
    */
   defaultRanges?: ParallelRanges;
   /**
-   * Called when a brush is released, with the interval it keeps or `null` when
-   * it was cleared — never while the band is being dragged.
+   * Whether one axis may keep several intervals at once — the light molecules
+   * and the heavy ones, with nothing in between. A reader brushes a second
+   * interval by dragging on a bare part of an axis that already carries one,
+   * and takes one away by clicking it.
+   * @default false — a new brush replaces the one the axis carried
+   */
+  several?: boolean;
+  /**
+   * Called when a brush is released, with every interval that axis now keeps —
+   * empty when the reader cleared it, and never while a band is being dragged.
    * @default undefined
    */
-  onRangeChange?: (axisId: string, range: ParallelRange | null) => void;
+  onRangeChange?: (axisId: string, ranges: readonly ParallelRange[]) => void;
   /**
    * Called on every frame a band grows, for a caption saying what letting go
    * would keep. Nothing else should be wired to it.
    * @default undefined
    */
-  onRangePreview?: (axisId: string, range: ParallelRange | null) => void;
+  onRangePreview?: (axisId: string, ranges: readonly ParallelRange[]) => void;
   /**
    * Which rows the brushes keep, one entry per row, a zero meaning excluded.
    * Left out, it is worked out from the ranges with `parallelIncludedMask`,
@@ -170,6 +179,15 @@ export interface ParallelCoordinatesProps {
    * @default the axis label, and its unit after it
    */
   renderAxisLabel?: (axis: ParallelAxis, index: number) => ReactNode;
+  /**
+   * Called with the axis ids in the order the reader dragged them into.
+   * Present, every axis name becomes a handle: drag it, or focus it and press
+   * the left and right arrow keys. Two columns only show their relationship
+   * when they stand next to each other, so this is how a reader asks a
+   * different question of the same figure.
+   * @default undefined — the axes stand in the order the caller gave them
+   */
+  onAxisOrder?: (ids: readonly string[]) => void;
   /**
    * What is shown in place of the figure when there is nothing to draw.
    * @default undefined — an empty figure of the given height

package/src/parallel/ui/parallelGestureModel.ts

@@ -15,13 +15,21 @@ import type { ParallelBand } from '../core/parallelBrush.ts';
 import {
   PARALLEL_BRUSH_HALF_WIDTH,
   parallelBandOf,
+  parallelIsBand,
+  parallelRangeOf,
 } from '../core/parallelBrush.ts';
-import type { ParallelRanges } from '../core/parallelTypes.ts';
+import {
+  parallelRangeList,
+  parallelWriteRange,
+} from '../core/parallelSelection.ts';
+import type { ParallelRange, ParallelRanges } from '../core/parallelTypes.ts';
 
 /** A band being dragged, before the interval it keeps is reported. */
 export interface ParallelDraft {
   /** The axis it is on. */
   axis: string;
+  /** Which of that axis's bands it is, or `-1` when it is a new one. */
+  index: number;
   /** Where it stands this frame. */
   band: ParallelBand;
 }
@@ -83,27 +91,69 @@ export function parallelAxisById(
 }
 
 /**
- * The band to draw on each axis: the one being dragged where there is one, and
- * the interval in force everywhere else.
+ * The bands to draw on each axis: the one being dragged where there is one,
+ * and the intervals in force everywhere else.
  * @param axes - The axes, from left to right.
- * @param ranges - The interval each axis keeps, or `null` for none.
+ * @param ranges - What each axis keeps: one interval, several, or none.
  * @param draft - The band being dragged, or `null` when nothing is.
- * @returns The bands, keyed by axis id; an axis with none is left out.
+ * @returns The bands, keyed by axis id; an axis with none is left out. The
+ * band being dragged replaces the interval it came from rather than being
+ * drawn beside it, so an interval never appears twice mid-gesture.
  */
 export function parallelBandsOf(
   axes: readonly ParallelAxisLayout[],
   ranges: ParallelRanges,
   draft: ParallelDraft | null,
-): ReadonlyMap<string, ParallelBand> {
-  const drawn = new Map<string, ParallelBand>();
+): ReadonlyMap<string, ParallelBand[]> {
+  const drawn = new Map<string, ParallelBand[]>();
   for (const axis of axes) {
-    if (draft !== null && draft.axis === axis.id) {
-      drawn.set(axis.id, draft.band);
-      continue;
+    const list = parallelRangeList(ranges[axis.id]);
+    const dragging = draft !== null && draft.axis === axis.id;
+    const bands: ParallelBand[] = [];
+    for (let index = 0; index < list.length; index++) {
+      if (dragging && index === draft.index) continue;
+      bands.push(parallelBandOf(list[index] as ParallelRange, axis));
     }
-    const range = ranges[axis.id];
-    if (range === null || range === undefined) continue;
-    drawn.set(axis.id, parallelBandOf(range, axis));
+    if (dragging) bands.push(draft.band);
+    if (bands.length > 0) drawn.set(axis.id, bands);
   }
   return drawn;
 }
+
+/** What a released band does to the intervals its axis already kept. */
+export interface ParallelCommit {
+  /** The intervals in force on that axis. */
+  list: readonly ParallelRange[];
+  /** Which of them the drag took hold of, or `-1` when it began a new one. */
+  index: number;
+  /** The band as the pointer left it. */
+  band: ParallelBand;
+  /** The axis it is on, to read the band back into its own units. */
+  layout: ParallelAxisLayout;
+  /** Whether the press took an interval and let it go without moving it. */
+  still: boolean;
+  /** Whether the axis may keep more than one interval. */
+  several: boolean;
+}
+
+/**
+ * The intervals an axis keeps once a band has been let go.
+ *
+ * A press that keeps nothing is a click, and a click says "take this away":
+ * the interval under the pointer when it landed on one, and every interval on
+ * the axis when it landed on bare axis. That is the only way to be rid of one
+ * interval on an axis carrying four, and it is the gesture that already
+ * cleared an axis before it could carry more than one.
+ * @param commit - See {@link ParallelCommit}.
+ * @returns The intervals, sorted and disjoint.
+ */
+export function parallelCommitOf(commit: ParallelCommit): ParallelRange[] {
+  const { list, index, band, layout, still, several } = commit;
+  if (still) return parallelWriteRange(list, index, null);
+  if (!parallelIsBand(band)) {
+    return index === -1 ? [] : parallelWriteRange(list, index, null);
+  }
+  const range = parallelRangeOf(band, layout);
+  if (!several && index === -1) return [range];
+  return parallelWriteRange(list, index, range);
+}

package/src/parallel/ui/parallelPlotModel.ts

@@ -10,6 +10,7 @@
 
 import { formatInteger } from '../../format/core/numbers.ts';
 import type { ParallelHighlight } from '../core/parallelPaint.ts';
+import { parallelHasRange } from '../core/parallelSelection.ts';
 import type {
   ParallelAxis,
   ParallelColorBy,
@@ -71,7 +72,7 @@ export function parallelColorOf(
 /**
  * Whether any axis on the figure carries an interval at all.
  * @param axes - The axes, whose ids the intervals are keyed by.
- * @param ranges - The interval each axis keeps.
+ * @param ranges - What each axis keeps.
  * @returns Whether anything is brushed, which is what decides whether a line
  * is ever drawn in the excluded ink.
  */
@@ -80,8 +81,7 @@ export function parallelIsBrushed(
   ranges: ParallelRanges,
 ): boolean {
   for (const axis of axes) {
-    const range = ranges[axis.id];
-    if (range !== null && range !== undefined) return true;
+    if (parallelHasRange(ranges[axis.id])) return true;
   }
   return false;
 }

package/src/parallel/ui/parallelStyles.ts

@@ -62,22 +62,64 @@ export const PARALLEL_LABELS_STYLE = {
   pointerEvents: 'none',
 } as const satisfies CSSProperties;
 
+/** How one axis name is placed, and whether it is being moved. */
+export interface ParallelLabelPlacement {
+  /** Where the axis stands, in pixels from the figure's left edge. */
+  left: number;
+  /**
+   * Whether the name can be dragged to move its axis.
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * How far it has been dragged, in pixels, or `null` when it is not moving.
+   * @default null
+   */
+  dx?: number | null;
+}
+
 /**
  * One axis name, centred over its axis and taking the pointer back.
- * @param left - Where the axis stands, in pixels from the figure's left edge.
- * @returns The name's rules.
+ * @param placement - See {@link ParallelLabelPlacement}.
+ * @returns The name's rules. A name being dragged follows the pointer and is
+ * drawn over its neighbours, so it is never hidden behind the name it is
+ * about to change places with.
  */
-export function parallelLabelStyle(left: number): CSSProperties {
+export function parallelLabelStyle(
+  placement: ParallelLabelPlacement,
+): CSSProperties {
+  const { left, draggable = false, dx = null } = placement;
+  const moving = dx !== null;
   return {
     position: 'absolute',
+    zIndex: moving ? 2 : undefined,
     top: 2,
     left,
-    transform: 'translateX(-50%)',
+    transform:
+      dx === null ? 'translateX(-50%)' : `translateX(calc(-50% + ${dx}px))`,
     color: TOKEN.text,
     fontSize: 11,
     fontWeight: 600,
     whiteSpace: 'nowrap',
     pointerEvents: 'auto',
+    cursor: draggable ? (moving ? 'grabbing' : 'grab') : undefined,
+    opacity: moving ? 0.85 : undefined,
+    touchAction: draggable ? 'none' : undefined,
+    userSelect: draggable ? 'none' : undefined,
+  };
+}
+
+/**
+ * The axis a dragged name would take the place of, marked while it is moving.
+ * @param ink - The colour the figure singles things out in.
+ * @returns The mark's rules.
+ */
+export function parallelDropMarkStyle(ink: string): CSSProperties {
+  return {
+    stroke: ink,
+    strokeWidth: 2,
+    strokeOpacity: 0.7,
+    strokeDasharray: '4 3',
   };
 }
 

package/src/parallel/ui/useParallelAxisDrag.ts

@@ -0,0 +1,147 @@
+/**
+ * Dragging an axis by its name to stand somewhere else.
+ *
+ * Two columns only show their relationship when they are neighbours, so the
+ * order the axes stand in is a question the reader asks, not a decision the
+ * caller takes once. The name is the handle: it is the only part of an axis
+ * that is not already spoken for by the brush, and it is what a reader reaches
+ * for anyway.
+ *
+ * The gesture moves the name and nothing else. Reordering the axes for real
+ * would repaint every line on every frame, which a library of ten thousand
+ * molecules cannot afford — so the figure shows where the axis would land and
+ * moves it once, on release.
+ */
+
+import type { KeyboardEvent, PointerEvent } from 'react';
+import { useRef, useState } from 'react';
+
+import type { ParallelAxisLayout } from '../core/parallelAxes.ts';
+import {
+  parallelAxisOrder,
+  parallelDropIndex,
+  parallelMoveAxis,
+} from '../core/parallelOrder.ts';
+
+/** What {@link useParallelAxisDrag} needs. */
+export interface ParallelAxisDragOptions {
+  /** The axes, from left to right, already placed. */
+  layouts: readonly ParallelAxisLayout[];
+  /**
+   * Called with the axis ids in the order the reader put them in.
+   * @default undefined — the axes cannot be moved
+   */
+  onAxisOrder?: ((ids: readonly string[]) => void) | undefined;
+}
+
+/** The name being dragged, and where it would land. */
+export interface ParallelAxisDragState {
+  /** Which axis is moving, as an index into the axes. */
+  from: number;
+  /** How far its name has been dragged, in pixels. */
+  dx: number;
+  /** Which place it would take if let go now. */
+  to: number;
+}
+
+/** The reorder gesture, as the figure renders it. */
+export interface ParallelAxisDrag {
+  /** Whether the axes can be moved at all. */
+  enabled: boolean;
+  /** The name being dragged, or `null` when none is. */
+  active: ParallelAxisDragState | null;
+  /** Spread onto one axis's name. */
+  propsFor: (index: number) => ParallelAxisHandleProps;
+}
+
+/** What one axis name carries so it can be dragged and stepped with the keys. */
+export interface ParallelAxisHandleProps {
+  onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+  onPointerMove: (event: PointerEvent<HTMLElement>) => void;
+  onPointerUp: (event: PointerEvent<HTMLElement>) => void;
+  onPointerCancel: (event: PointerEvent<HTMLElement>) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+  tabIndex: number;
+}
+
+/** A name that has not been dragged, and is not moving anything. */
+const IDLE: ParallelAxisHandleProps = {
+  onPointerDown: noop,
+  onPointerMove: noop,
+  onPointerUp: noop,
+  onPointerCancel: noop,
+  onKeyDown: noop,
+  tabIndex: -1,
+};
+
+/**
+ * Move an axis by dragging its name, or by stepping it with the arrow keys.
+ * @param options - See {@link ParallelAxisDragOptions}.
+ * @returns The gesture. See {@link ParallelAxisDrag}.
+ */
+export function useParallelAxisDrag(
+  options: ParallelAxisDragOptions,
+): ParallelAxisDrag {
+  const { layouts, onAxisOrder } = options;
+  const [active, setActive] = useState<ParallelAxisDragState | null>(null);
+  const originRef = useRef(0);
+
+  function move(from: number, to: number): void {
+    if (onAxisOrder === undefined) return;
+    const order = parallelAxisOrder(layouts);
+    if (to < 0 || to >= order.length || to === from) return;
+    onAxisOrder(parallelMoveAxis(order, from, to));
+  }
+
+  function dropAt(from: number, dx: number): number {
+    const layout = layouts[from];
+    if (layout === undefined) return from;
+    return parallelDropIndex(layout.x + dx, layouts);
+  }
+
+  function propsFor(index: number): ParallelAxisHandleProps {
+    if (onAxisOrder === undefined) return IDLE;
+    return {
+      tabIndex: 0,
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        originRef.current = event.clientX;
+        setActive({ from: index, dx: 0, to: index });
+      },
+      onPointerMove: (event) => {
+        setActive((current) => {
+          if (current?.from !== index) return current;
+          const dx = event.clientX - originRef.current;
+          return { from: index, dx, to: dropAt(index, dx) };
+        });
+      },
+      onPointerUp: (event) => {
+        event.currentTarget.releasePointerCapture?.(event.pointerId);
+        setActive((current) => {
+          if (current !== null && current.from === index) {
+            move(current.from, current.to);
+          }
+          return null;
+        });
+      },
+      onPointerCancel: () => {
+        setActive(null);
+      },
+      onKeyDown: (event) => {
+        const step =
+          event.key === 'ArrowLeft' ? -1 : event.key === 'ArrowRight' ? 1 : 0;
+        if (step === 0) return;
+        event.preventDefault();
+        move(index, index + step);
+      },
+    };
+  }
+
+  return { enabled: onAxisOrder !== undefined, active, propsFor };
+}
+
+function noop(): void {
+  // A figure whose axes are fixed hands its names no handlers at all.
+}

package/src/parallel/ui/useParallelGesture.ts

@@ -25,11 +25,10 @@ import type { ParallelBand, ParallelBrushDrag } from '../core/parallelBrush.ts';
 import {
   parallelBandAt,
   parallelBandOf,
-  parallelBrushGrip,
-  parallelIsBand,
-  parallelRangeOf,
+  parallelBrushTarget,
 } from '../core/parallelBrush.ts';
 import { parallelNearestRow } from '../core/parallelHit.ts';
+import { parallelRangeList } from '../core/parallelSelection.ts';
 import type { ParallelRange, ParallelRanges } from '../core/parallelTypes.ts';
 
 import type { ParallelDraft } from './parallelGestureModel.ts';
@@ -37,6 +36,7 @@ import {
   parallelAxisById,
   parallelAxisNear,
   parallelBandsOf,
+  parallelCommitOf,
   parallelPointOf,
 } from './parallelGestureModel.ts';
 
@@ -54,11 +54,16 @@ export interface ParallelGestureOptions {
   included: Uint8Array | null;
   /** The intervals in force, whoever owns them. */
   ranges: ParallelRanges;
-  /** Called when a brush is released, with the interval it keeps or `null`. */
-  onRangeChange: (axisId: string, range: ParallelRange | null) => void;
+  /**
+   * Whether one axis may keep several intervals at once.
+   * @default false
+   */
+  several?: boolean | undefined;
+  /** Called when a brush is released, with every interval that axis now keeps. */
+  onRangeChange: (axisId: string, ranges: readonly ParallelRange[]) => void;
   /** Called on every frame a band grows. */
   onRangePreview?:
-    ((axisId: string, range: ParallelRange | null) => void) | undefined;
+    ((axisId: string, ranges: readonly ParallelRange[]) => void) | undefined;
   /** The row the caller says is hovered, if it owns that. */
   hovered?: number | undefined;
   /** Called with the row under the pointer, or `-1`. */
@@ -73,8 +78,8 @@ export interface ParallelGesture {
   surface: ScatterSurfaceProps;
   /** Put on the same rectangle, for the click that picks a line. */
   onClick: (event: ReactMouseEvent<Element>) => void;
-  /** The band to draw on each axis, the one being dragged included. */
-  bands: ReadonlyMap<string, ParallelBand>;
+  /** The bands to draw on each axis, the one being dragged included. */
+  bands: ReadonlyMap<string, ParallelBand[]>;
   /** The row under the pointer, or `-1`. */
   hovered: number;
   /** Where the pointer is in the figure, or `null` when it is away. */
@@ -92,6 +97,7 @@ export function useParallelGesture(
   options: ParallelGestureOptions,
 ): ParallelGesture {
   const { layouts, values, count, innerHeight, included, ranges } = options;
+  const { several = false } = options;
   const { onRangeChange, onRangePreview, onHoverChange, onRowClick } = options;
 
   const [draft, setDraft] = useState<ParallelDraft | null>(null);
@@ -104,10 +110,20 @@ export function useParallelGesture(
   const reportedRef = useRef(-1);
   const claimedRef = useRef(false);
 
-  function rangeOf(axisId: string, band: ParallelBand): ParallelRange | null {
-    const layout = parallelAxisById(layouts, axisId);
-    if (layout === undefined || !parallelIsBand(band)) return null;
-    return parallelRangeOf(band, layout);
+  function commit(
+    drag: ParallelBrushDrag,
+    band: ParallelBand,
+  ): readonly ParallelRange[] {
+    const layout = parallelAxisById(layouts, drag.axis);
+    if (layout === undefined) return parallelRangeList(ranges[drag.axis]);
+    return parallelCommitOf({
+      list: parallelRangeList(ranges[drag.axis]),
+      index: drag.index,
+      band,
+      layout,
+      still: unmoved(drag, band),
+      several,
+    });
   }
 
   function report(index: number): void {
@@ -135,22 +151,24 @@ export function useParallelGesture(
       claimedRef.current = false;
       return false;
     }
-    const current = ranges[layout.id];
-    const band =
-      current === null || current === undefined
-        ? null
-        : parallelBandOf(current, layout);
+    const list = parallelRangeList(ranges[layout.id]);
+    const bands: ParallelBand[] = [];
+    for (const range of list) bands.push(parallelBandOf(range, layout));
+    const target = parallelBrushTarget(point.y, bands);
+    const held = target.index === -1 ? undefined : bands[target.index];
     const drag: ParallelBrushDrag = {
       axis: layout.id,
-      grip: parallelBrushGrip(point.y, band),
+      index: target.index,
+      grip: target.grip,
       originY: point.y,
-      origin: band ?? { top: point.y, bottom: point.y },
+      origin: held ?? { top: point.y, bottom: point.y },
     };
     dragRef.current = drag;
     pointRef.current = point;
     claimedRef.current = true;
     setDraft({
       axis: layout.id,
+      index: target.index,
       band: parallelBandAt(drag, point.y, innerHeight),
     });
     return true;
@@ -161,8 +179,8 @@ export function useParallelGesture(
     const drag = dragRef.current;
     if (claimed && drag !== null) {
       const band = parallelBandAt(drag, point.y, innerHeight);
-      setDraft({ axis: drag.axis, band });
-      onRangePreview?.(drag.axis, rangeOf(drag.axis, band));
+      setDraft({ axis: drag.axis, index: drag.index, band });
+      onRangePreview?.(drag.axis, commit(drag, band));
       return;
     }
     setPointer({
@@ -172,22 +190,22 @@ export function useParallelGesture(
     report(findRow(point));
   }
 
-  function release(event: SurfaceEvent | null, commit: boolean): void {
+  function release(event: SurfaceEvent | null, keep: boolean): void {
     const drag = dragRef.current;
     dragRef.current = null;
     setDraft(null);
     if (drag === null) return;
     if (event !== null) pointRef.current = parallelPointOf(event);
-    if (!commit) {
-      onRangePreview?.(drag.axis, ranges[drag.axis] ?? null);
+    if (!keep) {
+      onRangePreview?.(drag.axis, parallelRangeList(ranges[drag.axis]));
       return;
     }
-    const range = rangeOf(
-      drag.axis,
+    const kept = commit(
+      drag,
       parallelBandAt(drag, pointRef.current.y, innerHeight),
     );
-    onRangePreview?.(drag.axis, range);
-    onRangeChange(drag.axis, range);
+    onRangePreview?.(drag.axis, kept);
+    onRangeChange(drag.axis, kept);
   }
 
   const { surface } = useCapturedPointer({
@@ -225,3 +243,18 @@ export function useParallelGesture(
     brushing: draft !== null,
   };
 }
+
+/**
+ * Whether a press took hold of an interval and let it go where it found it,
+ * which is a click on that interval rather than a move of it.
+ * @param drag - The drag, as it began.
+ * @param band - The band as the pointer left it.
+ * @returns Whether nothing moved.
+ */
+function unmoved(drag: ParallelBrushDrag, band: ParallelBand): boolean {
+  return (
+    drag.index !== -1 &&
+    band.top === drag.origin.top &&
+    band.bottom === drag.origin.bottom
+  );
+}