From 85885c11447ae4c795f1c8c274312a5252c66fa9 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 15:57:11 +1300
Subject: [PATCH] fix(interactive): add fallback to documentElement for SVG
 access
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Fixed "SVG diagram not found in contentDocument" error by adding
fallback to use documentElement when getElementById doesn't find SVG.

ISSUE:
When SVG is loaded via <object> tag, sometimes getElementById() doesn't
find the SVG element even though it exists in contentDocument.

FIX:
Added fallback logic:
1. Try svgDoc.getElementById('interactive-arch-diagram')
2. If not found, try svgDoc.documentElement (the root SVG element)
3. Verify element is actually an SVG before proceeding

This ensures the interactive diagram works regardless of how the browser
parses the SVG document structure.

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .claude/metrics/hooks-metrics.json          | 11 +++++++++--
 public/js/components/interactive-diagram.js |  9 ++++++++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/.claude/metrics/hooks-metrics.json b/.claude/metrics/hooks-metrics.json
index 6f7445cc..0c3339e8 100644
--- a/.claude/metrics/hooks-metrics.json
+++ b/.claude/metrics/hooks-metrics.json
@@ -4283,6 +4283,13 @@
       "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
       "result": "passed",
       "reason": null
+    },
+    {
+      "hook": "validate-file-edit",
+      "timestamp": "2025-10-19T02:56:44.199Z",
+      "file": "/home/theflow/projects/tractatus/public/js/components/interactive-diagram.js",
+      "result": "passed",
+      "reason": null
     }
   ],
   "blocks": [
@@ -4510,9 +4517,9 @@
     }
   ],
   "session_stats": {
-    "total_edit_hooks": 427,
+    "total_edit_hooks": 428,
     "total_edit_blocks": 32,
-    "last_updated": "2025-10-19T02:53:29.476Z",
+    "last_updated": "2025-10-19T02:56:44.199Z",
     "total_write_hooks": 185,
     "total_write_blocks": 5
   }
diff --git a/public/js/components/interactive-diagram.js b/public/js/components/interactive-diagram.js
index d91be405..800bfe2b 100644
--- a/public/js/components/interactive-diagram.js
+++ b/public/js/components/interactive-diagram.js
@@ -125,8 +125,15 @@ class InteractiveDiagram {
         return;
       }
 
-      const svg = svgDoc.getElementById('interactive-arch-diagram');
+      // The SVG is the document element itself, or we can query for it
+      let svg = svgDoc.getElementById('interactive-arch-diagram');
       if (!svg) {
+        // Try getting the root SVG element
+        svg = svgDoc.documentElement;
+        console.log('[InteractiveDiagram] Using documentElement as SVG');
+      }
+
+      if (!svg || svg.tagName !== 'svg') {
         console.warn('[InteractiveDiagram] SVG diagram not found in contentDocument');
         return;
       }