Spaces:
Sleeping
Sleeping
| /** | |
| * DatasetPreview component - Display dataset metadata and data table | |
| */ | |
| import React from 'react'; | |
| import { | |
| Box, | |
| Typography, | |
| Paper, | |
| Table, | |
| TableBody, | |
| TableCell, | |
| TableContainer, | |
| TableHead, | |
| TableRow, | |
| Chip, | |
| LinearProgress, | |
| Grid, | |
| Button, | |
| } from '@mui/material'; | |
| import { | |
| Description as FileIcon, | |
| TableChart as TableIcon, | |
| Speed as ScoreIcon, | |
| CalendarToday as DateIcon, | |
| PlayArrow as PlayIcon, | |
| } from '@mui/icons-material'; | |
| import type { Dataset, UploadResponse } from '../types'; | |
| interface DatasetPreviewProps { | |
| dataset: Dataset | UploadResponse | null; | |
| previewData?: Record<string, unknown>[]; | |
| loading?: boolean; | |
| onStartCleaning?: () => void; | |
| } | |
| const DatasetPreview: React.FC<DatasetPreviewProps> = ({ | |
| dataset, | |
| previewData, | |
| loading = false, | |
| onStartCleaning, | |
| }) => { | |
| if (!dataset) { | |
| return null; | |
| } | |
| const formatDate = (dateStr: string): string => { | |
| return new Date(dateStr).toLocaleString(); | |
| }; | |
| const getScoreColor = (score: number): 'success' | 'warning' | 'error' => { | |
| if (score >= 80) return 'success'; | |
| if (score >= 50) return 'warning'; | |
| return 'error'; | |
| }; | |
| const getColumnNames = (): string[] => { | |
| if ('columns' in dataset && Array.isArray(dataset.columns)) { | |
| return dataset.columns; | |
| } | |
| if (previewData && previewData.length > 0) { | |
| return Object.keys(previewData[0]); | |
| } | |
| return []; | |
| }; | |
| const getQualityScore = (): number => { | |
| if ('data_quality_score' in dataset) { | |
| return Math.round((dataset as any).data_quality_score * 100); | |
| } | |
| if ('score' in dataset) { | |
| return (dataset as any).score; | |
| } | |
| return 0; | |
| }; | |
| const columns = getColumnNames(); | |
| const qualityScore = getQualityScore(); | |
| return ( | |
| <Box> | |
| <Typography variant="h5" gutterBottom sx={{ fontWeight: 600 }}> | |
| Dataset Preview | |
| </Typography> | |
| {loading && <LinearProgress sx={{ mb: 2 }} />} | |
| {/* Metadata Cards */} | |
| <Grid container spacing={2} sx={{ mb: 3 }}> | |
| <Grid size={{ xs: 12, sm: 6, md: 3 }}> | |
| <Paper elevation={1} sx={{ p: 2, height: '100%' }}> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}> | |
| <FileIcon color="primary" fontSize="small" /> | |
| <Typography variant="body2" color="textSecondary"> | |
| File Name | |
| </Typography> | |
| </Box> | |
| <Typography variant="body1" sx={{ fontWeight: 500 }} noWrap> | |
| {dataset.filename} | |
| </Typography> | |
| </Paper> | |
| </Grid> | |
| <Grid size={{ xs: 12, sm: 6, md: 3 }}> | |
| <Paper elevation={1} sx={{ p: 2, height: '100%' }}> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}> | |
| <TableIcon color="primary" fontSize="small" /> | |
| <Typography variant="body2" color="textSecondary"> | |
| Dimensions | |
| </Typography> | |
| </Box> | |
| <Typography variant="body1" sx={{ fontWeight: 500 }}> | |
| {dataset.rows.toLocaleString()} rows × {columns.length} cols | |
| </Typography> | |
| </Paper> | |
| </Grid> | |
| <Grid size={{ xs: 12, sm: 6, md: 3 }}> | |
| <Paper elevation={1} sx={{ p: 2, height: '100%' }}> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}> | |
| <ScoreIcon color="primary" fontSize="small" /> | |
| <Typography variant="body2" color="textSecondary"> | |
| Quality Score | |
| </Typography> | |
| </Box> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> | |
| <Typography variant="body1" sx={{ fontWeight: 500 }}> | |
| {qualityScore}% | |
| </Typography> | |
| <Chip | |
| label={qualityScore >= 80 ? 'Good' : qualityScore >= 50 ? 'Fair' : 'Poor'} | |
| color={getScoreColor(qualityScore)} | |
| size="small" | |
| /> | |
| </Box> | |
| </Paper> | |
| </Grid> | |
| <Grid size={{ xs: 12, sm: 6, md: 3 }}> | |
| <Paper elevation={1} sx={{ p: 2, height: '100%' }}> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 1 }}> | |
| <DateIcon color="primary" fontSize="small" /> | |
| <Typography variant="body2" color="textSecondary"> | |
| Uploaded | |
| </Typography> | |
| </Box> | |
| <Typography variant="body1" sx={{ fontWeight: 500 }}> | |
| {'uploadedAt' in dataset ? formatDate(dataset.uploadedAt) : 'Just now'} | |
| </Typography> | |
| </Paper> | |
| </Grid> | |
| </Grid> | |
| {/* Data Quality Progress */} | |
| <Paper elevation={1} sx={{ p: 2, mb: 3 }}> | |
| <Typography variant="subtitle2" gutterBottom> | |
| Data Quality | |
| </Typography> | |
| <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}> | |
| <Box sx={{ flex: 1 }}> | |
| <LinearProgress | |
| variant="determinate" | |
| value={qualityScore} | |
| color={getScoreColor(qualityScore)} | |
| sx={{ height: 10, borderRadius: 5 }} | |
| /> | |
| </Box> | |
| <Typography variant="body2" sx={{ fontWeight: 500 }}> | |
| {qualityScore}% Clean | |
| </Typography> | |
| </Box> | |
| <Typography variant="caption" color="textSecondary" sx={{ mt: 1, display: 'block' }}> | |
| {100 - qualityScore}% issues detected that need cleaning | |
| </Typography> | |
| </Paper> | |
| {/* Column Names */} | |
| <Paper elevation={1} sx={{ p: 2, mb: 3 }}> | |
| <Typography variant="subtitle2" gutterBottom> | |
| Columns ({columns.length}) | |
| </Typography> | |
| <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}> | |
| {columns.map((col) => ( | |
| <Chip key={col} label={col} variant="outlined" size="small" /> | |
| ))} | |
| </Box> | |
| </Paper> | |
| {/* Data Preview Table */} | |
| {previewData && previewData.length > 0 && ( | |
| <Paper elevation={1}> | |
| <Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}> | |
| <Typography variant="subtitle2"> | |
| Preview (First {Math.min(previewData.length, 5)} rows) | |
| </Typography> | |
| </Box> | |
| <TableContainer sx={{ maxHeight: 300 }}> | |
| <Table size="small" stickyHeader> | |
| <TableHead> | |
| <TableRow> | |
| {columns.map((col) => ( | |
| <TableCell key={col} sx={{ fontWeight: 600 }}> | |
| {col} | |
| </TableCell> | |
| ))} | |
| </TableRow> | |
| </TableHead> | |
| <TableBody> | |
| {previewData.slice(0, 5).map((row, rowIndex) => ( | |
| <TableRow key={rowIndex} hover> | |
| {columns.map((col) => ( | |
| <TableCell key={col} sx={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}> | |
| {row[col] !== undefined && row[col] !== null | |
| ? String(row[col]) | |
| : <Typography color="textSecondary" sx={{ fontStyle: 'italic' }}>null</Typography>} | |
| </TableCell> | |
| ))} | |
| </TableRow> | |
| ))} | |
| </TableBody> | |
| </Table> | |
| </TableContainer> | |
| </Paper> | |
| )} | |
| {/* Empty State */} | |
| {!previewData && ( | |
| <Paper elevation={1} sx={{ p: 4, textAlign: 'center' }}> | |
| <TableIcon sx={{ fontSize: 48, color: 'textSecondary', mb: 1 }} /> | |
| <Typography variant="body1" color="textSecondary"> | |
| No preview data available | |
| </Typography> | |
| </Paper> | |
| )} | |
| {/* Start Cleaning Button */} | |
| {onStartCleaning && ( | |
| <Box sx={{ mt: 3, display: 'flex', gap: 2 }}> | |
| <Button | |
| variant="contained" | |
| color="primary" | |
| startIcon={<PlayIcon />} | |
| onClick={onStartCleaning} | |
| size="large" | |
| > | |
| Start Cleaning | |
| </Button> | |
| </Box> | |
| )} | |
| </Box> | |
| ); | |
| }; | |
| export default DatasetPreview; | |