From 86440a3c7779bf6a4a3f871cc8aebf813b431589 Mon Sep 17 00:00:00 2001
From: P PUNITH KRISHNA <32421081+punith300i@users.noreply.github.com>
Date: Mon, 30 Oct 2023 02:36:11 -0700
Subject: [PATCH] Added columns support from the table in scope

---
 www/src/pages/table/MenuBar.tsx               |  2 +-
 .../pages/table/forms/TransformationForm.tsx  | 30 +++++++++++--------
 www/src/pages/table/forms/index.tsx           |  9 +++---
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/www/src/pages/table/MenuBar.tsx b/www/src/pages/table/MenuBar.tsx
index 8655b50..d607ddc 100644
--- a/www/src/pages/table/MenuBar.tsx
+++ b/www/src/pages/table/MenuBar.tsx
@@ -121,7 +121,7 @@ export const MenuBar = observer(
       },
       openAddEdgeForm: () => openForm({ type: "edge", sm }),
       openTransformationFrom: () =>
-        openForm({ type: "transformation", tableId: tableId }),
+        openForm({ type: "transformation", table: table }),
       predict: () => {
         assistantService.predict(table).then(() => {
           tableRef.current?.reload();
diff --git a/www/src/pages/table/forms/TransformationForm.tsx b/www/src/pages/table/forms/TransformationForm.tsx
index 0bf3861..1e621d6 100644
--- a/www/src/pages/table/forms/TransformationForm.tsx
+++ b/www/src/pages/table/forms/TransformationForm.tsx
@@ -20,20 +20,20 @@ import {
   TransformationResult,
   useStores,
   Transformation,
+  Table as TableModel,
 } from "../../../models";
-
 const styles = {};
 
 export interface TransformationFormProps {
   type: string;
-  tableId: number;
+  table: TableModel;
 }
 
 export const TransformationForm = withStyles(styles)(
   observer(
     ({
       classes,
-      tableId,
+      table,
     }: TransformationFormProps & WithStyles<typeof styles>) => {
       const onDone = () => Modal.destroyAll();
       const actionRef = useRef<ActionType>();
@@ -56,7 +56,6 @@ export const TransformationForm = withStyles(styles)(
             ) {
               return (
                 <>
-                  {" "}
                   {
                     <Tag color={"volcano"}>
                       <pre>{transformed_value}</pre>
@@ -74,7 +73,7 @@ export const TransformationForm = withStyles(styles)(
       const onExecute = async () => {
         const transformationPayload: Transformation = {
           id: -1,
-          tableId: tableId,
+          tableId: table.id,
           type: form.getFieldValue("type"),
           code: form.getFieldValue("code"),
           mode: "restrictedpython",
@@ -115,7 +114,11 @@ export const TransformationForm = withStyles(styles)(
                   style={{
                     width: "100%",
                   }}
-                  placeholder="Please select"
+                  placeholder="Please select columns"
+                  options={table.columns.map((column) => ({
+                    label: column,
+                    value: column,
+                  }))}
                 />
               </Form.Item>
             </Col>
@@ -132,7 +135,11 @@ export const TransformationForm = withStyles(styles)(
                   style={{
                     width: "100%",
                   }}
-                  placeholder="Please select"
+                  options={table.columns.map((column) => ({
+                    label: column,
+                    value: column,
+                  }))}
+                  placeholder="Please select columns"
                 />
               </Form.Item>
             </Col>
@@ -157,24 +164,21 @@ export const TransformationForm = withStyles(styles)(
                   type="primary"
                   onClick={onExecute}
                 >
-                  {" "}
-                  Execute{" "}
+                  Execute
                 </Button>
               </Form.Item>
             </Col>
             <Col span={2} flex="auto">
               <Form.Item>
                 <Button style={{ width: "100%" }} type="primary">
-                  {" "}
-                  Save{" "}
+                  Save
                 </Button>
               </Form.Item>
             </Col>
             <Col span={2} flex="auto">
               <Form.Item>
                 <Button style={{ width: "100%" }} type="primary">
-                  {" "}
-                  Reset{" "}
+                  Reset
                 </Button>
               </Form.Item>
             </Col>
diff --git a/www/src/pages/table/forms/index.tsx b/www/src/pages/table/forms/index.tsx
index 8a2d891..1ccdf0a 100644
--- a/www/src/pages/table/forms/index.tsx
+++ b/www/src/pages/table/forms/index.tsx
@@ -5,6 +5,7 @@ import {
   TransformationForm,
   TransformationFormProps,
 } from "./TransformationForm";
+import { Table } from "../../../models";
 
 interface TypedEdgeFormProps extends EdgeFormProps {
   type: "edge";
@@ -16,8 +17,8 @@ interface TypedNodeFormProps extends NodeFormProps {
 
 interface TypedTransformationFormProps extends TransformationFormProps {
   type: "transformation";
-  transformationId?: number;
-  tableId: number;
+  id?: number;
+  table: Table;
 }
 
 export function openForm(
@@ -38,9 +39,7 @@ export function openForm(
     case "transformation":
       content = <TransformationForm {...args} />;
       title =
-        args.transformationId === undefined
-          ? "Add Transformation"
-          : "Update Transformation";
+        args.id === undefined ? "Add Transformation" : "Update Transformation";
       break;
   }