From c31cf6fd1e4ae44fcebf1827042cfe57da639a88 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 19 Jun 2024 15:46:17 -0300
Subject: [PATCH] Fixed handle tooltip being on the wrong place

---
 .../handleRenderComponent/index.tsx           | 128 ++++++++----------
 .../components/parameterComponent/index.tsx   |   7 -
 2 files changed, 58 insertions(+), 77 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
index acee26724..4e53881d4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
@@ -39,77 +39,65 @@ export default function HandleRenderComponent({
       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!}
-            />
+      <ShadTooltip
+        styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
+        delayDuration={1000}
+        content={
+          <HandleTooltips
+            left={left}
+            nodes={nodes}
+            tooltipTitle={tooltipTitle!}
+          />
+        }
+        side={left ? "left" : "right"}
+      >
+        <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)
           }
-          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-0.5" : "-mr-0.5",
-                "z-20 h-3 w-3 rounded-full border-none bg-background",
-              )}
-              style={{
-                background:
-                  "conic-gradient(" +
-                  colors
-                    .concat(colors[0])
-                    .map(
-                      (color, index) =>
-                        color +
-                        " " +
-                        ((360 / colors.length) * index -
-                          360 / (colors.length * 4)) +
-                        "deg " +
-                        ((360 / colors.length) * index +
-                          360 / (colors.length * 4)) +
-                        "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-3 w-3 translate-y-[-50%] rounded-full bg-background",
-                left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
-              )}
-            />
-          </div>
-        </ShadTooltip>
-      </div>
+          className={classNames(
+            left ? "-ml-0.5" : "-mr-0.5",
+            "z-20 h-3 w-3 rounded-full border-none bg-background",
+          )}
+          style={{
+            background:
+              "conic-gradient(" +
+              colors
+                .concat(colors[0])
+                .map(
+                  (color, index) =>
+                    color +
+                    " " +
+                    ((360 / colors.length) * index -
+                      360 / (colors.length * 4)) +
+                    "deg " +
+                    ((360 / colors.length) * index +
+                      360 / (colors.length * 4)) +
+                    "deg",
+                )
+                .join(" ,") +
+              ")",
+            WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
+            maskImage: "radial-gradient(transparent 40%, black 44%)",
+          }}
+          onClick={() => {
+            setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
+          }}
+        />
+      </ShadTooltip>
+      <div
+        className={cn(
+          "absolute top-[50%] z-10 h-3 w-3 translate-y-[-50%] rounded-full bg-background",
+          left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
+        )}
+      />
     </Button>
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index abb905d95..a220f98b4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -35,20 +35,17 @@ import {
   convertObjToArray,
   convertValuesToNumbers,
   hasDuplicateKeys,
-  isValidConnection,
   scapedJSONStringfy,
 } from "../../../../utils/reactflowUtils";
 import {
   classNames,
   cn,
-  groupByFamily,
   isThereModal,
 } from "../../../../utils/utils";
 import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 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";
@@ -74,9 +71,7 @@ export default function ParameterComponent({
   outputProxy,
 }: ParameterComponentType): JSX.Element {
   const ref = useRef<HTMLDivElement>(null);
-  const refHtml = useRef<HTMLDivElement & ReactNode>(null);
   const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
-  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const nodes = useFlowStore((state) => state.nodes);
   const edges = useFlowStore((state) => state.edges);
   const setNode = useFlowStore((state) => state.setNode);
@@ -85,8 +80,6 @@ export default function ParameterComponent({
   const [isLoading, setIsLoading] = useState(false);
   const updateNodeInternals = useUpdateNodeInternals();
   const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
-  const flow = currentFlow?.data?.nodes ?? null;
-  const groupedEdge = useRef(null);
   const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
   const [openOutputModal, setOpenOutputModal] = useState(false);
   const flowPool = useFlowStore((state) => state.flowPool);