CircularProgress,
} from '@material-ui/core';
import { ArvadosTheme } from 'common/custom-theme';
-import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon';
+import {
+ CloseIcon,
+ ImageIcon,
+ InputIcon,
+ ImageOffIcon,
+ OutputIcon,
+ MaximizeIcon,
+ UnMaximizeIcon
+} from 'components/icon/icon';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
import {
BooleanCommandInputParameter,
import { Process } from 'store/processes/process';
import { navigateTo } from 'store/navigation/navigation-action';
import classNames from 'classnames';
+import { DefaultCodeSnippet } from 'components/default-code-snippet/default-code-snippet';
type CssRules =
| "card"
| "imagePreview"
| "valArray"
| "secondaryVal"
+ | "secondaryRow"
| "emptyValue"
- | "halfRow"
+ | "noBorderRow"
| "symmetricTabs"
| "imagePlaceholder"
| "rowWithPreview"
},
header: {
paddingTop: theme.spacing.unit,
- paddingBottom: theme.spacing.unit,
+ paddingBottom: 0,
},
iconHeader: {
fontSize: '1.875rem',
content: {
height: `calc(100% - ${theme.spacing.unit * 7}px - ${theme.spacing.unit * 1.5}px)`,
padding: theme.spacing.unit * 1.0,
- paddingTop: theme.spacing.unit * 0.5,
+ paddingTop: 0,
'&:last-child': {
paddingBottom: theme.spacing.unit * 1,
}
secondaryVal: {
paddingLeft: '20px',
},
+ secondaryRow: {
+ height: '29px',
+ verticalAlign: 'top',
+ position: 'relative',
+ top: '-9px',
+ },
emptyValue: {
color: theme.customs.colors.grey500,
},
- halfRow: {
+ noBorderRow: {
'& td': {
borderBottom: 'none',
}
export interface ProcessIOCardDataProps {
process: Process;
label: ProcessIOCardType;
- params?: ProcessIOParameter[];
- raw?: any;
+ params: ProcessIOParameter[] | null;
+ raw: any;
mounts?: InputCollectionMount[];
outputUuid?: string;
}
type ProcessIOCardProps = ProcessIOCardDataProps & ProcessIOCardActionProps & WithStyles<CssRules> & MPVPanelProps;
export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps)(
- ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => {
+ ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => {
const [mainProcTabState, setMainProcTabState] = useState(0);
const handleMainProcTabChange = (event: React.MouseEvent<HTMLElement>, value: number) => {
setMainProcTabState(value);
const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
const mainProcess = !process.containerRequest.requestingContainerUuid;
- const loading = raw === undefined || params === undefined;
+ const loading = raw === null || raw === undefined || params === null;
const hasRaw = !!(raw && Object.keys(raw).length > 0);
const hasParams = !!(params && params.length > 0);
{ mainProcess && <Tooltip title={"Toggle Image Preview"} disableFocusListener>
<IconButton data-cy="io-preview-image-toggle" onClick={() =>{setShowImagePreview(!showImagePreview)}}>{showImagePreview ? <ImageIcon /> : <ImageOffIcon />}</IconButton>
</Tooltip> }
+ { doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip> }
{ doMaximizePanel && !panelMaximized &&
<Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
<ProcessIORaw data={raw} />
</div>}
</>}
- {!loading && raw && Object.keys(raw).length === 0 && <Grid container item alignItems='center' justify='center'>
+ {!loading && !hasRaw && !hasParams && <Grid container item alignItems='center' justify='center'>
<DefaultView messages={["No parameters found"]} />
</Grid>}
</>) :
{data.map((param: ProcessIOParameter) => {
const firstVal = param.value.length > 0 ? param.value[0] : undefined;
const rest = param.value.slice(1);
- const rowClass = rest.length > 0 ? classes.halfRow : undefined;
+ const mainRowClasses = {
+ [classes.noBorderRow]: (rest.length > 0),
+ };
return <>
- <TableRow className={rowClass} data-cy="process-io-param">
+ <TableRow className={classNames(mainRowClasses)} data-cy="process-io-param">
<TableCell>
{param.id}
</TableCell>
</Typography>
</TableCell>
</TableRow>
- {rest.map((val, i) => (
- <TableRow className={(i < rest.length-1) ? rowClass : undefined}>
+ {rest.map((val, i) => {
+ const rowClasses = {
+ [classes.noBorderRow]: (i < rest.length-1),
+ [classes.secondaryRow]: val.secondary,
+ };
+ return <TableRow className={classNames(rowClasses)}>
<TableCell />
{showLabel && <TableCell />}
<TableCell>
</Typography>
</TableCell>
</TableRow>
- ))}
+ })}
</>;
})}
</TableBody>
const ProcessIORaw = withStyles(styles)(
({ data }: ProcessIORawDataProps) =>
<Paper elevation={0}>
- <pre>
- {JSON.stringify(data, null, 2)}
- </pre>
+ <DefaultCodeSnippet lines={[JSON.stringify(data, null, 2)]} linked />
</Paper>
);
case isArrayOfType(input, CWLType.FILE):
const fileArrayMainFiles = ((input as FileArrayCommandInputParameter).value || []);
- const firstMainFilePdh = fileArrayMainFiles.length > 0 ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
+ const firstMainFilePdh = (fileArrayMainFiles.length > 0 && fileArrayMainFiles[0]) ? getResourcePdhUrl(fileArrayMainFiles[0], pdh) : "";
// Convert each main file into separate arrays of ProcessIOValue to preserve secondaryFile grouping
const fileArrayValues = fileArrayMainFiles.map((mainFile: File, i): ProcessIOValue[] => {
const secondaryFiles = ((mainFile as unknown) as FileWithSecondaryFiles)?.secondaryFiles || [];
return [
// Pass firstMainFilePdh to secondary files and every main file besides the first to hide pdh if equal
- fileToProcessIOValue(mainFile, false, auth, pdh, i > 0 ? firstMainFilePdh : ""),
+ ...(mainFile ? [fileToProcessIOValue(mainFile, false, auth, pdh, i > 0 ? firstMainFilePdh : "")] : []),
...(secondaryFiles.map(file => fileToProcessIOValue(file, true, auth, pdh, firstMainFilePdh)))
];
// Reduce each mainFile/secondaryFile group into single array preserving ordering
const keepUrlPath = keepUrlParts.length > 1 ? keepUrlParts.slice(1).join('/') : '';
const keepUrlPathNav = getKeepNavUrl(auth, res, pdh);
- return keepUrlPath && keepUrlPathNav ?
- <Tooltip title={"View in keep-web"}><a className={classes.keepLink} href={keepUrlPathNav} target="_blank" rel="noopener noreferrer">{keepUrlPath}</a></Tooltip> :
- // Show No value for root collection io that lacks path part
+ return keepUrlPathNav ?
+ <Tooltip title={"View in keep-web"}><a className={classes.keepLink} href={keepUrlPathNav} target="_blank" rel="noopener noreferrer">{keepUrlPath || '/'}</a></Tooltip> :
<EmptyValue />;
});
projects / arvados-workbench2.git / blobdiff