fix(vortex-web): address treemap review — one-shot re-zoom marker + nits

- selfSelected is now a one-shot marker: cleared the moment it's consumed, so
  re-selecting a previously map-selected node from the tree panel re-roots the
  zoom instead of being suppressed by a stale latch.
- Deduplicate arraySubtreeBytes (export it from physicalStats, drop the copy in
  BlockTreemap).
- nodePhysicalStats now takes the prebuilt segmentMap, and the tooltip memoizes
  its stats by node, so they're not recomputed on every mouse move.
- Document that tile area is data-only bytes while the tooltip's "% of file"
  includes metadata, so the two can differ slightly.

Signed-off-by: Robert <robert@spiraldb.com>

Author: robert3005

vortex-web/src/components/explorer/BlockTreemap.tsx

@@ -17,7 +17,12 @@ import {
   DTYPE_COLORS,
 } from '../swimlane/utils';
 import { useTheme } from '../../contexts/ThemeContext';
-import { nodePhysicalStats, formatPercent, formatBytesPerRow } from './physicalStats';
+import {
+  nodePhysicalStats,
+  arraySubtreeBytes,
+  formatPercent,
+  formatBytesPerRow,
+} from './physicalStats';
 
 interface BlockTreemapProps {
   /** The full layout tree the map can explore. */
@@ -51,15 +56,11 @@ type RectNode = HierarchyRectangularNode<TreeNode>;
 const HEADER = 16;
 const PAD = 2;
 
-function arraySubtreeBytes(node: LayoutTreeNode): number {
-  const own = (node.bufferLengths ?? []).reduce((s, b) => s + b, 0);
-  const childBytes = node.children
-    .filter((c) => c.isArrayNode)
-    .reduce((s, c) => s + arraySubtreeBytes(c), 0);
-  return own + childBytes;
-}
-
-/** Total encoded bytes for a node's whole subtree. */
+/**
+ * Total encoded *data* bytes for a node's whole subtree (no metadata) — this is
+ * what tile areas are proportional to. Note the tooltip's "% of file" uses
+ * total bytes (data + metadata), so a tile's area and its % can differ slightly.
+ */
 function subtreeBytes(node: LayoutTreeNode, segmentMap: Map<number, SegmentMapEntry>): number {
   if (node.isArrayNode) return arraySubtreeBytes(node);
   return collectSubtreeSegments(node).reduce(
@@ -154,9 +155,16 @@ export function BlockTreemap({
   useEffect(() => setDrillId(root.id), [root.id]);
 
   // An external selection (e.g. clicking the tree panel) drives the zoom: re-root
-  // the map at the selected node. Selections the map made itself are ignored.
+  // the map at the selected node. Selections the map made itself are ignored via
+  // a one-shot marker that is cleared as soon as it is consumed — otherwise a
+  // stale marker would suppress a later external re-selection of the same node.
   useEffect(() => {
-    if (!selectedNodeId || selectedNodeId === selfSelected.current) return;
+    if (!selectedNodeId) return;
+    if (selectedNodeId === selfSelected.current) {
+      selfSelected.current = null;
+      return;
+    }
+    selfSelected.current = null;
     setDrillId(selectedNodeId);
     const node = findNodeById(root, selectedNodeId);
     if (node && isFlatLayout(node) && !node.children.some((c) => c.isArrayNode)) {
@@ -374,7 +382,7 @@ export function BlockTreemap({
         </svg>
       )}
 
-      {tooltip && <TileTooltip tooltip={tooltip} segments={segments} fileSize={fileSize} />}
+      {tooltip && <TileTooltip tooltip={tooltip} segmentMap={segmentMap} fileSize={fileSize} />}
     </div>
   );
 }
@@ -386,15 +394,19 @@ function truncate(s: string, maxChars: number): string {
 
 function TileTooltip({
   tooltip,
-  segments,
+  segmentMap,
   fileSize,
 }: {
   tooltip: Tooltip;
-  segments: SegmentMapEntry[];
+  segmentMap: Map<number, SegmentMapEntry>;
   fileSize: number;
 }) {
   const { node, x, y } = tooltip;
-  const stats = nodePhysicalStats(node, segments, fileSize);
+  // Keyed on the node so it isn't recomputed for every pixel of mouse movement.
+  const stats = useMemo(
+    () => nodePhysicalStats(node, segmentMap, fileSize),
+    [node, segmentMap, fileSize],
+  );
   const dtypeCat = getDtypeCategory(node.dtype);
   const dtypeColor = DTYPE_COLORS[dtypeCat];
   return (

vortex-web/src/components/explorer/physicalStats.ts

@@ -29,7 +29,7 @@ export interface PhysicalStats {
 }
 
 /** Total buffer bytes for an array-encoding node subtree. */
-function arraySubtreeBytes(node: LayoutTreeNode): number {
+export function arraySubtreeBytes(node: LayoutTreeNode): number {
   const own = (node.bufferLengths ?? []).reduce((sum, b) => sum + b, 0);
   const childBytes = node.children
     .filter((c) => c.isArrayNode)
@@ -54,12 +54,12 @@ function arraySubtreeBufferCount(node: LayoutTreeNode): number {
  * Compute the physical statistics for a node, aggregated over its subtree.
  *
  * @param node the layout or array node to describe
- * @param segments the file's segment map (used to resolve layout byte sizes)
+ * @param segmentMap segment index → entry, used to resolve layout byte sizes
  * @param fileSize total file size in bytes, used for the percentage-of-file metric
  */
 export function nodePhysicalStats(
   node: LayoutTreeNode,
-  segments: SegmentMapEntry[],
+  segmentMap: Map<number, SegmentMapEntry>,
   fileSize: number,
 ): PhysicalStats {
   const isArray = node.isArrayNode ?? false;
@@ -73,7 +73,6 @@ export function nodePhysicalStats(
     bufferCount = arraySubtreeBufferCount(node);
     segmentCount = 0;
   } else {
-    const segmentMap = new Map(segments.map((s) => [s.index, s]));
     const ids = new Set(collectSubtreeSegments(node));
     dataBytes = 0;
     for (const id of ids) {