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

feat: preserve manual component data if code unchanged (#5482)

Browse source 
* chore: preserve manual component data if code unchanged

* Fixed tool mode switch not changing with code

* Removed console.log

* Made tool mode not be lost when mutating template

* use setNode instead of setNodes on component code

* refactor: tool_mode return

* Fix tool mode being reverted on toggle

* fix: tool_mode outputs return

* change: logic for setting `tool_mode`

---------

Co-authored-by: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Co-authored-by: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This commit is contained in:
Ítalo Johnny 2025-01-20 08:34:52 -03:00 • committed by GitHub
commit c8eb408b5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 44 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/CustomNodes/helpers/mutate-template.ts
View file

@ -32,7 +32,7 @@ export const mutateTemplate = debounce(
if (newTemplate) {
newNode.template = newTemplate.template;
newNode.outputs = newTemplate.outputs;
newNode.tool_mode = toolMode;
newNode.tool_mode = toolMode ?? node.tool_mode;
}
setNodeClass(newNode);
callback?.();

1
src/frontend/src/components/core/parameterRenderComponent/components/refreshParameterComponent/index.tsx
View file

@ -30,7 +30,6 @@ export function RefreshParameterComponent({
parameterId: name,
nodeId: nodeId,
node: nodeClass,
tool_mode: nodeClass.tool_mode ?? false,
});
const setErrorData = useAlertStore((state) => state.setErrorData);

16
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -7,7 +7,6 @@ import "ace-builds/src-noconflict/theme-twilight";
import { usePostValidateCode } from "@/controllers/API/queries/nodes/use-post-validate-code";
import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code";
import useFlowStore from "@/stores/flowStore";
import { cloneDeep } from "lodash";
import { useEffect, useRef, useState } from "react";
import AceEditor from "react-ace";
import ReactAce from "react-ace/lib/ace";
@ -61,9 +60,7 @@ export default function CodeAreaModal({
} | null>(null);
const { mutate: validateComponentCode } = usePostValidateComponentCode();
const currentFlow = useFlowStore((state) => state.currentFlow);
const nodes = useFlowStore((state) => state.nodes);
const setNodes = useFlowStore((state) => state.setNodes);
const setNode = useFlowStore((state) => state.setNode);
useEffect(() => {
// if nodeClass.template has more fields other than code and dynamic is true
@ -126,17 +123,6 @@ export default function CodeAreaModal({
if (data && type) {
setValue(code);
setNodeClass(data, type);
const currentNode = nodes.find((node) => node.id === componentId);
const currentNodeIndex = nodes.findIndex(
(node) => node.id === componentId,
);
const currentNodes = cloneDeep(nodes);
if (currentNode) {
currentNodes[currentNodeIndex].data.node = data;
}
setNodes(currentNodes);
setError({ detail: { error: undefined, traceback: undefined } });
setOpen(false);
}

32
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -143,20 +143,26 @@ const NodeToolbarComponent = memo(
[data, numberOfOutputHandles],
);
const [toolMode, setToolMode] = useState(() => {
// Check if tool mode is explicitly set on the node
const hasToolModeProperty = data.node?.tool_mode;
if (hasToolModeProperty) {
return hasToolModeProperty;
const [toolMode, setToolMode] = useState(
() =>
data.node?.tool_mode ||
data.node?.outputs?.some(
(output) => output.name === "component_as_tool",
) ||
false,
);
useEffect(() => {
if (data.node?.tool_mode !== undefined) {
setToolMode(
data.node?.tool_mode ||
data.node?.outputs?.some(
(output) => output.name === "component_as_tool",
) ||
false,
);
}
// Otherwise check if node has component_as_tool output
const hasComponentAsTool = data.node?.outputs?.some(
(output) => output.name === "component_as_tool",
);
return hasComponentAsTool ?? false;
});
}, [data.node?.tool_mode, data.node?.outputs]);
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
data.id,