Added DnD to step and reading layers

DSGT-DLP · Sep 8, 2023 · 84585b0 · 84585b0
1 parent 622d132
commit 84585b0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 17 deletions.
diff --git a/frontend/src/features/Train/components/CreateTrainspace.tsx b/frontend/src/features/Train/components/CreateTrainspace.tsx
@@ -7,12 +7,9 @@ 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";
-import TabularDnd from "../features/Tabular/components/TabularDnd";
-import { ParameterData } from "../features/Tabular/types/tabularTypes";
 const CreateTrainspace = () => {
   const {
     handleSubmit,
@@ -34,8 +31,6 @@ const CreateTrainspace = () => {
     }
   }, [router.isReady]);
 
-  const [layers, setLayers] = React.useState<ParameterData["layers"]>([]);
-
   return (
     <Grid
       container
@@ -45,14 +40,6 @@ const CreateTrainspace = () => {
       justifyContent="center"
       style={{ minHeight: "100vh" }}
     >
-      <Button
-        onClick={() => {
-          console.log(layers);
-        }}
-      >
-        Get layers
-      </Button>
-      <TabularDnd setLayers={setLayers} />
       <Grid item>
         <Typography variant="h1" fontSize={50}>
           Create a Trainspace

diff --git a/frontend/src/features/Train/features/Tabular/components/TabularDnd.tsx b/frontend/src/features/Train/features/Tabular/components/TabularDnd.tsx
@@ -48,7 +48,7 @@ export default function TabularDnd(props: TabularDndProps) {
       type: "textUpdater",
       position: {
         x: DEFAULT_X_POSITION,
-        y: (i + 1) * 125,
+        y: (i + 1) * 100,
       },
       data: {
         label: STEP_SETTINGS.PARAMETERS.layers[layer.value].label,

diff --git a/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx b/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
@@ -89,6 +89,7 @@ const TabularParametersStep = ({
     formState: { errors, isDirty },
     control,
     watch,
+    setValue,
   } = useForm<ParameterData>({
     defaultValues: {
       targetCol:
@@ -108,9 +109,11 @@ const TabularParametersStep = ({
   useEffect(() => {
     setIsModified(isDirty);
   }, [isDirty]);
-  if (!trainspace) return <></>;
+  if (!trainspace) return null;
   const targetCol = watch("targetCol");
   const features = watch("features");
+  const [layers, setLayers] = React.useState<ParameterData["layers"]>([]);
+
   return (
     <Stack spacing={3}>
       {error ? (
@@ -307,8 +310,9 @@ const TabularParametersStep = ({
         />
       </FormControl>
       <LayersDnd control={control} errors={errors} />
-      <TabularDnd />
+      <TabularDnd setLayers={setLayers} />
       {renderStepperButtons((trainspaceData) => {
+        setValue("layers", layers);
         handleSubmit((data) => {
           dispatch(
             updateTabularTrainspaceData({

diff --git a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
@@ -121,7 +121,8 @@ const TrainspaceStepInner = ({
         });
     }
   }, [trainspace]);
-  if (!Component) return <></>;
+
+  if (!Component) return null;
   return (
     <Component
       renderStepperButtons={(submitTrainspace) => (