jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(ui/tooltip.tsx): add z-index to tooltip content to ensure it appears above other elements

Browse source 
feat(modals/EditNodeModal/index.tsx): add ShadTooltip component to display tooltip content for template parameters
This commit is contained in:
anovazzi1 2023-10-06 17:38:07 -03:00
commit 2c594894e0
2 changed files with 30 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/components/ui/tooltip.tsx
View file

@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"overflow-y-auto 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",
"z-50 overflow-y-auto 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}

40
src/frontend/src/modals/EditNodeModal/index.tsx
View file

@ -7,6 +7,7 @@ import {
useRef,
useState,
} from "react";
import ShadTooltip from "../../components/ShadTooltipComponent";
import CodeAreaComponent from "../../components/codeAreaComponent";
import DictComponent from "../../components/dictComponent";
import Dropdown from "../../components/dropdownComponent";
@ -166,12 +167,27 @@ const EditNodeModal = forwardRef(
.map((templateParam, index) => (
<TableRow key={index} className="h-10">
<TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
{myData.current.node?.template[templateParam]
.display_name
? myData.current.node.template[templateParam]
<ShadTooltip
content={
myData.current.node?.template[templateParam]
.proxy
? myData.current.node?.template[
templateParam
].proxy?.field
: "null"
}
>
<span>
{myData.current.node?.template[templateParam]
.display_name
: myData.current.node?.template[templateParam]
.name}
? myData.current.node.template[
templateParam
].display_name
: myData.current.node?.template[
templateParam
].name}
</span>
</ShadTooltip>
</TableCell>
<TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
{myData.current.node?.template[templateParam]
@ -418,9 +434,10 @@ const EditNodeModal = forwardRef(
<div className="mx-auto">
<PromptAreaComponent
readonly={
myData.node?.flow &&
myData.node.template[templateParam]
.dynamic
myData.current.node?.flow &&
myData.current.node.template[
templateParam
].dynamic
? true
: false
}
@ -446,9 +463,10 @@ const EditNodeModal = forwardRef(
<div className="mx-auto">
<CodeAreaComponent
readonly={
myData.node?.flow &&
myData.node.template[templateParam]
.dynamic
myData.current.node?.flow &&
myData.current.node.template[
templateParam
].dynamic
? true
: false
}