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} ref={ref}
sideOffset={sideOffset} sideOffset={sideOffset}
className={cn( 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 className
)} )}
{...props} {...props}

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

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