chore: use query to manage last run to decrease the code complex

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -154,7 +154,6 @@ const BasePanel: FC<BasePanelProps> = ({
     setSingleRunParams,
     setRunInputData,
     hasLastRunData,
-    isDataFromHistory,
     handleRun,
     getExistVarValuesInForms,
     getFilteredExistVarForms,
@@ -304,7 +303,7 @@ const BasePanel: FC<BasePanelProps> = ({
         )}
 
         {tabType === TabType.lastRun && (
-          <LastRun appId={appDetail?.id || ''} nodeId={id} runningStatus={runningStatus} isDataFromHistory={isDataFromHistory} />
+          <LastRun appId={appDetail?.id || ''} nodeId={id} runningStatus={runningStatus} />
         )}
 
         {

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/index.tsx

@@ -1,56 +1,37 @@
 'use client'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
-import { useWorkflowStore } from '@/app/components/workflow/store'
 import { NodeRunningStatus } from '@/app/components/workflow/types'
 import type { FC } from 'react'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import NoData from './no-data'
 import { useLastRun } from '@/service/use-workflow'
 import Loading from '@/app/components/base/loading'
 
 type Props = {
-  isDataFromHistory: boolean
   appId: string
   nodeId: string
   runningStatus?: NodeRunningStatus
 }
 
 const LastRun: FC<Props> = ({
-  isDataFromHistory,
   appId,
   nodeId,
   runningStatus,
 }) => {
-  const workflowStore = useWorkflowStore()
-
-  const {
-    getLastRunNodeInfo,
-  } = workflowStore.getState()
-  const { data: runResultFromHistory, isFetching } = useLastRun(appId, nodeId, isDataFromHistory)
-  const [runResultFromSingleRun, setRunResult] = useState(isDataFromHistory ? getLastRunNodeInfo(nodeId) : null)
-  const runResult = isDataFromHistory ? runResultFromHistory : runResultFromSingleRun
   const isRunning = runningStatus === NodeRunningStatus.Running
-
-  // get data from current running result
-  useEffect(() => {
-    if (isDataFromHistory)
-      return
-
-    setRunResult(getLastRunNodeInfo(nodeId))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [runningStatus, isDataFromHistory])
+  const { data: runResult, isFetching } = useLastRun(appId, nodeId, !isRunning)
 
   const handleSingleRun = () => {
     console.log('run')
   }
 
-  if (isDataFromHistory && isFetching)
+  if (isFetching)
     return <Loading />
 
   if (isRunning)
     return <ResultPanel status='running' showSteps={false} />
 
-  if (!runResultFromSingleRun) {
+  if (!runResult) {
     return (
       <NoData onSingleRun={handleSingleRun} />
     )

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -29,10 +29,8 @@ const useLastRun = <T>({
     setSingleRunParams(childPanelRef.current?.singleRunParams)
   }, [doSetRunInputData])
 
-  const [isDataFromHistory, setIsDataFromHistory] = useState(true)
   const [tabType, setTabType] = useState<TabType>(TabType.settings)
   const handleRun = async (data: Record<string, any>) => {
-    setIsDataFromHistory(false)
     setTabType(TabType.lastRun)
     callRunApi(data)
     hideSingleRun()
@@ -40,7 +38,6 @@ const useLastRun = <T>({
 
   const handleTabClicked = useCallback((type: TabType) => {
     setTabType(type)
-    setIsDataFromHistory(true)
   }, [])
   const hasLastRunData = true // TODO: add disabled logic
 
@@ -109,7 +106,6 @@ const useLastRun = <T>({
     setSingleRunParams,
     setRunInputData,
     hasLastRunData,
-    isDataFromHistory,
     handleRun,
     getExistVarValuesInForms,
     getFilteredExistVarForms,

web/app/components/workflow/nodes/_base/hooks/use-one-step-run.ts

@@ -50,6 +50,7 @@ const { checkValid: checkLoopValid } = LoopDefault
 import {
   useStoreApi,
 } from 'reactflow'
+import { useInvalidLastRun } from '@/service/use-workflow'
 // eslint-disable-next-line ts/no-unsafe-function-type
 const checkValidFns: Record<BlockEnum, Function> = {
   [BlockEnum.LLM]: checkLLMValid,
@@ -158,20 +159,19 @@ const useOneStepRun = <T>({
   const store = useStoreApi()
   const workflowStore = useWorkflowStore()
   const {
-
-    setLastRunNodeInfo,
     appendNodeInspectVars,
     setShowSingleRunPanel,
   } = workflowStore.getState()
+  const invalidLastRun = useInvalidLastRun(appId!, id)
   const [runResult, doSetRunResult] = useState<NodeRunResult | null>(null)
   const setRunResult = useCallback(async (data: NodeRunResult | null) => {
     doSetRunResult(data)
-    setLastRunNodeInfo(id, data!)
+    invalidLastRun()
     const vars = await fetchNodeInspectVars(appId!, data!.id)
     const { getNodes } = store.getState()
     const nodes = getNodes()
     appendNodeInspectVars(id, vars, nodes)
-  }, [setLastRunNodeInfo, id, appId, store, appendNodeInspectVars])
+  }, [invalidLastRun, appId, store, appendNodeInspectVars, id])
 
   const { handleNodeDataUpdate }: { handleNodeDataUpdate: (data: any) => void } = useNodeDataUpdate()
   const [canShowSingleRun, setCanShowSingleRun] = useState(false)

web/app/components/workflow/store/workflow/debug/last-run-slice.ts

@@ -1,67 +0,0 @@
-import produce from 'immer'
-import type { StateCreator } from 'zustand'
-import type { NodeRunResult } from '@/types/workflow'
-
-type LastRunState = {
-  nodes: NodeRunResult[]
-}
-
-type LastRunActions = {
-  setLastRunInfos: (vars: NodeRunResult[]) => void
-  getLastRunInfos: () => NodeRunResult[]
-  setLastRunNodeInfo: (nodeId: string, payload: NodeRunResult) => void
-  getLastRunNodeInfo: (nodeId: string) => NodeRunResult | undefined
-  getLastRunVar: (nodeId: string, key: string) => any
-}
-
-export type LastRunSliceShape = LastRunState & LastRunActions
-
-export const createLastRunSlice: StateCreator<LastRunSliceShape> = (set, get) => {
-  return ({
-    nodes: [],
-    setLastRunInfos: (vars) => {
-      set(() => ({
-        nodes: vars,
-      }))
-    },
-    getLastRunInfos: () => {
-      return get().nodes
-    },
-    clearVars: () => {
-      set(() => ({
-        nodes: [],
-      }))
-    },
-    setLastRunNodeInfo: (nodeId, payload) => {
-      set((state) => {
-        const prevNodes = state.nodes
-        const nodes = produce(prevNodes, (draft) => {
-          const index = prevNodes.findIndex(node => node.id === nodeId)
-          if (index === -1)
-            draft.push(payload)
-          else
-            draft[index] = payload
-        })
-
-        return {
-          nodes,
-        }
-      })
-    },
-    getLastRunNodeInfo: (nodeId) => {
-      const nodes = get().nodes
-      return nodes.find(node => node.node_id === nodeId)
-    },
-    getLastRunVar: (nodeId, key) => {
-      const node = get().getLastRunNodeInfo(nodeId)
-      if (!node)
-        return undefined
-
-      const varItem = node
-      if (!varItem)
-        return undefined
-
-      return varItem.outputs?.[key]
-    },
-  })
-}

web/app/components/workflow/store/workflow/index.ts

@@ -28,8 +28,6 @@ import type { WorkflowDraftSliceShape } from './workflow-draft-slice'
 import { createWorkflowDraftSlice } from './workflow-draft-slice'
 import type { WorkflowSliceShape } from './workflow-slice'
 import { createWorkflowSlice } from './workflow-slice'
-import type { LastRunSliceShape } from './debug/last-run-slice'
-import { createLastRunSlice } from './debug/last-run-slice'
 import type { InspectVarsSliceShape } from './debug/inspect-vars-slice'
 import { createInspectVarsSlice } from './debug/inspect-vars-slice'
 
@@ -50,7 +48,6 @@ export type Shape =
   VersionSliceShape &
   WorkflowDraftSliceShape &
   WorkflowSliceShape &
-  LastRunSliceShape &
   InspectVarsSliceShape &
   LayoutSliceShape &
   WorkflowAppSliceShape
@@ -74,7 +71,6 @@ export const createWorkflowStore = (params: CreateWorkflowStoreParams) => {
     ...createVersionSlice(...args),
     ...createWorkflowDraftSlice(...args),
     ...createWorkflowSlice(...args),
-    ...createLastRunSlice(...args),
     ...createInspectVarsSlice(...args),
     ...createLayoutSlice(...args),
     ...(injectWorkflowStoreSliceFn?.(...args) || {} as WorkflowAppSliceShape),

web/service/use-workflow.ts

@@ -89,11 +89,13 @@ export const usePublishWorkflow = (appId: string) => {
   })
 }
 
+const useLastRunKey = [NAME_SPACE, 'last-run']
 export const useLastRun = (appID: string, nodeId: string, enabled: boolean) => {
   return useQuery<NodeTracing>({
     enabled,
-    queryKey: [NAME_SPACE, 'last-run', appID, nodeId],
+    queryKey: [...useLastRunKey, appID, nodeId],
     queryFn: async () => {
+      console.log(`fetch last run : ${nodeId}`)
       // TODO: mock data
       await sleep(1000)
       return Promise.resolve({
@@ -125,6 +127,15 @@ export const useLastRun = (appID: string, nodeId: string, enabled: boolean) => {
   })
 }
 
+export const useInvalidLastRun = (appId: string, nodeId: string) => {
+  return useInvalid([NAME_SPACE, 'last-run', appId, nodeId])
+}
+
+// Rerun workflow or change the version of workflow
+export const useInvalidAllLastRun = (appId: string) => {
+  return useInvalid([NAME_SPACE, 'last-run', appId])
+}
+
 const useConversationVarValuesKey = [NAME_SPACE, 'conversation-variable']
 
 export const useConversationVarValues = (appId: string) => {