debug(pressure-chart): add detailed logging for element discovery and button clicks

SUMMARY:
Added comprehensive logging to diagnose pressure monitor demo issue.
Will show if elements are found after innerHTML set and if event listeners
are attached successfully.

CHANGES:
- Log all element discovery (gauge, buttons, metrics)
- Log event listener attachment success/failure
- Log when simulate() and reset() methods are called
- Bump version to v20251019173500

DEBUGGING:
User reports demo not working despite initialization succeeding.
These logs will reveal:
- If DOM elements are queryable after innerHTML
- If event listeners are successfully attached
- If button clicks are triggering methods

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-20 07:47:31 +13:00
parent b410714edf
commit 7b1402c4b5
3 changed files with 43 additions and 4 deletions

View file

@ -4766,6 +4766,27 @@
"file": "/home/theflow/projects/tractatus/public/architecture.html",
"result": "passed",
"reason": null
},
{
"hook": "validate-file-edit",
"timestamp": "2025-10-19T18:16:53.178Z",
"file": "/home/theflow/projects/tractatus/public/js/components/pressure-chart.js",
"result": "passed",
"reason": null
},
{
"hook": "validate-file-edit",
"timestamp": "2025-10-19T18:17:02.354Z",
"file": "/home/theflow/projects/tractatus/public/js/components/pressure-chart.js",
"result": "passed",
"reason": null
},
{
"hook": "validate-file-edit",
"timestamp": "2025-10-19T18:17:09.456Z",
"file": "/home/theflow/projects/tractatus/public/architecture.html",
"result": "passed",
"reason": null
}
],
"blocks": [
@ -5029,9 +5050,9 @@
}
],
"session_stats": {
"total_edit_hooks": 491,
"total_edit_hooks": 494,
"total_edit_blocks": 36,
"last_updated": "2025-10-19T09:32:03.912Z",
"last_updated": "2025-10-19T18:17:09.456Z",
"total_write_hooks": 190,
"total_write_blocks": 7
}

View file

@ -549,8 +549,8 @@
<script src="/js/components/interactive-diagram.js?v=20251019170000"></script>
<!-- Data Visualizations (Phase 3) -->
<script src="/js/components/pressure-chart.js?v=20251019173000"></script>
<script src="/js/components/activity-timeline.js?v=20251019173000"></script>
<script src="/js/components/pressure-chart.js?v=20251019173500"></script>
<script src="/js/components/activity-timeline.js?v=20251019173500"></script>
<!-- Footer Component -->
<script src="/js/components/footer.js"></script>

View file

@ -101,11 +101,26 @@ class PressureChart {
simulateBtn: document.getElementById('pressure-simulate-btn'),
resetBtn: document.getElementById('pressure-reset-btn')
};
// Verify elements were found
console.log('[PressureChart] Elements found:', {
gaugeFill: !!this.elements.gaugeFill,
gaugeValue: !!this.elements.gaugeValue,
status: !!this.elements.status,
simulateBtn: !!this.elements.simulateBtn,
resetBtn: !!this.elements.resetBtn
});
}
attachEventListeners() {
if (!this.elements.simulateBtn || !this.elements.resetBtn) {
console.error('[PressureChart] Cannot attach event listeners - buttons not found');
return;
}
console.log('[PressureChart] Attaching event listeners to buttons');
this.elements.simulateBtn.addEventListener('click', () => this.simulate());
this.elements.resetBtn.addEventListener('click', () => this.reset());
console.log('[PressureChart] Event listeners attached successfully');
}
setLevel(level) {
@ -190,12 +205,14 @@ class PressureChart {
}
simulate() {
console.log('[PressureChart] Simulate button clicked - starting pressure simulation');
// Simulate pressure increasing from current to 85%
const targetLevels = [30, 50, 70, 85];
let index = 0;
const step = () => {
if (index >= targetLevels.length) return;
console.log('[PressureChart] Setting pressure level to', targetLevels[index]);
this.setLevel(targetLevels[index]);
index++;
setTimeout(step, 1500);
@ -205,6 +222,7 @@ class PressureChart {
}
reset() {
console.log('[PressureChart] Reset button clicked');
this.setLevel(0);
}
}