UI Improvements: tooltip, classes icons e icons

src/frontend/package-lock.json

@@ -32,6 +32,7 @@
                 "react-router-dom": "^6.8.1",
                 "react-syntax-highlighter": "^15.5.0",
                 "react-tabs": "^6.0.0",
+                "react-tooltip": "^5.13.1",
                 "reactflow": "^11.5.5",
                 "rehype-mathjax": "^4.0.2",
                 "remark-gfm": "^3.0.1",
@@ -953,6 +954,19 @@
                 "node": ">=12"
             }
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz",
+            "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg=="
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.2.9",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.9.tgz",
+            "integrity": "sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ==",
+            "dependencies": {
+                "@floating-ui/core": "^1.2.6"
+            }
+        },
         "node_modules/@headlessui/react": {
             "version": "1.7.10",
             "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.10.tgz",
@@ -2731,6 +2745,11 @@
             "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
             "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g=="
         },
+        "node_modules/classnames": {
+            "version": "2.3.2",
+            "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+            "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+        },
         "node_modules/client-only": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -6048,6 +6067,19 @@
                 "react": "^18.0.0"
             }
         },
+        "node_modules/react-tooltip": {
+            "version": "5.13.1",
+            "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.13.1.tgz",
+            "integrity": "sha512-9NstDFdjyy6cIH9zjeT70zXTHlW/TIGCOWQmhkAyqLFeQioLg1FXvb9ec7AxSpn0zyFUkFSLdFYxZRuewti3Aw==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.0.0",
+                "classnames": "^2.3.0"
+            },
+            "peerDependencies": {
+                "react": ">=16.14.0",
+                "react-dom": ">=16.14.0"
+            }
+        },
         "node_modules/react-transition-group": {
             "version": "4.4.5",
             "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

src/frontend/package.json

@@ -27,6 +27,7 @@
         "react-router-dom": "^6.8.1",
         "react-syntax-highlighter": "^15.5.0",
         "react-tabs": "^6.0.0",
+        "react-tooltip": "^5.13.1",
         "reactflow": "^11.5.5",
         "rehype-mathjax": "^4.0.2",
         "remark-gfm": "^3.0.1",

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -28,6 +28,7 @@ import NodeModal from "../../modals/NodeModal";
 import { useCallback } from "react";
 import { TabsContext } from "../../contexts/tabsContext";
 import { debounce } from "../../utils";
+import TooltipReact from "../../components/ReactTooltipComponent";
 import Tooltip from "../../components/TooltipComponent";
 export default function GenericNode({
   data,
@@ -111,9 +112,17 @@ export default function GenericNode({
               color: nodeColors[types[data.type]] ?? nodeColors.unknown,
             }}
           />
-          <Tooltip title={data.type} placement="top">
+          <div className="ml-2 truncate">
+            <TooltipReact
+              delayShow={1000}
+              selector={`node-selector-${data.type}`}
+              htmlContent={data.type}
+              position="top"
+            >
               <div className="ml-2 truncate">{data.type}</div>
-          </Tooltip>
+            </TooltipReact>
+          </div>
+
           <div>
             <Tooltip
               title={
@@ -128,31 +137,28 @@ export default function GenericNode({
                 )
               }
             >
-              <div className="relative w-5 h-5">
+              <div className="relative w-5 h-5 top-1 left-1">
-                <CheckCircleIcon
+                <div
                   className={classNames(
                     validationStatus && validationStatus.valid
-                      ? "text-green-500 opacity-100"
+                      ? "w-4 h-4 rounded-full bg-green-500 opacity-100"
-                      : "text-green-500 opacity-0 animate-spin",
+                      : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden"
-                    "absolute w-5 hover:text-gray-500 hover:dark:text-gray-300 transition-all ease-in-out duration-200"
                   )}
-                />
+                ></div>
-                <ExclamationCircleIcon
+                <div
                   className={classNames(
                     validationStatus && !validationStatus.valid
-                      ? "text-red-500 opacity-100"
+                      ? "w-4 h-4 rounded-full bg-yellow-500 opacity-100"
-                      : "text-red-500 opacity-0 animate-spin",
+                      : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden"
-                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-200"
                   )}
-                />
+                ></div>
-                <EllipsisHorizontalCircleIcon
+                <div
                   className={classNames(
                     !validationStatus
-                      ? "text-yellow-500 opacity-100"
+                      ? "w-4 h-4 rounded-full bg-red-500 opacity-100"
-                      : "text-yellow-500 opacity-0 animate-spin",
+                      : "w-4 h-4 rounded-full bg-gray-500 opacity-0 hidden"
-                    "w-5 absolute hover:text-gray-500 hover:dark:text-gray-600 transition-all ease-in-out duration-300"
                   )}
-                />
+                ></div>
               </div>
             </Tooltip>
           </div>
@@ -182,7 +188,7 @@ export default function GenericNode({
                 )
                   ? ""
                   : "hidden",
-                "w-6 h-6  dark:text-gray-300  hover:animate-spin-once"
+                "w-6 h-6  dark:text-gray-300"
               )}
             ></Cog6ToothIcon>
           </button>
@@ -191,7 +197,7 @@ export default function GenericNode({
               deleteNode(data.id);
             }}
           >
-            <TrashIcon className="w-6 h-6 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500"></TrashIcon>
+            <TrashIcon className="w-6 h-6 dark:text-gray-300"></TrashIcon>
           </button>
         </div>
       </div>

src/frontend/src/components/ReactTooltipComponent/index.tsx

@@ -0,0 +1,54 @@
+"use client";
+import type { FC } from "react";
+import React from "react";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+import "react-tooltip/dist/react-tooltip.css";
+import { classNames } from "../../utils";
+
+type TooltipProps = {
+  selector: string;
+  content?: string;
+  disabled?: boolean;
+  htmlContent?: React.ReactNode;
+  className?: string; // This should use !impornant to override the default styles eg: '!bg-white'
+  position?: "top" | "right" | "bottom" | "left";
+  clickable?: boolean;
+  children: React.ReactNode;
+  delayShow?: number;
+};
+
+const TooltipReact: FC<TooltipProps> = ({
+  selector,
+  content,
+  disabled,
+  position = "top",
+  children,
+  htmlContent,
+  className,
+  clickable,
+  delayShow,
+}) => {
+  return (
+    <div className="tooltip-container">
+      {React.cloneElement(children as React.ReactElement, {
+        "data-tooltip-id": selector,
+      })}
+      <ReactTooltip
+        id={selector}
+        content={content}
+        className={classNames(
+          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-lg !opacity-100 z-10",
+          className
+        )}
+        place={position}
+        clickable={clickable}
+        isOpen={disabled ? false : undefined}
+        delayShow={delayShow}
+      >
+        {htmlContent && htmlContent}
+      </ReactTooltip>
+    </div>
+  );
+};
+
+export default TooltipReact;

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -4,7 +4,7 @@ import { nodeColors, nodeIcons, nodeNames } from "../../../../utils";
 import { useContext, useEffect, useState } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
-import Tooltip from "../../../../components/TooltipComponent";
+import TooltipReact from "../../../../components/ReactTooltipComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -34,8 +34,14 @@ export default function ExtraSidebar() {
               {Object.keys(data[d])
                 .sort()
                 .map((t: string, k) => (
-                  <Tooltip title={t.length > 21 ? t : ""} placement="right">
+                  <TooltipReact
-                    <div key={k}>
+                    selector={t}
+                    htmlContent={t}
+                    position="right"
+                    delayShow={1500}
+                    key={k}
+                  >
+                    <div key={k} data-tooltip-id={t}>
                       <div
                         draggable
                         className={" cursor-grab border-l-8 rounded-l-md"}
@@ -57,7 +63,7 @@ export default function ExtraSidebar() {
                         </div>
                       </div>
                     </div>
-                  </Tooltip>
+                  </TooltipReact>
                 ))}
               {Object.keys(data[d]).length === 0 && (
                 <div className="text-gray-400 text-center">Coming soon</div>