Function renderWikiGraph

deployments/desktop/static/desktop.js:3704–3785

()

  }

  function renderWikiGraph() {
    const target = $("wikiGraph");
    const graph = state.wikiGraph || {};
    const hasBackendGraph = Boolean(graph.nodes?.length);
    const graphNodes = hasBackendGraph ? graph.nodes : state.wikiNodes.length ? state.wikiNodes : DEMO_MODE ? demoWikiNodes : [];
    const graphEdges = hasBackendGraph ? graph.edges || [] : DEMO_MODE ? demoWikiEdges : [];
    const layout = layoutGraph(graphNodes, graphEdges);
    if (!layout.nodes.length) {
      target.innerHTML = `
        <div class="wiki-empty-state">
          <strong>${escapeHtml(ui().wiki.emptyGraphTitle)}</strong>
          <p>${escapeHtml(ui().wiki.emptyGraphBody)}</p>
        </div>
      `;
      return;
    }
    const spread = state.wikiGraphTransform.scale;
    const visualNodes = layout.nodes.map((node) => ({
      ...node,
      x: 50 + (Number(node.x) - 50) * spread,
      y: 50 + (Number(node.y) - 50) * spread
    }));
    const byId = Object.fromEntries(visualNodes.map((node) => [node.id, node]));
    const lineHtml = layout.edges.map((edge, index) => {
      const a = byId[String(edge.src_id)];
      const b = byId[String(edge.dst_id)];
      if (!a || !b) return "";
      const weightClass = graphWeight(edge) >= 0.78 || a.id === layout.centerId || b.id === layout.centerId
        ? "strong"
        : graphWeight(edge) >= 0.35 ? "medium" : "light";
      const curve = (index % 2 === 0 ? 4 : -4) * Math.max(0.8, Math.min(spread, 1.8));
      const midX = (a.x + b.x) / 2 + curve;
      const midY = (a.y + b.y) / 2 - curve;
      return `<path class="graph-svg-link ${weightClass}" d="M ${a.x} ${a.y} Q ${midX} ${midY} ${b.x} ${b.y}"></path>`;
    }).join("");
    const activeNodeId = state.currentWikiNodeId || layout.centerId;
    const nodeZoom = Math.max(0.82, Math.min(1.18, 0.9 + spread * 0.1));
    const labelZoom = Math.max(0.9, Math.min(1.22, 0.94 + spread * 0.08));
    const nodeHtml = visualNodes.map((node) => `
      <button
        class="graph-node ${node.type} ${node.size || "medium"} ${node.id === activeNodeId ? "active" : ""}"
        data-node-id="${escapeHtml(graphId(node))}"
        data-real-node-id="${escapeHtml(node.real_node_id || "")}"
        data-node-title="${escapeHtml(rawGraphTitle(node))}"
        data-node-body="${escapeHtml(rawGraphBody(node))}"
        title="${escapeHtml(graphTitle(node))}"
        style="left:${node.x}%;top:${node.y}%;--node-zoom:${nodeZoom};--label-zoom:${labelZoom}"
        type="button"
      >
        <span class="node-dot"></span>
        <span class="node-label">${escapeHtml(graphTitle(node))}</span>
      </button>
    `).join("");
    target.classList.toggle("real", hasBackendGraph);
    const totalNodes = Number(state.wikiStats?.nodes || layout.sourceCount || 0);
    const graphNote = hasBackendGraph
      ? ui().wiki.graphRealNote(layout.nodes.length, totalNodes, layout.sourceEdgeCount)
      : state.wikiNodes.length