Skip to content

Commit

Permalink
Updated flow tables to DataGrids
Browse files Browse the repository at this point in the history
  • Loading branch information
@joaquinvanschoren
joaquinvanschoren committed Jan 15, 2024
1 parent 1b1a8aa commit 18dd4b1
Show file tree
Hide file tree
Showing 4 changed files with 304 additions and 171 deletions.
53 changes: 53 additions & 0 deletions app/src/components/pages/flow/DependencyTable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import * as React from "react";
import Box from "@mui/material/Box";
import { DataGrid } from "@mui/x-data-grid";
import { Card, CardContent, Typography } from "@mui/material";

const columns = [
{ field: "library", headerName: "Library", width: 120 },
{ field: "version", headerName: "Version", width: 90 },
];

const DependencyTable = ({ data }) => {
// Split on ',' and '/n'
const rows = data.split(/[,\n]+/).map((dependency) => {
// Split on '==', '<=', '>=', '<', '>', and '_'
const match = dependency.match(/([<>]?=|_)/);
const index = match ? dependency.indexOf(match[0]) : -1;

// Extract the library and version based on the index of the version specifier
const library = index > -1 ? dependency.substring(0, index) : dependency;
const version = index > -1 ? dependency.substring(index) : "";

return {
library: library,
version: version.replace(/_/g, "").replace(/([=><]+)([^ ])/, "$1 $2"),
};
});

return (
<Card>
<CardContent>
<Typography variant="h4" mb={6}>
{rows.length + " Dependencies"}
</Typography>
<Box sx={{ width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
getRowId={(row) => row.library}
initialState={{
pagination: {
paginationModel: {
pageSize: 5,
},
},
}}
/>
</Box>
</CardContent>
</Card>
);
};

export default DependencyTable;
90 changes: 90 additions & 0 deletions app/src/components/pages/flow/ParameterTable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import * as React from "react";
import Box from "@mui/material/Box";
import { DataGrid } from "@mui/x-data-grid";
import { Card, CardContent, Tooltip, Typography } from "@mui/material";

const columns = [
{
field: "name",
headerName: "Name",
width: 200,
},
{
field: "data_type",
headerName: "Data type",
width: 120,
},
{
field: "default_value",
headerName: "Default value",
width: 200,
},
{
field: "description",
headerName: "Description",
width: 400,
},
];

const ParameterTable = ({ data }) => {
// Define the rows for the grid

const rows = data.flatMap((param) => {
// If the key is 'steps' and it's a valid JSON string, process it
if (param.name === "steps" && typeof param.default_value === "string") {
try {
const stepsArray = JSON.parse(param.default_value);
if (Array.isArray(stepsArray)) {
return stepsArray.map((step) => {
const stepValue = step.value || {};
return {
name: `steps.${stepValue.step_name}` || "",
type: "component",
default_value: "",
description: stepValue.key || "",
};
});
}
} catch (e) {
console.error("Error parsing JSON:", e);
// Handle the error or return an empty array
return [];
}
} else {
// For other cases, just return the original row format
return [
{
id: param.name,
...param,
},
];
}
});

return (
<Card>
<CardContent>
<Typography variant="h4" mb={6}>
{data.length + " Hyperparameters"}
</Typography>
<Box sx={{ width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
getRowId={(row) => row.name}
initialState={{
pagination: {
paginationModel: {
pageSize: 10,
},
},
}}
pageSizeOptions={[10, 20, 50, 100]}
/>
</Box>
</CardContent>
</Card>
);
};

export default ParameterTable;
196 changes: 93 additions & 103 deletions app/src/pages/f/[flowId].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ import { CollapsibleDataTable, StringLimiter } from "../api/sizeLimiter";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCogs, faTags } from "@fortawesome/free-solid-svg-icons";
import Wrapper from "../../components/Wrapper";
import DependencyTable from "../../components/pages/flow/DependencyTable";
import ParameterTable from "../../components/pages/flow/ParameterTable";

export async function getStaticPaths() {
// No paths are pre-rendered
Expand Down Expand Up @@ -52,117 +54,105 @@ function Flow({ data }) {
return (
<Wrapper>
<Helmet title="OpenML Flows" />

<React.Fragment>
<Grid container spacing={6}>
<Grid item xs={12}>
<Grid container style={{ padding: "25px 0" }}>
<Grid item md={12}>
<LightTooltip title={data.name}>
<Typography
variant={"h1"}
style={{ marginBottom: "15px", wordWrap: "break-word" }}
>
<FontAwesomeIcon icon={faCogs} />
&nbsp;&nbsp;&nbsp;
<StringLimiter maxLength={65} value={data.name} />
</Typography>
</LightTooltip>
</Grid>
<Grid item md={12}>
<MetaTag type={"status"} value={data.visibility} />
<MetaTag
type={"uploaded"}
date={data.date}
uploader={data.uploader}
/>
<br />
<MetaTag type={"likes"} value={data.nr_of_likes} />
<MetaTag type={"issues"} value={data.nr_of_issues} />
<MetaTag type={"downvotes"} value={data.nr_of_downvotes} />
<MetaTag type={"downloads"} value={data.nr_of_downloads} />
<MetaTag type={"runs"} value={data.runs} />

<React.Fragment>
<Grid container spacing={6}>
<Grid item xs={12}>
<Grid container style={{ padding: "25px 0" }}>
<Grid item md={12}>
<LightTooltip title={data.name}>
<Typography
variant={"h1"}
style={{ marginBottom: "15px", wordWrap: "break-word" }}
>
<FontAwesomeIcon icon={faCogs} />
&nbsp;&nbsp;&nbsp;
<StringLimiter maxLength={65} value={data.name} />
</Typography>
</LightTooltip>
</Grid>
<Grid item md={12}>
<MetaTag type={"status"} value={data.visibility} />
<MetaTag
type={"uploaded"}
date={data.date}
uploader={data.uploader}
/>
<br />
<MetaTag type={"likes"} value={data.nr_of_likes} />
<MetaTag type={"issues"} value={data.nr_of_issues} />
<MetaTag type={"downvotes"} value={data.nr_of_downvotes} />
<MetaTag type={"downloads"} value={data.nr_of_downloads} />
<MetaTag type={"runs"} value={data.runs} />
</Grid>
</Grid>
</Grid>

<Grid container>
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} />{" "}
{data.tags.map((element) =>
element.tag.toString().startsWith("study") ? (
""
) : (
<TagChip
key={"tag_" + element.tag}
label={" " + element.tag + " "}
size="small"
onClick={() => updateTag(element.tag)}
/>
),
)}
<Grid container>
<Grid item md={12}>
<FontAwesomeIcon icon={faTags} />{" "}
{data.tags.map((element) =>
element.tag.toString().startsWith("study") ? (
""
) : (
<TagChip
key={"tag_" + element.tag}
label={" " + element.tag + " "}
size="small"
onClick={() => updateTag(element.tag)}
/>
),
)}
</Grid>
</Grid>
</Grid>
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<Typography variant={"h4"}>
Description of{" "}
<span style={{ wordWrap: "break-word" }}>{data.name}</span>
</Typography>
<ReactMarkdown>{data.description}</ReactMarkdown>
</CardContent>
</Card>
</Grid>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography variant={"h4"}>
Description of{" "}
<span style={{ wordWrap: "break-word" }}>{data.name}</span>
</Typography>
<ReactMarkdown>{data.description}</ReactMarkdown>
</CardContent>
</Card>
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<CollapsibleDataTable
title={"Dependencies"}
data={dependenciesMap}
rowrenderer={(dep) => (
<DependencyDetail
key={dep[0]}
name={dep[0]}
version={dep[1]}
/>
)}
maxLength={7}
columns={["Library", "Version"]}
/>
</CardContent>
</Card>
</Grid>
{/* Dependency and Parameter tables */}
<Grid item xs={12}>
<DependencyTable data={data.dependencies} />
</Grid>
<Grid item xs={12}>
<ParameterTable data={data.parameters} />
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<CollapsibleDataTable
title={"Parameters"}
data={data.parameters}
rowrenderer={(m) => (
<ParameterDetail key={"fd_" + m.name} item={m} />
)}
maxLength={7}
columns={parameterCols}
/>
</CardContent>
</Card>
</Grid>
<Grid item xs={12}>
<Card>
<CardContent>
<CollapsibleDataTable
title={"Parameters"}
data={data.parameters}
rowrenderer={(m) => (
<ParameterDetail key={"fd_" + m.name} item={m} />
)}
maxLength={7}
columns={parameterCols}
/>
</CardContent>
</Card>
</Grid>

<Grid item xs={12}>
<Card>
<CardContent>
<Typography variant={"h4"}>Runs ({data.runs})</Typography>
<br />
Run visualization not currently supported
</CardContent>
</Card>
<Grid item xs={12}>
<Card>
<CardContent>
<Typography variant={"h4"}>Runs ({data.runs})</Typography>
<br />
Run visualization not currently supported
</CardContent>
</Card>
</Grid>
</Grid>
</Grid>
{/* <Helmet title="OpenML Flows" />
{/* <Helmet title="OpenML Flows" />
<Typography variant="h3" gutterBottom>
Flow {flowId}
</Typography>
Expand All @@ -172,7 +162,7 @@ function Flow({ data }) {
<Typography variant="h5" gutterBottom>
{shortenName(data.name)}
</Typography> */}
</React.Fragment>
</React.Fragment>
</Wrapper>
);
}
Expand Down
Loading

0 comments on commit 18dd4b1

Please sign in to comment.