@perspective-dev/viewer-charts 4.5.1 → 5.0.0

package/src/ts/charts/series/series-interact.ts

@@ -18,10 +18,10 @@ import {
     type SeriesChartRecord,
 } from "./series-build";
 import {
-    renderBarFrame,
     uploadBarInstances,
     rebuildGlyphBuffers,
     rightAxisDataToPixel,
+    layoutForRecord,
 } from "./series-render";
 
 const POINT_HIT_RADIUS_PX = 10;
@@ -50,6 +50,12 @@ export function getHoveredBar(chart: SeriesChart): SeriesChartRecord | null {
  * Handle mouse-move across all glyph types. Tests (in reverse paint order
  * so top glyphs win): scatter points → line points → bars → areas.
  * Updates `_hoveredBarIdx` or `_hoveredSample` and re-renders on change.
+ *
+ * Faceted frames first resolve the cell under the cursor: that cell's
+ * layout supplies the pixel→data mapping and its index becomes the
+ * `splitFilter` — records of other splits share the same band-slot
+ * coordinates by construction, so an unfiltered hit-test would match
+ * a bar from a different facet.
  */
 export function handleBarHover(
     chart: SeriesChart,
@@ -60,7 +66,33 @@ export function handleBarHover(
         return;
     }
 
-    const layout = chart._lastLayout;
+    let layout = chart._lastLayout;
+    let splitFilter: number | undefined;
+    if (chart._facetGrid) {
+        const cells = chart._facetGrid.cells;
+        let found = -1;
+        for (let i = 0; i < cells.length; i++) {
+            const p = cells[i].layout.plotRect;
+            if (
+                mx >= p.x &&
+                mx <= p.x + p.width &&
+                my >= p.y &&
+                my <= p.y + p.height
+            ) {
+                found = i;
+                break;
+            }
+        }
+
+        if (found < 0) {
+            clearHover(chart);
+            return;
+        }
+
+        layout = cells[found].layout;
+        splitFilter = found;
+    }
+
     const plot = layout.plotRect;
 
     if (
@@ -131,6 +163,7 @@ export function handleBarHover(
         pxPerDataX,
         pxPerDataYLeft,
         pxPerDataYRight,
+        splitFilter,
     );
 
     // 2. Line points (still above bars; treat as point hits).
@@ -144,6 +177,7 @@ export function handleBarHover(
             pxPerDataX,
             pxPerDataYLeft,
             pxPerDataYRight,
+            splitFilter,
         );
     }
 
@@ -158,6 +192,7 @@ export function handleBarHover(
         const by1 = bars.y1;
         const ax = bars.axis;
         const hidden = chart._hiddenSeries;
+        const P = chart._splitPrefixes.length;
         for (let i = 0; i < bars.count; i++) {
             if (ct[i] !== BAR_TYPE_BAR) {
                 continue;
@@ -167,6 +202,10 @@ export function handleBarHover(
                 continue;
             }
 
+            if (splitFilter !== undefined && sid[i] % P !== splitFilter) {
+                continue;
+            }
+
             const xc = xC[i];
             const halfW = hw[i];
             if (dataX < xc - halfW || dataX > xc + halfW) {
@@ -187,7 +226,13 @@ export function handleBarHover(
 
     // 4. Areas (strip hit — stacked records via `_bars`, unstacked via samples).
     if (nextBarIdx < 0 && !nextSample) {
-        const areaHit = hitTestAreas(chart, dataX, dataYLeft, dataYRight);
+        const areaHit = hitTestAreas(
+            chart,
+            dataX,
+            dataYLeft,
+            dataYRight,
+            splitFilter,
+        );
         if (areaHit) {
             if (areaHit.idx >= 0) {
                 nextBarIdx = areaHit.idx;
@@ -209,6 +254,7 @@ function hitTestPoints(
     pxPerDataX: number,
     pxPerDataYLeft: number,
     pxPerDataYRight: number,
+    splitFilter?: number,
 ): SeriesChartRecord | null {
     const N = chart._numCategories;
     const S = chart._series.length;
@@ -233,6 +279,10 @@ function hitTestPoints(
             continue;
         }
 
+        if (splitFilter !== undefined && s.splitIdx !== splitFilter) {
+            continue;
+        }
+
         const dataY = s.axis === 1 ? dataYRight : dataYLeft;
         const pyPerData = s.axis === 1 ? pxPerDataYRight : pxPerDataYLeft;
 
@@ -289,6 +339,7 @@ function hitTestAreas(
     dataX: number,
     dataYLeft: number,
     dataYRight: number,
+    splitFilter?: number,
 ): { idx: number; bar: SeriesChartRecord | null } | null {
     // Closest category to the mouse; an area covers every [cat - 0.5, cat + 0.5]
     // slot, so use `round(dataX)` as the candidate index.
@@ -313,6 +364,7 @@ function hitTestAreas(
     const ax = bars.axis;
     const by0 = bars.y0;
     const by1 = bars.y1;
+    const P = chart._splitPrefixes.length;
     for (let i = 0; i < bars.count; i++) {
         if (ct[i] !== BAR_TYPE_AREA) {
             continue;
@@ -326,6 +378,10 @@ function hitTestAreas(
             continue;
         }
 
+        if (splitFilter !== undefined && sid[i] % P !== splitFilter) {
+            continue;
+        }
+
         const dy = ax[i] === 0 ? dataYLeft : dataYRight;
         const y0 = by0[i];
         const y1 = by1[i];
@@ -346,6 +402,10 @@ function hitTestAreas(
             continue;
         }
 
+        if (splitFilter !== undefined && s.splitIdx !== splitFilter) {
+            continue;
+        }
+
         const idx = cat * S + s.seriesId;
         if (!((valid[idx >> 3] >> (idx & 7)) & 1)) {
             continue;
@@ -383,7 +443,7 @@ function clearHover(chart: SeriesChart): void {
         chart._hoveredBarIdx = -1;
         chart._hoveredSample = null;
         if (chart._glManager) {
-            renderBarFrame(chart, chart._glManager);
+            chart.requestRender(chart._glManager);
         }
     }
 }
@@ -405,13 +465,17 @@ function applyHover(
     chart._hoveredBarIdx = nextBarIdx;
     chart._hoveredSample = nextSample;
     if (chart._glManager) {
-        renderBarFrame(chart, chart._glManager);
+        chart.requestRender(chart._glManager);
     }
 }
 
 /**
  * Handle a click on the legend area. Returns true when the click hit a
  * legend entry (the caller should then treat the event as consumed).
+ *
+ * An entry may own several series (facet-grid mode groups the legend
+ * by aggregate): the toggle is all-or-nothing — any visible member
+ * hides the whole group, a fully-hidden group shows every member.
  */
 export function handleBarLegendClick(
     chart: SeriesChart,
@@ -430,10 +494,15 @@ export function handleBarLegendClick(
             my >= r.y &&
             my <= r.y + r.height
         ) {
-            if (chart._hiddenSeries.has(entry.seriesId)) {
-                chart._hiddenSeries.delete(entry.seriesId);
-            } else {
-                chart._hiddenSeries.add(entry.seriesId);
+            const anyVisible = entry.seriesIds.some(
+                (sid) => !chart._hiddenSeries.has(sid),
+            );
+            for (const sid of entry.seriesIds) {
+                if (anyVisible) {
+                    chart._hiddenSeries.add(sid);
+                } else {
+                    chart._hiddenSeries.delete(sid);
+                }
             }
 
             // Hidden-series change affects which bars contribute to
@@ -454,7 +523,7 @@ export function handleBarLegendClick(
             if (chart._glManager) {
                 uploadBarInstances(chart, chart._glManager);
                 rebuildGlyphBuffers(chart, chart._glManager);
-                renderBarFrame(chart, chart._glManager);
+                chart.requestRender(chart._glManager);
             }
 
             return true;
@@ -571,7 +640,11 @@ function pinTooltip(chart: SeriesChart, b: SeriesChartRecord): void {
         return;
     }
 
-    const layout = chart._lastLayout;
+    // Faceted frames anchor in the record's own cell.
+    const layout = layoutForRecord(chart, b);
+    if (!layout) {
+        return;
+    }
 
     // Anchor at the bar midpoint for bar glyphs (tooltip reads against
     // the body); at the point itself (`y1`) for line / scatter / area.
@@ -582,7 +655,7 @@ function pinTooltip(chart: SeriesChart, b: SeriesChartRecord): void {
             ? chart._isHorizontal
                 ? layout.dataToPixel(anchorV, b.xCenter)
                 : layout.dataToPixel(b.xCenter, anchorV)
-            : rightAxisDataToPixel(chart, b.xCenter, anchorV);
+            : rightAxisDataToPixel(chart, b.xCenter, anchorV, layout);
 
     const lines = buildBarTooltipLines(chart, b);
     if (lines.length === 0) {
@@ -594,7 +667,7 @@ function pinTooltip(chart: SeriesChart, b: SeriesChartRecord): void {
     chart._hoveredBarIdx = -1;
     chart._hoveredSample = null;
     if (chart._glManager) {
-        renderBarFrame(chart, chart._glManager);
+        chart.requestRender(chart._glManager);
     }
 }