Add shadTooltip for Edge Class Grouping (#434)

Description:
This pull request introduces a new feature that installs the shadTooltip
library into the project. Additionally, it enhances the tooltip
functionality by grouping the tooltips based on their associated edge
classes.

Changes Made:
Added the shadTooltip library to the project dependencies.
Implemented logic to group tooltips based on their respective edge
classes.
Updated the tooltip rendering code to display grouped tooltips on the
edges.

src/frontend/package-lock.json

@@ -13,6 +13,7 @@
                 "@headlessui/react": "^1.7.10",
                 "@heroicons/react": "^2.0.15",
                 "@mui/material": "^5.11.9",
+                "@radix-ui/react-tooltip": "^1.0.6",
                 "@tabler/icons-react": "^2.18.0",
                 "@tailwindcss/forms": "^0.5.3",
                 "@tailwindcss/line-clamp": "^0.4.4",
@@ -20,7 +21,10 @@
                 "ansi-to-html": "^0.7.2",
                 "axios": "^1.3.2",
                 "base64-js": "^1.5.1",
+                "class-variance-authority": "^0.6.0",
+                "clsx": "^1.2.1",
                 "lodash": "^4.17.21",
+                "lucide-react": "^0.233.0",
                 "react": "^18.2.0",
                 "react-ace": "^10.1.0",
                 "react-cookie": "^4.1.1",
@@ -37,6 +41,8 @@
                 "rehype-mathjax": "^4.0.2",
                 "remark-gfm": "^3.0.1",
                 "remark-math": "^5.1.1",
+                "tailwind-merge": "^1.13.0",
+                "tailwindcss-animate": "^1.0.5",
                 "uuid": "^9.0.0",
                 "vite-plugin-svgr": "^3.2.0",
                 "web-vitals": "^2.1.4"
@@ -911,6 +917,18 @@
                 "@floating-ui/core": "^1.2.6"
             }
         },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.0.tgz",
+            "integrity": "sha512-Ke0oU3SeuABC2C4OFu2mSAwHIP5WUiV98O9YWoHV4Q5aT6E9k06DV0Khi5uYspR8xmmBk08t8ZDcz3TR3ARkEg==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.2.7"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
         "node_modules/@headlessui/react": {
             "version": "1.7.10",
             "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.10.tgz",
@@ -1274,6 +1292,407 @@
                 "url": "https://opencollective.com/popperjs"
             }
         },
+        "node_modules/@radix-ui/primitive": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+            "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "node_modules/@radix-ui/react-arrow": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+            "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+            "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-context": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+            "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-dismissable-layer": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz",
+            "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-escape-keydown": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-id": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+            "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-popper": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
+            "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1",
+                "@radix-ui/react-use-rect": "1.0.1",
+                "@radix-ui/react-use-size": "1.0.1",
+                "@radix-ui/rect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-portal": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz",
+            "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-presence": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+            "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-primitive": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+            "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-slot": "1.0.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-slot": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+            "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-tooltip": {
+            "version": "1.0.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.6.tgz",
+            "integrity": "sha512-DmNFOiwEc2UDigsYj6clJENma58OelxD24O4IODoZ+3sQc3Zb+L8w1EP+y9laTuKCLAysPw4fD6/v0j4KNV8rg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.4",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.2",
+                "@radix-ui/react-portal": "1.0.3",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-visually-hidden": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-callback-ref": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+            "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+            "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-escape-keydown": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+            "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+            "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+            "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/rect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-size": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+            "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-visually-hidden": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
+            "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+            "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "node_modules/@reactflow/background": {
             "version": "11.1.7",
             "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.1.7.tgz",
@@ -2422,7 +2841,7 @@
             "version": "18.2.4",
             "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.4.tgz",
             "integrity": "sha512-G2mHoTMTL4yoydITgOGwWdWMVd8sNgyEP85xVmMKAPUBwQWm9wBPQUmvbeF4V3WBY1P7mmL4BkjQ0SqUpf1snw==",
-            "dev": true,
+            "devOptional": true,
             "dependencies": {
                 "@types/react": "*"
             }
@@ -2947,6 +3366,25 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/class-variance-authority": {
+            "version": "0.6.0",
+            "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.6.0.tgz",
+            "integrity": "sha512-qdRDgfjx3GRb9fpwpSvn+YaidnT7IUJNe4wt5/SWwM+PmUwJUhQRk/8zAyNro0PmVfmen2635UboTjIBXXxy5A==",
+            "dependencies": {
+                "clsx": "1.2.1"
+            },
+            "funding": {
+                "url": "https://joebell.co.uk"
+            },
+            "peerDependencies": {
+                "typescript": ">= 4.5.5 < 6"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/classcat": {
             "version": "5.0.4",
             "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz",
@@ -4728,6 +5166,14 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/lucide-react": {
+            "version": "0.233.0",
+            "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.233.0.tgz",
+            "integrity": "sha512-r0jMHF0vPDq2wBbZ0B3rtIcBjDyWDKpHu+vAjD2OHn2WLUr3HN5IHovtO0EMgQXuSI7YrMZbjsEZWC2uBHr8nQ==",
+            "peerDependencies": {
+                "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/lz-string": {
             "version": "1.4.4",
             "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
@@ -7001,6 +7447,15 @@
             "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
             "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
         },
+        "node_modules/tailwind-merge": {
+            "version": "1.13.0",
+            "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.13.0.tgz",
+            "integrity": "sha512-mUTmDbcU+IhOvJ0c42eLQ/nRkvolTqfpVaVQRSxfJAv9TabS6Y2zW/1wKpKLdKzyL3Gh8j6NTLl6MWNmvOM6kA==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/dcastil"
+            }
+        },
         "node_modules/tailwindcss": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
@@ -7038,6 +7493,14 @@
                 "node": ">=14.0.0"
             }
         },
+        "node_modules/tailwindcss-animate": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.5.tgz",
+            "integrity": "sha512-UU3qrOJ4lFQABY+MVADmBm+0KW3xZyhMdRvejwtXqYOL7YjHYxmuREFAZdmVG5LPe5E9CAst846SLC4j5I3dcw==",
+            "peerDependencies": {
+                "tailwindcss": ">=3.0.0 || insiders"
+            }
+        },
         "node_modules/terser": {
             "version": "5.16.3",
             "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.3.tgz",
@@ -7156,7 +7619,7 @@
             "version": "5.0.4",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
             "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
-            "dev": true,
+            "devOptional": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"

src/frontend/package.json

@@ -8,6 +8,7 @@
         "@headlessui/react": "^1.7.10",
         "@heroicons/react": "^2.0.15",
         "@mui/material": "^5.11.9",
+        "@radix-ui/react-tooltip": "^1.0.6",
         "@tabler/icons-react": "^2.18.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/line-clamp": "^0.4.4",
@@ -15,7 +16,10 @@
         "ansi-to-html": "^0.7.2",
         "axios": "^1.3.2",
         "base64-js": "^1.5.1",
+        "class-variance-authority": "^0.6.0",
+        "clsx": "^1.2.1",
         "lodash": "^4.17.21",
+        "lucide-react": "^0.233.0",
         "react": "^18.2.0",
         "react-ace": "^10.1.0",
         "react-cookie": "^4.1.1",
@@ -32,6 +36,8 @@
         "rehype-mathjax": "^4.0.2",
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
+        "tailwind-merge": "^1.13.0",
+        "tailwindcss-animate": "^1.0.5",
         "uuid": "^9.0.0",
         "vite-plugin-svgr": "^3.2.0",
         "web-vitals": "^2.1.4"

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

@@ -1,6 +1,11 @@
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import Tooltip from "../../../../components/TooltipComponent";
-import { classNames, isValidConnection } from "../../../../utils";
+import {
+  classNames,
+  groupByFamily,
+  isValidConnection,
+  toFirstUpperCase,
+} from "../../../../utils";
 import { useContext, useEffect, useRef, useState } from "react";
 import InputComponent from "../../../../components/inputComponent";
 import ToggleComponent from "../../../../components/toggleComponent";
@@ -15,6 +20,10 @@ import InputFileComponent from "../../../../components/inputFileComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import IntComponent from "../../../../components/intComponent";
 import PromptAreaComponent from "../../../../components/promptComponent";
+import { nodeNames, nodeIcons } from "../../../../utils";
+import React from "react";
+import { nodeColors } from "../../../../utils";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
 
 export default function ParameterComponent({
   left,
@@ -28,6 +37,7 @@ export default function ParameterComponent({
   required = false,
 }: ParameterComponentType) {
   const ref = useRef(null);
+  const refHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   useEffect(() => {
@@ -48,6 +58,48 @@ export default function ParameterComponent({
   let disabled =
     reactFlowInstance?.getEdges().some((e) => e.targetHandle === id) ?? false;
   const { save } = useContext(TabsContext);
+  const [myData, setMyData] = useState(useContext(typesContext).data);
+
+  useEffect(() => {
+    const groupedObj = groupByFamily(myData, tooltipTitle);
+
+    refHtml.current = groupedObj.map((item, i) => (
+      <span
+        key={item}
+        className={classNames(
+          i > 0 ? "items-center flex mt-3" : "items-center flex"
+        )}
+      >
+        <div
+          className="h-5 w-5"
+          style={{
+            color: nodeColors[item.family],
+          }}
+        >
+          {React.createElement(nodeIcons[item.family])}
+        </div>
+        <span className="ps-2 text-gray-950">
+          {nodeNames[item.family] ?? ""}{" "}
+          <span className={classNames(left ? "hidden" : "")}>
+            {" "}
+            -&nbsp;
+            {item.type.split(", ").length > 2
+              ? item.type.split(", ").map((el, i) => (
+                  <>
+                    <span key={el}>
+                      {i == item.type.split(", ").length - 1
+                        ? el
+                        : (el += `, `)}
+                    </span>
+                    {i % 2 == 0 && i > 0 && <br></br>}
+                  </>
+                ))
+              : item.type}
+          </span>
+        </span>
+      </span>
+    ));
+  }, [tooltipTitle]);
 
   return (
     <div
@@ -69,7 +121,11 @@ export default function ParameterComponent({
           type === "int") ? (
           <></>
         ) : (
-          <Tooltip title={tooltipTitle + (required ? " (required)" : "")}>
+          <ShadTooltip
+            delayDuration={0}
+            content={refHtml.current}
+            side={left ? "left" : "right"}
+          >
             <Handle
               type={left ? "target" : "source"}
               position={left ? Position.Left : Position.Right}
@@ -86,7 +142,7 @@ export default function ParameterComponent({
                 top: position,
               }}
             ></Handle>
-          </Tooltip>
+          </ShadTooltip>
         )}
 
         {left === true &&

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

@@ -28,8 +28,8 @@ 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";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 export default function GenericNode({
   data,
   selected,
@@ -115,14 +115,9 @@ export default function GenericNode({
             }}
           />
           <div className="ml-2 truncate">
-            <TooltipReact
+            <ShadTooltip delayDuration={1500} content={data.type}>
-              delayShow={1000}
-              selector={`node-selector-${data.type}`}
-              htmlContent={data.type}
-              position="top"
-            >
               <div className="ml-2 truncate">{data.type}</div>
-            </TooltipReact>
+            </ShadTooltip>
           </div>
         </div>
         <div className="flex gap-3">
@@ -253,11 +248,7 @@ export default function GenericNode({
                         : toTitleCase(t)
                     }
                     name={t}
-                    tooltipTitle={
+                    tooltipTitle={data.node.template[t].type}
-                      "Type: " +
-                      data.node.template[t].type +
-                      (data.node.template[t].list ? " list" : "")
-                    }
                     required={data.node.template[t].required}
                     id={data.node.template[t].type + "|" + t + "|" + data.id}
                     left={true}
@@ -283,7 +274,7 @@ export default function GenericNode({
             data={data}
             color={nodeColors[types[data.type]] ?? nodeColors.unknown}
             title={data.type}
-            tooltipTitle={`Type: ${data.node.base_classes.join(" | ")}`}
+            tooltipTitle={`${data.node.base_classes.join("\n")}`}
             id={[data.type, data.id, ...data.node.base_classes].join("|")}
             type={data.node.base_classes.join("|")}
             left={false}

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

@@ -37,13 +37,15 @@ const TooltipReact: FC<TooltipProps> = ({
         id={selector}
         content={content}
         className={classNames(
-          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-20",
+          "!bg-white !text-xs !font-normal !text-gray-700 !shadow-md !opacity-100 z-[9999]",
           className
         )}
         place={position}
         clickable={clickable}
         isOpen={disabled ? false : undefined}
         delayShow={delayShow}
+        positionStrategy="absolute"
+        float={true}
       >
         {htmlContent && htmlContent}
       </ReactTooltip>

src/frontend/src/components/ShadTooltipComponent/index.tsx

@@ -0,0 +1,25 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+
+const ShadTooltip = (props) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={props.delayDuration}>
+        <TooltipTrigger asChild>{props.children}</TooltipTrigger>
+        <TooltipContent
+          side={props.side}
+          avoidCollisions={false}
+          sticky="always"
+        >
+          {props.content}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+};
+
+export default ShadTooltip;

src/frontend/src/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "../../utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+      className
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/frontend/src/index.css

@@ -2,22 +2,88 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+    --ring: 215 20.2% 65.1%;
+    --radius: 0.5rem;
+	}
+  
+  .dark {
+    -background: 224 71% 4%;
+    -foreground: 213 31% 91%;
+    -muted: 223 47% 11%;
+    -muted-foreground: 215.4 16.3% 56.9%;
+    -popover: 224 71% 4%;
+    -popover-foreground: 215 20.2% 65.1%;
+    -card: 224 71% 4%;
+    -card-foreground: 213 31% 91%;
+    -border: 216 34% 17%;
+    -input: 216 34% 17%;
+    -primary: 210 40% 98%;
+    -primary-foreground: 222.2 47.4% 1.2%;
+    -secondary: 222.2 47.4% 11.2%;
+    -secondary-foreground: 210 40% 98%;
+    -accent: 216 34% 17%;
+    -accent-foreground: 210 40% 98%;
+    -destructive: 0 63% 31%;
+    -destructive-foreground: 210 40% 98%;
+    -ring: 216 34% 17%;
+    -radius: 0.5rem;
+	}
+}
+  
+  @layer base {
+	* {
+	  @apply border-border;
+	}
+	body {
+	  @apply bg-background text-foreground;
+	  font-feature-settings: "rlig" 1, "calt" 1;
+	}
+  }
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
 body {
-	margin: 0;
+  margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-		"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-		sans-serif;
+    sans-serif;
-	-webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-	font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-		monospace;
+    monospace;
 }
 
-/* The style below sets the cursor property of the element with the class .react-flow__pane to the default cursor.
-The cursor: default; property value restores the browser's default cursor style for the targeted element. By applying this style, the element will no longer have a custom cursor appearance such as "grab" or any other custom cursor defined elsewhere in the application. Instead, it will revert to the default cursor style determined by the browser, typically an arrow-shaped cursor. */
 .react-flow__pane {
   cursor: default;
 }

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

@@ -9,8 +9,8 @@ import {
 import { useContext, useEffect, useState, useRef } from "react";
 import { typesContext } from "../../../../contexts/typesContext";
 import { APIClassType, APIObjectType } from "../../../../types/api";
-import TooltipReact from "../../../../components/ReactTooltipComponent";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import ShadTooltip from "../../../../components/ShadTooltipComponent";
 
 export default function ExtraSidebar() {
   const { data } = useContext(typesContext);
@@ -84,12 +84,10 @@ export default function ExtraSidebar() {
                   {Object.keys(dataFilter[d])
                     .sort()
                     .map((t: string, k) => (
-                      <TooltipReact
+                      <ShadTooltip
-                        selector={t}
+                        content={t}
-                        htmlContent={t}
+                        delayDuration={1500}
-                        position="right"
+                        side="right"
-                        delayShow={1500}
-                        key={k}
                       >
                         <div key={k} data-tooltip-id={t}>
                           <div
@@ -121,7 +119,7 @@ export default function ExtraSidebar() {
                             </div>
                           </div>
                         </div>
-                      </TooltipReact>
+                      </ShadTooltip>
                     ))}
                 </div>
               </DisclosureComponent>

src/frontend/src/types/components/index.ts

@@ -3,6 +3,7 @@ import {
   ReactElement,
   ReactFragment,
   ReactNode,
+  SVGProps,
 } from "react";
 import { NodeDataType } from "../flow/index";
 export type InputComponentType = {

src/frontend/src/utils.ts

@@ -48,6 +48,12 @@ import { WolframIcon } from "./icons/Wolfram";
 import { WordIcon } from "./icons/Word";
 import { SerperIcon } from "./icons/Serper";
 import { v4 as uuidv4 } from "uuid";
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
 
 export function classNames(...classes: Array<string>) {
   return classes.filter(Boolean).join(" ");
@@ -635,3 +641,58 @@ export function updateIds(newFlow, getNodeId) {
       e.targetHandle;
   });
 }
+
+export function groupByFamily(data, baseClasses) {
+  let arrOfParent: string[] = [];
+  let arrOfType: { family: string; type: string }[] = [];
+
+  Object.keys(data).map((d) => {
+    Object.keys(data[d]).map((n) => {
+      if (
+        data[d][n].base_classes.some((r) => baseClasses.split("\n").includes(r))
+      ) {
+        arrOfParent.push(d);
+      }
+    });
+  });
+
+  let uniq = arrOfParent.filter(
+    (item, index) => arrOfParent.indexOf(item) === index
+  );
+
+  Object.keys(data).map((d) => {
+    Object.keys(data[d]).map((n) => {
+      baseClasses.split("\n").forEach((tol) => {
+        data[d][n].base_classes.forEach((data) => {
+          if (tol == data) {
+            arrOfType.push({
+              family: d,
+              type: data,
+            });
+          }
+        });
+      });
+    });
+  });
+
+  let groupedBy = arrOfType.filter((object, index, self) => {
+    const foundIndex = self.findIndex(
+      (o) => o.family === object.family && o.type === object.type
+    );
+    return foundIndex === index;
+  });
+
+  let groupedObj = groupedBy.reduce((result, item) => {
+    const existingGroup = result.find((group) => group.family === item.family);
+
+    if (existingGroup) {
+      existingGroup.type += `, ${item.type}`;
+    } else {
+      result.push({ family: item.family, type: item.type });
+    }
+
+    return result;
+  }, []);
+
+  return groupedObj;
+}

src/frontend/tailwind.config.js

@@ -1,11 +1,83 @@
 /** @type {import('tailwindcss').Config} */
+const { fontFamily } = require("tailwindcss/defaultTheme")
+
 import plugin from "tailwindcss/plugin";
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,tsx,jsx}"],
   darkMode: "class",
   important: true,
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+        pulseGreen: {
+          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
+          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-green": "pulseGreen 1s linear",
+        'spin-once': 'spin 1s linear 0.7'
+      },
       borderColor: {
         "red-outline": "rgba(255, 0, 0, 0.8)",
         "green-outline": "rgba(72, 187, 120, 0.7)",
@@ -14,17 +86,6 @@ module.exports = {
         "red-outline": "0 0 5px rgba(255, 0, 0, 0.5)",
         "green-outline": "0 0 5px rgba(72, 187, 120, 0.7)",
       },
-
-      animation: {
-        "pulse-green": "pulseGreen 1s linear",
-        'spin-once': 'spin 1s linear 0.7'
-      },
-      keyframes: {
-        pulseGreen: {
-          "0%": { boxShadow: "0 0 0 0 rgba(72, 187, 120, 0.7)" },
-          "100%": { boxShadow: "0 0 0 10px rgba(72, 187, 120, 0)" },
-        },
-      },
     },
   },
   plugins: [
@@ -96,4 +157,4 @@ module.exports = {
     }),
     require("@tailwindcss/typography"),
   ],
-};
+};

src/frontend/tsconfig.json

@@ -19,7 +19,8 @@
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "baseUrl": "."
   },
   "include": [
     "src"