Dashboard UI Overview
Relevant source files
The following files were used as context for generating this wiki page:
The Garuda Sentiment Analysis dashboard provides a comprehensive user interface for analyzing YouTube comments related to Indonesian football. The UI is built with Next.js 14 and follows a modern, organized structure designed to present complex data in a clear and accessible manner. Its core design philosophy is "Progressive Disclosure," starting with a high-level overview and allowing users to drill down into more detailed analyses as needed. This prevents overwhelming the user and ensures a clean, focused experience.
The architecture separates concerns into distinct pages, each serving a specific purpose. This modular approach improves user experience, performance through code-splitting, and maintainability. The UI also visually distinguishes between analyses based on a pre-trained static SVM model and those using the live Gemini AI model for real-time data.
Sources: dashboard-next/DASHBOARD_STRUCTURE.md, dashboard-next/MENU_GUIDE.md, dashboard-next/README.md
UI Architecture and Philosophy
The dashboard's structure is guided by a clear information hierarchy and a user-centric design philosophy.
Information Hierarchy
The UI is structured in layers, allowing users to progressively delve deeper into the data.
This diagram illustrates the "Progressive Disclosure" principle, where users move from a high-level summary to detailed data and technical metrics.
Sources: dashboard-next/DASHBOARD_STRUCTURE.md
User Journeys
The structure is designed to cater to different types of users with varying needs.
- Casual User: Interacts primarily with the main Dashboard for a quick snapshot.
- Analyst: Navigates from the Dashboard to the Sentiment and Emotions pages for deeper insights.
- Researcher: Utilizes all pages, with a focus on the Comments Explorer and Model Performance.
- Developer: Focuses on Model Performance, Documentation, and the Live Analyzer for technical validation.
Sources: dashboard-next/DASHBOARD_STRUCTURE.md, dashboard-next/MENU_GUIDE.md
Dual Model UI Distinction
The dashboard integrates two distinct AI models, and the UI reflects this separation.
- Static Pages (SVM Model): These pages analyze a pre-processed, historical dataset. They include the main Dashboard, Analytics, Dataset, and Model Performance pages.
- Live Pages (Gemini AI): These pages process raw, real-time data from YouTube. They include Live Comments and Live Analysis.
The sidebar navigation explicitly groups these pages under "Static Analysis" and "Live Analysis" to make the distinction clear to the user.
Sources: dashboard-next/README.md, README.md, dashboard-next/components/Sidebar.tsx:90-101
Layout and Navigation
The main application layout consists of a fixed sidebar for navigation and a main content area where the selected page is rendered.
Core Layout Components
The overall structure is defined by the Sidebar component and the page content it wraps.
This diagram shows the primary layout structure with a fixed sidebar and a scrollable main content area.
Sources: dashboard-next/components/Sidebar.tsx:69
Sidebar Navigation
The sidebar is the primary navigation tool, organizing all available pages into logical groups. It is implemented in the Sidebar.tsx component.
The navigation is divided into three main sections:
- Static Analysis: Pages that show analysis from the historical, pre-trained SVM model.
- Live Analysis: Pages that feature real-time data processing using the Gemini AI model.
- Tools: Utility pages for dataset management, live prediction, and documentation.
Sources: dashboard-next/components/Sidebar.tsx:16-36, 90-107
The following table summarizes the navigation items available in the sidebar:
| Group | Label | Route | Icon | Purpose |
|---|---|---|---|---|
| Static Analysis | Dashboard | / | LayoutDashboard | High-level overview of the system. |
| Advanced Analytics | /analytics/advanced | Zap | Detailed analytics (purpose inferred). | |
| Sentiment Analysis | /sentiment | TrendingUp | Detailed sentiment breakdown by target. | |
| Emotion Insights | /emotions | Heart | In-depth analysis of emotions in comments. | |
| Comments Explorer | /comments | MessageSquare | Browse and search all comments. | |
| Model Performance | /model | Activity | Technical metrics of the ML model. | |
| Live Analysis | Live Analysis | /realtime | Activity | Real-time sentiment monitoring stream. |
| Real YouTube Comments | /live-comments | MessageSquare | Fetch and analyze live YouTube comments. | |
| Stream Settings | /realtime/settings | Settings | Configure real-time stream parameters. | |
| Tools | Live Analyzer | /analytics | Database | Real-time sentiment prediction for new text. |
| Dataset | /dataset | Database | Dataset statistics and download options. | |
| Documentation | /docs | FileText | Technical project documentation. |
Sources: dashboard-next/components/Sidebar.tsx:16-36, dashboard-next/DASHBOARD_STRUCTURE.md, dashboard-next/MENU_GUIDE.md
A NavItem component handles the rendering and active state of each link. An active link is highlighted with a cyan color and a vertical bar on the left.
// dashboard-next/components/Sidebar.tsx:38-56
const NavItem = ({ item }: { item: any }) => {
const isActive = pathname === item.href;
return (
<Link
href={item.href}
className={`group flex items-center gap-3 px-4 py-3 text-sm font-medium transition-all duration-200 relative ${isActive
? "text-cyan-400 bg-cyan-950/10"
: "text-slate-400 hover:text-slate-200 hover:bg-slate-900/40 hover:translate-x-1"
}`}
>
{isActive && (
<div className="absolute left-0 top-0 bottom-0 w-1 bg-cyan-500 shadow-[0_0_12px_rgba(6,182,212,0.6)]" />
)}
<item.icon
className={`w-5 h-5 transition-colors ${isActive ? "text-cyan-400" : "text-slate-500 group-hover:text-slate-300"
}`}
/>
<span className="tracking-wide">{item.label}</span>
</Link>
);
};
Sources: dashboard-next/components/Sidebar.tsx:38-56
Page and Routing Structure
The application uses the Next.js App Router, where each page corresponds to a page.tsx file within a directory in the app/ folder.
This diagram shows the file-based routing structure:
Design System
The dashboard employs the "Garuda Elegant Design System," which prioritizes a refined, premium feel with a focus on performance and consistency.
Color Palette
The color scheme uses a dark, slate-based background with blue and cyan accents. Specific colors are designated for sentiment representation.
| Category | Color Name | Hex Code | Usage |
|---|---|---|---|
| Primary | Blue Primary | #3b82f6 | Main brand color, primary actions |
| Cyan Accent | #06b6d4 | Secondary accent, active states | |
| Sentiment | Positive | #10b981 | Positive sentiment, success |
| Negative | #ef4444 | Negative sentiment, errors | |
| Neutral | #6b7280 | Neutral sentiment, secondary info | |
| Neutral | Background | #0f172a | Main background (Slate-900) |
| Card | rgba(15, 23, 42, 0.6) | Glass effect cards | |
| Border | #334155 | Card borders (Slate-700) | |
| Text Primary | #f1f5f9 | Main text (Slate-100) | |
| Text Muted | #94a3b8 | Secondary text (Slate-400) |
Sources: dashboard-next/DESIGN_SYSTEM.md, dashboard-next/DASHBOARD_STRUCTURE.md
Key Components
The UI is built from a set of reusable, styled components that create a consistent look and feel.
-
Glass Card: A primary container component with a semi-transparent background, backdrop blur, and subtle border. It is used extensively for content blocks and stat cards.
/* dashboard-next/README.md */ .glass-card { @apply bg-slate-900/20 backdrop-blur-xl border border-slate-800/50; }Sources: dashboard-next/README.md:111-114, dashboard-next/DESIGN_SYSTEM.md
-
StatCard: A specialized card for displaying key metrics, often including an icon, label, value, and trend indicator.
Sources: dashboard-next/app/page.tsx:10, dashboard-next/app/model/page.tsx:6 -
Charts: Interactive charts are built using the
Rechartslibrary. They are often dynamically imported and rendered only on the client-side to improve performance.
Sources: dashboard-next/app/page.tsx:11, 21-42
Summary
The dashboard's UI is a well-architected system designed for clarity, performance, and scalability. It effectively implements the "Progressive Disclosure" principle to manage complex data, while the clear separation between static and live analysis pages helps users understand the source of the insights. The consistent design system, based on "Glass Card" components and a defined color palette, creates a modern and elegant user experience. This thoughtful structure allows different user personas—from casual observers to technical researchers—to efficiently find the information they need.
Sources: dashboard-next/DASHBOARD_STRUCTURE.md, dashboard-next/MENU_GUIDE.md, dashboard-next/README.md