fix(demos): resolve initialization timing for pressure chart and activity timeline
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>
This commit is contained in:
parent
e7de439f09
commit
bcc4a4e844
3 changed files with 34 additions and 6 deletions
|
|
@ -4717,6 +4717,20 @@
|
|||
"file": "/home/theflow/projects/tractatus/public/js/demos/deliberation-demo.js",
|
||||
"result": "passed",
|
||||
"reason": null
|
||||
},
|
||||
{
|
||||
"hook": "validate-file-edit",
|
||||
"timestamp": "2025-10-19T09:06:22.056Z",
|
||||
"file": "/home/theflow/projects/tractatus/public/js/components/pressure-chart.js",
|
||||
"result": "passed",
|
||||
"reason": null
|
||||
},
|
||||
{
|
||||
"hook": "validate-file-edit",
|
||||
"timestamp": "2025-10-19T09:09:35.997Z",
|
||||
"file": "/home/theflow/projects/tractatus/public/js/components/activity-timeline.js",
|
||||
"result": "passed",
|
||||
"reason": null
|
||||
}
|
||||
],
|
||||
"blocks": [
|
||||
|
|
@ -4980,9 +4994,9 @@
|
|||
}
|
||||
],
|
||||
"session_stats": {
|
||||
"total_edit_hooks": 484,
|
||||
"total_edit_hooks": 486,
|
||||
"total_edit_blocks": 36,
|
||||
"last_updated": "2025-10-19T09:02:17.123Z",
|
||||
"last_updated": "2025-10-19T09:09:35.997Z",
|
||||
"total_write_hooks": 190,
|
||||
"total_write_blocks": 7
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue