@clazic/urban 0.2.4 → 0.2.6

package/web/scripts/pages/graph.js

@@ -0,0 +1,521 @@
+import Graph from "graphology";
+import Sigma from "sigma";
+import FA2Layout from "graphology-layout-forceatlas2/worker";
+import { getJson, postJson } from "../api.js";
+import { qs } from "../dom.js";
+
+// ── Color tokens ───────────────────────────────────────────────────────────────
+const TYPE_COLOR = { report: "#2563eb", topic: "#0f766e", org: "#c2410c" };
+const CLUSTER_PALETTE = [
+  "#2563eb","#0f766e","#c2410c","#7c3aed",
+  "#0369a1","#065f46","#92400e","#86198f",
+];
+
+// ── Module state ───────────────────────────────────────────────────────────────
+let sig            = null;
+let graph          = null;
+let layout         = null;
+let selectedId     = null;
+let selNeighbors   = null;   // Set<id> of selectedId's neighbors
+let egoSet         = null;   // Set<id> when ego mode active
+let clusterMode    = false;
+
+// ── Graph building ─────────────────────────────────────────────────────────────
+function buildGraph(data) {
+  const g = new Graph({ multi: false });
+  for (const n of (data.nodes ?? [])) {
+    const size = Math.max(5, Math.min(20, 5 + Math.sqrt(n.degree ?? 1) * 1.8));
+    const fullLabel = n.label ?? n.id;
+    const label = fullLabel.length > 24 ? fullLabel.slice(0, 23) + "…" : fullLabel;
+    g.addNode(n.id, {
+      label,
+      fullLabel,
+      nodeType: n.type  ?? "other",
+      degree:   n.degree ?? 0,
+      cluster:  n.cluster_id ?? null,
+      size,
+      color: TYPE_COLOR[n.type] ?? "#64748b",
+      x: (Math.random() - 0.5) * 100,
+      y: (Math.random() - 0.5) * 100,
+    });
+  }
+  for (const e of (data.edges ?? [])) {
+    if (g.hasNode(e.source) && g.hasNode(e.target)) {
+      try { g.addEdgeWithKey(e.id ?? `${e.source}-${e.target}`, e.source, e.target, { weight: e.weight ?? 1 }); } catch {}
+    }
+  }
+  return g;
+}
+
+// ── Reducers ───────────────────────────────────────────────────────────────────
+function nodeReducer(nodeId, data) {
+  const res = { ...data };
+  if (clusterMode && data.cluster != null)
+    res.color = CLUSTER_PALETTE[data.cluster % CLUSTER_PALETTE.length];
+  if (egoSet && !egoSet.has(nodeId)) { res.hidden = true; return res; }
+  if (selectedId && nodeId !== selectedId && !selNeighbors?.has(nodeId)) {
+    res.color = res.color + "40";
+    res.label = "";
+  }
+  return res;
+}
+
+function edgeReducer(edgeId, data) {
+  const res = { ...data };
+  const src = graph.source(edgeId);
+  const tgt = graph.target(edgeId);
+  if (egoSet && (!egoSet.has(src) || !egoSet.has(tgt))) { res.hidden = true; return res; }
+  if (selectedId) {
+    if (src !== selectedId && tgt !== selectedId) {
+      res.hidden = true;
+    } else {
+      res.color = "#2563eb";
+      res.size  = 2;
+    }
+  }
+  return res;
+}
+
+// ── Sigma init ─────────────────────────────────────────────────────────────────
+function initSigma() {
+  const container = qs("#graph-container");
+  if (!container || !graph) return;
+  sig = new Sigma(graph, container, {
+    nodeReducer,
+    edgeReducer,
+    renderEdgeLabels:              false,
+    defaultEdgeColor:              "rgba(100,100,120,0.45)",
+    defaultEdgeType:               "line",
+    labelFont:                     '"Pretendard Variable", sans-serif',
+    labelSize:                     12,
+    labelWeight:                   "400",
+    labelColor:                    { color: "rgba(15,23,42,0.85)" },
+    labelDensity:                  0.07,
+    labelGridCellSize:             120,
+    labelRenderedSizeThreshold:    6,
+    minCameraRatio:                0.05,
+    maxCameraRatio:                10,
+  });
+  sig.on("afterRender", drawHulls);
+}
+
+// ── FA2 layout ─────────────────────────────────────────────────────────────────
+function startLayout() {
+  if (!graph || !sig) return;
+  layout = new FA2Layout(graph, {
+    settings: {
+      barnesHutOptimize: true, barnesHutTheta: 0.5,
+      slowDown: 5, gravity: 0.05, scalingRatio: 20, linLogMode: true,
+    },
+  });
+  layout.start();
+  let stable = 0, snap = null;
+  const check = setInterval(() => {
+    if (!layout) { clearInterval(check); return; }
+    const s = JSON.stringify(
+      graph.nodes().slice(0, 5).map(n => {
+        const { x, y } = graph.getNodeAttributes(n);
+        return [Math.round(x * 10), Math.round(y * 10)];
+      })
+    );
+    if (s === snap) { if (++stable >= 3) { layout.stop(); clearInterval(check); fitAll(); } }
+    else            { stable = 0; snap = s; }
+  }, 500);
+  setTimeout(() => { layout?.stop(); clearInterval(check); fitAll(); }, 8000);
+}
+
+// ── BFS ────────────────────────────────────────────────────────────────────────
+function bfsHops(startId, maxHops) {
+  const visited = new Set([startId]);
+  let front = [startId];
+  for (let h = 0; h < maxHops; h++) {
+    const next = [];
+    for (const id of front)
+      for (const nb of graph.neighbors(id))
+        if (!visited.has(nb)) { visited.add(nb); next.push(nb); }
+    front = next;
+    if (!front.length) break;
+  }
+  return visited;
+}
+
+// ── Camera ─────────────────────────────────────────────────────────────────────
+function fitToNodes(nodeIds) {
+  if (!sig || !nodeIds?.size) return;
+
+  // sigma 정규화 공식 기준: normX = (x-minX)/ratio, normY = 1-(y-minY)/ratio
+  // 전체 그래프 범위로 normRatio 계산
+  let fmnX = Infinity, fmxX = -Infinity, fmnY = Infinity, fmxY = -Infinity;
+  graph.forEachNode((id, attrs) => {
+    if (attrs.x < fmnX) fmnX = attrs.x; if (attrs.x > fmxX) fmxX = attrs.x;
+    if (attrs.y < fmnY) fmnY = attrs.y; if (attrs.y > fmxY) fmxY = attrs.y;
+  });
+  const normRatio = Math.max(fmxX - fmnX, fmxY - fmnY, 1);
+
+  // 서브셋 노드를 sigma 정규화 공간으로 변환 후 바운딩 박스 계산
+  let mnX = Infinity, mxX = -Infinity, mnY = Infinity, mxY = -Infinity;
+  for (const id of nodeIds) {
+    const { x, y } = graph.getNodeAttributes(id);
+    const nx = (x - fmnX) / normRatio;
+    const ny = 1 - (y - fmnY) / normRatio;
+    if (nx < mnX) mnX = nx; if (nx > mxX) mxX = nx;
+    if (ny < mnY) mnY = ny; if (ny > mxY) mxY = ny;
+  }
+
+  const cx   = (mnX + mxX) / 2;
+  const cy   = (mnY + mxY) / 2;
+  const span = Math.max(mxX - mnX, mxY - mnY, 0.01);
+  sig.getCamera().animate({ x: cx, y: cy, ratio: Math.max(0.05, span / 0.7) }, { duration: 500 });
+}
+
+function fitAll() {
+  if (!sig || !graph) return;
+  fitToNodes(new Set(graph.nodes()));
+}
+
+// ── Tooltip ────────────────────────────────────────────────────────────────────
+function bindTooltip() {
+  const tip = qs("#graph-tooltip");
+  if (!tip || !sig) return;
+  sig.on("enterNode", ({ node }) => {
+    const attrs = graph.getNodeAttributes(node);
+    const vp    = sig.graphToViewport(attrs);
+    tip.innerHTML = `
+      <strong class="graph-tooltip-title">${attrs.label}</strong>
+      <span class="graph-tooltip-meta">${attrs.nodeType} · 연결 ${graph.degree(node)}개${
+        attrs.cluster != null ? ` · 클러스터 ${attrs.cluster}` : ""
+      }</span>`;
+    tip.style.cssText = `display:block;left:${vp.x + 14}px;top:${vp.y + 14}px`;
+  });
+  sig.on("leaveNode", () => { tip.style.display = "none"; });
+}
+
+// ── Drag ───────────────────────────────────────────────────────────────────────
+let _dragNode    = null;
+let _wasDragged  = false;
+let _dragGroup   = null;   // Set<nodeId> — 드래그 노드 + 직접 연결된 이웃
+let _prevDragPos = null;   // { x, y } graph 좌표 — 전 프레임 마우스 위치
+
+function bindDrag() {
+  if (!sig || !graph) return;
+  const container = qs("#graph-container");
+
+  sig.on("downNode", ({ node }) => {
+    _dragNode   = node;
+    _wasDragged = false;
+    _prevDragPos = null;
+
+    // 드래그 노드 + 직접 연결된 모든 이웃을 그룹으로 묶음
+    _dragGroup = new Set([node, ...graph.neighbors(node)]);
+    for (const id of _dragGroup) graph.setNodeAttribute(id, "fixed", true);
+
+    if (container) container.style.cursor = "grabbing";
+  });
+
+  sig.getMouseCaptor().on("mousemovebody", (e) => {
+    if (!_dragNode || !_dragGroup) return;
+    _wasDragged = true;
+
+    const pos = sig.viewportToGraph(e);
+
+    if (_prevDragPos) {
+      const dx = pos.x - _prevDragPos.x;
+      const dy = pos.y - _prevDragPos.y;
+      for (const id of _dragGroup) {
+        graph.setNodeAttribute(id, "x", graph.getNodeAttribute(id, "x") + dx);
+        graph.setNodeAttribute(id, "y", graph.getNodeAttribute(id, "y") + dy);
+      }
+    }
+
+    _prevDragPos = pos;
+    e.preventSigmaDefault();
+  });
+
+  sig.getMouseCaptor().on("mouseup", () => {
+    if (_dragGroup) {
+      for (const id of _dragGroup) graph.setNodeAttribute(id, "fixed", false);
+    }
+    _dragNode = null; _dragGroup = null; _prevDragPos = null;
+    if (container) container.style.cursor = "";
+  });
+
+  sig.on("enterNode", () => { if (!_dragNode && container) container.style.cursor = "grab"; });
+  sig.on("leaveNode", () => { if (!_dragNode && container) container.style.cursor = ""; });
+}
+
+// ── Node events ────────────────────────────────────────────────────────────────
+function bindNodeEvents() {
+  if (!sig) return;
+  sig.on("clickNode", ({ node }) => {
+    if (_wasDragged) { _wasDragged = false; return; }
+    selectedId   = selectedId === node ? null : node;
+    selNeighbors = selectedId ? new Set(graph.neighbors(selectedId)) : null;
+    updateInspector(selectedId ? graph.getNodeAttributes(selectedId) : null, selectedId);
+    const eg = qs("#graph-ego-group");
+    if (eg) eg.hidden = !selectedId;
+    sig.refresh();
+  });
+  sig.on("clickStage", () => {
+    selectedId = null; selNeighbors = null; egoSet = null;
+    updateInspector(null, null);
+    const eg = qs("#graph-ego-group");
+    if (eg) eg.hidden = true;
+    sig.refresh();
+  });
+  sig.on("doubleClickNode", ({ node, event }) => {
+    event.preventSigmaDefault();
+    fitToNodes(bfsHops(node, 1));
+  });
+}
+
+// ── Convex hull ────────────────────────────────────────────────────────────────
+function convexHull(pts) {
+  if (pts.length < 3) return pts;
+  const s = [...pts].sort((a, b) => a.x - b.x || a.y - b.y);
+  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
+  const lo = [], hi = [];
+  for (const p of s) {
+    while (lo.length >= 2 && cross(lo.at(-2), lo.at(-1), p) <= 0) lo.pop();
+    lo.push(p);
+  }
+  for (let i = s.length - 1; i >= 0; i--) {
+    const p = s[i];
+    while (hi.length >= 2 && cross(hi.at(-2), hi.at(-1), p) <= 0) hi.pop();
+    hi.push(p);
+  }
+  hi.pop(); lo.pop();
+  return lo.concat(hi);
+}
+
+function drawHulls() {
+  const hc   = qs("#graph-hull-canvas");
+  const wrap = qs("#graph-canvas");
+  if (!hc || !wrap) return;
+  hc.width  = wrap.clientWidth;
+  hc.height = wrap.clientHeight;
+  const ctx = hc.getContext("2d");
+  ctx.clearRect(0, 0, hc.width, hc.height);
+  if (!clusterMode || !sig || !graph) return;
+
+  const clusters = new Map();
+  graph.forEachNode((id, attrs) => {
+    if (attrs.cluster == null || (egoSet && !egoSet.has(id))) return;
+    if (!clusters.has(attrs.cluster)) clusters.set(attrs.cluster, []);
+    clusters.get(attrs.cluster).push(id);
+  });
+  for (const [cid, ids] of clusters) {
+    if (ids.length < 3) continue;
+    const pts  = ids.map(id => sig.graphToViewport(graph.getNodeAttributes(id)));
+    const hull = convexHull(pts);
+    if (!hull.length) continue;
+    const color = CLUSTER_PALETTE[cid % CLUSTER_PALETTE.length];
+    ctx.beginPath();
+    ctx.moveTo(hull[0].x, hull[0].y);
+    for (let i = 1; i < hull.length; i++) ctx.lineTo(hull[i].x, hull[i].y);
+    ctx.closePath();
+    ctx.fillStyle   = color + "14";
+    ctx.strokeStyle = color + "50";
+    ctx.lineWidth   = 1.5;
+    ctx.fill();
+    ctx.stroke();
+  }
+}
+
+// ── Inspector ──────────────────────────────────────────────────────────────────
+function updateInspector(attrs, nodeId) {
+  const el = qs("#graph-inspector");
+  const fc = qs("#graph-focus-count");
+  if (fc) fc.textContent = attrs ? "1" : "-";
+  if (!el) return;
+  if (!attrs) { el.textContent = "노드를 선택하면 상세 정보가 표시됩니다."; return; }
+  let link = "";
+  if (attrs.nodeType === "report") {
+    link = `<a class="graph-inspector-link" href="#" data-nav="/catalog" data-focus="${nodeId}">보고서 보기 →</a>`;
+  } else if (attrs.nodeType === "topic") {
+    link = `<a class="graph-inspector-link" href="#" data-nav="/wiki" data-hash="${encodeURIComponent(attrs.fullLabel ?? attrs.label)}">위키 보기 →</a>`;
+  }
+  el.innerHTML = `
+    <div class="graph-inspector-title">${attrs.fullLabel ?? attrs.label}</div>
+    <div class="graph-inspector-meta">${attrs.nodeType} · 연결 ${graph.degree(nodeId)}개</div>
+    ${attrs.cluster != null ? `<div class="graph-inspector-meta">클러스터 ${attrs.cluster}</div>` : ""}
+    ${link}
+  `;
+  el.querySelectorAll("[data-nav]").forEach(a => {
+    a.addEventListener("click", e => {
+      e.preventDefault();
+      const route = a.dataset.nav;
+      const focus = a.dataset.focus;
+      const hash  = a.dataset.hash;
+      if (focus) window.app?.navigateTo(`${route}?focus=${focus}`);
+      else if (hash) window.app?.navigateTo(`/wiki#${decodeURIComponent(hash)}`);
+      else window.app?.navigateTo(route);
+    });
+  });
+}
+
+// ── Search ─────────────────────────────────────────────────────────────────────
+function bindSearch() {
+  const input = qs("#graph-search");
+  const box   = qs("#graph-search-results");
+  if (!input || !box) return;
+
+  input.addEventListener("input", () => {
+    const q = input.value.trim().toLowerCase();
+    box.innerHTML = "";
+    if (!q || !graph) { box.hidden = true; return; }
+    const hits = [];
+    graph.forEachNode((id, attrs) => {
+      const searchTarget = (attrs.fullLabel ?? attrs.label).toLowerCase();
+      if (searchTarget.includes(q)) hits.push({ id, attrs });
+    });
+    hits.sort((a, b) => (a.attrs.fullLabel ?? a.attrs.label).localeCompare(b.attrs.fullLabel ?? b.attrs.label, "ko"));
+    hits.slice(0, 8).forEach(({ id, attrs }) => {
+      const btn = document.createElement("button");
+      btn.className = "graph-search-item";
+      const displayLabel = attrs.fullLabel ?? attrs.label;
+      btn.innerHTML = `<span class="gsi-type" data-type="${attrs.nodeType}">${attrs.nodeType[0].toUpperCase()}</span><span>${displayLabel}</span>`;
+      btn.addEventListener("click", () => {
+        box.hidden = true; input.value = "";
+        selectedId   = id;
+        selNeighbors = new Set(graph.neighbors(id));
+        updateInspector(attrs, id);
+        const eg = qs("#graph-ego-group");
+        if (eg) eg.hidden = false;
+        sig?.refresh();
+        fitToNodes(bfsHops(id, 1));
+      });
+      box.appendChild(btn);
+    });
+    box.hidden = !hits.length;
+  });
+
+  document.addEventListener("click", e => {
+    if (!input.contains(e.target) && !box.contains(e.target)) box.hidden = true;
+  });
+}
+
+// ── Stats ──────────────────────────────────────────────────────────────────────
+function updateStats(data) {
+  const set = (id, v) => { const el = qs(id); if (el) el.textContent = v; };
+  set("#graph-node-count",    (data.nodes?.length ?? data.stats?.nodeCount ?? 0).toLocaleString("ko-KR"));
+  set("#graph-edge-count",    (data.edges?.length ?? data.stats?.edgeCount ?? 0).toLocaleString("ko-KR"));
+  set("#graph-cluster-count", new Set((data.nodes ?? []).map(n => n.cluster_id).filter(v => v != null)).size || "-");
+}
+
+// ── Load ───────────────────────────────────────────────────────────────────────
+async function loadGraph() {
+  const empty = qs("#graph-empty");
+  if (empty) { empty.hidden = false; empty.querySelector("span").textContent = "그래프 로드 중..."; }
+
+  layout?.stop(); layout?.kill(); layout = null;
+  sig?.kill(); sig = null;
+  graph = null; selectedId = null; selNeighbors = null; egoSet = null;
+
+  const params = new URLSearchParams({ compact: "true", top: qs("#graph-top-n")?.value ?? "100" });
+  const type = qs("#graph-type-filter")?.value;
+  if (type) params.set("type", type);
+
+  const data = await getJson(`/api/graph?${params}`);
+  graph = buildGraph(data);
+  initSigma();
+  if (!sig) return;
+
+  bindTooltip();
+  bindNodeEvents();
+  bindDrag();
+  startLayout();
+  updateStats(data);
+  updateInspector(null, null);
+  if (qs("#graph-top-n-val")) qs("#graph-top-n-val").textContent = qs("#graph-top-n").value;
+  if (empty) empty.hidden = true;
+}
+
+// ── Fullscreen ─────────────────────────────────────────────────────────────────
+function bindFullscreen() {
+  const overlay  = qs("#graph-fullscreen-overlay");
+  const canvasEl = qs("#graph-canvas");
+  let origParent = null;
+
+  const enter = () => {
+    if (!overlay || !canvasEl || !overlay.hidden) return;
+    origParent = canvasEl.parentElement;
+    overlay.appendChild(canvasEl);
+    overlay.hidden = false;
+    document.body.style.overflow = "hidden";
+    setTimeout(() => { sig?.refresh(); drawHulls(); }, 60);
+  };
+
+  const exit = () => {
+    if (!overlay || !canvasEl || overlay.hidden) return;
+    origParent?.appendChild(canvasEl);
+    overlay.hidden = true;
+    document.body.style.overflow = "";
+    setTimeout(() => { sig?.refresh(); drawHulls(); }, 60);
+  };
+
+  qs("#graph-fullscreen")?.addEventListener("click", enter);
+  qs("#graph-fullscreen-close")?.addEventListener("click", exit);
+  document.addEventListener("keydown", e => { if (e.key === "Escape" && !overlay?.hidden) exit(); });
+}
+
+// ── Controls ───────────────────────────────────────────────────────────────────
+function bindControls() {
+  qs("#graph-refresh")?.addEventListener("click", loadGraph);
+  qs("#graph-report")?.addEventListener("click", () => postJson("/api/graph/report"));
+  qs("#graph-type-filter")?.addEventListener("change", loadGraph);
+  qs("#graph-top-n")?.addEventListener("change", loadGraph);
+  qs("#graph-top-n")?.addEventListener("input", () => {
+    const v = qs("#graph-top-n-val");
+    if (v) v.textContent = qs("#graph-top-n").value;
+  });
+
+  document.querySelectorAll("[data-zoom]").forEach(btn => {
+    btn.addEventListener("click", () => {
+      if (!sig) return;
+      const cam = sig.getCamera();
+      if (btn.dataset.zoom === "reset") { fitAll(); return; }
+      const f = btn.dataset.zoom === "in" ? 0.7 : 1.4;
+      cam.animate({ ratio: cam.ratio * f }, { duration: 200 });
+    });
+  });
+
+  qs("#graph-cluster-mode")?.addEventListener("change", e => {
+    clusterMode = e.target.checked;
+    sig?.refresh();
+  });
+
+  qs("#graph-ego-1")?.addEventListener("click", () => {
+    if (!selectedId || !sig) return;
+    egoSet = bfsHops(selectedId, 1);
+    sig.refresh();
+    fitToNodes(egoSet);
+  });
+  qs("#graph-ego-2")?.addEventListener("click", () => {
+    if (!selectedId || !sig) return;
+    egoSet = bfsHops(selectedId, 2);
+    sig.refresh();
+    fitToNodes(egoSet);
+  });
+  qs("#graph-ego-restore")?.addEventListener("click", () => {
+    egoSet = null;
+    sig?.refresh();
+  });
+}
+
+// ── Mount / Unmount ────────────────────────────────────────────────────────────
+export async function mount() {
+  selectedId = null; selNeighbors = null; egoSet = null; clusterMode = false;
+  bindControls();
+  bindSearch();
+  bindFullscreen();
+  await loadGraph();
+}
+
+export async function unmount() {
+  layout?.stop(); layout?.kill(); layout = null;
+  sig?.kill(); sig = null;
+  graph = null;
+  selectedId = null; selNeighbors = null; egoSet = null;
+}
+
+export default { mount, unmount };