Add Netlify deployment configuration and update README with deployment instructions

README.md

@@ -186,10 +186,70 @@ The frontend will open at `http://localhost:3000`
 
 ### Netlify (React Frontend)
 
-1. Deploy frontend to Netlify (set base directory to `frontend`)
-2. Deploy backend to Railway/Render (set root directory to `backend`)
-3. Set `REACT_APP_API_URL` environment variable in Netlify to your backend URL
-4. Update CORS in backend to include your Netlify URL
+The frontend is configured for deployment on Netlify. The `netlify.toml` file in the root directory contains the build configuration.
+
+**Steps to Deploy:**
+
+1. **Push your code to GitHub** (if not already):
+   ```bash
+   git add .
+   git commit -m "Prepare for Netlify deployment"
+   git push origin main
+   ```
+
+2. **Connect to Netlify**:
+   - Go to [Netlify](https://app.netlify.com)
+   - Click "Add new site" → "Import an existing project"
+   - Connect your GitHub repository
+   - Netlify will auto-detect the `netlify.toml` configuration
+
+3. **Configure Environment Variables**:
+   - In Netlify dashboard, go to Site settings → Environment variables
+   - Add `REACT_APP_API_URL` with your backend URL (e.g., `https://your-backend.railway.app`)
+   - If using Hugging Face API, add `REACT_APP_HF_TOKEN` (optional)
+
+4. **Deploy Backend Separately**:
+   - Netlify doesn't support Python/FastAPI backends
+   - Deploy backend to one of these services:
+     - **Railway**: Recommended, easy setup
+     - **Render**: Free tier available
+     - **Fly.io**: Good for Python apps
+     - **Heroku**: Paid option
+   - Update CORS in `backend/api/main.py` to include your Netlify URL
+
+5. **Build Settings** (auto-detected from `netlify.toml`):
+   - Base directory: `frontend`
+   - Build command: `npm install && npm run build`
+   - Publish directory: `frontend/build`
+   - Node version: 18
+
+**Backend Deployment (Railway Example):**
+
+1. Create a new project on [Railway](https://railway.app)
+2. Connect your GitHub repository
+3. Set root directory to `backend`
+4. Railway will auto-detect Python and install dependencies
+5. Add environment variables if needed (HF_TOKEN, etc.)
+6. Railway will provide a URL like `https://your-app.railway.app`
+7. Use this URL as `REACT_APP_API_URL` in Netlify
+
+**CORS Configuration:**
+
+Update `backend/api/main.py` to allow your Netlify domain:
+```python
+from fastapi.middleware.cors import CORSMiddleware
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=[
+        "http://localhost:3000",  # Local development
+        "https://your-site.netlify.app",  # Your Netlify URL
+    ],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+```
 
 ## Architecture
 
@@ -229,8 +289,14 @@ The application uses:
 ## Performance Notes
 
 - **Full Dataset**: Loads all ~1.86 million models from the dataset
-- **Visualization Limit**: Maximum 50,000 points for smooth interaction (configurable via `max_points` API parameter)
-- **Level-of-Detail Rendering**: Frontend automatically samples to 10,000 points for 3D visualization while preserving family tree members
+- **Backend Sampling**: Requests up to 500,000 models from backend (configurable via `max_points` API parameter)
+- **Frontend Rendering**: 
+  - For datasets >400K: Shows 30% of models (up to 200K visible)
+  - For datasets 200K-400K: Shows 40% of models
+  - For datasets 100K-200K: Shows 50% of models
+  - For smaller datasets: Shows all models with adaptive spatial sparsity
+  - Uses instanced rendering for datasets >5K points
+  - Camera-based frustum culling and adaptive LOD for optimal performance
 - **Embedding Model**: `all-MiniLM-L6-v2` (good balance of quality and speed)
 - **Caching**: Embeddings and reduced dimensions are cached to disk for fast startup
 - **Optimizations**: Index-based lookups, vectorized operations, response compression, and optimized top-k queries

frontend/src/App.tsx

@@ -59,6 +59,12 @@ function App() {
   const [hoveredModel, setHoveredModel] = useState<ModelPoint | null>(null);
   const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
   
+  // Structural visualization options
+  const [showNetworkEdges, setShowNetworkEdges] = useState(false);
+  const [showStructuralGroups, setShowStructuralGroups] = useState(false);
+  const [overviewMode, setOverviewMode] = useState(false);
+  const [networkEdgeType, setNetworkEdgeType] = useState<'library' | 'pipeline' | 'combined'>('combined');
+  
   const activeFilterCount = (minDownloads > 0 ? 1 : 0) + 
                            (minLikes > 0 ? 1 : 0) + 
                            (searchQuery.length > 0 ? 1 : 0);
@@ -137,6 +143,11 @@ function App() {
         if (searchQuery) {
           params.append('search_query', searchQuery);
         }
+        
+        // Request a large number of models for better representation
+        // The backend will use stratified sampling if needed, and frontend will further optimize
+        // Set to 500K to get good coverage while allowing backend to optimize
+        params.append('max_points', '500000');
 
         const url = `${API_BASE}/api/models?${params}`;
         const response = await requestManager.fetch(url, {}, cacheKey);
@@ -346,7 +357,8 @@ function App() {
   }, []);
 
   return (
-    <div className="App">
+    <ErrorBoundary>
+      <div className="App">
       <header className="App-header">
         <h1>Anatomy of a Machine Learning Ecosystem: 2 Million Models on Hugging Face</h1>
         <p style={{ maxWidth: '900px', margin: '0 auto', lineHeight: '1.6' }}>
@@ -696,6 +708,78 @@ function App() {
             )}
           </div>
 
+          {/* Structural Visualization Options */}
+          {viewMode === '3d' && (
+            <div className="sidebar-section" style={{ background: '#f0f8f0', borderColor: '#90ee90' }}>
+              <h3>🔗 Structural Visualization</h3>
+              <div style={{ fontSize: '0.75rem', color: '#666', marginBottom: '1rem', lineHeight: '1.4' }}>
+                Explore relationships and structure in the model ecosystem
+              </div>
+              
+              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                <input
+                  type="checkbox"
+                  checked={overviewMode}
+                  onChange={(e) => setOverviewMode(e.target.checked)}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <div>
+                  <span style={{ fontWeight: '500' }}>🔍 Overview Mode</span>
+                  <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
+                    Zoom out to see full ecosystem structure with all relationships visible. Camera will automatically adjust.
+                  </div>
+                </div>
+              </label>
+
+              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                <input
+                  type="checkbox"
+                  checked={showNetworkEdges}
+                  onChange={(e) => setShowNetworkEdges(e.target.checked)}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <div>
+                  <span style={{ fontWeight: '500' }}>🌐 Network Relationships</span>
+                  <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
+                    Show connections between related models (same library, pipeline, or tags). Blue = library, Pink = pipeline.
+                  </div>
+                </div>
+              </label>
+
+              {showNetworkEdges && (
+                <div style={{ marginLeft: '1.5rem', marginBottom: '1rem', padding: '0.75rem', background: 'white', borderRadius: '4px', border: '1px solid #d0d0d0' }}>
+                  <label style={{ fontWeight: '500', display: 'block', marginBottom: '0.5rem', fontSize: '0.9rem' }}>
+                    Connection Type
+                  </label>
+                  <select 
+                    value={networkEdgeType} 
+                    onChange={(e) => setNetworkEdgeType(e.target.value as 'library' | 'pipeline' | 'combined')}
+                    style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #d0d0d0', fontSize: '0.85rem' }}
+                  >
+                    <option value="combined">Combined (library + pipeline + tags)</option>
+                    <option value="library">Library Only</option>
+                    <option value="pipeline">Pipeline Only</option>
+                  </select>
+                </div>
+              )}
+
+              <label style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
+                <input
+                  type="checkbox"
+                  checked={showStructuralGroups}
+                  onChange={(e) => setShowStructuralGroups(e.target.checked)}
+                  style={{ marginRight: '0.5rem', cursor: 'pointer' }}
+                />
+                <div>
+                  <span style={{ fontWeight: '500' }}>📦 Structural Groupings</span>
+                  <div style={{ fontSize: '0.75rem', color: '#666', marginTop: '0.25rem' }}>
+                    Highlight clusters and groups with wireframe boundaries. Shows top library and pipeline clusters.
+                  </div>
+                </div>
+              </label>
+            </div>
+          )}
+
           {/* Quick Filters */}
           <div className="sidebar-section">
             <h3>Quick Filters</h3>
@@ -967,6 +1051,10 @@ function App() {
                         sizeBy={sizeBy}
                         colorScheme={colorScheme}
                         showLegend={showLegend}
+                        showNetworkEdges={showNetworkEdges}
+                        showStructuralGroups={showStructuralGroups}
+                        overviewMode={overviewMode}
+                        networkEdgeType={networkEdgeType}
                         onPointClick={(model) => {
                           setSelectedModel(model);
                           setIsModalOpen(true);

frontend/src/components/ScatterPlot3D.tsx

@@ -24,6 +24,10 @@ interface ScatterPlot3DProps {
   sizeBy: string;
   colorScheme?: 'viridis' | 'plasma' | 'inferno' | 'magma' | 'coolwarm';
   showLegend?: boolean;
+  showNetworkEdges?: boolean;
+  showStructuralGroups?: boolean;
+  overviewMode?: boolean;
+  networkEdgeType?: 'library' | 'pipeline' | 'combined';
   onPointClick?: (model: ModelPoint) => void;
   selectedModelId?: string | null;
   onViewChange?: (center: { x: number; y: number; z: number }) => void;
@@ -78,9 +82,9 @@ const Point = memo(function Point({ position, color, size, model, isSelected, is
       meshRef.current.material.opacity = baseOpacity * distanceFactor;
     }
     
-    // Subtle animation for selected/family members
-    if (isSelected || isFamilyMember) {
-      meshRef.current.rotation.y += 0.01;
+      // Subtle animation for selected/family members
+      if (isSelected || isFamilyMember) {
+        meshRef.current.rotation.y += 0.01;
     }
     
     // Glow effect for selected/hovered points
@@ -132,23 +136,23 @@ const Point = memo(function Point({ position, color, size, model, isSelected, is
       )}
       
       {/* Main point */}
-      <mesh
-        ref={meshRef}
-        position={position}
-        onClick={onClick}
+    <mesh
+      ref={meshRef}
+      position={position}
+      onClick={onClick}
         onPointerOver={(e) => {
-          setHovered(true);
+        setHovered(true);
           if (onHover) {
             onHover(model, { 
               x: e.clientX, 
               y: e.clientY 
             });
           }
-        }}
-        onPointerOut={() => {
-          setHovered(false);
-          if (onHover) onHover(null);
-        }}
+      }}
+      onPointerOut={() => {
+        setHovered(false);
+        if (onHover) onHover(null);
+      }}
         onPointerMove={(e) => {
           if (hovered && onHover) {
             onHover(model, { 
@@ -160,16 +164,16 @@ const Point = memo(function Point({ position, color, size, model, isSelected, is
         frustumCulled={true}
       >
         <sphereGeometry args={[0.02, 12, 12]} />
-        <meshStandardMaterial
-          color={isSelected ? '#ffffff' : isFamilyMember ? '#4a4a4a' : color}
-          emissive={isSelected ? '#ffffff' : isFamilyMember ? '#6a6a6a' : '#000000'}
+      <meshStandardMaterial
+        color={isSelected ? '#ffffff' : isFamilyMember ? '#4a4a4a' : color}
+        emissive={isSelected ? '#ffffff' : isFamilyMember ? '#6a6a6a' : '#000000'}
           emissiveIntensity={isSelected ? 0.6 : isFamilyMember ? 0.2 : 0}
           metalness={0.3}
           roughness={0.7}
           opacity={0.9}
-          transparent
-        />
-      </mesh>
+        transparent
+      />
+    </mesh>
     </group>
   );
 }, (prevProps, nextProps) => {
@@ -235,11 +239,11 @@ function FamilyEdge({ start, end, parentColor, childColor, depth }: FamilyEdgePr
   return (
     <group>
       {/* Main edge with interpolated color - thicker and more visible */}
-      <Line
-        points={points}
+    <Line
+      points={points}
         color={interpolatedColor}
         lineWidth={lineWidth}
-        dashed={false}
+      dashed={false}
         transparent
         opacity={opacity}
       />
@@ -264,6 +268,10 @@ const SceneContent = memo(function SceneContent({
   colorBy,
   sizeBy,
   colorScheme = 'viridis',
+  showNetworkEdges = false,
+  showStructuralGroups = false,
+  overviewMode = false,
+  networkEdgeType = 'combined',
   onPointClick,
   selectedModelId,
   onHover,
@@ -320,35 +328,44 @@ const SceneContent = memo(function SceneContent({
     if (data.length > 10000 && spatialIndex && camera && gl) {
       // Use adaptive sampling based on distance from camera
       // When moving fast, reduce quality for better performance
-      const qualityFactor = isInteracting && movementSpeedRef.current > 0.01 ? 0.6 : 1.0;
-      const maxDistance = 15 * qualityFactor; // Increased view distance
+      const qualityFactor = isInteracting && movementSpeedRef.current > 0.01 ? 0.7 : 1.0; // Increased from 0.6
+      const maxDistance = 20 * qualityFactor; // Increased view distance from 15 to 20
       
-      // Sample based on distance - more aggressive for very large datasets
+      // Improved sampling strategy to show more models while maintaining performance
+      // Use higher sample rates to better represent the full dataset
       let distanceSampled: ModelPoint[];
-      if (others.length > 200000) {
-        // For extremely large datasets (>200K), use more aggressive sampling for sparsity
-        const sampleRate = qualityFactor * 0.15; // Sample 15% when not interacting (was 30%)
+      if (others.length > 400000) {
+        // For extremely large datasets (>400K), sample 30% (increased from 15%)
+        const sampleRate = qualityFactor * 0.3;
+        const step = Math.ceil(1 / sampleRate);
+        distanceSampled = [];
+        for (let i = 0; i < others.length; i += step) {
+          distanceSampled.push(others[i]);
+        }
+      } else if (others.length > 200000) {
+        // For very large datasets (200K-400K), sample 40% (increased from 15%)
+        const sampleRate = qualityFactor * 0.4;
         const step = Math.ceil(1 / sampleRate);
         distanceSampled = [];
         for (let i = 0; i < others.length; i += step) {
           distanceSampled.push(others[i]);
         }
       } else if (others.length > 100000) {
-        // For large datasets (100K-200K), sample 20%
-        const sampleRate = qualityFactor * 0.2;
+        // For large datasets (100K-200K), sample 50% (increased from 20%)
+        const sampleRate = qualityFactor * 0.5;
         const step = Math.ceil(1 / sampleRate);
         distanceSampled = [];
         for (let i = 0; i < others.length; i += step) {
           distanceSampled.push(others[i]);
         }
       } else {
-        // Use adaptive sampling with reduced rate for more sparsity
-        distanceSampled = adaptiveSampleByDistance(others, camera, qualityFactor * 0.7, maxDistance);
+        // Use adaptive sampling with higher rate for better representation
+        distanceSampled = adaptiveSampleByDistance(others, camera, qualityFactor * 0.85, maxDistance); // Increased from 0.7
       }
       
       // Apply frustum culling if camera is available
-      // Increased limit for instanced rendering (can handle more)
-      const maxVisible = Math.min(distanceSampled.length, 100000); // Increased from 20K to 100K
+      // Increased limit for instanced rendering (can handle more with better sampling)
+      const maxVisible = Math.min(distanceSampled.length, 200000); // Increased from 100K to 200K
       let visible: ModelPoint[];
       try {
         visible = filterVisiblePoints(
@@ -356,7 +373,7 @@ const SceneContent = memo(function SceneContent({
           camera, 
           gl, 
           maxDistance, 
-          0.02 // Lower LOD threshold to show more points
+          0.01 // Lower LOD threshold to show more points (was 0.02)
         );
       } catch (e) {
         // Fallback if frustum calculation fails
@@ -364,11 +381,12 @@ const SceneContent = memo(function SceneContent({
       }
       
       // Apply spatial sparsity to reduce density and improve navigability
+      // But be less aggressive to show more models
       const combined = [...important, ...visible];
-      if (combined.length > 3000) { // Lower threshold for sparsity application
+      if (combined.length > 5000) { // Increased threshold from 3000
         // Calculate adaptive minimum distance based on data spread
         const avgDistance = calculateAverageDistance(combined);
-        const sparsityFactor = getAdaptiveSparsityFactor(combined.length) * 1.5; // Increase sparsity by 50%
+        const sparsityFactor = getAdaptiveSparsityFactor(combined.length) * 1.2; // Reduced from 1.5 to show more
         const minDistance = avgDistance * sparsityFactor;
         
         if (minDistance > 0) {
@@ -380,13 +398,14 @@ const SceneContent = memo(function SceneContent({
     }
     
     // For smaller datasets, use simple sampling with sparsity
-    // Reduced render limit for better sparsity and navigability
-    const renderLimit = data.length > 100000 ? 100000 : data.length; // Reduced from 200K to 100K
+    // Increased render limit to show more models
+    const renderLimit = data.length > 200000 ? 200000 : data.length; // Increased from 100K to 200K
     if (data.length <= renderLimit) {
       // Still apply sparsity even if under limit for better navigability
-      if (data.length > 3000) {
+      // But be less aggressive to show more models
+      if (data.length > 5000) { // Increased threshold from 3000
         const avgDistance = calculateAverageDistance(data);
-        const sparsityFactor = getAdaptiveSparsityFactor(data.length) * 1.5;
+        const sparsityFactor = getAdaptiveSparsityFactor(data.length) * 1.2; // Reduced from 1.5
         const minDistance = avgDistance * sparsityFactor;
         if (minDistance > 0) {
           return applySpatialSparsity(data, minDistance, importantIds);
@@ -432,7 +451,7 @@ const SceneContent = memo(function SceneContent({
     colorScheme: string;
     scales: any;
   } | null>(null);
-  
+
   const { xScale, yScale, zScale, colorScale, sizeScale, familyMap } = useMemo(() => {
     // Return cached scales if inputs haven't changed
     if (scalesCacheRef.current &&
@@ -651,6 +670,193 @@ const SceneContent = memo(function SceneContent({
     return edges;
   }, [familyTree, xScale, yScale, zScale, colorScheme]);
 
+  // Build network edges (co-occurrence relationships)
+  const networkEdges = useMemo(() => {
+    if (!showNetworkEdges || sampledData.length === 0) return [];
+    
+    const edges: Array<{
+      start: [number, number, number];
+      end: [number, number, number];
+      weight: number;
+      type: string;
+    }> = [];
+    
+    // Create a map for quick lookups
+    const modelMap = new Map(sampledData.map(m => [m.model_id, m]));
+    
+    // Group models by library, pipeline, or both
+    const groups = new Map<string, ModelPoint[]>();
+    
+    sampledData.forEach(model => {
+      if (networkEdgeType === 'library' || networkEdgeType === 'combined') {
+        const key = `lib:${model.library_name || 'unknown'}`;
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key)!.push(model);
+      }
+      if (networkEdgeType === 'pipeline' || networkEdgeType === 'combined') {
+        const key = `pipe:${model.pipeline_tag || 'unknown'}`;
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key)!.push(model);
+      }
+    });
+    
+    // Create edges between models in the same group
+    // Limit to avoid performance issues - only connect nearby models
+    const maxConnectionsPerModel = overviewMode ? 5 : 3;
+    const maxDistance = overviewMode ? 0.5 : 0.3; // Distance threshold in normalized space
+    
+    groups.forEach((models, groupKey) => {
+      if (models.length < 2) return;
+      
+      // For large groups, sample connections
+      const modelsToConnect = models.length > 50 
+        ? models.filter((_, i) => i % Math.ceil(models.length / 50) === 0)
+        : models;
+      
+      for (let i = 0; i < modelsToConnect.length; i++) {
+        const model1 = modelsToConnect[i];
+        let connections = 0;
+        
+        for (let j = i + 1; j < modelsToConnect.length && connections < maxConnectionsPerModel; j++) {
+          const model2 = modelsToConnect[j];
+          
+          // Calculate distance in normalized space
+          const dx = model1.x - model2.x;
+          const dy = model1.y - model2.y;
+          const dz = model1.z - model2.z;
+          const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          
+          if (distance < maxDistance) {
+            edges.push({
+              start: [xScale(model1.x), yScale(model1.y), zScale(model1.z)],
+              end: [xScale(model2.x), yScale(model2.y), zScale(model2.z)],
+              weight: 1 - (distance / maxDistance), // Higher weight for closer models
+              type: groupKey.startsWith('lib:') ? 'library' : 'pipeline',
+            });
+            connections++;
+          }
+        }
+      }
+    });
+    
+    return edges;
+  }, [showNetworkEdges, sampledData, networkEdgeType, overviewMode, xScale, yScale, zScale]);
+
+  // Build structural groupings (library/pipeline clusters)
+  const structuralGroups = useMemo(() => {
+    if (!showStructuralGroups || sampledData.length === 0) return [];
+    
+    const groups: Array<{
+      models: ModelPoint[];
+      type: 'library' | 'pipeline';
+      name: string;
+      color: string;
+      center: [number, number, number];
+    }> = [];
+    
+    // Group by library
+    const libraryGroups = new Map<string, ModelPoint[]>();
+    sampledData.forEach(model => {
+      const lib = model.library_name || 'unknown';
+      if (!libraryGroups.has(lib)) libraryGroups.set(lib, []);
+      libraryGroups.get(lib)!.push(model);
+    });
+    
+    // Group by pipeline
+    const pipelineGroups = new Map<string, ModelPoint[]>();
+    sampledData.forEach(model => {
+      const pipe = model.pipeline_tag || 'unknown';
+      if (!pipelineGroups.has(pipe)) pipelineGroups.set(pipe, []);
+      pipelineGroups.get(pipe)!.push(model);
+    });
+    
+    // Only show groups with multiple models and reasonable size
+    const minGroupSize = overviewMode ? 3 : 5;
+    const maxGroups = overviewMode ? 20 : 10;
+    
+    // Process library groups
+    const sortedLibGroups = Array.from(libraryGroups.entries())
+      .filter(([_, models]) => models.length >= minGroupSize)
+      .sort((a, b) => b[1].length - a[1].length)
+      .slice(0, maxGroups);
+    
+    sortedLibGroups.forEach(([name, models]) => {
+      // Calculate center
+      const centerX = models.reduce((sum, m) => sum + m.x, 0) / models.length;
+      const centerY = models.reduce((sum, m) => sum + m.y, 0) / models.length;
+      const centerZ = models.reduce((sum, m) => sum + m.z, 0) / models.length;
+      
+      groups.push({
+        models,
+        type: 'library',
+        name,
+        color: '#4a90e2',
+        center: [xScale(centerX), yScale(centerY), zScale(centerZ)],
+      });
+    });
+    
+    // Process pipeline groups
+    const sortedPipeGroups = Array.from(pipelineGroups.entries())
+      .filter(([_, models]) => models.length >= minGroupSize)
+      .sort((a, b) => b[1].length - a[1].length)
+      .slice(0, maxGroups);
+    
+    sortedPipeGroups.forEach(([name, models]) => {
+      const centerX = models.reduce((sum, m) => sum + m.x, 0) / models.length;
+      const centerY = models.reduce((sum, m) => sum + m.y, 0) / models.length;
+      const centerZ = models.reduce((sum, m) => sum + m.z, 0) / models.length;
+      
+      groups.push({
+        models,
+        type: 'pipeline',
+        name,
+        color: '#e24a90',
+        center: [xScale(centerX), yScale(centerY), zScale(centerZ)],
+      });
+    });
+    
+    return groups;
+  }, [showStructuralGroups, sampledData, overviewMode, xScale, yScale, zScale]);
+
+  // Adjust camera for overview mode
+  useEffect(() => {
+    if (!camera) return;
+    
+    const currentPos = new THREE.Vector3();
+    camera.getWorldPosition(currentPos);
+    const distance = currentPos.length();
+    
+    if (overviewMode) {
+      // Move camera further back to see more of the scene
+      const newDistance = Math.max(distance, 8); // Minimum distance for overview
+      
+      if (newDistance > distance) {
+        // Smoothly animate camera back
+        const targetPos = currentPos.clone().normalize().multiplyScalar(newDistance);
+        const startPos = currentPos.clone();
+        const duration = 1000; // 1 second
+        const startTime = Date.now();
+        
+        const animate = () => {
+          const elapsed = Date.now() - startTime;
+          const progress = Math.min(elapsed / duration, 1);
+          const eased = 1 - Math.pow(1 - progress, 3); // Ease out cubic
+          
+          const pos = startPos.clone().lerp(targetPos, eased);
+          camera.position.copy(pos);
+          
+          if (progress < 1) {
+            requestAnimationFrame(animate);
+          }
+        };
+        
+        animate();
+      }
+    }
+    // Note: When overview mode is disabled, user can manually zoom back in
+    // We don't force camera position to avoid disrupting user's navigation
+  }, [overviewMode, camera]);
+
   return (
     <>
       <ambientLight intensity={0.5} />
@@ -660,6 +866,64 @@ const SceneContent = memo(function SceneContent({
       {/* Grid for orientation - using custom grid to avoid deprecation warnings */}
       <gridHelper args={[10, 10, '#6a6a6a', '#4a4a4a']} />
 
+      {/* Network edges (co-occurrence relationships) */}
+      {networkEdges.length > 0 && (
+        <group>
+          {networkEdges.slice(0, overviewMode ? networkEdges.length : Math.min(networkEdges.length, 5000)).map((edge, i) => (
+            <Line
+              key={`network-${i}`}
+              points={[new THREE.Vector3(...edge.start), new THREE.Vector3(...edge.end)]}
+              color={edge.type === 'library' ? '#4a90e2' : '#e24a90'}
+              lineWidth={overviewMode ? 1.5 : 1}
+              transparent
+              opacity={overviewMode ? 0.2 * edge.weight : 0.3 * edge.weight}
+              dashed={false}
+            />
+          ))}
+        </group>
+      )}
+
+      {/* Structural groupings - show cluster centers and boundaries */}
+      {structuralGroups.map((group, i) => {
+        // Calculate bounding sphere radius from center
+        let maxRadius = 0;
+        group.models.forEach(model => {
+          const modelPos = [
+            xScale(model.x),
+            yScale(model.y),
+            zScale(model.z)
+          ];
+          const dx = modelPos[0] - group.center[0];
+          const dy = modelPos[1] - group.center[1];
+          const dz = modelPos[2] - group.center[2];
+          const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+          maxRadius = Math.max(maxRadius, distance);
+        });
+        
+        // Add some padding
+        const radius = Math.max(maxRadius * 1.2, 0.2);
+
+        return (
+          <group key={`group-${group.type}-${i}`}>
+            {/* Group center marker */}
+            <mesh position={group.center}>
+              <sphereGeometry args={[0.05, 8, 8]} />
+              <meshBasicMaterial color={group.color} transparent opacity={0.6} />
+            </mesh>
+            {/* Bounding sphere (wireframe) */}
+            <mesh position={group.center}>
+              <sphereGeometry args={[radius, 16, 16]} />
+              <meshBasicMaterial 
+                color={group.color} 
+                wireframe 
+                transparent 
+                opacity={0.15}
+              />
+            </mesh>
+          </group>
+        );
+      })}
+
       {/* Family tree edges with gradient and animation */}
       {familyEdges.map((edge, i) => (
         <FamilyEdge
@@ -690,22 +954,22 @@ const SceneContent = memo(function SceneContent({
         />
       ) : (
         sampledData.map((model) => {
-          const isFamilyMember = familyMap.has(model.model_id);
-          const isSelected = selectedModelId === model.model_id;
-          
-          return (
-            <Point
-              key={model.model_id}
-              position={[xScale(model.x), yScale(model.y), zScale(model.z)]}
-              color={colorScale(model)}
-              size={sizeScale(model)}
-              model={model}
-              isSelected={isSelected}
-              isFamilyMember={isFamilyMember}
-              onClick={() => onPointClick?.(model)}
-              onHover={onHover}
-            />
-          );
+        const isFamilyMember = familyMap.has(model.model_id);
+        const isSelected = selectedModelId === model.model_id;
+        
+        return (
+          <Point
+            key={model.model_id}
+            position={[xScale(model.x), yScale(model.y), zScale(model.z)]}
+            color={colorScale(model)}
+            size={sizeScale(model)}
+            model={model}
+            isSelected={isSelected}
+            isFamilyMember={isFamilyMember}
+            onClick={() => onPointClick?.(model)}
+            onHover={onHover}
+          />
+        );
         })
       )}
 
@@ -722,6 +986,10 @@ const SceneContent = memo(function SceneContent({
     prevProps.colorScheme === nextProps.colorScheme &&
     prevProps.selectedModelId === nextProps.selectedModelId &&
     prevProps.isInteracting === nextProps.isInteracting &&
+    prevProps.showNetworkEdges === nextProps.showNetworkEdges &&
+    prevProps.showStructuralGroups === nextProps.showStructuralGroups &&
+    prevProps.overviewMode === nextProps.overviewMode &&
+    prevProps.networkEdgeType === nextProps.networkEdgeType &&
     (prevProps.familyTree?.length || 0) === (nextProps.familyTree?.length || 0)
   );
 });
@@ -781,6 +1049,10 @@ export default function ScatterPlot3D({
   sizeBy,
   colorScheme = 'viridis',
   showLegend = true,
+  showNetworkEdges = false,
+  showStructuralGroups = false,
+  overviewMode = false,
+  networkEdgeType = 'combined',
   onPointClick,
   selectedModelId,
   onViewChange,
@@ -891,7 +1163,7 @@ export default function ScatterPlot3D({
           enableZoom={true}
           enableRotate={true}
           minDistance={1}
-          maxDistance={10}
+          maxDistance={overviewMode ? 15 : 10}
           enableDamping={true}
           dampingFactor={0.05}
         />
@@ -902,6 +1174,10 @@ export default function ScatterPlot3D({
           colorBy={colorBy}
           sizeBy={sizeBy}
           colorScheme={colorScheme}
+          showNetworkEdges={showNetworkEdges}
+          showStructuralGroups={showStructuralGroups}
+          overviewMode={overviewMode}
+          networkEdgeType={networkEdgeType}
           onPointClick={onPointClick}
           selectedModelId={selectedModelId}
           onHover={onHover}
@@ -924,6 +1200,37 @@ export default function ScatterPlot3D({
       >
         <strong>3D Navigation:</strong> Click + drag to rotate | Scroll to zoom | Right-click + drag to pan
       </div>
+      {(overviewMode || showNetworkEdges || showStructuralGroups) && (
+        <div
+          style={{
+            position: 'absolute',
+            top: 10,
+            right: 10,
+            fontSize: '11px',
+            color: '#2c5f2d',
+            backgroundColor: 'rgba(240, 248, 240, 0.95)',
+            padding: '6px 10px',
+            borderRadius: '4px',
+            border: '1px solid #90ee90',
+            fontFamily: "'Vend Sans', sans-serif",
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '4px',
+          }}
+        >
+          {overviewMode && (
+            <div style={{ fontWeight: '600' }}>🔍 Overview Mode Active</div>
+          )}
+          {showNetworkEdges && (
+            <div style={{ fontSize: '10px' }}>
+              Network: {networkEdgeType === 'combined' ? 'Library + Pipeline' : networkEdgeType}
+            </div>
+          )}
+          {showStructuralGroups && (
+            <div style={{ fontSize: '10px' }}>Structural Groups: Library & Pipeline clusters</div>
+          )}
+        </div>
+      )}
     </div>
   );
 }

netlify.toml

@@ -5,23 +5,21 @@
 
 [build.environment]
   NODE_VERSION = "18"
+  # Set this to your backend URL (Railway, Render, etc.)
+  # REACT_APP_API_URL = "https://your-backend-url.railway.app"
 
-# Redirect all routes to index.html for React Router
+# Redirect all routes to index.html for React Router (SPA routing)
 [[redirects]]
   from = "/*"
   to = "/index.html"
   status = 200
 
-# Netlify Functions (if using serverless backend)
-[functions]
-  directory = "netlify-functions"
-  node_bundler = "esbuild"
-
-# Headers for API routes
+# Security headers
 [[headers]]
-  for = "/.netlify/functions/*"
+  for = "/*"
   [headers.values]
-    Access-Control-Allow-Origin = "*"
-    Access-Control-Allow-Headers = "Content-Type"
-    Access-Control-Allow-Methods = "GET, POST, OPTIONS"
+    X-Frame-Options = "DENY"
+    X-XSS-Protection = "1; mode=block"
+    X-Content-Type-Options = "nosniff"
+    Referrer-Policy = "strict-origin-when-cross-origin"