From e4af344c0c5e53e02753c0fb25cc8f3534b17c93 Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Tue, 9 Jan 2024 17:31:15 -0300 Subject: [PATCH] reverting changes signals --- package-lock.json | 34 --- package.json | 1 - .../src/modals/EditNodeModal/index.tsx | 244 ++++++++---------- src/frontend/src/stores/flowStore.ts | 5 +- src/frontend/src/types/zustand/flow/index.ts | 2 + 5 files changed, 113 insertions(+), 173 deletions(-) diff --git a/package-lock.json b/package-lock.json index d626b1ad1..8c3f329a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,7 +5,6 @@ "packages": { "": { "dependencies": { - "@preact/signals-react": "^2.0.0", "@radix-ui/react-popover": "^1.0.7", "cmdk": "^0.2.0" } @@ -55,31 +54,6 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, - "node_modules/@preact/signals-core": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/@preact/signals-core/-/signals-core-1.5.1.tgz", - "integrity": "sha512-dE6f+WCX5ZUDwXzUIWNMhhglmuLpqJhuy3X3xHrhZYI0Hm2LyQwOu0l9mdPiWrVNsE+Q7txOnJPgtIqHCYoBVA==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/preact" - } - }, - "node_modules/@preact/signals-react": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@preact/signals-react/-/signals-react-2.0.0.tgz", - "integrity": "sha512-tMVi2SXFXlojaiPNWa8dlYaidR/XvEgMSp+iymKJgMssBM/QVtUQrodKZek1BJju+dkVHiyeuQHmkuLOI9oyNw==", - "dependencies": { - "@preact/signals-core": "^1.5.1", - "use-sync-external-store": "^1.2.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/preact" - }, - "peerDependencies": { - "react": "^16.14.0 || 17.x || 18.x" - } - }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", @@ -953,14 +927,6 @@ "optional": true } } - }, - "node_modules/use-sync-external-store": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", - "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } } } } diff --git a/package.json b/package.json index 004dbb908..33d31f0d1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,5 @@ { "dependencies": { - "@preact/signals-react": "^2.0.0", "@radix-ui/react-popover": "^1.0.7", "cmdk": "^0.2.0" } diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index f5d7eee2a..93e90a6d3 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -1,4 +1,3 @@ -import { useSignal, useSignalEffect } from "@preact/signals-react"; import { cloneDeep } from "lodash"; import { forwardRef, useEffect, useState } from "react"; import ShadTooltip from "../../components/ShadTooltipComponent"; @@ -55,31 +54,32 @@ const EditNodeModal = forwardRef( }, ref ) => { + const [myData, setMyData] = useState(data); + + const setPending = useFlowStore((state) => state.setPending); const edges = useFlowStore((state) => state.edges); const setNode = useFlowStore((state) => state.setNode); - const myData = useSignal(data); - const [render, setRender] = useState(false); - useSignalEffect(() => { - setRender(!render); - }); - function changeAdvanced(n) { - const newValue = cloneDeep(myData.value); - newValue.node!.template[n].advanced = - !newValue.node!.template[n].advanced; - myData.value = newValue; + setMyData((old) => { + let newData = cloneDeep(old); + newData.node!.template[n].advanced = + !newData.node!.template[n].advanced; + return newData; + }); } const handleOnNewValue = (newValue: any, name) => { - const newSignalValue = cloneDeep(myData.value); - newSignalValue.node!.template[name].value = newValue; - myData.value = newSignalValue; + setMyData((old) => { + let newData = cloneDeep(old); + newData.node!.template[name].value = newValue; + return newData; + }); }; useEffect(() => { if (open) { - myData.value = cloneDeep(data); // clone data to avoid changing data on node when opening modal + setMyData(data); // reset data to what it is on node when opening modal } }, [open]); @@ -92,15 +92,15 @@ const EditNodeModal = forwardRef( open={open} setOpen={setOpen} onChangeOpenModal={(open) => { - myData.value = cloneDeep(data); + setMyData(data); }} > <> - - {myData.value.type} - ID: {myData.value.id} + + {myData.type} + ID: {myData.id}
@@ -133,23 +133,21 @@ const EditNodeModal = forwardRef( - {Object.keys(myData.value.node!.template) + {Object.keys(myData.node!.template) .filter( (templateParam) => templateParam.charAt(0) !== "_" && - myData.value.node?.template[templateParam].show && + myData.node?.template[templateParam].show && LANGFLOW_SUPPORTED_TYPES.has( - myData.value?.node?.template[templateParam].type + myData.node.template[templateParam].type ) ) .map((templateParam, index) => { let id = { inputTypes: - myData.value.node!.template[templateParam] - .input_types, - type: myData.value.node!.template[templateParam] - .type, - id: myData.value.id, + myData.node!.template[templateParam].input_types, + type: myData.node!.template[templateParam].type, + id: myData.id, fieldName: templateParam, }; let disabled = @@ -157,14 +155,12 @@ const EditNodeModal = forwardRef( (edge) => edge.targetHandle === scapedJSONStringfy( - myData.value.node!.template[templateParam] - .proxy + myData.node!.template[templateParam].proxy ? { ...id, proxy: - myData.value.node?.template[ - templateParam - ].proxy, + myData.node?.template[templateParam] + .proxy, } : id ) @@ -174,46 +170,39 @@ const EditNodeModal = forwardRef( - {myData.value.node?.template[templateParam] + {myData.node?.template[templateParam] .display_name - ? myData.value?.node?.template[ - templateParam - ].display_name - : myData.value.node?.template[ - templateParam - ].name} + ? myData.node.template[templateParam] + .display_name + : myData.node?.template[templateParam] + .name} - {myData.value.node?.template[templateParam] - .type === "str" && - !myData.value?.node?.template[templateParam] - .options ? ( + {myData.node?.template[templateParam].type === + "str" && + !myData.node.template[templateParam].options ? (
- {myData.value?.node?.template[templateParam] + {myData.node.template[templateParam] .list ? ( - ) : myData.value?.node?.template[ - templateParam - ].multiline ? ( + ) : myData.node.template[templateParam] + .multiline ? ( { handleOnNewValue( @@ -270,25 +255,24 @@ const EditNodeModal = forwardRef( /> )}
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "NestedDict" ? (
{ - myData.value.node!.template[ + myData.node!.template[ templateParam ].value = newValue; handleOnNewValue( @@ -299,13 +283,13 @@ const EditNodeModal = forwardRef( id="editnode-div-dict-input" />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "dict" ? (
1 + myData.node!.template[templateParam].value + ?.length > 1 ? "my-3" : "" )} @@ -314,15 +298,13 @@ const EditNodeModal = forwardRef( disabled={disabled} editNode={true} value={ - myData.value.node!.template[ - templateParam - ].value?.length === 0 || - !myData.value.node!.template[ - templateParam - ].value + myData.node!.template[templateParam] + .value?.length === 0 || + !myData.node!.template[templateParam] + .value ? [{ "": "" }] : convertObjToArray( - myData.value.node!.template[ + myData.node!.template[ templateParam ].value ) @@ -331,7 +313,7 @@ const EditNodeModal = forwardRef( onChange={(newValue) => { const valueToNumbers = convertValuesToNumbers(newValue); - myData.value.node!.template[ + myData.node!.template[ templateParam ].value = valueToNumbers; setErrorDuplicateKey( @@ -344,7 +326,7 @@ const EditNodeModal = forwardRef( }} />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "bool" ? (
{" "} @@ -352,9 +334,8 @@ const EditNodeModal = forwardRef( id={"toggle-edit-" + index} disabled={disabled} enabled={ - myData.value?.node?.template[ - templateParam - ].value + myData.node.template[templateParam] + .value } setEnabled={(isEnabled) => { handleOnNewValue( @@ -365,52 +346,48 @@ const EditNodeModal = forwardRef( size="small" />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "float" ? (
{ handleOnNewValue(value, templateParam); }} />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "str" && - myData.value?.node?.template[templateParam] + myData.node.template[templateParam] .options ? (
handleOnNewValue(value, templateParam) } value={ - myData.value?.node?.template[ - templateParam - ].value ?? "Choose an option" + myData.node.template[templateParam] + .value ?? "Choose an option" } id={"dropdown-edit-" + index} >
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "int" ? (
{ handleOnNewValue(value, templateParam); }} />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "file" ? (
{ handleOnNewValue(value, templateParam); }} fileTypes={ - myData.value?.node?.template[ - templateParam - ].fileTypes + myData.node.template[templateParam] + .fileTypes } onFileChange={(filePath: string) => { data.node!.template[ @@ -453,24 +427,23 @@ const EditNodeModal = forwardRef( }} >
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "prompt" ? (
{ - myData.value.node = nodeClass; + myData.node = nodeClass; }} value={ - myData.value?.node?.template[ - templateParam - ].value ?? "" + myData.node.template[templateParam] + .value ?? "" } onChange={(value: string | string[]) => { handleOnNewValue(value, templateParam); @@ -481,15 +454,14 @@ const EditNodeModal = forwardRef( } />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "code" ? (
{ handleOnNewValue(value, templateParam); @@ -514,7 +485,7 @@ const EditNodeModal = forwardRef( id={"code-area-edit" + index} />
- ) : myData.value.node?.template[templateParam] + ) : myData.node?.template[templateParam] .type === "Any" ? ( "-" ) : ( @@ -526,13 +497,11 @@ const EditNodeModal = forwardRef( { changeAdvanced(templateParam); @@ -562,9 +531,10 @@ const EditNodeModal = forwardRef( ...old, data: { ...old.data, - node: myData.value.node, + node: myData.node, }, })); + setPending(true); setOpen(false); }} type="submit" diff --git a/src/frontend/src/stores/flowStore.ts b/src/frontend/src/stores/flowStore.ts index 09cf6e541..910ec81b6 100644 --- a/src/frontend/src/stores/flowStore.ts +++ b/src/frontend/src/stores/flowStore.ts @@ -32,10 +32,13 @@ const useFlowStore = create((set, get) => ({ nodes: [], edges: [], isBuilding: false, + isPending: false, isBuilt: false, reactFlowInstance: null, lastCopiedSelection: null, - + setPending: (isPending) => { + set({ isPending }); + }, resetFlow: ({ nodes, edges, viewport }) => { set({ nodes, diff --git a/src/frontend/src/types/zustand/flow/index.ts b/src/frontend/src/types/zustand/flow/index.ts index ffaecf0d5..9c331892f 100644 --- a/src/frontend/src/types/zustand/flow/index.ts +++ b/src/frontend/src/types/zustand/flow/index.ts @@ -12,7 +12,9 @@ export type FlowStoreType = { updateSSEData: (sseData: object) => void; sseData: object; isBuilding: boolean; + isPending: boolean; setIsBuilding: (isBuilding: boolean) => void; + setPending: (isPending: boolean) => void; resetFlow: (flow: { nodes: Node[]; edges: Edge[];