fix: mobile hover and cascading collapse in SlotProgressTimeline (#380)

* fix: handle mobile hover and cascading collapse in SlotProgressTimeline

- Add useCanHover() hook to detect touch-only devices and disable hover tooltips on mobile
- Fix visibility filter to hide all descendants of collapsed spans, not just direct children
- Prevents orphaned child spans from appearing when parent is collapsed
- Tested on desktop and verified cascading collapse behavior works correctly

* refactor: move useCanHover hook to shared hooks location

Extract the useCanHover hook from SlotProgressTimeline to src/hooks/useCanHover/
for reuse across the app. This hook detects if the device supports hover
interactions using the CSS media query (hover: hover).

Author: samcm

src/hooks/useCanHover/index.ts

@@ -0,0 +1 @@
+export { useCanHover } from './useCanHover';

src/hooks/useCanHover/useCanHover.test.ts

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useCanHover } from './useCanHover';
+
+describe('useCanHover', () => {
+  let matchMediaMock: ReturnType<typeof vi.fn>;
+  let addEventListenerMock: ReturnType<typeof vi.fn>;
+  let removeEventListenerMock: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    addEventListenerMock = vi.fn();
+    removeEventListenerMock = vi.fn();
+    matchMediaMock = vi.fn().mockReturnValue({
+      matches: true,
+      addEventListener: addEventListenerMock,
+      removeEventListener: removeEventListenerMock,
+    });
+    window.matchMedia = matchMediaMock;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('returns true when device supports hover', () => {
+    matchMediaMock.mockReturnValue({
+      matches: true,
+      addEventListener: addEventListenerMock,
+      removeEventListener: removeEventListenerMock,
+    });
+
+    const { result } = renderHook(() => useCanHover());
+    expect(result.current).toBe(true);
+  });
+
+  it('returns false when device does not support hover', () => {
+    matchMediaMock.mockReturnValue({
+      matches: false,
+      addEventListener: addEventListenerMock,
+      removeEventListener: removeEventListenerMock,
+    });
+
+    const { result } = renderHook(() => useCanHover());
+    expect(result.current).toBe(false);
+  });
+
+  it('subscribes to media query changes', () => {
+    renderHook(() => useCanHover());
+    expect(addEventListenerMock).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+
+  it('unsubscribes on unmount', () => {
+    const { unmount } = renderHook(() => useCanHover());
+    unmount();
+    expect(removeEventListenerMock).toHaveBeenCalledWith('change', expect.any(Function));
+  });
+
+  it('updates when media query changes', () => {
+    let changeHandler: (e: MediaQueryListEvent) => void = () => {};
+    addEventListenerMock.mockImplementation((event: string, handler: (e: MediaQueryListEvent) => void) => {
+      if (event === 'change') {
+        changeHandler = handler;
+      }
+    });
+
+    matchMediaMock.mockReturnValue({
+      matches: true,
+      addEventListener: addEventListenerMock,
+      removeEventListener: removeEventListenerMock,
+    });
+
+    const { result } = renderHook(() => useCanHover());
+    expect(result.current).toBe(true);
+
+    act(() => {
+      changeHandler({ matches: false } as MediaQueryListEvent);
+    });
+
+    expect(result.current).toBe(false);
+  });
+});

src/hooks/useCanHover/useCanHover.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to detect if the device supports hover interactions.
+ * Returns false on touch-only devices (mobile/tablet).
+ *
+ * Uses the CSS media query `(hover: hover)` which returns true only
+ * for devices with a primary pointing device that can hover.
+ */
+export function useCanHover(): boolean {
+  const [canHover, setCanHover] = useState(() => {
+    if (typeof window === 'undefined') return true;
+    return window.matchMedia('(hover: hover)').matches;
+  });
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(hover: hover)');
+    setCanHover(mediaQuery.matches);
+
+    const handler = (e: MediaQueryListEvent): void => setCanHover(e.matches);
+    mediaQuery.addEventListener('change', handler);
+    return () => mediaQuery.removeEventListener('change', handler);
+  }, []);
+
+  return canHover;
+}

src/pages/ethereum/slots/components/SlotProgressTimeline/SlotProgressTimeline.tsx

@@ -4,6 +4,7 @@ import { Card } from '@/components/Layout/Card';
 import { ClientLogo } from '@/components/Ethereum/ClientLogo';
 import { SelectMenu } from '@/components/Forms/SelectMenu';
 import { Toggle } from '@/components/Forms/Toggle';
+import { useCanHover } from '@/hooks/useCanHover';
 import type { SlotProgressTimelineProps, TraceSpan } from './SlotProgressTimeline.types';
 import { SPAN_COLORS } from './constants';
 import { formatMs, msToPercent } from './utils';
@@ -38,6 +39,7 @@ export function SlotProgressTimeline({
   contributor,
   onContributorChange,
 }: SlotProgressTimelineProps): JSX.Element {
+  const canHover = useCanHover();
   const [hoveredSpan, setHoveredSpan] = useState<TraceSpan | null>(null);
   const [mousePos, setMousePos] = useState<{ x: number; y: number } | null>(null);
   const [collapsedSpans, setCollapsedSpans] = useState<Set<string>>(new Set());
@@ -122,22 +124,31 @@ export function SlotProgressTimeline({
     hasInitializedCollapsed.current = false;
   }, [selectedUsername]);
 
-  // Handle mouse events for tooltip
-  const handleMouseEnter = useCallback((span: TraceSpan) => {
-    setHoveredSpan(span);
-  }, []);
+  // Handle mouse events for tooltip (disabled on touch devices)
+  const handleMouseEnter = useCallback(
+    (span: TraceSpan) => {
+      if (!canHover) return;
+      setHoveredSpan(span);
+    },
+    [canHover]
+  );
 
   const handleMouseLeave = useCallback(() => {
+    if (!canHover) return;
     setHoveredSpan(null);
     setMousePos(null);
-  }, []);
+  }, [canHover]);
 
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    }
-  }, []);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!canHover) return;
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setMousePos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      }
+    },
+    [canHover]
+  );
 
   // Loading state
   if (isLoading || executionLoading) {
@@ -173,8 +184,20 @@ export function SlotProgressTimeline({
     ...availableUsernames.map(username => ({ value: username, label: username })),
   ];
 
-  // Filter spans by collapsed state
-  const visibleSpans = spans.filter(span => !span.parentId || !collapsedSpans.has(span.parentId));
+  // Filter spans by collapsed state - hide if any ancestor is collapsed
+  // Build a lookup map for O(1) parent access
+  const spanById = new Map(spans.map(s => [s.id, s]));
+  const visibleSpans = spans.filter(span => {
+    if (!span.parentId) return true;
+
+    // Walk up the ancestry chain to check if any ancestor is collapsed
+    let currentParentId: string | undefined = span.parentId;
+    while (currentParentId) {
+      if (collapsedSpans.has(currentParentId)) return false;
+      currentParentId = spanById.get(currentParentId)?.parentId;
+    }
+    return true;
+  });
 
   return (
     <Card>

src/pages/ethereum/slots/components/SlotProgressTimeline/useTraceSpans.ts

@@ -11,7 +11,7 @@ import type {
   FctMevBidHighestValueByBuilderChunked50Ms,
 } from '@/api/types.gen';
 import { SLOT_DURATION_MS, MAX_REASONABLE_SEEN_TIME_MS } from './constants';
-import { formatMs, classificationToCategory, filterOutliers } from './utils';
+import { formatMs, classificationToCategory, calculateOutlierBounds } from './utils';
 import type { TraceSpan } from './SlotProgressTimeline.types';
 
 interface UseTraceSpansOptions {
@@ -455,31 +455,38 @@ function buildBlockProposalSpans(
 ): void {
   if (nodeTimelines.length === 0) return;
 
-  // Calculate overall timing bounds
-  const allStartTimes = nodeTimelines.map(n => n.blockReceivedMs);
-  const allEndTimes = nodeTimelines.map(n => {
-    // Find the latest event for each node
+  // Calculate end time for each node
+  const getNodeEndTime = (n: NodeTimeline): number => {
     const times = [n.blockReceivedMs];
     if (n.headUpdatedMs !== null) times.push(n.headUpdatedMs);
     if (n.execution) times.push(n.execution.endMs);
     if (n.daCompleteMs !== null) times.push(n.daCompleteMs);
     return Math.max(...times);
-  });
-
-  const firstSeenMs = Math.min(...allStartTimes);
-  let lastEventMs = Math.max(...allEndTimes);
+  };
 
-  // Apply outlier filtering for parent span
-  if (excludeOutliers && allEndTimes.length >= 4) {
-    const filteredEndTimes = filterOutliers(allEndTimes);
-    if (filteredEndTimes.length > 0) {
-      lastEventMs = Math.max(...filteredEndTimes);
+  // Filter out outlier nodes when excludeOutliers is enabled
+  let filteredTimelines = nodeTimelines;
+  if (excludeOutliers && nodeTimelines.length >= 4) {
+    const allEndTimes = nodeTimelines.map(getNodeEndTime);
+    const bounds = calculateOutlierBounds(allEndTimes);
+    if (bounds) {
+      filteredTimelines = nodeTimelines.filter(n => {
+        const endTime = getNodeEndTime(n);
+        return endTime <= bounds.upper;
+      });
     }
   }
 
-  // Group by country
+  // Use filtered timelines for all calculations
+  const allStartTimes = filteredTimelines.map(n => n.blockReceivedMs);
+  const allEndTimes = filteredTimelines.map(getNodeEndTime);
+
+  const firstSeenMs = Math.min(...allStartTimes);
+  const lastEventMs = Math.max(...allEndTimes);
+
+  // Group by country (using filtered timelines)
   const byCountry = new Map<string, NodeTimeline[]>();
-  for (const timeline of nodeTimelines) {
+  for (const timeline of filteredTimelines) {
     const existing = byCountry.get(timeline.country) || [];
     existing.push(timeline);
     byCountry.set(timeline.country, existing);
@@ -501,8 +508,8 @@ function buildBlockProposalSpans(
     category: 'propagation',
     depth: 1,
     details: selectedUsername
-      ? `${selectedUsername}: ${nodeTimelines.length} node${nodeTimelines.length !== 1 ? 's' : ''} processed block`
-      : `Block proposal lifecycle across ${nodeTimelines.length} nodes in ${sortedCountries.length} countries`,
+      ? `${selectedUsername}: ${filteredTimelines.length} node${filteredTimelines.length !== 1 ? 's' : ''} processed block`
+      : `Block proposal lifecycle across ${filteredTimelines.length} nodes in ${sortedCountries.length} countries`,
     isLate: lastEventMs > ATTESTATION_DEADLINE_MS,
     collapsible: sortedCountries.length > 0,
     defaultCollapsed: false,
@@ -517,21 +524,8 @@ function buildBlockProposalSpans(
 
     // Calculate country span bounds
     const countryFirstSeen = Math.min(...sortedNodes.map(n => n.blockReceivedMs));
-    const countryEndTimes = sortedNodes.map(n => {
-      const times = [n.blockReceivedMs];
-      if (n.headUpdatedMs !== null) times.push(n.headUpdatedMs);
-      if (n.execution) times.push(n.execution.endMs);
-      if (n.daCompleteMs !== null) times.push(n.daCompleteMs);
-      return Math.max(...times);
-    });
-
-    let countryLastEvent = Math.max(...countryEndTimes);
-    if (excludeOutliers && countryEndTimes.length >= 4) {
-      const filteredTimes = filterOutliers(countryEndTimes);
-      if (filteredTimes.length > 0) {
-        countryLastEvent = Math.max(...filteredTimes);
-      }
-    }
+    const countryEndTimes = sortedNodes.map(getNodeEndTime);
+    const countryLastEvent = Math.max(...countryEndTimes);
 
     // Country span
     result.push({
@@ -659,7 +653,7 @@ function buildBlockProposalSpans(
 
         result.push({
           id: daSpanId,
-          label: `Data Availability (${columnCount})`,
+          label: 'Data Availability',
           startMs: daStartMs,
           endMs: timeline.daCompleteMs,
           category: 'column',
@@ -669,7 +663,6 @@ function buildBlockProposalSpans(
           parentId: nodeId,
           collapsible: columnCount > 1,
           defaultCollapsed: true,
-          // nodeCount omitted - already shown in label
         });
 
         // Add child spans for each individual column/blob (only if multiple)