From f5dc94fc85b0b9d5548ce2a2c11d5d21c9c62984 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 8 Jul 2024 17:45:17 +0800
Subject: [PATCH] feat: highlight the nodes that the workflow passes through
 #918 (#1423)

### What problem does this PR solve?

feat: highlight the nodes that the workflow passes through #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
---
 web/src/interfaces/database/flow.ts      |  2 +-
 web/src/pages/flow/canvas/edge/index.tsx | 31 ++++++++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/web/src/interfaces/database/flow.ts b/web/src/interfaces/database/flow.ts
index 8ddb56f30f5..b6821024c89 100644
--- a/web/src/interfaces/database/flow.ts
+++ b/web/src/interfaces/database/flow.ts
@@ -6,7 +6,7 @@ export type DSLComponents = Record<string, IOperator>;
 export interface DSL {
   components: DSLComponents;
   history: any[];
-  path?: string[];
+  path?: string[][];
   answer?: any[];
   graph?: IGraph;
   messages: Message[];
diff --git a/web/src/pages/flow/canvas/edge/index.tsx b/web/src/pages/flow/canvas/edge/index.tsx
index 614888b644b..84ac87afb5e 100644
--- a/web/src/pages/flow/canvas/edge/index.tsx
+++ b/web/src/pages/flow/canvas/edge/index.tsx
@@ -6,6 +6,7 @@ import {
 } from 'reactflow';
 import useGraphStore from '../../store';
 
+import { useFetchFlow } from '@/hooks/flow-hooks';
 import { useMemo } from 'react';
 import styles from './index.less';
 
@@ -17,6 +18,8 @@ export function ButtonEdge({
   targetY,
   sourcePosition,
   targetPosition,
+  source,
+  target,
   style = {},
   markerEnd,
   selected,
@@ -32,19 +35,43 @@ export function ButtonEdge({
   });
 
   const selectedStyle = useMemo(() => {
-    return selected ? { strokeWidth: 1, stroke: '#1677ff' } : {};
+    return selected ? { strokeWidth: 2, stroke: '#1677ff' } : {};
   }, [selected]);
 
   const onEdgeClick = () => {
     deleteEdgeById(id);
   };
 
+  // highlight the nodes that the workflow passes through
+  const { data: flowDetail } = useFetchFlow();
+  const graphPath = useMemo(() => {
+    // TODO: this will be called multiple times
+    const path = flowDetail.dsl.path ?? [];
+    // The second to last
+    const previousGraphPath: string[] = path.at(-2) ?? [];
+    let graphPath: string[] = path.at(-1) ?? [];
+    // The last of the second to last article
+    const previousLatestElement = previousGraphPath.at(-1);
+    if (previousGraphPath.length > 0 && previousLatestElement) {
+      graphPath = [previousLatestElement, ...graphPath];
+    }
+    return graphPath;
+  }, [flowDetail.dsl.path]);
+
+  const highlightStyle = useMemo(() => {
+    const idx = graphPath.findIndex((x) => x === source);
+    if (idx !== -1 && graphPath[idx + 1] === target) {
+      return { strokeWidth: 2, stroke: 'red' };
+    }
+    return {};
+  }, [source, target, graphPath]);
+
   return (
     <>
       <BaseEdge
         path={edgePath}
         markerEnd={markerEnd}
-        style={{ ...style, ...selectedStyle }}
+        style={{ ...style, ...selectedStyle, ...highlightStyle }}
       />
       <EdgeLabelRenderer>
         <div