Skip to content

Commit

Permalink
Add reduction status icons
Browse files Browse the repository at this point in the history 
Removes the colored rows implementation
  • Loading branch information
@Dagonite
Dagonite committed Mar 13, 2024
1 parent 4a5387e commit 6ad8e18
Showing 1 changed file with 60 additions and 45 deletions.
105 changes: 60 additions & 45 deletions src/ReductionHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,13 @@ import {
InputLabel,
SelectChangeEvent,
Box,
Tooltip,
styled,
} from '@mui/material';
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import WarningAmberIcon from '@mui/icons-material/WarningAmber';
import { instruments } from './InstrumentData';

interface Run {
Expand Down Expand Up @@ -135,33 +140,48 @@ const ReductionHistory: React.FC = () => {
return fileName;
};

const formatReductionStatus = (status: string, statusMessage: string): string => {
let formattedSatatus = status;
if (status === 'NOT_STARTED') {
formattedSatatus = 'NOT STARTED';
}

if (statusMessage && statusMessage.trim().length > 0) {
formattedSatatus += ` - ${statusMessage}`;
}
const ReductionStatusIcon = ({ state, statusMessage }: { state: string; statusMessage: string }): JSX.Element => {
let IconComponent;
let color;

return formattedSatatus;
};

const getStatusColor = (state: string): string => {
switch (state) {
case 'UNSUCCESSFUL':
case 'ERROR':
return '#F88888'; // Light red background
IconComponent = ErrorOutlineIcon;
color = 'red';
break;
case 'SUCCESSFUL':
return '#9BE19B'; // Light green background
IconComponent = CheckCircleOutlineIcon;
color = 'green';
break;
case 'UNSUCCESSFUL':
IconComponent = WarningAmberIcon;
color = 'orange';
break;
case 'NOT_STARTED':
return '#F9F995'; // Light yellow background
IconComponent = HighlightOffIcon;
color = 'grey';
break;
default:
return 'inherit'; // Default background color
IconComponent = ErrorOutlineIcon;
color = 'disabled';
statusMessage = 'Unknown status';
}
return (
<Tooltip title={statusMessage}>
<div>
<IconComponent style={{ color }} />
</div>
</Tooltip>
);
};

const StyledTableCell = styled(TableCell)(({ theme }) => ({
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
minWidth: 160,
}));

return (
<div style={{ padding: '20px' }}>
<Box display="flex" alignItems="center" justifyContent="space-between" marginBottom="20px">
Expand Down Expand Up @@ -190,89 +210,84 @@ const ReductionHistory: React.FC = () => {
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
<TableCell></TableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'experiment_number'}
direction={orderBy === 'experiment_number' ? orderDirection : 'asc'}
onClick={() => handleSort('experiment_number')}
>
Experiment Number
</TableSortLabel>
</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'filename'}
direction={orderBy === 'filename' ? orderDirection : 'asc'}
onClick={() => handleSort('filename')}
>
Reduction Input
</TableSortLabel>
</TableCell>
<TableCell>
<TableSortLabel
active={orderBy === 'reduction_state'}
direction={orderBy === 'reduction_state' ? orderDirection : 'asc'}
onClick={() => handleSort('reduction_state')}
>
Reduction Status
</TableSortLabel>
</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'run_start'}
direction={orderBy === 'run_start' ? orderDirection : 'asc'}
onClick={() => handleSort('run_start')}
>
Run Start
</TableSortLabel>
</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'run_end'}
direction={orderBy === 'run_end' ? orderDirection : 'asc'}
onClick={() => handleSort('run_end')}
>
Run End
</TableSortLabel>
</TableCell>
<TableCell>Title</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>Title</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'reduction_start'}
direction={orderBy === 'reduction_start' ? orderDirection : 'asc'}
onClick={() => handleSort('reduction_start')}
>
Reduction Start
</TableSortLabel>
</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'reduction_end'}
direction={orderBy === 'reduction_end' ? orderDirection : 'asc'}
onClick={() => handleSort('reduction_end')}
>
Reduction End
</TableSortLabel>
</TableCell>
<TableCell>
</StyledTableCell>
<StyledTableCell>
<TableSortLabel
active={orderBy === 'reduction_outputs'}
direction={orderBy === 'reduction_outputs' ? orderDirection : 'asc'}
onClick={() => handleSort('reduction_outputs')}
>
Reduction Outputs
</TableSortLabel>
</TableCell>
</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
{reductions.map((reduction, index) => (
<StyledTableRow key={index}>
<TableCell>
<ReductionStatusIcon
state={reduction.reduction_state}
statusMessage={reduction.reduction_status_message}
/>
</TableCell>
<TableCell>{reduction.runs[0].experiment_number}</TableCell>
<TableCell>{extractFileName(reduction.runs[0].filename)}</TableCell>
<TableCell style={{ backgroundColor: getStatusColor(reduction.reduction_state) }}>
{formatReductionStatus(reduction.reduction_state, reduction.reduction_status_message)}
</TableCell>
<TableCell>{formatDateTime(reduction.runs[0].run_start)}</TableCell>
<TableCell>{formatDateTime(reduction.runs[0].run_end)}</TableCell>
<TableCell>{reduction.runs[0].title}</TableCell>
Expand Down

0 comments on commit 6ad8e18

Please sign in to comment.