Function renderGraph

scripts/static/js/graph.js:187–396

(data, options = {})

}

function renderGraph(data, options = {}) {
    const { svg: svgEl, g: gEl } = ensureGraphSvg();
    svg = svgEl;
    g = gEl;
    window.g = g; // Ensure global assignment for static export
    if (!g) {
        console.warn('D3 group (g) is null in renderGraph. Aborting render.');
        return;
    }
    // Preserve zoom/pan
    let prevTransform = null;
    if (!svg.empty()) {
        const gZoom = svg.select('g');
        if (!gZoom.empty()) {
            const transform = gZoom.attr('transform');
            if (transform) prevTransform = transform;
        }
    }
    g.selectAll("*").remove();

    // Keep simulation alive and update nodes/links
    if (!simulation) {
        simulation = d3.forceSimulation(data.nodes)
            .force("link", d3.forceLink(data.edges).id(d => d.id).distance(80))
            .force("charge", d3.forceManyBody().strength(-200))
            .force("center", d3.forceCenter(width / 2, height / 2));
    } else {
        simulation.nodes(data.nodes);
        simulation.force("link").links(data.edges);
        simulation.alpha(0.7).restart();
    }

    const link = g.append("g")
        .attr("stroke", "#999")
        .attr("stroke-opacity", 0.6)
        .selectAll("line")
        .data(data.edges)
        .enter().append("line")
        .attr("stroke-width", 2);

    const metric = getSelectedMetric();
    const highlightFilter = document.getElementById('highlight-select').value;
    const highlightNodes = getHighlightNodes(data.nodes, highlightFilter, metric);
    const highlightIds = new Set(highlightNodes.map(n => n.id));

    const node = g.append("g")
        .attr("stroke", getComputedStyle(document.documentElement).getPropertyValue('--node-stroke').trim() || "#fff")
        .attr("stroke-width", 1.5)
        .selectAll("circle")
        .data(data.nodes)
        .enter().append("circle")
        .attr("r", d => getNodeRadius(d))
        .attr("fill", d => getNodeColor(d))
        .attr("class", d => [
            highlightIds.has(d.id) ? 'node-highlighted' : '',
            selectedProgramId === d.id ? 'node-selected' : ''
        ].join(' ').trim())
        .attr('stroke', d => selectedProgramId === d.id ? 'red' : (highlightIds.has(d.id) ? '#2196f3' : '#333'))