Add network pre-computation, styling improvements, and theme toggle

- Add precompute_network.py and upload_network_to_hf.py scripts
- Update network endpoints to support pre-computed graphs and HF Hub download
- Add theme toggle with system preference detection
- Improve force-directed graph styling and controls
- Add rounded point rendering for embeddings view
- Update API retry logic for 429 errors
- Add comprehensive UI controls for FDG (color by, size by, family filter, search)
- Update documentation

APP_ANALYSIS.md

@@ -269,3 +269,4 @@
 **Last Updated**: Based on current codebase analysis
 **Status**: Ready for deployment pending data generation completion
 
+

DEPLOYMENT_COMPLETE.md

@@ -178,3 +178,4 @@ ps aux | grep precompute_data.py
 
 The chunked embedding system is fully deployed and ready. The server will automatically use chunked mode once production data completes. You can start using it now with test data!
 
+

DEPLOYMENT_STATUS.md

@@ -134,3 +134,4 @@ nohup python scripts/precompute_data.py --sample-size 0 --chunked --chunk-size 5
 
 The chunked embedding system is fully implemented and tested. The full precompute is running and will complete in a few hours. Once complete, the server will automatically use chunked mode for fast startup and efficient memory usage.
 
+

DEPLOY_TO_HF_SPACES.md

@@ -159,3 +159,4 @@ When you update data:
 
 **Note**: The Space automatically downloads chunked data from the Hugging Face Dataset. No need to include data files in the Space repository!
 
+

FDG_DESIGN_ANALYSIS.md

@@ -0,0 +1,113 @@
+# Force-Directed Graph Design Analysis
+
+## ✅ IMPLEMENTATION COMPLETE
+
+All priority improvements have been implemented. The force-directed graph is now fully harmonized with the embeddings view.
+
+---
+
+## Current State (After Improvements)
+
+### ✅ What Works Well
+
+1. **3D Visualization**
+   - Fully 3D using Three.js/React Three Fiber
+   - Same Canvas setup as embeddings view
+   - OrbitControls for navigation (pan, zoom, rotate)
+   - Consistent camera controls
+
+2. **Design Consistency**
+   - Same background color (`#1a1a1a`)
+   - Same hover/selection states (red for selected, yellow for hovered, cyan for highlighted)
+   - Same container styling
+   - Consistent with app theme
+
+3. **Performance**
+   - Instanced rendering for large graphs (>10k nodes)
+   - Efficient filtering by edge types, family, and search
+   - Optimized for up to 500k nodes
+
+4. **✅ Full Filtering (NEW)**
+   - Edge type filter (show/hide relationship types)
+   - Family/organization filter dropdown
+   - Search by model ID with highlighting
+   - Nodes filtered to only show connected nodes when edge types are filtered
+
+5. **✅ Color/Style Options (NEW)**
+   - Color By: ML Library, Task Type, Downloads, Likes, Edge Type
+   - Size By: Downloads, Likes, Uniform Size
+   - Color Schemes: Viridis, Plasma, Inferno, Cool-Warm
+   - Uses same color utilities as embeddings view
+
+## Comparison: Embeddings vs FDG (Updated)
+
+| Feature | Embeddings View | FDG View | Status |
+|---------|----------------|----------|--------|
+| 3D Visualization | ✅ | ✅ | ✅ Consistent |
+| Color By Options | ✅ (5 options) | ✅ (5 options) | ✅ Harmonized |
+| Size By Options | ✅ (3 options) | ✅ (3 options) | ✅ Harmonized |
+| Color Schemes | ✅ (4 options) | ✅ (4 options) | ✅ Harmonized |
+| Search Integration | ✅ | ✅ | ✅ Added |
+| Filter by Family | ✅ | ✅ | ✅ Added |
+| Highlight Model | ✅ | ✅ | ✅ Added |
+| Edge Type Filter | N/A | ✅ | ✅ Unique |
+| Force Parameters | N/A | ✅ | ✅ Unique |
+
+## Implementation Status
+
+### ✅ Phase 1: Design Harmony (COMPLETE)
+- [x] Add Color By selector to FDG controls
+- [x] Add Size By selector to FDG controls
+- [x] Integrate color utilities from embeddings view
+- [x] Add color scheme selector for gradients
+
+### ✅ Phase 2: Search & Filtering (COMPLETE)
+- [x] Add search bar to FDG view
+- [x] Implement model search with highlighting
+- [x] Add family/organization filter dropdown
+- [x] Filters apply to both nodes AND edges
+
+### 📋 Phase 3: Future Enhancements (Optional)
+- [ ] Implement N-hop neighbor filtering
+- [ ] Add "focus on node" mode (zoom to node)
+- [ ] Add path highlighting between nodes
+- [ ] Add subgraph isolation controls
+
+## Files Modified
+
+- `ForceDirectedGraph3D.tsx` - Added colorBy, sizeBy, colorScheme, familyFilter, searchQuery, highlightedNodeId props
+- `ForceDirectedGraph3DInstanced.tsx` - Same props + filtering logic
+- `App.tsx` - Added controls UI, state management, props passing
+- `App.css` - Added graph search input styles
+
+## User Guide
+
+### Controls in Force-directed Graph Mode:
+
+**Color By** - Change node colors
+- ML Library: Different colors per framework
+- Task Type: Different colors per pipeline tag
+- Downloads/Likes: Gradient color scale
+- Edge Type: Color by relationship type
+
+**Size By** - Change node sizes
+- By Downloads: Larger = more downloads
+- By Likes: Larger = more likes
+- Uniform: Same size for all
+
+**Family Filter** - Filter by organization
+- Select from top 100 organizations
+- Filters both nodes AND edges
+
+**Search** - Find and highlight models
+- Type to filter matching nodes
+- First match is highlighted in cyan
+- Clear button to reset
+
+**Edge Types** - Show/hide relationship types
+- Fine-tuned, Quantized, Adapter, Merged, Parent
+
+**Settings** - Force simulation parameters
+- Link Distance, Charge Strength, Collision Radius
+- Node Size Multiplier, Edge Opacity
+

FORCE_DIRECTED_STATUS.md

@@ -167,3 +167,4 @@
 - Force parameters (hardcoded): `ForceDirectedGraph.tsx` lines 148-179
 - Edge type controls (reference): `GraphPage.tsx` lines 562-598
 
+

HF_SPACES_DEPLOYMENT.md

@@ -228,3 +228,4 @@ When you need to update the precomputed data:
 
 **Note**: The Space will automatically download chunked data from the Hugging Face Dataset on startup. No manual data upload to the Space repository is needed!
 
+

HF_SPACES_READY.md

@@ -150,3 +150,4 @@ After deployment, check:
 
 **Everything is ready!** Once the precompute completes and data is uploaded, you can deploy to Hugging Face Spaces and it will work without any local access needed.
 
+

HOW_TO_RUN.md

@@ -115,3 +115,4 @@ Press `Ctrl+C` in the terminal where the server is running, or:
 pkill -f "uvicorn api.main:app"
 ```
 
+

PRODUCTION_DEPLOYMENT.md

@@ -219,3 +219,4 @@ After successful deployment:
 - `SCALING_QUICKSTART.md` - Quick start guide
 - `SCALING_SUMMARY.md` - Implementation summary
 
+

README_SPACE.md

@@ -76,3 +76,4 @@ This Space automatically:
 - **Paper**: [arXiv:2508.06811](https://arxiv.org/abs/2508.06811)
 - **Dataset**: [modelbiome/ai_ecosystem](https://huggingface.co/datasets/modelbiome/ai_ecosystem)
 
+

SCALING_EMBEDDINGS_STRATEGY.md

@@ -287,3 +287,4 @@ async def get_models(
 4. **Compression**: Use better compression (zstd) for parquet files
 5. **Quantization**: Use int8 embeddings (50% memory reduction)
 
+

SCALING_QUICKSTART.md

@@ -149,3 +149,4 @@ Follow the complete strategy in `SCALING_EMBEDDINGS_STRATEGY.md`:
 3. Start with Option A (minimal changes) for quick wins
 4. Gradually implement Option B for full optimization
 
+

SCALING_SUMMARY.md

@@ -200,3 +200,4 @@ embeddings, found_ids = chunked_loader.load_embeddings_for_models(filtered_model
 
 See `SCALING_EMBEDDINGS_STRATEGY.md` for details.
 
+

TOGGLE_GUIDE.md

@@ -0,0 +1,240 @@
+# Toggle Guide - What Each Toggle Does
+
+## Navigation Tabs (Left Sidebar)
+
+### 1. **Visualization** Tab (Default)
+**What it does:**
+- Shows the main 3D interactive visualization
+- Displays models as points in a 3D embedding space
+- Models closer together are more similar (based on embeddings)
+- You can zoom, pan, rotate, and click on models
+
+**What you see:**
+- 3D scatter plot with thousands of models
+- Color-coded by your selected attribute (library, pipeline, downloads, etc.)
+- Size varies based on downloads/likes (if enabled)
+- Mini-map in bottom-right corner
+
+---
+
+### 2. **Families** Tab
+**What it does:**
+- Switches to a different view focused on model families/organizations
+- Shows adoption curves and family statistics
+- Groups models by organization (e.g., "meta-llama", "google", "microsoft")
+
+**What you see:**
+- List of top model families by count
+- Adoption curves showing how families grew over time
+- Comparison mode to compare top 5 families
+- Family depth distribution
+
+**Key Features:**
+- **Compare Top 5 Toggle**: Switches between single family view and comparison of top 5 families
+- Click on a family to see its adoption curve
+- Shows how models in each family were created over time
+
+---
+
+### 3. **Analytics** Tab
+**What it does:**
+- Shows statistics and rankings
+- Displays top models by different metrics
+- Shows trends and growth rates
+
+**What you see:**
+- Top models by downloads
+- Top models by likes
+- Trending models
+- Newest models
+- Largest families
+- Fastest growing families (with growth rate %)
+
+**Key Features:**
+- Time range selector (24h, 7d, 30d) - filters data by time period
+- Growth rate calculation shows % of models created in last 30 days
+
+---
+
+## Visualization Mode Toggle (Top Control Bar)
+
+### **Embeddings** Mode (Default)
+**What it does:**
+- Shows models in semantic embedding space
+- Uses UMAP coordinates (pre-computed 3D positions)
+- Models positioned based on similarity (tags, descriptions, metadata)
+
+**Controls available:**
+- **Color By**: Change what determines point color
+  - Family Depth
+  - ML Library (transformers, pytorch, etc.)
+  - Task Type (text-generation, image-classification, etc.)
+  - Downloads (gradient)
+  - Likes (gradient)
+  
+- **Size By**: Change what determines point size
+  - Downloads
+  - Likes
+  - Uniform Size
+
+- **Show All Models**: Toggle between sampled (150k) and all models
+
+**What changes:**
+- Point colors change based on selected attribute
+- Point sizes change based on selected metric
+- Visual grouping changes (e.g., libraries cluster together)
+
+---
+
+### **Force-directed Graph** Mode
+**What it does:**
+- Shows model relationships as a network graph
+- Displays parent-child relationships (fine-tuning, quantization, etc.)
+- Uses force-directed layout (models connected by edges)
+
+**Controls available:**
+- **Edge Type Filter**: Toggle which relationship types to show
+  - Fine-tuned (blue) - models fine-tuned from a base model
+  - Quantized (green) - quantized versions of models
+  - Adapter (orange) - models with adapters added
+  - Merged (purple) - merged models
+  - Parent (gray) - generic parent relationships
+
+- **Force Parameters** (Settings icon):
+  - Link Distance: How far apart connected models are (50-200)
+  - Charge Strength: Repulsion between models (-500 to -100)
+  - Collision Radius: How much models avoid overlapping (0.5x to 2x)
+  - Node Size: Size multiplier for nodes (0.5x to 2x)
+  - Edge Opacity: Transparency of edges (0.1 to 1.0)
+
+**What changes:**
+- Graph layout changes based on force parameters
+- Different relationship types appear/disappear based on edge type filter
+- Node sizes and edge visibility adjust
+
+---
+
+## Color By Options (Embeddings Mode)
+
+### **Family Depth**
+- Colors models by their depth in the family tree
+- Base models (depth 0) vs. fine-tuned models (depth 1, 2, 3...)
+- Shows how models are related hierarchically
+
+### **ML Library**
+- Colors by library: transformers, pytorch, tensorflow, diffusers, etc.
+- Each library gets a distinct color
+- Shows which libraries are most popular
+
+### **Task Type** (Pipeline Tag)
+- Colors by task: text-generation, image-classification, etc.
+- Groups models by what they're designed to do
+- Shows task distribution in the ecosystem
+
+### **Downloads** / **Likes**
+- Uses a color gradient (viridis, plasma, inferno, cool-warm)
+- Darker/lighter colors represent higher/lower values
+- Shows popularity distribution
+
+---
+
+## Size By Options (Embeddings Mode)
+
+### **By Downloads**
+- Larger points = more downloads
+- Logarithmic scaling (so differences are visible)
+- Popular models stand out visually
+
+### **By Likes**
+- Larger points = more likes
+- Shows community favorites
+- Similar to downloads but reflects user engagement
+
+### **Uniform Size**
+- All points same size
+- Useful when you want to focus on color patterns
+- Better for seeing density patterns
+
+---
+
+## Edge Type Filter (Force-directed Graph Mode)
+
+Each toggle button controls which relationship types are visible:
+
+- **Fine-tuned** (Blue): Shows fine-tuning relationships
+  - When OFF: Hides all fine-tuning edges
+  - When ON: Shows fine-tuning connections
+
+- **Quantized** (Green): Shows quantization relationships
+  - When OFF: Hides quantized model connections
+  - When ON: Shows quantization relationships
+
+- **Adapter** (Orange): Shows adapter-based models
+  - When OFF: Hides adapter relationships
+  - When ON: Shows adapter connections
+
+- **Merged** (Purple): Shows merged models
+  - When OFF: Hides merge relationships
+  - When ON: Shows merged model connections
+
+- **Parent** (Gray): Shows generic parent relationships
+  - When OFF: Hides parent connections
+  - When ON: Shows parent-child relationships
+
+**Effect:**
+- Graph becomes simpler/hidden when types are disabled
+- Helps focus on specific relationship types
+- Reduces visual clutter
+
+---
+
+## Force Parameters (Force-directed Graph Mode)
+
+### **Link Distance** (50-200)
+- Controls how far apart connected nodes are
+- Higher = more spread out graph
+- Lower = more compact, clustered graph
+
+### **Charge Strength** (-500 to -100)
+- Controls repulsion between nodes
+- More negative = stronger repulsion (nodes push apart)
+- Less negative = weaker repulsion (nodes can cluster)
+
+### **Collision Radius** (0.5x to 2x)
+- Controls how much nodes avoid overlapping
+- Higher = more spacing between nodes
+- Lower = nodes can get closer together
+
+### **Node Size** (0.5x to 2x)
+- Multiplies the size of all nodes
+- Useful for adjusting visibility
+- Doesn't change graph layout, just appearance
+
+### **Edge Opacity** (0.1 to 1.0)
+- Controls transparency of edges
+- Lower = more transparent (less visual clutter)
+- Higher = more visible edges
+- Useful for dense graphs
+
+---
+
+## Summary
+
+**Navigation Tabs:**
+- **Visualization**: Main 3D embedding space view
+- **Families**: Family/organization analysis with adoption curves
+- **Analytics**: Statistics, rankings, and trends
+
+**Visualization Modes:**
+- **Embeddings**: Semantic similarity space (default)
+- **Force-directed Graph**: Relationship network view
+
+**Key Toggles:**
+- Color/Size controls change visual encoding
+- Edge type filters show/hide relationship types
+- Force parameters adjust graph layout
+- Comparison mode (Families page) switches between single/comparison view
+
+All toggles update the visualization in real-time without page reload!
+
+

app.py

@@ -23,3 +23,4 @@ if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
     uvicorn.run(app, host="0.0.0.0", port=port)
 
+

auto_deploy.sh

@@ -100,3 +100,4 @@ main() {
 
 main "$@"
 
+

backend/api/main.py

@@ -1638,7 +1638,10 @@ async def get_family_network(
 async def get_full_derivative_network(
     edge_types: Optional[str] = Query(None, description="Comma-separated list of edge types to include (finetune,quantized,adapter,merge,parent). If None, includes all types."),
     include_edge_attributes: bool = Query(False, description="Whether to include edge attributes (change in likes, downloads, etc.). Default False for performance."),
-    include_positions: bool = Query(True, description="Whether to include pre-computed 3D positions for each node. Default True for faster rendering.")
+    include_positions: bool = Query(True, description="Whether to include pre-computed 3D positions for each node. Default True for faster rendering."),
+    min_downloads: int = Query(0, description="Minimum downloads to include a model. Use this to reduce network size."),
+    max_nodes: Optional[int] = Query(None, ge=100, le=1000000, description="Maximum number of nodes to include. Models are sorted by downloads. Use this to reduce network size."),
+    use_precomputed: bool = Query(True, description="Try to load pre-computed network graph from disk if available.")
 ):
     """
     Build full derivative relationship network for ALL models in the database.
@@ -1656,8 +1659,8 @@ async def get_full_derivative_network(
     
     try:
         import time
+        import networkx as nx
         start_time = time.time()
-        logger.info(f"Building full derivative network for {len(deps.df):,} models...")
         
         # Check if dataframe has required columns
         required_columns = ['model_id']
@@ -1668,26 +1671,94 @@ async def get_full_derivative_network(
                 detail=f"Missing required columns: {missing_columns}"
             )
         
+        # Try to load pre-computed network graph
+        graph = None
+        if use_precomputed:
+            try:
+                backend_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+                root_dir = os.path.dirname(backend_dir)
+                precomputed_dir = os.path.join(root_dir, "precomputed_data")
+                graph_file = os.path.join(precomputed_dir, "full_derivative_network.pkl")
+                
+                # Try to download from HF Hub if not found locally (for Spaces deployment)
+                if not os.path.exists(graph_file):
+                    logger.info("Pre-computed network not found locally. Attempting to download from HF Hub...")
+                    from utils.precomputed_loader import download_network_from_hf_hub
+                    download_network_from_hf_hub(precomputed_dir, version="v1")
+                
+                if os.path.exists(graph_file):
+                    logger.info(f"Loading pre-computed network graph from {graph_file}...")
+                    with open(graph_file, 'rb') as f:
+                        graph = pickle.load(f)
+                    logger.info(f"Loaded pre-computed graph: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")
+                else:
+                    logger.info("Pre-computed network graph not available. Will build from scratch.")
+            except Exception as e:
+                logger.warning(f"Could not load pre-computed network graph: {e}. Will build from scratch.")
+        
+        # Filter dataframe if needed
+        filtered_df = deps.df.copy()
+        if min_downloads > 0:
+            filtered_df = filtered_df[filtered_df.get('downloads', 0) >= min_downloads]
+            logger.info(f"Filtered to {len(filtered_df):,} models with >= {min_downloads} downloads")
+        
+        if max_nodes and len(filtered_df) > max_nodes:
+            # Sort by downloads and take top N
+            filtered_df = filtered_df.nlargest(max_nodes, 'downloads', keep='first')
+            logger.info(f"Limited to top {max_nodes:,} models by downloads")
+        
+        logger.info(f"Building full derivative network for {len(filtered_df):,} models...")
+        
         filter_types = None
         if edge_types:
             filter_types = [t.strip() for t in edge_types.split(',') if t.strip()]
         
-        try:
-            network_builder = ModelNetworkBuilder(deps.df)
-            logger.info("Calling build_full_derivative_network...")
+        # Build graph if not loaded from disk
+        if graph is None:
+            try:
+                network_builder = ModelNetworkBuilder(filtered_df)
+                logger.info("Calling build_full_derivative_network...")
+                
+                # Disable edge attributes for very large graphs to improve performance
+                # They can be slow to compute for 100k+ edges
+                graph = network_builder.build_full_derivative_network(
+                    include_edge_attributes=include_edge_attributes,
+                    filter_edge_types=filter_types
+                )
+            except Exception as build_error:
+                logger.error(f"Error in build_full_derivative_network: {build_error}", exc_info=True)
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"Failed to build network graph: {str(build_error)}"
+                )
+        else:
+            # Filter pre-computed graph if needed
+            if filter_types:
+                # Remove edges that don't match filter
+                edges_to_remove = []
+                for source, target, attrs in graph.edges(data=True):
+                    edge_types_list = attrs.get('edge_types', [])
+                    if not isinstance(edge_types_list, list):
+                        edge_types_list = [edge_types_list] if edge_types_list else []
+                    if not any(et in filter_types for et in edge_types_list):
+                        edges_to_remove.append((source, target))
+                graph.remove_edges_from(edges_to_remove)
+                # Remove isolated nodes
+                isolated = list(nx.isolates(graph))
+                graph.remove_nodes_from(isolated)
+                logger.info(f"Filtered graph: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")
             
-            # Disable edge attributes for very large graphs to improve performance
-            # They can be slow to compute for 100k+ edges
-            graph = network_builder.build_full_derivative_network(
-                include_edge_attributes=include_edge_attributes,
-                filter_edge_types=filter_types
-            )
-        except Exception as build_error:
-            logger.error(f"Error in build_full_derivative_network: {build_error}", exc_info=True)
-            raise HTTPException(
-                status_code=500,
-                detail=f"Failed to build network graph: {str(build_error)}"
-            )
+            # Filter nodes by downloads if needed
+            if min_downloads > 0 or max_nodes:
+                nodes_to_remove = []
+                for node_id in graph.nodes():
+                    if node_id in filtered_df.index:
+                        continue
+                    nodes_to_remove.append(node_id)
+                graph.remove_nodes_from(nodes_to_remove)
+                isolated = list(nx.isolates(graph))
+                graph.remove_nodes_from(isolated)
+                logger.info(f"Filtered graph by model selection: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")
         
         build_time = time.time() - start_time
         logger.info(f"Graph built in {build_time:.2f}s: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")

backend/requirements.txt

@@ -14,4 +14,5 @@ pydantic>=2.0.0
 ormsgpack>=1.2.0
 rapidfuzz>=3.0.0
 pyarrow>=12.0.0
+networkx>=3.0.0
 

backend/scripts/precompute_network.py

@@ -0,0 +1,211 @@
+"""
+Pre-compute the full derivative network graph and save it to disk.
+This allows the API to load the network instantly instead of building it on-demand.
+
+Usage:
+    python scripts/precompute_network.py [--output-dir precomputed_data] [--version v1]
+"""
+
+import os
+import sys
+import pickle
+import argparse
+import logging
+import time
+from pathlib import Path
+from typing import Optional
+
+# Add backend to path
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+import pandas as pd
+from utils.network_analysis import ModelNetworkBuilder
+from utils.precomputed_loader import PrecomputedDataLoader
+from utils.data_loader import ModelDataLoader
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+
+def precompute_network(
+    output_dir: str = "precomputed_data",
+    version: str = "v1",
+    include_edge_attributes: bool = False,
+    min_downloads: int = 0,
+    max_nodes: Optional[int] = None,
+    load_from_hf: bool = False,
+    sample_size: Optional[int] = None
+):
+    """
+    Pre-compute the full derivative network graph for the force-directed visualization.
+    
+    Args:
+        output_dir: Directory to save the network file
+        version: Version tag for the data
+        include_edge_attributes: Whether to calculate edge attributes
+        min_downloads: Minimum downloads to include a model
+        max_nodes: Maximum number of nodes (top N by downloads)
+        load_from_hf: If True, load directly from HF dataset (includes parent relationships)
+        sample_size: If load_from_hf=True, sample this many models (None = all models)
+    """
+    start_time = time.time()
+    
+    # Create output directory
+    output_path = Path(output_dir)
+    output_path.mkdir(parents=True, exist_ok=True)
+    
+    logger.info("=" * 60)
+    logger.info("PRE-COMPUTING FULL DERIVATIVE NETWORK")
+    logger.info("=" * 60)
+    
+    # Step 1: Load model data
+    logger.info("Step 1/3: Loading model data...")
+    
+    if load_from_hf:
+        # Load directly from HF dataset (includes parent relationships)
+        logger.info(f"Loading directly from Hugging Face dataset (sample_size={sample_size if sample_size else 'ALL'})...")
+        data_loader = ModelDataLoader()
+        df = data_loader.load_data(sample_size=sample_size, prioritize_base_models=False)
+        df = data_loader.preprocess_for_embedding(df)
+        
+        # Ensure model_id is set as index
+        if 'model_id' in df.columns:
+            df.set_index('model_id', drop=False, inplace=True)
+        
+        # Ensure numeric columns
+        for col in ['downloads', 'likes']:
+            if col in df.columns:
+                df[col] = pd.to_numeric(df[col], errors='coerce').fillna(0).astype(int)
+        
+        logger.info(f"Loaded {len(df):,} models from HF dataset")
+        logger.info(f"Columns: {list(df.columns)}")
+        
+        # Check if parent_model column exists (needed for network edges)
+        if 'parent_model' not in df.columns:
+            logger.warning("'parent_model' column not found - network will have 0 edges!")
+        else:
+            parent_count = df['parent_model'].notna().sum()
+            logger.info(f"Models with parent relationships: {parent_count:,}")
+    else:
+        # Load from pre-computed files
+        loader = PrecomputedDataLoader(data_dir=output_dir, version=version)
+        
+        if not loader.check_available():
+            logger.error(f"Pre-computed data not found in {output_dir}")
+            logger.info("Please run precompute_data.py first, download from HF Hub, or use --load-from-hf flag")
+            return False
+        
+        try:
+            df, embeddings, metadata = loader.load_all()
+            logger.info(f"Loaded {len(df):,} models from pre-computed data")
+            
+            # Check if parent_model column exists
+            if 'parent_model' not in df.columns:
+                logger.warning("'parent_model' column not found in pre-computed data - network will have 0 edges!")
+        except Exception as e:
+            logger.error(f"Failed to load data: {e}")
+            return False
+    
+    # Step 2: Filter data if needed
+    if min_downloads > 0:
+        df = df[df.get('downloads', 0) >= min_downloads]
+        logger.info(f"Filtered to {len(df):,} models with >= {min_downloads} downloads")
+    
+    if max_nodes and len(df) > max_nodes:
+        df = df.nlargest(max_nodes, 'downloads', keep='first')
+        logger.info(f"Limited to top {max_nodes:,} models by downloads")
+    
+    # Step 3: Build network graph
+    logger.info("Step 2/3: Building network graph (this may take 10-30 minutes)...")
+    try:
+        network_builder = ModelNetworkBuilder(df)
+        graph = network_builder.build_full_derivative_network(
+            include_edge_attributes=include_edge_attributes,
+            filter_edge_types=None  # Include all edge types
+        )
+        
+        logger.info(f"Graph built: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")
+    except Exception as e:
+        logger.error(f"Failed to build network graph: {e}", exc_info=True)
+        return False
+    
+    # Step 4: Save network graph
+    logger.info("Step 3/3: Saving network graph to disk...")
+    network_file = output_path / "full_derivative_network.pkl"
+    
+    try:
+        with open(network_file, 'wb') as f:
+            pickle.dump(graph, f, protocol=pickle.HIGHEST_PROTOCOL)
+        
+        file_size_mb = network_file.stat().st_size / (1024 * 1024)
+        logger.info(f"Saved network graph to {network_file}")
+        logger.info(f"File size: {file_size_mb:.2f} MB")
+    except Exception as e:
+        logger.error(f"Failed to save network graph: {e}", exc_info=True)
+        return False
+    
+    # Save metadata
+    metadata_file = output_path / "network_metadata.json"
+    import json
+    from datetime import datetime
+    
+    network_metadata = {
+        "created_at": datetime.now().isoformat(),
+        "version": version,
+        "nodes": graph.number_of_nodes(),
+        "edges": graph.number_of_edges(),
+        "include_edge_attributes": include_edge_attributes,
+        "min_downloads": min_downloads,
+        "max_nodes": max_nodes,
+        "file_size_mb": round(file_size_mb, 2)
+    }
+    
+    with open(metadata_file, 'w') as f:
+        json.dump(network_metadata, f, indent=2)
+    
+    total_time = time.time() - start_time
+    logger.info("=" * 60)
+    logger.info(f"PRE-COMPUTATION COMPLETE in {total_time:.2f} seconds")
+    logger.info(f"Network graph: {graph.number_of_nodes():,} nodes, {graph.number_of_edges():,} edges")
+    logger.info(f"Saved to: {network_file}")
+    logger.info("=" * 60)
+    
+    return True
+
+
+if __name__ == "__main__":
+    import time
+    
+    parser = argparse.ArgumentParser(description="Pre-compute full derivative network graph")
+    parser.add_argument("--output-dir", type=str, default="precomputed_data",
+                       help="Output directory for pre-computed files")
+    parser.add_argument("--version", type=str, default="v1",
+                       help="Version tag for the data")
+    parser.add_argument("--include-edge-attributes", action="store_true",
+                       help="Include edge attributes (slower but more detailed)")
+    parser.add_argument("--min-downloads", type=int, default=0,
+                       help="Minimum downloads to include a model")
+    parser.add_argument("--max-nodes", type=int, default=None,
+                       help="Maximum number of nodes (top N by downloads)")
+    parser.add_argument("--load-from-hf", action="store_true",
+                       help="Load directly from HF dataset instead of pre-computed files (includes parent relationships)")
+    parser.add_argument("--sample-size", type=int, default=None,
+                       help="If --load-from-hf, sample this many models (default: all models, use 0 for all)")
+    
+    args = parser.parse_args()
+    
+    success = precompute_network(
+        output_dir=args.output_dir,
+        version=args.version,
+        include_edge_attributes=args.include_edge_attributes,
+        min_downloads=args.min_downloads,
+        max_nodes=args.max_nodes,
+        load_from_hf=args.load_from_hf,
+        sample_size=None if args.sample_size == 0 else args.sample_size
+    )
+    
+    sys.exit(0 if success else 1)
+

backend/scripts/upload_network_to_hf.py

@@ -0,0 +1,130 @@
+"""
+Upload pre-computed network graph to Hugging Face Hub dataset.
+
+Usage:
+    python scripts/upload_network_to_hf.py [--network-file precomputed_data/full_derivative_network.pkl] [--version v1]
+"""
+
+import os
+import sys
+import argparse
+import logging
+from pathlib import Path
+
+# Add backend to path
+sys.path.insert(0, str(Path(__file__).parent.parent))
+
+from utils.precomputed_loader import HF_PRECOMPUTED_DATASET
+
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+
+def upload_network_to_hf(
+    network_file: str,
+    version: str = "v1",
+    dataset_id: str = None
+):
+    """
+    Upload pre-computed network graph to Hugging Face Hub.
+    
+    Args:
+        network_file: Path to the network pickle file
+        version: Version tag for the data
+        dataset_id: HF dataset ID (defaults to HF_PRECOMPUTED_DATASET)
+    """
+    try:
+        from huggingface_hub import HfApi, upload_file
+        
+        if dataset_id is None:
+            dataset_id = HF_PRECOMPUTED_DATASET
+        
+        network_path = Path(network_file)
+        if not network_path.exists():
+            logger.error(f"Network file not found: {network_file}")
+            return False
+        
+        logger.info(f"Uploading network graph to {dataset_id}...")
+        logger.info(f"File: {network_file}")
+        logger.info(f"Version: {version}")
+        
+        api = HfApi()
+        
+        # Check if repository exists, create if it doesn't
+        try:
+            api.dataset_info(dataset_id)
+            logger.info(f"Repository {dataset_id} exists")
+        except Exception:
+            logger.info(f"Repository {dataset_id} not found. Creating it...")
+            try:
+                api.create_repo(
+                    repo_id=dataset_id,
+                    repo_type="dataset",
+                    exist_ok=True
+                )
+                logger.info(f"Created repository {dataset_id}")
+            except Exception as create_error:
+                logger.error(f"Could not create repository: {create_error}")
+                logger.info("You may need to create it manually at https://huggingface.co/new-dataset")
+                return False
+        
+        # Upload network file
+        filename = f"full_derivative_network_{version}.pkl"
+        upload_file(
+            path_or_fileobj=str(network_path),
+            path_in_repo=filename,
+            repo_id=dataset_id,
+            repo_type="dataset",
+            commit_message=f"Upload pre-computed network graph (version {version})"
+        )
+        
+        logger.info(f"Successfully uploaded {filename} to {dataset_id}")
+        
+        # Try to upload metadata if it exists
+        metadata_file = network_path.parent / "network_metadata.json"
+        if metadata_file.exists():
+            try:
+                upload_file(
+                    path_or_fileobj=str(metadata_file),
+                    path_in_repo=f"network_metadata_{version}.json",
+                    repo_id=dataset_id,
+                    repo_type="dataset",
+                    commit_message=f"Upload network metadata (version {version})"
+                )
+                logger.info("Successfully uploaded network metadata")
+            except Exception as e:
+                logger.warning(f"Could not upload metadata: {e}")
+        
+        return True
+        
+    except ImportError:
+        logger.error("huggingface_hub not installed. Install it with: pip install huggingface_hub")
+        return False
+    except Exception as e:
+        logger.error(f"Error uploading network to HF Hub: {e}", exc_info=True)
+        return False
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Upload pre-computed network graph to HF Hub")
+    parser.add_argument("--network-file", type=str, 
+                       default="precomputed_data/full_derivative_network.pkl",
+                       help="Path to network pickle file")
+    parser.add_argument("--version", type=str, default="v1",
+                       help="Version tag for the data")
+    parser.add_argument("--dataset-id", type=str, default=None,
+                       help="HF dataset ID (defaults to HF_PRECOMPUTED_DATASET)")
+    
+    args = parser.parse_args()
+    
+    success = upload_network_to_hf(
+        network_file=args.network_file,
+        version=args.version,
+        dataset_id=args.dataset_id
+    )
+    
+    sys.exit(0 if success else 1)
+

backend/utils/chunked_loader.py

@@ -216,3 +216,4 @@ def create_chunk_index(
     
     return chunk_index
 
+

backend/utils/precomputed_loader.py

@@ -181,6 +181,79 @@ class PrecomputedDataLoader:
         return df, embeddings, metadata
 
 
+def download_network_from_hf_hub(data_dir: str, version: str = "v1") -> bool:
+    """
+    Download pre-computed network graph from Hugging Face Hub.
+    
+    Args:
+        data_dir: Directory to save the network file
+        version: Version tag for the data
+    
+    Returns:
+        True if download successful, False otherwise
+    """
+    try:
+        from huggingface_hub import hf_hub_download
+        import os
+        from pathlib import Path
+        
+        data_path = Path(data_dir)
+        data_path.mkdir(parents=True, exist_ok=True)
+        
+        network_file = data_path / "full_derivative_network.pkl"
+        metadata_file = data_path / "network_metadata.json"
+        
+        # Skip if already exists
+        if network_file.exists():
+            logger.info(f"Network file already exists: {network_file}")
+            return True
+        
+        logger.info(f"Downloading pre-computed network graph from HF Hub...")
+        logger.info(f"Dataset: {HF_PRECOMPUTED_DATASET}, Version: {version}")
+        
+        try:
+            # Try to download network file
+            downloaded_path = hf_hub_download(
+                repo_id=HF_PRECOMPUTED_DATASET,
+                filename=f"full_derivative_network_{version}.pkl",
+                repo_type="dataset",
+                local_dir=str(data_path),
+                local_dir_use_symlinks=False
+            )
+            
+            # Rename to standard name if needed
+            if downloaded_path != str(network_file):
+                import shutil
+                shutil.move(downloaded_path, str(network_file))
+            
+            logger.info(f"Successfully downloaded network graph: {network_file}")
+            
+            # Try to download metadata
+            try:
+                hf_hub_download(
+                    repo_id=HF_PRECOMPUTED_DATASET,
+                    filename=f"network_metadata_{version}.json",
+                    repo_type="dataset",
+                    local_dir=str(data_path),
+                    local_dir_use_symlinks=False
+                )
+            except Exception as e:
+                logger.warning(f"Could not download network metadata: {e}")
+            
+            return True
+            
+        except Exception as e:
+            logger.warning(f"Network file not found in HF Hub (this is optional): {e}")
+            return False
+            
+    except ImportError:
+        logger.warning("huggingface_hub not available. Cannot download network from HF Hub.")
+        return False
+    except Exception as e:
+        logger.error(f"Error downloading network from HF Hub: {e}")
+        return False
+
+
 def download_from_hf_hub(data_dir: str, version: str = "v1") -> bool:
     """
     Download precomputed data from HuggingFace Hub.
@@ -283,6 +356,18 @@ def download_from_hf_hub(data_dir: str, version: str = "v1") -> bool:
             except Exception:
                 logger.info("Single embeddings file not available either")
         
+        # Try to download pre-computed network graph (optional)
+        try:
+            network_path = hf_hub_download(
+                repo_id=dataset_id,
+                filename=f"full_derivative_network_{version}.pkl",
+                repo_type="dataset",
+                local_dir=data_dir
+            )
+            logger.info(f"Downloaded pre-computed network graph to {network_path}")
+        except Exception as e:
+            logger.info(f"Pre-computed network graph not available (optional): {e}")
+        
         return True
         
     except ImportError:

check_and_deploy.sh

@@ -41,3 +41,4 @@ else
     fi
 fi
 
+

frontend/src/App.css

@@ -223,6 +223,9 @@
     padding: 1.5rem;
     border-top: 1px solid var(--border-light);
     margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
   }
 
   .nav-links {
@@ -244,6 +247,14 @@
     text-decoration: underline;
   }
 
+  .nav-theme-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 0.5rem;
+    border-top: 1px solid var(--border-light);
+  }
+
   /* ============================================
      APP MAIN CONTENT
      ============================================ */
@@ -928,6 +939,57 @@
     flex-shrink: 0;
   }
 
+/* Graph Search Input - for force graph mode */
+.graph-search {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  position: relative;
+}
+
+.graph-search-input {
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--border-medium);
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  font-size: 0.85rem;
+  border-radius: 4px;
+  width: 180px;
+  transition: all var(--transition-base);
+  outline: none;
+}
+
+.graph-search-input:hover {
+  border-color: var(--border-dark);
+}
+
+.graph-search-input:focus {
+  border-color: var(--accent-blue);
+  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.1);
+  width: 220px;
+}
+
+.graph-search-input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.graph-search-clear {
+  position: absolute;
+  right: 0.4rem;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  padding: 0.2rem;
+  font-size: 1rem;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.graph-search-clear:hover {
+  color: var(--text-primary);
+}
+
 .semantic-search-toggle {
   padding: 0.5rem 0.75rem;
   background: var(--bg-secondary);
@@ -2032,24 +2094,32 @@
   }
   
   .theme-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
     background: var(--bg-secondary);
     border: 1px solid var(--border-medium);
-    border-radius: 0;
-    padding: 0.5rem;
+    border-radius: 4px;
     cursor: pointer;
-    font-size: 1.2rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 40px;
-    height: 40px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-primary);
     transition: all var(--transition-base);
+    font-family: var(--font-primary);
+    width: 100%;
+    justify-content: flex-start;
   }
   
-.theme-toggle:hover {
-  background: var(--bg-tertiary);
-  border-color: var(--accent-blue);
-}
+  .theme-toggle:hover {
+    background: var(--bg-tertiary);
+    border-color: var(--accent-blue);
+    color: var(--accent-blue);
+  }
+
+  .theme-toggle-label {
+    font-size: 0.875rem;
+  }
   
   /* ============================================
      ZOOM CONTROLS

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { ChevronLeft, ChevronRight, Palette, Maximize2, Eye, GitBranch } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Palette, Maximize2, Eye, GitBranch, Filter, Search, Moon, Sun } from 'lucide-react';
+import ThemeToggle from './components/controls/ThemeToggle';
 import IntroModal from './components/ui/IntroModal';
 import ScatterPlot3D from './components/visualizations/ScatterPlot3D';
 import NetworkGraph from './components/visualizations/NetworkGraph';
@@ -111,6 +112,19 @@ function App() {
   const [nodeSizeMultiplier, setNodeSizeMultiplier] = useState(1.0);
   const [edgeOpacity, setEdgeOpacity] = useState(0.6);
   
+  // Force graph visual options (harmonized with embeddings view)
+  const [graphColorBy, setGraphColorBy] = useState<'library' | 'pipeline' | 'downloads' | 'likes' | 'edge_type'>('library');
+  const [graphSizeBy, setGraphSizeBy] = useState<'downloads' | 'likes' | 'uniform'>('downloads');
+  const [graphColorScheme, setGraphColorScheme] = useState<'viridis' | 'plasma' | 'inferno' | 'coolwarm'>('viridis');
+  
+  // Force graph search and filtering
+  const [graphSearchQuery, setGraphSearchQuery] = useState('');
+  const [graphFamilyFilter, setGraphFamilyFilter] = useState('');
+  const [highlightedNodeId, setHighlightedNodeId] = useState<string | null>(null);
+  
+  // Available families for the filter dropdown
+  const [availableFamilies, setAvailableFamilies] = useState<string[]>([]);
+  
   // Threshold for using instanced rendering
   const INSTANCED_THRESHOLD = 10000;
   
@@ -481,14 +495,42 @@ function App() {
       setGraphLoading(true);
       setGraphError(null);
       try {
+        // Use filtering to reduce network size for better performance
+        // Start with top 50k models by downloads to avoid 500 errors
         const data = await fetchFullDerivativeNetwork({
           edgeTypes: undefined,
           includeEdgeAttributes: false,
+          minDownloads: 0, // Can be increased to reduce size further
+          maxNodes: 50000, // Limit to top 50k models by downloads
+          usePrecomputed: true, // Try to use pre-computed graph if available
         });
         setGraphNodes(data.nodes || []);
         setGraphLinks(data.links || []);
         setGraphStats(data.statistics ? { nodes: data.statistics.nodes, edges: data.statistics.edges } : null);
         
+        // Extract unique families (organizations) from node IDs for filtering
+        if (data.nodes && data.nodes.length > 0) {
+          const familySet = new Set<string>();
+          data.nodes.forEach((node: GraphNode) => {
+            if (node.id && node.id.includes('/')) {
+              const family = node.id.split('/')[0];
+              if (family) familySet.add(family);
+            }
+          });
+          // Sort by frequency (most common families first)
+          const familyCount = new Map<string, number>();
+          data.nodes.forEach((node: GraphNode) => {
+            if (node.id && node.id.includes('/')) {
+              const family = node.id.split('/')[0];
+              familyCount.set(family, (familyCount.get(family) || 0) + 1);
+            }
+          });
+          const sortedFamilies = Array.from(familySet)
+            .sort((a, b) => (familyCount.get(b) || 0) - (familyCount.get(a) || 0))
+            .slice(0, 100); // Keep top 100 families
+          setAvailableFamilies(sortedFamilies);
+        }
+        
         if (data.links && data.links.length > 0) {
           const availableTypes = getAvailableEdgeTypes(data.links);
           if (availableTypes.size > 0) {
@@ -498,7 +540,21 @@ function App() {
         }
         graphLoadedRef.current = true;
       } catch (err) {
-        setGraphError(err instanceof Error ? err.message : 'Failed to load graph');
+        const errorMessage = err instanceof Error ? err.message : 'Failed to load graph';
+        // Check if it's a rate limit error
+        if (errorMessage.includes('Rate limit') || errorMessage.includes('429')) {
+          setGraphError(`${errorMessage} The graph will automatically retry.`);
+          // Reset the loaded flag so it can retry
+          graphLoadedRef.current = false;
+          // Retry after a delay
+          setTimeout(() => {
+            if (vizMode === 'force-graph' && !graphLoadedRef.current) {
+              loadForceGraph();
+            }
+          }, 5000);
+        } else {
+          setGraphError(errorMessage);
+        }
       } finally {
         setGraphLoading(false);
       }
@@ -664,6 +720,9 @@ function App() {
                 <a href="https://github.com/bendlaufer/ai-ecosystem" target="_blank" rel="noopener noreferrer" title="View source code on GitHub">GitHub</a>
                 <a href="https://huggingface.co/modelbiome" target="_blank" rel="noopener noreferrer" title="Access the dataset on Hugging Face">Dataset</a>
               </div>
+              <div className="nav-theme-toggle">
+                <ThemeToggle />
+              </div>
             </div>
           )}
         </aside>
@@ -795,6 +854,76 @@ function App() {
               {/* Force graph controls - only show for force-graph mode */}
               {vizMode === 'force-graph' && !showAnalytics && !showFamilies && !showGraph && (
                 <>
+                  {/* Color by - harmonized with embeddings view */}
+                  <div className="control-group">
+                    <Palette size={14} className="control-icon" />
+                    <select 
+                      value={graphColorBy} 
+                      onChange={(e) => setGraphColorBy(e.target.value as typeof graphColorBy)}
+                      className="control-select"
+                      title="Color nodes by attribute"
+                    >
+                      <option value="library">ML Library</option>
+                      <option value="pipeline">Task Type</option>
+                      <option value="downloads">Downloads</option>
+                      <option value="likes">Likes</option>
+                      <option value="edge_type">Edge Type</option>
+                    </select>
+                    {(graphColorBy === 'downloads' || graphColorBy === 'likes') && (
+                      <select 
+                        value={graphColorScheme} 
+                        onChange={(e) => setGraphColorScheme(e.target.value as typeof graphColorScheme)}
+                        className="control-select control-select-small"
+                        title="Color gradient style"
+                      >
+                        <option value="viridis">Viridis</option>
+                        <option value="plasma">Plasma</option>
+                        <option value="inferno">Inferno</option>
+                        <option value="coolwarm">Cool-Warm</option>
+                      </select>
+                    )}
+                  </div>
+
+                  <span className="control-divider" />
+
+                  {/* Size by */}
+                  <div className="control-group">
+                    <Maximize2 size={14} className="control-icon" />
+                    <select 
+                      value={graphSizeBy} 
+                      onChange={(e) => setGraphSizeBy(e.target.value as typeof graphSizeBy)}
+                      className="control-select"
+                      title="Size nodes by attribute"
+                    >
+                      <option value="downloads">By Downloads</option>
+                      <option value="likes">By Likes</option>
+                      <option value="uniform">Uniform Size</option>
+                    </select>
+                  </div>
+
+                  <span className="control-divider" />
+
+                  {/* Family filter */}
+                  <div className="control-group">
+                    <Filter size={14} className="control-icon" />
+                    <select 
+                      value={graphFamilyFilter} 
+                      onChange={(e) => {
+                        setGraphFamilyFilter(e.target.value);
+                        setHighlightedNodeId(null);
+                      }}
+                      className="control-select"
+                      title="Filter by organization/family"
+                    >
+                      <option value="">All Families</option>
+                      {availableFamilies.map(family => (
+                        <option key={family} value={family}>{family}</option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <span className="control-divider" />
+
                   {/* Edge type filter */}
                   {availableEdgeTypes.length > 0 && (
                     <>
@@ -854,39 +983,83 @@ function App() {
 
             {/* Right: Integrated Search */}
             <div className="control-bar-right">
-              <IntegratedSearch
-                value={localSearchQuery}
-                onChange={(value) => {
-                  setLocalSearchQuery(value);
-                  debouncedSetSearchQuery(value);
-                }}
-                onSelect={(result) => {
-                  const modelPoint: ModelPoint = {
-                    model_id: result.model_id,
-                    x: result.x || 0,
-                    y: result.y || 0,
-                    z: result.z || 0,
-                    downloads: result.downloads || 0,
-                    likes: result.likes || 0,
-                    trending_score: null,
-                    tags: null,
-                    licenses: null,
-                    cluster_id: null,
-                    created_at: null,
-                    library_name: result.library_name || null,
-                    pipeline_tag: result.pipeline_tag || null,
-                    parent_model: null,
-                    family_depth: result.family_depth || null,
-                  };
-                  setSelectedModel(modelPoint);
-                  setIsModalOpen(true);
-                  setLocalSearchQuery('');
-                  setSearchQuery('');
-                }}
-                onZoomTo={(x, y, z) => {
-                  // Zoom to point - reserved for future implementation
-                }}
-              />
+              {vizMode === 'force-graph' ? (
+                // Simple search input for force graph mode
+                <div className="control-group graph-search">
+                  <Search size={14} className="control-icon" />
+                  <input
+                    type="text"
+                    value={graphSearchQuery}
+                    onChange={(e) => {
+                      setGraphSearchQuery(e.target.value);
+                      // Auto-highlight the first matching node
+                      if (e.target.value.trim()) {
+                        const query = e.target.value.toLowerCase();
+                        const match = graphNodes.find(n => 
+                          n.id.toLowerCase().includes(query) ||
+                          n.title?.toLowerCase().includes(query)
+                        );
+                        if (match) {
+                          setHighlightedNodeId(match.id);
+                        } else {
+                          setHighlightedNodeId(null);
+                        }
+                      } else {
+                        setHighlightedNodeId(null);
+                      }
+                    }}
+                    placeholder="Search models..."
+                    className="graph-search-input"
+                    title="Type to filter and highlight models in the graph"
+                  />
+                  {graphSearchQuery && (
+                    <button
+                      className="graph-search-clear"
+                      onClick={() => {
+                        setGraphSearchQuery('');
+                        setHighlightedNodeId(null);
+                      }}
+                      title="Clear search"
+                    >
+                      ×
+                    </button>
+                  )}
+                </div>
+              ) : (
+                <IntegratedSearch
+                  value={localSearchQuery}
+                  onChange={(value) => {
+                    setLocalSearchQuery(value);
+                    debouncedSetSearchQuery(value);
+                  }}
+                  onSelect={(result) => {
+                    const modelPoint: ModelPoint = {
+                      model_id: result.model_id,
+                      x: result.x || 0,
+                      y: result.y || 0,
+                      z: result.z || 0,
+                      downloads: result.downloads || 0,
+                      likes: result.likes || 0,
+                      trending_score: null,
+                      tags: null,
+                      licenses: null,
+                      cluster_id: null,
+                      created_at: null,
+                      library_name: result.library_name || null,
+                      pipeline_tag: result.pipeline_tag || null,
+                      parent_model: null,
+                      family_depth: result.family_depth || null,
+                    };
+                    setSelectedModel(modelPoint);
+                    setIsModalOpen(true);
+                    setLocalSearchQuery('');
+                    setSearchQuery('');
+                  }}
+                  onZoomTo={(x, y, z) => {
+                    // Zoom to point - reserved for future implementation
+                  }}
+                />
+              )}
             </div>
           </div>
         </div>
@@ -965,6 +1138,12 @@ function App() {
                       collisionRadius={collisionRadius}
                       nodeSizeMultiplier={nodeSizeMultiplier}
                       edgeOpacity={edgeOpacity}
+                      colorBy={graphColorBy}
+                      sizeBy={graphSizeBy}
+                      colorScheme={graphColorScheme}
+                      highlightedNodeId={highlightedNodeId}
+                      familyFilter={graphFamilyFilter}
+                      searchQuery={graphSearchQuery}
                     />
                   ) : (
                     <ForceDirectedGraph3D
@@ -981,6 +1160,12 @@ function App() {
                       collisionRadius={collisionRadius}
                       nodeSizeMultiplier={nodeSizeMultiplier}
                       edgeOpacity={edgeOpacity}
+                      colorBy={graphColorBy}
+                      sizeBy={graphSizeBy}
+                      colorScheme={graphColorScheme}
+                      highlightedNodeId={highlightedNodeId}
+                      familyFilter={graphFamilyFilter}
+                      searchQuery={graphSearchQuery}
                     />
                   )}
                 </>

frontend/src/components/controls/EdgeTypeFilter.css

@@ -1,19 +1,29 @@
 .edge-type-filter {
   padding: 12px;
-  background: rgba(255, 255, 255, 0.05);
+  background: var(--bg-secondary, #fafafa);
+  border: 1px solid var(--border-light, #e8e8e8);
   border-radius: 8px;
   margin-bottom: 12px;
 }
 
+[data-theme="dark"] .edge-type-filter {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .edge-type-filter h4 {
   margin: 0 0 8px 0;
   font-size: 12px;
   font-weight: 600;
-  color: var(--text-secondary, #9ca3af);
+  color: var(--text-secondary, #666666);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
 
+[data-theme="dark"] .edge-type-filter h4 {
+  color: var(--text-secondary, #9ca3af);
+}
+
 .edge-type-item {
   display: flex;
   align-items: center;
@@ -21,11 +31,15 @@
   margin-bottom: 4px;
   border-radius: 4px;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-base, 200ms);
   user-select: none;
 }
 
 .edge-type-item:hover {
+  background: var(--bg-tertiary, #f5f5f5);
+}
+
+[data-theme="dark"] .edge-type-item:hover {
   background: rgba(255, 255, 255, 0.05);
 }
 
@@ -43,6 +57,10 @@
 
 .edge-type-label {
   font-size: 13px;
+  color: var(--text-primary, #1a1a1a);
+}
+
+[data-theme="dark"] .edge-type-label {
   color: var(--text-primary, #ffffff);
 }
 
@@ -62,24 +80,45 @@
 }
 
 .edge-type-toggle {
-  padding: 4px 10px;
-  border: 1px solid;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.65rem;
+  border: 1px solid var(--border-medium, #d0d0d0);
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 0.8rem;
   font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
-  color: var(--text-primary, #ffffff);
-  background: transparent;
+  transition: all var(--transition-base, 200ms);
+  color: var(--text-secondary, #666666);
+  background: var(--bg-primary, #ffffff);
   white-space: nowrap;
+  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
 }
 
-.edge-type-toggle:hover {
-  opacity: 0.8;
+.edge-type-toggle:hover:not(.active) {
+  background: var(--bg-secondary, #fafafa);
+  color: var(--text-primary, #1a1a1a);
+  border-color: var(--border-dark, #b0b0b0);
 }
 
 .edge-type-toggle.active {
   opacity: 1;
+  color: white;
+  border-color: transparent;
+  font-weight: 600;
+}
+
+[data-theme="dark"] .edge-type-toggle {
+  color: var(--text-secondary, #cccccc);
+  background: var(--bg-primary, #1a1a1a);
+  border-color: var(--border-medium, #3a3a3a);
+}
+
+[data-theme="dark"] .edge-type-toggle:hover:not(.active) {
+  background: var(--bg-secondary, #2d2d2d);
+  color: var(--text-primary, #ffffff);
+  border-color: var(--border-dark, #555555);
 }
 
 .edge-type-toggle-label {

frontend/src/components/controls/EdgeTypeFilter.tsx

@@ -72,3 +72,4 @@ export default function EdgeTypeFilter({
   );
 }
 
+

frontend/src/components/controls/ForceParameterControls.css

@@ -5,18 +5,32 @@
 .force-parameter-toggle {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 6px 12px;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 6px;
-  color: var(--text-primary, #ffffff);
-  font-size: 12px;
+  gap: 0.35rem;
+  padding: 0.35rem 0.65rem;
+  border: 1px solid var(--border-medium, #d0d0d0);
+  border-radius: 4px;
+  background: var(--bg-primary, #ffffff);
+  color: var(--text-secondary, #666666);
+  font-size: 0.8rem;
+  font-weight: 500;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all var(--transition-base, 200ms);
+  font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
 }
 
 .force-parameter-toggle:hover {
+  background: var(--bg-secondary, #fafafa);
+  color: var(--text-primary, #1a1a1a);
+  border-color: var(--border-dark, #b0b0b0);
+}
+
+[data-theme="dark"] .force-parameter-toggle {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary, #ffffff);
+}
+
+[data-theme="dark"] .force-parameter-toggle:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.2);
 }
@@ -27,14 +41,20 @@
   left: 0;
   margin-top: 8px;
   padding: 16px;
-  background: var(--bg-secondary, #1f2937);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: var(--bg-elevated, #ffffff);
+  border: 1px solid var(--border-medium, #d0d0d0);
   border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--shadow-lg, 0 2px 8px rgba(0, 0, 0, 0.12));
   min-width: 240px;
   z-index: 1000;
 }
 
+[data-theme="dark"] .force-parameter-panel {
+  background: var(--bg-secondary, #2d2d2d);
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
 .force-parameter-group {
   margin-bottom: 16px;
 }
@@ -47,19 +67,27 @@
   display: block;
   font-size: 12px;
   font-weight: 500;
-  color: var(--text-primary, #ffffff);
+  color: var(--text-primary, #1a1a1a);
   margin-bottom: 8px;
 }
 
+[data-theme="dark"] .force-parameter-group label {
+  color: var(--text-primary, #ffffff);
+}
+
 .force-parameter-group input[type="range"] {
   width: 100%;
   height: 4px;
   border-radius: 2px;
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--border-light, #e8e8e8);
   outline: none;
   -webkit-appearance: none;
 }
 
+[data-theme="dark"] .force-parameter-group input[type="range"] {
+  background: rgba(255, 255, 255, 0.1);
+}
+
 .force-parameter-group input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;

frontend/src/components/controls/ForceParameterControls.tsx

@@ -117,3 +117,4 @@ export default function ForceParameterControls({
   );
 }
 
+

frontend/src/components/controls/ThemeToggle.tsx

@@ -1,13 +1,30 @@
 /**
  * Toggle button for switching between light and dark themes.
  */
-import React from 'react';
+import React, { useEffect } from 'react';
+import { Moon, Sun } from 'lucide-react';
 import { useFilterStore } from '../../stores/filterStore';
 
 export default function ThemeToggle() {
   const theme = useFilterStore((state) => state.theme);
   const toggleTheme = useFilterStore((state) => state.toggleTheme);
 
+  // Listen for system theme changes
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleChange = (e: MediaQueryListEvent) => {
+      // Only auto-switch if user hasn't manually set a preference
+      const saved = localStorage.getItem('theme');
+      if (!saved) {
+        const newTheme = e.matches ? 'dark' : 'light';
+        useFilterStore.getState().setTheme(newTheme);
+      }
+    };
+
+    mediaQuery.addEventListener('change', handleChange);
+    return () => mediaQuery.removeEventListener('change', handleChange);
+  }, []);
+
   return (
     <button
       onClick={toggleTheme}
@@ -15,7 +32,8 @@ export default function ThemeToggle() {
       title={`Switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
       aria-label={`Current theme: ${theme}. Click to switch to ${theme === 'light' ? 'dark' : 'light'} mode`}
     >
-      {theme === 'light' ? 'Dark' : 'Light'}
+      {theme === 'light' ? <Moon size={16} /> : <Sun size={16} />}
+      <span className="theme-toggle-label">{theme === 'light' ? 'Dark' : 'Light'}</span>
     </button>
   );
 }

frontend/src/components/visualizations/ForceDirectedGraph.css

@@ -2,11 +2,15 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: var(--bg-secondary, #1a1a1a);
+  background: var(--bg-secondary, #fafafa);
   border-radius: 8px;
   overflow: hidden;
 }
 
+[data-theme="dark"] .force-directed-graph-container {
+  background: var(--bg-secondary, #1a1a1a);
+}
+
 .force-directed-graph {
   width: 100%;
   height: 100%;
@@ -140,6 +144,44 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  color: var(--text-secondary, #999);
+  color: var(--text-secondary, #666666);
   font-size: 14px;
 }
+
+[data-theme="dark"] .graph-empty {
+  color: var(--text-secondary, #999999);
+}
+
+/* Performance info overlay */
+.graph-performance-info {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 8px 12px;
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--text-primary, #1a1a1a);
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+  box-shadow: var(--shadow-md, 0 2px 4px rgba(0, 0, 0, 0.08));
+  z-index: 10;
+}
+
+[data-theme="dark"] .graph-performance-info {
+  background: rgba(0, 0, 0, 0.7);
+  color: var(--text-primary, #ffffff);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.graph-performance-info div {
+  margin-bottom: 4px;
+}
+
+.graph-performance-info div:last-child {
+  margin-bottom: 0;
+}
+
+.graph-performance-warning {
+  color: #f59e0b;
+  font-weight: 500;
+}

frontend/src/components/visualizations/ForceDirectedGraph3D.tsx

@@ -4,12 +4,17 @@
  * with color-coded edges and interactive nodes in 3D space.
  */
 import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
+import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
 import { GraphNode, GraphLink, EdgeType } from './ForceDirectedGraph';
+import { getCategoricalColorMap, getContinuousColorScale, getDepthColorScale, LIBRARY_COLORS, PIPELINE_COLORS } from '../../utils/rendering/colors';
 import './ForceDirectedGraph.css';
 
+export type ColorByOption = 'library' | 'pipeline' | 'downloads' | 'likes' | 'edge_type';
+export type SizeByOption = 'downloads' | 'likes' | 'uniform';
+export type ColorScheme = 'viridis' | 'plasma' | 'inferno' | 'coolwarm';
+
 export interface ForceDirectedGraph3DProps {
   width: number;
   height: number;
@@ -25,6 +30,13 @@ export interface ForceDirectedGraph3DProps {
   collisionRadius?: number;
   nodeSizeMultiplier?: number;
   edgeOpacity?: number;
+  colorBy?: ColorByOption;
+  sizeBy?: SizeByOption;
+  colorScheme?: ColorScheme;
+  highlightedNodeId?: string | null;
+  familyFilter?: string;
+  searchQuery?: string;
+  onZoomToNode?: (nodeId: string) => void;
 }
 
 // Color scheme for different edge types
@@ -265,26 +277,72 @@ function Graph3DScene({
   collisionRadius = 1.0,
   nodeSizeMultiplier = 1.0,
   edgeOpacity = 0.6,
+  colorBy = 'library',
+  sizeBy = 'downloads',
+  colorScheme = 'viridis',
+  highlightedNodeId,
+  familyFilter,
+  searchQuery,
 }: ForceDirectedGraph3DProps) {
   const simulationRef = useRef<ForceSimulation3D | null>(null);
   const edgeRefsRef = useRef<Map<string, THREE.BufferGeometry>>(new Map());
   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+  const { camera, controls } = useThree();
+
+  // Filter nodes by family and search query first
+  const preFilteredNodes = useMemo(() => {
+    let result = nodes;
+    
+    // Filter by family (organization prefix)
+    if (familyFilter && familyFilter.trim()) {
+      const filter = familyFilter.toLowerCase();
+      result = result.filter(node => {
+        const nodeId = node.id.toLowerCase();
+        return nodeId.startsWith(filter + '/') || nodeId.includes('/' + filter + '/');
+      });
+    }
+    
+    // Filter by search query
+    if (searchQuery && searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(node => 
+        node.id.toLowerCase().includes(query) ||
+        node.title?.toLowerCase().includes(query)
+      );
+    }
+    
+    return result;
+  }, [nodes, familyFilter, searchQuery]);
 
   // Filter links based on enabled edge types
   const filteredLinks = useMemo((): GraphLink[] => {
-    if (!enabledEdgeTypes || enabledEdgeTypes.size === 0) {
-      return links;
+    let result = links;
+    
+    // Filter by edge types
+    if (enabledEdgeTypes && enabledEdgeTypes.size > 0) {
+      result = result.filter(link => {
+        const linkTypes = link.edge_types || [link.edge_type];
+        return linkTypes.some(type => enabledEdgeTypes.has(type));
+      });
     }
-    return links.filter(link => {
-      const linkTypes = link.edge_types || [link.edge_type];
-      return linkTypes.some(type => enabledEdgeTypes.has(type));
-    });
-  }, [links, enabledEdgeTypes]);
+    
+    // Filter to only include links where both source and target are in preFilteredNodes
+    if (familyFilter || searchQuery) {
+      const nodeIds = new Set(preFilteredNodes.map(n => n.id));
+      result = result.filter(link => {
+        const sourceId = typeof link.source === 'string' ? link.source : (link.source as GraphNode).id;
+        const targetId = typeof link.target === 'string' ? link.target : (link.target as GraphNode).id;
+        return nodeIds.has(sourceId) && nodeIds.has(targetId);
+      });
+    }
+    
+    return result;
+  }, [links, enabledEdgeTypes, preFilteredNodes, familyFilter, searchQuery]);
 
   // Filter nodes to only include those connected by filtered links
   const filteredNodes = useMemo(() => {
     if (!enabledEdgeTypes || enabledEdgeTypes.size === 0) {
-      return nodes;
+      return preFilteredNodes;
     }
     const connectedNodeIds = new Set<string>();
     filteredLinks.forEach(link => {
@@ -297,8 +355,62 @@ function Graph3DScene({
       connectedNodeIds.add(sourceId);
       connectedNodeIds.add(targetId);
     });
-    return nodes.filter(node => connectedNodeIds.has(node.id));
-  }, [nodes, filteredLinks, enabledEdgeTypes]);
+    return preFilteredNodes.filter(node => connectedNodeIds.has(node.id));
+  }, [preFilteredNodes, filteredLinks, enabledEdgeTypes]);
+
+  // Create color scale based on colorBy option
+  const getNodeColor = useMemo(() => {
+    if (colorBy === 'downloads' || colorBy === 'likes') {
+      const values = filteredNodes.map(n => colorBy === 'downloads' ? (n.downloads || 0) : (n.likes || 0));
+      const min = Math.min(...values, 0);
+      const max = Math.max(...values, 1);
+      const scale = getContinuousColorScale(min, max, colorScheme, true);
+      return (node: GraphNode) => scale(colorBy === 'downloads' ? (node.downloads || 0) : (node.likes || 0));
+    }
+    
+    if (colorBy === 'library') {
+      return (node: GraphNode) => LIBRARY_COLORS[node.library?.toLowerCase() || 'unknown'] || '#6b7280';
+    }
+    
+    if (colorBy === 'pipeline') {
+      return (node: GraphNode) => PIPELINE_COLORS[node.pipeline?.toLowerCase() || 'unknown'] || '#6b7280';
+    }
+    
+    // Default: edge_type based on most common edge type connected to this node
+    return (node: GraphNode) => {
+      const nodeLinks = filteredLinks.filter(link => {
+        const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+        const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+        return sourceId === node.id || targetId === node.id;
+      });
+      if (nodeLinks.length === 0) return '#6b7280';
+      const edgeType = nodeLinks[0].edge_type || 'parent';
+      const edgeColors: Record<string, string> = {
+        finetune: '#3b82f6',
+        quantized: '#10b981',
+        adapter: '#f59e0b',
+        merge: '#8b5cf6',
+        parent: '#6b7280',
+      };
+      return edgeColors[edgeType] || '#6b7280';
+    };
+  }, [colorBy, colorScheme, filteredNodes, filteredLinks]);
+
+  // Calculate node size based on sizeBy option
+  const getNodeSize = useCallback((node: GraphNode, baseMultiplier: number = 1.0) => {
+    let baseSize = 0.3;
+    
+    if (sizeBy === 'downloads') {
+      baseSize = 0.3 + Math.sqrt(node.downloads || 0) / 8000;
+    } else if (sizeBy === 'likes') {
+      baseSize = 0.3 + Math.sqrt(node.likes || 0) / 500;
+    } else {
+      // uniform
+      baseSize = 0.5;
+    }
+    
+    return baseSize * baseMultiplier;
+  }, [sizeBy]);
 
   // Initialize simulation
   useEffect(() => {
@@ -415,17 +527,31 @@ function Graph3DScene({
       {/* Nodes */}
       <group>
         {filteredNodes.map((node) => {
-          const downloads = node.downloads || 0;
-          const baseRadius = 0.3 + Math.sqrt(downloads) / 8000;
-          const radius = baseRadius * nodeSizeMultiplier;
+          const radius = getNodeSize(node, nodeSizeMultiplier);
           const isSelected = selectedNodeId === node.id;
           const isHovered = hoveredNodeId === node.id;
-
-          // Color by library
-          const colors = ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#06b6d4'];
-          const libraries = Array.from(new Set(filteredNodes.map(n => n.library).filter(Boolean)));
-          const libIndex = libraries.indexOf(node.library);
-          const color = colors[libIndex % colors.length] || '#6b7280';
+          const isHighlighted = highlightedNodeId === node.id;
+          
+          // Get color from colorBy option
+          const baseColor = getNodeColor(node);
+          
+          // Determine final color based on state
+          let finalColor = baseColor;
+          let emissiveIntensity = 0.1;
+          
+          if (isSelected) {
+            finalColor = '#ef4444'; // Red for selected
+            emissiveIntensity = 0.5;
+          } else if (isHighlighted) {
+            finalColor = '#22d3ee'; // Cyan for highlighted (search result)
+            emissiveIntensity = 0.6;
+          } else if (isHovered) {
+            finalColor = '#fbbf24'; // Yellow for hovered
+            emissiveIntensity = 0.3;
+          }
+          
+          // Scale up highlighted/selected nodes
+          const finalRadius = (isHighlighted || isSelected) ? radius * 1.5 : radius;
 
           return (
             <mesh
@@ -442,11 +568,11 @@ function Graph3DScene({
                 if (onNodeHover) onNodeHover(null);
               }}
             >
-              <sphereGeometry args={[radius, 12, 12]} />
+              <sphereGeometry args={[finalRadius, 12, 12]} />
               <meshStandardMaterial
-                color={isSelected ? '#ef4444' : isHovered ? '#fbbf24' : color}
-                emissive={isSelected ? '#ef4444' : isHovered ? '#fbbf24' : color}
-                emissiveIntensity={isSelected ? 0.5 : isHovered ? 0.3 : 0.1}
+                color={finalColor}
+                emissive={finalColor}
+                emissiveIntensity={emissiveIntensity}
               />
             </mesh>
           );
@@ -488,6 +614,12 @@ export default function ForceDirectedGraph3D({
   collisionRadius = 1.0,
   nodeSizeMultiplier = 1.0,
   edgeOpacity = 0.6,
+  colorBy = 'library',
+  sizeBy = 'downloads',
+  colorScheme = 'viridis',
+  highlightedNodeId,
+  familyFilter,
+  searchQuery,
 }: ForceDirectedGraph3DProps) {
   // Calculate bounds for camera
   const bounds = useMemo(() => {
@@ -582,6 +714,12 @@ export default function ForceDirectedGraph3D({
           collisionRadius={collisionRadius}
           nodeSizeMultiplier={nodeSizeMultiplier}
           edgeOpacity={edgeOpacity}
+          colorBy={colorBy}
+          sizeBy={sizeBy}
+          colorScheme={colorScheme}
+          highlightedNodeId={highlightedNodeId}
+          familyFilter={familyFilter}
+          searchQuery={searchQuery}
         />
       </Canvas>
     </div>

frontend/src/components/visualizations/ForceDirectedGraph3DInstanced.tsx

@@ -11,8 +11,13 @@ import { Canvas, useFrame, useThree } from '@react-three/fiber';
 import { OrbitControls } from '@react-three/drei';
 import * as THREE from 'three';
 import { GraphNode, GraphLink, EdgeType } from './ForceDirectedGraph';
+import { getContinuousColorScale, LIBRARY_COLORS, PIPELINE_COLORS } from '../../utils/rendering/colors';
 import './ForceDirectedGraph.css';
 
+export type ColorByOption = 'library' | 'pipeline' | 'downloads' | 'likes' | 'edge_type';
+export type SizeByOption = 'downloads' | 'likes' | 'uniform';
+export type ColorScheme = 'viridis' | 'plasma' | 'inferno' | 'coolwarm';
+
 export interface ForceDirectedGraph3DInstancedProps {
   width: number;
   height: number;
@@ -30,20 +35,14 @@ export interface ForceDirectedGraph3DInstancedProps {
   collisionRadius?: number;
   nodeSizeMultiplier?: number;
   edgeOpacity?: number;
+  colorBy?: ColorByOption;
+  sizeBy?: SizeByOption;
+  colorScheme?: ColorScheme;
+  highlightedNodeId?: string | null;
+  familyFilter?: string;
+  searchQuery?: string;
 }
 
-// Color scheme for different libraries
-const LIBRARY_COLORS: Record<string, string> = {
-  transformers: '#3b82f6',      // Blue
-  pytorch: '#ef4444',           // Red
-  tensorflow: '#f97316',        // Orange
-  diffusers: '#8b5cf6',         // Purple
-  'sentence-transformers': '#10b981', // Green
-  timm: '#06b6d4',              // Cyan
-  peft: '#ec4899',              // Pink
-  default: '#6b7280',           // Gray
-};
-
 // Color scheme for different edge types
 const EDGE_COLORS: Record<EdgeType, THREE.Color> = {
   finetune: new THREE.Color('#3b82f6'),      // Blue
@@ -54,18 +53,40 @@ const EDGE_COLORS: Record<EdgeType, THREE.Color> = {
 };
 
 /**
- * Get color for a node based on its library
+ * Get color for a node based on colorBy option
  */
-function getNodeColor(library: string | undefined): THREE.Color {
-  const colorHex = LIBRARY_COLORS[library?.toLowerCase() || ''] || LIBRARY_COLORS.default;
+function getNodeColorByOption(
+  node: GraphNode,
+  colorBy: ColorByOption,
+  colorScale?: (value: number) => string
+): THREE.Color {
+  if (colorBy === 'downloads' && colorScale) {
+    return new THREE.Color(colorScale(node.downloads || 0));
+  }
+  if (colorBy === 'likes' && colorScale) {
+    return new THREE.Color(colorScale(node.likes || 0));
+  }
+  if (colorBy === 'pipeline') {
+    const colorHex = PIPELINE_COLORS[node.pipeline?.toLowerCase() || 'unknown'] || '#6b7280';
+    return new THREE.Color(colorHex);
+  }
+  // Default: library
+  const colorHex = LIBRARY_COLORS[node.library?.toLowerCase() || 'unknown'] || '#6b7280';
   return new THREE.Color(colorHex);
 }
 
 /**
- * Calculate node size based on downloads (log scale)
+ * Calculate node size based on sizeBy option
  */
-function getNodeSize(downloads: number): number {
-  return 0.3 + Math.log10(Math.max(downloads, 1)) * 0.15;
+function getNodeSizeByOption(node: GraphNode, sizeBy: SizeByOption): number {
+  if (sizeBy === 'downloads') {
+    return 0.3 + Math.log10(Math.max(node.downloads || 1, 1)) * 0.15;
+  }
+  if (sizeBy === 'likes') {
+    return 0.3 + Math.log10(Math.max(node.likes || 1, 1)) * 0.2;
+  }
+  // uniform
+  return 0.5;
 }
 
 /**
@@ -78,6 +99,12 @@ function InstancedNodes({
   onNodeHover,
   maxVisible = 500000,
   nodeSizeMultiplier = 1.0,
+  colorBy = 'library',
+  sizeBy = 'downloads',
+  colorScheme = 'viridis',
+  highlightedNodeId,
+  familyFilter,
+  searchQuery,
 }: {
   nodes: GraphNode[];
   selectedNodeId?: string | null;
@@ -85,19 +112,50 @@ function InstancedNodes({
   onNodeHover?: (node: GraphNode | null) => void;
   maxVisible?: number;
   nodeSizeMultiplier?: number;
+  colorBy?: ColorByOption;
+  sizeBy?: SizeByOption;
+  colorScheme?: ColorScheme;
+  highlightedNodeId?: string | null;
+  familyFilter?: string;
+  searchQuery?: string;
 }) {
   const meshRef = useRef<THREE.InstancedMesh>(null);
   const { camera, raycaster, pointer } = useThree();
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   
+  // Filter nodes by family and search query first
+  const preFilteredNodes = useMemo(() => {
+    let result = nodes;
+    
+    // Filter by family (organization prefix)
+    if (familyFilter && familyFilter.trim()) {
+      const filter = familyFilter.toLowerCase();
+      result = result.filter(node => {
+        const nodeId = node.id.toLowerCase();
+        return nodeId.startsWith(filter + '/') || nodeId.includes('/' + filter + '/');
+      });
+    }
+    
+    // Filter by search query
+    if (searchQuery && searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(node => 
+        node.id.toLowerCase().includes(query) ||
+        node.title?.toLowerCase().includes(query)
+      );
+    }
+    
+    return result;
+  }, [nodes, familyFilter, searchQuery]);
+  
   // Limit nodes for performance
   const visibleNodes = useMemo(() => {
-    if (nodes.length <= maxVisible) return nodes;
+    if (preFilteredNodes.length <= maxVisible) return preFilteredNodes;
     // Sort by downloads and take top N
-    return [...nodes]
+    return [...preFilteredNodes]
       .sort((a, b) => (b.downloads || 0) - (a.downloads || 0))
       .slice(0, maxVisible);
-  }, [nodes, maxVisible]);
+  }, [preFilteredNodes, maxVisible]);
   
   // Node ID to index map for lookup
   const nodeIndexMap = useMemo(() => {
@@ -106,6 +164,17 @@ function InstancedNodes({
     return map;
   }, [visibleNodes]);
   
+  // Create color scale for continuous colorBy options
+  const colorScale = useMemo(() => {
+    if (colorBy === 'downloads' || colorBy === 'likes') {
+      const values = visibleNodes.map(n => colorBy === 'downloads' ? (n.downloads || 0) : (n.likes || 0));
+      const min = Math.min(...values, 0);
+      const max = Math.max(...values, 1);
+      return getContinuousColorScale(min, max, colorScheme, true);
+    }
+    return undefined;
+  }, [colorBy, colorScheme, visibleNodes]);
+  
   // Pre-compute matrices and colors
   const { matrices, colors, sizes } = useMemo(() => {
     const matrices: THREE.Matrix4[] = [];
@@ -118,18 +187,18 @@ function InstancedNodes({
       const x = node.x || 0;
       const y = node.y || 0;
       const z = node.z || 0;
-      const size = getNodeSize(node.downloads || 0) * nodeSizeMultiplier;
+      const size = getNodeSizeByOption(node, sizeBy) * nodeSizeMultiplier;
       
       tempMatrix.makeScale(size, size, size);
       tempMatrix.setPosition(x, y, z);
       matrices.push(tempMatrix.clone());
       
-      colors.push(getNodeColor(node.library));
+      colors.push(getNodeColorByOption(node, colorBy, colorScale));
       sizes.push(size);
     });
     
     return { matrices, colors, sizes };
-  }, [visibleNodes]);
+  }, [visibleNodes, colorBy, sizeBy, colorScale, nodeSizeMultiplier]);
   
   // Update instance attributes when data changes
   useEffect(() => {
@@ -141,12 +210,15 @@ function InstancedNodes({
     matrices.forEach((matrix, i) => {
       mesh.setMatrixAt(i, matrix);
       
-      // Highlight selected/hovered nodes
+      // Highlight selected/hovered/highlighted nodes
       const isSelected = visibleNodes[i]?.id === selectedNodeId;
+      const isHighlighted = visibleNodes[i]?.id === highlightedNodeId;
       const isHovered = i === hoveredIndex;
       
       if (isSelected) {
         tempColor.set('#ef4444'); // Red for selected
+      } else if (isHighlighted) {
+        tempColor.set('#22d3ee'); // Cyan for highlighted (search result)
       } else if (isHovered) {
         tempColor.set('#fbbf24'); // Yellow for hovered
       } else {
@@ -158,7 +230,7 @@ function InstancedNodes({
     
     mesh.instanceMatrix.needsUpdate = true;
     if (mesh.instanceColor) mesh.instanceColor.needsUpdate = true;
-  }, [matrices, colors, selectedNodeId, hoveredIndex, visibleNodes]);
+  }, [matrices, colors, selectedNodeId, highlightedNodeId, hoveredIndex, visibleNodes]);
   
   // Raycasting for hover/click
   useFrame(() => {
@@ -219,15 +291,44 @@ function Edges({
   enabledEdgeTypes,
   maxVisible = 100000,
   edgeOpacity = 0.6,
+  familyFilter,
+  searchQuery,
 }: {
   nodes: GraphNode[];
   links: GraphLink[];
   enabledEdgeTypes?: Set<EdgeType>;
   maxVisible?: number;
   edgeOpacity?: number;
+  familyFilter?: string;
+  searchQuery?: string;
 }) {
   const lineRef = useRef<THREE.LineSegments>(null);
   
+  // Filter nodes by family and search query first
+  const filteredNodeIds = useMemo(() => {
+    let result = nodes;
+    
+    // Filter by family (organization prefix)
+    if (familyFilter && familyFilter.trim()) {
+      const filter = familyFilter.toLowerCase();
+      result = result.filter(node => {
+        const nodeId = node.id.toLowerCase();
+        return nodeId.startsWith(filter + '/') || nodeId.includes('/' + filter + '/');
+      });
+    }
+    
+    // Filter by search query
+    if (searchQuery && searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(node => 
+        node.id.toLowerCase().includes(query) ||
+        node.title?.toLowerCase().includes(query)
+      );
+    }
+    
+    return new Set(result.map(n => n.id));
+  }, [nodes, familyFilter, searchQuery]);
+  
   // Create node lookup map
   const nodeMap = useMemo(() => {
     const map = new Map<string, GraphNode>();
@@ -239,6 +340,7 @@ function Edges({
   const visibleLinks = useMemo(() => {
     let filtered = links;
     
+    // Filter by edge types
     if (enabledEdgeTypes && enabledEdgeTypes.size > 0) {
       filtered = links.filter(link => {
         const linkTypes = link.edge_types || [link.edge_type];
@@ -246,12 +348,21 @@ function Edges({
       });
     }
     
+    // Filter to only include links where both source and target are in filtered nodes
+    if (familyFilter || searchQuery) {
+      filtered = filtered.filter(link => {
+        const sourceId = typeof link.source === 'string' ? link.source : link.source?.id;
+        const targetId = typeof link.target === 'string' ? link.target : link.target?.id;
+        return filteredNodeIds.has(sourceId || '') && filteredNodeIds.has(targetId || '');
+      });
+    }
+    
     if (filtered.length > maxVisible) {
       return filtered.slice(0, maxVisible);
     }
     
     return filtered;
-  }, [links, enabledEdgeTypes, maxVisible]);
+  }, [links, enabledEdgeTypes, maxVisible, familyFilter, searchQuery, filteredNodeIds]);
   
   // Build geometry
   const geometry = useMemo(() => {
@@ -316,6 +427,12 @@ function Scene({
   maxVisibleEdges = 100000,
   nodeSizeMultiplier = 1.0,
   edgeOpacity = 0.6,
+  colorBy = 'library',
+  sizeBy = 'downloads',
+  colorScheme = 'viridis',
+  highlightedNodeId,
+  familyFilter,
+  searchQuery,
 }: ForceDirectedGraph3DInstancedProps) {
   return (
     <>
@@ -325,6 +442,8 @@ function Scene({
         enabledEdgeTypes={enabledEdgeTypes}
         maxVisible={maxVisibleEdges}
         edgeOpacity={edgeOpacity}
+        familyFilter={familyFilter}
+        searchQuery={searchQuery}
       />
       <InstancedNodes
         nodes={nodes}
@@ -333,6 +452,12 @@ function Scene({
         onNodeHover={onNodeHover}
         maxVisible={maxVisibleNodes}
         nodeSizeMultiplier={nodeSizeMultiplier}
+        colorBy={colorBy}
+        sizeBy={sizeBy}
+        colorScheme={colorScheme}
+        highlightedNodeId={highlightedNodeId}
+        familyFilter={familyFilter}
+        searchQuery={searchQuery}
       />
     </>
   );
@@ -358,6 +483,12 @@ export default function ForceDirectedGraph3DInstanced({
   collisionRadius = 1.0,
   nodeSizeMultiplier = 1.0,
   edgeOpacity = 0.6,
+  colorBy = 'library',
+  sizeBy = 'downloads',
+  colorScheme = 'viridis',
+  highlightedNodeId,
+  familyFilter,
+  searchQuery,
 }: ForceDirectedGraph3DInstancedProps) {
   // Calculate bounds for camera positioning
   const bounds = useMemo(() => {
@@ -458,25 +589,21 @@ export default function ForceDirectedGraph3DInstanced({
           height={height}
           nodeSizeMultiplier={nodeSizeMultiplier}
           edgeOpacity={edgeOpacity}
+          colorBy={colorBy}
+          sizeBy={sizeBy}
+          colorScheme={colorScheme}
+          highlightedNodeId={highlightedNodeId}
+          familyFilter={familyFilter}
+          searchQuery={searchQuery}
         />
       </Canvas>
       
       {/* Performance info overlay */}
-      <div className="graph-performance-info" style={{
-        position: 'absolute',
-        top: '10px',
-        right: '10px',
-        padding: '8px 12px',
-        background: 'rgba(0,0,0,0.7)',
-        color: '#fff',
-        borderRadius: '4px',
-        fontSize: '12px',
-        fontFamily: 'monospace',
-      }}>
+      <div className="graph-performance-info">
         <div>Nodes: {nodes.length.toLocaleString()}</div>
         <div>Edges: {links.length.toLocaleString()}</div>
         {nodes.length > maxVisibleNodes && (
-          <div style={{ color: '#f59e0b' }}>
+          <div className="graph-performance-warning">
             Showing top {maxVisibleNodes.toLocaleString()} by popularity
           </div>
         )}

frontend/src/stores/filterStore.ts

@@ -57,17 +57,20 @@ export interface FilterState {
   getActiveFilterCount: () => number;
 }
 
-// Load theme from localStorage or default to light
+// Load theme from localStorage or system preference, default to dark
 const getInitialTheme = (): Theme => {
   if (typeof window !== 'undefined') {
     const saved = localStorage.getItem('theme');
     if (saved === 'dark' || saved === 'light') return saved;
-    // Check system preference
+    // Check system preference (prefers-color-scheme)
     if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
       return 'dark';
     }
+    // If system prefers light, check if user has explicitly set dark before
+    // Otherwise default to dark mode
+    return 'dark';
   }
-  return 'light';
+  return 'dark';
 };
 
 export const useFilterStore = create<FilterState>((set, get) => ({
@@ -111,6 +114,7 @@ export const useFilterStore = create<FilterState>((set, get) => ({
     set({ theme });
     if (typeof window !== 'undefined') {
       localStorage.setItem('theme', theme);
+      localStorage.setItem('theme-preference-set', 'true');
       document.documentElement.setAttribute('data-theme', theme);
     }
   },

frontend/src/utils/api/graphApi.ts

@@ -22,6 +22,7 @@ export interface NetworkGraphResponse {
 
 /**
  * Fetch family network graph for a specific model
+ * Includes retry logic for rate limiting (429 errors)
  */
 export async function fetchFamilyNetwork(
   modelId: string,
@@ -46,33 +47,84 @@ export async function fetchFamilyNetwork(
 
   const url = `${API_BASE}/api/network/family/${encodeURIComponent(modelId)}${params.toString() ? '?' + params.toString() : ''}`;
   
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch network graph: ${response.statusText}`);
-  }
+  // Retry logic for rate limiting
+  const maxRetries = 3;
+  const baseDelay = 2000;
+  
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    const response = await fetch(url);
+    
+    // Handle 429 (Too Many Requests) with exponential backoff
+    if (response.status === 429) {
+      if (attempt === maxRetries - 1) {
+        let errorMessage = 'Rate limit exceeded. Please wait a moment and try again.';
+        try {
+          const errorData = await response.json();
+          if (errorData.detail) {
+            errorMessage = errorData.detail;
+          }
+          const retryAfter = response.headers.get('Retry-After');
+          if (retryAfter) {
+            errorMessage += ` Please wait ${retryAfter} seconds.`;
+          }
+        } catch {
+          // If response is not JSON, use default message
+        }
+        throw new Error(errorMessage);
+      }
+      
+      const retryAfter = response.headers.get('Retry-After');
+      const delay = retryAfter 
+        ? parseInt(retryAfter) * 1000 
+        : baseDelay * Math.pow(2, attempt) + Math.random() * 1000;
+      
+      console.warn(`Rate limit hit (429). Retrying in ${Math.round(delay / 1000)}s... (attempt ${attempt + 1}/${maxRetries})`);
+      await new Promise(resolve => setTimeout(resolve, delay));
+      continue;
+    }
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch network graph: ${response.statusText}`);
+    }
 
-  const data = await response.json();
+    const data = await response.json();
+    
+    // Transform the response to match our types
+    return {
+      nodes: data.nodes || [],
+      links: data.links || [],
+      statistics: data.statistics,
+      root_model: data.root_model || modelId,
+    };
+  }
   
-  // Transform the response to match our types
-  return {
-    nodes: data.nodes || [],
-    links: data.links || [],
-    statistics: data.statistics,
-    root_model: data.root_model || modelId,
-  };
+  // Should never reach here
+  throw new Error('Failed to fetch network graph after retries');
 }
 
 /**
  * Fetch full derivative network graph for ALL models in the database
+ * Includes retry logic for rate limiting (429 errors)
+ * 
+ * Use minDownloads and maxNodes to reduce network size for better performance.
  */
 export async function fetchFullDerivativeNetwork(
   options: {
     edgeTypes?: EdgeType[];
     includeEdgeAttributes?: boolean;
+    minDownloads?: number;
+    maxNodes?: number;
+    usePrecomputed?: boolean;
   } = {}
 ): Promise<NetworkGraphResponse> {
   // Default to false for performance with large graphs
-  const { edgeTypes, includeEdgeAttributes = false } = options;
+  const { 
+    edgeTypes, 
+    includeEdgeAttributes = false,
+    minDownloads = 0,
+    maxNodes,
+    usePrecomputed = true
+  } = options;
 
   const params = new URLSearchParams();
   if (edgeTypes && edgeTypes.length > 0) {
@@ -81,38 +133,92 @@ export async function fetchFullDerivativeNetwork(
   if (includeEdgeAttributes !== undefined) {
     params.append('include_edge_attributes', includeEdgeAttributes.toString());
   }
+  if (minDownloads > 0) {
+    params.append('min_downloads', minDownloads.toString());
+  }
+  if (maxNodes !== undefined) {
+    params.append('max_nodes', maxNodes.toString());
+  }
+  if (usePrecomputed !== undefined) {
+    params.append('use_precomputed', usePrecomputed.toString());
+  }
 
   const url = `${API_BASE}/api/network/full-derivatives${params.toString() ? '?' + params.toString() : ''}`;
   
-  let response: Response;
-  try {
-    response = await fetch(url);
-  } catch (error: any) {
-    throw new Error(`Network error: ${error.message || 'Failed to connect to server'}`);
-  }
+  // Retry logic for rate limiting
+  const maxRetries = 3;
+  const baseDelay = 2000; // Start with 2 seconds
   
-  if (!response.ok) {
-    let errorMessage = `Failed to fetch full derivative network: ${response.statusText}`;
+  for (let attempt = 0; attempt < maxRetries; attempt++) {
+    let response: Response;
     try {
-      const errorData = await response.json();
-      if (errorData.detail) {
-        errorMessage = errorData.detail;
+      response = await fetch(url);
+    } catch (error: any) {
+      if (attempt === maxRetries - 1) {
+        throw new Error(`Network error: ${error.message || 'Failed to connect to server'}`);
       }
-    } catch {
-      // If response is not JSON, use status text
+      // Wait before retrying
+      await new Promise(resolve => setTimeout(resolve, baseDelay * (attempt + 1)));
+      continue;
+    }
+    
+    // Handle 429 (Too Many Requests) with exponential backoff
+    if (response.status === 429) {
+      if (attempt === maxRetries - 1) {
+        let errorMessage = 'Rate limit exceeded. Please wait a moment and try again.';
+        try {
+          const errorData = await response.json();
+          if (errorData.detail) {
+            errorMessage = errorData.detail;
+          }
+          // Check for Retry-After header
+          const retryAfter = response.headers.get('Retry-After');
+          if (retryAfter) {
+            errorMessage += ` Please wait ${retryAfter} seconds.`;
+          }
+        } catch {
+          // If response is not JSON, use default message
+        }
+        throw new Error(errorMessage);
+      }
+      
+      // Calculate delay: exponential backoff with jitter
+      const retryAfter = response.headers.get('Retry-After');
+      const delay = retryAfter 
+        ? parseInt(retryAfter) * 1000 
+        : baseDelay * Math.pow(2, attempt) + Math.random() * 1000;
+      
+      console.warn(`Rate limit hit (429). Retrying in ${Math.round(delay / 1000)}s... (attempt ${attempt + 1}/${maxRetries})`);
+      await new Promise(resolve => setTimeout(resolve, delay));
+      continue;
+    }
+    
+    if (!response.ok) {
+      let errorMessage = `Failed to fetch full derivative network: ${response.statusText}`;
+      try {
+        const errorData = await response.json();
+        if (errorData.detail) {
+          errorMessage = errorData.detail;
+        }
+      } catch {
+        // If response is not JSON, use status text
+      }
+      throw new Error(errorMessage);
     }
-    throw new Error(errorMessage);
-  }
 
-  const data = await response.json();
+    const data = await response.json();
+    
+    // Transform the response to match our types
+    return {
+      nodes: data.nodes || [],
+      links: data.links || [],
+      statistics: data.statistics,
+      root_model: '', // No root model for full network
+    };
+  }
   
-  // Transform the response to match our types
-  return {
-    nodes: data.nodes || [],
-    links: data.links || [],
-    statistics: data.statistics,
-    root_model: '', // No root model for full network
-  };
+  // Should never reach here, but TypeScript needs it
+  throw new Error('Failed to fetch full derivative network after retries');
 }
 
 /**

precomputed_data/network_metadata.json

@@ -0,0 +1,10 @@
+{
+  "created_at": "2026-01-11T03:06:01.412270",
+  "version": "v1",
+  "nodes": 1860411,
+  "edges": 573653,
+  "include_edge_attributes": false,
+  "min_downloads": 0,
+  "max_nodes": null,
+  "file_size_mb": 281.78
+}

requirements.txt

@@ -7,3 +7,4 @@
 # Additional Space-specific requirements
 gradio>=4.0.0
 
+

upload_to_hf_dataset.py

@@ -130,3 +130,4 @@ if __name__ == "__main__":
         token=args.token
     )
 
+