From 22e7393b9d0f00b3218d031eb960eb92feb870f7 Mon Sep 17 00:00:00 2001 From: StyleZhang Date: Tue, 12 Mar 2024 11:56:15 +0800 Subject: [PATCH] fix --- web/app/components/workflow/hooks.ts | 19 +++++-- .../_base/components/next-step/index.tsx | 21 +++---- .../nodes/question-classifier/use-config.ts | 1 + .../workflow/operator/zoom-in-out.tsx | 2 +- web/app/components/workflow/utils.ts | 55 +++++++++---------- 5 files changed, 47 insertions(+), 51 deletions(-) diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts index e9ecf65fb2..2439f1306e 100644 --- a/web/app/components/workflow/hooks.ts +++ b/web/app/components/workflow/hooks.ts @@ -70,7 +70,7 @@ export const useWorkflow = () => { const nodesInitialData = useNodesInitialData() const featuresStore = useFeaturesStore() - const shouldDebouncedSyncWorkflowDraft = () => { + const shouldDebouncedSyncWorkflowDraft = useCallback(() => { const { getNodes, edges, @@ -111,13 +111,20 @@ export const useWorkflow = () => { useStore.setState({ draftUpdatedAt: res.updated_at }) }) } - } + }, [store, reactFlow, featuresStore]) - const { run: handleSyncWorkflowDraft } = useDebounceFn(shouldDebouncedSyncWorkflowDraft, { + const { run: debouncedSyncWorkflowDraft } = useDebounceFn(shouldDebouncedSyncWorkflowDraft, { wait: 2000, trailing: true, }) + const handleSyncWorkflowDraft = useCallback((shouldDelay?: boolean) => { + if (shouldDelay) + debouncedSyncWorkflowDraft() + else + shouldDebouncedSyncWorkflowDraft() + }, [debouncedSyncWorkflowDraft, shouldDebouncedSyncWorkflowDraft]) + const handleLayout = useCallback(async () => { const { getNodes, @@ -332,11 +339,11 @@ export const useWorkflow = () => { if (!cancelSelection && selectedNode?.id === nodeId) return - const newNodes = produce(getNodes(), (draft) => { + const newNodes = produce(nodes, (draft) => { draft.forEach(node => node.data.selected = false) const selectedNode = draft.find(node => node.id === nodeId)! - if (!cancelSelection) + if (!cancelSelection && selectedNode) selectedNode.data.selected = true }) setNodes(newNodes) @@ -433,7 +440,7 @@ export const useWorkflow = () => { currentNode.data = { ...currentNode.data, ...data } }) setNodes(newNodes) - handleSyncWorkflowDraft() + handleSyncWorkflowDraft(true) }, [store, handleSyncWorkflowDraft]) const handleNodeAddNext = useCallback(( diff --git a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx index c892fb6a73..f34b5d8e60 100644 --- a/web/app/components/workflow/nodes/_base/components/next-step/index.tsx +++ b/web/app/components/workflow/nodes/_base/components/next-step/index.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo } from 'react' +import { memo } from 'react' import { getConnectedEdges, getOutgoers, @@ -10,10 +10,10 @@ import type { Branch, Node, } from '../../../../types' +import { BlockEnum } from '../../../../types' import Add from './add' import Item from './item' import Line from './line' -import { BlockEnum } from '@/app/components/workflow/types' type NextStepProps = { selectedNode: Node @@ -22,15 +22,8 @@ const NextStep = ({ selectedNode, }: NextStepProps) => { const store = useStoreApi() - const branches = useMemo(() => { - const nodeData = selectedNode.data - - if (nodeData.type === BlockEnum.IfElse) - return nodeData._targetBranches - - if (nodeData.type === BlockEnum.QuestionClassifier) - return (nodeData as any).classes - }, [selectedNode]) + const branches = selectedNode.data._targetBranches + const nodeWithBranches = selectedNode.data.type === BlockEnum.IfElse || selectedNode.data.type === BlockEnum.QuestionClassifier const edges = useEdges() const outgoers = getOutgoers(selectedNode as Node, store.getState().getNodes(), edges) const connectedEdges = getConnectedEdges([selectedNode] as Node[], edges).filter(edge => edge.source === selectedNode!.id) @@ -46,7 +39,7 @@ const NextStep = ({
{ - !branches && !!outgoers.length && ( + !nodeWithBranches && !!outgoers.length && ( { const connected = connectedEdges.find(edge => edge.sourceHandle === branch.id) const target = outgoers.find(outgoer => outgoer.id === connected?.target) diff --git a/web/app/components/workflow/nodes/question-classifier/use-config.ts b/web/app/components/workflow/nodes/question-classifier/use-config.ts index 0d7343caa4..bb5f22d595 100644 --- a/web/app/components/workflow/nodes/question-classifier/use-config.ts +++ b/web/app/components/workflow/nodes/question-classifier/use-config.ts @@ -35,6 +35,7 @@ const useConfig = (id: string, payload: QuestionClassifierNodeType) => { const handleClassesChange = useCallback((newClasses: any) => { const newInputs = produce(inputs, (draft) => { draft.classes = newClasses + draft._targetBranches = newClasses }) setInputs(newInputs) }, [inputs, setInputs]) diff --git a/web/app/components/workflow/operator/zoom-in-out.tsx b/web/app/components/workflow/operator/zoom-in-out.tsx index 81e421a36e..da50c195b5 100644 --- a/web/app/components/workflow/operator/zoom-in-out.tsx +++ b/web/app/components/workflow/operator/zoom-in-out.tsx @@ -95,7 +95,7 @@ const ZoomInOut: FC = () => {
- +
{ ZOOM_IN_OUT_OPTIONS.map((options, i) => ( diff --git a/web/app/components/workflow/utils.ts b/web/app/components/workflow/utils.ts index 551cb7c84e..f9749d0187 100644 --- a/web/app/components/workflow/utils.ts +++ b/web/app/components/workflow/utils.ts @@ -1,4 +1,3 @@ -import produce from 'immer' import { getConnectedEdges, getOutgoers, @@ -82,42 +81,38 @@ export const nodesLevelOrderTraverse = ( } export const initialNodes = (nodes: Node[]) => { - const newNodes = produce(nodes, (draft) => { - draft.forEach((node) => { - node.type = 'custom' + return nodes.map((node) => { + node.type = 'custom' - if (node.data.type === BlockEnum.IfElse) { - node.data._targetBranches = [ - { - id: 'true', - name: 'IS TRUE', - }, - { - id: 'false', - name: 'IS FALSE', - }, - ] - } + if (node.data.type === BlockEnum.IfElse) { + node.data._targetBranches = [ + { + id: 'true', + name: 'IS TRUE', + }, + { + id: 'false', + name: 'IS FALSE', + }, + ] + } - if (node.data.type === BlockEnum.QuestionClassifier) { - node.data._targetBranches = (node.data as QuestionClassifierNodeType).classes.map((topic) => { - return topic - }) - } - }) + if (node.data.type === BlockEnum.QuestionClassifier) { + node.data._targetBranches = (node.data as QuestionClassifierNodeType).classes.map((topic) => { + return topic + }) + } + + return node }) - - return newNodes } export const initialEdges = (edges: Edge[]) => { - const newEdges = produce(edges, (draft) => { - draft.forEach((edge) => { - edge.type = 'custom' - }) - }) + return edges.map((edge) => { + edge.type = 'custom' - return newEdges + return edge + }) } export type PositionMap = {