fix: improve map loading safety and UI (#300)

samcm · web-flow · commit 7876e0de29a5 · 2025-11-15T09:24:07.000-03:00
- Add auto-retry (every 5s) for GeoJSON fetch with timeout protection
- Filter out invalid coordinates and [0,0] null island points
- Always render map (no blocking loading states)
- Add info disclaimer overlay to bottom-left of map
- Remove "live" indicator from timeline controls
- Fix timeline location formatting when city data is missing
diff --git a/src/components/Charts/Map2D/Map2D.tsx b/src/components/Charts/Map2D/Map2D.tsx
@@ -47,24 +47,66 @@ function Map2DChartComponent({
   const chartStyle = useMemo(() => ({ height, width: '100%', minHeight: height }), [height]);
   const chartOpts = useMemo(() => ({ renderer: 'canvas' as const }), []);
 
-  // Load and register world map on mount
+  // Load and register world map on mount - retry every 5s on failure
   useEffect(() => {
+    const controller = new AbortController();
+    let timeoutId: ReturnType<typeof setTimeout>;
+
     const loadWorldMap = async (): Promise<void> => {
       try {
-        // Fetch world map GeoJSON from local public directory
-        const response = await fetch('/data/maps/world.json');
+        // Fetch with timeout (10 seconds)
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          timeoutId = setTimeout(() => reject(new Error('Map load timeout')), 10000);
+        });
+
+        const fetchPromise = fetch('/data/maps/world.json', {
+          signal: controller.signal,
+        });
+
+        const response = await Promise.race([fetchPromise, timeoutPromise]);
+        clearTimeout(timeoutId);
+
+        // Validate HTTP response
+        if (!response.ok) {
+          throw new Error(`Failed to load map: HTTP ${response.status} ${response.statusText}`);
+        }
+
+        // Parse and validate JSON
         const worldGeoJson = await response.json();
 
+        if (!worldGeoJson || typeof worldGeoJson !== 'object') {
+          throw new Error('Invalid map data: malformed GeoJSON');
+        }
+
         // Register the map with echarts
         echarts.registerMap('world', worldGeoJson);
         setMapLoaded(true);
       } catch (error) {
-        console.error('Failed to load world map:', error);
-        setMapLoaded(false);
+        clearTimeout(timeoutId);
+
+        // Don't retry if aborted (component unmounted)
+        if (error instanceof Error && error.name === 'AbortError') {
+          return;
+        }
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error loading map';
+        console.error('Failed to load world map:', errorMessage, '- retrying in 5s...');
+
+        // Retry every 5 seconds indefinitely
+        timeoutId = setTimeout(() => {
+          if (!controller.signal.aborted) {
+            loadWorldMap();
+          }
+        }, 5000);
       }
     };
 
     loadWorldMap();
+
+    return () => {
+      controller.abort();
+      clearTimeout(timeoutId);
+    };
   }, []);
 
   // Create a memoized function to generate scatter series config
@@ -135,8 +177,14 @@ function Map2DChartComponent({
     // Filter out points without valid coordinates
     let hasNewPoints = false;
     points.forEach(point => {
-      // Skip points without valid coordinates
-      if (!point.coords || point.coords.length < 2 || point.coords[0] == null || point.coords[1] == null) {
+      // Skip points without valid coordinates or "null island" [0, 0] fallback coords
+      if (
+        !point.coords ||
+        point.coords.length < 2 ||
+        point.coords[0] == null ||
+        point.coords[1] == null ||
+        (point.coords[0] === 0 && point.coords[1] === 0) // Reject [0, 0] null island
+      ) {
         return;
       }
       const key = `${point.coords[0]},${point.coords[1]}`;
@@ -289,17 +337,9 @@ function Map2DChartComponent({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [mapLoaded]); // Only recalculate when map loads - after that we update via setOption
 
-  // Don't render until map is loaded
-  if (!mapLoaded) {
-    return (
-      <div className="flex w-full items-center justify-center" style={{ height }}>
-        <div className="text-foreground">Loading map...</div>
-      </div>
-    );
-  }
-
+  // Always render the map container
   return (
-    <div className="h-full w-full">
+    <div className="relative h-full w-full">
       <ReactECharts
         ref={chartRef}
         option={option}
@@ -308,6 +348,9 @@ function Map2DChartComponent({
         lazyUpdate={true}
         opts={chartOpts}
       />
+      <div className="pointer-events-none absolute bottom-2 left-2 rounded bg-surface/90 px-2 py-1 text-xs text-muted backdrop-blur-sm">
+        Data from nodes contributing to Xatu • Not representative of actual Ethereum network distribution
+      </div>
     </div>
   );
 }
diff --git a/src/pages/ethereum/live/components/Timeline/Timeline.tsx b/src/pages/ethereum/live/components/Timeline/Timeline.tsx
@@ -18,7 +18,7 @@ function TimelineComponent({
   onBackward,
   onForward,
   onTimeClick,
-  isLive = false,
+  isLive: _isLive = false,
   ariaLabel = 'Slot View Timeline',
 }: TimelineProps): JSX.Element {
   // Memoize the timeline click handler to prevent SlotTimeline re-renders
@@ -38,17 +38,9 @@ function TimelineComponent({
 
   return (
     <div className="w-full">
-      {/* Header with Live indicator, controls, and current time */}
+      {/* Header with controls and current time */}
       <div className="mb-4 flex items-center gap-6">
-        {/* Left: Live indicator */}
-        {isLive && (
-          <div className="flex items-center gap-2">
-            <div className="size-2 animate-pulse rounded-sm bg-success" />
-            <span className="text-sm text-success">Live</span>
-          </div>
-        )}
-
-        {/* Center: Playback controls */}
+        {/* Playback controls */}
         <div className="flex shrink-0 items-center gap-2">
           {/* Backward button */}
           <button
diff --git a/src/pages/ethereum/live/hooks/useMapData/useMapData.ts b/src/pages/ethereum/live/hooks/useMapData/useMapData.ts
@@ -20,23 +20,32 @@ export function useMapData(nodes: FctBlockFirstSeenByNode[]): MapPointWithTiming
     });
 
     // Convert to PointData format with timing information
-    return Array.from(cityGroups.entries()).map(([, cityNodes]) => {
-      const node = cityNodes[0];
-      const name = node.meta_client_geo_city
-        ? `${node.meta_client_geo_city}, ${node.meta_client_geo_country}`
-        : (node.meta_client_geo_country ?? 'Unknown');
+    return Array.from(cityGroups.entries())
+      .map(([, cityNodes]) => {
+        const node = cityNodes[0];
+        const name = node.meta_client_geo_city
+          ? `${node.meta_client_geo_city}, ${node.meta_client_geo_country}`
+          : (node.meta_client_geo_country ?? 'Unknown');
 
-      // Find the earliest seen time for this city group
-      const earliestSeenTime = Math.min(
-        ...cityNodes.map(n => n.seen_slot_start_diff ?? Infinity).filter(time => time !== Infinity)
-      );
+        // Find the earliest seen time for this city group
+        const earliestSeenTime = Math.min(
+          ...cityNodes.map(n => n.seen_slot_start_diff ?? Infinity).filter(time => time !== Infinity)
+        );
 
-      return {
-        name,
-        coords: [node.meta_client_geo_longitude ?? 0, node.meta_client_geo_latitude ?? 0] as [number, number],
-        value: cityNodes.length, // Number of nodes at this location
-        earliestSeenTime: earliestSeenTime === Infinity ? 0 : earliestSeenTime,
-      };
-    });
+        // Get coordinates - return null if invalid
+        const lon = node.meta_client_geo_longitude;
+        const lat = node.meta_client_geo_latitude;
+
+        return {
+          name,
+          coords: [lon ?? null, lat ?? null] as [number | null, number | null],
+          value: cityNodes.length, // Number of nodes at this location
+          earliestSeenTime: earliestSeenTime === Infinity ? 0 : earliestSeenTime,
+        };
+      })
+      .filter(point => {
+        // Filter out points with invalid coordinates or null island [0, 0]
+        return point.coords[0] != null && point.coords[1] != null && !(point.coords[0] === 0 && point.coords[1] === 0);
+      }) as MapPointWithTiming[];
   }, [nodes]);
 }
diff --git a/src/pages/ethereum/live/hooks/useSidebarData/useSidebarData.tsx b/src/pages/ethereum/live/hooks/useSidebarData/useSidebarData.tsx
@@ -42,15 +42,17 @@ export function useSidebarData({
     const allItems: TimelineItem[] = [];
 
     // 2. Block seen in locations - Group by city and take earliest
-    const cityFirstSeen = new Map<string, { timestamp: number; country: string }>();
+    const cityFirstSeen = new Map<string, { timestamp: number; location: string }>();
     blockNodes.forEach(node => {
-      const city = node.meta_client_geo_city ?? 'Unknown';
+      const city = node.meta_client_geo_city;
       const country = node.meta_client_geo_country ?? 'Unknown';
       const timestamp = node.seen_slot_start_diff ?? 0;
 
-      const key = `${city}, ${country}`;
-      if (!cityFirstSeen.has(key) || timestamp < cityFirstSeen.get(key)!.timestamp) {
-        cityFirstSeen.set(key, { timestamp, country });
+      // Format location: "City, Country" or just "Country" if city is missing
+      const location = city ? `${city}, ${country}` : country;
+
+      if (!cityFirstSeen.has(location) || timestamp < cityFirstSeen.get(location)!.timestamp) {
+        cityFirstSeen.set(location, { timestamp, location });
       }
     });
 
