🔨 refactor(GenericNode): remove unused imports and simplify documentation tooltip

The required indicator is now next to the title, which improves readability and makes it easier to see which parameters are required. The documentation tooltip has been simplified to only show the documentation link, which improves the user experience by reducing clutter. Unused imports have been removed to improve code quality.
🔨 refactor(parameterComponent): move required indicator next to title
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-06-27 15:29:20 -03:00
commit 0a3648c23e
2 changed files with 3 additions and 50 deletions

View file

@ -149,18 +149,14 @@ export default function ParameterComponent({
}
>
{title}
<span className="text-red-600">{required ? " *" : ""}</span>
<div className="">
{info !== "" && (
<ShadTooltip
open={true}
delayDuration={500}
content={infoHtml.current}
>
<ShadTooltip content={infoHtml.current}>
<Info className="ml-2 relative bottom-0.5 w-3 h-3" />
</ShadTooltip>
)}
</div>
<span className="text-red-600">{required ? " *" : ""}</span>
</div>
{left &&
(type === "str" ||

View file

@ -14,7 +14,6 @@ import NodeModal from "../../modals/NodeModal";
import Tooltip from "../../components/TooltipComponent";
import { NodeToolbar } from "reactflow";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { FileText, Info } from "lucide-react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import { useSSE } from "../../contexts/SSEContext";
@ -70,22 +69,6 @@ export default function GenericNode({
useEffect(() => {}, [closePopUp, data.node.template]);
useEffect(() => {
refHtml.current = (
<div className="flex">
<span>{`${data.node.display_name} Documentation`}</span>
<span
className="self-center"
style={{
color: nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
>
<FileText className="h-4 w-4 ml-2" />
</span>
</div>
);
}, []);
return (
<>
<NodeToolbar>
@ -111,37 +94,11 @@ export default function GenericNode({
}}
/>
<div className="ml-2 truncate flex">
<ShadTooltip
delayDuration={1500}
content={data.node.display_name}
>
<ShadTooltip content={data.node.display_name}>
<div className="ml-2 truncate text-gray-800">
{data.node.display_name}
</div>
</ShadTooltip>
<div className="">
{data.node.documentation !== "" && (
<ShadTooltip
open={true}
delayDuration={1000}
content={refHtml.current}
>
<a
href={data.node.documentation}
target="_blank"
rel="noopener noreferrer"
>
<Info
style={{
color:
nodeColors[types[data.type]] ?? nodeColors.unknown,
}}
className="ml-2 self-center w-4 h-4"
/>
</a>
</ShadTooltip>
)}
</div>
</div>
</div>
<div className="flex gap-3">