Skip to content

Commit 9fe72c2

Browse files
DagoniteDagonite
authored
Fix table columns and rows altering (#422)
* Add widths note * Fix column widths and row heights * Add run details mapper * Use wrapper function
1 parent 7de6af3 commit 9fe72c2

File tree

3 files changed

+140
-100
lines changed

3 files changed

+140
-100
lines changed

‎src/Jobs/JobsAll.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const JobsAll: React.FC = () => {
1616
const [jobs, setJobs] = useState<Job[]>([]);
1717
const [totalRows, setTotalRows] = useState(0);
1818
const [currentPage, setCurrentPage] = useState(0);
19-
const [rowsPerPage, setRowsPerPage] = useState(10);
19+
const [rowsPerPage, setRowsPerPage] = useState(25);
2020
const [orderDirection, setOrderDirection] = useState<'asc' | 'desc'>('desc');
2121
const [selectedInstrument, setSelectedInstrument] = useState(instrumentName || 'ALL');
2222
const [orderBy, setOrderBy] = useState<string>('run_start');

‎src/Jobs/JobsBase.tsx

Lines changed: 138 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -281,10 +281,8 @@ const JobsBase: React.FC<JobsBaseProps> = ({
281281
<Typography
282282
variant="body2"
283283
sx={{
284-
overflow: 'hidden',
285-
textOverflow: 'ellipsis',
286-
whiteSpace: 'nowrap',
287-
maxWidth: '240px',
284+
...ellipsisWrap,
285+
maxWidth: `calc(${ellipsisWrap.maxWidth} + 60px)`,
288286
}}
289287
title={output}
290288
>
@@ -353,13 +351,17 @@ const JobsBase: React.FC<JobsBaseProps> = ({
353351
variant="body2"
354352
sx={{
355353
fontWeight: 'bold',
356-
marginRight: '4px',
354+
marginRight: '16px',
357355
whiteSpace: 'nowrap', // Stops the key from wrapping
358356
}}
359357
>
360358
{key}:
361359
</Typography>
362-
<Typography variant="body2" sx={{ flex: '1 1 auto' }}>
360+
<Typography
361+
variant="body2"
362+
title={String(value)}
363+
sx={{ flex: '1 1 auto', ...ellipsisWrap, maxWidth: `calc(${ellipsisWrap.maxWidth} + 300px)` }}
364+
>
363365
{value}
364366
</Typography>
365367
</Box>
@@ -416,7 +418,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
416418
});
417419
};
418420

419-
const rowStyles = {
421+
const bandedRows = {
420422
backgroundColor:
421423
index % 2 === 0
422424
? theme.palette.mode === 'light'
@@ -427,7 +429,7 @@ const JobsBase: React.FC<JobsBaseProps> = ({
427429
: theme.palette.background.default, // Odd rows (default background color)
428430
};
429431

430-
const hoverStyles = (theme: Theme, index: number): React.CSSProperties => {
432+
const bandedRowsHover = (theme: Theme, index: number): React.CSSProperties => {
431433
return {
432434
backgroundColor:
433435
theme.palette.mode === 'light'
@@ -440,11 +442,50 @@ const JobsBase: React.FC<JobsBaseProps> = ({
440442
};
441443
};
442444

445+
const ellipsisWrap = {
446+
whiteSpace: 'nowrap',
447+
overflow: 'hidden',
448+
textOverflow: 'ellipsis',
449+
maxWidth: '200px',
450+
};
451+
443452
const formatJobType = (jobType: string): string => {
444453
const formattedType = jobType.replace('JobType.', '');
445454
return formattedType.charAt(0).toUpperCase() + formattedType.slice(1).toLowerCase();
446455
};
447456

457+
const runDetails = [
458+
{ icon: <VpnKey fontSize="small" />, label: 'Reduction ID:', value: job.id },
459+
{ icon: <WorkOutline fontSize="small" />, label: 'Job type:', value: job.type ? formatJobType(job.type) : 'N/A' },
460+
{
461+
icon: <ImageAspectRatio fontSize="small" />,
462+
label: 'Runner image:',
463+
value: job.runner_image || 'N/A',
464+
},
465+
{ icon: <Schema fontSize="small" />, label: 'Instrument:', value: job.run?.instrument_name || 'N/A' },
466+
{
467+
icon: <Schedule fontSize="small" />,
468+
label: 'Reduction start:',
469+
value: formatDateTime(job.start) || 'N/A',
470+
},
471+
{
472+
icon: <Schedule fontSize="small" />,
473+
label: 'Reduction end:',
474+
value: formatDateTime(job.end) || 'N/A',
475+
},
476+
{
477+
icon: <StackedBarChart fontSize="small" />,
478+
label: 'Good frames:',
479+
value: job.run?.good_frames?.toLocaleString() || 'N/A',
480+
},
481+
{
482+
icon: <StackedBarChart fontSize="small" />,
483+
label: 'Raw frames:',
484+
value: job.run?.raw_frames?.toLocaleString() || 'N/A',
485+
},
486+
{ icon: <People fontSize="small" />, label: 'Users:', value: job.run?.users || 'N/A' },
487+
];
488+
448489
return (
449490
<>
450491
<Snackbar
@@ -479,28 +520,82 @@ const JobsBase: React.FC<JobsBaseProps> = ({
479520
</Alert>
480521
</Snackbar>
481522

482-
<TableRow sx={{ ...rowStyles, '&:hover': hoverStyles(theme, index) }} onClick={() => setOpen(!open)}>
483-
<TableCell sx={{ width: '4%' }}>
523+
<TableRow
524+
sx={{
525+
...bandedRows,
526+
height: '50px',
527+
'&:hover': bandedRowsHover(theme, index),
528+
}}
529+
onClick={() => setOpen(!open)}
530+
>
531+
<TableCell>
484532
<IconButton aria-label="expand row" size="small">
485533
{open ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
486534
</IconButton>
487535
</TableCell>
488-
<TableCell sx={{ width: '4%' }}>
536+
<TableCell
537+
sx={{
538+
...ellipsisWrap,
539+
}}
540+
>
489541
<JobStatus state={job.state} />
490542
</TableCell>
491-
<TableCell sx={{ width: '12%' }}>{job.run?.experiment_number || 'N/A'}</TableCell>
492-
<TableCell sx={{ width: '10%' }}>{extractFileName(job.run?.filename || 'N/A')}</TableCell>
493-
<TableCell sx={{ width: '15%' }}>{formatDateTime(job.run?.run_start || 'N/A')}</TableCell>
494-
<TableCell sx={{ width: '15%' }}>{formatDateTime(job.run?.run_end || 'N/A')}</TableCell>
495-
<TableCell sx={{ width: '15%' }}>{job.start ? formatDateTime(job.start) : 'N/A'}</TableCell>
496-
<TableCell sx={{ width: '15%' }}>{job.end ? formatDateTime(job.end) : 'N/A'}</TableCell>
497-
<TableCell sx={{ width: '32%' }}>{job.run?.title || 'N/A'}</TableCell>
543+
<TableCell
544+
sx={{
545+
...ellipsisWrap,
546+
}}
547+
>
548+
{job.run?.experiment_number || 'N/A'}
549+
</TableCell>
550+
<TableCell
551+
sx={{
552+
...ellipsisWrap,
553+
}}
554+
>
555+
{extractFileName(job.run?.filename || 'N/A')}
556+
</TableCell>
557+
<TableCell
558+
sx={{
559+
...ellipsisWrap,
560+
}}
561+
>
562+
{formatDateTime(job.run?.run_start || 'N/A')}
563+
</TableCell>
564+
<TableCell
565+
sx={{
566+
...ellipsisWrap,
567+
}}
568+
>
569+
{formatDateTime(job.run?.run_end || 'N/A')}
570+
</TableCell>
571+
<TableCell
572+
sx={{
573+
...ellipsisWrap,
574+
}}
575+
>
576+
{formatDateTime(job.start) || 'N/A'}
577+
</TableCell>
578+
<TableCell
579+
sx={{
580+
...ellipsisWrap,
581+
}}
582+
>
583+
{formatDateTime(job.end) || 'N/A'}
584+
</TableCell>
585+
<TableCell
586+
sx={{
587+
...ellipsisWrap,
588+
}}
589+
>
590+
{job.run?.title || 'N/A'}
591+
</TableCell>
498592
{customRowCells && customRowCells(job)}
499593
</TableRow>
594+
500595
<TableRow>
501596
<TableCell
502597
colSpan={totalColumnCount}
503-
style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: rowStyles.backgroundColor }}
598+
style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: bandedRows.backgroundColor }}
504599
>
505600
<Collapse in={open} timeout="auto" unmountOnExit>
506601
<Box margin={2}>
@@ -534,80 +629,25 @@ const JobsBase: React.FC<JobsBaseProps> = ({
534629
<Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
535630
Run details
536631
</Typography>
537-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
538-
<VpnKey fontSize="small" style={{ marginRight: '8px' }} />
539-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
540-
Reduction ID:
541-
</Typography>
542-
<Typography variant="body2">{job.id}</Typography>
543-
</Box>
544-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
545-
<WorkOutline fontSize="small" style={{ marginRight: '8px' }} />
546-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
547-
Job type:
548-
</Typography>
549-
<Typography variant="body2">{job.type ? formatJobType(job.type) : 'N/A'}</Typography>
550-
</Box>
551-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
552-
<ImageAspectRatio fontSize="small" style={{ marginRight: '8px' }} />
553-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
554-
Runner image:
555-
</Typography>
556-
<Typography
557-
variant="body2"
632+
{runDetails.map(({ icon, label, value }, index) => (
633+
<Box
634+
key={index}
558635
sx={{
559-
whiteSpace: 'nowrap',
560-
overflow: 'hidden',
561-
textOverflow: 'ellipsis',
562-
maxWidth: '200px',
636+
display: 'flex',
637+
alignItems: 'center',
638+
gap: 1,
639+
marginBottom: '4px',
563640
}}
564-
title={job.runner_image}
565641
>
566-
{job.runner_image ? job.runner_image : 'N/A'}
567-
</Typography>
568-
</Box>
569-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
570-
<Schema fontSize="small" style={{ marginRight: '8px' }} />
571-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
572-
Instrument:
573-
</Typography>
574-
<Typography variant="body2">{job.run?.instrument_name || 'N/A'}</Typography>
575-
</Box>
576-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
577-
<Schedule fontSize="small" style={{ marginRight: '8px' }} />
578-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
579-
Reduction start:
580-
</Typography>
581-
<Typography variant="body2">{job.start ? formatDateTime(job.start) : 'N/A'}</Typography>
582-
</Box>
583-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
584-
<Schedule fontSize="small" style={{ marginRight: '8px' }} />
585-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
586-
Reduction end:
587-
</Typography>
588-
<Typography variant="body2">{job.end ? formatDateTime(job.end) : 'N/A'}</Typography>
589-
</Box>
590-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
591-
<StackedBarChart fontSize="small" style={{ marginRight: '8px' }} />
592-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
593-
Good frames:
594-
</Typography>
595-
<Typography variant="body2">{job.run?.good_frames?.toLocaleString() || 'N/A'}</Typography>
596-
</Box>
597-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
598-
<StackedBarChart fontSize="small" style={{ marginRight: '8px' }} />
599-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
600-
Raw frames:
601-
</Typography>
602-
<Typography variant="body2">{job.run?.raw_frames?.toLocaleString() || 'N/A'}</Typography>
603-
</Box>
604-
<Box sx={{ display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
605-
<People fontSize="small" style={{ marginRight: '8px' }} />
606-
<Typography variant="body2" sx={{ fontWeight: 'bold', marginRight: '4px' }}>
607-
Users:
608-
</Typography>
609-
<Typography variant="body2">{job.run?.users || 'N/A'}</Typography>
610-
</Box>
642+
{React.cloneElement(icon, { sx: { mr: 1, flexShrink: 0 } })}
643+
<Typography variant="body2" sx={{ fontWeight: 'bold', mr: 1, display: 'inline' }}>
644+
{label}
645+
</Typography>
646+
<Typography variant="body2" sx={{ ...ellipsisWrap, display: 'inline' }} title={String(value)}>
647+
{value}
648+
</Typography>
649+
</Box>
650+
))}
611651
</Grid>
612652
<Grid size={5}>
613653
<Typography variant="h6" gutterBottom sx={{ fontWeight: 'bold' }}>
@@ -715,10 +755,10 @@ const JobsBase: React.FC<JobsBaseProps> = ({
715755
onRowsPerPageChange={handleChangeRowsPerPage}
716756
/>
717757
<TableContainer component={Paper} style={{ maxHeight, overflowY: 'scroll' }}>
718-
<Table stickyHeader>
758+
<Table stickyHeader sx={{ tableLayout: 'fixed', width: '100%' }}>
719759
<TableHead>
720760
<TableRow>
721-
<TableCell sx={{ ...headerStyles(theme), width: '4%' }} colSpan={2}>
761+
<TableCell sx={{ ...headerStyles(theme), width: '10%' }} colSpan={2}>
722762
{selectedInstrument}
723763
</TableCell>
724764
<TableCell
@@ -727,22 +767,22 @@ const JobsBase: React.FC<JobsBaseProps> = ({
727767
>
728768
Experiment number {orderBy === 'experiment_number' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
729769
</TableCell>
730-
<TableCell sx={{ width: '10%', ...headerStyles(theme) }} onClick={() => handleSort('filename')}>
770+
<TableCell sx={{ width: '8%', ...headerStyles(theme) }} onClick={() => handleSort('filename')}>
731771
Filename {orderBy === 'filename' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
732772
</TableCell>
733-
<TableCell sx={{ width: '15%', ...headerStyles(theme) }} onClick={() => handleSort('run_start')}>
773+
<TableCell sx={{ width: '12%', ...headerStyles(theme) }} onClick={() => handleSort('run_start')}>
734774
Run start {orderBy === 'run_start' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
735775
</TableCell>
736-
<TableCell sx={{ width: '15%', ...headerStyles(theme) }} onClick={() => handleSort('run_end')}>
776+
<TableCell sx={{ width: '12%', ...headerStyles(theme) }} onClick={() => handleSort('run_end')}>
737777
Run end {orderBy === 'run_end' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
738778
</TableCell>
739-
<TableCell sx={{ width: '15%', ...headerStyles(theme) }} onClick={() => handleSort('start')}>
779+
<TableCell sx={{ width: '12%', ...headerStyles(theme) }} onClick={() => handleSort('start')}>
740780
Job start {orderBy === 'start' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
741781
</TableCell>
742-
<TableCell sx={{ width: '15%', ...headerStyles(theme) }} onClick={() => handleSort('end')}>
782+
<TableCell sx={{ width: '12%', ...headerStyles(theme) }} onClick={() => handleSort('end')}>
743783
Job end {orderBy === 'end' ? (orderDirection === 'asc' ? '↑' : '↓') : ''}
744784
</TableCell>
745-
<TableCell sx={{ width: '32%', ...headerStyles(theme) }}>Title</TableCell>
785+
<TableCell sx={{ width: '24%', ...headerStyles(theme) }}>Title</TableCell>
746786
{customHeaders && customHeaders}
747787
</TableRow>
748788
</TableHead>

‎src/Jobs/JobsGeneral.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const JobsGeneral: React.FC = () => {
1818
const [totalRows, setTotalRows] = useState(0);
1919
const [selectedInstrument, setSelectedInstrument] = useState(instrumentName);
2020
const [currentPage, setCurrentPage] = useState(0);
21-
const [rowsPerPage, setRowsPerPage] = useState(10);
21+
const [rowsPerPage, setRowsPerPage] = useState(25);
2222
const [orderDirection, setOrderDirection] = useState<'asc' | 'desc'>('desc');
2323
const [orderBy, setOrderBy] = useState<string>('run_start');
2424
const offset = currentPage * rowsPerPage;

0 commit comments

Comments
 (0)