From 92668daf1994f218ee9dc1d3704c38ea4db27214 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Mon, 29 May 2023 22:11:03 -0300 Subject: [PATCH] UI Improvements: tooltip, classes icons e icons --- src/frontend/package-lock.json | 32 +++++++++++ src/frontend/package.json | 3 +- .../src/CustomNodes/GenericNode/index.tsx | 48 +++++++++-------- .../ReactTooltipComponent/index.tsx | 54 +++++++++++++++++++ .../extraSidebarComponent/index.tsx | 14 +++-- 5 files changed, 125 insertions(+), 26 deletions(-) create mode 100644 src/frontend/src/components/ReactTooltipComponent/index.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 607f4946c..b4a889fcc 100644 --- a/src/frontend/package-lock.json +++ b/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", diff --git a/src/frontend/package.json b/src/frontend/package.json index 20c62c11d..5b31a177f 100644 --- a/src/frontend/package.json +++ b/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", @@ -78,4 +79,4 @@ "typescript": "^5.0.2", "vite": "^4.3.5" } -} \ No newline at end of file +} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index 572210728..096cdb32c 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/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, }} /> - -
{data.type}
- +
+ +
{data.type}
+ +
+
-
- +
-
+
-
+
+ >
@@ -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" )} > @@ -191,7 +197,7 @@ export default function GenericNode({ deleteNode(data.id); }} > - + diff --git a/src/frontend/src/components/ReactTooltipComponent/index.tsx b/src/frontend/src/components/ReactTooltipComponent/index.tsx new file mode 100644 index 000000000..87a7508d2 --- /dev/null +++ b/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 = ({ + selector, + content, + disabled, + position = "top", + children, + htmlContent, + className, + clickable, + delayShow, +}) => { + return ( +
+ {React.cloneElement(children as React.ReactElement, { + "data-tooltip-id": selector, + })} + + {htmlContent && htmlContent} + +
+ ); +}; + +export default TooltipReact; diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx index 1a9e721f7..e698e481a 100644 --- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx +++ b/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) => ( - 21 ? t : ""} placement="right"> -
+ +
- + ))} {Object.keys(data[d]).length === 0 && (
Coming soon