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

Modularized handle component

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-17 20:36:50 -03:00
commit 38f60933b2
2 changed files with 127 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,100 @@
import { Handle, Position } from "reactflow";
import ShadTooltip from "../../../../components/shadTooltipComponent";
import { Button } from "../../../../components/ui/button";
import {
isValidConnection,
scapedJSONStringfy,
} from "../../../../utils/reactflowUtils";
import { classNames, cn, groupByFamily } from "../../../../utils/utils";
import HandleTooltips from "../HandleTooltipComponent";
import { title } from "process";
export default function HandleRenderComponent({
left,
nodes,
tooltipTitle,
proxy,
id,
title,
edges,
myData,
colors,
setFilterEdge,
showNode,
}) {
return (
<Button
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!}
/>
}
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-1" : "-mr-1",
"z-20 h-4 w-4 rounded-full border-none bg-background",
)}
style={{
background:
"conic-gradient(" +
colors
.map(
(color, index) =>
color +
" " +
(360 / colors.length) * index +
"deg " +
(360 / colors.length) * (index + 1) +
"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-4 w-4 translate-y-[-50%] rounded-full bg-background",
left ? "-left-[4px] -ml-1" : "-right-[4px] -mr-1",
)}
/>
</div>
</ShadTooltip>
</div>
</Button>
);
}

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

@ -49,6 +49,7 @@ import useHandleNodeClass from "../../../hooks/use-handle-node-class";
import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons"; import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
import HandleTooltips from "../HandleTooltipComponent"; import HandleTooltips from "../HandleTooltipComponent";
import OutputComponent from "../OutputComponent"; import OutputComponent from "../OutputComponent";
import HandleRenderComponent from "../handleRenderComponent";
import OutputModal from "../outputModal"; import OutputModal from "../outputModal";
import { TEXT_FIELD_TYPES } from "./constants"; import { TEXT_FIELD_TYPES } from "./constants";
@ -268,80 +269,19 @@ export default function ParameterComponent({
left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? ( left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
<></> <></>
) : ( ) : (
<Button className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted"> <HandleRenderComponent
<div className="flex"> left={left}
<ShadTooltip nodes={nodes}
styleClasses={"tooltip-fixed-width custom-scroll nowheel"} tooltipTitle={tooltipTitle}
delayDuration={1000} proxy={proxy}
content={ id={id}
<HandleTooltips title={title}
left={left} edges={edges}
nodes={nodes} myData={myData}
tooltipTitle={tooltipTitle!} colors={colors}
/> setFilterEdge={setFilterEdge}
} showNode={showNode}
side={left ? "left" : "right"} />
>
<div>
<Handle
data-test-id={`handle-${title.toLowerCase()}-${
left ? "target" : "source"
}`}
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
key={
proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)
}
id={
proxy
? scapedJSONStringfy({ ...id, proxy })
: scapedJSONStringfy(id)
}
isValidConnection={(connection) =>
isValidConnection(connection, nodes, edges)
}
className={classNames(
left ? "my-12 -ml-1" : "my-12 -mr-1",
"h-4 w-4 rounded-full border-2 bg-background",
!showNode ? "mt-0" : "",
)}
style={{
background:
"conic-gradient(" +
colors
.map(
(color, index) =>
color +
" " +
(360 / colors.length) * index +
"deg " +
(360 / colors.length) * (index + 1) +
"deg",
)
.join(" ,") +
")",
WebkitMaskImage:
"radial-gradient(transparent 40%, black 44%)",
maskImage: "radial-gradient(transparent 40%, black 44%)",
}}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
></Handle>
<div
className={cn(
left ? "my-12 -ml-1" : "my-12 -mr-1",
"absolute -left-[4px] top-[50%] z-10 h-4 w-4 translate-y-[-50%] rounded-full bg-background",
)}
/>
</div>
</ShadTooltip>
</div>
</Button>
) )
) : ( ) : (
<div <div
@ -452,74 +392,19 @@ export default function ParameterComponent({
{left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? ( {left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
<></> <></>
) : ( ) : (
<Button <HandleRenderComponent
unstyled left={left}
className="h-7 truncate bg-muted p-0 text-sm font-normal text-black hover:bg-muted" nodes={nodes}
> tooltipTitle={tooltipTitle}
<div className="flex"> proxy={proxy}
<ShadTooltip id={id}
styleClasses={"tooltip-fixed-width custom-scroll nowheel"} title={title}
delayDuration={1000} edges={edges}
content={ myData={myData}
<HandleTooltips colors={colors}
left={left} setFilterEdge={setFilterEdge}
nodes={nodes} showNode={showNode}
tooltipTitle={tooltipTitle!} />
/>
}
side={left ? "left" : "right"}
>
<div>
<Handle
data-test-id={`handle-${title.toLowerCase()}-${
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-1" : "-mr-1",
"z-20 h-4 w-4 rounded-full border-none bg-background",
)}
style={{
background:
"conic-gradient(" +
colors
.map(
(color, index) =>
color +
" " +
(360 / colors.length) * index +
"deg " +
(360 / colors.length) * (index + 1) +
"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-4 w-4 translate-y-[-50%] rounded-full bg-background",
left ? "-left-[4px] -ml-1" : "-right-[4px] -mr-1",
)}
/>
</div>
</ShadTooltip>
</div>
</Button>
)} )}
<Case <Case