Merge pull request #18 from cristofima/dev - feat: add dataset stats overview and job metadata tracking with tags and notes

- Added tags and notes fields to job records with PATCH endpoint for updates
- Created JobMetadataEditor component for inline editing of job metadata
- Enhanced error pages (global-error, not-found, loading) with better UX and navigation
- Fixed training container imports (preprocessor.py, eda.py) to use relative imports
- Updated Terraform CORS configuration to support both Amplify branch and default domains

Author: cristofima

backend/api/models/schemas.py

@@ -113,6 +113,8 @@ class JobDetails(BaseModel):
     metrics: Optional[TrainingMetrics] = None
     feature_importance: Optional[Dict[str, float]] = None
     error_message: Optional[str] = None
+    tags: Optional[List[str]] = None  # Custom labels for filtering
+    notes: Optional[str] = None  # User notes for experiment tracking
 
     model_config = {"protected_namespaces": ()}
 
@@ -135,10 +137,18 @@ class JobResponse(BaseModel):
     eda_report_download_url: Optional[str] = None
     training_report_download_url: Optional[str] = None
     error_message: Optional[str] = None
+    tags: Optional[List[str]] = None  # Custom labels for filtering
+    notes: Optional[str] = None  # User notes for experiment tracking
 
     model_config = {"protected_namespaces": ()}
 
 
+class JobUpdateRequest(BaseModel):
+    """Request schema for updating job metadata (tags, notes)"""
+    tags: Optional[List[str]] = Field(default=None, max_items=10, description="Custom labels for filtering (max 10)")
+    notes: Optional[str] = Field(default=None, max_length=1000, description="User notes for experiment tracking")
+
+
 class JobListResponse(BaseModel):
     jobs: List[JobDetails]
     next_token: Optional[str] = None

backend/api/routers/models.py

@@ -1,6 +1,6 @@
 from fastapi import APIRouter, HTTPException, status, Query
 from typing import Optional
-from ..models.schemas import JobListResponse, JobResponse, JobStatus, ProblemType
+from ..models.schemas import JobListResponse, JobResponse, JobStatus, ProblemType, JobUpdateRequest
 from ..services.dynamo_service import dynamodb_service
 from ..services.s3_service import s3_service
 from ..utils.helpers import get_settings
@@ -34,7 +34,9 @@ async def get_job_status(job_id: str):
             started_at=job.get('started_at'),
             completed_at=job.get('completed_at'),
             metrics=job.get('metrics'),
-            error_message=job.get('error_message')
+            error_message=job.get('error_message'),
+            tags=job.get('tags'),
+            notes=job.get('notes')
         )
 
         # Generate download URLs if job is completed
@@ -170,6 +172,68 @@ async def delete_job(job_id: str, delete_data: bool = True):
         )
 
 
+@router.patch("/{job_id}", response_model=JobResponse)
+async def update_job_metadata(job_id: str, request: JobUpdateRequest):
+    """
+    Update job metadata (tags and notes) for experiment tracking.
+    Tags can be used to categorize jobs (e.g., "experiment-1", "baseline", "production").
+    Notes can store observations or comments about the training run.
+    """
+    try:
+        # Verify job exists
+        job = dynamodb_service.get_job(job_id)
+        if not job:
+            raise HTTPException(
+                status_code=status.HTTP_404_NOT_FOUND,
+                detail="Job not found"
+            )
+        
+        # Validate tags if provided
+        if request.tags is not None:
+            if len(request.tags) > 10:
+                raise HTTPException(
+                    status_code=status.HTTP_400_BAD_REQUEST,
+                    detail="Maximum 10 tags allowed per job"
+                )
+            # Validate individual tag length
+            for tag in request.tags:
+                if not tag.strip():
+                    raise HTTPException(
+                        status_code=status.HTTP_400_BAD_REQUEST,
+                        detail="Tags cannot be empty or whitespace"
+                    )
+                if len(tag) > 50:
+                    raise HTTPException(
+                        status_code=status.HTTP_400_BAD_REQUEST,
+                        detail="Each tag must be 50 characters or less"
+                    )
+        
+        # Validate notes length if provided (defense-in-depth, Pydantic also validates)
+        if request.notes is not None and len(request.notes) > 1000:
+            raise HTTPException(
+                status_code=status.HTTP_400_BAD_REQUEST,
+                detail="Notes must be 1000 characters or less"
+            )
+        
+        # Update job metadata in DynamoDB
+        dynamodb_service.update_job_metadata(
+            job_id=job_id,
+            tags=request.tags,
+            notes=request.notes
+        )
+        
+        # Return updated job
+        return await get_job_status(job_id)
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(
+            status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            detail=f"Error updating job metadata: {str(e)}"
+        )
+
+
 @router.get("", response_model=JobListResponse)
 async def list_jobs(
     limit: int = Query(default=20, ge=1, le=100),

backend/api/services/dynamo_service.py

@@ -129,7 +129,7 @@ def list_jobs(
         limit: int = 20,
         last_evaluated_key: Optional[Dict] = None
     ) -> tuple[List[Dict], Optional[Dict]]:
-        """List training jobs for a user with pagination"""
+        """List training jobs for a user with pagination, ordered by created_at DESC"""
         try:
             scan_kwargs = {
                 'Limit': limit,
@@ -144,6 +144,9 @@ def list_jobs(
             items = self._convert_decimals(response.get('Items', []))
             next_key = response.get('LastEvaluatedKey')
 
+            # Sort by created_at descending (newest first)
+            items.sort(key=lambda x: x.get('created_at', ''), reverse=True)
+            
             return items, next_key
         except ClientError as e:
             raise Exception(f"Error listing jobs: {str(e)}")
@@ -174,6 +177,38 @@ def delete_job(self, job_id: str) -> bool:
         except ClientError as e:
             raise Exception(f"Error deleting job: {str(e)}")
 
+    def update_job_metadata(
+        self,
+        job_id: str,
+        tags: Optional[List[str]] = None,
+        notes: Optional[str] = None
+    ) -> bool:
+        """Update job metadata (tags, notes) for experiment tracking"""
+        try:
+            update_data = {
+                'updated_at': datetime.now(timezone.utc).isoformat()
+            }
+            
+            # Only update fields that are provided
+            if tags is not None:
+                update_data['tags'] = tags
+            if notes is not None and notes.strip() != "":
+                update_data['notes'] = notes
+            
+            update_expr = "SET " + ", ".join([f"#{k} = :{k}" for k in update_data.keys()])
+            expr_attr_names = {f"#{k}": k for k in update_data.keys()}
+            expr_attr_values = {f":{k}": v for k, v in update_data.items()}
+            
+            self.jobs_table.update_item(
+                Key={'job_id': job_id},
+                UpdateExpression=update_expr,
+                ExpressionAttributeNames=expr_attr_names,
+                ExpressionAttributeValues=expr_attr_values
+            )
+            return True
+        except ClientError as e:
+            raise Exception(f"Error updating job metadata: {str(e)}")
+    
     def delete_dataset(self, dataset_id: str) -> bool:
         """Delete a dataset record"""
         try:

backend/training/eda.py

@@ -3,7 +3,7 @@
 from typing import List, Tuple
 
 # Import shared utilities
-from .utils import detect_problem_type, is_id_column
+from utils import detect_problem_type, is_id_column
 
 
 def generate_eda_report(df: pd.DataFrame, target_column: str, output_path: str):

backend/training/preprocessor.py

@@ -8,7 +8,7 @@
 from feature_engine.selection import DropConstantFeatures, DropDuplicateFeatures
 
 # Import shared utilities
-from .utils import (
+from utils import (
     detect_problem_type,
     is_id_column,
     is_high_cardinality_categorical,

frontend/app/configure/[datasetId]/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useParams } from 'next/navigation';
 import { DatasetMetadata, startTraining, getDatasetMetadata } from '@/lib/api';
 import { getProblemTypeIcon, getProblemTypeDescription } from '@/lib/utils';
 import Header from '@/components/Header';
+import ColumnStatsDisplay from '@/components/ColumnStatsDisplay';
 
 export default function ConfigurePage() {
   const router = useRouter();
@@ -139,33 +140,13 @@ export default function ConfigurePage() {
         <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-lg dark:shadow-zinc-900/50 p-8 space-y-8 transition-colors">
           {/* Dataset Info */}
           <div>
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Dataset Information</h2>
-            <div className="bg-gray-50 dark:bg-zinc-900/50 rounded-lg p-4 space-y-2 text-sm">
-              <div className="flex justify-between">
-                <span className="text-gray-600 dark:text-gray-400">Dataset ID:</span>
-                <span className="font-mono text-gray-900 dark:text-gray-100">{datasetId}</span>
-              </div>
-              {metadata && (
-                <>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600 dark:text-gray-400">Filename:</span>
-                    <span className="text-gray-900 dark:text-gray-100">{metadata.filename}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600 dark:text-gray-400">Rows:</span>
-                    <span className="text-gray-900 dark:text-gray-100">{metadata.row_count.toLocaleString()}</span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-gray-600 dark:text-gray-400">Columns:</span>
-                    <span className="text-gray-900 dark:text-gray-100">{columns.length}</span>
-                  </div>
-                </>
-              )}
-              <div className="flex justify-between">
-                <span className="text-gray-600 dark:text-gray-400">Status:</span>
-                <span className="text-green-600 dark:text-green-400">✓ Uploaded and analyzed</span>
-              </div>
-            </div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Dataset Overview</h2>
+            {metadata && (
+              <ColumnStatsDisplay 
+                metadata={metadata} 
+                selectedColumn={selectedTarget || undefined} 
+              />
+            )}
           </div>
 
           {/* Column Selection */}

frontend/app/error.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to console (in production, send to error reporting service)
+    console.error('Application error:', error);
+  }, [error]);
+
+  // Check if it's a network/API error
+  const isNetworkError = error.message?.includes('fetch') || 
+                         error.message?.includes('network') ||
+                         error.message?.includes('Failed to');
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-zinc-900 flex items-center justify-center p-4 transition-colors">
+      <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-xl dark:shadow-zinc-900/50 p-8 max-w-lg w-full text-center transition-colors">
+        <div className="text-6xl mb-4">
+          {isNetworkError ? '🌐' : '⚠️'}
+        </div>
+        
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+          {isNetworkError ? 'Connection Error' : 'Something went wrong'}
+        </h1>
+        
+        <p className="text-gray-600 dark:text-gray-400 mb-6">
+          {isNetworkError 
+            ? 'Unable to connect to the server. Please check your internet connection and try again.'
+            : 'An unexpected error occurred. Our team has been notified.'
+          }
+        </p>
+
+        {/* Error details for debugging (only in development) */}
+        {process.env.NODE_ENV === 'development' && (
+          <div className="mb-6 p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg text-left">
+            <p className="text-sm font-mono text-red-700 dark:text-red-400 break-all">
+              {error.message}
+            </p>
+            {error.digest && (
+              <p className="text-xs text-red-500 dark:text-red-500 mt-2">
+                Error ID: {error.digest}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <button
+            onClick={reset}
+            className="px-6 py-3 bg-indigo-600 dark:bg-indigo-500 text-white rounded-lg font-medium hover:bg-indigo-700 dark:hover:bg-indigo-600 transition-colors cursor-pointer"
+          >
+            Try again
+          </button>
+          
+          <button
+            onClick={() => window.location.href = '/'}
+            className="px-6 py-3 bg-gray-100 dark:bg-zinc-700 text-gray-700 dark:text-gray-200 rounded-lg font-medium hover:bg-gray-200 dark:hover:bg-zinc-600 transition-colors cursor-pointer"
+          >
+            Go to Home
+          </button>
+        </div>
+
+        {/* Helpful tips */}
+        {isNetworkError && (
+          <div className="mt-8 text-left">
+            <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Troubleshooting tips:
+            </h3>
+            <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1">
+              <li>• Check your internet connection</li>
+              <li>• Verify the API server is running</li>
+              <li>• Try refreshing the page</li>
+              <li>• Clear your browser cache</li>
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/app/global-error.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to console (in production, send to error reporting service)
+    console.error('Critical application error:', error);
+  }, [error]);
+
+  return (
+    <html lang="en">
+      <body className="bg-gray-50 dark:bg-zinc-900">
+        <div className="min-h-screen flex items-center justify-center p-4">
+          <div className="bg-white dark:bg-zinc-800 rounded-lg shadow-xl p-8 max-w-lg w-full text-center">
+            <div className="text-6xl mb-4">💥</div>
+            
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+              Critical Error
+            </h1>
+            
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              A critical error occurred that prevented the application from loading.
+              Please try refreshing the page.
+            </p>
+
+            {/* Error details for debugging */}
+            {process.env.NODE_ENV === 'development' && error.message && (
+              <div className="mb-6 p-4 bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 rounded-lg text-left">
+                <p className="text-sm font-mono text-red-700 dark:text-red-400 break-all">
+                  {error.message}
+                </p>
+              </div>
+            )}
+
+            <div className="flex flex-col sm:flex-row gap-3 justify-center">
+              <button
+                onClick={reset}
+                className="px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors cursor-pointer"
+              >
+                Try again
+              </button>
+              
+              <button
+                onClick={() => window.location.href = '/'}
+                className="px-6 py-3 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors cursor-pointer"
+              >
+                Reload Application
+              </button>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}