React flow integration

.github/Architecture.md

@@ -77,6 +77,7 @@
 |  |  |  |  |  |  |- 📂 constants:
 |  |  |  |  |  |  |  |- 📜 imageConstants.ts
 |  |  |  |  |  |  |- 📂 components:
+|  |  |  |  |  |  |  |- 📜 ImageFlow.tsx
 |  |  |  |  |  |  |  |- 📜 ImageTrainspace.tsx
 |  |  |  |  |  |  |  |- 📜 ImageDatasetStep.tsx
 |  |  |  |  |  |  |  |- 📜 ImageReviewStep.tsx
@@ -93,6 +94,7 @@
 |  |  |  |  |  |  |- 📂 components:
 |  |  |  |  |  |  |  |- 📜 TabularParametersStep.tsx
 |  |  |  |  |  |  |  |- 📜 TabularDatasetStep.tsx
+|  |  |  |  |  |  |  |- 📜 TabularFlow.tsx
 |  |  |  |  |  |  |  |- 📜 TabularTrainspace.tsx
 |  |  |  |  |  |  |  |- 📜 TabularReviewStep.tsx
 |  |  |  |  |  |  |- 📂 types:
@@ -137,9 +139,11 @@
 |  |  |  |- 📂 components:
 |  |  |  |  |- 📜 ClientOnlyPortal.tsx
 |  |  |  |  |- 📜 EmailInput.tsx
+|  |  |  |  |- 📜 HtmlTooltip.tsx
 |  |  |  |  |- 📜 TitleText.tsx
 |  |  |  |  |- 📜 NavBarMain.tsx
 |  |  |  |  |- 📜 Footer.tsx
+|  |  |  |  |- 📜 DlpTooltip.tsx
 |  |  |  |  |- 📜 Spacer.tsx
 |  |  |  |- 📂 utils:
 |  |  |  |  |- 📜 firebase.ts

.vscode/settings.json

@@ -19,5 +19,6 @@
   },
   "python.formatting.provider": "none",
   "python.terminal.activateEnvironment": false,
-  "python.analysis.typeCheckingMode": "basic"
+  "python.analysis.typeCheckingMode": "basic",
+  "cSpell.words": ["reactflow"]
 }

README.md

@@ -177,3 +177,4 @@ See [Architecture.md](./.github/Architecture.md)
 Deep Learning Playground is MIT licensed, as found in the [LICENSE](./LICENSE) file.
 
 Deep Learning Playground documentation is Creative Commons licensed, as found in the [LICENSE-docs](./.github/LICENSE-docs) file.
+

frontend/package.json

@@ -42,6 +42,7 @@
     "jszip": "^3.10.1",
     "local-storage-fallback": "^4.1.2",
     "lodash.camelcase": "^4.3.0",
+    "nanoid": "^5.0.1",
     "next": "^13.2.4",
     "next-redux-wrapper": "^8.1.0",
     "openai": "^3.3.0",
@@ -65,6 +66,7 @@
     "react-select": "^5.3.2",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^9.0.7",
+    "reactflow": "^11.7.4",
     "socket.io-client": "^4.5.1",
     "styled-components": "^5.3.5",
     "typescript": "^5.0.2",

frontend/src/common/components/DlpTooltip.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import IconButton from "@mui/material/IconButton";
+import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
+import { styled } from "@mui/material/styles";
+
+interface DlpTooltipProps {
+  children: React.ReactNode;
+  title: React.ReactNode;
+  isIcon?: boolean;
+  onClick?: () => void;
+  className?: string;
+  disabled?: boolean;
+}
+
+const DlpTooltip = (props: DlpTooltipProps) => {
+  const { children, title, isIcon, onClick, className, disabled } = props;
+
+  if (isIcon) {
+    return (
+      <Tooltip title={title} className={className}>
+        <span>
+          <IconButton
+            onClick={onClick}
+            style={{ width: "fit-content", aspectRatio: 1 }}
+            disabled={disabled}
+            className={className}
+          >
+            {children}
+          </IconButton>
+        </span>
+      </Tooltip>
+    );
+  }
+
+  return styled(
+    ({
+      className,
+      title,
+      children,
+      ...props
+    }: {
+      className?: string;
+      children: React.ReactElement;
+      title: React.ReactNode;
+    }) => (
+      <Tooltip title={title} {...props} classes={{ popper: className }}>
+        {children}
+      </Tooltip>
+    )
+  )(({ theme }) => ({
+    [`& .${tooltipClasses.tooltip}`]: {
+      backgroundColor: "rgba(255, 255, 255, 0.95)",
+      color: "rgba(0, 0, 0, 0.87)",
+      maxWidth: 220,
+      fontSize: theme.typography.pxToRem(12),
+      border: "none",
+    },
+  }));
+};
+
+export default DlpTooltip;

frontend/src/common/components/HtmlTooltip.tsx

@@ -0,0 +1,30 @@
+import { tooltipClasses, Tooltip } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import React from "react";
+
+const HtmlTooltip = styled(
+  ({
+    className,
+    title,
+    children,
+    ...props
+  }: {
+    className?: string;
+    children: React.ReactElement;
+    title: React.ReactNode;
+  }) => (
+    <Tooltip title={title} {...props} classes={{ popper: className }}>
+      {children}
+    </Tooltip>
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: "rgba(255, 255, 255, 0.95)",
+    color: "rgba(0, 0, 0, 0.87)",
+    maxWidth: 220,
+    fontSize: theme.typography.pxToRem(12),
+    border: "none",
+  },
+}));
+
+export default HtmlTooltip;

frontend/src/features/Dashboard/components/TrainDataGrid.tsx

@@ -16,7 +16,7 @@ import { useRouter } from "next/router";
 import { useAppDispatch } from "@/common/redux/hooks";
 import {
   ALL_TRAINSPACE_SETTINGS,
-  DATA_SOURCE_ARR,
+  IMPLEMENTED_DATA_SOURCE_ARR,
 } from "@/features/Train/constants/trainConstants";
 import { formatDate } from "@/common/utils/dateFormat";
 import { removeTrainspaceData } from "@/features/Train/redux/trainspaceSlice";
@@ -178,7 +178,7 @@ const NewTrainSpaceMenu = ({
         open={open}
         onClose={handleClose}
       >
-        {DATA_SOURCE_ARR.map((source) => (
+        {IMPLEMENTED_DATA_SOURCE_ARR.map((source) => (
           <MenuItem
             key={source}
             value={source}

frontend/src/features/Train/components/CreateTrainspace.tsx

@@ -7,7 +7,7 @@ import { useAppDispatch } from "@/common/redux/hooks";
 import { useRouter } from "next/router";
 import {
   ALL_TRAINSPACE_SETTINGS,
-  DATA_SOURCE_ARR,
+  IMPLEMENTED_DATA_SOURCE_ARR,
 } from "../constants/trainConstants";
 import { createTrainspaceData } from "../redux/trainspaceSlice";
 const CreateTrainspace = () => {
@@ -18,9 +18,7 @@ const CreateTrainspace = () => {
     control,
     setValue,
   } = useForm<BaseTrainspaceData>({
-    defaultValues: {
-      name: "My Trainspace",
-    },
+    defaultValues: { name: "My Trainspace" },
   });
   const dispatch = useAppDispatch();
   const router = useRouter();
@@ -32,6 +30,7 @@ const CreateTrainspace = () => {
       setValue("dataSource", router.query.source as DATA_SOURCE);
     }
   }, [router.isReady]);
+
   return (
     <Grid
       container
@@ -76,7 +75,7 @@ const CreateTrainspace = () => {
               value={value ?? ""}
               helperText={errors.dataSource ? "Data Source is required" : ""}
             >
-              {DATA_SOURCE_ARR.map((source) => (
+              {IMPLEMENTED_DATA_SOURCE_ARR.map((source) => (
                 <MenuItem key={source} value={source}>
                   {ALL_TRAINSPACE_SETTINGS[source].name}
                 </MenuItem>

frontend/src/features/Train/constants/trainConstants.ts

@@ -19,13 +19,11 @@ export const DATA_SOURCE_ARR = [
 
 export const ALL_TRAINSPACE_SETTINGS = {
   TABULAR: TABULAR_TRAINSPACE_SETTINGS,
-  PRETRAINED: TABULAR_TRAINSPACE_SETTINGS,
   IMAGE: IMAGE_TRAINSPACE_SETTINGS,
-  AUDIO: TABULAR_TRAINSPACE_SETTINGS,
-  TEXTUAL: TABULAR_TRAINSPACE_SETTINGS,
-  CLASSICAL_ML: TABULAR_TRAINSPACE_SETTINGS,
-  OBJECT_DETECTION: TABULAR_TRAINSPACE_SETTINGS,
 };
+export const IMPLEMENTED_DATA_SOURCE_ARR = Object.keys(
+  ALL_TRAINSPACE_SETTINGS
+) as (keyof typeof ALL_TRAINSPACE_SETTINGS)[];
 
 export const ALL_STEP_SETTINGS = {
   TABULAR: TABULAR_STEP_SETTINGS,