six-degrees 0.3.0 → 0.4.0

package/.next/standalone/app/components/ForceGraph.js

@@ -2,6 +2,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
+import { localPhoto } from '../../lib/photos';
+import { recentre } from '../../lib/galaxy';
 
 // Connection fields are attacker-reachable: /api/ingest and /api/update-images
 // accept writes, and a page on any other site can POST to this app on localhost.
@@ -14,24 +16,18 @@ function esc(value) {
   ));
 }
 
-// Only paths this app itself produces, or ordinary remote images. Anything else
-// (javascript:, data:, an attribute-escaping payload) renders nothing.
-function safeImageUrl(url) {
-  const value = String(url ?? '');
-  return /^\/avatars\/[A-Za-z0-9_-]+\.(webp|png|jpe?g)$/.test(value) || /^https:\/\/[^"'\s<>]+$/.test(value)
-    ? value
-    : null;
-}
-
 // The id of the node at the centre, you. Not a connection's id (those come from
 // the database), and never shown.
 const CENTER_ID = '__center__';
 
 // Builds the avatar tooltip through the DOM rather than a string, so no value
-// can break out of the attribute it is written into.
+// can break out of the attribute it is written into. Only a photo saved on this
+// computer (lib/photos.js): not a link to LinkedIn, and never javascript:, data:
+// or an attribute-escaping payload. Nodes carry nothing else, and this checks
+// again.
 function renderPhoto(sel, d, size, borderColor) {
   sel.selectAll('*').remove();
-  const src = safeImageUrl(d.profile_image_url);
+  const src = localPhoto(d.profile_image_url);
   if (!src) { sel.style('opacity', 0); return; }
   sel.append('img')
     .attr('src', src)
@@ -41,106 +37,127 @@ function renderPhoto(sel, d, size, borderColor) {
     .on('error', function () { this.parentElement.style.display = 'none'; });
 }
 
-export default function ForceGraph({ connections, degree2 = [], onSelect, tierColors, mode, focusNodeRef, userName }) {
+// Reduce Motion, the Mac's accessibility setting. With it on, hovering and
+// re-fitting change at once instead of easing, and the selection ring holds still.
+function reducedMotion() {
+  return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+
+// The selection ring pulses on an element of its own, over the graph rather
+// than inside the <svg>. Animating anything inside the <svg> repaints every dot
+// on every frame, which at 30,000 people keeps a processor core busy for one
+// ring. Opacity and scale on a separate element are left to the compositor.
+const RING_CSS = `
+@keyframes galaxy-ring-pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.12); }
+}
+.galaxy-ring-pulse { animation: galaxy-ring-pulse 1.8s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .galaxy-ring-pulse { animation: none; opacity: 0.8; }
+}`;
+
+export default function ForceGraph({ connections, onSelect, tierColors, focusNodeRef, userName, selectedId = null }) {
   const svgRef = useRef(null);
-  const zoomTransformRef = useRef(null);  // Persist zoom across re-renders
-  const prevModeRef = useRef(mode);       // Track mode changes
-  const zoomToClusterRef = useRef(null);  // Function to zoom into a bridge cluster
-  const zoomOutRef = useRef(null);        // Function to zoom back to full view
-  const [focusedCluster, setFocusedCluster] = useState(null);
-  const [dimensions, setDimensions] = useState({ width: 800, height: 600 });
+  const ringRef = useRef(null);
+  const sceneRef = useRef(null);  // The scene on screen: { resize, select }
+  // The view, kept across rebuilds: the zoom, and the size of box it was set for.
+  const viewRef = useRef({ transform: null, size: null });
+  const sizeRef = useRef(null);
+  const [dimensions, setDimensions] = useState(null);
 
   // The scene is rebuilt from scratch whenever its inputs change, so only real
   // changes should count. A parent re-rendering hands over a new onSelect every
   // time; reading it through a ref keeps the scene from resetting on every click.
   const onSelectRef = useRef(onSelect);
   useEffect(() => { onSelectRef.current = onSelect; });
-  // The network view never uses degree2, so a new array there is not a change.
-  const sceneDegree2 = mode === 'degrees' ? degree2 : null;
+  const selectedIdRef = useRef(selectedId);
 
   useEffect(() => {
     const container = svgRef.current?.parentElement;
     if (!container) return;
     const updateSize = () => {
       // Only publish a genuinely new size. A fresh object every observation is
-      // never Object.is-equal, so React re-rendered and the whole scene was
-      // rebuilt on every callback — including the sub-pixel churn a scrollbar
-      // appearing and disappearing produces.
+      // never Object.is-equal, so React re-rendered on every callback —
+      // including the sub-pixel churn a scrollbar appearing and disappearing
+      // produces.
       const width = Math.round(container.clientWidth);
       const height = Math.round(container.clientHeight);
+      sizeRef.current = { width, height };
       setDimensions((prev) =>
-        prev.width === width && prev.height === height ? prev : { width, height }
+        prev && prev.width === width && prev.height === height ? prev : { width, height }
       );
     };
     updateSize();
-    // A resize rebuilds the whole scene, so wait for it to settle. Dragging a
-    // window edge, or anything that flickers the size, otherwise rebuilds on every
-    // frame — and a rebuild that itself changes the size never stops (TRAPS §29).
-    let timer = null;
-    const ro = new ResizeObserver(() => {
-      clearTimeout(timer);
-      timer = setTimeout(updateSize, 150);
-    });
+    // A resize only re-fits the view (below), so it no longer waits to settle.
+    // It used to rebuild the whole scene, and a rebuild that itself changed the
+    // size never stopped (TRAPS §29).
+    const ro = new ResizeObserver(updateSize);
     ro.observe(container);
-    return () => { ro.disconnect(); clearTimeout(timer); };
+    return () => ro.disconnect();
   }, []);
 
-  // Listen for cluster focus events from D3
+  // Selection moves the ring; it never rebuilds the scene.
   useEffect(() => {
-    const handler = (e) => setFocusedCluster(e.detail);
-    window.addEventListener('cluster-focus', handler);
-    return () => window.removeEventListener('cluster-focus', handler);
-  }, []);
+    selectedIdRef.current = selectedId;
+    sceneRef.current?.select(selectedId);
+  }, [selectedId]);
+
+  // Nor does a new size. Opening the side panel or the Filter panel used to
+  // rebuild the Galaxy: the layout started over, the selection ring was
+  // erased, and at 30,000 people the page stalled. Now the view slides over,
+  // at the same zoom, so what was in the middle stays in the middle.
+  useEffect(() => {
+    if (dimensions) sceneRef.current?.resize(dimensions);
+  }, [dimensions]);
 
+  const measured = dimensions !== null;
   useEffect(() => {
-    if (!svgRef.current || !connections.length) return;
-    let simulation = null;
-    const { width, height } = dimensions;
+    if (!measured || !svgRef.current || !connections.length) return;
     const svg = d3.select(svgRef.current);
     svg.selectAll('*').remove();
 
-    // Did the mode change? If so, reset zoom. Otherwise preserve it.
-    const modeChanged = mode !== prevModeRef.current;
-    prevModeRef.current = mode;
-    const savedTransform = modeChanged ? null : zoomTransformRef.current;
+    // The view as it was, moved for any change of size since it was set.
+    const size = sizeRef.current;
+    const { transform, size: setFor } = viewRef.current;
+    const saved = transform ? recentre(transform, setFor, size) : null;
 
     const select = (d) => onSelectRef.current?.(d);
-    if (mode === 'degrees') {
-      simulation = renderDegreesMode(svg, width, height, connections, sceneDegree2 || [], select, tierColors, savedTransform, zoomTransformRef, userName, zoomToClusterRef, zoomOutRef);
-    } else {
-      simulation = renderNetworkMode(svg, width, height, connections, select, tierColors, focusNodeRef, savedTransform, zoomTransformRef, userName);
-    }
+    const scene = renderNetworkMode(svg, ringRef.current, size, connections, select, tierColors, focusNodeRef, saved, viewRef, userName);
+    sceneRef.current = scene;
+    scene.select(selectedIdRef.current);
 
     return () => {
       // Stop the force simulation this render started.
       //
-      // It used to be left running. Every rebuild — and the scene rebuilt on
-      // any resize — added another simulation still ticking over the same
-      // nodes, so they fought each other and the graph shook. Refreshing made
-      // it worse because nothing ever stopped the old ones.
-      simulation?.stop();
+      // It used to be left running. Every rebuild — and the scene used to
+      // rebuild on any resize — added another simulation still ticking over
+      // the same nodes, so they fought each other and the graph shook.
+      // Refreshing made it worse because nothing ever stopped the old ones.
+      scene.simulation.stop();
+      // And any glide or fly-to still under way, which would otherwise go on
+      // moving the next scene's view. viewRef already holds where it was going.
+      svg.interrupt();
+      sceneRef.current = null;
       d3.selectAll('.graph-tooltip').remove();
     };
     // focusNodeRef and userName are read at build time on purpose; see above for
-    // why onSelect is not a dependency.
+    // why onSelect is not a dependency. The size is read through sizeRef: a new
+    // size re-fits the view rather than rebuilding.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connections, sceneDegree2, dimensions, tierColors, mode]);
+  }, [connections, tierColors, measured]);
 
   return (
     <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
-      <svg ref={svgRef} width={dimensions.width} height={dimensions.height} style={{ background: '#0a0a1a' }} />
-      {/* Back to all clusters button — shows when zoomed into a cluster */}
-      {focusedCluster && mode === 'degrees' && (
-        <button onClick={() => {
-          setFocusedCluster(null);
-          if (zoomOutRef.current) zoomOutRef.current();
-        }} style={{
-          position: 'absolute', top: 16, left: 16, zIndex: 20,
-          padding: '8px 16px', borderRadius: 8, border: 'none', cursor: 'pointer',
-          background: 'rgba(255,255,255,0.1)', color: '#fff', fontSize: 12, fontWeight: 600,
-          backdropFilter: 'blur(8px)',
-        }}>← All Bridges</button>
-      )}
+      <style>{RING_CSS}</style>
+      <svg ref={svgRef} width={dimensions?.width ?? 800} height={dimensions?.height ?? 600} style={{ background: '#0a0a1a' }} />
+      {/* The selection ring. The scene places it over the selected dot. */}
+      <div ref={ringRef} className="galaxy-ring" style={{
+        position: 'absolute', left: 0, top: 0, display: 'none',
+        pointerEvents: 'none', transformOrigin: '0 0',
+      }}>
+        <div className="galaxy-ring-pulse" style={{ boxSizing: 'border-box', border: '2.5px solid', borderRadius: '50%' }} />
+      </div>
       <div style={{ position: 'absolute', bottom: 20, left: 20, display: 'flex', gap: 12, fontSize: 11, color: '#888' }}>
         {Object.entries(tierColors).map(([tier, color]) => (
           <span key={tier} style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
@@ -148,17 +165,6 @@ export default function ForceGraph({ connections, degree2 = [], onSelect, tierCo
             {tier}
           </span>
         ))}
-        {mode === 'degrees' && (<>
-          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span style={{ width: 8, height: 8, borderRadius: 0, border: '2px solid #00ff88', background: 'transparent', display: 'inline-block' }} />
-            Mutual
-          </span>
-          <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
-            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#00ff88', display: 'inline-block' }} />
-            Catalyst
-          </span>
-        </>
-        )}
       </div>
     </div>
   );
@@ -183,23 +189,35 @@ function createTooltip() {
     .style('border', '1px solid rgba(255,255,255,0.2)').style('max-width', '280px');
 }
 
-function renderNetworkMode(svg, width, height, connections, onSelect, tierColors, focusNodeRef, savedTransform, zoomTransformRef, userName) {
+// A hovered dot eases up to 1.5 times its size and back, rather than jumping.
+// The transition is named, so it never cuts off another one on the same dot.
+function easeRadius(el, r) {
+  const dot = d3.select(el);
+  if (reducedMotion()) dot.interrupt('hover').attr('r', r);
+  else dot.transition('hover').duration(150).ease(d3.easeCubicOut).attr('r', r);
+}
+
+// Graph coordinates put you at 0,0, whatever the size of the box; the zoom
+// transform places that in the box. So a new size only moves the view, and a
+// rebuild can start from the view as it was.
+function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, focusNodeRef, savedTransform, viewRef, userName) {
   const centerNode = {
     id: CENTER_ID, name: userName || 'You', tier: 'center', degree: 0,
-    power_score: 10, fx: width / 2, fy: height / 2,
+    power_score: 10, fx: 0, fy: 0,
   };
 
   const nodes = [centerNode, ...connections.map(c => ({
     id: c.id, name: c.name, tier: c.tier, degree: 1,
     power_score: parseFloat(c.power_score) || 1,
     company: c.company, role: c.role, headline: c.headline,
-    profile_url: c.profile_url, profile_image_url: c.profile_image_url,
+    profile_url: c.profile_url, profile_image_url: localPhoto(c.profile_image_url),
     connected_date: c.connected_date,
     seniority_score: c.seniority_score, company_prestige_score: c.company_prestige_score,
     influence_signals: c.influence_signals,
     is_catalyst: c.is_catalyst, catalyst_score: c.catalyst_score,
     circle_power: c.circle_power, circle_s_count: c.circle_s_count, circle_a_count: c.circle_a_count,
   }))];
+  const nodeById = new Map(nodes.map(n => [n.id, n]));
 
   const links = connections.map(c => ({ source: CENTER_ID, target: c.id }));
 
@@ -212,53 +230,100 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
     return Math.max(3, Math.min(12, (d.power_score || 1) * 1.3));
   };
 
+  // A phone. Judged by the window, as the page judges it, not by the graph's
+  // own box: that narrowed whenever a panel opened on a laptop.
+  const isMobileGraph = window.innerWidth < 768;
+
   const g = svg.append('g');
+  // Where the view is going while a transition takes it there. A resize part-way
+  // through re-fits the destination, and a rebuild starts from it, rather than
+  // from a point along the way.
+  let heading = null;
   const zoomBehavior = d3.zoom().scaleExtent([0.3, 4]).on('zoom', (e) => {
     g.attr('transform', e.transform);
-    if (zoomTransformRef) zoomTransformRef.current = e.transform;
+    viewRef.current = { transform: heading ?? e.transform, size: box };
+    placeRing();
   });
   svg.call(zoomBehavior);
 
-  // Restore previous zoom position if available (filter changes, sidebar toggles)
+  const moveView = (to, duration) => {
+    if (reducedMotion()) {
+      heading = null;
+      svg.interrupt().call(zoomBehavior.transform, to);
+      return;
+    }
+    heading = to;
+    viewRef.current = { transform: to, size: box };
+    // Stopped before its first frame, by a wheel or a click at that moment, a
+    // slide reports "cancel" rather than "interrupt". Missing that left heading
+    // set, and every zoom after it was saved as this destination. A scroll
+    // already under way doesn't stop a slide, which lands here all the same.
+    svg.transition().duration(duration).call(zoomBehavior.transform, to)
+      .on('end interrupt cancel', () => { if (heading === to) heading = null; });
+  };
+
+  // The selection ring, tied to the selected person's dot. It is drawn again
+  // after any rebuild, and hidden while they are filtered out.
+  const pulse = ring.firstChild;
+  let ringNode = null;
+  const placeRing = () => {
+    if (!ringNode) return;
+    const t = d3.zoomTransform(svg.node());
+    ring.style.transform = `translate(${t.applyX(ringNode.x)}px, ${t.applyY(ringNode.y)}px) scale(${t.k})`;
+  };
+  const select = (id) => {
+    ringNode = id != null && id !== CENTER_ID ? nodeById.get(id) ?? null : null;
+    ring.style.display = ringNode ? 'block' : 'none';
+    if (!ringNode) return;
+    // The ring the <svg> used to draw: 8 past the dot, 2.5 wide.
+    const r = nodeRadius(ringNode) + 8;
+    pulse.style.width = pulse.style.height = `${2 * r + 2.5}px`;
+    pulse.style.margin = `${-(r + 1.25)}px`;
+    pulse.style.borderColor = tierColors[ringNode.tier] || '#FFD700';
+    placeRing();
+  };
+
+  // A new size: the view slides by half the change, at the same zoom.
+  const resize = (next) => {
+    const t = recentre(heading ?? d3.zoomTransform(svg.node()), box, next);
+    box = next;
+    moveView(d3.zoomIdentity.translate(t.x, t.y).scale(t.k), 250);
+  };
+
+  // Restore the previous view if there is one (filter changes); otherwise put
+  // you in the middle of the box. A phone starts zoomed out to fit, since the
+  // outer tiers reach past its edges.
   if (savedTransform) {
-    svg.call(zoomBehavior.transform, savedTransform);
+    svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(savedTransform.x, savedTransform.y).scale(savedTransform.k));
+  } else {
+    const maxTierR = 520;
+    const fitScale = isMobileGraph && box.width > 0 && box.height > 0
+      ? Math.min(box.width / (maxTierR * 2.4), box.height / (maxTierR * 2.4)) : 1;
+    svg.call(zoomBehavior.transform, d3.zoomIdentity.translate(box.width / 2, box.height / 2).scale(fitScale));
   }
 
   // Expose focusNode for search — zooms to a specific node
   if (focusNodeRef) {
     focusNodeRef.current = (nodeId) => {
-      const target = nodes.find(n => n.id === nodeId);
+      const target = nodeById.get(nodeId);
       if (!target) return;
       const scale = 2.5;
-      const tx = width / 2 - target.x * scale;
-      const ty = height / 2 - target.y * scale;
-      svg.transition().duration(750).call(
-        zoomBehavior.transform,
-        d3.zoomIdentity.translate(tx, ty).scale(scale)
-      );
-      // Add selection glow
-      g.selectAll('.selected-glow').remove();
-      g.append('circle')
-        .attr('class', 'selected-glow')
-        .attr('cx', target.x).attr('cy', target.y).attr('r', nodeRadius(target) + 8)
-        .attr('fill', 'none').attr('stroke', tierColors[target.tier] || '#FFD700')
-        .attr('stroke-width', 2.5).attr('stroke-opacity', 0.8)
-        .style('animation', 'selectedPulse 1.5s ease-in-out infinite');
+      moveView(d3.zoomIdentity.translate(box.width / 2 - target.x * scale, box.height / 2 - target.y * scale).scale(scale), 750);
+      select(nodeId);
     };
   }
 
   // On mobile: pre-compute static positions (no simulation jitter/reset on resize)
-  const isMobileGraph = width < 768;
   if (isMobileGraph) {
     const tierGroups = {};
     nodes.forEach(n => { const t = n.tier || 'D'; if (!tierGroups[t]) tierGroups[t] = []; tierGroups[t].push(n); });
     Object.entries(tierGroups).forEach(([tier, group]) => {
       group.forEach((n, i) => {
-        if (n.id === CENTER_ID) { n.x = width / 2; n.y = height / 2; n.fx = n.x; n.fy = n.y; return; }
+        if (n.id === CENTER_ID) { n.x = 0; n.y = 0; n.fx = n.x; n.fy = n.y; return; }
         const r = tierRadius(tier);
         const angle = (i / group.length) * Math.PI * 2 - Math.PI / 2;
-        n.x = width / 2 + r * Math.cos(angle);
-        n.y = height / 2 + r * Math.sin(angle);
+        n.x = r * Math.cos(angle);
+        n.y = r * Math.sin(angle);
         n.fx = n.x; n.fy = n.y; // Fixed positions — no physics
       });
     });
@@ -267,12 +332,15 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
   const simulation = d3.forceSimulation(nodes)
     .force('link', d3.forceLink(links).id(d => d.id).distance(d => tierRadius(d.target.tier || 'D')).strength(isMobileGraph ? 0 : 0.1))
     .force('charge', d3.forceManyBody().strength(isMobileGraph ? 0 : (d => d.id === CENTER_ID ? -300 : -15)))
-    .force('center', isMobileGraph ? null : d3.forceCenter(width / 2, height / 2))
+    .force('center', isMobileGraph ? null : d3.forceCenter(0, 0))
     .force('collision', isMobileGraph ? null : d3.forceCollide().radius(d => nodeRadius(d) + 2))
-    .force('radial', isMobileGraph ? null : d3.forceRadial(d => d.id === CENTER_ID ? 0 : tierRadius(d.tier), width / 2, height / 2).strength(0.3));
+    .force('radial', isMobileGraph ? null : d3.forceRadial(d => d.id === CENTER_ID ? 0 : tierRadius(d.tier), 0, 0).strength(0.3));
 
+  // forceLink has already swapped each link's ids for the nodes themselves, so
+  // the colour is one step away. It used to search every node for every link:
+  // about 1.8 s at 30,000 people.
   const link = g.append('g').selectAll('line').data(links).join('line')
-    .attr('stroke', d => { const t = nodes.find(n => n.id === (d.target.id || d.target)); return tierColors[t?.tier] || '#333'; })
+    .attr('stroke', d => tierColors[d.target.tier] || '#333')
     .attr('stroke-opacity', 0.15).attr('stroke-width', 0.5);
 
   // Catalyst outer glow rings (rendered behind the nodes)
@@ -309,16 +377,7 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
     .style('cursor', 'pointer')
     .on('click', (event, d) => {
       if (d.id === CENTER_ID) return;
-      // Remove previous selection glow
-      g.selectAll('.selected-glow').remove();
-      // Add breathing glow to selected node
-      const r = nodeRadius(d);
-      g.append('circle')
-        .attr('class', 'selected-glow')
-        .attr('cx', d.x).attr('cy', d.y).attr('r', r + 8)
-        .attr('fill', 'none').attr('stroke', tierColors[d.tier] || '#FFD700')
-        .attr('stroke-width', 2.5).attr('stroke-opacity', 0.8)
-        .style('animation', 'selectedPulse 1.5s ease-in-out infinite');
+      select(d.id);
       onSelect(d);
     });
 
@@ -331,7 +390,7 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
     .style('z-index', 1001).style('transition', 'opacity 0.15s');
 
   node.on('mouseover', function (event, d) {
-    d3.select(this).attr('r', nodeRadius(d) * 1.5);
+    easeRadius(this, nodeRadius(d) * 1.5);
     if (d.profile_image_url && d.id !== CENTER_ID) {
       const size = Math.max(48, nodeRadius(d) * 5);
       photoTooltip.style('opacity', 1);
@@ -358,7 +417,7 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
       tooltip.style('left', (event.clientX + 12) + 'px').style('top', (event.clientY - 10) + 'px');
     }
   }).on('mouseout', function (event, d) {
-    d3.select(this).attr('r', nodeRadius(d));
+    easeRadius(this, nodeRadius(d));
     tooltip.style('opacity', 0);
     photoTooltip.style('opacity', 0);
   });
@@ -386,654 +445,10 @@ function renderNetworkMode(svg, width, height, connections, onSelect, tierColors
     node.attr('cx', d => d.x).attr('cy', d => d.y);
     catalystRings.attr('cx', d => d.x).attr('cy', d => d.y);
     labels.attr('x', d => d.x).attr('y', d => d.y);
-    // Move selection glow with the node
-    g.selectAll('.selected-glow').each(function() {
-      const el = d3.select(this);
-      const match = nodes.find(n => n.x && Math.abs(n.x - parseFloat(el.attr('cx'))) < 30);
-      if (match) { el.attr('cx', match.x).attr('cy', match.y); }
-    });
-
-  });
-
-  // Auto-fit zoom ONLY on small screens (mobile) where content overflows
-  if (!savedTransform && width > 0 && width < 768) {
-    const maxTierR = 520;
-    const fitScale = Math.min(width / (maxTierR * 2.4), height / (maxTierR * 2.4));
-    const initialTransform = d3.zoomIdentity.translate(width / 2, height / 2).scale(fitScale).translate(-width / 2, -height / 2);
-    svg.call(zoomBehavior.transform, initialTransform);
-    if (zoomTransformRef) zoomTransformRef.current = initialTransform;
-  }
-
-  return simulation;
-}
-
-function renderDegreesMode(svg, width, height, allD1, degree2, onSelect, tierColors, savedTransform, zoomTransformRef, userName, zoomToClusterRef, zoomOutRef) {
-  const d1Urls = new Set(allD1.map(c => c.profile_url));
-  const bridgeIds = [...new Set(degree2.map(d => d.source_connection_id).filter(Boolean))];
-  const bridges = allD1.filter(c => bridgeIds.includes(c.id));
-  const numBridges = Math.max(bridges.length, 1);
-  const cx = width / 2, cy = height / 2;
-
-  // Per-tier orbit distance from the centre (you): S closest, A further, etc.
-  const bridgeTierOrbit = { S: 350, A: 600, B: 820, C: 1000, D: 1150 };
-  const tierRing = { S: 40, A: 70, B: 100, C: 125, D: 145 };
-  const tierOrder = ['S', 'A', 'B', 'C', 'D'];
-
-  // --- Build nodes ---
-  const centerNode = {
-    id: CENTER_ID, name: userName || 'You', tier: 'center', degree: 0,
-    power_score: 10, nodeType: 'center', fx: cx, fy: cy,
-  };
-
-  // Group bridges by tier so same-tier bridges are spaced around their ring
-  const tierCounts = {};
-  const tierIndex = {};
-  bridges.forEach(c => {
-    const t = c.tier || 'D';
-    tierCounts[t] = (tierCounts[t] || 0) + 1;
-    tierIndex[c.id] = (tierIndex[c.id] || 0);
-  });
-  const tierCounter = {};
-  const bridgeNodes = bridges.map((c) => {
-    const t = c.tier || 'D';
-    const count = tierCounts[t] || 1;
-    const idx = tierCounter[t] || 0;
-    tierCounter[t] = idx + 1;
-    const orbitR = bridgeTierOrbit[t] || 600;
-    const angleOffset = { S: 0, A: Math.PI / 7, B: Math.PI / 4, C: Math.PI / 3, D: Math.PI / 2.5 };
-    const angle = (2 * Math.PI * idx) / count + (angleOffset[t] || 0);
-    return {
-      id: c.id, name: c.name, tier: c.tier, degree: 1, nodeType: 'bridge',
-      power_score: parseFloat(c.power_score) || 1,
-      company: c.company, role: c.role, headline: c.headline,
-      profile_url: c.profile_url, profile_image_url: c.profile_image_url,
-      seniority_score: c.seniority_score,
-      company_prestige_score: c.company_prestige_score,
-      is_catalyst: c.is_catalyst, catalyst_score: c.catalyst_score,
-      circle_power: c.circle_power, circle_s_count: c.circle_s_count, circle_a_count: c.circle_a_count,
-      unlocked_from_bridge_id: c.unlocked_from_bridge_id,
-      unlocked_from_name: c.unlocked_from_name,
-      _orbitRadius: orbitR,
-      x: cx + Math.cos(angle) * orbitR,
-      y: cy + Math.sin(angle) * orbitR,
-    };
-  });
-
-  const d2Nodes = [];
-  bridgeNodes.forEach(bridge => {
-    const myD2 = degree2.filter(c => c.source_connection_id === bridge.id);
-    const byTier = {};
-    tierOrder.forEach(t => { byTier[t] = []; });
-    myD2.forEach(c => { (byTier[c.tier] || byTier['D']).push(c); });
-    tierOrder.forEach(tier => {
-      const group = byTier[tier];
-      const ring = tierRing[tier];
-      group.forEach((c, i) => {
-        const angle = (2 * Math.PI * i) / Math.max(group.length, 1) - Math.PI / 2;
-        const isMutual = d1Urls.has(c.profile_url);
-        d2Nodes.push({
-          id: c.id, name: c.name, tier: c.tier, degree: 2, nodeType: 'degree2',
-          power_score: parseFloat(c.power_score) || 1,
-          company: c.company, role: c.role, headline: c.headline,
-          profile_url: c.profile_url, profile_image_url: c.profile_image_url,
-          source_connection_id: c.source_connection_id,
-          seniority_score: c.seniority_score, company_prestige_score: c.company_prestige_score,
-          isMutual, unlock_status: c.unlock_status,
-          x: bridge.x + Math.cos(angle) * ring,
-          y: bridge.y + Math.sin(angle) * ring,
-        });
-      });
-    });
-  });
-
-  const nodes = [centerNode, ...bridgeNodes, ...d2Nodes];
-  const links = [
-    ...bridgeNodes.map(b => ({ source: CENTER_ID, target: b.id, linkType: 'bridge' })),
-    ...d2Nodes.map(d => ({ source: d.source_connection_id, target: d.id, linkType: 'degree2' })),
-  ];
-
-  // Index for fast lookup in forces
-  const bridgeById = {};
-  bridgeNodes.forEach(b => { bridgeById[b.id] = b; });
-
-  const nodeRadius = (d) => {
-    if (d.nodeType === 'center') return 24;
-    if (d.nodeType === 'bridge') return 16;
-    return Math.max(4, Math.min(10, (d.power_score || 1) * 1.1));
-  };
-
-  // --- SVG setup ---
-  const g = svg.append('g');
-  const zoomBehavior = d3.zoom().scaleExtent([0.15, 5]).on('zoom', (e) => {
-    g.attr('transform', e.transform);
-    if (zoomTransformRef) zoomTransformRef.current = e.transform;
+    placeRing();
   });
-  svg.call(zoomBehavior);
 
-  // Restore previous zoom position if available
-  if (savedTransform) {
-    svg.call(zoomBehavior.transform, savedTransform);
-  }
-
-  // Expose zoom-to-cluster: smoothly zoom into a bridge node's position
-  if (zoomToClusterRef) {
-    zoomToClusterRef.current = (bridgeNode) => {
-      const scale = 2.5;
-      const tx = width / 2 - bridgeNode.x * scale;
-      const ty = height / 2 - bridgeNode.y * scale;
-      svg.transition().duration(750).call(
-        zoomBehavior.transform,
-        d3.zoomIdentity.translate(tx, ty).scale(scale)
-      );
-    };
-  }
-
-  // Expose zoom-out: return to the auto-fit view
-  if (zoomOutRef) {
-    zoomOutRef.current = () => {
-      const maxOrbit = bridgeNodes.length > 0 ? Math.max(...bridgeNodes.map(b => b._orbitRadius || 500)) : 500;
-      const fitR = maxOrbit + 200;
-      const fitScale = Math.min(width / (fitR * 2.2), height / (fitR * 2.2), 0.85);
-      svg.transition().duration(750).call(
-        zoomBehavior.transform,
-        d3.zoomIdentity.translate(width / 2, height / 2).scale(fitScale).translate(-cx, -cy)
-      );
-    };
-  }
-
-  // --- Defs: gradients, glows, filters ---
-  const defs = svg.append('defs');
-  const baseClusterColors = ['#FFD700', '#FF6B35', '#9B59B6', '#3498DB'];
-  let colorIdx = 0;
-  const CATALYST_COLOR = '#00ff88';
-  bridgeNodes.forEach((bridge, bi) => {
-    const color = bridge.is_catalyst ? CATALYST_COLOR : baseClusterColors[colorIdx++ % baseClusterColors.length];
-    bridge._clusterColor = color;
-    const grad = defs.append('radialGradient').attr('id', `nebula-${bi}`);
-    grad.append('stop').attr('offset', '0%').attr('stop-color', color).attr('stop-opacity', 0.08);
-    grad.append('stop').attr('offset', '40%').attr('stop-color', color).attr('stop-opacity', 0.03);
-    grad.append('stop').attr('offset', '100%').attr('stop-color', color).attr('stop-opacity', 0);
-  });
-  const glowFilter = defs.append('filter').attr('id', 'glow').attr('x', '-50%').attr('y', '-50%').attr('width', '200%').attr('height', '200%');
-  glowFilter.append('feGaussianBlur').attr('stdDeviation', '4').attr('result', 'blur');
-  glowFilter.append('feMerge').html('<feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/>');
-  const bridgeGlowF = defs.append('filter').attr('id', 'bridge-glow').attr('x', '-80%').attr('y', '-80%').attr('width', '260%').attr('height', '260%');
-  bridgeGlowF.append('feGaussianBlur').attr('stdDeviation', '8').attr('result', 'blur');
-  bridgeGlowF.append('feMerge').html('<feMergeNode in="blur"/><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/>');
-  defs.append('style').text(`
-    @keyframes pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
-    @keyframes selectedPulse { 0%,100% { stroke-opacity: 0.4; r: attr(r); } 50% { stroke-opacity: 1; } }
-    .bridge-pulse { animation: pulse 2s ease-in-out infinite; }
-    @keyframes boundary-breathe { 0%,100% { stroke-opacity: 0.5; } 50% { stroke-opacity: 0.75; } }
-    .boundary-ring { animation: boundary-breathe 3s ease-in-out infinite; }
-  `);
-  const boundaryGlow = defs.append('filter').attr('id', 'boundary-glow').attr('x', '-20%').attr('y', '-20%').attr('width', '140%').attr('height', '140%');
-  boundaryGlow.append('feGaussianBlur').attr('stdDeviation', '3').attr('result', 'blur');
-  boundaryGlow.append('feMerge').html('<feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/>');
-
-  // --- Cluster decoration groups (move as a unit on tick) ---
-  const clusterGroups = bridgeNodes.map((bridge, bi) => {
-    const cg = g.append('g');
-    const color = bridge._clusterColor;
-    const d2Count = d2Nodes.filter(n => n.source_connection_id === bridge.id).length;
-    const sCount = d2Nodes.filter(n => n.source_connection_id === bridge.id && n.tier === 'S').length;
-
-    // Nebula background
-    cg.append('circle').attr('r', 200).attr('fill', `url(#nebula-${bi})`);
-    // Tier band separators — filled rings between each tier for visual layering
-    const tierBands = [
-      { inner: 0, outer: 55, color: tierColors['S'], opacity: 0.06 },   // S zone (innermost)
-      { inner: 55, outer: 85, color: tierColors['A'], opacity: 0.05 },  // A zone
-      { inner: 85, outer: 112, color: tierColors['B'], opacity: 0.04 }, // B zone
-      { inner: 112, outer: 137, color: tierColors['C'], opacity: 0.03 },// C zone
-      { inner: 137, outer: 165, color: tierColors['D'], opacity: 0.02 },// D zone (outermost)
-    ];
-    tierBands.forEach(band => {
-      // Filled band
-      const arc = d3.arc().innerRadius(band.inner).outerRadius(band.outer).startAngle(0).endAngle(2 * Math.PI);
-      cg.append('path').attr('d', arc()).attr('fill', band.color).attr('opacity', band.opacity);
-    });
-    // Tier ring lines — colored per tier
-    const ringDefs = [
-      { r: 40, color: tierColors['S'], w: 1.5, dash: 'none' },
-      { r: 70, color: tierColors['A'], w: 0.8, dash: '4,4' },
-      { r: 100, color: tierColors['B'], w: 0.8, dash: '4,4' },
-      { r: 125, color: tierColors['C'], w: 0.6, dash: '3,5' },
-      { r: 145, color: tierColors['D'], w: 0.6, dash: '3,5' },
-    ];
-    ringDefs.forEach(rd => {
-      cg.append('circle').attr('r', rd.r).attr('fill', 'none')
-        .attr('stroke', rd.color).attr('stroke-opacity', 0.2)
-        .attr('stroke-width', rd.w).attr('stroke-dasharray', rd.dash);
-    });
-    // Glow halo
-    cg.append('circle').attr('r', 25).attr('fill', color).attr('opacity', 0.15).attr('class', 'bridge-pulse');
-    // Catalyst badge
-    if (bridge.is_catalyst) {
-      cg.append('rect').attr('x', -40).attr('y', -185).attr('width', 80).attr('height', 18)
-        .attr('rx', 9).attr('fill', CATALYST_COLOR).attr('opacity', 0.9);
-      cg.append('text').attr('y', -172).text('CATALYST').attr('fill', '#000').attr('font-size', 9)
-        .attr('font-weight', 800).attr('text-anchor', 'middle').attr('letter-spacing', 1);
-    }
-    // Title
-    cg.append('text').attr('y', bridge.is_catalyst ? -160 : -170)
-      .text(bridge.name + (bridge.company ? ' · ' + bridge.company : ''))
-      .attr('fill', color).attr('font-size', 10).attr('font-weight', 600)
-      .attr('text-anchor', 'middle').attr('opacity', 0.8);
-    cg.append('text').attr('y', bridge.is_catalyst ? -148 : -158)
-      .text(d2Count + ' connections · ' + sCount + ' S-tier')
-      .attr('fill', 'rgba(255,255,255,0.35)').attr('font-size', 8).attr('text-anchor', 'middle');
-
-    return cg;
-  });
-
-  // --- Animated cluster boundaries ---
-  // Each cluster gets a solid glowing ring that NEVER overlaps another cluster.
-  // Where two clusters are close, both boundaries flatten at the exact midpoint.
-  const boundaryR = 170;
-  const boundaryPoints = 64;
-  const boundaryPaths = bridgeNodes.map((bridge, bi) => {
-    // Boundary color follows the outermost tier (D) — creates the "containment" feel
-    // Inner tiers glow their own color, outer boundary is neutral
-    return g.append('path')
-      .attr('fill', 'none')
-      .attr('stroke', tierColors['D'])
-      .attr('stroke-opacity', 0.5)
-      .attr('stroke-width', 2.5)
-      .attr('stroke-linecap', 'round')
-      .attr('stroke-linejoin', 'round')
-      .attr('filter', 'url(#boundary-glow)')
-      .attr('class', 'boundary-ring');
-  });
-
-  function updateBoundaries() {
-    bridgeNodes.forEach((bridge, bi) => {
-      const pts = [];
-      for (let p = 0; p < boundaryPoints; p++) {
-        const angle = (2 * Math.PI * p) / boundaryPoints;
-        let r = boundaryR;
-
-        // Soft deform: boundary bends smoothly toward nearby clusters, never crossing midpoint
-        for (let oi = 0; oi < bridgeNodes.length; oi++) {
-          if (bi === oi) continue;
-          const other = bridgeNodes[oi];
-          const dx = other.x - bridge.x, dy = other.y - bridge.y;
-          const distBetween = Math.sqrt(dx * dx + dy * dy);
-          if (distBetween < boundaryR * 2.5) {
-            const angleToOther = Math.atan2(dy, dx);
-            let angleDiff = Math.abs(angle - angleToOther);
-            if (angleDiff > Math.PI) angleDiff = 2 * Math.PI - angleDiff;
-            if (angleDiff < Math.PI / 1.5) {
-              const maxR = (distBetween / 2) - 6;
-              // Smooth cosine blend — creates a gentle dent, not a hard flat
-              const influence = Math.pow(Math.cos(angleDiff * 1.5 / Math.PI * (Math.PI / 2)), 2);
-              const targetR = Math.max(maxR, 35);
-              if (targetR < r) {
-                r = r * (1 - influence) + targetR * influence;
-              }
-            }
-          }
-        }
-        pts.push([bridge.x + Math.cos(angle) * r, bridge.y + Math.sin(angle) * r]);
-      }
-      boundaryPaths[bi].attr('d', d3.line().curve(d3.curveCardinalClosed.tension(0.3))(pts));
-    });
-  }
-
-  // --- Bridge connecting lines ---
-  const bridgeLines = g.append('g').selectAll('line').data(bridgeNodes).join('line')
-    .attr('stroke', d => d._clusterColor).attr('stroke-opacity', 0.4).attr('stroke-width', 2.5);
-
-  // --- Discovery chain lines ---
-  const chainData = bridgeNodes.filter(b => b.unlocked_from_bridge_id && bridgeById[b.unlocked_from_bridge_id]);
-  const chainLines = g.append('g').selectAll('line').data(chainData).join('line')
-    .attr('stroke', '#FF6B35').attr('stroke-width', 1.5)
-    .attr('stroke-dasharray', '6,4').attr('stroke-opacity', 0.5);
-  const chainLabels = g.append('g').selectAll('text').data(chainData).join('text')
-    .text(d => 'unlocked via ' + (d.unlocked_from_name || bridgeById[d.unlocked_from_bridge_id]?.name || ''))
-    .attr('fill', 'rgba(255,107,53,0.5)').attr('font-size', 8)
-    .attr('text-anchor', 'middle').style('pointer-events', 'none');
-
-  // --- D2 links (subtle, rendered after settle) ---
-  let d2LinkGroup = null;
-
-  // --- Nodes ---
-  const node = g.append('g').selectAll('circle').data(nodes).join('circle')
-    .attr('r', nodeRadius)
-    .attr('fill', d => {
-      if (d.nodeType === 'center') return '#fff';
-      if (d.nodeType === 'bridge') return tierColors[d.tier] || '#FFD700';
-      return tierColors[d.tier] || '#666';
-    })
-    .attr('stroke', d => {
-      if (d.nodeType === 'center') return '#FFD700';
-      if (d.nodeType === 'bridge') return '#fff';
-      if (d.isMutual) return '#00ff88';
-      if (d.tier === 'S') return 'rgba(255,215,0,0.5)';
-      return 'none';
-    })
-    .attr('stroke-width', d => {
-      if (d.nodeType === 'center') return 3;
-      if (d.nodeType === 'bridge') return 3;
-      if (d.isMutual) return 2.5;
-      if (d.tier === 'S') return 1.5;
-      return 0;
-    })
-    .attr('filter', d => (d.nodeType === 'bridge') ? 'url(#bridge-glow)' : (d.tier === 'S' ? 'url(#glow)' : null))
-    .style('cursor', 'pointer');
-
-  // --- Labels ---
-  const labelNodes = nodes.filter(n =>
-    n.nodeType === 'center' || n.nodeType === 'bridge' || (n.degree === 2 && n.power_score >= 7)
-  );
-  const labels = g.append('g').selectAll('text').data(labelNodes).join('text')
-    .text(d => d.name)
-    .attr('font-size', d => d.nodeType === 'center' ? 15 : d.nodeType === 'bridge' ? 13 : 9)
-    .attr('font-weight', d => d.nodeType === 'center' || d.nodeType === 'bridge' ? 700 : 600)
-    .attr('fill', d => {
-      if (d.nodeType === 'center') return '#fff';
-      if (d.nodeType === 'bridge') return '#fff';
-      return tierColors[d.tier] || '#FF6B35';
-    })
-    .attr('text-anchor', 'middle')
-    .attr('dy', d => nodeRadius(d) + (d.nodeType === 'bridge' ? 24 : 15))
-    .style('pointer-events', 'none')
-    .style('text-shadow', d => d.nodeType === 'bridge' ? '0 0 10px rgba(0,0,0,0.8)' : 'none');
-
-  // --- Force simulation ---
-  // Bridges: positioned by physics (orbit + charge)
-  // D2 nodes: positioned by computed angles (no physics fighting)
-  const bridgeLinks = links.filter(l => l.linkType === 'bridge');
-
-  // Pre-compute even angular positions for every d2 node per tier per cluster
-  const nodeTargets = new Map();
-  const clustersByBridge = {};
-  d2Nodes.forEach(n => {
-    const cid = n.source_connection_id;
-    if (!clustersByBridge[cid]) clustersByBridge[cid] = {};
-    const tier = n.tier || 'D';
-    if (!clustersByBridge[cid][tier]) clustersByBridge[cid][tier] = [];
-    clustersByBridge[cid][tier].push(n);
-  });
-  // Offset each tier's starting angle so rings don't stack on top of each other
-  const tierOffset = { S: 0, A: Math.PI / 5, B: Math.PI / 3, C: Math.PI / 2.2, D: Math.PI / 1.7 };
-  // Max radius is inside the boundary line
-  const maxNodeRadius = 160;
-  for (const cid in clustersByBridge) {
-    for (const tier in clustersByBridge[cid]) {
-      const group = clustersByBridge[cid][tier];
-      const radius = Math.min(tierRing[tier] || 130, maxNodeRadius);
-      const offset = tierOffset[tier] || 0;
-      group.forEach((n, i) => {
-        const angle = (2 * Math.PI * i) / group.length + offset;
-        nodeTargets.set(n.id, { angle, radius, bridgeId: cid });
-      });
-    }
-  }
-
-  const simulation = d3.forceSimulation(nodes)
-    .force('charge', d3.forceManyBody().strength(d => {
-      if (d.nodeType === 'center') return 0;
-      if (d.nodeType === 'bridge') return -400;
-      return 0;  // d2 has NO charge — positions are computed, not physics-driven
-    }))
-    .force('bridgeOrbit', (() => {
-      let _nodes, _center;
-      const force = (alpha) => {
-        if (!_center) return;
-        const bx = _center.fx ?? _center.x, by = _center.fy ?? _center.y;
-        for (const n of _nodes) {
-          if (n.nodeType !== 'bridge') continue;
-          const targetR = n._orbitRadius || 500;
-          const dx = n.x - bx, dy = n.y - by;
-          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-          const diff = dist - targetR;
-          n.vx -= (dx / dist) * diff * alpha * 0.4;
-          n.vy -= (dy / dist) * diff * alpha * 0.4;
-        }
-      };
-      force.initialize = (n) => { _nodes = n; _center = n.find(x => x.id === CENTER_ID); };
-      return force;
-    })())
-    .force('clusterPositioning', (() => {
-      // Each d2 node has a pre-computed angle + radius relative to its bridge.
-      // This force pulls it to that exact spot. No charge needed, no bunching possible.
-      // Nodes form perfect evenly-spaced circles on each tier ring.
-      let _nodes;
-      const force = (alpha) => {
-        for (const n of _nodes) {
-          if (n.nodeType !== 'degree2') continue;
-          const target = nodeTargets.get(n.id);
-          if (!target) continue;
-          const bridge = bridgeById[target.bridgeId];
-          if (!bridge) continue;
-          let r = target.radius;
-          // Match boundary deformation exactly — dots must stay inside
-          // Uses the SAME math as updateBoundaries() so they track together
-          for (let oi = 0; oi < bridgeNodes.length; oi++) {
-            const other = bridgeNodes[oi];
-            if (other.id === target.bridgeId) continue;
-            const dx = other.x - bridge.x, dy = other.y - bridge.y;
-            const distBetween = Math.sqrt(dx * dx + dy * dy);
-            if (distBetween < boundaryR * 2.5) {
-              const angleToOther = Math.atan2(dy, dx);
-              let angleDiff = Math.abs(target.angle - angleToOther);
-              if (angleDiff > Math.PI) angleDiff = 2 * Math.PI - angleDiff;
-              if (angleDiff < Math.PI / 1.5) {
-                // Boundary sits at (distBetween/2 - 6), dots need margin inside that
-                const boundaryAtAngle = (distBetween / 2) - 6;
-                const dotMax = boundaryAtAngle - 12;  // 12px inside boundary
-                const influence = Math.pow(Math.cos(angleDiff * 1.5 / Math.PI * (Math.PI / 2)), 2);
-                const targetR = Math.max(dotMax, 25);
-                if (targetR < r) {
-                  r = r * (1 - influence) + targetR * influence;
-                }
-              }
-            }
-          }
-          const tx = bridge.x + Math.cos(target.angle) * r;
-          const ty = bridge.y + Math.sin(target.angle) * r;
-          n.vx += (tx - n.x) * alpha * 0.6;
-          n.vy += (ty - n.y) * alpha * 0.6;
-        }
-      };
-      force.initialize = (n) => { _nodes = n; };
-      return force;
-    })())
-    .force('collision', d3.forceCollide().radius(d => d.nodeType === 'bridge' ? 20 : 0))
-    .force('link', d3.forceLink(bridgeLinks).id(d => d.id)
-      .distance(d => d.target?._orbitRadius || 500).strength(0.01)
-    )
-    .alphaDecay(0.02)
-    .velocityDecay(0.4);
-
-  // --- Tick: update all positions ---
-  let settled = false;
-  simulation.on('tick', () => {
-    // Nodes
-    node.attr('cx', d => d.x).attr('cy', d => d.y);
-    labels.attr('x', d => d.x).attr('y', d => d.y);
-    // Cluster decorations follow their bridge
-    clusterGroups.forEach((cg, i) => {
-      cg.attr('transform', `translate(${bridgeNodes[i].x},${bridgeNodes[i].y})`);
-    });
-    // Animated boundaries — deform where clusters overlap
-    updateBoundaries();
-    // Bridge connecting lines
-    const centerX = centerNode.fx ?? centerNode.x, centerY = centerNode.fy ?? centerNode.y;
-    bridgeLines.attr('x1', centerX).attr('y1', centerY)
-      .attr('x2', d => d.x).attr('y2', d => d.y);
-    // Discovery chain lines
-    chainLines
-      .attr('x1', d => bridgeById[d.unlocked_from_bridge_id]?.x || 0)
-      .attr('y1', d => bridgeById[d.unlocked_from_bridge_id]?.y || 0)
-      .attr('x2', d => d.x).attr('y2', d => d.y);
-    chainLabels
-      .attr('x', d => ((bridgeById[d.unlocked_from_bridge_id]?.x || 0) + d.x) / 2)
-      .attr('y', d => ((bridgeById[d.unlocked_from_bridge_id]?.y || 0) + d.y) / 2 - 8);
-    // D2 links — render once after simulation settles
-    if (!settled && simulation.alpha() < 0.05) {
-      settled = true;
-      const d2Links = links.filter(l => l.linkType === 'degree2');
-      d2LinkGroup = g.insert('g', ':first-child').selectAll('line').data(d2Links).join('line')
-        .attr('x1', d => d.source.x).attr('y1', d => d.source.y)
-        .attr('x2', d => d.target.x).attr('y2', d => d.target.y)
-        .attr('stroke', 'rgba(255,255,255,0.04)').attr('stroke-width', 0.3);
-    }
-    if (d2LinkGroup) {
-      d2LinkGroup.attr('x1', d => d.source.x).attr('y1', d => d.source.y)
-        .attr('x2', d => d.target.x).attr('y2', d => d.target.y);
-    }
-  });
-
-  // --- Drag ---
-  setupDrag(node, simulation, CENTER_ID);
-
-  // --- Tooltip + Photo Hover (same as Network Map) ---
-  const tooltip = createTooltip();
-  const photoTooltip = d3.select('body').append('div')
-    .attr('class', 'graph-tooltip')
-    .style('position', 'fixed').style('top', '0px').style('left', '0px')
-    .style('pointer-events', 'none').style('opacity', 0)
-    .style('z-index', 1001).style('transition', 'opacity 0.15s');
-
-  node.on('mouseover', function (event, d) {
-    d3.select(this).attr('r', nodeRadius(d) * 1.5).attr('filter', 'url(#glow)');
-
-    // Photo hover
-    if (d.profile_image_url && d.id !== CENTER_ID) {
-      const size = Math.max(48, nodeRadius(d) * 4);
-      photoTooltip.style('opacity', 1);
-      renderPhoto(photoTooltip, d, size, tierColors[d.tier] || '#555');
-      photoTooltip
-        .style('left', (event.clientX - size / 2) + 'px')
-        .style('top', (event.clientY - size - 8) + 'px');
-    }
-
-    // Text tooltip below
-    const bridgeFor = d.nodeType === 'bridge'
-      ? d2Nodes.filter(n => n.source_connection_id === d.id).length + ' connections' : null;
-    const viaBridge = d.nodeType === 'degree2'
-      ? bridgeNodes.find(b => b.id === d.source_connection_id)?.name : null;
-    tooltip.style('opacity', 1)
-      .html([
-        `<strong>${esc(d.name)}</strong>`,
-        d.role ? esc(d.role.substring(0, 60)) : '',
-        d.company ? `<span style="color:${tierColors[d.tier] || '#888'}">@ ${esc(d.company)}</span>` : '',
-        d.tier && d.tier !== 'center' ? `Tier ${esc(d.tier)} · Score: ${parseFloat(d.power_score).toFixed(1)}` : '',
-        bridgeFor ? `<span style="color:#FFD700">${esc(bridgeFor)}</span>` : '',
-        viaBridge ? `<span style="color:#FF6B35">via ${esc(viaBridge)}</span>` : '',
-        d.isMutual ? '<span style="color:#00ff88">Mutual connection</span>' : '',
-      ].filter(Boolean).join('<br/>'))
-      .style('left', (event.clientX + 12) + 'px').style('top', (event.clientY + 12) + 'px');
-  }).on('mousemove', function (event, d) {
-    if (d.profile_image_url && d.id !== CENTER_ID) {
-      const size = Math.max(48, nodeRadius(d) * 4);
-      photoTooltip.style('left', (event.clientX - size / 2) + 'px').style('top', (event.clientY - size - 8) + 'px');
-    }
-    tooltip.style('left', (event.clientX + 12) + 'px').style('top', (event.clientY + 12) + 'px');
-  }).on('mouseout', function (event, d) {
-    d3.select(this).attr('r', nodeRadius(d))
-      .attr('filter', (d.nodeType === 'bridge') ? 'url(#bridge-glow)' : (d.tier === 'S' ? 'url(#glow)' : null));
-    tooltip.style('opacity', 0);
-    photoTooltip.style('opacity', 0);
-  });
-
-  // --- Click: select + Connect to Unlock overlay ---
-  node.on('click', (event, d) => {
-    if (d.id === CENTER_ID) return;
-    // Selection glow
-    g.selectAll('.selected-glow').remove();
-    g.append('circle')
-      .attr('class', 'selected-glow')
-      .attr('cx', d.x).attr('cy', d.y).attr('r', nodeRadius(d) + 8)
-      .attr('fill', 'none').attr('stroke', tierColors[d.tier] || '#FFD700')
-      .attr('stroke-width', 2.5).attr('stroke-opacity', 0.8)
-      .style('animation', 'selectedPulse 1.5s ease-in-out infinite');
-    onSelect(d);
-    // Bridge click: zoom into this cluster
-    if (d.nodeType === 'bridge' && zoomToClusterRef?.current) {
-      zoomToClusterRef.current(d);
-      // Update React state via a custom event
-      window.dispatchEvent(new CustomEvent('cluster-focus', { detail: { id: d.id, name: d.name } }));
-    }
-    g.selectAll('.unlock-overlay').remove();
-    if (d.nodeType === 'degree2' && (d.tier === 'S' || d.tier === 'A') && d.unlock_status !== 'unlocked') {
-      simulation.stop();
-      const ox = d.x, oy = d.y;
-      const overlay = g.append('g').attr('class', 'unlock-overlay');
-      // Dim non-path nodes
-      node.transition().duration(300)
-        .attr('opacity', n => (n.id === d.id || n.id === CENTER_ID || n.id === d.source_connection_id) ? 1 : 0.2);
-      labels.transition().duration(300)
-        .attr('opacity', n => (n.id === d.id || n.id === CENTER_ID || n.id === d.source_connection_id) ? 1 : 0.1);
-      // Phantom cluster
-      [30, 55, 80].forEach(r => {
-        overlay.append('circle').attr('cx', ox).attr('cy', oy).attr('r', r)
-          .attr('fill', 'none').attr('stroke', 'rgba(255,215,0,0.12)')
-          .attr('stroke-dasharray', '4,4').attr('stroke-width', 0.8);
-      });
-      for (let i = 0; i < 8; i++) {
-        const a = (Math.PI * 2 * i) / 8, r = 30 + Math.random() * 50;
-        overlay.append('circle').attr('cx', ox + Math.cos(a)*r).attr('cy', oy + Math.sin(a)*r)
-          .attr('r', 3 + Math.random()*3).attr('fill', 'rgba(255,255,255,0.06)')
-          .attr('stroke', 'rgba(255,255,255,0.08)').attr('stroke-width', 0.5);
-      }
-      // Path highlight
-      const bridge = bridgeById[d.source_connection_id];
-      const center = centerNode;
-      if (center && bridge) {
-        overlay.append('line').attr('x1', center.x).attr('y1', center.y).attr('x2', bridge.x).attr('y2', bridge.y)
-          .attr('stroke', '#FFD700').attr('stroke-width', 2).attr('stroke-opacity', 0.6);
-        overlay.append('line').attr('x1', bridge.x).attr('y1', bridge.y).attr('x2', ox).attr('y2', oy)
-          .attr('stroke', '#FF6B35').attr('stroke-width', 2).attr('stroke-opacity', 0.6);
-      }
-      // Status card
-      const isPending = d.unlock_status === 'pending';
-      overlay.append('rect').attr('x', ox-70).attr('y', oy-115).attr('width', 140).attr('height', isPending ? 40 : 55)
-        .attr('rx', 8).attr('fill', 'rgba(0,0,0,0.92)')
-        .attr('stroke', isPending ? 'rgba(255,165,0,0.5)' : 'rgba(255,215,0,0.4)').attr('stroke-width', 1);
-      overlay.append('text').attr('x', ox).attr('y', oy-97)
-        .text(isPending ? 'PENDING...' : 'LOCKED PATH')
-        .attr('fill', isPending ? '#FFA500' : '#FFD700').attr('font-size', 9).attr('font-weight', 800)
-        .attr('text-anchor', 'middle').attr('letter-spacing', 1);
-      if (!isPending) {
-        overlay.append('rect').attr('x', ox-60).attr('y', oy-84).attr('width', 120).attr('height', 24).attr('rx', 6)
-          .attr('fill', '#FFD700').style('cursor', 'pointer')
-          .on('click', (e) => {
-            e.stopPropagation();
-            const bridgeNode = bridgeById[d.source_connection_id];
-            fetch('/api/unlock', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({connectionId:d.id, bridgeId:d.source_connection_id, bridgeName:bridgeNode?.name||''}) }).catch(()=>{});
-            window.open(d.profile_url, '_blank');
-            overlay.select('text').text('PENDING...');
-          });
-        overlay.append('text').attr('x', ox).attr('y', oy-68).text('Connect to Unlock')
-          .attr('fill', '#000').attr('font-size', 10).attr('font-weight', 700).attr('text-anchor', 'middle').style('pointer-events', 'none');
-      } else {
-        overlay.append('text').attr('x', ox).attr('y', oy-82).text('Run a scan to check')
-          .attr('fill', '#888').attr('font-size', 9).attr('text-anchor', 'middle');
-      }
-      event.stopPropagation();
-      svg.on('click.unlock', () => {
-        node.transition().duration(300).attr('opacity', 1);
-        labels.transition().duration(300).attr('opacity', 1);
-        g.selectAll('.unlock-overlay').remove();
-        svg.on('click.unlock', null);
-        simulation.alpha(0.1).restart();
-      });
-    }
-  });
-
-  // --- Auto-zoom to fit the layout (only on first render, not when restoring zoom) ---
-  if (!savedTransform) {
-    const maxOrbit = bridgeNodes.length > 0 ? Math.max(...bridgeNodes.map(b => b._orbitRadius || 500)) : 500;
-    const fitR = maxOrbit + 200;
-    const fitScale = Math.min(width / (fitR * 2.2), height / (fitR * 2.2), 0.85);
-    const initialTransform = d3.zoomIdentity.translate(width/2, height/2).scale(fitScale).translate(-cx, -cy);
-    svg.call(zoomBehavior.transform, initialTransform);
-    if (zoomTransformRef) zoomTransformRef.current = initialTransform;
-  }
-  return simulation;
+  return { simulation, resize, select };
 }
 
 function setupDrag(node, simulation, fixedId) {
@@ -1042,6 +457,6 @@ function setupDrag(node, simulation, fixedId) {
     .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y; })
     .on('end', (event, d) => {
       if (!event.active) simulation.alphaTarget(0);
-      if (d.id !== fixedId && d.nodeType !== 'bridge') { d.fx = null; d.fy = null; }
+      if (d.id !== fixedId) { d.fx = null; d.fy = null; }
     }));
 }