fix: monitor changes in the data.form field of the categorize and relevant operators and then synchronize them to the edge #918 (#1469)

### What problem does this PR solve?
feat: monitor changes in the table of relevant operators and synchronize
them to the edge #918
feat: fixed the issue of repeated requests when opening the graph page
#918
feat: cache node anchor coordinate information #918
feat: monitor changes in the data.form field of the categorize and
relevant operators and then synchronize them to the edge #918
### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)
This commit is contained in:
balibabu
2024-07-11 18:01:50 +08:00
committed by GitHub
parent 7f4c63d102
commit 8d7fb12305
14 changed files with 252 additions and 72 deletions

View File

@ -6,7 +6,8 @@ import {
} from 'reactflow';
import useGraphStore from '../../store';
import { useFetchFlow } from '@/hooks/flow-hooks';
import { IFlow } from '@/interfaces/database/flow';
import { useQueryClient } from '@tanstack/react-query';
import { useMemo } from 'react';
import styles from './index.less';
@ -43,10 +44,12 @@ export function ButtonEdge({
};
// highlight the nodes that the workflow passes through
const { data: flowDetail } = useFetchFlow();
const queryClient = useQueryClient();
const flowDetail = queryClient.getQueryData<IFlow>(['flowDetail']);
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) ?? [];
@ -56,7 +59,7 @@ export function ButtonEdge({
graphPath = [previousLatestElement, ...graphPath];
}
return graphPath;
}, [flowDetail.dsl.path]);
}, [flowDetail?.dsl.path]);
const highlightStyle = useMemo(() => {
const idx = graphPath.findIndex((x) => x === source);