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",
|
"file": "/home/theflow/projects/tractatus/public/js/demos/deliberation-demo.js",
|
||||||
"result": "passed",
|
"result": "passed",
|
||||||
"reason": null
|
"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": [
|
"blocks": [
|
||||||
|
|
@ -4980,9 +4994,9 @@
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"session_stats": {
|
"session_stats": {
|
||||||
"total_edit_hooks": 484,
|
"total_edit_hooks": 486,
|
||||||
"total_edit_blocks": 36,
|
"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_hooks": 190,
|
||||||
"total_write_blocks": 7
|
"total_write_blocks": 7
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -122,12 +122,19 @@ class ActivityTimeline {
|
||||||
|
|
||||||
// Auto-initialize if container exists
|
// Auto-initialize if container exists
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
function initActivityTimeline() {
|
||||||
const container = document.getElementById('activity-timeline');
|
const container = document.getElementById('activity-timeline');
|
||||||
if (container) {
|
if (container) {
|
||||||
window.activityTimeline = new ActivityTimeline('activity-timeline');
|
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
|
// Export for module systems
|
||||||
|
|
|
||||||
|
|
@ -211,12 +211,19 @@ class PressureChart {
|
||||||
|
|
||||||
// Auto-initialize if container exists
|
// Auto-initialize if container exists
|
||||||
if (typeof window !== 'undefined') {
|
if (typeof window !== 'undefined') {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
function initPressureChart() {
|
||||||
const container = document.getElementById('pressure-chart');
|
const container = document.getElementById('pressure-chart');
|
||||||
if (container) {
|
if (container) {
|
||||||
window.pressureChart = new PressureChart('pressure-chart');
|
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
|
// Export for module systems
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue