@takagaki/cortex-decisions-viewer 0.4.5 → 0.4.7

package/dist/build.js

@@ -472,7 +472,9 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
     for (const sec of sections)
         for (const r of sec.records)
             fileNameToId.set(r.fileName, r.id);
-    // 参照先IDから層を推定してノード化する
+    // 参照先IDから層を推定してノード化する。
+    // 外部リンク(http(s))はノード化せず null を返す（外部URLの点はグラフ肥大化＝描画負荷の主因。
+    // リンク自体は各レコードの詳細・参照欄に残るため情報は失われない）。
     const classifyTarget = (target) => {
         if (nodes.has(target))
             return target;
@@ -496,9 +498,7 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
                 return addNode({ id: target, label, group, url });
         }
         else if (/^https?:\/\//.test(target)) {
-            group = "external";
-            label = target.replace(/^https?:\/\//, "").slice(0, 60);
-            return addNode({ id: target, label, group, url: target });
+            return null; // 外部リンクはノード化しない
         }
         else if (target.includes("/") || target.toLowerCase().endsWith(".md")) {
             group = "silver"; // リポジトリ内ファイルへのパス参照 → GitHubのコピーへ飛べるようにする
@@ -508,36 +508,45 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
         }
         return addNode({ id: target, label, group });
     };
+    // 解決先が null（外部リンク等で非ノード化）の辺は張らない
+    const pushEdge = (fromId, target, rel) => {
+        if (target)
+            edges.push({ from: fromId, to: target, rel });
+    };
+    // 外部URLノードを作る（source/references の出典用フォールバック）。
+    const externalNode = (url, label) => addNode({
+        id: url,
+        label: (label ?? url.replace(/^https?:\/\//, "")).slice(0, 60),
+        group: "external",
+        url,
+    });
+    // 出典(source/reference)の解決: Backlog課題URLは実ノード(bronze)へ、議事録ID等は該当ノードへ。
+    // 解決できない外部URL（Wiki・GitHub等）は外部ノードとして必ず繋ぐ（出典は少数で意味があるため残す。
+    // 大量の「本文リンク」の騒音は addLinkEdges 側でドロップしたまま）。
+    const provenanceTarget = (raw, label) => {
+        const v = raw.trim();
+        return classifyTarget(backlogViewKey(v) ?? v) ?? externalNode(v, label);
+    };
     const addRelationEdges = (fromId, relations) => {
-        for (const r of relations) {
-            edges.push({ from: fromId, to: classifyTarget(r.target), rel: r.rel });
-        }
+        for (const r of relations)
+            pushEdge(fromId, classifyTarget(r.target), r.rel);
     };
     const addSourceEdge = (fromId, source) => {
         if (source && source.trim() !== "")
-            edges.push({ from: fromId, to: classifyTarget(source.trim()), rel: "source" });
+            edges.push({ from: fromId, to: provenanceTarget(source), rel: "source" });
     };
     const addReferenceEdges = (fromId, references) => {
         for (const ref of references) {
-            if (ref.url) {
-                const id = addNode({
-                    id: ref.url,
-                    label: ref.label.slice(0, 60),
-                    group: "external",
-                    url: ref.url,
-                });
-                edges.push({ from: fromId, to: id, rel: "reference" });
-            }
-            else {
-                edges.push({ from: fromId, to: classifyTarget(ref.label), rel: "reference" });
-            }
+            const to = ref.url ? provenanceTarget(ref.url, ref.label) : classifyTarget(ref.label);
+            pushEdge(fromId, to, "reference");
         }
     };
+    // Gold層(Decision/用語/レポート/Home)の本文リンクは必ず繋ぐ（外部URLでも外部ノードとして接続）。
+    // ＝frontmatterを持つレコードは孤立させない。大量の騒音は「コンテキスト側の本文リンク」(content edges)
+    // のみドロップする（下の content ループは classifyTarget のまま）。
     const addLinkEdges = (fromId, links) => {
-        for (const link of links) {
-            const key = backlogViewKey(link);
-            edges.push({ from: fromId, to: classifyTarget(key ?? link), rel: "link" });
-        }
+        for (const link of links)
+            edges.push({ from: fromId, to: provenanceTarget(link), rel: "link" });
     };
     // Bronze/Silverのノードを先に登録する（Gold・Bronze/Silver双方からの参照が同一ノードに解決されるように）
     for (const c of content) {
@@ -573,7 +582,7 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
     }
     for (const c of content) {
         for (const e of c.edges) {
-            edges.push({ from: c.id, to: classifyTarget(e.target), rel: e.rel });
+            pushEdge(c.id, classifyTarget(e.target), e.rel);
         }
     }
     // 自己ループと重複辺を除去する（同じURLが複数回貼られていても辺は1本）
@@ -587,7 +596,15 @@ function buildGraph(decisions, home, sections, content, targetUrls, repoBaseUrl,
         seen.add(key);
         return true;
     });
-    return { nodes: [...nodes.values()], edges: deduped };
+    // 描画対象は「レコード(Gold) or 辺に接続のあるノード」だけ。外部リンク除去で孤立した
+    // 非レコードノードは描画もされないため、ペイロードからも落としておく（初期ロードを軽くする）。
+    const usedIds = new Set();
+    for (const e of deduped) {
+        usedIds.add(e.from);
+        usedIds.add(e.to);
+    }
+    const prunedNodes = [...nodes.values()].filter((n) => n.recordId || usedIds.has(n.id));
+    return { nodes: prunedNodes, edges: deduped };
 }
 /**
  * 各レコードの bodyHtml を out/bodies/<i>.html に書き出し、bodyRef にパスを設定して

package/dist/render.js

@@ -979,8 +979,8 @@ const CLIENT_JS = `
     }
     resize();
 
-    function tick() {
-      // 反発
+    // 反発（O(n²)・全ペア総当たり）。点が少ないうちはこれが最速。
+    function repulseNaive() {
       for (var i = 0; i < nodes.length; i++) {
         for (var j = i + 1; j < nodes.length; j++) {
           var a = nodes[i], b = nodes[j];
@@ -992,6 +992,60 @@ const CLIENT_JS = `
           a.vx -= fx; a.vy -= fy; b.vx += fx; b.vy += fy;
         }
       }
+    }
+    // 反発（Barnes-Hut・O(n log n)）。四分木で遠いノード群を重心1点に近似する。
+    // 点が多い案件（フリート拡大時）でも tick が重くならない＝点を削らずに固まりを防ぐための土台。
+    function repulseBH() {
+      var nn = nodes.length, i;
+      if (nn < 2) return;
+      var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (i = 0; i < nn; i++) { var p0 = nodes[i]; if (p0.x < minX) minX = p0.x; if (p0.y < minY) minY = p0.y; if (p0.x > maxX) maxX = p0.x; if (p0.y > maxY) maxY = p0.y; }
+      var size = Math.max(maxX - minX, maxY - minY, 1) + 1;
+      // 配列ベースの四分木。BODY: -1=空 / >=0=葉(そのノードindex) / -2=内部ノード
+      var QX = [minX], QY = [minY], QS = [size], MASS = [0], CX = [0], CY = [0];
+      var C0 = [-1], C1 = [-1], C2 = [-1], C3 = [-1], BODY = [-1];
+      function nc(x, y, s) { QX.push(x); QY.push(y); QS.push(s); MASS.push(0); CX.push(0); CY.push(0); C0.push(-1); C1.push(-1); C2.push(-1); C3.push(-1); BODY.push(-1); return QX.length - 1; }
+      function childOf(c, q) { return q === 0 ? C0[c] : q === 1 ? C1[c] : q === 2 ? C2[c] : C3[c]; }
+      function setChild(c, q, v) { if (q === 0) C0[c] = v; else if (q === 1) C1[c] = v; else if (q === 2) C2[c] = v; else C3[c] = v; }
+      function pushDown(c, bi, depth) {
+        var hx = QX[c] + QS[c] / 2, hy = QY[c] + QS[c] / 2;
+        var q = (nodes[bi].x >= hx ? 1 : 0) + (nodes[bi].y >= hy ? 2 : 0);
+        var ch = childOf(c, q);
+        if (ch === -1) { var s = QS[c] / 2; ch = nc(QX[c] + ((q & 1) ? s : 0), QY[c] + ((q & 2) ? s : 0), s); setChild(c, q, ch); }
+        insert(ch, bi, depth + 1);
+      }
+      function insert(c, bi, depth) {
+        var x = nodes[bi].x, y = nodes[bi].y;
+        if (MASS[c] === 0) { CX[c] = x; CY[c] = y; } else { CX[c] = (CX[c] * MASS[c] + x) / (MASS[c] + 1); CY[c] = (CY[c] * MASS[c] + y) / (MASS[c] + 1); }
+        if (MASS[c] === 0 && BODY[c] === -1) { BODY[c] = bi; MASS[c] = 1; return; }
+        MASS[c]++;
+        if (depth >= 24) return; // 深さ上限（ほぼ同一座標）: これ以上分割せず集約
+        if (BODY[c] !== -2) { var old = BODY[c]; BODY[c] = -2; pushDown(c, old, depth); }
+        pushDown(c, bi, depth);
+      }
+      for (i = 0; i < nn; i++) insert(0, i, 0);
+      var theta2 = 1.0; // 受容角θ=1.0 の二乗（セルサイズ/距離 < θ なら重心1点で近似）
+      for (i = 0; i < nn; i++) {
+        var p = nodes[i]; var stack = [0];
+        while (stack.length) {
+          var c = stack.pop();
+          if (MASS[c] === 0) continue;
+          if (BODY[c] === i && MASS[c] === 1) continue; // 自分自身の葉
+          var dx = CX[c] - p.x, dy = CY[c] - p.y; var d2 = dx * dx + dy * dy + 0.01;
+          if (BODY[c] !== -2 || QS[c] * QS[c] < theta2 * d2) {
+            var f = 1800 * MASS[c] / d2; var d = Math.sqrt(d2);
+            p.vx -= dx / d * f; p.vy -= dy / d * f;
+          } else {
+            if (C0[c] !== -1) stack.push(C0[c]); if (C1[c] !== -1) stack.push(C1[c]);
+            if (C2[c] !== -1) stack.push(C2[c]); if (C3[c] !== -1) stack.push(C3[c]);
+          }
+        }
+      }
+    }
+    // 約900点を境に切替: 小規模=naive(オーバーヘッド無しで最速) / 大規模=Barnes-Hut(固まらない)。
+    var REPULSE_NAIVE_MAX = 900;
+    function tick() {
+      if (nodes.length < REPULSE_NAIVE_MAX) repulseNaive(); else repulseBH();
       // ばね（辺）
       edges.forEach(function (e) {
         var dx = e.b.x - e.a.x, dy = e.b.y - e.a.y;
@@ -1000,20 +1054,22 @@ const CLIENT_JS = `
         var fx = (dx / d) * f, fy = (dy / d) * f;
         e.a.vx += fx; e.a.vy += fy; e.b.vx -= fx; e.b.vy -= fy;
       });
-      // Goldは中心への重力、グレーは外周リングへの引力 + 減衰
+      // 全ノードを中心へ向ける等方的な引力（Goldは強め＝中央に、コンテキストは弱め＝その周り）。
+      // さらに半径 RING の円で外周を押し戻して封じ込める。これで対角の伸び・飛び出したスポークが
+      // 抑えられ、全体が円形のディスクに収まる（force-directed本来の「丸める力の不在」を補う）。
       nodes.forEach(function (n) {
-        if (n.recordId) {
-          n.vx -= n.x * 0.012; n.vy -= n.y * 0.012;
-        } else {
-          var r = Math.sqrt(n.x * n.x + n.y * n.y) + 0.01;
-          var rf = (r - RING) * 0.012;
+        var g = n.recordId ? 0.012 : 0.005;
+        n.vx -= n.x * g; n.vy -= n.y * g;
+        var r = Math.sqrt(n.x * n.x + n.y * n.y) + 0.01;
+        if (r > RING) {
+          var rf = (r - RING) * 0.05; // 円の外に出た分だけ内側へ強めに戻す（円形の境界）
           n.vx -= (n.x / r) * rf; n.vy -= (n.y / r) * rf;
         }
         if (n === draggingNode) { n.vx = 0; n.vy = 0; return; }
         n.vx *= 0.85; n.vy *= 0.85;
         n.x += n.vx * alpha; n.y += n.vy * alpha;
       });
-      if (alpha > 0.05) alpha *= 0.995;
+      if (alpha > 0.0015) alpha *= 0.97; // 収束まで減衰しきる（下げ止まりさせず、整定後はループ側で物理計算を止める）
     }
 
     function nodeRadius(n) {
@@ -1257,6 +1313,7 @@ const CLIENT_JS = `
           else if (n.url) window.open(n.url, "_blank", "noopener");
         }
       }
+      if (draggingNode) alpha = Math.max(alpha, 0.2); // 動かした点の周りを少し整え直してから止まる
       draggingNode = null;
       panning = null;
       canvas.classList.remove("dragging");
@@ -1282,7 +1339,9 @@ const CLIENT_JS = `
     var running = true;
     function loop() {
       if (!running || !document.body.contains(canvas)) { running = false; return; }
-      tick();
+      // 収束後（alpha減衰しきり・無操作）は O(n²) の物理計算 tick を止める。これが「固まり続ける」主因。
+      // ドラッグ/パン中は動かす必要があるので回す。描画(draw)はホバー演出・イントロのため毎フレーム続ける。
+      if (alpha > 0.004 || draggingNode || panning) tick();
       draw();
       requestAnimationFrame(loop);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@takagaki/cortex-decisions-viewer",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "Cortexの意思決定記録（Decisions/*.md）を静的サイトにビルドして閲覧する。各レコードに「Edit on GitHub」リンクを付与する。",
   "license": "UNLICENSED",
   "private": false,