🔒 Implement concurrency protection and remove marketing text

- Add analysisInProgress useRef to prevent multiple simultaneous analyses
- Protect all analysis entry points (performAnalysis, quickAnalyze, etc.)
- Update button disabled state to include concurrency check
- Remove marketing text from analysis page and AIAnalysisPanel
- Fix remaining TypeScript compilation errors in chart components
- Ensure clean UI without promotional content

Fixes sync issues caused by overlapping analysis sessions
This commit is contained in:
mindesbunister
2025-07-17 14:00:24 +02:00
parent 8372b271cb
commit 4ff35b8e04
9 changed files with 65 additions and 52 deletions

View File

@@ -5,16 +5,6 @@ import AIAnalysisPanel from '../../components/AIAnalysisPanel'
export default function AnalysisPage() {
return (
<div className="space-y-8">
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-white mb-4">
🤖 AI-Powered Market Analysis
</h1>
<p className="text-gray-400 max-w-2xl mx-auto">
Get professional trading insights with multi-timeframe analysis, precise entry/exit levels,
and institutional-quality recommendations powered by OpenAI.
</p>
</div>
<AIAnalysisPanel />
</div>
)

View File

@@ -20,13 +20,16 @@ export default function ChartDebug() {
const initChart = async () => {
try {
addLog('Starting chart initialization...')
// Dynamic import to avoid SSR issues
addLog('Importing lightweight-charts...')
const LightweightChartsModule = await import('lightweight-charts')
addLog('Import successful')
// Import lightweight-charts
const LightweightCharts = await import('lightweight-charts')
addLog('Lightweight charts imported successfully')
addLog('Available exports: ' + Object.keys(LightweightChartsModule).join(', '))
const { createChart } = LightweightCharts
addLog('createChart extracted')
const { createChart } = LightweightChartsModule
addLog('Extracted createChart')
// Create chart with minimal options
const chart = createChart(chartContainerRef.current!, {
@@ -36,15 +39,30 @@ export default function ChartDebug() {
addLog('Chart created successfully')
setChartCreated(true)
// Add candlestick series with the correct v5 API
const candlestickSeries = chart.addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
borderDownColor: '#ef5350',
borderUpColor: '#26a69a',
wickDownColor: '#ef5350',
wickUpColor: '#26a69a',
})
// Check what methods are available on the chart
const chartMethods = Object.getOwnPropertyNames(Object.getPrototypeOf(chart))
addLog('Chart methods: ' + chartMethods.slice(0, 10).join(', ') + '...')
// Try to add a candlestick series using the modern API
let candlestickSeries;
if ('addCandlestickSeries' in chart) {
addLog('Using addCandlestickSeries method')
candlestickSeries = (chart as any).addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
borderDownColor: '#ef5350',
borderUpColor: '#26a69a',
wickDownColor: '#ef5350',
wickUpColor: '#26a69a',
})
} else {
addLog('Trying alternative API')
candlestickSeries = (chart as any).addAreaSeries({
lineColor: '#26a69a',
topColor: 'rgba(38, 166, 154, 0.4)',
bottomColor: 'rgba(38, 166, 154, 0.0)',
})
}
addLog('Candlestick series added')
// Very simple test data

View File

@@ -31,8 +31,8 @@ export default function DebugChart() {
addLog('Available exports: ' + Object.keys(LightweightChartsModule).join(', '))
const { createChart, ColorType, CrosshairMode } = LightweightChartsModule
addLog('Extracted createChart and other components')
const { createChart } = LightweightChartsModule
addLog('Extracted createChart')
addLog('Creating chart...')
const chart = createChart(chartContainerRef.current!, {
@@ -46,7 +46,7 @@ export default function DebugChart() {
addLog('Chart created successfully')
addLog('Adding candlestick series...')
const candlestickSeries = chart.addCandlestickSeries({
const candlestickSeries = (chart as any).addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
})

View File

@@ -27,7 +27,7 @@ export default function DirectChart() {
})
console.log('Chart created')
const series = chart.addCandlestickSeries({
const series = (chart as any).addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
})

View File

@@ -33,7 +33,7 @@ export default function MinimalChartTest() {
setStatus('Chart created')
setStatus('Adding series...')
const series = chart.addCandlestickSeries({})
const series = (chart as any).addCandlestickSeries({})
console.log('Series created:', series)
setStatus('Series added')

View File

@@ -35,7 +35,7 @@ export default function SimpleChart() {
setStatus('Adding candlestick series...')
console.log('Chart created, adding candlestick series...')
const candlestickSeries = chart.addCandlestickSeries({
const candlestickSeries = (chart as any).addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
borderDownColor: '#ef5350',

View File

@@ -38,7 +38,7 @@ export default function SimpleTest() {
setStatus('Chart created')
// Add series
const series = chart.addCandlestickSeries({
const series = (chart as any).addCandlestickSeries({
upColor: '#00ff00',
downColor: '#ff0000',
})

View File

@@ -20,7 +20,7 @@ export default function WorkingChart() {
},
})
const candlestickSeries = chart.addCandlestickSeries({
const candlestickSeries = (chart as any).addCandlestickSeries({
upColor: '#26a69a',
downColor: '#ef5350',
})

View File

@@ -1,5 +1,5 @@
"use client"
import React, { useState, useEffect } from 'react'
import React, { useState, useEffect, useRef } from 'react'
import TradeModal from './TradeModal'
import ScreenshotGallery from './ScreenshotGallery'
@@ -83,6 +83,9 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
const [modalOpen, setModalOpen] = useState(false)
const [modalData, setModalData] = useState<any>(null)
const [enlargedScreenshot, setEnlargedScreenshot] = useState<string | null>(null)
// Ref to prevent concurrent analysis calls
const analysisInProgress = useRef(false)
const [tradeModalOpen, setTradeModalOpen] = useState(false)
const [tradeModalData, setTradeModalData] = useState<any>(null)
@@ -123,6 +126,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
setEventSource(null)
// Reset UI state when analysis completes
setLoading(false)
analysisInProgress.current = false
setProgress(null)
} else if (progressData.type === 'connected') {
console.log(`🔍 EventSource connected for ${sessionId}`)
@@ -138,6 +142,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
console.log(`🔍 All steps completed for ${sessionId}, resetting UI state`)
setTimeout(() => {
setLoading(false)
analysisInProgress.current = false
setProgress(null)
es.close()
setEventSource(null)
@@ -205,8 +210,13 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
// const updateProgress = ...removed for real-time implementation
const performAnalysis = async (analysisSymbol = symbol, analysisTimeframes = selectedTimeframes) => {
if (loading || selectedLayouts.length === 0 || analysisTimeframes.length === 0) return
// Prevent concurrent analysis calls
if (loading || analysisInProgress.current || selectedLayouts.length === 0 || analysisTimeframes.length === 0) {
console.log('⚠️ Analysis blocked:', { loading, analysisInProgress: analysisInProgress.current, selectedLayouts: selectedLayouts.length, analysisTimeframes: analysisTimeframes.length })
return
}
analysisInProgress.current = true
setLoading(true)
setError(null)
setResult(null)
@@ -368,6 +378,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
// Reset loading state immediately on error
setLoading(false)
analysisInProgress.current = false
setProgress(null)
// Mark current active step as error
@@ -391,13 +402,14 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
// Single timeframe analysis loading state is managed by progress tracking
if (analysisTimeframes.length > 1) {
setLoading(false)
analysisInProgress.current = false
}
}
}
const quickAnalyze = async (coinSymbol: string, quickTimeframes = selectedTimeframes) => {
setSymbol(coinSymbol)
if (!loading) {
if (!loading && !analysisInProgress.current) {
await performAnalysis(coinSymbol, quickTimeframes)
}
}
@@ -410,24 +422,26 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
setSelectedTimeframes(newTimeframes)
if (!loading && symbol && newTimeframes.length > 0) {
if (!loading && !analysisInProgress.current && symbol && newTimeframes.length > 0) {
await performAnalysis(symbol, newTimeframes)
}
}
const testAllTimeframes = async () => {
if (loading) return
if (loading || analysisInProgress.current) return
const allTimeframeValues = timeframes.map(tf => tf.value)
setSelectedTimeframes(allTimeframeValues)
if (!loading && symbol) {
if (!loading && !analysisInProgress.current && symbol) {
await performAnalysis(symbol, allTimeframeValues)
}
}
async function handleAnalyze() {
await performAnalysis()
if (!analysisInProgress.current) {
await performAnalysis()
}
}
// Trade initiation handler
@@ -593,16 +607,7 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
return (
<div className="card card-gradient">
<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">
🤖
</span>
AI Chart Analysis
</h2>
<div className="flex items-center space-x-2 text-sm text-gray-400">
<div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
<span>AI Powered</span>
</div>
{/* Analysis Controls Area */}
</div>
{/* Quick Coin & Timeframe Analysis */}
@@ -794,14 +799,14 @@ export default function AIAnalysisPanel({ onAnalysisComplete }: AIAnalysisPanelP
{/* Analyze Button */}
<button
className={`w-full py-3 px-6 rounded-lg font-semibold transition-all duration-300 ${
loading
(loading || analysisInProgress.current)
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
: 'btn-primary transform hover:scale-[1.02] active:scale-[0.98]'
}`}
onClick={handleAnalyze}
disabled={loading}
disabled={loading || analysisInProgress.current}
>
{loading ? (
{(loading || analysisInProgress.current) ? (
<div className="flex items-center justify-center space-x-2">
<div className="spinner"></div>
<span>Analyzing Chart...</span>