| "symmetricTabs"
| "imagePlaceholder"
| "rowWithPreview"
- | "labelColumn";
+ | "labelColumn"
+ | "primaryRow";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
card: {
},
tableWrapper: {
height: "auto",
- maxHeight: `calc(100% - ${theme.spacing.unit * 4.5}px)`,
+ maxHeight: `calc(100% - ${theme.spacing.unit * 3}px)`,
overflow: "auto",
},
tableRoot: {
paddingLeft: "20px",
},
secondaryRow: {
- height: "29px",
+ height: "24px",
verticalAlign: "top",
position: "relative",
- top: "-9px",
+ top: "-4px",
},
emptyValue: {
color: theme.customs.colors.grey700,
noBorderRow: {
"& td": {
borderBottom: "none",
+ paddingTop: "2px",
+ paddingBottom: "2px",
},
+ height: "24px",
},
symmetricTabs: {
"& button": {
labelColumn: {
minWidth: "120px",
},
+ primaryRow: {
+ height: "24px",
+ "& td": {
+ paddingTop: "2px",
+ paddingBottom: "2px",
+ },
+ },
});
export enum ProcessIOCardType {
- INPUT = "Inputs",
- OUTPUT = "Outputs",
+ INPUT = "Input Parameters",
+ OUTPUT = "Output Parameters",
}
export interface ProcessIOCardDataProps {
process?: Process;
raw: any;
mounts?: InputCollectionMount[];
outputUuid?: string;
- showParams?: boolean;
+ forceShowParams?: boolean;
}
export interface ProcessIOCardActionProps {
panelName,
process,
navigateTo,
- showParams,
+ forceShowParams,
}: ProcessIOCardProps) => {
const [mainProcTabState, setMainProcTabState] = useState(0);
const [subProcTabState, setSubProcTabState] = useState(0);
const PanelIcon = label === ProcessIOCardType.INPUT ? InputIcon : OutputIcon;
const mainProcess = !(process && process!.containerRequest.requestingContainerUuid);
+ const showParamTable = mainProcess || forceShowParams;
const loading = raw === null || raw === undefined || params === null;
+
const hasRaw = !!(raw && Object.keys(raw).length > 0);
const hasParams = !!(params && params.length > 0);
+ // isRawLoaded allows subprocess panel to display raw even if it's {}
+ const isRawLoaded = !!(raw && Object.keys(raw).length >= 0);
// Subprocess
const hasInputMounts = !!(label === ProcessIOCardType.INPUT && mounts && mounts.length);
const hasOutputCollecton = !!(label === ProcessIOCardType.OUTPUT && outputUuid);
+ // Subprocess should not show loading if hasOutputCollection or hasInputMounts
+ const subProcessLoading = loading && !hasOutputCollecton && !hasInputMounts;
return (
<Card
}
/>
<CardContent className={classes.content}>
- {mainProcess || showParams ? (
+ {showParamTable ? (
<>
{/* raw is undefined until params are loaded */}
{loading && (
</Grid>
)}
{/* Once loaded, either raw or params may still be empty
- * Raw when all params are empty
- * Params when raw is provided by containerRequest properties but workflow mount is absent for preview
- */}
+ * Raw when all params are empty
+ * Params when raw is provided by containerRequest properties but workflow mount is absent for preview
+ */}
{!loading && (hasRaw || hasParams) && (
<>
<Tabs
>
{/* params will be empty on processes without workflow definitions in mounts, so we only show raw */}
{hasParams && <Tab label="Parameters" />}
- {!showParams && <Tab label="JSON" />}
+ {!forceShowParams && <Tab label="JSON" />}
+ {hasOutputCollecton && <Tab label="Collection" />}
</Tabs>
{mainProcTabState === 0 && params && hasParams && (
<div className={classes.tableWrapper}>
<ProcessIOPreview
data={params}
showImagePreview={showImagePreview}
- valueLabel={showParams ? "Default value" : "Value"}
+ valueLabel={forceShowParams ? "Default value" : "Value"}
/>
</div>
)}
<ProcessIORaw data={raw} />
</div>
)}
+ {mainProcTabState === 2 && hasOutputCollecton && (
+ <>
+ {outputUuid && (
+ <Typography className={classes.collectionLink}>
+ Output Collection:{" "}
+ <MuiLink
+ className={classes.keepLink}
+ onClick={() => {
+ navigateTo(outputUuid || "");
+ }}
+ >
+ {outputUuid}
+ </MuiLink>
+ </Typography>
+ )}
+ <ProcessOutputCollectionFiles
+ isWritable={false}
+ currentItemUuid={outputUuid}
+ />
+ </>
+ )}
+
</>
)}
{!loading && !hasRaw && !hasParams && (
) : (
// Subprocess
<>
- {loading && (
+ {subProcessLoading ? (
<Grid
container
item
>
<CircularProgress />
</Grid>
- )}
- {!loading && (hasInputMounts || hasOutputCollecton || hasRaw) ? (
+ ) : !subProcessLoading && (hasInputMounts || hasOutputCollecton || isRawLoaded) ? (
<>
<Tabs
value={subProcTabState}
>
{hasInputMounts && <Tab label="Collections" />}
{hasOutputCollecton && <Tab label="Collection" />}
- <Tab label="JSON" />
+ {isRawLoaded && <Tab label="JSON" />}
</Tabs>
<div className={classes.tableWrapper}>
{subProcTabState === 0 && hasInputMounts && <ProcessInputMounts mounts={mounts || []} />}
/>
</>
)}
- {(subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
+ {isRawLoaded && (subProcTabState === 1 || (!hasInputMounts && !hasOutputCollecton)) && (
<div className={classes.tableWrapper}>
<ProcessIORaw data={raw} />
</div>
const rest = param.value.slice(1);
const mainRowClasses = {
[classes.noBorderRow]: rest.length > 0,
+ [classes.primaryRow]: true
};
return (
const rowClasses = {
[classes.noBorderRow]: i < rest.length - 1,
[classes.secondaryRow]: val.secondary,
+ [classes.primaryRow]: !val.secondary,
};
return (
<TableRow
className={classes.keepLink}
href={keepUrlPathNav}
target="_blank"
- rel="noopener noreferrer"
+ rel="noopener"
>
{keepUrlPath || "/"}
</a>
<MuiLink
href={file.location}
target="_blank"
+ rel="noopener"
>
{file.location}
</MuiLink>