From 0b7cdd1e5d4b8ee8d115a80bd8fba198d063f3cc Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 19 Mar 2024 14:46:47 +0800
Subject: [PATCH] node collapse

---
 web/app/components/workflow/run/index.tsx         | 13 -------------
 web/app/components/workflow/run/node.tsx          | 11 ++++++-----
 web/app/components/workflow/run/tracing-panel.tsx |  8 ++------
 3 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 5dd6233f95..3da40b24ce 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
-import produce from 'immer'
 import ResultPanel from './result-panel'
 import TracingPanel from './tracing-panel'
 import { ToastContext } from '@/app/components/base/toast'
@@ -27,7 +26,6 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID }) => {
   const [loading, setLoading] = useState<boolean>(true)
   const [runDetail, setRunDetail] = useState<WorkflowRunDetailResponse>()
   const [list, setList] = useState<NodeTracing[]>([])
-  const [collapseState, setCollapseState] = useState<boolean[]>([])
 
   const executor = useMemo(() => {
     if (runDetail?.created_by_role === 'account')
@@ -37,13 +35,6 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID }) => {
     return 'N/A'
   }, [runDetail])
 
-  const collapseStateChange = (index: number) => {
-    const newCollapseState = produce(collapseState, (draft: boolean[]) => {
-      draft[index] = !draft[index]
-    })
-    setCollapseState(newCollapseState)
-  }
-
   const getResult = useCallback(async (appID: string, runID: string) => {
     try {
       const res = await fetchRunDetail({
@@ -65,9 +56,7 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID }) => {
       const { data: nodeList } = await fetchTracingList({
         url: `/apps/${appID}/workflow-runs/${runID}/node-executions`,
       })
-      const collapseState = nodeList.map(node => node.status === 'succeeded')
       setList(nodeList.reverse())
-      setCollapseState(collapseState)
     }
     catch (err) {
       notify({
@@ -139,8 +128,6 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID }) => {
         {!loading && currentTab === 'TRACING' && (
           <TracingPanel
             list={list}
-            collapseState={collapseState}
-            collapseHandle={collapseStateChange}
           />
         )}
       </div>
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 42acf8ef08..33bab8e32e 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
+import { useState } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
@@ -12,11 +13,11 @@ import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
   nodeInfo: NodeTracing
-  collapsed: boolean
-  collapseHandle: () => void
+  collapsed?: boolean
 }
 
-const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
+const NodePanel: FC<Props> = ({ nodeInfo, collapsed = true }) => {
+  const [collapseState, setCollapseState] = useState<boolean>(collapsed)
   const { t } = useTranslation()
 
   const getTime = (time: number) => {
@@ -44,7 +45,7 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
             'flex items-center pl-[6px] py-3 pr-3 cursor-pointer',
             !collapsed && 'pb-2',
           )}
-          onClick={collapseHandle}
+          onClick={() => setCollapseState(!collapseState)}
         >
           <ChevronRight
             className={cn(
@@ -71,7 +72,7 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed, collapseHandle }) => {
             </div>
           )}
         </div>
-        {!collapsed && (
+        {!collapseState && (
           <div className='pb-2'>
             <div className='px-[10px] py-1'>
               {nodeInfo.status === 'stopped' && (
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index aefb7db498..b6dc5242ea 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -5,19 +5,15 @@ import type { NodeTracing } from '@/types/workflow'
 
 type TracingPanelProps = {
   list: NodeTracing[]
-  collapseState: boolean[]
-  collapseHandle: (index: number) => void
 }
 
-const TracingPanel: FC<TracingPanelProps> = ({ list, collapseState, collapseHandle }) => {
+const TracingPanel: FC<TracingPanelProps> = ({ list }) => {
   return (
     <div className='bg-gray-50 py-2'>
-      {list.map((node, index) => (
+      {list.map(node => (
         <NodePanel
           key={node.id}
           nodeInfo={node}
-          collapsed={collapseState[index]}
-          collapseHandle={() => collapseHandle(index)}
         />
       ))}
     </div>