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

Fixed handle tooltip being on the wrong place

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-19 15:46:17 -03:00
commit c31cf6fd1e
2 changed files with 58 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/frontend/src/CustomNodes/GenericNode/components/handleRenderComponent/index.tsx
View file

@ -39,77 +39,65 @@ export default function HandleRenderComponent({
unstyled
className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"
>
<div className="flex">
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={1000}
content={
<HandleTooltips
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle!}
/>
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={1000}
content={
<HandleTooltips
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle!}
/>
}
side={left ? "left" : "right"}
>
<Handle
data-test-id={`handle-${title.toLowerCase()}-${
!showNode ? (left ? "target" : "source") : left ? "left" : "right"
}`}
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
isValidConnection={(connection) =>
isValidConnection(connection, nodes, edges)
}
side={left ? "left" : "right"}
>
<div>
<Handle
data-test-id={`handle-${title.toLowerCase()}-${
!showNode
? left
? "target"
: "source"
: left
? "left"
: "right"
}`}
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
id={scapedJSONStringfy(proxy ? { ...id, proxy } : id)}
isValidConnection={(connection) =>
isValidConnection(connection, nodes, edges)
}
className={classNames(
left ? "-ml-0.5" : "-mr-0.5",
"z-20 h-3 w-3 rounded-full border-none bg-background",
)}
style={{
background:
"conic-gradient(" +
colors
.concat(colors[0])
.map(
(color, index) =>
color +
" " +
((360 / colors.length) * index -
360 / (colors.length * 4)) +
"deg " +
((360 / colors.length) * index +
360 / (colors.length * 4)) +
"deg",
)
.join(" ,") +
")",
WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
maskImage: "radial-gradient(transparent 40%, black 44%)",
}}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
/>
<div
className={cn(
"absolute top-[50%] z-10 h-3 w-3 translate-y-[-50%] rounded-full bg-background",
left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
)}
/>
</div>
</ShadTooltip>
</div>
className={classNames(
left ? "-ml-0.5" : "-mr-0.5",
"z-20 h-3 w-3 rounded-full border-none bg-background",
)}
style={{
background:
"conic-gradient(" +
colors
.concat(colors[0])
.map(
(color, index) =>
color +
" " +
((360 / colors.length) * index -
360 / (colors.length * 4)) +
"deg " +
((360 / colors.length) * index +
360 / (colors.length * 4)) +
"deg",
)
.join(" ,") +
")",
WebkitMaskImage: "radial-gradient(transparent 40%, black 44%)",
maskImage: "radial-gradient(transparent 40%, black 44%)",
}}
onClick={() => {
setFilterEdge(groupByFamily(myData, tooltipTitle!, left, nodes!));
}}
/>
</ShadTooltip>
<div
className={cn(
"absolute top-[50%] z-10 h-3 w-3 translate-y-[-50%] rounded-full bg-background",
left ? "-left-[4px] -ml-0.5" : "-right-[4px] -mr-0.5",
)}
/>
</Button>
);
}

7
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -35,20 +35,17 @@ import {
convertObjToArray,
convertValuesToNumbers,
hasDuplicateKeys,
isValidConnection,
scapedJSONStringfy,
} from "../../../../utils/reactflowUtils";
import {
classNames,
cn,
groupByFamily,
isThereModal,
} from "../../../../utils/utils";
import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
import useHandleNodeClass from "../../../hooks/use-handle-node-class";
import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
import HandleTooltips from "../HandleTooltipComponent";
import OutputComponent from "../OutputComponent";
import HandleRenderComponent from "../handleRenderComponent";
import OutputModal from "../outputModal";
@ -74,9 +71,7 @@ export default function ParameterComponent({
outputProxy,
}: ParameterComponentType): JSX.Element {
const ref = useRef<HTMLDivElement>(null);
const refHtml = useRef<HTMLDivElement & ReactNode>(null);
const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
const setNode = useFlowStore((state) => state.setNode);
@ -85,8 +80,6 @@ export default function ParameterComponent({
const [isLoading, setIsLoading] = useState(false);
const updateNodeInternals = useUpdateNodeInternals();
const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
const flow = currentFlow?.data?.nodes ?? null;
const groupedEdge = useRef(null);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const [openOutputModal, setOpenOutputModal] = useState(false);
const flowPool = useFlowStore((state) => state.flowPool);