# Lab Dashboard Service
## Overview
The **LabDashboardService** generates clinical lab-style HTML dashboards with ultra-minimal Swiss design principles. Unlike the standard dark-themed dashboard, the lab dashboard features:
- **White background** (#FFFFFF) with light gray borders
- **Grayscale palette** for minimal visual noise
- **Single blue accent** (#0066FF) for interactive elements
- **Swiss typography** with high contrast and precision
- **Clinical aesthetic** inspired by medical/scientific interfaces
## Design Philosophy
### Visual Hierarchy
1. **White space first** - Let content breathe
2. **Typography-driven** - Clear, precise, high contrast
3. **Minimal decoration** - No gradients, shadows only for depth
4. **Data-first** - Information before aesthetics
### Color System
```
Grayscale: #000000 → #FFFFFF (11 steps)
Accent: #0066FF (blue for interactive elements)
Borders: #E5E5E5 (light gray)
Text: #000000 (black for high contrast)
```
### Typography
- **Font**: SF Pro Display / Inter / Helvetica Neue
- **Weights**: 400 (regular), 500 (medium), 600 (semibold)
- **Sizes**: 10px-14px for UI, 11px uppercase for labels
- **Mono**: SF Mono / Monaco / Consolas for timestamps/code
## Layout Structure
```
┌─────────────────────────────────────────────────────────┐
│ Header Bar (sticky) │
│ [yt pipe] [Processed ✓] [Export] [⚙] │
├─────────────────────────────────────────────────────────┤
│ ┌─────────────────────────┬─────────────────────────┐ │
│ │ Video Player (60%) │ Sidebar (40%) │ │
│ │ ┌─────────────────────┐ │ ┌─────────────────────┐ │ │
│ │ │ │ │ │ Summary │ │ │
│ │ │ [▶] │ │ │ • Bullet points │ │ │
│ │ │ │ │ └─────────────────────┘ │ │
│ │ └─────────────────────┘ │ ┌─────────────────────┐ │ │
│ │ Metadata Strip │ │ Key Concepts │ │ │
│ │ Timeline ▂▃▂▅▃▂▄▃ │ │ [tag] [tag] [tag] │ │ │
│ └─────────────────────────┘ └─────────────────────┘ │ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ Transcript Chunks │ │
│ │ 0:00 Chunk 0 Text preview... │ │
│ │ 0:15 Chunk 1 Text preview... │ │
│ └─────────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────────┤
│ Footer: Processing metadata │
└─────────────────────────────────────────────────────────┘
```
## Components
### Header Bar
- Minimal branding ("yt pipe" wordmark)
- Status pill (center)
- Action buttons (export, settings)
### Video Section
- **Player placeholder**: Gray rectangle with play button
- **Metadata strip**: Title, channel, duration, date, language, quality
- **Timeline bar**: Visual markers for chunk timestamps
### Sidebar Cards (6 total)
1. **Summary**
- 3-5 bullet points
- Key insights from analysis
2. **Key Concepts**
- Top 10 keywords as pills
- Hoverable with blue accent
3. **Entities**
- Top 5 entities (people, places, concepts)
- Clean list format
4. **Sentiment**
- Simple bar gauge
- Negative / Neutral / Positive scale
5. **Difficulty**
- Based on vocabulary complexity
- Beginner / Intermediate / Advanced
6. **Action Items**
- Extracted tasks/todos
- Placeholder: "No action items detected"
### Transcript Section
- **Full-width card** below main grid
- **Scrollable list** (max 600px height)
- **Columns**: Timestamp | Chunk ID | Text preview
- **Hover effect**: Subtle gray background
## Usage
### Basic Usage
```python
from pathlib import Path
from ytpipe.core.models import VideoMetadata, Chunk, AnalysisReport
from ytpipe.services.exporters import LabDashboardService
# Initialize service
service = LabDashboardService()
# Generate dashboard
dashboard_path = service.generate_lab_dashboard(
metadata=video_metadata,
chunks=chunks_list,
analysis=analysis_report, # Optional
output_dir=Path("./output")
)
print(f"Dashboard: {dashboard_path}")
# Output: ./output/lab_dashboard.html
```
### With Pipeline
```python
from ytpipe.core.pipeline import Pipeline
from ytpipe.services.exporters import LabDashboardService
from ytpipe.services.intelligence import AnalyzerService
# Process video
pipeline = Pipeline()
result = await pipeline.process("https://youtube.com/watch?v=VIDEO_ID")
# Run analysis
analyzer = AnalyzerService()
analysis = analyzer.analyze(result.metadata, result.chunks)
# Generate lab dashboard
lab_service = LabDashboardService()
lab_dashboard = lab_service.generate_lab_dashboard(
metadata=result.metadata,
chunks=result.chunks,
analysis=analysis,
output_dir=Path(result.output_dir)
)
```
### Test Script
```bash
python test_lab_dashboard.py
```
This generates a sample dashboard with mock data at `./test_output/lab_dashboard.html`.
## Analysis Integration
The lab dashboard integrates with `AnalysisReport` from `AnalyzerService`:
```python
from ytpipe.services.intelligence import AnalyzerService
analyzer = AnalyzerService(
min_keyword_length=3,
max_keywords=20,
max_topics=5
)
analysis = analyzer.analyze(metadata, chunks)
# Returns: AnalysisReport with keywords, topics, quality metrics
```
**Used for:**
- Summary bullet points
- Top keywords (Key Concepts)
- Topics (Summary)
- Quality distribution
## Responsive Design
### Desktop (> 1200px)
- Two-column layout: 60% video + 40% sidebar
### Tablet (768px - 1200px)
- Single column: Video on top, sidebar below
### Mobile (< 768px)
- Stacked layout
- Simplified metadata grid
- Single-column transcript
## File Output
```
output_dir/
└── lab_dashboard.html # Self-contained HTML (no external dependencies)
```
**Size**: ~40-60 KB (depending on content length)
## Customization
The service is intentionally minimal with no customization options to maintain design consistency. For alternative styles:
- Use `DashboardService` for dark mode with OKLCH colors
- Extend `LabDashboardService` for custom branding
## Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- No IE11 support (uses CSS Grid, CSS variables)
- Progressive enhancement (graceful degradation)
## Accessibility
- **WCAG AA compliant** contrast ratios
- **Semantic HTML** (header, main, footer, nav)
- **Keyboard navigation** (all interactive elements)
- **Screen reader friendly** (aria labels, alt text)
## Comparison: Lab vs Standard Dashboard
| Feature | Lab Dashboard | Standard Dashboard |
|---------|---------------|-------------------|
| Theme | Light (white) | Dark (OKLCH) |
| Colors | Grayscale + blue | Full color palette |
| Style | Swiss/clinical | Modern/vibrant |
| Accent | Single blue | Multiple accents |
| Typography | High contrast | Optimized for dark |
| Use case | Reports, printing | Interactive viewing |
| Aesthetic | Minimal, precise | Rich, immersive |
## When to Use
**Lab Dashboard (clinical style):**
- Formal reports
- Professional presentations
- Printable documents
- Clinical/scientific contexts
- High-contrast accessibility needs
**Standard Dashboard (dark mode):**
- Interactive exploration
- Extended viewing sessions
- Modern web applications
- Developer tools
## Future Enhancements
Potential additions (not yet implemented):
- [ ] PDF export button (print-optimized CSS)
- [ ] Real sentiment analysis (via NLP)
- [ ] Entity extraction (NER models)
- [ ] Action item detection (regex patterns)
- [ ] Interactive timeline (jump to timestamp)
- [ ] Collapsible sidebar cards
- [ ] Keyword search/filter
- [ ] Export to Markdown/JSON
## Credits
Design inspired by:
- Swiss design principles (Josef Müller-Brockmann)
- Clinical lab interfaces (precision, clarity)
- Apple Human Interface Guidelines (SF Pro typography)
- Google Material Design (accessibility standards)
---
**Generated by**: ytpipe Lab Dashboard Service
**Version**: 1.0.0
**License**: Same as ytpipe project
