png

modular_graph_and_candidates.py

@@ -531,7 +531,7 @@ function updateVisibility() {
 }
 document.getElementById('toggleRed').addEventListener('change', updateVisibility);
 
-const HF_LOGO_URI = "./static/hf-logo.svg";
+const HF_LOGO_URI = "./static/hf-logo.png";
 const graph = __GRAPH_DATA__;
 const W = innerWidth, H = innerHeight;
 const svg = d3.select('#dependency').call(d3.zoom().on('zoom', e => g.attr('transform', e.transform)));
@@ -556,13 +556,30 @@ const node = g.selectAll('g.node')
 
 const baseSel = node.filter(d => d.cls === 'base');
 if (HF_LOGO_URI){
-  baseSel.append('image').attr('href', HF_LOGO_URI);
+  baseSel.append('image')
+    .attr('href', HF_LOGO_URI)
+    .attr('width', 40)
+    .attr('height', 40)
+    .attr('x', -20)
+    .attr('y', -20)
+    .on('error', function() {
+      console.log('Image failed to load:', HF_LOGO_URI);
+      // Fallback to circle
+      d3.select(this.parentNode).append('circle')
+        .attr('r', 22).attr('fill', '#ffbe0b');
+    });
+  console.log('Loading logo from:', HF_LOGO_URI);
 }else{
   baseSel.append('circle').attr('r', d => 22*d.sz).attr('fill', '#ffbe0b');
 }
 node.filter(d => d.cls !== 'base').append('circle').attr('r', d => 20*d.sz);
 
-node.append('text').attr('class','node-label').attr('dy','-2.4em').text(d => d.id);
+node.append('text')
+  .attr('class','node-label')
+  .attr('dy','-2.4em')
+  .style('font-size', d => d.cls === 'base' ? '16px' : '14px')
+  .style('font-weight', d => d.cls === 'base' ? 'bold' : 'normal')
+  .text(d => d.id);
 
 const sim = d3.forceSimulation(graph.nodes)
   .force('link', d3.forceLink(graph.links).id(d => d.id).distance(520))