| "tableWrapper"
| "paramTableRoot"
| "mountsTableRoot"
- | "rowStyles"
- | "valueWrapper"
| "value"
| "keepLink"
| "collectionLink"
flexDirection: "column",
alignItems: "start", // Prevents scroll bars at different levels in json tab
},
+
+ // Param table virtual list styles
paramTableRoot: {
display: "flex",
flexDirection: "column",
overflow: "hidden",
-
// Flex header
"& thead tr": {
alignItems: "end",
flexGrow: 2,
},
},
- // Flex body cells
- "& > tbody tr td": {
- padding: "4px 25px 4px",
- overflow: "auto hidden",
- display: "flex",
- flexDirection: "row",
- alignItems: "center",
- whiteSpace: "nowrap",
+ // Flex body rows
+ "& tbody tr": {
+ height: "40px",
+ // Flex body cells
+ "& td": {
+ padding: "2px 25px 2px",
+ overflow: "hidden",
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ whiteSpace: "nowrap",
+ '& pre': {
+ margin: 0,
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ },
+ },
},
},
mountsTableRoot: {
paddingRight: "25px",
},
},
- // Virtual list row styles
- rowStyles: {
- height: "40px",
- "& td": {
- paddingTop: "2px",
- paddingBottom: "2px",
- },
- },
- // Cell typography
- valueWrapper: {
- display: "flex",
- alignItems: "center",
- flexDirection: "row",
- height: "100%",
- overflow: "hidden",
- '& pre': {
- margin: 0,
- },
- },
+ // Cell typography styles
value: {
- display: "flex",
- gap: "10px",
- flexWrap: "wrap",
maxWidth: "100%",
- maxHeight: "100%",
whiteSpace: "nowrap",
- "& span": {
- display: "inline",
- },
- "& a, & pre": {
- overflow: "hidden",
- textOverflow: "ellipsis",
- },
+ overflow: "hidden",
+ textOverflow: "ellipsis",
},
keepLink: {
color: theme.palette.primary.main,
const rowClasses = {
[classes.noBorderRow]: hasMoreValues(index),
- [classes.rowStyles]: true,
};
return <TableRow style={style} className={classNames(rowClasses)}>
- <TableCell>{param.id}</TableCell>
- {showLabel && <TableCell>{param.label}</TableCell>}
+ <TableCell>
+ <Typography className={classes.value}>
+ {param.id}
+ </Typography>
+ </TableCell>
+ {showLabel && <TableCell>
+ <Typography className={classes.value}>
+ {param.label}
+ </Typography>
+ </TableCell>}
<TableCell>
<ProcessValuePreview
value={param.value}
/>
</TableCell>
<TableCell>
- <Typography className={classes.valueWrapper}>
- <span className={classes.value}>
- {param.value.collection}
- </span>
+ <Typography className={classes.value}>
+ {param.value.collection}
</Typography>
</TableCell>
</TableRow>;
}
const ProcessValuePreview = withStyles(styles)(({ value, showImagePreview, classes }: ProcessValuePreviewProps & WithStyles<CssRules>) => (
- <Typography className={classes.valueWrapper}>
- <span className={classNames(classes.value, value.secondary && classes.secondaryVal)}>{value.display}</span>
+ <Typography className={classNames(classes.value, value.secondary && classes.secondaryVal)}>
+ {value.display}
</Typography>
));
<Chip
key={value}
label={String(value)}
+ style={{marginRight: "10px"}}
/>
) : (
<pre key={value}>{String(value)}</pre>