From 0c09119e61a932bdcde6c032d254c60b1398ee65 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Sun, 19 Oct 2025 22:10:14 +1300
Subject: [PATCH] fix(demos): resolve initialization timing for pressure chart
 and activity timeline
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUMMARY:
Fixed critical bug preventing pressure chart and activity timeline demos
from initializing. Both components now work correctly on architecture page.

ROOT CAUSE:
Scripts loaded at end of body after DOM was already ready. DOMContentLoaded
event had already fired, so initialization callback never executed.

FIX:
Changed initialization to check document.readyState before adding event listener:
- If DOM still loading → wait for DOMContentLoaded event
- If DOM already ready → initialize immediately

FILES FIXED:
- public/js/components/pressure-chart.js (lines 213-227)
- public/js/components/activity-timeline.js (lines 124-137)

IMPACT:
Both demos now function correctly:
✓ Pressure chart: Simulate button works, gauge animates, metrics update
✓ Activity timeline: Governance flow displays with service colors

TESTING:
Verified locally on http://localhost:9000/architecture.html
Both demos initialize and respond to user interactions.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/js/components/activity-timeline.js | 11 +++++++++--
 public/js/components/pressure-chart.js    | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/public/js/components/activity-timeline.js b/public/js/components/activity-timeline.js
index b918a6e4..665f05a3 100644
--- a/public/js/components/activity-timeline.js
+++ b/public/js/components/activity-timeline.js
@@ -122,12 +122,19 @@ class ActivityTimeline {
 
 // Auto-initialize if container exists
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
+  function initActivityTimeline() {
     const container = document.getElementById('activity-timeline');
     if (container) {
       window.activityTimeline = new ActivityTimeline('activity-timeline');
     }
-  });
+  }
+
+  // Initialize immediately if DOM is already loaded, otherwise wait for DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initActivityTimeline);
+  } else {
+    initActivityTimeline();
+  }
 }
 
 // Export for module systems
diff --git a/public/js/components/pressure-chart.js b/public/js/components/pressure-chart.js
index d5bbcb10..32e1a123 100644
--- a/public/js/components/pressure-chart.js
+++ b/public/js/components/pressure-chart.js
@@ -211,12 +211,19 @@ class PressureChart {
 
 // Auto-initialize if container exists
 if (typeof window !== 'undefined') {
-  document.addEventListener('DOMContentLoaded', () => {
+  function initPressureChart() {
     const container = document.getElementById('pressure-chart');
     if (container) {
       window.pressureChart = new PressureChart('pressure-chart');
     }
-  });
+  }
+
+  // Initialize immediately if DOM is already loaded, otherwise wait for DOMContentLoaded
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initPressureChart);
+  } else {
+    initPressureChart();
+  }
 }
 
 // Export for module systems