Merge pull request #1045 from dddjava/agent/context-trim

irof · web-flow · commit fe9ff3f9ef4a · 2026-02-07T02:24:30.000+09:00
図の描画におけるコンテキスト依存性を低減する
diff --git a/jig-core/src/main/resources/templates/assets/package.js b/jig-core/src/main/resources/templates/assets/package.js
@@ -1,13 +1,10 @@
 // 状態/DOMヘルパー
+// contextは「UI状態・設定値など長期的に保持する値」に限定する。
+// 一時的な中間データはcontextに保存せず、関数内のローカル変数で扱う。
 const packageContext = {
     packageSummaryCache: null,
     diagramNodeIdToFqn: new Map(),
     aggregationDepth: 0,
-    diagramElement: null,
-    pendingDiagramRender: null,
-    lastDiagramSource: '',
-    lastDiagramEdgeCount: 0,
-    DEFAULT_MAX_EDGES: 500,
     packageFilterFqn: null,
     relatedFilterMode: 'direct',
     relatedFilterFqn: null,
@@ -16,6 +13,7 @@ const packageContext = {
 };
 
 const DIAGRAM_CLICK_HANDLER_NAME = 'filterPackageDiagram';
+const DEFAULT_MAX_EDGES = 500;
 
 const dom = {
     getRelatedFilterTarget: () => document.getElementById('related-filter-target'),
@@ -881,8 +879,7 @@ function getOrCreateDiagramErrorBox(diagram) {
     return dom.createDiagramErrorBox(diagram);
 }
 
-function showDiagramErrorMessage(message, withAction, err, hash, context) {
-    const diagram = context.diagramElement;
+function showDiagramErrorMessage(diagram, message, pendingRender, err, hash) {
     if (!diagram) return;
     console.error(message);
     if (err) {
@@ -896,12 +893,11 @@ function showDiagramErrorMessage(message, withAction, err, hash, context) {
     const actionNode = dom.getDiagramErrorActionNode();
     dom.setNodeTextContent(messageNode, message);
     if (actionNode) {
-        dom.setNodeDisplay(actionNode, withAction ? '' : 'none');
-        if (withAction) {
+        const hasAction = Boolean(pendingRender);
+        dom.setNodeDisplay(actionNode, hasAction ? '' : 'none');
+        if (hasAction) {
             dom.setNodeOnClick(actionNode, function () {
-                if (!context.pendingDiagramRender) return;
-                renderDiagramWithMermaid(context.pendingDiagramRender.text, context.pendingDiagramRender.maxEdges, context);
-                context.pendingDiagramRender = null;
+                renderDiagramWithMermaid(diagram, pendingRender.text, pendingRender.maxEdges);
             });
         } else {
             dom.setNodeOnClick(actionNode, null);
@@ -922,8 +918,7 @@ function hideDiagramErrorMessage(diagram) {
     dom.setDiagramElementDisplay(diagram, '');
 }
 
-function renderDiagramWithMermaid(text, maxEdges, context) {
-    const diagram = context.diagramElement;
+function renderDiagramWithMermaid(diagram, text, maxEdges) {
     if (!diagram || !window.mermaid) return;
     hideDiagramErrorMessage(diagram);
     dom.removeDiagramAttribute(diagram, 'data-processed');
@@ -933,10 +928,10 @@ function renderDiagramWithMermaid(text, maxEdges, context) {
 }
 
 // 描画/更新
-function renderMutualDependencyList(mutualPairs, causeRelationEvidence, context) {
+function renderMutualDependencyList(mutualPairs, causeRelationEvidence, aggregationDepth) {
     const container = dom.getMutualDependencyList();
     if (!container) return;
-    const items = buildMutualDependencyItems(mutualPairs, causeRelationEvidence, context.aggregationDepth);
+    const items = buildMutualDependencyItems(mutualPairs, causeRelationEvidence, aggregationDepth);
     if (items.length === 0) {
         container.style.display = 'none';
         container.innerHTML = '';
@@ -970,13 +965,12 @@ function renderMutualDependencyList(mutualPairs, causeRelationEvidence, context)
 function renderPackageDiagram(context, packageFilterFqn, relatedFilterFqn) {
     const diagram = dom.getDiagram();
     if (!diagram) return;
-    context.diagramElement = diagram;
 
     const renderPlan = buildDiagramRenderPlan(context, packageFilterFqn, relatedFilterFqn);
     applyDiagramRenderPlan(context, renderPlan);
-    if (shouldSkipDiagramRenderByEdgeLimit(context)) return;
-    setDiagramSource(diagram, context.lastDiagramSource);
-    renderDiagramWithMermaidIfAvailable(context);
+    if (shouldSkipDiagramRenderByEdgeLimit(diagram, renderPlan, context)) return;
+    setDiagramSource(diagram, renderPlan.source);
+    renderDiagramWithMermaidIfAvailable(diagram, renderPlan, context);
 }
 
 function buildDiagramRenderPlan(context, packageFilterFqn, relatedFilterFqn) {
@@ -1013,20 +1007,19 @@ function buildDiagramRenderPlan(context, packageFilterFqn, relatedFilterFqn) {
 
 function applyDiagramRenderPlan(context, renderPlan) {
     context.diagramNodeIdToFqn = renderPlan.nodeIdToFqn;
-    renderMutualDependencyList(renderPlan.mutualPairs, renderPlan.filteredCauseRelationEvidence, context);
-    context.lastDiagramSource = renderPlan.source;
-    context.lastDiagramEdgeCount = renderPlan.uniqueRelations.length;
+    renderMutualDependencyList(renderPlan.mutualPairs, renderPlan.filteredCauseRelationEvidence, context.aggregationDepth);
 }
 
-function shouldSkipDiagramRenderByEdgeLimit(context) {
-    if (context.lastDiagramEdgeCount <= context.DEFAULT_MAX_EDGES) return false;
-    context.pendingDiagramRender = {text: context.lastDiagramSource, maxEdges: context.lastDiagramEdgeCount};
+function shouldSkipDiagramRenderByEdgeLimit(diagram, renderPlan, context) {
+    const edgeCount = renderPlan.uniqueRelations.length;
+    if (edgeCount <= DEFAULT_MAX_EDGES) return false;
+    const pendingRender = {text: renderPlan.source, maxEdges: edgeCount};
     const message = [
         '関連数が多すぎるため描画を省略しました。',
-        `エッジ数: ${context.lastDiagramEdgeCount}（上限: ${context.DEFAULT_MAX_EDGES}）`,
+        `エッジ数: ${edgeCount}（上限: ${DEFAULT_MAX_EDGES}）`,
         '描画する場合はボタンを押してください。',
     ].join('\n');
-    showDiagramErrorMessage(message, true, null, null, context);
+    showDiagramErrorMessage(diagram, message, pendingRender, null, null);
     return true;
 }
 
@@ -1035,22 +1028,21 @@ function setDiagramSource(diagram, source) {
     diagram.textContent = source;
 }
 
-function renderDiagramWithMermaidIfAvailable(context) {
+function renderDiagramWithMermaidIfAvailable(diagram, renderPlan, context) {
     if (!window.mermaid) return;
-    ensureMermaidParseErrorHandler(context);
-    renderDiagramWithMermaid(context.lastDiagramSource, context.DEFAULT_MAX_EDGES, context);
+    ensureMermaidParseErrorHandler(diagram, renderPlan, context);
+    renderDiagramWithMermaid(diagram, renderPlan.source, DEFAULT_MAX_EDGES);
 }
 
-function ensureMermaidParseErrorHandler(context) {
-    if (mermaid.parseError) return;
+function ensureMermaidParseErrorHandler(diagram, renderPlan, context) {
     mermaid.parseError = function (err, hash) {
         const message = err && err.message ? err.message : String(err);
         const location = hash ? `\nLine: ${hash.line} Column: ${hash.loc}` : '';
         const isEdgeLimit = message.includes('Edge limit exceeded');
-        if (isEdgeLimit) {
-            context.pendingDiagramRender = {text: context.lastDiagramSource, maxEdges: context.lastDiagramEdgeCount};
-        }
-        showDiagramErrorMessage(`Mermaid parse error: ${message}${location}`, isEdgeLimit, err, hash, context);
+        const pendingRender = isEdgeLimit
+            ? {text: renderPlan.source, maxEdges: renderPlan.uniqueRelations.length}
+            : null;
+        showDiagramErrorMessage(diagram, `Mermaid parse error: ${message}${location}`, pendingRender, err, hash);
     };
 }
 
diff --git a/jig-core/src/test/js/package.test.js b/jig-core/src/test/js/package.test.js
@@ -231,7 +231,6 @@ function setupDiagramEnvironment(doc, context) {
     const diagram = doc.createElement('div');
     diagram.id = 'package-relation-diagram';
     container.appendChild(diagram);
-    context.diagramElement = diagram;
     const mutual = doc.createElement('div');
     mutual.id = 'mutual-dependency-list';
     doc.elementsById.set('mutual-dependency-list', mutual);
@@ -254,11 +253,6 @@ test.describe('package.js', () => {
             packageSummaryCache: null,
             diagramNodeIdToFqn: new Map(),
             aggregationDepth: 0,
-            diagramElement: null,
-            pendingDiagramRender: null,
-            lastDiagramSource: '',
-            lastDiagramEdgeCount: 0,
-            DEFAULT_MAX_EDGES: 500,
             packageFilterFqn: null,
             relatedFilterMode: 'direct',
             relatedFilterFqn: null,
@@ -872,7 +866,7 @@ test.describe('package.js', () => {
                         {from: 'app.alpha.A', to: 'app.beta.B'},
                         {from: 'app.beta.B', to: 'app.alpha.A'},
                     ],
-                    testContext
+                    testContext.aggregationDepth
                 );
 
                 assert.equal(container.style.display, '');
@@ -906,9 +900,8 @@ test.describe('package.js', () => {
 
             test('renderPackageDiagram: エッジ数超過時は保留/エラー表示する', () => {
                 const doc = setupDocument();
-                // setupDiagramEnvironmentはtestContext.diagramElementを設定する。
-                // そのdiagramElementがdomヘルパーによって操作されることをモックする。
-                const diagramMock = setupDiagramEnvironment(doc, testContext); // testContext.diagramElementも設定される
+                // setupDiagramEnvironmentが作るdiagramをdomヘルパーが操作することをモックする。
+                const diagramMock = setupDiagramEnvironment(doc, testContext);
 
                 // Mock dom helpers used by showDiagramErrorMessage internally
                 const errorBoxMock = { style: { display: 'none' } };
