From 18dd4b1df577b89ff72904495039b3a894f92f22 Mon Sep 17 00:00:00 2001 From: joaquinvanschoren Date: Mon, 15 Jan 2024 23:57:56 +0100 Subject: [PATCH] Updated flow tables to DataGrids --- .../components/pages/flow/DependencyTable.js | 53 +++++ .../components/pages/flow/ParameterTable.js | 90 ++++++++ app/src/pages/f/[flowId].js | 196 +++++++++--------- app/src/pages/t/[taskId].js | 136 ++++++------ 4 files changed, 304 insertions(+), 171 deletions(-) create mode 100644 app/src/components/pages/flow/DependencyTable.js create mode 100644 app/src/components/pages/flow/ParameterTable.js diff --git a/app/src/components/pages/flow/DependencyTable.js b/app/src/components/pages/flow/DependencyTable.js new file mode 100644 index 0000000..21b0f09 --- /dev/null +++ b/app/src/components/pages/flow/DependencyTable.js @@ -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 ( + + + + {rows.length + " Dependencies"} + + + row.library} + initialState={{ + pagination: { + paginationModel: { + pageSize: 5, + }, + }, + }} + /> + + + + ); +}; + +export default DependencyTable; diff --git a/app/src/components/pages/flow/ParameterTable.js b/app/src/components/pages/flow/ParameterTable.js new file mode 100644 index 0000000..010134a --- /dev/null +++ b/app/src/components/pages/flow/ParameterTable.js @@ -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 ( + + + + {data.length + " Hyperparameters"} + + + row.name} + initialState={{ + pagination: { + paginationModel: { + pageSize: 10, + }, + }, + }} + pageSizeOptions={[10, 20, 50, 100]} + /> + + + + ); +}; + +export default ParameterTable; diff --git a/app/src/pages/f/[flowId].js b/app/src/pages/f/[flowId].js index d2dd25b..111cfcc 100644 --- a/app/src/pages/f/[flowId].js +++ b/app/src/pages/f/[flowId].js @@ -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 @@ -52,117 +54,105 @@ function Flow({ data }) { return ( - - - - - - - - - -     - - - - - - - -
- - - - - + + + + + + + + + +     + + + + + + + +
+ + + + + +
-
- - - {" "} - {data.tags.map((element) => - element.tag.toString().startsWith("study") ? ( - "" - ) : ( - updateTag(element.tag)} - /> - ), - )} + + + {" "} + {data.tags.map((element) => + element.tag.toString().startsWith("study") ? ( + "" + ) : ( + updateTag(element.tag)} + /> + ), + )} + - - - - - - Description of{" "} - {data.name} - - {data.description} - - - + + + + + Description of{" "} + {data.name} + + {data.description} + + + - - - - ( - - )} - maxLength={7} - columns={["Library", "Version"]} - /> - - - + {/* Dependency and Parameter tables */} + + + + + + - - - - ( - - )} - maxLength={7} - columns={parameterCols} - /> - - - + + + + ( + + )} + maxLength={7} + columns={parameterCols} + /> + + + - - - - Runs ({data.runs}) -
- Run visualization not currently supported -
-
+ + + + Runs ({data.runs}) +
+ Run visualization not currently supported +
+
+
-
- {/* + {/* Flow {flowId} @@ -172,7 +162,7 @@ function Flow({ data }) { {shortenName(data.name)} */} -
+
); } diff --git a/app/src/pages/t/[taskId].js b/app/src/pages/t/[taskId].js index 2d7d606..263552c 100644 --- a/app/src/pages/t/[taskId].js +++ b/app/src/pages/t/[taskId].js @@ -67,79 +67,79 @@ function Task({ data }) { return ( - - - - - - - {data.tasktype.name} on{" "} - {data.source_data.name}{" "} - - - - - - - - - created {data.date} -
- - - - - -
-
- {data.tags[0]?.tag !== undefined && data.tags[0].tag.length > 0 && ( - + + + + + + + {data.tasktype.name} on{" "} + {data.source_data.name}{" "} + + - - {data.tags.map((element) => - element.tag.toString().startsWith("study") ? ( - "" - ) : ( - updateTag(element.tag)} - /> - ), - )} + + + + + + created {data.date} +
+ + + + +
- )} -
+ {data.tags[0]?.tag !== undefined && data.tags[0].tag.length > 0 && ( + + + + {data.tags.map((element) => + element.tag.toString().startsWith("study") ? ( + "" + ) : ( + updateTag(element.tag)} + /> + ), + )} + + + )} +
- - - - - Details - - - - {taskDescription.map((x) => ( - - {x.name} - {x.value} - - ))} - -
-
-
+ + + + + Details + + + + {taskDescription.map((x) => ( + + {x.name} + {x.value} + + ))} + +
+
+
+
-
-
+
); }