From fb018eda10c6f29c895adac7fcff947fe4b79913 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa <72977554+Cristhianzl@users.noreply.github.com> Date: Wed, 29 May 2024 23:26:12 -0300 Subject: [PATCH] Fix Application Crash with Multiple Nested Dict Components in Flow (#2011) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ♻️ (dictComponent): improve value change detection logic 🐛 (parameterComponent): remove unnecessary console.log statement * ♻️ (frontend): remove redundant comments and clean up code formatting ♻️ (editNodeModal): refactor to use nodeId instead of passing data directly * ♻️ (editNodeModal): refactor to use data prop instead of nodeId for better data handling ♻️ (nodeToolbarComponent): refactor to improve code readability and consistency --- .../components/codeTabsComponent/index.tsx | 4 +--- .../src/components/dictComponent/index.tsx | 7 ++----- .../components/parameterComponent/index.tsx | 18 ++++++++--------- .../src/modals/editNodeModal/index.tsx | 14 +++++++------ .../components/nodeToolbarComponent/index.tsx | 20 +++++++++---------- 5 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 1e745f950..0a0b691c8 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -841,9 +841,7 @@ export default function CodeTabsComponent({ node.data.node!.template[ templateField ].value?.toString() === "{}" - ? { - // yourkey: "value", - } + ? {} : node.data.node! .template[ templateField diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx index 2cf622e93..27808a40c 100644 --- a/src/frontend/src/components/dictComponent/index.tsx +++ b/src/frontend/src/components/dictComponent/index.tsx @@ -18,16 +18,13 @@ export default function DictComponent({ } }, [disabled]); - useEffect(() => { - if (value) onChange(value); - }, [value]); - const ref = useRef(value); + return (
1 && editNode ? "my-1" : "", - "flex flex-col gap-3" + "flex flex-col gap-3", )} > { diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index 43078ba08..ebec1a840 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -89,7 +89,7 @@ export default function ParameterComponent({ setNode, renderTooltips, isLoading, - setIsLoading + setIsLoading, ); const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( @@ -98,7 +98,7 @@ export default function ParameterComponent({ takeSnapshot, setNode, updateNodeInternals, - renderTooltips + renderTooltips, ); const { handleRefreshButtonPress: handleRefreshButtonPressHook } = @@ -107,7 +107,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) => { @@ -120,12 +120,12 @@ export default function ParameterComponent({ handleUpdateValues, setNode, renderTooltips, - setIsLoading + setIsLoading, ); const handleOnNewValue = async ( newValue: string | string[] | boolean | Object[], - skipSnapshot: boolean | undefined = false + skipSnapshot: boolean | undefined = false, ): Promise => { handleOnNewValueHook(newValue, skipSnapshot); }; @@ -207,7 +207,7 @@ 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, @@ -296,7 +296,7 @@ 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(groupedEdge.current)} @@ -547,9 +547,7 @@ export default function ParameterComponent({ value={ !data.node!.template[name]?.value || data.node!.template[name]?.value?.toString() === "{}" - ? { - // yourkey: "value", - } + ? {} : data.node!.template[name]?.value } onChange={handleOnNewValue} diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 0db4bdcf5..01c346300 100644 --- a/src/frontend/src/modals/editNodeModal/index.tsx +++ b/src/frontend/src/modals/editNodeModal/index.tsx @@ -43,19 +43,23 @@ import BaseModal from "../baseModal"; const EditNodeModal = forwardRef( ( { - data, nodeLength, open, setOpen, + data, }: { - data: NodeDataType; nodeLength: number; open: boolean; setOpen: (open: boolean) => void; + data: NodeDataType; }, ref, ) => { - const [myData, setMyData] = useState(data); + const nodes = useFlowStore((state) => state.nodes); + + const dataFromStore = nodes.find((node) => node.id === node.id)?.data; + + const [myData, setMyData] = useState(dataFromStore ?? data); const edges = useFlowStore((state) => state.edges); const setNode = useFlowStore((state) => state.setNode); @@ -297,9 +301,7 @@ const EditNodeModal = forwardRef( myData.node!.template[ templateParam ]?.value?.toString() === "{}" - ? { - // yourkey: "value", - } + ? {} : myData.node!.template[templateParam] .value } diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 7d1d33d5f..587dc6d73 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -58,7 +58,7 @@ export default function NodeToolbarComponent({ data.node.template[templateField].type === "Any" || data.node.template[templateField].type === "int" || data.node.template[templateField].type === "dict" || - data.node.template[templateField].type === "NestedDict") + data.node.template[templateField].type === "NestedDict"), ).length; const templates = useTypesStore((state) => state.templates); const hasStore = useStoreStore((state) => state.hasStore); @@ -85,7 +85,7 @@ export default function NodeToolbarComponent({ const [showconfirmShare, setShowconfirmShare] = useState(false); const [showOverrideModal, setShowOverrideModal] = useState(false); const [flowComponent, setFlowComponent] = useState( - createFlowComponent(cloneDeep(data), version) + createFlowComponent(cloneDeep(data), version), ); const openInNewTab = (url) => { @@ -100,7 +100,7 @@ export default function NodeToolbarComponent({ const updateNodeInternals = useUpdateNodeInternals(); const setLastCopiedSelection = useFlowStore( - (state) => state.setLastCopiedSelection + (state) => state.setLastCopiedSelection, ); const setSuccessData = useAlertStore((state) => state.setSuccessData); @@ -150,7 +150,7 @@ export default function NodeToolbarComponent({ nodes, edges, setNodes, - setEdges + setEdges, ); break; case "override": @@ -174,7 +174,7 @@ export default function NodeToolbarComponent({ y: 10, paneX: nodes.find((node) => node.id === data.id)?.position.x, paneY: nodes.find((node) => node.id === data.id)?.position.y, - } + }, ); break; case "update": @@ -212,13 +212,13 @@ export default function NodeToolbarComponent({ }; const isSaved = flows.some((flow) => - Object.values(flow).includes(data.node?.display_name!) + Object.values(flow).includes(data.node?.display_name!), ); const setNode = useFlowStore((state) => state.setNode); const handleOnNewValue = ( - newValue: string | string[] | boolean | Object[] + newValue: string | string[] | boolean | Object[], ): void => { if (data.node!.template[name].value !== newValue) { takeSnapshot(); @@ -401,7 +401,7 @@ export default function NodeToolbarComponent({ data-testid="save-button-modal" className={classNames( "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10", - hasCode ? " " : " rounded-l-md " + hasCode ? " " : " rounded-l-md ", )} onClick={(event) => { event.preventDefault(); @@ -419,7 +419,7 @@ export default function NodeToolbarComponent({