root/trading_bot_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add extensive debugging to analysis and gallery components

Browse Source 
- Add console logging to track result data in AIAnalysisPanel
- Add debugging to ScreenshotGallery rendering conditions
- Track screenshot data flow and component render states
- Help identify why gallery preview/enlargement not working
This commit is contained in:
mindesbunister
2025-07-14 01:09:09 +02:00
parent 8087806a16
commit 65994816ab
2 changed files with 142 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/AIAnalysisPanel.tsx
View File

@@ -475,6 +475,7 @@ export default function AIAnalysisPanel() {
return (
<div className="card card-gradient">
{console.log('AIAnalysisPanel render - result:', result)}
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-bold text-white flex items-center">
<span className="w-8 h-8 bg-gradient-to-br from-cyan-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
@@ -1370,14 +1371,23 @@ export default function AIAnalysisPanel() {
{/* Screenshot Gallery */}
{result && result.screenshots && (
<ScreenshotGallery
screenshots={result.screenshots}
symbol={symbol}
timeframes={selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf)}
enlargedImage={enlargedScreenshot}
onImageClick={handleScreenshotClick}
onClose={() => setEnlargedScreenshot(null)}
/>
<>
{console.log('Rendering ScreenshotGallery with:', {
screenshots: result.screenshots,
screenshotsLength: result.screenshots.length,
symbol,
selectedTimeframes,
enlargedScreenshot
})}
<ScreenshotGallery
screenshots={result.screenshots}
symbol={symbol}
timeframes={selectedTimeframes.map(tf => timeframes.find(t => t.value === tf)?.label || tf)}
enlargedImage={enlargedScreenshot}
onImageClick={handleScreenshotClick}
onClose={() => setEnlargedScreenshot(null)}
/>
</>
)}
{/* Multi-timeframe Screenshot Gallery */}

124
test-gallery.html Normal file
View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<title>Test Screenshot Gallery</title>
<style>
body {
background: #111;
color: white;
font-family: Arial, sans-serif;
margin: 20px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.screenshot {
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
.screenshot img {
width: 100%;
height: 200px;
object-fit: cover;
}
.screenshot:hover {
border-color: #666;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
z-index: 1000;
}
.modal img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90%;
max-height: 90%;
}
.close {
position: absolute;
top: 20px;
right: 20px;
color: white;
font-size: 24px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Screenshot Gallery Test</h1>
<p>Testing direct screenshot access:</p>
<div class="gallery">
<div class="screenshot">
<img src="/screenshots/SOLUSD_240_ai_1752447978639.png" alt="SOLUSD 4h">
<div style="padding: 10px;">SOLUSD - 4h Timeframe</div>
</div>
<div class="screenshot">
<img src="/screenshots/SOLUSD_15_ai_1752441315672.png" alt="SOLUSD 15m">
<div style="padding: 10px;">SOLUSD - 15m Timeframe</div>
</div>
<div class="screenshot">
<img src="/screenshots/SOLUSD_5_ai_1752441274081.png" alt="SOLUSD 5m">
<div style="padding: 10px;">SOLUSD - 5m Timeframe</div>
</div>
</div>
<div id="modal" class="modal">
<span class="close">&times;</span>
<img id="modalImg" src="" alt="">
</div>
<script>
const screenshots = document.querySelectorAll('.screenshot img');
const modal = document.getElementById('modal');
const modalImg = document.getElementById('modalImg');
const close = document.querySelector('.close');
screenshots.forEach(img => {
img.addEventListener('click', function() {
modal.style.display = 'block';
modalImg.src = this.src;
console.log('Image clicked:', this.src);
});
img.addEventListener('load', function() {
console.log('Image loaded:', this.src);
});
img.addEventListener('error', function() {
console.error('Image failed to load:', this.src);
this.style.border = '2px solid red';
});
});
close.addEventListener('click', function() {
modal.style.display = 'none';
});
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
modal.style.display = 'none';
}
});
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.style.display = 'none';
}
});
</script>
</body>
</html>