fix: fixed the issue of error when opening the canvas #918 (#1520)

### What problem does this PR solve?

fix: fixed the issue of error when opening the canvas #918

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
balibabu 2024-07-15 19:17:03 +08:00 committed by GitHub
parent 5a6a34cef9
commit 2ea696934b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -6,8 +6,7 @@ import {
} from 'reactflow';
import useGraphStore from '../../store';
import { IFlow } from '@/interfaces/database/flow';
import { useQueryClient } from '@tanstack/react-query';
import { useFetchFlow } from '@/hooks/flow-hooks';
import { useMemo } from 'react';
import styles from './index.less';
@ -44,12 +43,13 @@ export function ButtonEdge({
};
// highlight the nodes that the workflow passes through
const queryClient = useQueryClient();
const flowDetail = queryClient.getQueryData<IFlow>(['flowDetail']);
// const queryClient = useQueryClient();
// const flowDetail = queryClient.getQueryData<IFlow>(['flowDetail']);
const { data: flowDetail } = useFetchFlow();
const graphPath = useMemo(() => {
// TODO: this will be called multiple times
const path = flowDetail?.dsl.path ?? [];
const path = flowDetail?.dsl?.path ?? [];
// The second to last
const previousGraphPath: string[] = path.at(-2) ?? [];
let graphPath: string[] = path.at(-1) ?? [];
@ -59,12 +59,16 @@ export function ButtonEdge({
graphPath = [previousLatestElement, ...graphPath];
}
return graphPath;
}, [flowDetail?.dsl.path]);
}, [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' };
if (idx !== -1) {
// The set of elements following source
const slicedGraphPath = graphPath.slice(idx + 1);
if (slicedGraphPath.some((x) => x === target)) {
return { strokeWidth: 2, stroke: 'red' };
}
}
return {};
}, [source, target, graphPath]);