commit before WORKED, changing graph

src/fragments/d3-graph.html

@@ -1,149 +1,12 @@
-<div style="border: 1px solid #e2e8f0; border-radius: 8px; background: white; margin: 1.5rem 0;">
-    <div style="padding: 1rem; border-bottom: 1px solid #e2e8f0; background: #f8f9fa;">
-        <h4 style="margin: 0; color: #495057;">🔗 Interactive Model Dependency Graph</h4>
-        <p style="margin: 0.5rem 0 0 0; font-size: 0.9em; color: #6c757d;">
-            Explore how transformers models inherit from each other using the modular system. Click and drag nodes to interact!
-        </p>
+<div class="interactive-demo">
+    <div class="demo-header">
+        <h3>🔗 Model Dependency Graph</h3>
     </div>
-    
-    <div id="d3-graph-container" style="width: 100%; height: 500px; position: relative; overflow: hidden;">
-        <div id="loading-message" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6c757d; font-style: italic;">
-            Loading D3 visualization...
-        </div>
+    <div class="demo-content">
+        <iframe src="static/d3_dependency_graph.html" width="100%" height="600px" frameborder="0" style="border-radius: 8px; background: white;"></iframe>
     </div>
-    
-    <div style="padding: 1rem; border-top: 1px solid #e2e8f0; background: #f8f9fa; font-size: 0.9em; color: #6c757d;">
-        <strong>Legend:</strong>
-        • <span style="color: #3182ce;">Blue nodes</span>: Base models (e.g., Llama, BERT)
-        • <span style="color: #38a169;">Green nodes</span>: Derived models  
-        • <span style="color: #e53e3e;">Red nodes</span>: Standalone models
-        • <strong>Lines</strong>: Inheritance relationships
+    <div class="demo-footer">
+        Interactive dependency graph showing real relationships between Transformers models. 🟡 Base models (HuggingFace logo), 🔵 Derived modular models. Click and drag to explore!
     </div>
 </div>
 
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const container = document.getElementById('d3-graph-container');
-    const loadingMessage = document.getElementById('loading-message');
-    
-    // Check if D3 is available
-    if (typeof d3 === 'undefined') {
-        loadingMessage.textContent = 'D3.js library not loaded. Install D3 to see the interactive graph.';
-        return;
-    }
-    
-    // Sample data - in the real app this would come from your static/d3_dependency_graph.html
-    const nodes = [
-        { id: 'llama', group: 1, name: 'Llama' },
-        { id: 'mixtral', group: 2, name: 'Mixtral' },
-        { id: 'gemma', group: 2, name: 'Gemma' },
-        { id: 'qwen', group: 2, name: 'Qwen' },
-        { id: 'bert', group: 1, name: 'BERT' },
-        { id: 'roberta', group: 2, name: 'RoBERTa' },
-        { id: 'distilbert', group: 2, name: 'DistilBERT' },
-        { id: 'gpt2', group: 1, name: 'GPT-2' },
-        { id: 'mamba', group: 3, name: 'Mamba' }
-    ];
-    
-    const links = [
-        { source: 'llama', target: 'mixtral' },
-        { source: 'llama', target: 'gemma' },
-        { source: 'llama', target: 'qwen' },
-        { source: 'bert', target: 'roberta' },
-        { source: 'bert', target: 'distilbert' }
-    ];
-    
-    // Clear loading message
-    loadingMessage.style.display = 'none';
-    
-    // Create SVG
-    const width = container.offsetWidth;
-    const height = 500;
-    
-    const svg = d3.select(container)
-        .append('svg')
-        .attr('width', width)
-        .attr('height', height);
-    
-    // Create force simulation
-    const simulation = d3.forceSimulation(nodes)
-        .force('link', d3.forceLink(links).id(d => d.id).distance(100))
-        .force('charge', d3.forceManyBody().strength(-300))
-        .force('center', d3.forceCenter(width / 2, height / 2));
-    
-    // Create links
-    const link = svg.append('g')
-        .attr('stroke', '#999')
-        .attr('stroke-opacity', 0.6)
-        .selectAll('line')
-        .data(links)
-        .join('line')
-        .attr('stroke-width', 2);
-    
-    // Create nodes
-    const node = svg.append('g')
-        .attr('stroke', '#fff')
-        .attr('stroke-width', 1.5)
-        .selectAll('circle')
-        .data(nodes)
-        .join('circle')
-        .attr('r', 8)
-        .attr('fill', d => {
-            switch(d.group) {
-                case 1: return '#3182ce'; // Base models
-                case 2: return '#38a169'; // Derived models  
-                case 3: return '#e53e3e'; // Standalone models
-                default: return '#6c757d';
-            }
-        })
-        .call(d3.drag()
-            .on('start', dragstarted)
-            .on('drag', dragged)
-            .on('end', dragended));
-    
-    // Add labels
-    const labels = svg.append('g')
-        .selectAll('text')
-        .data(nodes)
-        .join('text')
-        .text(d => d.name)
-        .attr('font-size', '12px')
-        .attr('dx', 12)
-        .attr('dy', 4);
-    
-    // Update positions on tick
-    simulation.on('tick', () => {
-        link
-            .attr('x1', d => d.source.x)
-            .attr('y1', d => d.source.y)
-            .attr('x2', d => d.target.x)
-            .attr('y2', d => d.target.y);
-        
-        node
-            .attr('cx', d => d.x)
-            .attr('cy', d => d.y);
-            
-        labels
-            .attr('x', d => d.x)
-            .attr('y', d => d.y);
-    });
-    
-    // Drag functions
-    function dragstarted(event, d) {
-        if (!event.active) simulation.alphaTarget(0.3).restart();
-        d.fx = d.x;
-        d.fy = d.y;
-    }
-    
-    function dragged(event, d) {
-        d.fx = event.x;
-        d.fy = event.y;
-    }
-    
-    function dragended(event, d) {
-        if (!event.active) simulation.alphaTarget(0);
-        d.fx = null;
-        d.fy = null;
-    }
-});
-</script>

src/transformers-custom.css

@@ -263,15 +263,13 @@ img {
     margin: 1.5rem 0;
 }
 
-/* Table of contents styling - Fixed top left like ultrascale */
+/* Table of contents styling - Fixed positioning like ultrascale */
 @media (min-width: 1200px) {
     d-article {
-        overflow: visible;
+        overflow: visible !important;
     }
     
     d-contents {
-        position: sticky !important;
-        top: 10px !important;
         align-self: start !important;
         background: white !important;
         grid-column-start: 1 !important;
@@ -281,6 +279,9 @@ img {
         margin-top: 0em !important;
         padding-right: 3em !important;
         padding-left: 2em !important;
+        position: -webkit-sticky !important; /* For Safari */
+        position: sticky !important;
+        top: 10px !important;
         overflow-y: auto !important;
         height: calc(100vh - 40px) !important;
         scrollbar-width: none !important;
@@ -288,23 +289,33 @@ img {
         z-index: -100 !important;
         display: block !important;
         visibility: visible !important;
-        border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
     }
 }
 
 @media (max-width: 1199px) {
     d-contents {
-        background: #f8f9fa !important;
-        border: 1px solid #e9ecef !important;
-        border-radius: 8px !important;
-        padding: 1rem !important;
-        margin: 2rem 0 !important;
-        position: relative !important;
-        display: block !important;
-        visibility: visible !important;
+        display: none !important;
+        background: white !important;
+        justify-self: start !important;
+        align-self: start !important;
+        padding-bottom: 0.5em !important;
+        margin-bottom: 1em !important;
+        padding-left: 0.25em !important;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+        overflow-y: scroll !important;
+        height: calc(100vh - 40px) !important;
+        scrollbar-width: none !important;
+        z-index: -100 !important;
     }
 }
 
+/* Force TOC to be visible and override distill defaults */
+d-contents {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
 /* TOC Navigation styling */
 d-contents .toc-header {
     margin-bottom: 1.5rem;