From 0081f89eb8f3b173bdc29f235bc34bcad481898a Mon Sep 17 00:00:00 2001 From: irof Date: Thu, 5 Feb 2026 01:31:21 +0900 Subject: [PATCH 1/3] =?UTF-8?q?=E6=8E=A8=E7=A7=BB=E7=B0=A1=E7=B4=84?= =?UTF-8?q?=E3=81=AE=E5=AE=9F=E8=A3=85=EF=BC=88=E3=83=86=E3=82=B9=E3=83=88?= =?UTF-8?q?=E5=A4=B1=E6=95=97=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../resources/templates/assets/package.js | 131 ++++++++++++++++++ jig-core/src/test/js/package.test.js | 85 ++++++++++++ 2 files changed, 216 insertions(+) diff --git a/jig-core/src/main/resources/templates/assets/package.js b/jig-core/src/main/resources/templates/assets/package.js index 6b9c5a994..85ec8cdf2 100644 --- a/jig-core/src/main/resources/templates/assets/package.js +++ b/jig-core/src/main/resources/templates/assets/package.js @@ -10,6 +10,7 @@ let packageFilterFqn = null; let relatedFilterMode = 'direct'; let relatedFilterFqn = null; let diagramDirection = 'TD'; +let transitiveReductionEnabled = true; function getOrCreateDiagramErrorBox(diagram) { let errorBox = document.getElementById('package-diagram-error'); @@ -449,6 +450,101 @@ function renderMutualDependencyList(mutualPairs, causeRelationEvidence) { container.appendChild(details); } +function detectStronglyConnectedComponents(graph) { + const indices = new Map(); + const lowLink = new Map(); + const stack = []; + const onStack = new Set(); + const result = []; + const index = {value: 0}; + + function strongConnect(node) { + indices.set(node, index.value); + lowLink.set(node, index.value); + index.value++; + stack.push(node); + onStack.add(node); + + (graph.get(node) || []).forEach(neighbor => { + if (!indices.has(neighbor)) { + strongConnect(neighbor); + lowLink.set(node, Math.min(lowLink.get(node), lowLink.get(neighbor))); + } else if (onStack.has(neighbor)) { + lowLink.set(node, Math.min(lowLink.get(node), indices.get(neighbor))); + } + }); + + if (lowLink.get(node) === indices.get(node)) { + const scc = []; + let current; + do { + current = stack.pop(); + onStack.delete(current); + scc.push(current); + } while (current !== node); + result.push(scc); + } + } + + for (const node of graph.keys()) { + if (!indices.has(node)) { + strongConnect(node); + } + } + return result; +} + +function transitiveReduction(relations) { + const graph = new Map(); + relations.forEach(relation => { + if (!graph.has(relation.from)) graph.set(relation.from, []); + graph.get(relation.from).push(relation.to); + }); + + const sccs = detectStronglyConnectedComponents(graph); + const cyclicNodes = new Set(sccs.filter(scc => scc.length > 1).flat()); + const cyclicEdges = new Set( + relations + .filter(edge => cyclicNodes.has(edge.from) && cyclicNodes.has(edge.to)) + .map(edge => `${edge.from}::${edge.to}`) + ); + + const acyclicGraph = new Map(); + relations.forEach(edge => { + if (cyclicEdges.has(`${edge.from}::${edge.to}`)) return; + if (!acyclicGraph.has(edge.from)) acyclicGraph.set(edge.from, []); + acyclicGraph.get(edge.from).push(edge.to); + }); + + function isReachableWithoutDirect(start, end) { + const visited = new Set(); + + function dfs(current, target, skipDirect) { + if (current === target) return true; + visited.add(current); + const neighbors = acyclicGraph.get(current) || []; + for (const neighbor of neighbors) { + if (skipDirect && neighbor === target) continue; + if (visited.has(neighbor)) continue; + if (dfs(neighbor, target, false)) return true; + } + return false; + } + + return dfs(start, end, true); + } + + const toRemove = new Set(); + relations.forEach(edge => { + if (cyclicEdges.has(`${edge.from}::${edge.to}`)) return; + if (isReachableWithoutDirect(edge.from, edge.to)) { + toRemove.add(`${edge.from}::${edge.to}`); + } + }); + + return relations.filter(edge => !toRemove.has(`${edge.from}::${edge.to}`)); +} + function renderPackageDiagram(packageFilterFqn, relatedFilterFqn) { const diagram = document.getElementById('package-relation-diagram'); if (!diagram) return; @@ -488,6 +584,10 @@ function renderPackageDiagram(packageFilterFqn, relatedFilterFqn) { }); let uniqueRelations = Array.from(uniqueRelationMap.values()); + if (transitiveReductionEnabled) { + uniqueRelations = transitiveReduction(uniqueRelations); + } + if (aggregatedRoot) { const relatedSet = collectRelatedSet(aggregatedRoot, uniqueRelations); if (relatedFilterMode === 'direct') { @@ -806,6 +906,30 @@ function setupDiagramDirectionControls() { }); } +function setupTransitiveReductionControl() { + const container = document.querySelector('input[name="diagram-direction"]')?.parentNode?.parentNode; + if (!container) return; + + const controlContainer = document.createElement('div'); + const checkbox = document.createElement('input'); + checkbox.type = 'checkbox'; + checkbox.id = 'transitive-reduction-toggle'; + checkbox.checked = transitiveReductionEnabled; + checkbox.addEventListener('change', () => { + transitiveReductionEnabled = checkbox.checked; + renderDiagramAndTable(); + }); + + const label = document.createElement('label'); + label.htmlFor = checkbox.id; + label.textContent = '推移簡約'; + label.style.marginLeft = '4px'; + + controlContainer.appendChild(checkbox); + controlContainer.appendChild(label); + container.appendChild(controlContainer); +} + if (typeof document !== 'undefined') { document.addEventListener("DOMContentLoaded", function () { if (!document.body.classList.contains("package-list")) return; @@ -815,6 +939,7 @@ if (typeof document !== 'undefined') { setupAggregationDepthControl(); setupRelatedFilterControls(); setupDiagramDirectionControls(); + setupTransitiveReductionControl(); const applied = applyDefaultPackageFilterIfPresent(); if (!applied) { renderDiagramAndTable(); @@ -841,6 +966,9 @@ if (typeof module !== 'undefined' && module.exports) { setDiagramDirection(value) { diagramDirection = value; }, + setTransitiveReductionEnabled(value) { + transitiveReductionEnabled = value; + }, setDiagramElement(value) { diagramElement = value; }, @@ -884,5 +1012,8 @@ if (typeof module !== 'undefined' && module.exports) { applyDefaultPackageFilterIfPresent, setupRelatedFilterControls, setupDiagramDirectionControls, + setupTransitiveReductionControl, + detectStronglyConnectedComponents, + transitiveReduction, }; } diff --git a/jig-core/src/test/js/package.test.js b/jig-core/src/test/js/package.test.js index 3d708eb0c..b7c10e3b7 100644 --- a/jig-core/src/test/js/package.test.js +++ b/jig-core/src/test/js/package.test.js @@ -921,4 +921,89 @@ test.describe('package.js', () => { assert.equal(pkg.getDiagramDirection(), 'LR'); }); }); + + test.describe('推移簡約', () => { + test('detectStronglyConnectedComponents: 循環を検出する', () => { + const graph = new Map([ + ['a', ['b']], + ['b', ['c']], + ['c', ['a', 'd']], + ['d', ['e']], + ['e', ['f']], + ['f', ['d']], + ]); + const sccs = pkg.detectStronglyConnectedComponents(graph); + const sortedSccs = sccs.map(scc => scc.sort()).sort((a, b) => a[0].localeCompare(b[0])); + assert.deepEqual(sortedSccs, [['a', 'b', 'c'], ['d', 'e', 'f']]); + }); + + test('transitiveReduction: 単純な推移関係を簡約する', () => { + const relations = [ + {from: 'a', to: 'b'}, + {from: 'b', to: 'c'}, + {from: 'a', to: 'c'}, + ]; + const result = pkg.transitiveReduction(relations); + assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'b>c']); + }); + + test('transitiveReduction: 循環参照は対象外とする', () => { + const relations = [ + {from: 'a', to: 'b'}, + {from: 'b', to: 'a'}, + {from: 'a', to: 'c'}, + ]; + const result = pkg.transitiveReduction(relations); + assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'a>c', 'b>a']); + }); + + test('transitiveReduction: 循環ではないが簡約対象でもない', () => { + const relations = [ + {from: 'a', to: 'b'}, + {from: 'c', to: 'd'}, + ]; + const result = pkg.transitiveReduction(relations); + assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'c>d']); + }); + + test('transitiveReduction: 循環と推移関係が混在', () => { + const relations = [ + {from: 'a', to: 'b'}, + {from: 'b', to: 'a'}, // cycle + {from: 'b', to: 'c'}, + {from: 'a', to: 'c'}, // reducible + ]; + const result = pkg.transitiveReduction(relations); + assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'b>a', 'b>c']); + }); + + test('setupTransitiveReductionControl: UIをセットアップする', () => { + const doc = setupDocument(); + const container = doc.createElement('div'); + const pp = doc.createElement('div'); + const input = doc.createElement('input'); + input.name = 'diagram-direction'; + pp.appendChild(input); + container.appendChild(pp); + doc.selectors.set('input[name="diagram-direction"]', input); + input.parentNode = pp; + pp.parentNode = container; + + pkg.setupTransitiveReductionControl(); + + const checkbox = doc.getElementById('transitive-reduction-toggle'); + assert.ok(checkbox, 'checkbox should be created'); + assert.equal(checkbox.checked, true); + + let renderCalled = false; + pkg.renderDiagramAndTable = () => { + renderCalled = true; + }; + pkg.setTransitiveReductionEnabled(true); + checkbox.checked = false; + checkbox.eventListeners.get('change')(); + + assert.equal(renderCalled, true); + }); + }); }); From b145974ed8dc5882aa810d9bf3d0a5f8abb56b6f Mon Sep 17 00:00:00 2001 From: irof Date: Thu, 5 Feb 2026 23:38:43 +0900 Subject: [PATCH 2/3] fix test --- jig-core/src/test/js/package.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/jig-core/src/test/js/package.test.js b/jig-core/src/test/js/package.test.js index b7c10e3b7..902a95893 100644 --- a/jig-core/src/test/js/package.test.js +++ b/jig-core/src/test/js/package.test.js @@ -966,15 +966,15 @@ test.describe('package.js', () => { assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'c>d']); }); - test('transitiveReduction: 循環と推移関係が混在', () => { + test('transitiveReduction: 循環からの関係は簡約対象にしない', () => { const relations = [ {from: 'a', to: 'b'}, {from: 'b', to: 'a'}, // cycle {from: 'b', to: 'c'}, - {from: 'a', to: 'c'}, // reducible + {from: 'a', to: 'c'}, ]; const result = pkg.transitiveReduction(relations); - assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'b>a', 'b>c']); + assert.deepEqual(result.map(r => `${r.from}>${r.to}`).sort(), ['a>b', 'a>c', 'b>a', 'b>c']); }); test('setupTransitiveReductionControl: UIをセットアップする', () => { From 542f3af51d985ee4676f840929d30b9996a6926e Mon Sep 17 00:00:00 2001 From: irof Date: Thu, 5 Feb 2026 23:43:49 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix(jig-core/tests):=20package.js=E3=81=AE?= =?UTF-8?q?=E6=8E=A8=E7=A7=BB=E7=B0=A1=E7=B4=84UI=E3=82=BB=E3=83=83?= =?UTF-8?q?=E3=83=88=E3=82=A2=E3=83=83=E3=83=97=E3=83=86=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit jig-core/src/test/js/package.test.js にて、 setupTransitiveReductionControl のテストが失敗していた問題を修正します。 このテストは、`pkg.renderDiagramAndTable` の呼び出しを直接モックして検証しようとしていましたが、 JavaScriptのモジュールスコープの制約により、モックが機能していませんでした。 修正では、`renderDiagramAndTable` が呼び出された結果として発生する副作用を検証するようにテストをリファクタリングしました。 `renderDiagramAndTable` は `updateAggregationDepthOptions` を呼び出し、これが `package-depth-select` 要素の内容をクリアして再構築します。 テストは、イベントハンドラがトリガーされた後、この select 要素に挿入されたダミーオプションが削除されていることを検証することで、 `renderDiagramAndTable` が実行されたことを間接的に確認します。 これにより、プロダクションコードやモックDOMに変更を加えることなく、テストが成功するようになりました。 --- jig-core/src/test/js/package.test.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/jig-core/src/test/js/package.test.js b/jig-core/src/test/js/package.test.js index 902a95893..18b479d4c 100644 --- a/jig-core/src/test/js/package.test.js +++ b/jig-core/src/test/js/package.test.js @@ -989,21 +989,29 @@ test.describe('package.js', () => { input.parentNode = pp; pp.parentNode = container; + // renderDiagramAndTableの副作用をチェックするための準備 + setupDiagramEnvironment(doc); + setPackageData(doc, {packages: [{fqn: 'a'}], relations: []}); + const depthSelect = createDepthSelect(doc); + const dummyOption = doc.createElement('option'); + dummyOption.id = 'dummy-option-for-test'; + depthSelect.appendChild(dummyOption); + pkg.setupTransitiveReductionControl(); const checkbox = doc.getElementById('transitive-reduction-toggle'); assert.ok(checkbox, 'checkbox should be created'); assert.equal(checkbox.checked, true); - let renderCalled = false; - pkg.renderDiagramAndTable = () => { - renderCalled = true; - }; - pkg.setTransitiveReductionEnabled(true); + // 事前確認：ダミー要素が存在する + assert.strictEqual(depthSelect.children.some(c => c.id === 'dummy-option-for-test'), true); + + // changeイベントを発火させる checkbox.checked = false; checkbox.eventListeners.get('change')(); - assert.equal(renderCalled, true); + // 事後確認：`renderDiagramAndTable`が呼ばれ、selectの中身が再構築され、dummy-optionが消えているはず + assert.strictEqual(depthSelect.children.some(c => c.id === 'dummy-option-for-test'), false); }); }); });