refactor(vortex-web): render treemap to leaves with a path header

The one-level drill view hid the blocks (a dominant field was just one big empty
tile). Render the full nested tree down to the leaves again so every physical
block is visible, but label only leaf blocks — parent names come from a single
path header at the top, which shows the path to the block under the cursor
(e.g. "root / amount / data / [4]"). Because containers carry no inline label,
nothing overlaps. Click a block to select it (flat blocks expand in place to
reveal their buffers); click a path segment to focus that subtree.

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

Author: robert3005

vortex-web/README.md

@@ -4,13 +4,15 @@ A web UI for exploring Vortex data files, built with React, TypeScript, Tailwind
 
 ## Treemap Explorer
 
-The **Treemap** view (toggle in the header, next to the theme picker) is a
-drill-down map of a file's physical blocks. The box shows the current layout's
-blocks, sized by byte footprint and coloured by dtype to match the swimlane and
-detail treemap; a header bar at the top is the current path. Click a container
-block to drill into it, and click a segment of the path header to drill back
-out. It follows the app theme — dark by default, matching explore.vortex.dev —
-and the light theme via the theme picker.
+The **Treemap** view (toggle in the header, next to the theme picker) renders a
+file's physical blocks all the way down to the leaves: layouts nest, flat
+layouts subdivide into their array-encoding buffers, and every block is sized by
+its byte footprint and coloured by dtype to match the swimlane and detail
+treemap. Only leaf blocks are labelled inline, so labels never collide; a header
+bar at the top is the path to the block under the cursor. Click a path segment
+to focus that subtree, and click a flat block to expand its buffers in place. It
+follows the app theme — dark by default, matching explore.vortex.dev — and the
+light theme via the theme picker.
 
 ![Treemap explorer overview](docs/img/treemap-explorer-overview.png)
 

vortex-web/docs/img/treemap-explorer-chunks-dark.png

@@ -64,20 +64,22 @@ function subtreeBytes(node: LayoutTreeNode, segmentMap: Map<number, SegmentMapEn
   );
 }
 
-/** The child blocks to show inside a node, one level deep. Each tile aggregates
- *  its own subtree's bytes; drilling re-roots the box at it. Flat / array layouts
- *  expose their array-encoding children; other layouts hide them until expanded. */
-function childTiles(node: LayoutTreeNode, segmentMap: Map<number, SegmentMapEntry>): TreeNode[] {
+/** Build the full nested treemap for a subtree so every physical block is
+ *  visible. Flat / array layouts expose their array-encoding children; other
+ *  layouts hide array children until expanded. Tiles are coloured by dtype. */
+function buildTree(node: LayoutTreeNode, segmentMap: Map<number, SegmentMapEntry>): TreeNode {
   const isArray = node.isArrayNode ?? false;
   const isFlatOrArray = isArray || node.encoding === 'vortex.flat';
   const children = isFlatOrArray ? node.children : node.children.filter((c) => !c.isArrayNode);
-  return children.map((c) => ({
-    name: getNodeDisplayName(c),
-    nodeId: c.id,
-    color: DTYPE_COLORS[getDtypeCategory(c.dtype)],
-    bytes: Math.max(subtreeBytes(c, segmentMap), 1),
-    layoutNode: c,
-  }));
+  const base = {
+    name: getNodeDisplayName(node),
+    nodeId: node.id,
+    color: DTYPE_COLORS[getDtypeCategory(node.dtype)],
+    bytes: Math.max(subtreeBytes(node, segmentMap), 1),
+    layoutNode: node,
+  };
+  if (children.length === 0) return base;
+  return { ...base, children: children.map((c) => buildTree(c, segmentMap)) };
 }
 
 interface ThemeColors {
@@ -103,12 +105,6 @@ interface Tooltip {
   y: number;
 }
 
-/** A node is drillable if it has child blocks, or is a flat layout whose array
- *  encoding tree can still be expanded. */
-function isDrillable(node: LayoutTreeNode): boolean {
-  return node.children.length > 0 || isFlatLayout(node);
-}
-
 export function BlockTreemap({
   root,
   segments,
@@ -133,18 +129,7 @@ export function BlockTreemap({
   // Current drill root (the box shows this node's blocks). Falls back to the
   // file root if the drilled node disappears.
   const drillNode = useMemo(() => findNodeById(root, drillId) ?? root, [root, drillId]);
-  const tree = useMemo<TreeNode>(
-    () => ({
-      name: getNodeDisplayName(drillNode),
-      nodeId: drillNode.id,
-      color: DTYPE_COLORS[getDtypeCategory(drillNode.dtype)],
-      bytes: 1,
-      layoutNode: drillNode,
-      children: childTiles(drillNode, segmentMap),
-    }),
-    [drillNode, segmentMap],
-  );
-  const drillPath = useMemo(() => findPathToNode(root, drillNode.id), [root, drillNode.id]);
+  const tree = useMemo(() => buildTree(drillNode, segmentMap), [drillNode, segmentMap]);
 
   // Track the box size (area below the path header).
   useEffect(() => {
@@ -193,6 +178,11 @@ export function BlockTreemap({
   const activeHover = localHover ?? hoveredNodeId;
   const hoveredNode = activeHover ? findNodeById(root, activeHover) : null;
 
+  // Path shown in the header: to the hovered block while hovering (so any block
+  // can be identified), otherwise to the focused drill node.
+  const headerNode = hoveredNode ?? drillNode;
+  const headerPath = useMemo(() => findPathToNode(root, headerNode.id), [root, headerNode.id]);
+
   /** Deepest tile (excluding the drill root itself) containing a point. */
   const hitTest = useCallback(
     (px: number, py: number): RectNode | null => {
@@ -251,18 +241,19 @@ export function BlockTreemap({
       const hit = hitTest(p.px, p.py);
       if (!hit) return;
       const node = hit.data.layoutNode;
-      if (isDrillable(node)) drillTo(node);
-      else onSelectNode(node.id);
+      onSelectNode(node.id);
+      // Expand a flat block in place so its array buffers render down to leaves.
+      if (isFlatLayout(node) && !node.children.some((c) => c.isArrayNode)) onExpand?.(node.id);
     },
-    [hitTest, localPoint, drillTo, onSelectNode],
+    [hitTest, localPoint, onSelectNode, onExpand],
   );
 
   return (
     <div className="flex flex-col w-full h-full">
       {/* Path header — the box's title bar showing the current location. */}
       <div className="flex items-center gap-1 flex-shrink-0 h-6 px-2 border-b border-vortex-grey-light/40 dark:border-white/[0.06] bg-vortex-grey-lightest dark:bg-white/[0.03] text-[11px] font-mono overflow-hidden">
-        {drillPath.map((node, i) => {
-          const isLast = i === drillPath.length - 1;
+        {headerPath.map((node, i) => {
+          const isLast = i === headerPath.length - 1;
           return (
             <span key={node.id} className="flex items-center gap-1 min-w-0 flex-shrink-0">
               {i > 0 && <span className="text-vortex-grey-dark opacity-40">/</span>}
@@ -274,16 +265,17 @@ export function BlockTreemap({
                 <button
                   className="text-vortex-grey-dark hover:text-vortex-light-blue truncate"
                   onClick={() => drillTo(node)}
+                  title={`Focus ${getNodeDisplayName(node)}`}
                 >
                   {getNodeDisplayName(node)}
                 </button>
               )}
             </span>
           );
         })}
-        {hoveredNode && hoveredNode.id !== drillNode.id && (
+        {hoveredNode && (
           <span className="ml-auto flex-shrink-0 text-vortex-grey-dark truncate">
-            {getNodeDisplayName(hoveredNode)} · {shortEncoding(hoveredNode.encoding)}
+            {shortEncoding(hoveredNode.encoding)} · {hoveredNode.dtype}
           </span>
         )}
       </div>
@@ -310,7 +302,6 @@ export function BlockTreemap({
               const isLeaf = !n.children || n.children.length === 0;
               const isHovered = d.nodeId === activeHover;
               const isSelected = selectedSubtreeIds.has(d.nodeId);
-              const drillable = isDrillable(d.layoutNode);
               const maxChars = Math.floor((w - 6) / 6);
               const label = maxChars < 2 ? '' : truncate(d.name, maxChars);
 
@@ -326,9 +317,9 @@ export function BlockTreemap({
                     stroke={isHovered ? theme.highlight : theme.border}
                     strokeWidth={isHovered ? 2 : isLeaf ? 0.5 : 1}
                   />
-                  {/* Every tile is one level deep, so its label never collides
-                      with nested content. A ›  marks a block you can drill into. */}
-                  {label && h > 14 && (
+                  {/* Only leaf blocks are labelled, so labels never collide with
+                      nested content. Parent names come from the path header. */}
+                  {isLeaf && label && h > 14 && (
                     <text
                       x={n.x0 + 4}
                       y={n.y0 + 12}
@@ -337,10 +328,9 @@ export function BlockTreemap({
                       fontFamily="'Geist Mono', monospace"
                     >
                       {label}
-                      {drillable ? ' ›' : ''}
                     </text>
                   )}
-                  {w > 50 && h > 28 && (
+                  {isLeaf && w > 50 && h > 28 && (
                     <text
                       x={n.x0 + 4}
                       y={n.y0 + 23}

vortex-web/docs/img/treemap-explorer-hover.png

@@ -58,7 +58,7 @@ export function TreemapExplorer() {
           </div>
         ))}
         <span className="ml-auto flex-shrink-0">
-          click a block to drill in · click the path to go back
+          click a block to select · click the path to focus a subtree
         </span>
       </div>