Analytics/dashboard#59
Conversation
- Add ProcessingMetrics model to schema with timing, size, chunking, quality fields - Add MetricsCollector class in AI worker for timing instrumentation - Update pipeline.py to return embedding timing - Integrate metrics collection into main.py processing flow - Extend callback payload with detailed metrics - Add MetricsSchema to callback-validator.ts - Update callback-route.ts to persist ProcessingMetrics records - Calculate queueTimeMs and userWaitTimeMs in backend - Add 26 unit tests for MetricsCollector (all passing) - Add 8 integration tests for callback metrics
- Implement Analytics API endpoints (overview, processing, quality, documents) - Implement Chunks Explorer API endpoints - Add ProcessingMetrics schema and relation - Implement AI Worker metrics collection (MetricsCollector) - Fix AI Worker tests (PresentationChunker, PPTX, EPUB) - Fix Backend integration tests (Vector syntax, Auth headers)
- Add Analytics Dashboard with Pipeline Funnel view - Add Chunks Explorer with filtering and detail modal - Replace Tremor components with native Tailwind for TailwindCSS v4 compatibility - Add analytics and chunks API endpoints to frontend - Add E2E tests for analytics flow (analytics-e2e.test.ts) - Fix API types to match backend response format
- Remove @tremor/react package completely - Replace Tremor Badge with native Tailwind spans - Replace Tremor TabGroup with native period selector buttons - Sync Drive Sync header font with Documents page - Move Settings tab to right side of navigation - Reduce bundle size (323KB JS, 30KB CSS)
- Rename analytics-dashboard.md to extension-analytics-dashboard.md - Rename hybrid-search-implementation.md to extension-hybrid-search.md - Update chunks filter placeholder: Search -> Filter by text - Add hybrid search implementation plan with TDD approach
- Replace native select elements with custom Select component - implement consistent header design (Icon + Title + Subtitle) across all tabs - Align Drive Sync and Analytics actions with headers - Remove redundant headers and Refresh button - Standardize Search input styling (icon position, no label)
PR Compliance Guide 🔍Below is a summary of compliance checks for this PR:
Compliance status legend🟢 - Fully Compliant🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label |
||||||||||||||||||||||||||
PR Code Suggestions ✨Explore these optional code suggestions:
|
||||||||||||||||||||||||||
PR Type
Enhancement, Tests, Documentation
Description
Analytics Dashboard: New comprehensive analytics system with overview, processing time breakdown, quality metrics, and documents routes providing RAG pipeline performance insights
Metrics Collection: End-to-end metrics tracking from AI worker through backend callback to analytics endpoints, including timing (queue, conversion, chunking, embedding) and quality aggregation
Chunks Explorer: New API and UI for browsing document chunks with filtering by quality level, chunk type, and content search, plus detailed chunk view modal
Frontend Analytics UI: New analytics dashboard component displaying pipeline funnel visualization across 5 stages with period selector (24h, 7d, 30d) and summary statistics
Multi-file Upload: Enhanced document upload with batch processing (max 3 concurrent, 20 file limit) and real-time progress tracking via
UploadStatusPopupCustom UI Components: New
Selectdropdown component anduseClickOutsidehook for improved form consistency across the applicationDatabase Schema: Added
ProcessingMetricsmodel for storing detailed pipeline metrics with one-to-one relationship toDocumentComprehensive Testing: Integration tests for analytics API, chunks API, metrics callbacks, and E2E analytics flow; unit tests for metrics collector in AI worker
Documentation: Updated implementation plan with TDD approach and test specifications; new hybrid search feature documentation
Diagram Walkthrough
File Walkthrough
7 files
analytics-api.test.ts
Analytics API integration tests with metrics validationapps/backend/tests/integration/routes/analytics-api.test.ts
overview, processing, quality, and documents routes
seedDocumentWithMetricsto create test data withProcessingMetrics
calculations
chunks-api.test.ts
Chunks explorer API integration tests with filteringapps/backend/tests/integration/routes/chunks-api.test.ts
filtering
filtering, and content search
seedChunkto create test chunks with quality scoresand metadata
callback-metrics.test.ts
Processing metrics callback integration testsapps/backend/tests/integration/routes/callback-metrics.test.ts
processing
start
missing metrics
analytics-e2e.test.ts
Analytics end-to-end flow integration testsapps/backend/tests/integration/routes/analytics-e2e.test.ts
to metrics retrieval
analytics endpoints
filtering
test_metrics.py
Metrics collector unit testsapps/ai-worker/tests/test_metrics.py
cases
aggregation
missing metadata
test_text_processor.py
Text processor tests clarificationapps/ai-worker/tests/test_text_processor.py
test_main.py
Main tests pipeline mock updatesapps/ai-worker/tests/test_main.py
embedding_time_ms)
34 files
documents-route.ts
Analytics documents and chunks detail routesapps/backend/src/routes/analytics/documents-route.ts
GET /api/analytics/documentsreturning paginated list ofdocuments with processing metrics
GET /api/analytics/documents/:id/chunksreturning chunks forspecific document
totalTimeMs, avgQualityScore, or createdAt
chunks-route.ts
Chunks explorer API routes with filteringapps/backend/src/routes/chunks/chunks-route.ts
GET /api/chunksfor paginated, filterable chunks list withdefault 20 items per page
chunk type, quality flags, and content search
GET /api/chunks/:idreturning full chunk detail withmetadata
endpoints.ts
Frontend API types and endpoints for analyticsapps/frontend/src/api/endpoints.ts
(AnalyticsOverview, AnalyticsProcessing, AnalyticsQuality)
document metrics
analyticsApiobject with methods for overview, processing,quality, and documents endpoints
chunksApiobject with list and detail methods for chunks explorerprocessing-route.ts
Analytics processing time breakdown routeapps/backend/src/routes/analytics/processing-route.ts
GET /api/analytics/processingreturning processing timebreakdown by stage
wait times
quality-route.ts
Analytics quality metrics routeapps/backend/src/routes/analytics/quality-route.ts
GET /api/analytics/qualityreturning quality scoredistribution and flags breakdown
and low (<0.70) categories
callback-route.ts
Callback route ProcessingMetrics creationapps/backend/src/routes/internal/callback-route.ts
queueTimeMsfrom document creation to processing startuserWaitTimeMsas sum of queue and total processing timesmetrics
overview-route.ts
Analytics overview dashboard routeapps/backend/src/routes/analytics/overview-route.ts
GET /api/analytics/overviewreturning summary statistics fordashboard
quality scores
calculations
callback-validator.ts
Callback validator metrics schemaapps/backend/src/validators/callback-validator.ts
MetricsSchemafor validating detailed processing metrics incallbacks
embeddingTimeMs, totalTimeMs)
ProcessingMetricstype export for callback payload validationuse-analytics.ts
Frontend analytics custom hooksapps/frontend/src/hooks/use-analytics.ts
useAnalyticsOverview,useAnalyticsProcessing,useAnalyticsQualityhooks with period parameter
useAnalyticsDocumentshook with pagination and period supportuseDocumentChunkshook for fetching chunks of specific documentapp.ts
App registration of analytics routesapps/backend/src/app.ts
from new index
use-click-outside.ts
Click outside detection utility hookapps/frontend/src/hooks/use-click-outside.ts
use-chunks.ts
Frontend chunks explorer custom hooksapps/frontend/src/hooks/use-chunks.ts
useChunksListhook with optional filtering parametersuseChunkDetailhook for fetching single chunk with longer cache timepython-worker-mock.ts
Python worker mock metrics supportapps/backend/tests/mocks/python-worker-mock.ts
metricsfield to ProcessingResult interfaceresponses
metrics.py
Metrics collection for processing pipelineapps/ai-worker/src/metrics.py
QualitySummary
to_dict()method converts metrics to callback payload formatmain.py
AI worker metrics collection integrationapps/ai-worker/src/main.py
callback
pptx_converter.py
PPTX converter slide marker constantapps/ai-worker/src/converters/pptx_converter.py
SLIDE_MARKERformaintainability
pipeline.py
Pipeline embedding time measurementapps/ai-worker/src/pipeline.py
run()method to return tuple of (chunks, embedding_time_ms)models.py
Processing result metrics fieldapps/ai-worker/src/models.py
metricsfield to ProcessingResult dataclassepub_converter.py
EPUB converter chapter count trackingapps/ai-worker/src/converters/epub_converter.py
chapter_countfield to ProcessorOutput return valuecallback.py
Callback metrics payload inclusionapps/ai-worker/src/callback.py
metricsfield to callback payload from ProcessingResultpresentation_chunker.py
Presentation chunker slide marker updateapps/ai-worker/src/chunkers/presentation_chunker.py
constantChunkCard.tsx
Chunk card display componentapps/frontend/src/components/chunks/ChunkCard.tsx
visualization
upload-dropzone.tsx
Multi-file batch upload with progress trackingapps/frontend/src/components/documents/upload-dropzone.tsx
concurrent processing (max 3 concurrent, 20 file limit)
useUploadDocumentwith directdocumentsApi.uploadcalls and
useQueryClientfor cache invalidationUploadStatusPopupcomponent displaying real-time upload progresswith status indicators (pending, uploading, success, error)
document list refresh after uploads complete
AnalyticsPage.tsx
New analytics dashboard with pipeline funnel viewapps/frontend/src/components/analytics/AnalyticsPage.tsx
metrics across 5 stages (Upload/Queue, Conversion, Chunking, Quality,
Embedding)
formatted metrics (documents, processing time, quality score, chunks)
flag breakdown in footer
ChunksExplorerPage.tsx
New chunks explorer with detail modalapps/frontend/src/components/chunks/ChunksExplorerPage.tsx
and filtering by search, quality level, and chunk type
ChunkDetailModalcomponent showing full chunk metadata (quality score,tokens, position, breadcrumbs, quality flags, content)
(excellent/good/low scores)
chunksApifor fetching chunks list and individualchunk details
App.tsx
Restructured app navigation with analytics and chunks tabsapps/frontend/src/App.tsx
with logo, main nav, and settings button
analyticsandchunksalongside existing documents,drive, query, and settings
AnalyticsPageandChunksExplorerPagedocument-filters.tsx
Migrate filters to custom Select componentapps/frontend/src/components/documents/document-filters.tsx
elements with custom Select component for consistent styling and functionality Added options definitions for sort, status, availability, connection, and source filters Improved input styling with hover states and focus rings Maintained all existing filter functionality with new component APIpagination.tsx
Enhance pagination with jump-to-page inputapps/frontend/src/components/documents/pagination.tsx
with custom Select component for page size selection Added "jump to page" input field allowing users to type page number and press Enter Improved button styling with transition effects and better visual organization Reorganized pagination controls into logical button groupsselect.tsx
New custom Select component for form inputsapps/frontend/src/components/ui/select.tsx
Selectcomponent with dropdown menu, keyboard support,and optional count badges
useClickOutsidehook, animateddropdown, and selected state highlighting
theming
schema.prisma
Add ProcessingMetrics schema for analytics dataapps/backend/prisma/schema.prisma
ProcessingMetricsmodel to store detailed pipeline metrics(queue time, conversion, chunking, embedding times)
rawSizeBytes,markdownSizeChars), chunkingefficiency, and aggregated quality data
Documentmodel with cascade deleteprocessingMetadataJSON field, marking itfor migration
document-list.tsx
Simplify document list and use Select componentapps/frontend/src/components/documents/document-list.tsx
to parent)
with custom Select component for folder filtering Removed unused imports (RefreshCw) and simplified component structure Maintained all filtering and pagination functionalitysearch-form.tsx
Redesign search form with horizontal layoutapps/frontend/src/components/query/search-form.tsx
layout
with custom Select component for results count selection Improved input styling with search icon and better focus states Moved loading indicator inside input field instead of buttonChunkFilters.tsx
New chunk filters component with search and dropdownsapps/frontend/src/components/chunks/ChunkFilters.tsx
level filter, and chunk type filter
Selectcomponent for quality and type dropdowns withoptional count badges
ChunkFilterStateinterface for type-safe filter managementDriveSyncTab.tsx
Update Drive Sync tab header stylingapps/frontend/src/components/drive/DriveSyncTab.tsx
description
text-xltotext-lgfor consistency with otherpages
FolderSyncicon to header for visual consistency2 files
index.ts
Analytics routes barrel exportapps/backend/src/routes/analytics/index.ts
index.ts
Chunks route barrel exportapps/backend/src/routes/chunks/index.ts
1 files
package.json
Development script and dependenciespackage.json
dev:allscript for running backend, worker, and frontendconcurrently
concurrentlydependency for parallel process managementenvironment
1 files
pnpm-lock.yaml
Add concurrently package dependencypnpm-lock.yaml
concurrently@9.2.1dependency with transitive dependencies(
rxjs,shell-quote,supports-color,tree-kill)trees
2 files
extension-analytics-dashboard.md
Add TDD test specifications to analytics implementation plandocs/extension-analytics-dashboard.md
test-first methodology
Phase 2 (API development), and Phase 4 (E2E tests)
metrics, analytics endpoints, and chunks API
worker and backend tests
extension-hybrid-search.md
New hybrid search implementation plan documentationdocs/extension-hybrid-search.md
(vector) and keyword (BM25) search with RRF reranking
tsvectorcolumn, backend serviceimplementation, API validator changes, and frontend UI updates
manual testing procedures
hour timeline