WIP

Signed-off-by: Andrew Stein <steinlink@gmail.com>

Author: texodus

packages/viewer-charts/src/css/perspective-viewer-charts.css

@@ -140,3 +140,18 @@
 .zoom-reset:hover {
     opacity: 1;
 }
+
+.webgl-tooltip {
+    position: absolute;
+    pointer-events: auto;
+    font: 11px var(--psp-webgl--font-family);
+    background: var(--psp-webgl--tooltip--background);
+    color: var(--psp-webgl--tooltip--color);
+    border: 1px solid var(--psp-webgl--tooltip--border-color);
+    border-radius: 3px;
+    padding: 3px;
+    overflow-y: auto;
+    white-space: pre;
+    z-index: 10;
+    line-height: 16px;
+}

packages/viewer-charts/src/ts/charts/bar/bar-interact.ts

@@ -12,7 +12,6 @@
 
 import type { BarChart } from "./bar";
 import type { BarRecord } from "./bar-build";
-import { resolveTheme } from "../../theme/theme";
 import { formatTickValue } from "../../layout/ticks";
 import {
     renderBarFrame,
@@ -357,6 +356,7 @@ export function buildBarTooltipLines(chart: BarChart, b: BarRecord): string[] {
         lines.push(`Base: ${formatTickValue(b.y0)}`);
         lines.push(`Top: ${formatTickValue(b.y1)}`);
     }
+
     return lines;
 }
 
@@ -368,7 +368,7 @@ export function formatBarCategoryPath(chart: BarChart, catIdx: number): string {
     if (chart._rowPaths.length === 0) return "";
     const parts: string[] = [];
     for (const rp of chart._rowPaths) {
-        const s = rp.dictionary[rp.indices[catIdx]];
+        const s = rp.labels[catIdx];
         if (s != null && s !== "") parts.push(s);
     }
     return parts.join(" / ");
@@ -409,13 +409,9 @@ function pinTooltip(chart: BarChart, b: BarRecord): void {
     const lines = buildBarTooltipLines(chart, b);
     if (lines.length === 0) return;
 
-    const themeEl = chart._gridlineCanvas || chart._chromeCanvas;
-    if (!themeEl) return;
-    const theme = resolveTheme(themeEl);
-
     const parent = chart._glCanvas?.parentElement;
     if (!parent) return;
-    chart._tooltip.showPinned(parent, lines, pos, layout, theme);
+    chart._tooltip.showPinned(parent, lines, pos, layout);
 
     chart._hoveredBarIdx = -1;
     chart._hoveredSample = null;

packages/viewer-charts/src/ts/charts/candlestick/candlestick-interact.ts

@@ -12,7 +12,6 @@
 
 import type { CandlestickChart } from "./candlestick";
 import type { CandleRecord } from "./candlestick-build";
-import { resolveTheme } from "../../theme/theme";
 import { formatTickValue } from "../../layout/ticks";
 import {
     renderCandlestickChromeOverlay,
@@ -86,10 +85,6 @@ export function showCandlestickPinnedTooltip(
     const candle = chart._candles[idx];
     if (!candle || !chart._lastLayout) return;
 
-    const themeEl = chart._gridlineCanvas || chart._chromeCanvas;
-    if (!themeEl) return;
-    const theme = resolveTheme(themeEl);
-
     const lines = buildCandlestickTooltipLines(chart, candle);
     if (lines.length === 0) return;
 
@@ -104,13 +99,7 @@ export function showCandlestickPinnedTooltip(
     const cssWidth = (chart._glCanvas?.width || 100) / dpr;
     const cssHeight = (chart._glCanvas?.height || 100) / dpr;
 
-    chart._tooltip.showPinned(
-        parent,
-        lines,
-        pos,
-        { cssWidth, cssHeight },
-        theme,
-    );
+    chart._tooltip.showPinned(parent, lines, pos, { cssWidth, cssHeight });
 
     chart._hoveredIdx = -1;
     if (chart._glManager) renderCandlestickFrame(chart, chart._glManager);
@@ -131,7 +120,7 @@ export function buildCandlestickTooltipLines(
     if (chart._rowPaths.length > 0) {
         const parts: string[] = [];
         for (const rp of chart._rowPaths) {
-            const s = rp.dictionary[rp.indices[candle.catIdx]] ?? "";
+            const s = rp.labels[candle.catIdx] ?? "";
             if (s) parts.push(s);
         }
         if (parts.length > 0) lines.push(parts.join(" › "));

packages/viewer-charts/src/ts/charts/common/category-axis.ts

@@ -12,13 +12,14 @@
 
 import type { ColumnDataMap } from "../../data/view-reader";
 import type { CategoricalLevel } from "../../chrome/categorical-axis";
+import { buildGroupRuns } from "../../chrome/categorical-axis-core";
 
 export interface CategoryAxisResult {
     /**
-     * Zero-copy views over the `__ROW_PATH_N__` dictionaries, sliced to
-     * skip leading empty rows (the "Total" aggregate header that the
-     * view produces when `group_by` is non-empty). Empty when `groupBy`
-     * is empty.
+     * Fully materialized hierarchical levels — labels and group runs are
+     * pre-resolved from the view's `__ROW_PATH_N__` dictionaries so the
+     * chart can retain them past the `with_typed_arrays` callback scope.
+     * Empty when `groupBy` is empty.
      */
     rowPaths: CategoricalLevel[];
     /** Rows that actually contribute a category (post-offset). */
@@ -30,8 +31,9 @@ export interface CategoryAxisResult {
 /**
  * Resolve the category axis for a categorical-X chart (bar, candlestick,
  * ohlc, …). Walks the `__ROW_PATH_N__` hierarchy columns, skips the
- * rollup rows at the top ("Total" parent aggregates), and returns zero-
- * copy dictionary views plus the trimmed category count.
+ * rollup rows at the top ("Total" parent aggregates), and returns fully
+ * JS-owned level structures (precomputed labels + runs) plus the
+ * trimmed category count.
  *
  * When `groupByLen === 0`, there are no row-path columns and the
  * category axis falls back to the raw row index — callers infer that
@@ -42,7 +44,8 @@ export function resolveCategoryAxis(
     numRows: number,
     groupByLen: number,
 ): CategoryAxisResult {
-    const rawRowPaths: CategoricalLevel[] = [];
+    type RawLevel = { indices: Int32Array; dictionary: string[] };
+    const rawRowPaths: RawLevel[] = [];
     for (let n = 0; ; n++) {
         const rp = columns.get(`__ROW_PATH_${n}__`);
         if (!rp || rp.type !== "string" || !rp.indices || !rp.dictionary) break;
@@ -66,15 +69,34 @@ export function resolveCategoryAxis(
     }
     const numCategories = Math.max(0, numRows - rowOffset);
 
+    const L = rawRowPaths.length;
     const rowPaths: CategoricalLevel[] =
-        groupByLen > 0 && rawRowPaths.length > 0
-            ? rawRowPaths.map((rp) => ({
-                  indices:
-                      rowOffset === 0
-                          ? rp.indices
-                          : rp.indices.subarray(rowOffset),
-                  dictionary: rp.dictionary,
-              }))
+        groupByLen > 0 && L > 0
+            ? rawRowPaths.map((rp, levelIdx) => {
+                  const labels = new Array<string>(numCategories);
+                  let maxLabelChars = 0;
+                  for (let r = 0; r < numCategories; r++) {
+                      const s = rp.dictionary[rp.indices[r + rowOffset]] ?? "";
+                      labels[r] = s;
+                      if (s.length > maxLabelChars) maxLabelChars = s.length;
+                  }
+                  // Only outer levels need the run-length encoding for
+                  // bracket rendering; leaves render per-row.
+                  const runs =
+                      levelIdx === L - 1
+                          ? []
+                          : buildGroupRuns(
+                                rp.indices,
+                                rp.dictionary,
+                                rowOffset,
+                                rowOffset + numCategories,
+                            ).map((run) => ({
+                                startIdx: run.startIdx - rowOffset,
+                                endIdx: run.endIdx - rowOffset,
+                                label: run.label,
+                            }));
+                  return { labels, runs, maxLabelChars };
+              })
             : [];
 
     return { rowPaths, numCategories, rowOffset };

packages/viewer-charts/src/ts/charts/common/node-store.ts

@@ -89,10 +89,29 @@ export class NodeStore {
     }
 
     reset(): void {
+        // Zero the layout typed arrays for slots that were occupied
+        // before. `squarify` / `partitionSunburst` overwrite visited
+        // nodes before any read, but early-bail branches (node area
+        // below `MIN_VISIBLE_AREA`) skip the recursion and leave
+        // descendants untouched. Re-using those slots in the next
+        // render with stale `x0/y0/x1/y1/a0/a1/r0/r1` leaks the
+        // previous render's rectangles / arcs through `collectVisible`
+        // into the new scene — the "leftover hoverable cells" bug.
+        //
+        // Fill only up to the prior `count` (the tree's logical size)
+        // — capacity can be much larger after growth and filling it
+        // whole is O(capacity) unnecessary work.
+        if (this.count > 0) {
+            this.x0.fill(0, 0, this.count);
+            this.y0.fill(0, 0, this.count);
+            this.x1.fill(0, 0, this.count);
+            this.y1.fill(0, 0, this.count);
+            this.a0.fill(0, 0, this.count);
+            this.a1.fill(0, 0, this.count);
+            this.r0.fill(0, 0, this.count);
+            this.r1.fill(0, 0, this.count);
+        }
         this.count = 0;
-        // Typed-array content doesn't need clearing — valid slots are
-        // always written before read. `name` / `colorLabel` get stale
-        // entries but `allocate()` clears them per-slot as reused.
     }
 
     /**

packages/viewer-charts/src/ts/charts/common/tree-data.ts

@@ -122,8 +122,7 @@ function insertRow(
                 // render can dim negative leaves (matches the area
                 // chart's `theme.areaOpacity`).
                 chart._nodeStore.size[childId] = Math.abs(sizeValue);
-                chart._nodeStore.sizeSign[childId] =
-                    sizeValue < 0 ? -1 : 1;
+                chart._nodeStore.sizeSign[childId] = sizeValue < 0 ? -1 : 1;
                 chart._nodeStore.leafRowIdx[childId] = rowIdx;
             }
             if (!isNaN(colorValue)) {

packages/viewer-charts/src/ts/charts/continuous/continuous-interact.ts

@@ -11,7 +11,6 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type { ContinuousChart } from "./continuous-chart";
-import { resolveTheme } from "../../theme/theme";
 import { renderContinuousChromeOverlay } from "./continuous-render";
 
 const TOOLTIP_RADIUS_PX = 24;
@@ -145,7 +144,10 @@ function resolveHoverTarget(
     chart: ContinuousChart,
     mx: number,
     my: number,
-): { layout: import("../../layout/plot-layout").PlotLayout | null; facetIdx: number } {
+): {
+    layout: import("../../layout/plot-layout").PlotLayout | null;
+    facetIdx: number;
+} {
     if (chart._facetGrid) {
         const cells = chart._facetGrid.cells;
         for (let i = 0; i < cells.length; i++) {
@@ -265,9 +267,6 @@ export function showContinuousPinnedTooltip(
         chart._xData[pointIdx],
         chart._yData[pointIdx],
     );
-    const themeEl = chart._gridlineCanvas || chart._chromeCanvas;
-    if (!themeEl) return;
-    const theme = resolveTheme(themeEl);
 
     const parent = chart._glCanvas?.parentElement;
     if (!parent) return;
@@ -279,7 +278,7 @@ export function showContinuousPinnedTooltip(
         if (serial !== chart._pinnedTooltipSerial) return;
         if (chart._pinnedIndex !== pointIdx) return;
         if (lines.length === 0) return;
-        chart._tooltip.showPinned(parent, lines, pos, layout, theme);
+        chart._tooltip.showPinned(parent, lines, pos, layout);
     });
 
     chart._hoveredIndex = -1;

packages/viewer-charts/src/ts/charts/continuous/continuous-render.ts

@@ -618,10 +618,7 @@ function renderFacetedChromeOverlay(chart: ContinuousChart): void {
     // which `buildFacetGrid` populates when `hasLegend` was set.
     if (chart._lastHasColorCol && grid.legendRect) {
         const stops = chart._lastGradientStops ?? theme.gradientStops;
-        if (
-            chart._colorIsString &&
-            chart._uniqueColorLabels.size > 0
-        ) {
+        if (chart._colorIsString && chart._uniqueColorLabels.size > 0) {
             const seriesPalette =
                 chart._lastSeriesPalette ?? readSeriesPalette(canvas);
             const palette = resolvePalette(

packages/viewer-charts/src/ts/charts/continuous/glyphs/points.ts

@@ -147,8 +147,9 @@ export class PointGlyph implements Glyph {
         // the tooltip shows only relevant facet values.
         const prefixFilter =
             chart._splitGroups.length > 0 && chart._seriesCapacity > 0
-                ? (chart._splitGroups[Math.floor(flatIdx / chart._seriesCapacity)]
-                      ?.prefix ?? null)
+                ? (chart._splitGroups[
+                      Math.floor(flatIdx / chart._seriesCapacity)
+                  ]?.prefix ?? null)
                 : null;
 
         for (const [colName, value] of row) {

packages/viewer-charts/src/ts/charts/heatmap/heatmap-build.ts

@@ -12,6 +12,7 @@
 
 import type { ColumnDataMap } from "../../data/view-reader";
 import type { CategoricalLevel } from "../../chrome/categorical-axis";
+import { buildGroupRuns } from "../../chrome/categorical-axis-core";
 
 export interface HeatmapCell {
     xIdx: number;
@@ -70,7 +71,8 @@ export function buildHeatmapPipeline(
     };
 
     // Resolve group_by row-paths + grand-total offset (same as bar pipeline).
-    const rawRowPaths: CategoricalLevel[] = [];
+    type RawLevel = { indices: Int32Array; dictionary: string[] };
+    const rawRowPaths: RawLevel[] = [];
     for (let n = 0; ; n++) {
         const rp = columns.get(`__ROW_PATH_${n}__`);
         if (!rp || rp.type !== "string" || !rp.indices || !rp.dictionary) break;
@@ -94,15 +96,32 @@ export function buildHeatmapPipeline(
     }
     const numX = Math.max(0, numRows - rowOffset);
 
+    const L = rawRowPaths.length;
     const xLevels: CategoricalLevel[] =
-        groupBy.length > 0 && rawRowPaths.length > 0
-            ? rawRowPaths.map((rp) => ({
-                  indices:
-                      rowOffset === 0
-                          ? rp.indices
-                          : rp.indices.subarray(rowOffset),
-                  dictionary: rp.dictionary,
-              }))
+        groupBy.length > 0 && L > 0
+            ? rawRowPaths.map((rp, levelIdx) => {
+                  const labels = new Array<string>(numX);
+                  let maxLabelChars = 0;
+                  for (let r = 0; r < numX; r++) {
+                      const s = rp.dictionary[rp.indices[r + rowOffset]] ?? "";
+                      labels[r] = s;
+                      if (s.length > maxLabelChars) maxLabelChars = s.length;
+                  }
+                  const runs =
+                      levelIdx === L - 1
+                          ? []
+                          : buildGroupRuns(
+                                rp.indices,
+                                rp.dictionary,
+                                rowOffset,
+                                rowOffset + numX,
+                            ).map((run) => ({
+                                startIdx: run.startIdx - rowOffset,
+                                endIdx: run.endIdx - rowOffset,
+                                label: run.label,
+                            }));
+                  return { labels, runs, maxLabelChars };
+              })
             : [];
 
     // Enumerate Y columns in arrow iteration order, skipping metadata.
@@ -224,6 +243,8 @@ function buildYLevelsFromNames(names: string[]): CategoricalLevel[] {
         const dictionary: string[] = [];
         const dictIndex = new Map<string, number>();
         const indices = new Int32Array(names.length);
+        const labels = new Array<string>(names.length);
+        let maxLabelChars = 0;
         for (let i = 0; i < names.length; i++) {
             const seg = segments[i][d] ?? "";
             let idx = dictIndex.get(seg);
@@ -233,8 +254,14 @@ function buildYLevelsFromNames(names: string[]): CategoricalLevel[] {
                 dictIndex.set(seg, idx);
             }
             indices[i] = idx;
+            labels[i] = seg;
+            if (seg.length > maxLabelChars) maxLabelChars = seg.length;
         }
-        levels.push({ indices, dictionary });
+        const isLeaf = d === maxDepth - 1;
+        const runs = isLeaf
+            ? []
+            : buildGroupRuns(indices, dictionary, 0, names.length);
+        levels.push({ labels, runs, maxLabelChars });
     }
     return levels;
 }