From a3821f43675c447bf43379ded3ebab65ca1d4a51 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 17 Jun 2024 10:53:11 -0300
Subject: [PATCH 1/4] Fixed not being able to throw nodes at screen

---
 .../src/components/inputComponent/index.tsx   |  13 +-
 src/frontend/src/utils/reactflowUtils.ts      | 126 +++++++++---------
 2 files changed, 70 insertions(+), 69 deletions(-)

diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx
index 10763de70..b5875b3dc 100644
--- a/src/frontend/src/components/inputComponent/index.tsx
+++ b/src/frontend/src/components/inputComponent/index.tsx
@@ -24,7 +24,6 @@ export default function InputComponent({
   blurOnEnter = false,
   optionsIcon = "ChevronsUpDown",
   selectedOption,
-
   setSelectedOption,
   selectedOptions = [],
   setSelectedOptions,
@@ -72,7 +71,7 @@ export default function InputComponent({
               editNode ? "input-edit-node" : "",
               password && editNode ? "pr-8" : "",
               password && !editNode ? "pr-10" : "",
-              className!
+              className!,
             )}
             placeholder={password && editNode ? "Key" : placeholder}
             onChange={(e) => {
@@ -155,7 +154,7 @@ export default function InputComponent({
         <span
           className={cn(
             password && selectedOption === "" ? "right-8" : "right-0",
-            "absolute inset-y-0 flex items-center pr-2.5"
+            "absolute inset-y-0 flex items-center pr-2.5",
           )}
         >
           <button
@@ -168,7 +167,7 @@ export default function InputComponent({
               onChange && setSelectedOption && selectedOption !== ""
                 ? "text-medium-indigo"
                 : "text-muted-foreground",
-              "hover:text-accent-foreground"
+              "hover:text-accent-foreground",
             )}
           >
             <ForwardedIconComponent
@@ -188,7 +187,7 @@ export default function InputComponent({
             "mb-px",
             editNode
               ? "input-component-true-button"
-              : "input-component-false-button"
+              : "input-component-false-button",
           )}
           onClick={(event) => {
             event.preventDefault();
@@ -205,7 +204,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg"
+                  : "input-component-false-svg",
               )}
             >
               <path
@@ -224,7 +223,7 @@ export default function InputComponent({
               className={classNames(
                 editNode
                   ? "input-component-true-svg"
-                  : "input-component-false-svg"
+                  : "input-component-false-svg",
               )}
             >
               <path
diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts
index a0cbe2b47..74f57ed2d 100644
--- a/src/frontend/src/utils/reactflowUtils.ts
+++ b/src/frontend/src/utils/reactflowUtils.ts
@@ -80,7 +80,7 @@ export function cleanEdges(nodes: NodeType[], edges: Edge[]) {
       const parsedSourceHandle = scapeJSONParse(sourceHandle);
       const name = parsedSourceHandle.name;
       const output = sourceNode.data.node!.outputs?.find(
-        (output) => output.name === name
+        (output) => output.name === name,
       );
       if (output) {
         const outputTypes =
@@ -114,18 +114,18 @@ export function unselectAllNodes({ updateNodes, data }: unselectAllNodesType) {
 export function isValidConnection(
   { source, target, sourceHandle, targetHandle }: Connection,
   nodes: Node[],
-  edges: Edge[]
+  edges: Edge[],
 ) {
   const targetHandleObject: targetHandleType = scapeJSONParse(targetHandle!);
   const sourceHandleObject: sourceHandleType = scapeJSONParse(sourceHandle!);
   if (
     targetHandleObject.inputTypes?.some(
-      (n) => n === sourceHandleObject.dataType
+      (n) => n === sourceHandleObject.dataType,
     ) ||
     sourceHandleObject.output_types.some(
       (t) =>
         targetHandleObject.inputTypes?.some((n) => n === t) ||
-        t === targetHandleObject.type
+        t === targetHandleObject.type,
     )
   ) {
     let targetNode = nodes.find((node) => node.id === target!)?.data?.node;
@@ -158,7 +158,7 @@ export function removeApiKeys(flow: FlowType): FlowType {
 
 export function updateTemplate(
   reference: APITemplateType,
-  objectToUpdate: APITemplateType
+  objectToUpdate: APITemplateType,
 ): APITemplateType {
   let clonedObject: APITemplateType = cloneDeep(reference);
 
@@ -190,7 +190,10 @@ export const processFlows = (DbData: FlowType[], skipUpdate = true) => {
         (flow.data.nodes[0].data as NodeDataType).node!.display_name =
           flow.name;
         savedComponents[
-          createRandomKey((flow.data.nodes[0].data as NodeDataType).type, uid())
+          createRandomKey(
+            (flow.data.nodes[0].data as NodeDataType).type,
+            uid.rnd(),
+          )
         ] = cloneDeep((flow.data.nodes[0].data as NodeDataType).node!);
         return;
       }
@@ -218,7 +221,7 @@ export const processDataFromFlow = (flow: FlowType, refreshIds = true) => {
 
 export function updateIds(
   { edges, nodes }: { edges: Edge[]; nodes: Node[] },
-  selection?: { edges: Edge[]; nodes: Node[] }
+  selection?: { edges: Edge[]; nodes: Node[] },
 ) {
   let idsMap = {};
   const selectionIds = selection?.nodes.map((n) => n.id);
@@ -246,7 +249,7 @@ export function updateIds(
       edge.source = idsMap[edge.source];
       edge.target = idsMap[edge.target];
       const sourceHandleObject: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!
+        edge.sourceHandle!,
       );
       edge.sourceHandle = scapedJSONStringfy({
         ...sourceHandleObject,
@@ -256,7 +259,7 @@ export function updateIds(
         edge.data.sourceHandle.id = edge.source;
       }
       const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!
+        edge.targetHandle!,
       );
       edge.targetHandle = scapedJSONStringfy({
         ...targetHandleObject,
@@ -302,11 +305,11 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
           (scapeJSONParse(edge.targetHandle!) as targetHandleType).fieldName ===
             t &&
           (scapeJSONParse(edge.targetHandle!) as targetHandleType).id ===
-            node.id
+            node.id,
       )
     ) {
       errors.push(
-        `${displayName || type} is missing ${getFieldTitle(template, t)}.`
+        `${displayName || type} is missing ${getFieldTitle(template, t)}.`,
       );
     } else if (
       template[t].type === "dict" &&
@@ -320,15 +323,15 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
         errors.push(
           `${displayName || type} (${getFieldTitle(
             template,
-            t
-          )}) contains duplicate keys with the same values.`
+            t,
+          )}) contains duplicate keys with the same values.`,
         );
       if (hasEmptyKey(template[t].value))
         errors.push(
           `${displayName || type} (${getFieldTitle(
             template,
-            t
-          )}) field must not be empty.`
+            t,
+          )}) field must not be empty.`,
         );
     }
     return errors;
@@ -337,7 +340,7 @@ export function validateNode(node: NodeType, edges: Edge[]): Array<string> {
 
 export function validateNodes(
   nodes: Node[],
-  edges: Edge[]
+  edges: Edge[],
 ): // this returns an array of tuples with the node id and the errors
 Array<{ id: string; errors: Array<string> }> {
   if (nodes.length === 0) {
@@ -358,7 +361,7 @@ export function updateEdges(edges: Edge[]) {
   if (edges)
     edges.forEach((edge) => {
       const targetHandleObject: targetHandleType = scapeJSONParse(
-        edge.targetHandle!
+        edge.targetHandle!,
       );
       edge.className = "";
     });
@@ -456,11 +459,11 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
       if (newTargetHandle.inputTypes && newTargetHandle.inputTypes.length > 0) {
         //conjuction subtraction
         intersection = newSourceHandle.output_types.filter((type) =>
-          newTargetHandle.inputTypes!.includes(type)
+          newTargetHandle.inputTypes!.includes(type),
         );
       } else {
         intersection = newSourceHandle.output_types.filter(
-          (type) => type === newTargetHandle.type
+          (type) => type === newTargetHandle.type,
         );
       }
       const selected = intersection[0];
@@ -475,7 +478,7 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
           sourceNode.data.node!.base_classes!;
         if (
           !sourceNode.data.node!.outputs.some(
-            (output) => output.selected === selected
+            (output) => output.selected === selected,
           )
         ) {
           sourceNode.data.node!.outputs.push({
@@ -499,7 +502,7 @@ export function handleKeyDown(
     | React.KeyboardEvent<HTMLInputElement>
     | React.KeyboardEvent<HTMLTextAreaElement>,
   inputValue: string | string[] | null,
-  block: string
+  block: string,
 ) {
   //condition to fix bug control+backspace on Windows/Linux
   if (
@@ -522,7 +525,7 @@ export function handleKeyDown(
 }
 
 export function handleOnlyIntegerInput(
-  event: React.KeyboardEvent<HTMLInputElement>
+  event: React.KeyboardEvent<HTMLInputElement>,
 ) {
   if (
     event.key === "." ||
@@ -538,7 +541,7 @@ export function handleOnlyIntegerInput(
 
 export function getConnectedNodes(
   edge: Edge,
-  nodes: Array<NodeType>
+  nodes: Array<NodeType>,
 ): Array<NodeType> {
   const sourceId = edge.source;
   const targetId = edge.target;
@@ -639,7 +642,7 @@ export function checkOldEdgesHandles(edges: Edge[]): boolean {
       !edge.sourceHandle ||
       !edge.targetHandle ||
       !edge.sourceHandle.includes("{") ||
-      !edge.targetHandle.includes("{")
+      !edge.targetHandle.includes("{"),
   );
 }
 
@@ -666,7 +669,7 @@ export function customStringify(obj: any): string {
 
   const keys = Object.keys(obj).sort();
   const keyValuePairs = keys.map(
-    (key) => `"${key}":${customStringify(obj[key])}`
+    (key) => `"${key}":${customStringify(obj[key])}`,
   );
   return `{${keyValuePairs.join(",")}}`;
 }
@@ -688,14 +691,14 @@ export function getMiddlePoint(nodes: Node[]) {
 }
 
 export function getNodeId(nodeType: string) {
-  return nodeType + "-" + uid();
+  return nodeType + "-" + uid.rnd();
 }
 
 export function getHandleId(
   source: string,
   sourceHandle: string,
   target: string,
-  targetHandle: string
+  targetHandle: string,
 ) {
   return (
     "reactflow__edge-" + source + sourceHandle + "-" + target + targetHandle
@@ -706,16 +709,15 @@ export function generateFlow(
   selection: OnSelectionChangeParams,
   nodes: Node[],
   edges: Edge[],
-  name: string
+  name: string,
 ): generateFlowType {
   const newFlowData = { nodes, edges, viewport: { zoom: 1, x: 0, y: 0 } };
-  const uid = new ShortUniqueId({ length: 5 });
   /*	remove edges that are not connected to selected nodes on both ends
    */
   newFlowData.edges = edges.filter(
     (edge) =>
       selection.nodes.some((node) => node.id === edge.target) &&
-      selection.nodes.some((node) => node.id === edge.source)
+      selection.nodes.some((node) => node.id === edge.source),
   );
   newFlowData.nodes = selection.nodes;
 
@@ -725,7 +727,7 @@ export function generateFlow(
     name: name,
     description: "",
     //generating local id instead of using the id from the server, can change in the future
-    id: uid(),
+    id: uid.rnd(),
   };
   // filter edges that are not connected to selected nodes on both ends
   // using O(n²) aproach because the number of edges is small
@@ -736,7 +738,7 @@ export function generateFlow(
       (edge) =>
         (selection.nodes.some((node) => node.id === edge.target) ||
           selection.nodes.some((node) => node.id === edge.source)) &&
-        newFlowData.edges.every((e) => e.id !== edge.id)
+        newFlowData.edges.every((e) => e.id !== edge.id),
     ),
   };
 }
@@ -747,13 +749,13 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
   const { nodes, edges } = groupNode.data.node!.flow!.data!;
   const lastNode = findLastNode(groupNode.data.node!.flow!.data!);
   newEdges = newEdges.filter(
-    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id)
+    (e) => !(nodes.some((n) => n.id === e.source) && e.source !== lastNode?.id),
   );
   newEdges.forEach((edge) => {
     if (lastNode && edge.source === lastNode.id) {
       edge.source = groupNode.id;
       let newSourceHandle: sourceHandleType = scapeJSONParse(
-        edge.sourceHandle!
+        edge.sourceHandle!,
       );
       newSourceHandle.id = groupNode.id;
       edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
@@ -780,7 +782,7 @@ export function reconnectEdges(groupNode: NodeType, excludedEdges: Edge[]) {
 export function filterFlow(
   selection: OnSelectionChangeParams,
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
 ) {
   setNodes((nodes) => nodes.filter((node) => !selection.nodes.includes(node)));
   setEdges((edges) => edges.filter((edge) => !selection.edges.includes(edge)));
@@ -818,7 +820,7 @@ export function updateFlowPosition(NewPosition: XYPosition, flow: FlowType) {
 export function concatFlows(
   flow: FlowType,
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
-  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void
+  setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
 ) {
   const { nodes, edges } = flow.data!;
   setNodes((old) => [...old, ...nodes]);
@@ -827,7 +829,7 @@ export function concatFlows(
 
 export function validateSelection(
   selection: OnSelectionChangeParams,
-  edges: Edge[]
+  edges: Edge[],
 ): Array<string> {
   const clonedSelection = cloneDeep(selection);
   const clonedEdges = cloneDeep(edges);
@@ -841,7 +843,7 @@ export function validateSelection(
   let nodesSet = new Set(clonedSelection.nodes.map((n) => n.id));
   // then filter the edges that are connected to the nodes in the set
   let connectedEdges = clonedSelection.edges.filter(
-    (e) => nodesSet.has(e.source) && nodesSet.has(e.target)
+    (e) => nodesSet.has(e.source) && nodesSet.has(e.target),
   );
   // add the edges to the selection
   clonedSelection.edges = connectedEdges;
@@ -855,17 +857,17 @@ export function validateSelection(
     clonedSelection.nodes.some(
       (node) =>
         isInputNode(node.data as NodeDataType) ||
-        isOutputNode(node.data as NodeDataType)
+        isOutputNode(node.data as NodeDataType),
     )
   ) {
     errorsArray.push(
-      "Please select only nodes that are not input or output nodes"
+      "Please select only nodes that are not input or output nodes",
     );
   }
   //check if there are two or more nodes with free outputs
   if (
     clonedSelection.nodes.filter(
-      (n) => !clonedSelection.edges.some((e) => e.source === n.id)
+      (n) => !clonedSelection.edges.some((e) => e.source === n.id),
     ).length > 1
   ) {
     errorsArray.push("Please select only one node with free outputs");
@@ -876,7 +878,7 @@ export function validateSelection(
     clonedSelection.nodes.some(
       (node) =>
         !clonedSelection.edges.some((edge) => edge.target === node.id) &&
-        !clonedSelection.edges.some((edge) => edge.source === node.id)
+        !clonedSelection.edges.some((edge) => edge.source === node.id),
     )
   ) {
     errorsArray.push("Please select only nodes that are connected");
@@ -933,8 +935,8 @@ export function mergeNodeTemplates({
               nodeTemplate[key].display_name
                 ? nodeTemplate[key].display_name
                 : nodeTemplate[key].name
-                ? toTitleCase(nodeTemplate[key].name)
-                : toTitleCase(key);
+                  ? toTitleCase(nodeTemplate[key].name)
+                  : toTitleCase(key);
           }
         }
       });
@@ -945,7 +947,7 @@ function isTargetHandleConnected(
   edges: Edge[],
   key: string,
   field: InputFieldType,
-  nodeId: string
+  nodeId: string,
 ) {
   /*
 		this function receives a flow and a handleId and check if there is a connection with this handle
@@ -961,7 +963,7 @@ function isTargetHandleConnected(
             id: nodeId,
             proxy: { id: field.proxy!.id, field: field.proxy!.field },
             inputTypes: field.input_types,
-          } as targetHandleType)
+          } as targetHandleType),
       )
     ) {
       return true;
@@ -976,7 +978,7 @@ function isTargetHandleConnected(
             fieldName: key,
             id: nodeId,
             inputTypes: field.input_types,
-          } as targetHandleType)
+          } as targetHandleType),
       )
     ) {
       return true;
@@ -999,7 +1001,7 @@ export function generateNodeTemplate(Flow: FlowType) {
 
 export function generateNodeFromFlow(
   flow: FlowType,
-  getNodeId: (type: string) => string
+  getNodeId: (type: string) => string,
 ): NodeType {
   const { nodes } = flow.data!;
   const outputNode = cloneDeep(findLastNode(flow.data!));
@@ -1040,7 +1042,7 @@ function generateNodeOutputs(flow: FlowType) {
           !edges.some(
             (edge) =>
               edge.source === node.id &&
-              (edge.data.sourceHandle as sourceHandleType).name === output.name
+              (edge.data.sourceHandle as sourceHandleType).name === output.name,
           )
         ) {
           outputs.push(
@@ -1054,7 +1056,7 @@ function generateNodeOutputs(flow: FlowType) {
               },
               name: node.id + "_" + output.name,
               display_name: output.display_name,
-            })
+            }),
           );
         }
       });
@@ -1066,7 +1068,7 @@ function generateNodeOutputs(flow: FlowType) {
 export function connectedInputNodesOnHandle(
   nodeId: string,
   handleId: string,
-  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] }
+  { nodes, edges }: { nodes: NodeType[]; edges: Edge[] },
 ) {
   const connectedNodes: Array<{ name: string; id: string; isGroup: boolean }> =
     [];
@@ -1103,7 +1105,7 @@ export function connectedInputNodesOnHandle(
 
 export function updateProxyIdsOnTemplate(
   template: APITemplateType,
-  idsMap: { [key: string]: string }
+  idsMap: { [key: string]: string },
 ) {
   Object.keys(template).forEach((key) => {
     if (template[key].proxy && idsMap[template[key].proxy!.id]) {
@@ -1114,7 +1116,7 @@ export function updateProxyIdsOnTemplate(
 
 export function updateEdgesIds(
   edges: Edge[],
-  idsMap: { [key: string]: string }
+  idsMap: { [key: string]: string },
 ) {
   edges.forEach((edge) => {
     let targetHandle: targetHandleType = edge.data.targetHandle;
@@ -1151,7 +1153,7 @@ export function expandGroupNode(
   edges: Edge[],
   setNodes: (update: Node[] | ((oldState: Node[]) => Node[])) => void,
   setEdges: (update: Edge[] | ((oldState: Edge[]) => Edge[])) => void,
-  outputs?: OutputFieldType[]
+  outputs?: OutputFieldType[],
 ) {
   const idsMap = updateIds(flow!.data!);
   updateProxyIdsOnTemplate(template, idsMap);
@@ -1243,7 +1245,7 @@ export function expandGroupNode(
     if (nodeIndex !== -1) {
       if (gNodes[nodeIndex].data.node?.outputs) {
         const nodeOutputIndex = gNodes[nodeIndex].data.node!.outputs!.findIndex(
-          (o) => o.name === output.proxy?.name
+          (o) => o.name === output.proxy?.name,
         );
         if (nodeOutputIndex !== -1 && output.selected) {
           gNodes[nodeIndex].data.node!.outputs![nodeOutputIndex].selected =
@@ -1263,7 +1265,7 @@ export function expandGroupNode(
 
 export function getGroupStatus(
   flow: FlowType,
-  ssData: { [key: string]: { valid: boolean; params: string } }
+  ssData: { [key: string]: { valid: boolean; params: string } },
 ) {
   let status = { valid: true, params: SUCCESS_BUILD };
   const { nodes } = flow.data!;
@@ -1282,7 +1284,7 @@ export function getGroupStatus(
 
 export function createFlowComponent(
   nodeData: NodeDataType,
-  version: string
+  version: string,
 ): FlowType {
   const flowNode: FlowType = {
     data: {
@@ -1318,7 +1320,7 @@ export function downloadNode(NodeFLow: FlowType) {
 
 export function updateComponentNameAndType(
   data: any,
-  component: NodeDataType
+  component: NodeDataType,
 ) {}
 
 export function removeFileNameFromComponents(flow: FlowType) {
@@ -1392,7 +1394,7 @@ export function extractFieldsFromComponenents(data: APIObjectType) {
 export function downloadFlow(
   flow: FlowType,
   flowName: string,
-  flowDescription?: string
+  flowDescription?: string,
 ) {
   let clonedFlow = cloneDeep(flow);
   removeFileNameFromComponents(clonedFlow);
@@ -1402,7 +1404,7 @@ export function downloadFlow(
       ...clonedFlow,
       name: flowName,
       description: flowDescription,
-    })
+    }),
   )}`;
 
   // create a link element and set its properties
@@ -1417,7 +1419,7 @@ export function downloadFlow(
 export function downloadFlows() {
   downloadFlowsFromDatabase().then((flows) => {
     const jsonString = `data:text/json;chatset=utf-8,${encodeURIComponent(
-      JSON.stringify(flows)
+      JSON.stringify(flows),
     )}`;
 
     // create a link element and set its properties
@@ -1441,7 +1443,7 @@ export function getRandomDescription(): string {
 export const createNewFlow = (
   flowData: ReactFlowJsonObject,
   flow: FlowType,
-  folderId: string
+  folderId: string,
 ) => {
   return {
     description: flow?.description ?? getRandomDescription(),

From 88754b9cf3d3b44cecffc5746f94469488e44a34 Mon Sep 17 00:00:00 2001
From: ogabrielluiz <gabriel@langflow.org>
Date: Mon, 17 Jun 2024 10:55:50 -0300
Subject: [PATCH 2/4] Refactor build_template_from_class function to remove
 unused code and improve readability

---
 src/backend/base/langflow/interface/utils.py | 48 --------------------
 tests/unit/test_template.py                  | 20 --------
 2 files changed, 68 deletions(-)

diff --git a/src/backend/base/langflow/interface/utils.py b/src/backend/base/langflow/interface/utils.py
index 986352f15..e9a475875 100644
--- a/src/backend/base/langflow/interface/utils.py
+++ b/src/backend/base/langflow/interface/utils.py
@@ -117,51 +117,3 @@ def set_langchain_cache(settings):
             logger.warning(f"Could not import {cache_type}. ")
     else:
         logger.info("No LLM cache set.")
-
-
-def build_template_from_class(name: str, type_to_cls_dict: Dict, add_function: bool = False):
-    classes = [item.__name__ for item in type_to_cls_dict.values()]
-
-    # Raise error if name is not in chains
-    if name not in classes:
-        raise ValueError(f"{name} not found.")
-
-    for _type, v in type_to_cls_dict.items():
-        if v.__name__ == name:
-            _class = v
-
-            # Get the docstring
-            docs = parse(_class.__doc__)
-
-            variables = {"_type": _type}
-
-            if "__fields__" in _class.__dict__:
-                for class_field_items, value in _class.__fields__.items():
-                    if class_field_items in ["callback_manager"]:
-                        continue
-                    variables[class_field_items] = {}
-                    for name_, value_ in value.__repr_args__():
-                        if name_ == "default_factory":
-                            try:
-                                variables[class_field_items]["default"] = get_default_factory(
-                                    module=_class.__base__.__module__,
-                                    function=value_,
-                                )
-                            except Exception:
-                                variables[class_field_items]["default"] = None
-                        elif name_ not in ["name"]:
-                            variables[class_field_items][name_] = value_
-
-                    variables[class_field_items]["placeholder"] = (
-                        docs.params[class_field_items] if class_field_items in docs.params else ""
-                    )
-            base_classes = get_base_classes(_class)
-            # Adding function to base classes to allow
-            # the output to be a function
-            if add_function:
-                base_classes.append("Callable")
-            return {
-                "template": format_dict(variables, name),
-                "description": docs.short_description or "",
-                "base_classes": base_classes,
-            }
diff --git a/tests/unit/test_template.py b/tests/unit/test_template.py
index 95ea4f528..49bc7bd4d 100644
--- a/tests/unit/test_template.py
+++ b/tests/unit/test_template.py
@@ -2,7 +2,6 @@ import importlib
 from typing import Dict, List, Optional
 
 import pytest
-from langflow.interface.utils import build_template_from_class
 from langflow.utils.util import build_template_from_function, get_base_classes, get_default_factory
 from pydantic import BaseModel
 
@@ -68,25 +67,6 @@ def test_build_template_from_function():
         build_template_from_function("NonExistent", type_to_loader_dict)
 
 
-# Test build_template_from_class
-def test_build_template_from_class():
-    type_to_cls_dict: Dict[str, type] = {"parent": Parent, "child": Child}
-
-    # Test valid input
-    result = build_template_from_class("Child", type_to_cls_dict)
-    assert result is not None
-    assert "template" in result
-    assert "description" in result
-    assert "base_classes" in result
-    assert "Child" in result["base_classes"]
-    assert "Parent" in result["base_classes"]
-    assert result["description"] == "Child Class"
-
-    # Test invalid input
-    with pytest.raises(ValueError, match="InvalidClass not found."):
-        build_template_from_class("InvalidClass", type_to_cls_dict)
-
-
 # Test get_base_classes
 def test_get_base_classes():
     base_classes_parent = get_base_classes(Parent)

From f9de8672aa83401d67a9703fa115f2e624262ced Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 17 Jun 2024 11:02:11 -0300
Subject: [PATCH 3/4] add text modal view for table render

---
 .../components/models/AnthropicModel.py       |  1 -
 .../components/models/ChatLiteLLMModel.py     |  4 +-
 .../langflow/components/models/GroqModel.py   |  3 +-
 .../components/models/HuggingFaceModel.py     |  3 +-
 .../langflow/components/models/OllamaModel.py |  3 +-
 .../custom_component/custom_component.py      |  1 -
 .../base/langflow/graph/vertex/base.py        |  2 +-
 src/backend/base/langflow/schema/schema.py    |  2 +-
 .../stringReaderComponent/index.tsx           |  9 ++-
 src/frontend/src/constants/constants.ts       |  1 +
 src/frontend/src/modals/textModal/index.tsx   | 61 +++++++++++++++++++
 11 files changed, 77 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/src/modals/textModal/index.tsx

diff --git a/src/backend/base/langflow/components/models/AnthropicModel.py b/src/backend/base/langflow/components/models/AnthropicModel.py
index 1c0fb6338..154bf970a 100644
--- a/src/backend/base/langflow/components/models/AnthropicModel.py
+++ b/src/backend/base/langflow/components/models/AnthropicModel.py
@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_anthropic.chat_models import ChatAnthropic
 from pydantic.v1 import SecretStr
diff --git a/src/backend/base/langflow/components/models/ChatLiteLLMModel.py b/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
index 2d0d1c7a0..99eda2afd 100644
--- a/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
+++ b/src/backend/base/langflow/components/models/ChatLiteLLMModel.py
@@ -1,4 +1,4 @@
-from typing import Any, Dict, Optional
+from typing import Optional
 
 from langchain_community.chat_models.litellm import ChatLiteLLM, ChatLiteLLMException
 from langflow.base.constants import STREAM_INFO_TEXT
@@ -177,4 +177,4 @@ class ChatLiteLLMModelComponent(LCModelComponent):
         )
 
         return output
-    
\ No newline at end of file
+    
diff --git a/src/backend/base/langflow/components/models/GroqModel.py b/src/backend/base/langflow/components/models/GroqModel.py
index edff619b7..b114abe2a 100644
--- a/src/backend/base/langflow/components/models/GroqModel.py
+++ b/src/backend/base/langflow/components/models/GroqModel.py
@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_groq import ChatGroq
 from langflow.base.models.groq_constants import MODEL_NAMES
@@ -103,4 +102,4 @@ class GroqModel(LCModelComponent):
             streaming=stream,
         )
 
-        return output
\ No newline at end of file
+        return output
diff --git a/src/backend/base/langflow/components/models/HuggingFaceModel.py b/src/backend/base/langflow/components/models/HuggingFaceModel.py
index 98cd8950e..f15caa786 100644
--- a/src/backend/base/langflow/components/models/HuggingFaceModel.py
+++ b/src/backend/base/langflow/components/models/HuggingFaceModel.py
@@ -1,4 +1,3 @@
-from typing import Optional
 
 from langchain_community.chat_models.huggingface import ChatHuggingFace
 from langchain_community.llms.huggingface_endpoint import HuggingFaceEndpoint
@@ -65,4 +64,4 @@ class HuggingFaceEndpointsComponent(LCModelComponent):
             raise ValueError("Could not connect to HuggingFace Endpoints API.") from e
 
         output = ChatHuggingFace(llm=llm)
-        return output
\ No newline at end of file
+        return output
diff --git a/src/backend/base/langflow/components/models/OllamaModel.py b/src/backend/base/langflow/components/models/OllamaModel.py
index bcca0b107..095554dcb 100644
--- a/src/backend/base/langflow/components/models/OllamaModel.py
+++ b/src/backend/base/langflow/components/models/OllamaModel.py
@@ -1,4 +1,3 @@
-from typing import Any, Dict, List, Optional
 
 from langchain_community.chat_models import ChatOllama
 from langflow.base.constants import STREAM_INFO_TEXT
@@ -226,4 +225,4 @@ class ChatOllamaComponent(LCModelComponent):
         except Exception as e:
             raise ValueError("Could not initialize Ollama LLM.") from e
 
-        return output
\ No newline at end of file
+        return output
diff --git a/src/backend/base/langflow/custom/custom_component/custom_component.py b/src/backend/base/langflow/custom/custom_component/custom_component.py
index e324a442a..9eec57693 100644
--- a/src/backend/base/langflow/custom/custom_component/custom_component.py
+++ b/src/backend/base/langflow/custom/custom_component/custom_component.py
@@ -21,7 +21,6 @@ from langflow.type_extraction.type_extraction import (
     extract_union_types_from_generic_alias,
 )
 from langflow.utils import validate
-from pydantic import BaseModel
 
 if TYPE_CHECKING:
     from langflow.graph.graph.base import Graph
diff --git a/src/backend/base/langflow/graph/vertex/base.py b/src/backend/base/langflow/graph/vertex/base.py
index 3e1db9063..4c1595c20 100644
--- a/src/backend/base/langflow/graph/vertex/base.py
+++ b/src/backend/base/langflow/graph/vertex/base.py
@@ -13,7 +13,7 @@ from langflow.graph.utils import UnbuiltObject, UnbuiltResult
 from langflow.interface.initialize import loading
 from langflow.interface.listing import lazy_load_dict
 from langflow.schema.artifact import ArtifactType
-from langflow.schema.schema import INPUT_FIELD_NAME, Log, build_logs
+from langflow.schema.schema import INPUT_FIELD_NAME, Log
 from langflow.services.deps import get_storage_service
 from langflow.services.monitor.utils import log_transaction
 from langflow.utils.constants import DIRECT_TYPES
diff --git a/src/backend/base/langflow/schema/schema.py b/src/backend/base/langflow/schema/schema.py
index 65aad288d..70e412186 100644
--- a/src/backend/base/langflow/schema/schema.py
+++ b/src/backend/base/langflow/schema/schema.py
@@ -1,4 +1,4 @@
-from typing import Any, Literal
+from typing import Literal
 
 from typing_extensions import TypedDict
 
diff --git a/src/frontend/src/components/stringReaderComponent/index.tsx b/src/frontend/src/components/stringReaderComponent/index.tsx
index 8b1b0e41f..1c4b6c0a7 100644
--- a/src/frontend/src/components/stringReaderComponent/index.tsx
+++ b/src/frontend/src/components/stringReaderComponent/index.tsx
@@ -1,7 +1,14 @@
+import TextModal from "../../modals/textModal";
+
 export default function StringReader({
   string,
 }: {
   string: string;
 }): JSX.Element {
-  return <span className="truncate">{string}</span>;
+  return (
+    string.length > 10 ?
+      <TextModal value={string}>
+        <span className="truncate">{string}</span>
+      </TextModal> : <span className="truncate">{string}</span>
+  );
 }
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 1c1ad8d82..e2c171f7a 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -141,6 +141,7 @@ export const CODE_PROMPT_DIALOG_SUBTITLE =
 
 export const CODE_DICT_DIALOG_SUBTITLE =
   "Edit your dictionary. This dialog allows you to create your own customized dictionary. You can add as many key-value pairs as you want. While in edit mode, you can enter ({}) or ([]), and this will result in adding a new object or array.";
+
 /**
  * The base text for subtitle of Prompt Dialog
  * @constant
diff --git a/src/frontend/src/modals/textModal/index.tsx b/src/frontend/src/modals/textModal/index.tsx
new file mode 100644
index 000000000..ff2ddad84
--- /dev/null
+++ b/src/frontend/src/modals/textModal/index.tsx
@@ -0,0 +1,61 @@
+import "ace-builds/src-noconflict/ace";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/mode-python";
+import "ace-builds/src-noconflict/theme-github";
+import "ace-builds/src-noconflict/theme-twilight";
+// import "ace-builds/webpack-resolver";
+import { cloneDeep } from "lodash";
+import { useEffect, useState } from "react";
+import JsonView from "react18-json-view";
+import "react18-json-view/src/dark.css";
+import "react18-json-view/src/style.css";
+import IconComponent from "../../components/genericIconComponent";
+import { CODE_DICT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants/constants";
+import { useDarkStore } from "../../stores/darkStore";
+import BaseModal from "../baseModal";
+import TextOutputView from "../../shared/components/textOutputView";
+import { Button } from "../../components/ui/button";
+
+export default function TextModal({
+  children,
+  value,
+}: {
+  children: JSX.Element;
+  value: Object;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+    >
+      <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
+      <BaseModal.Header
+        description={"Inspect the text below."}
+      >
+        <span className="pr-2">
+          {"View Text"}
+        </span>
+        <IconComponent
+          name="Type"
+          className="h-6 w-6 pl-1 text-primary"
+          aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all">
+            <TextOutputView value={value} left={false} />
+        </div>
+      </BaseModal.Content>
+      <BaseModal.Footer>
+        <div className="flex w-full justify-end pt-2">
+          <Button className="flex gap-2 px-3" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </BaseModal.Footer>
+    </BaseModal>
+  );
+}

From 8f5c224283116e56574ef76d131d343b4d649a7e Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Mon, 17 Jun 2024 11:15:03 -0300
Subject: [PATCH 4/4] Refactor flowStore.ts to improve build success alert
 logic

---
 src/frontend/src/stores/flowStore.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts
index 6d1c2ad5c..15c5cf590 100644
--- a/src/frontend/src/stores/flowStore.ts
+++ b/src/frontend/src/stores/flowStore.ts
@@ -542,15 +542,13 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
       onBuildComplete: (allNodesValid) => {
         const nodeId = startNodeId || stopNodeId;
         if (!silent) {
-          if (nodeId && allNodesValid) {
+          if (allNodesValid) {
             setSuccessData({
-              title: `${
+              title: nodeId?`${
                 get().nodes.find((node) => node.id === nodeId)?.data.node
                   ?.display_name
-              } built successfully`,
+              } built successfully`:FLOW_BUILD_SUCCESS_ALERT,
             });
-          } else {
-            setSuccessData({ title: FLOW_BUILD_SUCCESS_ALERT });
           }
         }
         get().setIsBuilding(false);