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 HandleTooltips from "../HandleTooltipComponent";
import OutputComponent from "../OutputComponent";
import HandleRenderComponent from "../handleRenderComponent";
import OutputModal from "../outputModal";
import { TEXT_FIELD_TYPES } from "./constants";
@ -268,80 +269,19 @@ export default function ParameterComponent({
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">
<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()}-${
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>
<HandleRenderComponent
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle}
proxy={proxy}
id={id}
title={title}
edges={edges}
myData={myData}
colors={colors}
setFilterEdge={setFilterEdge}
showNode={showNode}
/>
)
) : (
<div
@ -452,74 +392,19 @@ export default function ParameterComponent({
{left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? (
<></>
) : (
<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()}-${
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>
<HandleRenderComponent
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle}
proxy={proxy}
id={id}
title={title}
edges={edges}
myData={myData}
colors={colors}
setFilterEdge={setFilterEdge}
showNode={showNode}
/>
)}
<Case