Upload folder using huggingface_hub

components/SimulationGraph.tsx

@@ -7,10 +7,11 @@ import { GradioService } from '../services/gradioService';
 interface SimulationGraphProps {
   isBuilding: boolean;
   societyType: string;
+  viewMode: string;
   onStartChat?: () => void;
 }
 
-const SimulationGraph: React.FC<SimulationGraphProps> = ({ isBuilding, societyType, onStartChat }) => {
+const SimulationGraph: React.FC<SimulationGraphProps> = ({ isBuilding, societyType, viewMode, onStartChat }) => {
   const graphDiv = useRef<HTMLDivElement>(null);
   const [selectedProfile, setSelectedProfile] = useState<{ x: number, y: number, data: any } | null>(null);
 
@@ -87,7 +88,31 @@ const SimulationGraph: React.FC<SimulationGraphProps> = ({ isBuilding, societyTy
 
       const nodeX = nodes.map(n => n.x);
       const nodeY = nodes.map(n => n.y);
-      const nodeColor = nodes.map(n => n.connections || 0);
+      
+      // Determine node colors based on viewMode
+      const nodeColor = nodes.map(n => {
+        if (viewMode === 'Sentiment') {
+           const s = n.sentiment || 'Neutral';
+           if (s === 'Positive') return 1;
+           if (s === 'Negative') return 2;
+           if (s === 'Mixed') return 3;
+           return 0; // Neutral
+        }
+        if (viewMode === 'Activity Level') {
+           const a = n.activity || 'Lurker';
+           if (a === 'Power User') return 1;
+           if (a === 'Daily Active') return 2;
+           if (a === 'Weekly Active') return 3;
+           return 0; 
+        }
+        if (viewMode === 'Job Title') {
+           // Assign numeric index based on role string hash or predefined mapping
+           const roles = ["Founder", "Product Manager", "Engineer", "Investor", "Designer"];
+           const idx = roles.indexOf(n.role);
+           return idx >= 0 ? idx : (n.role ? n.role.length % 5 : 0);
+        }
+        return n.connections || 0;
+      });
 
       const edgeTrace = {
         x: edgeX,
@@ -142,7 +167,7 @@ const SimulationGraph: React.FC<SimulationGraphProps> = ({ isBuilding, societyTy
     };
 
     renderGraph();
-  }, [isBuilding, societyType]);
+  }, [isBuilding, societyType, viewMode]);
 
   return (
     <div className="relative w-full h-full bg-black">

components/SimulationPage.tsx

@@ -318,7 +318,12 @@ const SimulationPage: React.FC<SimulationPageProps> = ({
 
          {/* Graph Container */}
          <div className="flex-1 w-full h-full">
-            <SimulationGraph isBuilding={isBuilding} societyType={society} onStartChat={onOpenChat} />
+            <SimulationGraph 
+              isBuilding={isBuilding} 
+              societyType={society} 
+              viewMode={viewMode}
+              onStartChat={onOpenChat} 
+            />
          </div>
 
          {/* Modals */}