Enhance analysis progress tracking with detailed steps
Features Added: Detailed Analysis Steps: 6-step progress tracking Real-time Progress Panel: Shows current step and percentage Timeframe Progress: Shows which timeframe is being analyzed Visual Progress Indicators: Color-coded status icons Step Duration Tracking: Shows timing for each step Session ID Display: Unique analysis session identifier Progress Steps: 1. Initialize → 2. Setup → 3. Capture → 4. AI Analysis → 5. Combine → 6. Complete UI Improvements: - Detailed Analysis Progress panel instead of generic timer - Real-time step visualization with icons and descriptions - Progress percentage and duration display - Animated indicators for active steps Technical Implementation: - Enhanced AutomationStatus with analysisProgress field - 6-step detailed progress tracking in automation service - Progress session management and real-time updates - Enhanced UI components for progress visualization
This commit is contained in:
@@ -544,8 +544,98 @@ export default function AutomationPageV2() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Analysis Progress */}
|
||||
{status?.analysisProgress && (
|
||||
<div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-bold text-white">Analysis Progress</h3>
|
||||
<div className="text-xs text-blue-400">
|
||||
Session: {status.analysisProgress.sessionId.split('-').pop()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{/* Overall Progress */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-gray-300">Step {status.analysisProgress.currentStep} of {status.analysisProgress.totalSteps}</span>
|
||||
<span className="text-blue-400 font-semibold">
|
||||
{Math.round((status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100)}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="bg-gray-700 rounded-full h-2">
|
||||
<div
|
||||
className="bg-blue-500 h-2 rounded-full transition-all duration-500"
|
||||
style={{
|
||||
width: `${(status.analysisProgress.currentStep / status.analysisProgress.totalSteps) * 100}%`
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
|
||||
{/* Timeframe Progress */}
|
||||
{status.analysisProgress.timeframeProgress && (
|
||||
<div className="p-3 bg-blue-600/10 border border-blue-600/30 rounded-lg">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-blue-400">
|
||||
Analyzing {status.analysisProgress.timeframeProgress.currentTimeframe || 'timeframes'}
|
||||
</span>
|
||||
<span className="text-blue-300">
|
||||
{status.analysisProgress.timeframeProgress.current}/{status.analysisProgress.timeframeProgress.total}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Detailed Steps */}
|
||||
<div className="space-y-2">
|
||||
{status.analysisProgress.steps.map((step, index) => (
|
||||
<div key={step.id} className={`flex items-center space-x-3 p-2 rounded-lg ${
|
||||
step.status === 'active' ? 'bg-blue-600/20 border border-blue-600/30' :
|
||||
step.status === 'completed' ? 'bg-green-600/20 border border-green-600/30' :
|
||||
step.status === 'error' ? 'bg-red-600/20 border border-red-600/30' :
|
||||
'bg-gray-700/30'
|
||||
}`}>
|
||||
{/* Status Icon */}
|
||||
<div className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
|
||||
step.status === 'active' ? 'bg-blue-500 text-white animate-pulse' :
|
||||
step.status === 'completed' ? 'bg-green-500 text-white' :
|
||||
step.status === 'error' ? 'bg-red-500 text-white' :
|
||||
'bg-gray-600 text-gray-300'
|
||||
}`}>
|
||||
{step.status === 'active' ? '⏳' :
|
||||
step.status === 'completed' ? '✓' :
|
||||
step.status === 'error' ? '✗' :
|
||||
index + 1}
|
||||
</div>
|
||||
|
||||
{/* Step Info */}
|
||||
<div className="flex-1">
|
||||
<div className={`font-semibold text-sm ${
|
||||
step.status === 'active' ? 'text-blue-300' :
|
||||
step.status === 'completed' ? 'text-green-300' :
|
||||
step.status === 'error' ? 'text-red-300' :
|
||||
'text-gray-400'
|
||||
}`}>
|
||||
{step.title}
|
||||
</div>
|
||||
<div className="text-xs text-gray-400">
|
||||
{step.details || step.description}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Duration */}
|
||||
{step.duration && (
|
||||
<div className="text-xs text-gray-500">
|
||||
{(step.duration / 1000).toFixed(1)}s
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Analysis Timer */}
|
||||
{status?.isActive && (
|
||||
{status?.isActive && !status?.analysisProgress && (
|
||||
<div className="bg-gray-800 p-6 rounded-lg border border-gray-700">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-xl font-bold text-white">Analysis Timer</h3>
|
||||
@@ -559,7 +649,7 @@ export default function AutomationPageV2() {
|
||||
{formatCountdown(nextAnalysisCountdown)}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
{nextAnalysisCountdown > 0 ? 'Next Analysis In' : 'Analysis Running'}
|
||||
{nextAnalysisCountdown > 0 ? 'Next Analysis In' : 'Analysis Starting Soon'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-gray-700 rounded-full h-2">
|
||||
|
||||
Reference in New Issue
Block a user