From 26bc6bc6459edd1af65bccd3fe1518255bb9fed5 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 16 Aug 2024 11:47:44 -0300
Subject: [PATCH] fix: Add TableNodeComponent and set default formatter type
 (#3382)

* feat: Add TableNodeComponent for rendering table data in ParameterRenderComponent

* refactor: Set default formatter type for columns in FormatColumns function

* [autofix.ci] apply automated fixes

* refactor: Improve object rendering in ObjectRender component

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../src/components/objectRender/index.tsx     | 16 ++++++++++++----
 .../parameterRenderComponent/index.tsx        |  9 +++++++++
 src/frontend/src/constants/constants.ts       |  1 +
 src/frontend/src/types/api/index.ts           |  1 +
 src/frontend/src/utils/utils.ts               | 19 ++++++++++---------
 5 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/src/frontend/src/components/objectRender/index.tsx b/src/frontend/src/components/objectRender/index.tsx
index c0b8e1e3b..2527e7235 100644
--- a/src/frontend/src/components/objectRender/index.tsx
+++ b/src/frontend/src/components/objectRender/index.tsx
@@ -7,12 +7,20 @@ export default function ObjectRender({
   object: any;
   setValue?: (value: any) => void;
 }): JSX.Element {
-  let preview =
-    object === null || object === undefined ? "‎" : JSON.stringify(object);
-  if (object === null || object === undefined) {
+  let newObject = object;
+  if (typeof object === "string") {
+    try {
+      newObject = JSON.parse(object);
+    } catch (e) {
+      newObject = object;
+    }
   }
+  let preview =
+    newObject === null || newObject === undefined
+      ? "‎"
+      : JSON.stringify(newObject);
   return (
-    <DictAreaModal onChange={setValue} value={object ?? {}}>
+    <DictAreaModal onChange={setValue} value={newObject ?? {}}>
       <div className="flex h-full w-full items-center align-middle transition-all">
         <div className="truncate">{preview}</div>
       </div>
diff --git a/src/frontend/src/components/parameterRenderComponent/index.tsx b/src/frontend/src/components/parameterRenderComponent/index.tsx
index 50953999f..e4fb0b7a6 100644
--- a/src/frontend/src/components/parameterRenderComponent/index.tsx
+++ b/src/frontend/src/components/parameterRenderComponent/index.tsx
@@ -2,6 +2,7 @@ import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
 import { TEXT_FIELD_TYPES } from "@/constants/constants";
 import { APIClassType, InputFieldType } from "@/types/api";
 import { useMemo } from "react";
+import TableNodeComponent from "../TableNodeComponent";
 import CodeAreaComponent from "../codeAreaComponent";
 import DictComponent from "../dictComponent";
 import FloatComponent from "../floatComponent";
@@ -146,6 +147,14 @@ export function ParameterRenderComponent({
           />
         ) : templateData.type === "Any" ? (
           <>-</>
+        ) : templateData.type === "table" ? (
+          <TableNodeComponent
+            description={templateData.info || "Add or edit data"}
+            columns={templateData?.table_schema?.columns}
+            onChange={onChange}
+            tableTitle={templateData?.display_name ?? "Table"}
+            value={templateValue}
+          />
         ) : (
           String(templateValue)
         )}
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index a45a59d93..7e6e58abc 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -646,6 +646,7 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
   "int",
   "dict",
   "NestedDict",
+  "table",
 ]);
 
 export const priorityFields = new Set(["code", "template"]);
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index e4d6fade2..9c9c8271b 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -77,6 +77,7 @@ export type InputFieldType = {
   refresh_button?: boolean;
   refresh_button_text?: string;
   combobox?: boolean;
+  info?: string;
   [key: string]: any;
 };
 
diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts
index 52f7e0c6b..b0e58ae00 100644
--- a/src/frontend/src/utils/utils.ts
+++ b/src/frontend/src/utils/utils.ts
@@ -502,15 +502,16 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
       sortable: col.sortable,
       filter: col.filterable,
     };
-    if (col.formatter) {
-      if (basic_types.has(col.formatter)) {
-        newCol.cellDataType = col.formatter;
-      } else {
-        newCol.cellRendererParams = {
-          formatter: col.formatter,
-        };
-        newCol.cellRenderer = TableAutoCellRender;
-      }
+    if (!col.formatter) {
+      col.formatter = FormatterType.text;
+    }
+    if (basic_types.has(col.formatter)) {
+      newCol.cellDataType = col.formatter;
+    } else {
+      newCol.cellRendererParams = {
+        formatter: col.formatter,
+      };
+      newCol.cellRenderer = TableAutoCellRender;
     }
     return newCol;
   });