From 38f60933b2f8094501d289b268e8203ba3fc9ff5 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 17 Jun 2024 20:36:50 -0300
Subject: [PATCH] Modularized handle component

---
 .../handleRenderComponent/index.tsx           | 100 +++++++++++
 .../components/parameterComponent/index.tsx   | 169 +++---------------
 2 files changed, 127 insertions(+), 142 deletions(-)
 create mode 100644 src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
new file mode 100644
index 000000000..3307ca03b
--- /dev/null
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@@ -0,0 +1,100 @@
+import { Handle, Position } from "reactflow";
+import ShadTooltip from "../../../../components/shadTooltipComponent";
+import { Button } from "../../../../components/ui/button";
+import {
+  isValidConnection,
+  scapedJSONStringfy,
+} from "../../../../utils/reactflowUtils";
+import { classNames, cn, groupByFamily } from "../../../../utils/utils";
+import HandleTooltips from "../HandleTooltipComponent";
+import { title } from "process";
+
+export default function HandleRenderComponent({
+  left,
+  nodes,
+  tooltipTitle,
+  proxy,
+  id,
+  title,
+  edges,
+  myData,
+  colors,
+  setFilterEdge,
+  showNode,
+}) {
+  return (
+    <Button
+      unstyled
+      className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
+    >
+      <div className="flex">
+        <ShadTooltip
+          styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
+          delayDuration={1000}
+          content={
+            <HandleTooltips
+              left={left}
+              nodes={nodes}
+              tooltipTitle={tooltipTitle!}
+            />
+          }
+          side={left ? "left" : "right"}
+        >
+          <div>
+            <Handle
+              data-test-id={`handle-${title.toLowerCase()}-${
+                !showNode
+                  ? left
+                    ? "target"
+                    : "source"
+                  : left
+                    ? "left"
+                    : "right"
+              }`}
+              type={left ? "target" : "source"}
+              position={left ? Position.Left : Position.Right}
+              key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
+              id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
+              isValidConnection={(connection) =>
+                isValidConnection(connection, nodes, edges)
+              }
+              className={classNames(
+                left ? "-ml-1" : "-mr-1",
+                "z-20 h-4 w-4 rounded-full border-none bg-background",
+              )}
+              style={{
+                background:
+                  "conic-gradient(" +
+                  colors
+                    .map(
+                      (color, index) =>
+                        color +
+                        " " +
+                        (360 / colors.length) * index +
+                        "deg " +
+                        (360 / colors.length) * (index + 1) +
+                        "deg",
+                    )
+                    .join(" ,") +
+                  ")",
+                WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
+                maskImage: "radial-gradient(transparent 40%, black 44%)",
+              }}
+              onClick={() => {
+                setFilterEdge(
+                  groupByFamily(myData, tooltipTitle!, left, nodes!),
+                );
+              }}
+            />
+            <div
+              className={cn(
+                "absolute top-[50%] z-10 h-4 w-4 translate-y-[-50%] rounded-full bg-background",
+                left ? "-left-[4px] -ml-1" : "-right-[4px] -mr-1",
+              )}
+            />
+          </div>
+        </ShadTooltip>
+      </div>
+    </Button>
+  );
+}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 8e8657af4..dcf6f53d8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -49,6 +49,7 @@ import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
 import HandleTooltips from "../HandleTooltipComponent";
 import OutputComponent from "../OutputComponent";
+import HandleRenderComponent from "../handleRenderComponent";
 import OutputModal from "../outputModal";
 import { TEXT_FIELD_TYPES } from "./constants";
 
@@ -268,80 +269,19 @@ export default function ParameterComponent({
     left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
       <></>
     ) : (
-      <Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted">
-        <div className="flex">
-          <ShadTooltip
-            styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
-            delayDuration={1000}
-            content={
-              <HandleTooltips
-                left={left}
-                nodes={nodes}
-                tooltipTitle={tooltipTitle!}
-              />
-            }
-            side={left ? "left" : "right"}
-          >
-            <div>
-              <Handle
-                data-test-id={`handle-${title.toLowerCase()}-${
-                  left ? "target" : "source"
-                }`}
-                type={left ? "target" : "source"}
-                position={left ? Position.Left : Position.Right}
-                key={
-                  proxy
-                    ? scapedJSONStringfy({ ...id, proxy })
-                    : scapedJSONStringfy(id)
-                }
-                id={
-                  proxy
-                    ? scapedJSONStringfy({ ...id, proxy })
-                    : scapedJSONStringfy(id)
-                }
-                isValidConnection={(connection) =>
-                  isValidConnection(connection, nodes, edges)
-                }
-                className={classNames(
-                  left ? "my-12 -ml-1" : "my-12 -mr-1",
-                  "h-4 w-4 rounded-full border-2 bg-background",
-                  !showNode ? "mt-0" : "",
-                )}
-                style={{
-                  background:
-                    "conic-gradient(" +
-                    colors
-                      .map(
-                        (color, index) =>
-                          color +
-                          " " +
-                          (360 / colors.length) * index +
-                          "deg " +
-                          (360 / colors.length) * (index + 1) +
-                          "deg",
-                      )
-                      .join(" ,") +
-                    ")",
-                  WebkitMaskImage:
-                    "radial-gradient(transparent 40%, black 44%)",
-                  maskImage: "radial-gradient(transparent 40%, black 44%)",
-                }}
-                onClick={() => {
-                  setFilterEdge(
-                    groupByFamily(myData, tooltipTitle!, left, nodes!),
-                  );
-                }}
-              ></Handle>
-              <div
-                className={cn(
-                  left ? "my-12 -ml-1" : "my-12 -mr-1",
-                  "absolute -left-[4px] top-[50%] z-10 h-4 w-4 translate-y-[-50%] rounded-full bg-background",
-                )}
-              />
-            </div>
-          </ShadTooltip>
-        </div>
-      </Button>
+      <HandleRenderComponent
+        left={left}
+        nodes={nodes}
+        tooltipTitle={tooltipTitle}
+        proxy={proxy}
+        id={id}
+        title={title}
+        edges={edges}
+        myData={myData}
+        colors={colors}
+        setFilterEdge={setFilterEdge}
+        showNode={showNode}
+      />
     )
   ) : (
     <div
@@ -452,74 +392,19 @@ export default function ParameterComponent({
         {left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
           <></>
         ) : (
-          <Button
-            unstyled
-            className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
-          >
-            <div className="flex">
-              <ShadTooltip
-                styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
-                delayDuration={1000}
-                content={
-                  <HandleTooltips
-                    left={left}
-                    nodes={nodes}
-                    tooltipTitle={tooltipTitle!}
-                  />
-                }
-                side={left ? "left" : "right"}
-              >
-                <div>
-                  <Handle
-                    data-test-id={`handle-${title.toLowerCase()}-${
-                      left ? "left" : "right"
-                    }`}
-                    type={left ? "target" : "source"}
-                    position={left ? Position.Left : Position.Right}
-                    key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
-                    id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
-                    isValidConnection={(connection) =>
-                      isValidConnection(connection, nodes, edges)
-                    }
-                    className={classNames(
-                      left ? "-ml-1" : "-mr-1",
-                      "z-20 h-4 w-4 rounded-full border-none bg-background",
-                    )}
-                    style={{
-                      background:
-                        "conic-gradient(" +
-                        colors
-                          .map(
-                            (color, index) =>
-                              color +
-                              " " +
-                              (360 / colors.length) * index +
-                              "deg " +
-                              (360 / colors.length) * (index + 1) +
-                              "deg",
-                          )
-                          .join(" ,") +
-                        ")",
-                      WebkitMaskImage:
-                        "radial-gradient(transparent 40%, black 44%)",
-                      maskImage: "radial-gradient(transparent 40%, black 44%)",
-                    }}
-                    onClick={() => {
-                      setFilterEdge(
-                        groupByFamily(myData, tooltipTitle!, left, nodes!),
-                      );
-                    }}
-                  />
-                  <div
-                    className={cn(
-                      "absolute top-[50%] z-10 h-4 w-4 translate-y-[-50%] rounded-full bg-background",
-                      left ? "-left-[4px] -ml-1" : "-right-[4px] -mr-1",
-                    )}
-                  />
-                </div>
-              </ShadTooltip>
-            </div>
-          </Button>
+          <HandleRenderComponent
+            left={left}
+            nodes={nodes}
+            tooltipTitle={tooltipTitle}
+            proxy={proxy}
+            id={id}
+            title={title}
+            edges={edges}
+            myData={myData}
+            colors={colors}
+            setFilterEdge={setFilterEdge}
+            showNode={showNode}
+          />
         )}
 
         <Case