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}
+
+ ))}
+
+
+
+
+
-
-
+
);
}