Dashboard UI Component

Relevant source files

The following files were used as context for generating this wiki page:

• README.md
• frontend/src/pages/Dashboard/index.tsx
• frontend/src/components/Sidebar/index.tsx
• frontend/src/api/evaluations.ts
• frontend/src/types/index.ts

The Dashboard UI Component serves as the primary visual interface for the evaluation platform. It provides users with a centralized view of evaluation progress, metrics, and system status. The component integrates multiple sub-modules to visualize data retrieved from the backend API, allowing researchers to monitor large-scale evaluation tasks in real-time.

This module acts as the layout wrapper for the application's main view, coordinating the display of the navigation sidebar and the main content area where evaluation summaries are rendered.

Architecture and Layout

The Dashboard follows a standard layout pattern consisting of a persistent sidebar and a dynamic main content area. The Dashboard component initializes the data fetching process and propagates the state down to specialized visualization widgets.

Data Flow

The Dashboard utilizes asynchronous hooks to fetch evaluation data upon mounting. It communicates with the backend through the evaluation API service to retrieve task statuses and performance metrics.

Key Components

The Dashboard is composed of several functional units that handle specific data representations.

Component Name	Description	Source File
StatsCards	Displays high-level metrics like total tasks and success rates.	frontend/src/pages/Dashboard/index.tsx
TaskTable	Lists individual evaluation runs with status and timestamps.	frontend/src/pages/Dashboard/index.tsx
Sidebar	Provides navigation links to Datasets, Models, and Settings.	frontend/src/components/Sidebar/index.tsx

Evaluation Metrics Processing

The component processes raw evaluation data to calculate summary statistics. The data structure for an evaluation task includes fields for model identifiers, dataset names, and completion status.

// Example of Evaluation Task Interface
export interface EvaluationTask {
  id: string;
  model_id: string;
  dataset_id: string;
  status: 'PENDING' | 'RUNNING' | 'COMPLETED' | 'FAILED';
  created_at: string;
  metrics?: Record<string, number>;
}

Sources: frontend/src/types/index.ts

API Integration

The Dashboard consumes endpoints from the evaluation service. It primarily uses the list and detail endpoints to populate the user interface.

Endpoint	Method	Description
/api/v1/evaluations	GET	Fetches all evaluation tasks for the current user.
/api/v1/evaluations/{id}	GET	Retrieves detailed metrics for a specific task.
/api/v1/stats/summary	GET	Provides aggregated metrics for the dashboard cards.

Sources: frontend/src/api/evaluations.ts

Summary

The Dashboard UI Component centralizes evaluation management by aggregating task data into a cohesive visual format. By separating the layout from the data fetching logic, it ensures a responsive experience while monitoring complex evaluation workflows. This module is essential for tracking model performance across various datasets in the platform.