Crosshairs for filemap (#7247)

This enables hovering and selecting segments from the file map, showing
the selected segments as highlighted in the layout tree. It also has a
tooltip showing the segment number, path, byte offset, and size.

<img width="965" height="556" alt="Screenshot 2026-04-01 at 16 20 12"
src="https://github.com/user-attachments/assets/1708ae56-b305-4ee5-8760-265762496eca"
/>

---------

Signed-off-by: Nicholas Gates <nick@nickgates.com>

Author: gatesn

.github/workflows/web.yml

@@ -100,12 +100,14 @@ jobs:
       deployments: write
     environment:
       name: github-pages
+      url: ${{ steps.deploy.outputs.deployment-url }}
     steps:
       - uses: actions/download-artifact@v4
         with:
           name: vortex-explorer
           path: dist
       - name: Deploy to Cloudflare Pages
+        id: deploy
         uses: cloudflare/wrangler-action@v3
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

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

@@ -2,7 +2,7 @@
 // SPDX-FileCopyrightText: Copyright the Vortex contributors
 
 import { useRef, useEffect, useMemo, useState, useCallback } from 'react';
-import { collectSubtreeSegments } from '../swimlane/utils';
+import { collectSubtreeSegments, formatBytes } from '../swimlane/utils';
 import { useVortexFile } from '../../contexts/VortexFileContext';
 import { useSelection } from '../../contexts/SelectionContext';
 import type { SegmentMapEntry } from '../swimlane/types';
@@ -17,10 +17,12 @@ import type { SegmentMapEntry } from '../swimlane/types';
  */
 export function FileMap() {
   const file = useVortexFile();
-  const { state: selection } = useSelection();
+  const { state: selection, hoverNode, selectNode } = useSelection();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
   const [crosshair, setCrosshair] = useState<number | null>(null);
+  const [byteOffset, setByteOffset] = useState<number | null>(null);
+  const [hoveredSeg, setHoveredSeg] = useState<SegmentMapEntry | null>(null);
 
   // Segments belonging to the selected subtree, sorted by byte offset
   const subtreeSegments = useMemo((): SegmentMapEntry[] => {
@@ -199,6 +201,33 @@ export function FileMap() {
     ctx.putImageData(imgData, 0, 0);
   }, [file, subtreeSegments, focusedSegment, hoverSegments]);
 
+  // All segments sorted by byte offset for hit-testing
+  const sortedSegments = useMemo(
+    () => [...file.segments].sort((a, b) => a.byteOffset - b.byteOffset),
+    [file.segments],
+  );
+
+  // Find the segment at a given byte offset using binary search
+  const findSegmentAtByte = useCallback(
+    (byte: number): SegmentMapEntry | null => {
+      let lo = 0;
+      let hi = sortedSegments.length - 1;
+      while (lo <= hi) {
+        const mid = (lo + hi) >>> 1;
+        const seg = sortedSegments[mid];
+        if (byte < seg.byteOffset) {
+          hi = mid - 1;
+        } else if (byte >= seg.byteOffset + seg.byteLength) {
+          lo = mid + 1;
+        } else {
+          return seg;
+        }
+      }
+      return null;
+    },
+    [sortedSegments],
+  );
+
   // Resize observer
   useEffect(() => {
     const container = containerRef.current;
@@ -211,28 +240,82 @@ export function FileMap() {
     return () => observer.disconnect();
   }, []);
 
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    const container = containerRef.current;
-    if (!container) return;
-    const rect = container.getBoundingClientRect();
-    setCrosshair(e.clientX - rect.left);
-  }, []);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      setCrosshair(x);
+
+      const fileSize = file.fileStructure.fileSize;
+      const byte = (x / container.clientWidth) * fileSize;
+      setByteOffset(Math.floor(byte));
+
+      const seg = findSegmentAtByte(byte);
+      setHoveredSeg(seg);
+      hoverNode(seg ? seg.layoutPath : null);
+    },
+    [file.fileStructure.fileSize, findSegmentAtByte, hoverNode],
+  );
 
-  const handleMouseLeave = useCallback(() => setCrosshair(null), []);
+  const handleMouseLeave = useCallback(() => {
+    setCrosshair(null);
+    setByteOffset(null);
+    setHoveredSeg(null);
+    hoverNode(null);
+  }, [hoverNode]);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const fileSize = file.fileStructure.fileSize;
+      const byte = (x / container.clientWidth) * fileSize;
+      const seg = findSegmentAtByte(byte);
+      if (seg) {
+        selectNode(seg.layoutPath);
+      }
+    },
+    [file.fileStructure.fileSize, findSegmentAtByte, selectNode],
+  );
 
   return (
     <div
       ref={containerRef}
       className="relative cursor-crosshair flex-shrink-0 h-[1lh] text-[10px] leading-none"
       onMouseMove={handleMouseMove}
       onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
     >
       <canvas ref={canvasRef} className="block" />
       {crosshair !== null && (
-        <div
-          className="absolute top-0 bottom-0 w-px bg-vortex-black dark:bg-vortex-white opacity-50 pointer-events-none"
-          style={{ left: crosshair }}
-        />
+        <>
+          <div
+            className="absolute top-0 bottom-0 w-px bg-vortex-black dark:bg-vortex-white opacity-50 pointer-events-none"
+            style={{ left: crosshair }}
+          />
+          {byteOffset !== null && (
+            <div
+              className="absolute bottom-full mb-1 -translate-x-1/2 px-1.5 py-1 rounded text-[9px] bg-vortex-black/90 dark:bg-white/90 text-white dark:text-vortex-black whitespace-nowrap pointer-events-none leading-normal"
+              style={{ left: crosshair }}
+            >
+              {hoveredSeg ? (
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-medium">{hoveredSeg.layoutPath}</span>
+                  <span className="opacity-70">
+                    segment {hoveredSeg.index} &middot; {formatBytes(hoveredSeg.byteLength)} @{' '}
+                    {formatBytes(hoveredSeg.byteOffset)}
+                  </span>
+                </div>
+              ) : (
+                <span className="opacity-70">{formatBytes(byteOffset)}</span>
+              )}
+            </div>
+          )}
+        </>
       )}
     </div>
   );

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

@@ -83,6 +83,16 @@ export function TreePanel() {
     [allRows, searchQuery, file.layoutTree],
   );
 
+  // Compute the set of ancestor node IDs for the hovered node (for dim highlighting in tree)
+  const hoveredAncestorIds = useMemo(() => {
+    if (!selection.hoveredNodeId) return new Set<string>();
+    const path = findPathToNode(file.layoutTree, selection.hoveredNodeId);
+    // Exclude the hovered node itself — it gets full highlight
+    const ids = new Set(path.map((n) => n.id));
+    ids.delete(selection.hoveredNodeId);
+    return ids;
+  }, [selection.hoveredNodeId, file.layoutTree]);
+
   // When a flat layout node is expanded, lazily attach array encoding children.
   // Track which nodes we've already requested to avoid re-triggering on tree updates.
   const expandedArrayRequests = useRef(new Set<string>());
@@ -131,6 +141,8 @@ export function TreePanel() {
             row={row}
             isExpanded={expanded.has(row.node.id)}
             isSelected={selection.selectedNodeId === row.node.id}
+            isHovered={selection.hoveredNodeId === row.node.id}
+            isHoveredAncestor={hoveredAncestorIds.has(row.node.id)}
             mode={mode}
             onToggle={() => toggleExpanded(row.node.id)}
             onSelect={() => handleNodeClick(row.node.id)}

vortex-web/src/components/swimlane/TreeRow.tsx

@@ -17,6 +17,8 @@ interface TreeRowProps {
   row: FlattenedRow;
   isExpanded: boolean;
   isSelected: boolean;
+  isHovered?: boolean;
+  isHoveredAncestor?: boolean;
   mode: 'schema' | 'layout';
   onToggle: () => void;
   onSelect: () => void;
@@ -27,6 +29,8 @@ export function TreeRow({
   row,
   isExpanded,
   isSelected,
+  isHovered,
+  isHoveredAncestor,
   mode,
   onToggle,
   onSelect,
@@ -82,12 +86,18 @@ export function TreeRow({
 
   const opacity = isGroup ? 'opacity-50' : isLeaf ? 'opacity-70' : '';
   const fontStyle = isGroup ? 'italic' : '';
-  const selectedBg = isSelected ? 'bg-vortex-light-blue/10' : '';
+  const highlightBg = isSelected
+    ? 'bg-vortex-light-blue/10'
+    : isHovered
+      ? 'bg-vortex-light-blue/15'
+      : isHoveredAncestor
+        ? 'bg-vortex-light-blue/5'
+        : '';
 
   return (
     <div
       data-node-id={node.id}
-      className={`flex items-center gap-1.5 text-[11px] whitespace-nowrap hover:bg-vortex-black/[0.03] dark:hover:bg-white/[0.04] cursor-default ${opacity} ${fontStyle} ${selectedBg}`}
+      className={`flex items-center gap-1.5 text-[11px] whitespace-nowrap hover:bg-vortex-black/[0.03] dark:hover:bg-white/[0.04] cursor-default ${opacity} ${fontStyle} ${highlightBg}`}
       title={node.isArrayNode ? 'Array encoding node' : undefined}
       style={{
         height: ROW_HEIGHT,