Add force-directed graph visualization and embedding view toggle

- Add ForceDirectedGraph component with color-coded edges for different relationship types (finetune, quantized, adapter, merge, parent)
- Add GraphPage with toggle between force-directed graph and 3D embedding view
- Add API utilities for fetching family network data
- Add 'Show All Models' toggle to disable sampling (show all models instead of 150k limit)
- Update backend to handle unlimited model requests (max_points >= 1M treated as unlimited)
- Add edge type filtering and legend in graph view
- Add color/size controls for embedding view
- Integrate GraphPage into main navigation

backend/api/main.py

@@ -360,20 +360,23 @@ async def get_models(
             "returned_count": 0
         }
     
-    if max_points is not None and len(filtered_df) > max_points:
+    # Handle max_points: None means no limit, very large number also means no limit
+    effective_max_points = None if max_points is None or max_points >= 1000000 else max_points
+    
+    if effective_max_points is not None and len(filtered_df) > effective_max_points:
         if 'library_name' in filtered_df.columns and filtered_df['library_name'].notna().any():
             # Sample proportionally by library, preserving all columns
             sampled_dfs = []
             for lib_name, group in filtered_df.groupby('library_name', group_keys=False):
-                n_samples = max(1, int(max_points * len(group) / len(filtered_df)))
+                n_samples = max(1, int(effective_max_points * len(group) / len(filtered_df)))
                 sampled_dfs.append(group.sample(min(len(group), n_samples), random_state=42))
             filtered_df = pd.concat(sampled_dfs, ignore_index=True)
-            if len(filtered_df) > max_points:
-                filtered_df = filtered_df.sample(n=max_points, random_state=42).reset_index(drop=True)
+            if len(filtered_df) > effective_max_points:
+                filtered_df = filtered_df.sample(n=effective_max_points, random_state=42).reset_index(drop=True)
             else:
                 filtered_df = filtered_df.reset_index(drop=True)
         else:
-            filtered_df = filtered_df.sample(n=max_points, random_state=42).reset_index(drop=True)
+            filtered_df = filtered_df.sample(n=effective_max_points, random_state=42).reset_index(drop=True)
     
     # Determine which embeddings to use
     if use_graph_embeddings and combined_embeddings is not None:

backend/api/routes/models.py

@@ -88,19 +88,22 @@ async def get_models(
             "returned_count": 0
         }
     
-    if max_points is not None and len(filtered_df) > max_points:
+    # Handle max_points: None means no limit, very large number also means no limit
+    effective_max_points = None if max_points is None or max_points >= 1000000 else max_points
+    
+    if effective_max_points is not None and len(filtered_df) > effective_max_points:
         if 'library_name' in filtered_df.columns and filtered_df['library_name'].notna().any():
             sampled_dfs = []
             for lib_name, group in filtered_df.groupby('library_name', group_keys=False):
-                n_samples = max(1, int(max_points * len(group) / len(filtered_df)))
+                n_samples = max(1, int(effective_max_points * len(group) / len(filtered_df)))
                 sampled_dfs.append(group.sample(min(len(group), n_samples), random_state=42))
             filtered_df = pd.concat(sampled_dfs, ignore_index=True)
-            if len(filtered_df) > max_points:
-                filtered_df = filtered_df.sample(n=max_points, random_state=42).reset_index(drop=True)
+            if len(filtered_df) > effective_max_points:
+                filtered_df = filtered_df.sample(n=effective_max_points, random_state=42).reset_index(drop=True)
             else:
                 filtered_df = filtered_df.reset_index(drop=True)
         else:
-            filtered_df = filtered_df.sample(n=max_points, random_state=42).reset_index(drop=True)
+            filtered_df = filtered_df.sample(n=effective_max_points, random_state=42).reset_index(drop=True)
     
     # Determine which embeddings to use
     if use_graph_embeddings and deps.combined_embeddings is not None:

frontend/src/App.css

@@ -630,6 +630,34 @@
     font-weight: 500;
   }
 
+  .control-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .control-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: var(--accent-blue);
+  }
+
+  .control-toggle-label {
+    font-size: 0.85rem;
+    color: var(--text-primary);
+    white-space: nowrap;
+  }
+
+  .control-info {
+    font-size: 0.75rem;
+    color: var(--text-tertiary);
+    font-style: italic;
+    margin-left: 0.25rem;
+  }
+
   .control-btn {
     padding: 0.35rem 0.75rem;
     border: 1px solid var(--border-medium);

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import LiveModelCounter from './components/ui/LiveModelCounter';
 import ModelPopup from './components/ui/ModelPopup';
 import AnalyticsPage from './pages/AnalyticsPage';
 import FamiliesPage from './pages/FamiliesPage';
+import GraphPage from './pages/GraphPage';
 // Types & Utils
 import { ModelPoint, Stats, SearchResult } from './types';
 import IntegratedSearch from './components/controls/IntegratedSearch';
@@ -82,6 +83,8 @@ function App() {
   const [semanticQueryModel] = useState<string | null>(null);
   const [showAnalytics, setShowAnalytics] = useState(false);
   const [showFamilies, setShowFamilies] = useState(false);
+  const [showGraph, setShowGraph] = useState(false);
+  const [showAllModels, setShowAllModels] = useState(false);
   
   const [, setSearchResults] = useState<SearchResult[]>([]);
   const [searchInput] = useState('');
@@ -195,8 +198,15 @@ function App() {
           params.append('search_query', searchQuery);
         }
         
-        // Request up to 150k models for scatter plots, limit network graph for performance
-        params.append('max_points', viewMode === 'network' ? '500' : '150000');
+        // Request models - either all or sampled
+        if (showAllModels) {
+          // Request all models (backend will handle if too many)
+          // Use a very large number to effectively mean "all"
+          params.append('max_points', '10000000'); // Effectively unlimited
+        } else {
+          // Request up to 150k models for scatter plots (sampled), limit network graph for performance
+          params.append('max_points', viewMode === 'network' ? '500' : '150000');
+        }
         // Add format parameter for MessagePack support
         params.append('format', 'msgpack');
 
@@ -270,7 +280,7 @@ function App() {
       setLoading(false);
       fetchDataAbortRef.current = null;
     }
-  }, [minDownloads, minLikes, searchQuery, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode]);
+  }, [minDownloads, minLikes, searchQuery, projectionMethod, baseModelsOnly, semanticSimilarityMode, semanticQueryModel, useGraphEmbeddings, selectedClusters, viewMode, showAllModels]);
 
   // Debounce times for different control types
   const SLIDER_DEBOUNCE_MS = 500; // Sliders need longer debounce
@@ -524,8 +534,9 @@ function App() {
                 onClick={() => {
                   setShowAnalytics(false);
                   setShowFamilies(false);
+                  setShowGraph(false);
                 }}
-                className={`nav-tab ${!showAnalytics && !showFamilies ? 'active' : ''}`}
+                className={`nav-tab ${!showAnalytics && !showFamilies && !showGraph ? 'active' : ''}`}
                 title="3D scatter plot of model embeddings — explore the model space interactively"
               >
                 Visualization
@@ -534,6 +545,7 @@ function App() {
                 onClick={() => {
                   setShowAnalytics(false);
                   setShowFamilies(true);
+                  setShowGraph(false);
                 }}
                 className={`nav-tab ${showFamilies ? 'active' : ''}`}
                 title="Browse model families and their lineage trees"
@@ -543,6 +555,18 @@ function App() {
               <button
                 onClick={() => {
                   setShowFamilies(false);
+                  setShowAnalytics(false);
+                  setShowGraph(true);
+                }}
+                className={`nav-tab ${showGraph ? 'active' : ''}`}
+                title="Force-directed graph showing model relationships and derivatives"
+              >
+                Graph
+              </button>
+              <button
+                onClick={() => {
+                  setShowFamilies(false);
+                  setShowGraph(false);
                   setShowAnalytics(true);
                 }}
                 className={`nav-tab ${showAnalytics ? 'active' : ''}`}
@@ -570,6 +594,8 @@ function App() {
               <AnalyticsPage />
             ) : showFamilies ? (
               <FamiliesPage />
+            ) : showGraph ? (
+              <GraphPage />
             ) : (
       <div className="visualization-layout">
         <div className="control-bar">
@@ -641,6 +667,26 @@ function App() {
                 </span>
               </div>
 
+              <span className="control-divider" />
+
+              {/* Show All Models Toggle */}
+              <div className="control-group">
+                <label className="control-toggle" title="Show all models (no sampling). When disabled, shows up to 150k models sampled proportionally by library, prioritizing base models and popular models.">
+                  <input
+                    type="checkbox"
+                    checked={showAllModels}
+                    onChange={(e) => setShowAllModels(e.target.checked)}
+                    className="control-checkbox"
+                  />
+                  <span className="control-toggle-label">Show All Models</span>
+                </label>
+                {!showAllModels && (
+                  <span className="control-info" title="Sampling strategy: Includes all base models, then adds popular derived models and diverse samples across libraries proportionally. Max 150k models for performance.">
+                    (Sampled)
+                  </span>
+                )}
+              </div>
+
             </div>
 
             {/* Right: Integrated Search */}

frontend/src/components/visualizations/ForceDirectedGraph.css

@@ -0,0 +1,145 @@
+.force-directed-graph-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--bg-secondary, #1a1a1a);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.force-directed-graph {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.force-directed-graph .links line {
+  transition: stroke-opacity 0.2s, stroke-width 0.2s;
+}
+
+.force-directed-graph .nodes circle {
+  transition: stroke-width 0.2s, r 0.2s;
+}
+
+.force-directed-graph .nodes circle:hover {
+  filter: brightness(1.2);
+}
+
+.force-directed-graph .labels text {
+  user-select: none;
+  pointer-events: none;
+}
+
+/* Edge type legend */
+.edge-type-legend {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  padding: 12px;
+  font-size: 12px;
+  z-index: 10;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.edge-type-legend h4 {
+  margin: 0 0 8px 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary, #fff);
+}
+
+.edge-type-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.edge-type-item:hover {
+  background-color: var(--bg-secondary, #2a2a2a);
+}
+
+.edge-type-item:last-child {
+  margin-bottom: 0;
+}
+
+.edge-type-color {
+  width: 20px;
+  height: 3px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.edge-type-label {
+  flex: 1;
+  color: var(--text-secondary, #ccc);
+  text-transform: capitalize;
+}
+
+.edge-type-item.disabled .edge-type-color {
+  opacity: 0.3;
+}
+
+.edge-type-item.disabled .edge-type-label {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+/* Graph controls */
+.graph-controls {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
+
+.graph-control-btn {
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 6px;
+  padding: 8px 12px;
+  color: var(--text-primary, #fff);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.graph-control-btn:hover {
+  background: var(--bg-secondary, #2a2a2a);
+  border-color: var(--border-hover, #555);
+}
+
+.graph-control-btn:active {
+  transform: scale(0.95);
+}
+
+/* Loading state */
+.graph-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-secondary, #999);
+  font-size: 14px;
+}
+
+/* Empty state */
+.graph-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--text-secondary, #999);
+  font-size: 14px;
+}

frontend/src/components/visualizations/ForceDirectedGraph.tsx

@@ -0,0 +1,376 @@
+/**
+ * Force-directed graph visualization showing model relationships.
+ * Displays different types of derivatives (finetunes, adapters, quantizations, merges)
+ * with color-coded edges and interactive nodes.
+ */
+import React, { useMemo, useRef, useEffect, useState, useCallback } from 'react';
+import * as d3 from 'd3';
+import './ForceDirectedGraph.css';
+
+export type EdgeType = 'finetune' | 'quantized' | 'adapter' | 'merge' | 'parent';
+
+export interface GraphNode {
+  id: string;
+  title: string;
+  downloads: number;
+  likes: number;
+  library: string;
+  pipeline: string;
+  x?: number;
+  y?: number;
+  fx?: number | null;
+  fy?: number | null;
+}
+
+export interface GraphLink {
+  source: string | GraphNode;
+  target: string | GraphNode;
+  edge_type: EdgeType;
+  edge_types?: EdgeType[];
+  change_in_downloads?: number;
+  change_in_likes?: number;
+}
+
+interface ProcessedLink {
+  source: string;
+  target: string;
+  edge_type: EdgeType;
+  edge_types?: EdgeType[];
+  change_in_downloads?: number;
+  change_in_likes?: number;
+}
+
+export interface ForceDirectedGraphProps {
+  width: number;
+  height: number;
+  nodes: GraphNode[];
+  links: GraphLink[];
+  onNodeClick?: (node: GraphNode) => void;
+  onNodeHover?: (node: GraphNode | null) => void;
+  selectedNodeId?: string | null;
+  enabledEdgeTypes?: Set<EdgeType>;
+  showLabels?: boolean;
+}
+
+// Color scheme for different edge types
+const EDGE_COLORS: Record<EdgeType, string> = {
+  finetune: '#3b82f6',      // Blue - fine-tuning
+  quantized: '#10b981',      // Green - quantization
+  adapter: '#f59e0b',         // Orange - adapters
+  merge: '#8b5cf6',          // Purple - merges
+  parent: '#6b7280',         // Gray - generic parent
+};
+
+const EDGE_STROKE_WIDTH: Record<EdgeType, number> = {
+  finetune: 2,
+  quantized: 1.5,
+  adapter: 1.5,
+  merge: 2,
+  parent: 1,
+};
+
+export default function ForceDirectedGraph({
+  width,
+  height,
+  nodes,
+  links,
+  onNodeClick,
+  onNodeHover,
+  selectedNodeId,
+  enabledEdgeTypes,
+  showLabels = true,
+}: ForceDirectedGraphProps) {
+  const svgRef = useRef<SVGSVGElement>(null);
+  const simulationRef = useRef<d3.Simulation<GraphNode, GraphLink> | null>(null);
+  const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+
+  // Filter links based on enabled edge types and ensure source/target are node IDs
+  const filteredLinks = useMemo((): ProcessedLink[] => {
+    let filtered = links;
+    if (enabledEdgeTypes && enabledEdgeTypes.size > 0) {
+      filtered = links.filter(link => {
+        const linkTypes = link.edge_types || [link.edge_type];
+        return linkTypes.some(type => enabledEdgeTypes.has(type));
+      });
+    }
+    // Ensure source and target are strings (node IDs)
+    return filtered.map(link => ({
+      ...link,
+      source: typeof link.source === 'string' ? link.source : (link.source as GraphNode).id,
+      target: typeof link.target === 'string' ? link.target : (link.target as GraphNode).id,
+    }));
+  }, [links, enabledEdgeTypes]);
+
+  // Filter nodes to only include those connected by filtered links
+  const filteredNodes = useMemo(() => {
+    if (!enabledEdgeTypes || enabledEdgeTypes.size === 0) {
+      return nodes;
+    }
+    const connectedNodeIds = new Set<string>();
+    filteredLinks.forEach(link => {
+      const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
+      const targetId = typeof link.target === 'string' ? link.target : link.target.id;
+      connectedNodeIds.add(sourceId);
+      connectedNodeIds.add(targetId);
+    });
+    return nodes.filter(node => connectedNodeIds.has(node.id));
+  }, [nodes, filteredLinks, enabledEdgeTypes]);
+
+  useEffect(() => {
+    if (!svgRef.current || filteredNodes.length === 0) return;
+
+    const svg = d3.select(svgRef.current);
+    svg.selectAll('*').remove();
+
+    // Create container
+    const g = svg.append('g');
+
+    // Set up zoom behavior
+    const zoom = d3.zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.1, 4])
+      .on('zoom', (event) => {
+        g.attr('transform', event.transform);
+      });
+
+    svg.call(zoom as any);
+
+    // Set initial transform
+    const initialTransform = d3.zoomIdentity.translate(width / 2, height / 2).scale(0.8);
+    svg.call(zoom.transform as any, initialTransform);
+
+    // Set up force simulation
+    const simulation = d3
+      .forceSimulation<GraphNode>(filteredNodes)
+      .force(
+        'link',
+        d3
+          .forceLink<GraphNode, ProcessedLink>(filteredLinks)
+          .id((d) => d.id)
+          .distance((d) => {
+            // Adjust distance based on edge type
+            const link = d as unknown as ProcessedLink;
+            const edgeType = link.edge_type;
+            switch (edgeType) {
+              case 'merge':
+                return 120; // Merges are more distinct
+              case 'finetune':
+                return 80;  // Fine-tunes are closer
+              case 'quantized':
+                return 60;   // Quantizations are very close
+              case 'adapter':
+                return 70;
+              default:
+                return 100;
+            }
+          })
+      )
+      .force('charge', d3.forceManyBody().strength(-300))
+      .force('center', d3.forceCenter(0, 0))
+      .force('collision', d3.forceCollide().radius((d) => {
+        // Node size based on downloads
+        const downloads = d.downloads || 0;
+        return 5 + Math.sqrt(downloads) / 200;
+      }));
+
+    simulationRef.current = simulation;
+
+    // Create arrow markers for directed edges
+    const defs = svg.append('defs');
+    Object.entries(EDGE_COLORS).forEach(([type, color]) => {
+      defs
+        .append('marker')
+        .attr('id', `arrow-${type}`)
+        .attr('viewBox', '0 -5 10 10')
+        .attr('refX', 15)
+        .attr('refY', 0)
+        .attr('markerWidth', 6)
+        .attr('markerHeight', 6)
+        .attr('orient', 'auto')
+        .append('path')
+        .attr('d', 'M0,-5L10,0L0,5')
+        .attr('fill', color);
+    });
+
+    // Create links
+    const link = g
+      .append('g')
+      .attr('class', 'links')
+      .selectAll('line')
+      .data(filteredLinks)
+      .join('line')
+      .attr('stroke', (d) => {
+        const edgeType = d.edge_type;
+        return EDGE_COLORS[edgeType] || EDGE_COLORS.parent;
+      })
+      .attr('stroke-width', (d) => {
+        const edgeType = d.edge_type;
+        return EDGE_STROKE_WIDTH[edgeType] || 1;
+      })
+      .attr('stroke-opacity', 0.6)
+      .attr('marker-end', (d) => {
+        const edgeType = d.edge_type;
+        return `url(#arrow-${edgeType})`;
+      })
+      .style('cursor', 'pointer')
+      .on('mouseenter', function(event, d) {
+        d3.select(this).attr('stroke-opacity', 1).attr('stroke-width', (d) => {
+          const edgeType = d.edge_type;
+          return (EDGE_STROKE_WIDTH[edgeType] || 1) + 1;
+        });
+      })
+      .on('mouseleave', function(event, d) {
+        d3.select(this).attr('stroke-opacity', 0.6).attr('stroke-width', (d) => {
+          const edgeType = d.edge_type;
+          return EDGE_STROKE_WIDTH[edgeType] || 1;
+        });
+      });
+
+    // Create nodes
+    const node = g
+      .append('g')
+      .attr('class', 'nodes')
+      .selectAll('circle')
+      .data(filteredNodes)
+      .join('circle')
+      .attr('r', (d) => {
+        const downloads = d.downloads || 0;
+        return 3 + Math.sqrt(downloads) / 200;
+      })
+      .attr('fill', (d) => {
+        // Color by library if available
+        if (d.library) {
+          const colors = d3.schemeCategory10;
+          const libraries = Array.from(new Set(filteredNodes.map(n => n.library).filter(Boolean)));
+          const libIndex = libraries.indexOf(d.library);
+          return colors[libIndex % colors.length];
+        }
+        return '#6b7280';
+      })
+      .attr('stroke', (d) => {
+        if (selectedNodeId === d.id) {
+          return '#ef4444';
+        }
+        if (hoveredNodeId === d.id) {
+          return '#fbbf24';
+        }
+        return '#fff';
+      })
+      .attr('stroke-width', (d) => {
+        if (selectedNodeId === d.id) {
+          return 3;
+        }
+        if (hoveredNodeId === d.id) {
+          return 2;
+        }
+        return 1.5;
+      })
+      .style('cursor', 'pointer')
+      .on('click', (event, d) => {
+        event.stopPropagation();
+        if (onNodeClick) onNodeClick(d);
+      })
+      .on('mouseenter', (event, d) => {
+        setHoveredNodeId(d.id);
+        if (onNodeHover) onNodeHover(d);
+        d3.select(event.currentTarget as SVGCircleElement)
+          .attr('stroke-width', selectedNodeId === d.id ? 3 : 2.5);
+      })
+      .on('mouseleave', (event, d) => {
+        setHoveredNodeId(null);
+        if (onNodeHover) onNodeHover(null);
+        d3.select(event.currentTarget as SVGCircleElement)
+          .attr('stroke-width', selectedNodeId === d.id ? 3 : 1.5);
+      })
+      .call(drag(simulation) as any);
+
+    // Create labels
+    if (showLabels) {
+      const label = g
+        .append('g')
+        .attr('class', 'labels')
+        .selectAll('text')
+        .data(filteredNodes.filter((d) => {
+          // Show labels for nodes with high downloads or selected/hovered nodes
+          return (d.downloads || 0) > 10000 || selectedNodeId === d.id || hoveredNodeId === d.id;
+        }))
+        .join('text')
+        .text((d) => d.title || d.id.split('/').pop() || d.id)
+        .attr('font-size', '10px')
+        .attr('dx', 8)
+        .attr('dy', 4)
+        .attr('fill', '#fff')
+        .attr('stroke', '#000')
+        .attr('stroke-width', '0.5px')
+        .attr('paint-order', 'stroke')
+        .style('pointer-events', 'none');
+    }
+
+    // Update positions on simulation tick
+    simulation.on('tick', () => {
+      link
+        .attr('x1', (d) => {
+          const sourceId = (d as unknown as ProcessedLink).source;
+          const source = filteredNodes.find(n => n.id === sourceId);
+          return source?.x || 0;
+        })
+        .attr('y1', (d) => {
+          const sourceId = (d as unknown as ProcessedLink).source;
+          const source = filteredNodes.find(n => n.id === sourceId);
+          return source?.y || 0;
+        })
+        .attr('x2', (d) => {
+          const targetId = (d as unknown as ProcessedLink).target;
+          const target = filteredNodes.find(n => n.id === targetId);
+          return target?.x || 0;
+        })
+        .attr('y2', (d) => {
+          const targetId = (d as unknown as ProcessedLink).target;
+          const target = filteredNodes.find(n => n.id === targetId);
+          return target?.y || 0;
+        });
+
+      node.attr('cx', (d) => d.x || 0).attr('cy', (d) => d.y || 0);
+
+      if (showLabels) {
+        const label = g.selectAll<SVGTextElement, GraphNode>('.labels text');
+        label.attr('x', (d) => d.x || 0).attr('y', (d) => d.y || 0);
+      }
+    });
+
+    // Cleanup
+    return () => {
+      simulation.stop();
+    };
+  }, [filteredNodes, filteredLinks, width, height, onNodeClick, onNodeHover, selectedNodeId, hoveredNodeId, showLabels]);
+
+  return (
+    <div className="force-directed-graph-container">
+      <svg ref={svgRef} width={width} height={height} className="force-directed-graph" />
+    </div>
+  );
+}
+
+function drag(simulation: d3.Simulation<GraphNode, undefined>) {
+  function dragstarted(event: d3.D3DragEvent<SVGCircleElement, GraphNode, GraphNode>) {
+    if (!event.active) simulation.alphaTarget(0.3).restart();
+    event.subject.fx = event.subject.x;
+    event.subject.fy = event.subject.y;
+  }
+
+  function dragged(event: d3.D3DragEvent<SVGCircleElement, GraphNode, GraphNode>) {
+    event.subject.fx = event.x;
+    event.subject.fy = event.y;
+  }
+
+  function dragended(event: d3.D3DragEvent<SVGCircleElement, GraphNode, GraphNode>) {
+    if (!event.active) simulation.alphaTarget(0);
+    event.subject.fx = null;
+    event.subject.fy = null;
+  }
+
+  return d3
+    .drag<SVGCircleElement, GraphNode>()
+    .on('start', dragstarted)
+    .on('drag', dragged)
+    .on('end', dragended);
+}

frontend/src/pages/GraphPage.css

@@ -0,0 +1,289 @@
+.graph-page {
+  padding: 24px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  margin: 0 0 8px 0;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-primary, #fff);
+}
+
+.page-description {
+  margin: 0;
+  color: var(--text-secondary, #999);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.graph-controls-panel {
+  background: var(--bg-secondary, #1a1a1a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+
+.search-section {
+  position: relative;
+  margin-bottom: 16px;
+}
+
+.graph-search-input {
+  width: 100%;
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 6px;
+  padding: 10px 14px;
+  color: var(--text-primary, #fff);
+  font-size: 14px;
+  font-family: inherit;
+}
+
+.graph-search-input:focus {
+  outline: none;
+  border-color: var(--accent-color, #3b82f6);
+}
+
+.graph-search-input::placeholder {
+  color: var(--text-secondary, #999);
+}
+
+.search-results-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  margin-top: 4px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 100;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.search-result-item {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border-color, #333);
+  transition: background-color 0.2s;
+}
+
+.search-result-item:last-child {
+  border-bottom: none;
+}
+
+.search-result-item:hover {
+  background-color: var(--bg-secondary, #2a2a2a);
+}
+
+.result-title {
+  font-weight: 500;
+  color: var(--text-primary, #fff);
+  margin-bottom: 4px;
+}
+
+.result-meta {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary, #999);
+}
+
+.graph-settings {
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+}
+
+.setting-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.setting-group label {
+  font-size: 13px;
+  color: var(--text-secondary, #ccc);
+  font-weight: 500;
+}
+
+.depth-input {
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: var(--text-primary, #fff);
+  font-size: 13px;
+  width: 80px;
+}
+
+.depth-input:focus {
+  outline: none;
+  border-color: var(--accent-color, #3b82f6);
+}
+
+.view-mode-select,
+.color-by-select,
+.size-by-select {
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 6px;
+  padding: 6px 10px;
+  color: var(--text-primary, #fff);
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.view-mode-select:focus,
+.color-by-select:focus,
+.size-by-select:focus {
+  outline: none;
+  border-color: var(--accent-color, #3b82f6);
+}
+
+.embedding-info {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  z-index: 10;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.info-item {
+  display: flex;
+  gap: 6px;
+}
+
+.info-label {
+  color: var(--text-secondary, #999);
+}
+
+.info-value {
+  color: var(--text-primary, #fff);
+  font-weight: 600;
+}
+
+.current-model {
+  font-family: monospace;
+  font-size: 13px;
+  color: var(--text-primary, #fff);
+  background: var(--bg-primary, #0a0a0a);
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border-color, #333);
+  max-width: 400px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.graph-container {
+  position: relative;
+  width: 100%;
+  min-height: 600px;
+  background: var(--bg-secondary, #1a1a1a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.graph-error {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  color: var(--text-error, #ef4444);
+  text-align: center;
+}
+
+.error-hint {
+  margin-top: 8px;
+  color: var(--text-secondary, #999);
+  font-size: 14px;
+}
+
+.graph-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px;
+  color: var(--text-secondary, #999);
+  text-align: center;
+}
+
+.empty-hint {
+  margin-top: 16px;
+  font-size: 13px;
+}
+
+.empty-hint code {
+  background: var(--bg-primary, #0a0a0a);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+  color: var(--accent-color, #3b82f6);
+}
+
+.graph-stats {
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  background: var(--bg-primary, #0a0a0a);
+  border: 1px solid var(--border-color, #333);
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  gap: 16px;
+  font-size: 12px;
+  z-index: 10;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+}
+
+.stat-item {
+  display: flex;
+  gap: 6px;
+}
+
+.stat-label {
+  color: var(--text-secondary, #999);
+}
+
+.stat-value {
+  color: var(--text-primary, #fff);
+  font-weight: 600;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .graph-page {
+    padding: 16px;
+  }
+
+  .graph-settings {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .graph-stats {
+    flex-direction: column;
+    gap: 8px;
+  }
+}

frontend/src/pages/GraphPage.tsx

@@ -0,0 +1,469 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import ForceDirectedGraph, { EdgeType, GraphNode } from '../components/visualizations/ForceDirectedGraph';
+import ScatterPlot3D from '../components/visualizations/ScatterPlot3D';
+import { fetchFamilyNetwork, getAvailableEdgeTypes } from '../utils/api/graphApi';
+import LoadingProgress from '../components/ui/LoadingProgress';
+import { ModelPoint } from '../types';
+// Simple search input for graph page
+import { API_BASE } from '../config/api';
+import './GraphPage.css';
+
+const ALL_EDGE_TYPES: EdgeType[] = ['finetune', 'quantized', 'adapter', 'merge', 'parent'];
+
+type ViewMode = 'graph' | 'embedding';
+
+export default function GraphPage() {
+  const [modelId, setModelId] = useState<string>('');
+  const [viewMode, setViewMode] = useState<ViewMode>('graph');
+  const [nodes, setNodes] = useState<GraphNode[]>([]);
+  const [links, setLinks] = useState<any[]>([]);
+  const [embeddingData, setEmbeddingData] = useState<ModelPoint[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingEmbedding, setLoadingEmbedding] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<ModelPoint | null>(null);
+  const [enabledEdgeTypes, setEnabledEdgeTypes] = useState<Set<EdgeType>>(
+    new Set(ALL_EDGE_TYPES)
+  );
+  const [maxDepth, setMaxDepth] = useState<number | undefined>(5);
+  const [graphStats, setGraphStats] = useState<any>(null);
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [showSearchResults, setShowSearchResults] = useState(false);
+  const [colorBy, setColorBy] = useState<string>('library_name');
+  const [sizeBy, setSizeBy] = useState<string>('downloads');
+
+  // Load graph when modelId or maxDepth changes
+  useEffect(() => {
+    if (!modelId.trim()) {
+      setNodes([]);
+      setLinks([]);
+      setEmbeddingData([]);
+      setGraphStats(null);
+      return;
+    }
+
+    const loadGraph = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        // Load all edge types initially, filtering happens client-side
+        const data = await fetchFamilyNetwork(modelId, {
+          maxDepth,
+          edgeTypes: undefined, // Get all types, filter client-side
+          includeEdgeAttributes: true,
+        });
+
+        setNodes(data.nodes || []);
+        setLinks(data.links || []);
+        setGraphStats(data.statistics);
+
+        // Update enabled edge types based on available types (only on first load)
+        if (data.links && data.links.length > 0) {
+          const availableTypes = getAvailableEdgeTypes(data.links);
+          // If no types are currently enabled, enable all available
+          if (enabledEdgeTypes.size === 0 && availableTypes.size > 0) {
+            setEnabledEdgeTypes(new Set(availableTypes));
+          }
+        }
+      } catch (err: any) {
+        setError(err.message || 'Failed to load graph');
+        setNodes([]);
+        setLinks([]);
+        setEmbeddingData([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadGraph();
+  }, [modelId, maxDepth]); // Only reload when modelId or maxDepth changes
+
+  // Load embedding data when switching to embedding view or when nodes change
+  useEffect(() => {
+    if (viewMode !== 'embedding' || nodes.length === 0) {
+      setEmbeddingData([]);
+      return;
+    }
+
+    const loadEmbeddingData = async () => {
+      setLoadingEmbedding(true);
+      try {
+        // Fetch embedding data for all models in the graph
+        const modelIds = nodes.map(n => n.id);
+        const params = new URLSearchParams({
+          max_points: '10000', // Limit for performance
+          format: 'json',
+        });
+        
+        // Add search query to filter to our models
+        // Since we can't filter by exact model IDs easily, we'll fetch and filter client-side
+        const response = await fetch(`${API_BASE}/api/models?${params}`);
+        if (!response.ok) throw new Error('Failed to fetch embedding data');
+        
+        const data = await response.json();
+        const allModels: ModelPoint[] = Array.isArray(data) ? data : (data.models || []);
+        
+        // Filter to only models in our graph
+        const modelIdSet = new Set(modelIds);
+        const filteredModels = allModels.filter(m => modelIdSet.has(m.model_id));
+        
+        // If we don't have all models, try fetching them individually or use what we have
+        setEmbeddingData(filteredModels);
+      } catch (err: any) {
+        console.error('Failed to load embedding data:', err);
+        // Fallback: create ModelPoint objects from graph nodes (without coordinates)
+        const fallbackData: ModelPoint[] = nodes.map(node => ({
+          model_id: node.id,
+          x: 0,
+          y: 0,
+          z: 0,
+          library_name: node.library || null,
+          pipeline_tag: node.pipeline || null,
+          downloads: node.downloads || 0,
+          likes: node.likes || 0,
+          trending_score: null,
+          tags: null,
+          parent_model: null,
+          licenses: null,
+          family_depth: null,
+          cluster_id: null,
+          created_at: null,
+        }));
+        setEmbeddingData(fallbackData);
+      } finally {
+        setLoadingEmbedding(false);
+      }
+    };
+
+    loadEmbeddingData();
+  }, [viewMode, nodes]);
+
+  // Handle search
+  const handleSearch = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setShowSearchResults(false);
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        `${API_BASE}/api/search?q=${encodeURIComponent(query)}&limit=10`
+      );
+      if (!response.ok) throw new Error('Search failed');
+      const data = await response.json();
+      const results = Array.isArray(data) ? data : (data.models || []);
+      setSearchResults(results);
+      setShowSearchResults(true);
+    } catch (err) {
+      setSearchResults([]);
+      setShowSearchResults(false);
+    }
+  }, []);
+
+  const handleSearchResultClick = useCallback((model: any) => {
+    setModelId(model.model_id);
+    setShowSearchResults(false);
+  }, []);
+
+  const toggleEdgeType = useCallback((type: EdgeType) => {
+    setEnabledEdgeTypes(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(type)) {
+        newSet.delete(type);
+      } else {
+        newSet.add(type);
+      }
+      return newSet;
+    });
+  }, []);
+
+  const handleNodeClick = useCallback((node: GraphNode) => {
+    setSelectedNodeId(node.id);
+    setModelId(node.id);
+    // Find corresponding model in embedding data if available
+    if (embeddingData.length > 0) {
+      const model = embeddingData.find(m => m.model_id === node.id);
+      if (model) {
+        setSelectedModel(model);
+      }
+    }
+  }, [embeddingData]);
+
+  const handleEmbeddingPointClick = useCallback((model: ModelPoint) => {
+    setSelectedModel(model);
+    setSelectedNodeId(model.model_id);
+    setModelId(model.model_id);
+  }, []);
+
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({ width: 1000, height: 600 });
+
+  useEffect(() => {
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setDimensions({
+          width: rect.width,
+          height: Math.max(600, rect.height - 200),
+        });
+      }
+    };
+
+    updateDimensions();
+    window.addEventListener('resize', updateDimensions);
+    return () => window.removeEventListener('resize', updateDimensions);
+  }, []);
+
+  return (
+    <div className="graph-page">
+      <div className="page-header">
+        <h1>Model Relationship Graph</h1>
+        <p className="page-description">
+          Visualize model derivatives and relationships. Switch between force-directed graph view and embedding space view.
+          Explore how models are connected through fine-tuning, quantization, adapters, and merges.
+        </p>
+      </div>
+
+      <div className="graph-controls-panel">
+        <div className="search-section">
+          <input
+            type="text"
+            className="graph-search-input"
+            placeholder="Search for a model to visualize its relationships..."
+            value={modelId}
+            onChange={(e) => {
+              const value = e.target.value;
+              setModelId(value);
+              if (value.trim()) {
+                handleSearch(value);
+              } else {
+                setSearchResults([]);
+                setShowSearchResults(false);
+              }
+            }}
+            onFocus={() => {
+              if (searchResults.length > 0) {
+                setShowSearchResults(true);
+              }
+            }}
+          />
+          {showSearchResults && searchResults.length > 0 && (
+            <div className="search-results-dropdown">
+              {searchResults.map((model) => (
+                <div
+                  key={model.model_id}
+                  className="search-result-item"
+                  onClick={() => handleSearchResultClick(model)}
+                >
+                  <div className="result-title">{model.model_id}</div>
+                  <div className="result-meta">
+                    {model.library_name && <span>{model.library_name}</span>}
+                    {model.downloads > 0 && (
+                      <span>{model.downloads.toLocaleString()} downloads</span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <div className="graph-settings">
+          <div className="setting-group">
+            <label>View Mode:</label>
+            <select
+              value={viewMode}
+              onChange={(e) => setViewMode(e.target.value as ViewMode)}
+              className="view-mode-select"
+            >
+              <option value="graph">Force-Directed Graph</option>
+              <option value="embedding">Embedding Space (3D)</option>
+            </select>
+          </div>
+
+          {viewMode === 'embedding' && (
+            <>
+              <div className="setting-group">
+                <label>Color By:</label>
+                <select
+                  value={colorBy}
+                  onChange={(e) => setColorBy(e.target.value)}
+                  className="color-by-select"
+                >
+                  <option value="library_name">Library</option>
+                  <option value="pipeline_tag">Task Type</option>
+                  <option value="downloads">Downloads</option>
+                  <option value="likes">Likes</option>
+                  <option value="family_depth">Family Depth</option>
+                </select>
+              </div>
+
+              <div className="setting-group">
+                <label>Size By:</label>
+                <select
+                  value={sizeBy}
+                  onChange={(e) => setSizeBy(e.target.value)}
+                  className="size-by-select"
+                >
+                  <option value="downloads">Downloads</option>
+                  <option value="likes">Likes</option>
+                  <option value="none">Uniform</option>
+                </select>
+              </div>
+            </>
+          )}
+
+          <div className="setting-group">
+            <label>Max Depth:</label>
+            <input
+              type="number"
+              min="1"
+              max="20"
+              value={maxDepth || ''}
+              onChange={(e) => setMaxDepth(e.target.value ? parseInt(e.target.value) : undefined)}
+              className="depth-input"
+            />
+          </div>
+
+          <div className="setting-group">
+            <label>Current Model:</label>
+            <div className="current-model">{modelId || 'None selected'}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="graph-container" ref={containerRef}>
+        {loading ? (
+          <LoadingProgress message="Loading graph..." progress={0} />
+        ) : error ? (
+          <div className="graph-error">
+            <p>Error: {error}</p>
+            {error.includes('not found') && (
+              <p className="error-hint">Try searching for a different model.</p>
+            )}
+          </div>
+        ) : nodes.length === 0 ? (
+          <div className="graph-empty">
+            <p>Enter a model ID above to visualize its relationship graph.</p>
+            <p className="empty-hint">
+              Try popular models like: <code>bert-base-uncased</code>, <code>gpt2</code>, or <code>t5-base</code>
+            </p>
+          </div>
+        ) : viewMode === 'graph' ? (
+          <>
+            <ForceDirectedGraph
+              width={dimensions.width}
+              height={dimensions.height}
+              nodes={nodes}
+              links={links}
+              onNodeClick={handleNodeClick}
+              selectedNodeId={selectedNodeId}
+              enabledEdgeTypes={enabledEdgeTypes}
+              showLabels={true}
+            />
+            <EdgeTypeLegend
+              edgeTypes={ALL_EDGE_TYPES}
+              enabledTypes={enabledEdgeTypes}
+              onToggle={toggleEdgeType}
+            />
+            {graphStats && (
+              <div className="graph-stats">
+                <div className="stat-item">
+                  <span className="stat-label">Nodes:</span>
+                  <span className="stat-value">{graphStats.nodes || nodes.length}</span>
+                </div>
+                <div className="stat-item">
+                  <span className="stat-label">Edges:</span>
+                  <span className="stat-value">{graphStats.edges || links.length}</span>
+                </div>
+                {graphStats.avg_degree && (
+                  <div className="stat-item">
+                    <span className="stat-label">Avg Degree:</span>
+                    <span className="stat-value">{graphStats.avg_degree.toFixed(2)}</span>
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            {loadingEmbedding ? (
+              <LoadingProgress message="Loading embedding data..." progress={0} />
+            ) : embeddingData.length === 0 ? (
+              <div className="graph-empty">
+                <p>No embedding data available for these models.</p>
+                <p className="empty-hint">Try switching to graph view or selecting a different model.</p>
+              </div>
+            ) : (
+              <>
+                <ScatterPlot3D
+                  data={embeddingData}
+                  colorBy={colorBy}
+                  sizeBy={sizeBy}
+                  colorScheme="viridis"
+                  onPointClick={handleEmbeddingPointClick}
+                  hoveredModel={selectedModel}
+                />
+                <div className="embedding-info">
+                  <div className="info-item">
+                    <span className="info-label">Models:</span>
+                    <span className="info-value">{embeddingData.length}</span>
+                  </div>
+                  <div className="info-item">
+                    <span className="info-label">View:</span>
+                    <span className="info-value">Embedding Space</span>
+                  </div>
+                </div>
+              </>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface EdgeTypeLegendProps {
+  edgeTypes: EdgeType[];
+  enabledTypes: Set<EdgeType>;
+  onToggle: (type: EdgeType) => void;
+}
+
+const EDGE_COLORS: Record<EdgeType, string> = {
+  finetune: '#3b82f6',
+  quantized: '#10b981',
+  adapter: '#f59e0b',
+  merge: '#8b5cf6',
+  parent: '#6b7280',
+};
+
+const EDGE_LABELS: Record<EdgeType, string> = {
+  finetune: 'Fine-tuned',
+  quantized: 'Quantized',
+  adapter: 'Adapter',
+  merge: 'Merged',
+  parent: 'Parent',
+};
+
+function EdgeTypeLegend({ edgeTypes, enabledTypes, onToggle }: EdgeTypeLegendProps) {
+  return (
+    <div className="edge-type-legend">
+      <h4>Relationship Types</h4>
+      {edgeTypes.map((type) => (
+        <div
+          key={type}
+          className={`edge-type-item ${!enabledTypes.has(type) ? 'disabled' : ''}`}
+          onClick={() => onToggle(type)}
+        >
+          <div
+            className="edge-type-color"
+            style={{ backgroundColor: EDGE_COLORS[type] }}
+          />
+          <span className="edge-type-label">{EDGE_LABELS[type]}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/utils/api/graphApi.ts

@@ -0,0 +1,75 @@
+/**
+ * API utilities for fetching graph/network data
+ */
+import { API_BASE } from '../../config/api';
+import { GraphNode, GraphLink, EdgeType } from '../../components/visualizations/ForceDirectedGraph';
+
+export interface NetworkGraphResponse {
+  nodes: GraphNode[];
+  links: GraphLink[];
+  statistics?: {
+    nodes: number;
+    edges: number;
+    density: number;
+    avg_degree: number;
+    clustering: number;
+  };
+  root_model: string;
+}
+
+/**
+ * Fetch family network graph for a specific model
+ */
+export async function fetchFamilyNetwork(
+  modelId: string,
+  options: {
+    maxDepth?: number;
+    edgeTypes?: EdgeType[];
+    includeEdgeAttributes?: boolean;
+  } = {}
+): Promise<NetworkGraphResponse> {
+  const { maxDepth, edgeTypes, includeEdgeAttributes = true } = options;
+
+  const params = new URLSearchParams();
+  if (maxDepth !== undefined) {
+    params.append('max_depth', maxDepth.toString());
+  }
+  if (edgeTypes && edgeTypes.length > 0) {
+    params.append('edge_types', edgeTypes.join(','));
+  }
+  if (includeEdgeAttributes !== undefined) {
+    params.append('include_edge_attributes', includeEdgeAttributes.toString());
+  }
+
+  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}`);
+  }
+
+  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,
+  };
+}
+
+/**
+ * Get all available edge types from a graph response
+ */
+export function getAvailableEdgeTypes(links: GraphLink[]): Set<EdgeType> {
+  const types = new Set<EdgeType>();
+  links.forEach(link => {
+    if (link.edge_types && link.edge_types.length > 0) {
+      link.edge_types.forEach(type => types.add(type));
+    } else if (link.edge_type) {
+      types.add(link.edge_type);
+    }
+  });
+  return types;
+}