Merge pull request #20 from grassrootseconomics/williamluke4/3d-globe-geo-view

feat: add 3D globe geographic view with real map data

Author: williamluke4

components/dashboard/Dashboard.tsx

@@ -9,6 +9,7 @@ import useSWR from "swr";
 import { GearIcon, PauseIcon, PlayIcon } from "@components/icons";
 import { NetworkGraph2d } from "@components/network-graph/network-graph-2d";
 import { NetworkGraph3d } from "@components/network-graph/network-graph-3d";
+import { NetworkGlobe } from "@components/network-graph/network-globe";
 
 import { FieldReportsOverlay } from "./FieldReportsOverlay";
 import { InfoPanel, type SelectedInfo } from "./InfoPanel";
@@ -19,7 +20,9 @@ import { TimelineBar } from "./TimelineBar";
 import { useFieldReports, useImagePreloader } from "@/hooks/dashboard";
 import type { DataResponse } from "@/pages/api/data";
 import type { FieldReportsResponse, Pool, PoolsResponse } from "@/types";
+import type { GlobeDataResponse, GlobePoint, GlobeArc } from "@/types/globe";
 import type { Voucher } from "@/types/voucher";
+import type { GraphType } from "./sections/DisplaySection";
 
 // Fetcher function for SWR
 const fetcher = (url: string) => fetch(url).then((res) => res.json());
@@ -63,7 +66,17 @@ export function Dashboard() {
 
   // Panel states
   const [optionsOpen, setOptionsOpen] = React.useState(false);
-  const [graphType, setGraphType] = React.useState<"2D" | "3D">("2D");
+  const [graphType, setGraphType] = React.useState<GraphType>("2D");
+
+  // Fetch globe geo data (only when Globe view is active)
+  const { data: geoData } = useSWR<GlobeDataResponse>(
+    graphType === "Globe" ? "/api/geo" : null,
+    fetcher,
+    {
+      refreshInterval: 5 * 60 * 1000,
+      revalidateOnFocus: false,
+    }
+  );
   const [showTimelineBar, setShowTimelineBar] = React.useState(true);
 
   // Pool filtering
@@ -391,6 +404,36 @@ export function Dashboard() {
     });
   }, []);
 
+  const handleGlobePointClick = React.useCallback((point: GlobePoint) => {
+    if (point.type === "account") {
+      setSelectedInfo({
+        type: "node",
+        data: {
+          id: point.id,
+          value: point.value,
+          usedVouchers: {},
+        },
+      });
+    }
+  }, []);
+
+  const handleGlobeArcClick = React.useCallback((arc: GlobeArc) => {
+    setSelectedInfo({
+      type: "link",
+      data: {
+        source: arc.sourceId,
+        target: arc.targetId,
+        token_name: arc.tokenName,
+        token_symbol: arc.tokenSymbol,
+        contract_address: arc.contractAddress,
+        txCount: arc.txCount,
+        value: arc.value,
+        date: arc.date,
+        dateFirst: arc.dateFirst,
+      },
+    });
+  }, []);
+
   const copyToClipboard = React.useCallback((text: string, field: string) => {
     navigator.clipboard.writeText(text);
     setCopiedField(field);
@@ -522,8 +565,25 @@ export function Dashboard() {
         />
       )}
 
-      {/* Graph */}
-      {graphData && graphType === "2D" ? (
+      {/* Graph / Globe */}
+      {graphType === "Globe" ? (
+        <NetworkGlobe
+          globeData={
+            geoData?.globeData ?? {
+              points: [],
+              arcs: [],
+              unmappedAccountCount: 0,
+              totalAccountCount: 0,
+            }
+          }
+          animate={animate}
+          selectedVoucherAddresses={selectedVoucherAddresses}
+          currentDate={date}
+          showRecentOnly={showRecentOnly}
+          onPointClick={handleGlobePointClick}
+          onArcClick={handleGlobeArcClick}
+        />
+      ) : graphType === "2D" ? (
         <NetworkGraph2d
           animate={animate}
           graphData={graphData}

components/dashboard/SettingsPanel.tsx

@@ -12,6 +12,7 @@ import {
   DisplaySection,
   PhysicsSection,
 } from "./sections";
+import type { GraphType } from "./sections/DisplaySection";
 import type { TimelineBucket } from "./sections";
 import type { Pool } from "@/types";
 import type { Voucher } from "@/types/voucher";
@@ -60,8 +61,8 @@ export interface SettingsPanelProps {
   timelineHistogram: TimelineBucket[];
 
   // Display
-  graphType: "2D" | "3D";
-  setGraphType: (type: "2D" | "3D") => void;
+  graphType: GraphType;
+  setGraphType: (type: GraphType) => void;
   showRecentOnly: boolean;
   setShowRecentOnly: (show: boolean) => void;
   showTimelineBar: boolean;
@@ -183,16 +184,18 @@ export function SettingsPanel({
           setShowReports={setShowReports}
         />
 
-        {/* Physics Section */}
-        <PhysicsSection
-          expanded={expandedSections.physics}
-          onToggle={() => toggleSection("physics")}
-          inputs={physicsInputs}
-          setChargeStrengthInput={setChargeStrengthInput}
-          setLinkDistanceInput={setLinkDistanceInput}
-          setCenterGravityInput={setCenterGravityInput}
-          resetToDefaults={resetPhysicsToDefaults}
-        />
+        {/* Physics Section (hidden for Globe view - no force simulation) */}
+        {graphType !== "Globe" && (
+          <PhysicsSection
+            expanded={expandedSections.physics}
+            onToggle={() => toggleSection("physics")}
+            inputs={physicsInputs}
+            setChargeStrengthInput={setChargeStrengthInput}
+            setLinkDistanceInput={setLinkDistanceInput}
+            setCenterGravityInput={setCenterGravityInput}
+            resetToDefaults={resetPhysicsToDefaults}
+          />
+        )}
       </div>
 
       {/* Footer */}

components/dashboard/sections/DisplaySection.tsx

@@ -5,11 +5,13 @@
 import React from "react";
 import { ChevronDownIcon } from "@components/icons";
 
+export type GraphType = "2D" | "3D" | "Globe";
+
 export interface DisplaySectionProps {
   expanded: boolean;
   onToggle: () => void;
-  graphType: "2D" | "3D";
-  setGraphType: (type: "2D" | "3D") => void;
+  graphType: GraphType;
+  setGraphType: (type: GraphType) => void;
   showRecentOnly: boolean;
   setShowRecentOnly: (show: boolean) => void;
   showTimelineBar: boolean;
@@ -50,26 +52,19 @@ export function DisplaySection({
               Graph View
             </label>
             <div className="flex gap-2">
-              <button
-                className={`flex-1 px-4 py-2.5 sm:py-2 rounded-md font-medium transition-colors ${
-                  graphType === "2D"
-                    ? "bg-emerald-500 text-white"
-                    : "bg-white/5 text-gray-400 hover:bg-white/10"
-                }`}
-                onClick={() => setGraphType("2D")}
-              >
-                2D View
-              </button>
-              <button
-                className={`flex-1 px-4 py-2.5 sm:py-2 rounded-md font-medium transition-colors ${
-                  graphType === "3D"
-                    ? "bg-emerald-500 text-white"
-                    : "bg-white/5 text-gray-400 hover:bg-white/10"
-                }`}
-                onClick={() => setGraphType("3D")}
-              >
-                3D View
-              </button>
+              {(["2D", "3D", "Globe"] as const).map((type) => (
+                <button
+                  key={type}
+                  className={`flex-1 px-4 py-2.5 sm:py-2 rounded-md font-medium transition-colors ${
+                    graphType === type
+                      ? "bg-emerald-500 text-white"
+                      : "bg-white/5 text-gray-400 hover:bg-white/10"
+                  }`}
+                  onClick={() => setGraphType(type)}
+                >
+                  {type === "Globe" ? "Globe" : `${type} View`}
+                </button>
+              ))}
             </div>
           </div>
 

components/dashboard/sections/index.ts

@@ -12,7 +12,7 @@ export { AnimationSection } from "./AnimationSection";
 export type { AnimationSectionProps, TimelineBucket } from "./AnimationSection";
 
 export { DisplaySection } from "./DisplaySection";
-export type { DisplaySectionProps } from "./DisplaySection";
+export type { DisplaySectionProps, GraphType } from "./DisplaySection";
 
 export { PhysicsSection } from "./PhysicsSection";
 export type { PhysicsSectionProps } from "./PhysicsSection";