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

almost done with display_name

Browse source
This commit is contained in:
anovazzi1 2024-06-07 15:57:37 -03:00
commit fa5243970f
7 changed files with 67 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
View file

@ -12,6 +12,7 @@ import { outputComponentType } from "../../../../types/components";
import { NodeDataType } from "../../../../types/flow";
import { cn } from "../../../../utils/utils";
import { Button } from "../../../../components/ui/button";
import ShadTooltip from "../../../../components/shadTooltipComponent";
export default function OutputComponent({
selected,
@ -20,6 +21,7 @@ export default function OutputComponent({
nodeId,
idx,
name,
proxy,
}: outputComponentType) {
const setNode = useFlowStore((state) => state.setNode);
const updateNodeInternals = useUpdateNodeInternals();
@ -64,7 +66,13 @@ export default function OutputComponent({
))}
</DropdownMenuContent>
</DropdownMenu>
<span>{name}</span>
{proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}>
<span>{name}</span>
</ShadTooltip>
) : (
<span>{name}</span>
)}
</div>
);
}

19
src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -61,6 +61,7 @@ export default function ParameterComponent({
showNode,
index,
outputName,
outputProxy,
}: ParameterComponentType): JSX.Element {
const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const nodes = useFlowStore((state) => state.nodes);
@ -79,8 +80,7 @@ export default function ParameterComponent({
handleUpdateValues,
debouncedHandleUpdateValues,
setNode,
isLoading,
setIsLoading
setIsLoading,
);
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -88,7 +88,7 @@ export default function ParameterComponent({
name,
takeSnapshot,
setNode,
updateNodeInternals
updateNodeInternals,
);
const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -97,7 +97,7 @@ export default function ParameterComponent({
let disabled =
edges.some(
(edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id)
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false;
const handleRefreshButtonPress = async (name, data) => {
@ -108,7 +108,7 @@ export default function ParameterComponent({
const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false
skipSnapshot: boolean | undefined = false,
): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot);
};
@ -133,6 +133,7 @@ export default function ParameterComponent({
function renderTitle() {
return !left ? (
<OutputComponent
proxy={outputProxy}
idx={index}
types={type?.split("|") ?? []}
selected={
@ -194,14 +195,14 @@ export default function ParameterComponent({
className={classNames(
left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : ""
!showNode ? "mt-0" : "",
)}
style={{
borderColor: color ?? nodeColors.unknown,
}}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!)
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
></Handle>
@ -286,12 +287,12 @@ export default function ParameterComponent({
}
className={classNames(
left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background"
"h-3 w-3 rounded-full border-2 bg-background",
)}
style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!)
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
/>

3
src/frontend/src/CustomNodes/genericNode/index.tsx
View file

@ -837,7 +837,8 @@ export default function GenericNode({
nodeColors[types[data.type]] ??
nodeColors.unknown
}
title={output.name}
outputProxy={output.proxy}
title={output.display_name ?? output.name}
tooltipTitle={output.selected ?? output.types[0]}
id={{
output_types: [output.selected ?? output.types[0]],

34
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -11,7 +11,6 @@ import ReactFlow, {
SelectionDragHandler,
updateEdge,
} from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import {
INVALID_SELECTION_ERROR_ALERT,
UPLOAD_ALERT_LIST,
@ -38,6 +37,7 @@ import ConnectionLineComponent from "../ConnectionLineComponent";
import SelectionMenu from "../SelectionMenuComponent";
import getRandomName from "./utils/get-random-name";
import isWrappedWithClass from "./utils/is-wrapped-with-class";
import GenericNode from "../../../../CustomNodes/genericNode";
const nodeTypes = {
genericNode: GenericNode,
@ -52,19 +52,19 @@ export default function Page({
}): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore(
(state) => state.autoSaveCurrentFlow
(state) => state.autoSaveCurrentFlow,
);
const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [showCanvas, setSHowCanvas] = useState(
Object.keys(templates).length > 0 && Object.keys(types).length > 0
Object.keys(templates).length > 0 && Object.keys(types).length > 0,
);
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore(
(state) => state.setReactFlowInstance
(state) => state.setReactFlowInstance,
);
const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges);
@ -81,10 +81,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore(
(state) => state.lastCopiedSelection
(state) => state.lastCopiedSelection,
);
const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection
(state) => state.setLastCopiedSelection,
);
const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@ -107,7 +107,7 @@ export default function Page({
clonedSelection!,
clonedNodes,
clonedEdges,
getRandomName()
getRandomName(),
);
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
// const newEdges = reconnectEdges(newGroupNode, removedEdges);
@ -115,8 +115,8 @@ export default function Page({
...clonedNodes.filter(
(oldNodes) =>
!clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id
)
(selectionNode) => selectionNode.id === oldNodes.id,
),
),
newGroupNode,
]);
@ -180,7 +180,7 @@ export default function Page({
{
x: position.current.x,
y: position.current.y,
}
},
);
}
if (!isWrappedWithClass(event, "noundo")) {
@ -276,7 +276,7 @@ export default function Page({
useEffect(() => {
setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0
Object.keys(templates).length > 0 && Object.keys(types).length > 0,
);
}, [templates, types]);
@ -285,7 +285,7 @@ export default function Page({
takeSnapshot();
onConnect(params);
},
[takeSnapshot, onConnect]
[takeSnapshot, onConnect],
);
const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -326,7 +326,7 @@ export default function Page({
// Extract the data from the drag event and parse it as a JSON object
const data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("nodedata")
event.dataTransfer.getData("nodedata"),
);
const newId = getNodeId(data.type);
@ -342,7 +342,7 @@ export default function Page({
};
paste(
{ nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY }
{ x: event.clientX, y: event.clientY },
);
} else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot();
@ -371,7 +371,7 @@ export default function Page({
}
},
// Specify dependencies for useCallback
[getNodeId, setNodes, takeSnapshot, paste]
[getNodeId, setNodes, takeSnapshot, paste],
);
const onEdgeUpdateStart = useCallback(() => {
@ -387,7 +387,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els));
}
},
[setEdges]
[setEdges],
);
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@ -420,7 +420,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => {
setLastSelection(flow);
},
[]
[],
);
const onPaneClick = useCallback((flow) => {

11
src/frontend/src/types/api/index.ts
View file

@ -63,12 +63,19 @@ export type InputFieldType = {
refresh_button_text?: string;
[key: string]: any;
};
export type OutputFieldProxyType = {
id: string;
name: string;
nodeDisplayName: string;
};
export type OutputFieldType = {
types: Array<string>;
selected?: string;
name: string;
displayName?: string;
proxy?: { id: string; name: string };
display_name: string;
proxy?: OutputFieldProxyType;
};
export type sendAllProps = {
nodes: Node[];

17
src/frontend/src/types/components/index.ts
View file

@ -1,7 +1,12 @@
import { ReactElement, ReactNode, SetStateAction } from "react";
import { ReactFlowJsonObject } from "reactflow";
import { InputOutput } from "../../constants/enums";
import { APIClassType, APITemplateType, InputFieldType } from "../api";
import {
APIClassType,
APITemplateType,
InputFieldType,
OutputFieldProxyType,
} from "../api";
import { ChatMessageType } from "../chat";
import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
import { sourceHandleType, targetHandleType } from "./../flow/index";
@ -71,6 +76,7 @@ export type ParameterComponentType = {
index: number;
onCloseModal?: (close: boolean) => void;
outputName?: string;
outputProxy?: OutputFieldProxyType;
};
export type InputListComponentType = {
value: string[];
@ -120,6 +126,7 @@ export type outputComponentType = {
frozen?: boolean;
idx: number;
name: string;
proxy?: OutputFieldProxyType;
};
export type PromptAreaComponentType = {
@ -528,7 +535,7 @@ export type nodeToolbarPropsType = {
updateNodeCode?: (
newNodeClass: APIClassType,
code: string,
name: string
name: string,
) => void;
setShowState: (show: boolean | SetStateAction<boolean>) => void;
isOutdated?: boolean;
@ -578,7 +585,7 @@ export type chatMessagePropsType = {
updateChat: (
chat: ChatMessageType,
message: string,
stream_url?: string
stream_url?: string,
) => void;
};
@ -670,12 +677,12 @@ export type codeTabsPropsType = {
value: string,
node: NodeType,
template: InputFieldType,
tweak: tweakType
tweak: tweakType,
) => string;
buildTweakObject?: (
tw: string,
changes: string | string[] | boolean | number | Object[] | Object,
template: InputFieldType
template: InputFieldType,
) => Promise<string | void>;
};
activeTweaks?: boolean;

10
src/frontend/src/utils/reactflowUtils.ts
View file

@ -483,6 +483,7 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
types,
selected: selected,
name: types.join(" | "),
display_name: types.join(" | "),
});
}
}
@ -1048,9 +1049,14 @@ function generateNodeOutputs(flow: FlowType) {
outputs.push(
cloneDeep({
...output,
proxy: { id: node.id, name: output.name },
proxy: {
id: node.id,
name: output.name,
nodeDisplayName:
node.data.node!.display_name ?? node.data.node!.name,
},
name: node.id + "_" + output.name,
displayName: output.displayName,
displayName: output.display_name,
}),
);
}