perf: node fold hook

Author: c121914yu

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/ButtonEdge.tsx

@@ -1,10 +1,11 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { BezierEdge, getBezierPath, EdgeLabelRenderer, EdgeProps } from 'reactflow';
 import { Box, Flex } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { NodeOutputKeyEnum, RuntimeEdgeStatusEnum } from '@fastgpt/global/core/workflow/constants';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../context';
+import { useThrottleEffect } from 'ahooks';
 
 const ButtonEdge = (props: EdgeProps) => {
   const { nodes, nodeList, setEdges, workflowDebugData, hoverEdgeId } = useContextSelector(
@@ -28,13 +29,11 @@ const ButtonEdge = (props: EdgeProps) => {
     style
   } = props;
 
+  // If parentNode is folded, the edge will not be displayed
   const parentNode = useMemo(() => {
-    for (const node of nodeList) {
-      if ((node.nodeId === source || node.nodeId === target) && node.parentNodeId) {
-        return nodeList.find((parent) => parent.nodeId === node.parentNodeId);
-      }
-    }
-    return undefined;
+    return nodeList.find(
+      (node) => (node.nodeId === source || node.nodeId === target) && node.parentNodeId
+    );
   }, [nodeList, source, target]);
 
   const defaultZIndex = useMemo(
@@ -52,12 +51,20 @@ const ButtonEdge = (props: EdgeProps) => {
     [setEdges]
   );
 
-  const highlightEdge = useMemo(() => {
-    const connectNode = nodes.find((node) => {
-      return node.selected && (node.id === props.source || node.id === props.target);
-    });
-    return !!(connectNode || selected);
-  }, [nodes, props.source, props.target, selected]);
+  // Selected edge or source/target node selected
+  const [highlightEdge, setHighlightEdge] = useState(false);
+  useThrottleEffect(
+    () => {
+      const connectNode = nodes.find((node) => {
+        return node.selected && (node.id === props.source || node.id === props.target);
+      });
+      setHighlightEdge(!!connectNode || !!selected);
+    },
+    [nodes, selected, props.source, props.target],
+    {
+      wait: 100
+    }
+  );
 
   const [, labelX, labelY] = getBezierPath({
     sourceX,

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/FlowController.tsx

@@ -17,6 +17,7 @@ import { useTranslation } from 'next-i18next';
 import styles from './index.module.scss';
 import { maxZoom, minZoom } from '../index';
 import { useKeyPress } from 'ahooks';
+import { FlowNodeItemType } from '@fastgpt/global/core/workflow/type/node';
 
 const buttonStyle = {
   border: 'none',
@@ -61,11 +62,16 @@ const FlowController = React.memo(function FlowController() {
     zoomOut();
   });
 
+  /* 
+    id: Render node id
+   */
   const MiniMapNode = useCallback(
     ({ x, y, width, height, color, id }: MiniMapNodeProps) => {
+      // If the node parentNode is folded, the child node will not be displayed
       const node = nodeList.find((node) => node.nodeId === id);
-      const parentNode = nodeList.find((n) => n.nodeId === node?.parentNodeId);
-
+      const parentNode = node?.parentNodeId
+        ? nodeList.find((n) => n.nodeId === node?.parentNodeId)
+        : undefined;
       if (parentNode?.isFolded) {
         return null;
       }

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useWorkflow.tsx

@@ -277,6 +277,7 @@ export const useWorkflow = () => {
   const {
     setConnectingEdge,
     nodes,
+    nodeList,
     onNodesChange,
     setEdges,
     onChangeNode,
@@ -370,10 +371,12 @@ export const useWorkflow = () => {
   const checkNodeOverLoopNode = useMemoizedFn((node: Node) => {
     if (!node) return;
 
-    // 获取所有与当前节点相交的节点，不包含折叠的节点
-    const intersections = getIntersectingNodes(node).filter((node) => !node.data.isFolded);
-    // 获取所有与当前节点相交的节点中，类型为 loop 的节点
-    const parentNode = intersections.find((item) => item.type === FlowNodeTypeEnum.loop);
+    // 获取所有与当前节点相交的节点
+    const intersections = getIntersectingNodes(node);
+    // 获取所有与当前节点相交的节点中，类型为 loop 的节点且它不能是折叠状态
+    const parentNode = intersections.find(
+      (item) => !item.data.isFolded && item.type === FlowNodeTypeEnum.loop
+    );
 
     const unSupportedTypes = [
       FlowNodeTypeEnum.workflowStart,
@@ -548,8 +551,10 @@ export const useWorkflow = () => {
   const onConnectStart = useCallback(
     (event: any, params: OnConnectStartParams) => {
       if (!params.nodeId) return;
-      const sourceNode = nodes.find((node) => node.id === params.nodeId);
-      if (sourceNode?.data.isFolded) {
+
+      // If node is folded, unfold it when connecting
+      const sourceNode = nodeList.find((node) => node.nodeId === params.nodeId);
+      if (sourceNode?.isFolded) {
         return onChangeNode({
           nodeId: params.nodeId,
           type: 'attr',
@@ -559,7 +564,7 @@ export const useWorkflow = () => {
       }
       setConnectingEdge(params);
     },
-    [nodes, setConnectingEdge, onChangeNode]
+    [nodeList, setConnectingEdge, onChangeNode]
   );
   const onConnectEnd = useCallback(() => {
     setConnectingEdge(undefined);

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/Handle/ConnectionHandle.tsx

@@ -13,9 +13,7 @@ export const ConnectionSourceHandle = ({
   nodeId: string;
   isFoldNode?: boolean;
 }) => {
-  const connectingEdge = useContextSelector(WorkflowContext, (ctx) => ctx.connectingEdge);
-  const nodeList = useContextSelector(WorkflowContext, (v) => v.nodeList);
-  const edges = useContextSelector(WorkflowContext, (v) => v.edges);
+  const { connectingEdge, nodeList, edges } = useContextSelector(WorkflowContext, (ctx) => ctx);
 
   const { showSourceHandle, RightHandle, LeftHandlee, TopHandlee, BottomHandlee } = useMemo(() => {
     const node = nodeList.find((node) => node.nodeId === nodeId);
@@ -32,6 +30,15 @@ export const ConnectionSourceHandle = ({
       const rightTargetConnected = edges.some(
         (edge) => edge.targetHandle === getHandleId(nodeId, 'target', Position.Right)
       );
+
+      /* 
+        If the node is folded, must show the handle
+        hide handle when:
+          - not folded
+          - not node
+          - not sourceHandle
+          - already connected
+      */
       if (!isFoldNode && (!node || !node?.sourceHandle?.right || rightTargetConnected)) return null;
 
       return (

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/render/NodeCard.tsx

@@ -82,9 +82,13 @@ const NodeCard = (props: Props) => {
     [isTool, nodeList]
   );
 
+  // Current node and parent node
   const { node, parentNode } = useMemo(() => {
     const node = nodeList.find((node) => node.nodeId === nodeId);
-    const parentNode = nodeList.find((n) => n.nodeId === node?.parentNodeId);
+    const parentNode = node?.parentNodeId
+      ? nodeList.find((n) => n.nodeId === node?.parentNodeId)
+      : undefined;
+
     return { node, parentNode };
   }, [nodeList, nodeId]);
 

projects/app/src/pages/app/detail/components/WorkflowComponents/utils.tsx

@@ -48,10 +48,12 @@ export const uiWorkflow2StoreWorkflow = ({
     .filter(
       // Filter out edges that do not have both sourceHandle and targetHandle
       (item) => {
-        // Not in react flow page
         if (!reactFlowViewport) return true;
         const currentSourceNode = nodes.find((node) => node.data.nodeId === item.source);
+
         if (currentSourceNode?.data.isFolded) return true;
+
+        // Not in react flow page
         return handleIdList.includes(item.sourceHandle) && handleIdList.includes(item.targetHandle);
       }
     );