react-cheminfo 0.16.0 → 0.18.0

package/src/parallel/core/parallelBrush.ts

@@ -28,6 +28,8 @@ export type ParallelBrushGrip = 'create' | 'move' | 'top' | 'bottom';
 export interface ParallelBrushDrag {
   /** The axis being brushed, by its id. */
   axis: string;
+  /** Which of that axis's intervals is being written, or `-1` for a new one. */
+  index: number;
   /** What the press took hold of. */
   grip: ParallelBrushGrip;
   /** Where the press landed, in pixels from the top of the drawing area. */
@@ -45,6 +47,15 @@ export const PARALLEL_BRUSH_SMALLEST = 1;
 /** How far either side of an axis a press still reaches it, in pixels. */
 export const PARALLEL_BRUSH_HALF_WIDTH = 9;
 
+/**
+ * How close to an axis's own end a band edge counts as standing on it.
+ *
+ * Half a pixel is below anything a pointer can aim at, and the two ends are
+ * where the rows a reader most wants sit: the axes end exactly on the data,
+ * so the extreme row is drawn on the end itself.
+ */
+const END_REACH = 0.5;
+
 /**
  * What a press at that height takes hold of.
  * @param y - Where the press landed, in pixels from the top of the drawing area.
@@ -64,6 +75,52 @@ export function parallelBrushGrip(
   return 'create';
 }
 
+/** Which of an axis's bands a press took hold of, and by what. */
+export interface ParallelBrushTarget {
+  /** The band, as an index into the list, or `-1` when none was under it. */
+  index: number;
+  /** What the press took hold of. */
+  grip: ParallelBrushGrip;
+}
+
+/** Nothing under the press, so it starts a band of its own. */
+const NEW_BAND: ParallelBrushTarget = { index: -1, grip: 'create' };
+
+/**
+ * Which band a press at that height took hold of, on an axis carrying several.
+ * @param y - Where the press landed, in pixels from the top of the drawing area.
+ * @param bands - The bands on that axis, in any order.
+ * @returns The band and the grip. An edge wins over the band it belongs to and
+ * over any band it lies inside, so two bands dragged flush against each other
+ * can still be pulled apart; a press on bare axis starts a new band.
+ */
+export function parallelBrushTarget(
+  y: number,
+  bands: readonly ParallelBand[],
+): ParallelBrushTarget {
+  let nearest = NEW_BAND;
+  let nearestDistance = PARALLEL_BRUSH_HANDLE_REACH;
+  for (let index = 0; index < bands.length; index++) {
+    const band = bands[index] as ParallelBand;
+    const toTop = Math.abs(y - band.top);
+    if (toTop <= nearestDistance) {
+      nearestDistance = toTop;
+      nearest = { index, grip: 'top' };
+    }
+    const toBottom = Math.abs(y - band.bottom);
+    if (toBottom <= nearestDistance) {
+      nearestDistance = toBottom;
+      nearest = { index, grip: 'bottom' };
+    }
+  }
+  if (nearest !== NEW_BAND) return nearest;
+  for (let index = 0; index < bands.length; index++) {
+    const band = bands[index] as ParallelBand;
+    if (y > band.top && y < band.bottom) return { index, grip: 'move' };
+  }
+  return NEW_BAND;
+}
+
 /**
  * The band a drag stands at, now that the pointer is there.
  * @param drag - The drag, as it began.
@@ -123,14 +180,23 @@ export function parallelBandOf(
  * @param band - The band, in pixels from the top of the drawing area.
  * @param axis - The axis it belongs to.
  * @returns The interval, low value first — which is the order every filter in
- * the family reads, and getting it backwards keeps nothing at all.
+ * the family reads, and getting it backwards keeps nothing at all. An edge
+ * standing on an end of the axis reports that end verbatim: inverting the
+ * placement is not exact, and one ulp is enough to drop the row the axis ends
+ * on from its own full-range brush.
  */
 export function parallelRangeOf(
   band: ParallelBand,
   axis: ParallelAxisLayout,
 ): ParallelRange {
-  const low = parallelYToValue(band.bottom, axis);
-  const high = parallelYToValue(band.top, axis);
+  const low =
+    band.bottom >= parallelValueToY(axis.min, axis) - END_REACH
+      ? axis.min
+      : parallelYToValue(band.bottom, axis);
+  const high =
+    band.top <= parallelValueToY(axis.max, axis) + END_REACH
+      ? axis.max
+      : parallelYToValue(band.top, axis);
   return low <= high ? [low, high] : [high, low];
 }
 

package/src/parallel/core/parallelFilter.ts

@@ -5,22 +5,28 @@
  * figure has to filter on the same answer. Two definitions of "kept" is the
  * fault this file exists to prevent: a table showing fourteen rows under a
  * plot drawing one is not a rounding error, it is two different programs.
+ *
+ * An axis carrying several intervals keeps a row that falls in any of them,
+ * while a row has to be kept by every brushed axis — union down an axis,
+ * intersection across them, which is the only reading under which brushing a
+ * second axis can never widen what the first one left.
  */
 
+import { parallelRangeList } from './parallelSelection.ts';
 import type {
   ParallelAxis,
   ParallelRange,
   ParallelRanges,
 } from './parallelTypes.ts';
 
-/** One axis's interval, ready to be tested row by row. */
+/** One axis's intervals, ready to be tested row by row. */
 interface ActiveRange {
   /** The column being tested. */
   values: ArrayLike<number>;
-  /** The lowest value kept. */
-  minimum: number;
-  /** The highest value kept. */
-  maximum: number;
+  /** The lowest value each interval keeps. */
+  minimum: Float64Array;
+  /** The highest value each interval keeps. */
+  maximum: Float64Array;
 }
 
 /**
@@ -38,10 +44,28 @@ export function parallelRangeKeeps(
   return value >= range[0] && value <= range[1];
 }
 
+/**
+ * Whether one value falls inside any of an axis's intervals.
+ * @param ranges - The intervals that axis keeps.
+ * @param value - The value to test.
+ * @returns Whether any of them keeps it. An axis keeping nothing keeps every
+ * value, which is what an unbrushed axis means.
+ */
+export function parallelSelectionKeeps(
+  ranges: readonly ParallelRange[],
+  value: number,
+): boolean {
+  if (ranges.length === 0) return true;
+  for (const range of ranges) {
+    if (value >= range[0] && value <= range[1]) return true;
+  }
+  return false;
+}
+
 /**
  * Which rows every brush keeps at once.
  * @param axes - The axes, whose ids the intervals are keyed by.
- * @param ranges - The interval each axis keeps, or `null` for none.
+ * @param ranges - What each axis keeps: one interval, several, or none.
  * @param count - How many rows there are.
  * @returns One byte per row, `1` for kept. An interval keyed on an axis that
  * is not drawn is ignored rather than emptying the figure, so a range left
@@ -56,23 +80,36 @@ export function parallelIncludedMask(
   const included = new Uint8Array(count).fill(1);
   const active: ActiveRange[] = [];
   for (const axis of axes) {
-    const range = ranges[axis.id];
-    if (range === null || range === undefined) continue;
-    active.push({
-      values: axis.values,
-      minimum: Math.min(range[0], range[1]),
-      maximum: Math.max(range[0], range[1]),
-    });
+    const list = parallelRangeList(ranges[axis.id]);
+    if (list.length === 0) continue;
+    const minimum = new Float64Array(list.length);
+    const maximum = new Float64Array(list.length);
+    for (let index = 0; index < list.length; index++) {
+      const range = list[index] as ParallelRange;
+      minimum[index] = Math.min(range[0], range[1]);
+      maximum[index] = Math.max(range[0], range[1]);
+    }
+    active.push({ values: axis.values, minimum, maximum });
   }
   if (active.length === 0) return included;
 
   for (const range of active) {
     const rows = Math.min(count, range.values.length);
+    const intervals = range.minimum.length;
     for (let row = 0; row < rows; row++) {
       if (included[row] === 0) continue;
       const value = range.values[row] as number;
-      if (value >= range.minimum && value <= range.maximum) continue;
-      included[row] = 0;
+      let kept = false;
+      for (let index = 0; index < intervals; index++) {
+        if (
+          value >= (range.minimum[index] as number) &&
+          value <= (range.maximum[index] as number)
+        ) {
+          kept = true;
+          break;
+        }
+      }
+      if (!kept) included[row] = 0;
     }
     // A row the figure has no value for on a brushed axis is not in range.
     for (let row = rows; row < count; row++) included[row] = 0;

package/src/parallel/core/parallelOrder.ts

@@ -0,0 +1,73 @@
+/**
+ * Which order the axes stand in, when the reader is the one deciding.
+ *
+ * A parallel-coordinates figure only shows a relationship between two columns
+ * that stand next to each other, so the order is not decoration: moving an
+ * axis is how a reader asks a different question of the same data. The
+ * arithmetic of the move is here, away from the pointer that starts it, so
+ * that dragging a name and pressing an arrow key are the same operation.
+ */
+
+import type { ParallelAxisLayout } from './parallelAxes.ts';
+
+/**
+ * The same ids with one of them moved.
+ * @param ids - The axes, from left to right.
+ * @param from - Which one is moving.
+ * @param to - The place it lands in, counted in the list it left.
+ * @returns The new order. The list comes back unchanged when either place is
+ * outside it or when nothing moves, so a caller can report without comparing.
+ */
+export function parallelMoveAxis(
+  ids: readonly string[],
+  from: number,
+  to: number,
+): string[] {
+  const order = [...ids];
+  if (from < 0 || from >= order.length) return order;
+  if (to < 0 || to >= order.length || to === from) return order;
+  const [moved] = order.splice(from, 1);
+  if (moved === undefined) return [...ids];
+  order.splice(to, 0, moved);
+  return order;
+}
+
+/**
+ * Where an axis dragged to that position would land.
+ * @param x - Where the pointer is, in pixels from the left of the drawing area.
+ * @param layouts - The axes, from left to right.
+ * @returns The index of the axis whose place it would take, or `-1` when there
+ * is nowhere to land. Nearest axis rather than nearest gap: a reader dragging
+ * a name over its neighbour means the two to swap, and the neighbour's own
+ * name is the thing they are aiming at.
+ */
+export function parallelDropIndex(
+  x: number,
+  layouts: readonly ParallelAxisLayout[],
+): number {
+  let nearest = -1;
+  let nearestDistance = Number.POSITIVE_INFINITY;
+  for (let index = 0; index < layouts.length; index++) {
+    const layout = layouts[index];
+    if (layout === undefined) continue;
+    const distance = Math.abs(x - layout.x);
+    if (distance < nearestDistance) {
+      nearestDistance = distance;
+      nearest = index;
+    }
+  }
+  return nearest;
+}
+
+/**
+ * The ids of the axes, from left to right.
+ * @param layouts - The axes, already placed.
+ * @returns Their ids, which is what an order is reported as.
+ */
+export function parallelAxisOrder(
+  layouts: readonly ParallelAxisLayout[],
+): string[] {
+  const ids: string[] = [];
+  for (const layout of layouts) ids.push(layout.id);
+  return ids;
+}

package/src/parallel/core/parallelPaint.ts

@@ -149,8 +149,10 @@ export function paintParallelLines(
     if (steps !== null) {
       const step = steps[row] as number;
       if (step !== previousStep) {
-        const color = palette[step];
-        if (color !== undefined) context.strokeStyle = color;
+        // A step past the end of the ramp is a quantity nobody knows for this
+        // row; it is drawn in the neutral ink rather than in the ramp's first
+        // colour, which means the smallest value in the set.
+        context.strokeStyle = palette[step] ?? line;
         previousStep = step;
       }
     }
@@ -201,6 +203,10 @@ export function paintParallelHighlights(
 
 /**
  * Add one row's line to the path being built.
+ *
+ * The line is one polyline per unbroken run of known values, so a row with a
+ * gap in the middle is drawn as two, and nothing is painted over an axis the
+ * row has no value on.
  * @param context - A context already scaled and moved to the drawing area.
  * @param row - The row to trace.
  * @param layouts - The axes, from left to right.
@@ -218,9 +224,14 @@ export function traceParallelRow(
     const column = values[index];
     if (layout === undefined || column === undefined) continue;
     const y = parallelPixelAt(layout.pixels, column[row] as number);
-    // A row whose value on this axis is not known yet has no point to draw:
-    // the line skips that axis rather than collapsing onto one of its ends.
-    if (!Number.isFinite(y)) continue;
+    // A row whose value on this axis is not known yet has no point to draw,
+    // and the line breaks rather than bridging the axis: a segment drawn
+    // across it reads as a value the row does not hold, and the hit test,
+    // which has no endpoint there, cannot pick it back.
+    if (!Number.isFinite(y)) {
+      started = false;
+      continue;
+    }
     if (started) {
       context.lineTo(layout.x, y);
     } else {

package/src/parallel/core/parallelPalette.ts

@@ -20,6 +20,15 @@ import type { ParallelColorBy } from './parallelTypes.ts';
 /** How many steps the ramp is quantised into; there is one more colour than steps. */
 export const PARALLEL_PALETTE_STEPS = 120;
 
+/**
+ * The step a row whose colouring quantity is unknown takes.
+ *
+ * Past the end of the ramp on purpose: no colour indexes it, so the painter
+ * leaves such a row in the neutral ink rather than claiming for it the ink of
+ * the smallest value in the set.
+ */
+export const PARALLEL_PALETTE_UNKNOWN = PARALLEL_PALETTE_STEPS + 1;
+
 /**
  * The ramp, sampled into the steps a line's colour is looked up by.
  * @param scale - The ramp, as the registry hands it over or as a plain list of colours. Defaults to viridis.
@@ -39,13 +48,16 @@ export function parallelPalette(
  * loop reads an integer instead of placing a value on a ramp.
  * @param color - The quantity the lines are coloured by.
  * @param count - How many rows there are.
- * @returns One step per row, from `0` to {@link PARALLEL_PALETTE_STEPS}.
+ * @returns One step per row, from `0` to {@link PARALLEL_PALETTE_STEPS}, or
+ * {@link PARALLEL_PALETTE_UNKNOWN} for a row whose value is not a number.
  */
 export function parallelColorSteps(
   color: ParallelColorBy,
   count: number,
 ): Uint8Array {
   const steps = new Uint8Array(count);
+  // A row the column does not reach is as unknown as one holding no number.
+  steps.fill(PARALLEL_PALETTE_UNKNOWN);
   const extent = parallelExtent(color.values, count);
   const min = color.min ?? extent.min;
   const max = color.max ?? extent.max;
@@ -54,6 +66,7 @@ export function parallelColorSteps(
   const rows = Math.min(count, color.values.length);
   for (let row = 0; row < rows; row++) {
     const value = color.values[row] as number;
+    if (!Number.isFinite(value)) continue;
     steps[row] = logarithmic
       ? Math.round(
           positionInRange(value, min, max, { logarithmic: true }) *

package/src/parallel/core/parallelSelection.ts

@@ -0,0 +1,99 @@
+/**
+ * What an axis keeps, when it keeps more than one interval.
+ *
+ * The figure reports a list and accepts either a list or a bare interval, so a
+ * caller that only ever keeps one is not made to write `[[0, 1]]`. Everything
+ * downstream — the filter, the bands, the gesture — reads the list, which is
+ * what {@link parallelRangeList} is for: one normalisation, at the edge, and
+ * no `Array.isArray` scattered through the painter.
+ *
+ * Intervals on one axis are held sorted and disjoint. Two that touch are one
+ * interval drawn twice, and a reader dragging a band across its neighbour means
+ * to widen it rather than to stack two bands nobody can then take hold of.
+ */
+
+import type { ParallelRange, ParallelSelection } from './parallelTypes.ts';
+
+/** Nothing kept, shared so a normalisation never allocates for the common case. */
+const NONE: readonly ParallelRange[] = [];
+
+/**
+ * The intervals one axis keeps, however the caller wrote them.
+ * @param selection - One interval, several, or nothing at all.
+ * @returns The intervals, in the order given. Read in place — the caller's own
+ * array comes back when it gave one.
+ */
+export function parallelRangeList(
+  selection: ParallelSelection | undefined,
+): readonly ParallelRange[] {
+  if (selection === null || selection === undefined) return NONE;
+  if (selection.length === 0) return NONE;
+  // A bare interval is two numbers; a list of them holds arrays.
+  return typeof selection[0] === 'number'
+    ? [selection as ParallelRange]
+    : (selection as readonly ParallelRange[]);
+}
+
+/**
+ * Whether an axis keeps anything at all.
+ * @param selection - What that axis keeps.
+ * @returns Whether any interval is in force.
+ */
+export function parallelHasRange(
+  selection: ParallelSelection | undefined,
+): boolean {
+  return parallelRangeList(selection).length > 0;
+}
+
+/**
+ * The same intervals, sorted low to high and with the overlapping ones joined.
+ * @param ranges - The intervals, in any order, each low value first.
+ * @returns One list, sorted and disjoint. Intervals that touch at a point are
+ * joined too: a reader who dragged one band onto another meant one band.
+ */
+export function parallelMergeRanges(
+  ranges: readonly ParallelRange[],
+): ParallelRange[] {
+  if (ranges.length === 0) return [];
+  const sorted = ranges
+    .map((range) =>
+      range[0] <= range[1] ? range : ([range[1], range[0]] as ParallelRange),
+    )
+    .toSorted((left, right) => left[0] - right[0]);
+  const merged: ParallelRange[] = [];
+  let low = (sorted[0] as ParallelRange)[0];
+  let high = (sorted[0] as ParallelRange)[1];
+  for (let index = 1; index < sorted.length; index++) {
+    const range = sorted[index] as ParallelRange;
+    if (range[0] > high) {
+      merged.push([low, high]);
+      low = range[0];
+      high = range[1];
+      continue;
+    }
+    if (range[1] > high) high = range[1];
+  }
+  merged.push([low, high]);
+  return merged;
+}
+
+/**
+ * The intervals an axis keeps once one of them is replaced, removed or added.
+ * @param ranges - The intervals in force.
+ * @param index - Which one is being written, or `-1` to add one.
+ * @param range - The interval it becomes, or `null` to take it away.
+ * @returns The new list, sorted and disjoint. Never the same array.
+ */
+export function parallelWriteRange(
+  ranges: readonly ParallelRange[],
+  index: number,
+  range: ParallelRange | null,
+): ParallelRange[] {
+  const kept: ParallelRange[] = [];
+  for (let at = 0; at < ranges.length; at++) {
+    if (at === index) continue;
+    kept.push(ranges[at] as ParallelRange);
+  }
+  if (range !== null) kept.push(range);
+  return parallelMergeRanges(kept);
+}

package/src/parallel/core/parallelTicks.ts

@@ -10,6 +10,7 @@
 import {
   chartAxisScale,
   chartTickDecimals,
+  chartTickLabel,
 } from '../../chart/core/chartAxisScale.ts';
 import { formatDecimal } from '../../format/core/numbers.ts';
 import { roundTo } from '../../format/core/roundTo.ts';
@@ -71,12 +72,15 @@ function nicedGraduation(
   wanted: number,
 ): ParallelGraduation {
   const scale = chartAxisScale(min, max, { count: wanted, nice: true });
+  // Not `scale.labels`: those have a common power of ten lifted out of them,
+  // on the understanding that the caller writes it beside the axis name, and
+  // this figure writes only the name. Each graduation carries its own value.
+  const decimals = chartTickDecimals(scale.step);
   const ticks: ParallelTick[] = [];
-  for (let index = 0; index < scale.values.length; index++) {
-    const value = scale.values[index] as number;
+  for (const value of scale.values) {
     const label =
       axis.format === undefined
-        ? (scale.labels[index] ?? formatDecimal(value, scale.decimals))
+        ? chartTickLabel(value, decimals)
         : axis.format(value);
     if (ticks.at(-1)?.label === label) continue;
     ticks.push({ value, label });

package/src/parallel/core/parallelTypes.ts

@@ -86,8 +86,20 @@ export interface ParallelAxis {
 /** An interval kept on one axis, in that axis's own units, low first. */
 export type ParallelRange = readonly [number, number];
 
+/**
+ * What one axis keeps: nothing, one interval, or several disjoint ones.
+ *
+ * A reader comparing molecules wants the light ones *and* the heavy ones, with
+ * nothing in between, which one interval cannot say. Several are read as a
+ * union — a row is kept when it falls in any of them — while the axes are
+ * still read as an intersection, so each axis narrows what the ones before it
+ * left. A bare interval means the same as a list holding only it, so a caller
+ * that only ever keeps one writes one.
+ */
+export type ParallelSelection = ParallelRange | readonly ParallelRange[] | null;
+
 /** Which rows a set of brushes keeps, keyed by axis id. */
-export type ParallelRanges = Readonly<Record<string, ParallelRange | null>>;
+export type ParallelRanges = Readonly<Record<string, ParallelSelection>>;
 
 /** How the lines are coloured. */
 export interface ParallelColorBy {

package/src/parallel/ui/ParallelAxesLayer.tsx

@@ -20,8 +20,8 @@ export interface ParallelAxesLayerProps {
   layouts: readonly ParallelAxisLayout[];
   /** Height of the drawing area, in pixels. */
   innerHeight: number;
-  /** The band each axis carries right now, the one being dragged included. */
-  bands: ReadonlyMap<string, ParallelBand>;
+  /** The bands each axis carries right now, the one being dragged included. */
+  bands: ReadonlyMap<string, ParallelBand[]>;
   /** The ink the axes, their ticks and their labels are drawn in. */
   axisInk: string;
   /** The ink a band is filled and outlined in. */
@@ -49,7 +49,7 @@ export function ParallelAxesLayer(props: ParallelAxesLayerProps): ReactElement {
       textAnchor="middle"
     >
       {layouts.map((layout) => {
-        const band = bands.get(layout.id) ?? null;
+        const drawn = bands.get(layout.id);
         return (
           <g
             key={layout.id}
@@ -83,7 +83,13 @@ export function ParallelAxesLayer(props: ParallelAxesLayerProps): ReactElement {
               fill="transparent"
               pointerEvents="none"
             />
-            {band === null ? null : <BrushBand band={band} ink={bandInk} />}
+            {drawn?.map((band) => (
+              <BrushBand
+                key={`${band.top}:${band.bottom}`}
+                band={band}
+                ink={bandInk}
+              />
+            ))}
           </g>
         );
       })}

package/src/parallel/ui/ParallelCoordinates.tsx

@@ -30,8 +30,10 @@ import {
 import {
   PARALLEL_SVG_STYLE,
   parallelCanvasStyle,
+  parallelDropMarkStyle,
   parallelFigureStyle,
 } from './parallelStyles.ts';
+import { useParallelAxisDrag } from './useParallelAxisDrag.ts';
 import { useParallelCanvas } from './useParallelCanvas.ts';
 import { useParallelGesture } from './useParallelGesture.ts';
 
@@ -70,6 +72,7 @@ export function ParallelCoordinates(
   const { ranges: ownedRanges, defaultRanges, included: givenMask } = props;
   const { color: givenColor, colorAxis, onRangeChange: report } = props;
   const { onRangePreview, hovered, onHoverChange, onRowClick } = props;
+  const { several = false, onAxisOrder } = props;
   const count = parallelRowCount(axes, props.count);
   const innerWidth = Math.max(
     width - PARALLEL_MARGIN.left - PARALLEL_MARGIN.right,
@@ -109,11 +112,11 @@ export function ParallelCoordinates(
     return parallelIncludedMask(axes, ranges, count);
   }, [givenMask, axes, ranges, count]);
 
-  function commitRange(axisId: string, range: ParallelRange | null): void {
+  function commitRange(axisId: string, kept: readonly ParallelRange[]): void {
     if (ownedRanges === undefined) {
-      setOwnRanges((previous) => ({ ...previous, [axisId]: range }));
+      setOwnRanges((previous) => ({ ...previous, [axisId]: kept }));
     }
-    report?.(axisId, range);
+    report?.(axisId, kept);
   }
 
   const gesture = useParallelGesture({
@@ -123,6 +126,7 @@ export function ParallelCoordinates(
     innerHeight,
     included,
     ranges,
+    several,
     onRangeChange: commitRange,
     onRangePreview,
     hovered,
@@ -148,6 +152,10 @@ export function ParallelCoordinates(
     ink,
   });
 
+  const axisDrag = useParallelAxisDrag({ layouts, onAxisOrder });
+  const dropAt =
+    axisDrag.active === null ? undefined : layouts[axisDrag.active.to];
+
   const label = given ?? parallelFigureLabel(axes, count);
   const canvasStyle = parallelCanvasStyle(height);
   const hover =
@@ -199,11 +207,22 @@ export function ParallelCoordinates(
               onClick={gesture.onClick}
               {...gesture.surface}
             />
+            {dropAt === undefined ? null : (
+              <line
+                data-parallel-drop={dropAt.id}
+                x1={PARALLEL_MARGIN.left + dropAt.x}
+                x2={PARALLEL_MARGIN.left + dropAt.x}
+                y1={PARALLEL_MARGIN.top}
+                y2={PARALLEL_MARGIN.top + innerHeight}
+                style={parallelDropMarkStyle(ink.selection)}
+              />
+            )}
           </svg>
           <ParallelLabels
             axes={axes}
             layouts={layouts}
             render={renderAxisLabel}
+            drag={axisDrag}
           />
           {hover === null || renderTooltip === undefined ? null : (
             <ParallelTooltip