Skip to content

Commit 0ab33cb

Browse files
talhainvenxiontalhainvenxion
committed
fixed rendering issue for DAG.
1 parent 9dd817f commit 0ab33cb

File tree

10 files changed

+195
-56
lines changed

10 files changed

+195
-56
lines changed

‎src/ui/components/dag/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,28 @@
11
import React from 'react';
22
import { useService } from './useService';
33
import { LayoutFlow } from '../lineage';
4+
import { FullWidthSpinner } from '../spinners';
45

56
const styles = {
67
container: { width: '100%', height: '100%' },
78
dag: { width: '100%', height: '100%', marginTop: '2rem' },
89
};
910

10-
export const DAG: React.FC<{ runId: TId }> = ({ runId }) => {
11+
export const DAG: React.FC<{ runId: TId; fetching?: boolean }> = ({
12+
runId,
13+
fetching,
14+
}) => {
1115
const { graph } = useService({ runId });
1216

13-
console.log(graph);
17+
console.log('runId', graph, runId);
18+
if (fetching) {
19+
return <FullWidthSpinner color="black" size="md" />;
20+
}
1421

1522
return (
1623
<div style={styles.container}>
1724
<div style={styles.dag}>
18-
<LayoutFlow graph={graph} />
25+
<LayoutFlow runId={runId} graph={graph} />
1926
</div>
2027
</div>
2128
);

‎src/ui/components/lineage/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ const getLayoutedElements = (
110110

111111
const nodeTypes = { step: StepNode, artifact: ArtifactNode };
112112

113-
export const LayoutFlow: React.FC<any> = (graph: any) => {
113+
export const LayoutFlow: React.FC<any> = (graph: any, runId: any) => {
114114
const dispatch = useDispatch();
115115
const {
116116
initialNodes: layoutedNodes,
@@ -156,10 +156,10 @@ export const LayoutFlow: React.FC<any> = (graph: any) => {
156156
<div className="controls">
157157
<button
158158
onClick={() => {
159-
console.log('checkGraph', graph.graph.runId);
159+
console.log('checkGraph', runId, graph);
160160
dispatch(
161161
runsActions.graphForRun({
162-
runId: graph.graph.runId,
162+
runId: graph.runId,
163163
}),
164164
);
165165
}}

‎src/ui/layouts/pipelines/RunDetail/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,17 @@ import { useHistory } from '../../../hooks';
2020
const getTabPages = ({
2121
pipelineId,
2222
runId,
23+
fetching,
2324
}: {
2425
pipelineId: TId;
2526
runId: TId;
27+
fetching: boolean;
2628
}): TabPage[] => {
2729
return [
2830
{
2931
text: 'DAG',
3032
// <Statistics runId={runId} stackId={stackId} />
31-
Component: () => <DAG runId={runId} />,
33+
Component: () => <DAG runId={runId} fetching={fetching} />,
3234
path: routePaths.run.pipeline.statistics(runId, pipelineId),
3335
},
3436
{
@@ -88,10 +90,11 @@ export interface RunDetailRouteParams {
8890

8991
export const RunDetail: React.FC = () => {
9092
// const { runId, pipelineId, run, billing } = useService();
91-
const { runId, pipelineId, run } = useService();
93+
const { runId, pipelineId, run, fetching } = useService();
9294
const tabPages = getTabPages({
9395
runId,
9496
pipelineId,
97+
fetching,
9598
});
9699
const breadcrumbs = getBreadcrumbs({
97100
runId,

‎src/ui/layouts/pipelines/RunDetail/useService.ts‎

Lines changed: 51 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,65 @@
1+
import { useEffect, useState } from 'react';
12
import { RunDetailRouteParams } from '.';
2-
import { runsActions } from '../../../../redux/actions';
3-
import { billingSelectors, runSelectors } from '../../../../redux/selectors';
4-
import { useParams, useRequestOnMount, useSelector } from '../../../hooks';
3+
import { runPagesActions, runsActions } from '../../../../redux/actions';
4+
import {
5+
billingSelectors,
6+
runPagesSelectors,
7+
runSelectors,
8+
} from '../../../../redux/selectors';
9+
import {
10+
useDispatch,
11+
useParams,
12+
useRequestOnMount,
13+
useSelector,
14+
} from '../../../hooks';
515

616
interface ServiceInterface {
717
runId: TId;
818
pipelineId: TId;
919
run: TRun;
1020
billing: TBilling | Record<any, any>;
21+
fetching: boolean;
1122
}
1223

1324
export const useService = (): ServiceInterface => {
25+
const dispatch = useDispatch();
1426
const { id, pipelineId } = useParams<RunDetailRouteParams>();
15-
27+
const [isMounted, setIsMounted] = useState(false);
1628
// useRequestOnMount(() =>
1729
// runsActions.runForId({
1830
// pipelineId,
1931
// runId: id,
2032
// }),
2133
// );
22-
useRequestOnMount(() =>
23-
runsActions.graphForRun({
24-
runId: id,
25-
}),
26-
);
34+
35+
useEffect(() => {
36+
if (!isMounted) {
37+
setFetching(true);
38+
dispatch(
39+
runsActions.graphForRun({
40+
runId: id,
41+
onSuccess: () => setFetching(false),
42+
onFailure: () => setFetching(false),
43+
}),
44+
);
45+
setIsMounted(true);
46+
}
47+
}, [isMounted, setIsMounted]);
48+
// useRequestOnMount(() =>
49+
// runsActions.graphForRun({
50+
// runId: id,
51+
// onSuccess: () => setFetching(false),
52+
// onFailure: () => setFetching(false),
53+
// }),
54+
// );
55+
// useEffect(() => {
56+
// dispatch(
57+
// runsActions.graphForRun({
58+
// runId: id,
59+
60+
// }),
61+
// );
62+
// });
2763
const run = useSelector(runSelectors.runForId(id));
2864

2965
// useRequestOnMount(() =>
@@ -33,7 +69,12 @@ export const useService = (): ServiceInterface => {
3369
// }),
3470
// );
3571

72+
const fetching = useSelector(runPagesSelectors.fetching);
73+
const setFetching = (fetching: boolean) => {
74+
dispatch(runPagesActions.setFetching({ fetching }));
75+
};
76+
3677
const billing = useSelector(billingSelectors.billingForRunId(id));
3778

38-
return { runId: id, pipelineId, run, billing };
79+
return { runId: id, pipelineId, run, billing, fetching };
3980
};

‎src/ui/layouts/runs/RunDetail/index.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,18 @@ import { RunStatus } from './components';
1717
import { formatDateForOverviewBar } from '../../../../utils';
1818
import { useHistory } from '../../../hooks';
1919

20-
const getTabPages = ({ runId }: { runId: TId }): TabPage[] => {
20+
const getTabPages = ({
21+
runId,
22+
fetching,
23+
}: {
24+
runId: TId;
25+
fetching: boolean;
26+
}): TabPage[] => {
2127
return [
2228
{
2329
text: 'DAG',
2430
// <Statistics runId={runId} stackId={stackId} />
25-
Component: () => <DAG runId={runId} />,
31+
Component: () => <DAG runId={runId} fetching={fetching} />,
2632
path: routePaths.run.run.statistics(runId),
2733
},
2834
{
@@ -61,10 +67,11 @@ export interface RunDetailRouteParams {
6167
}
6268

6369
export const RunDetail: React.FC = () => {
64-
const { runId, run } = useService();
70+
const { runId, run, fetching } = useService();
6571
// const { runId } = useService();
6672

6773
const tabPages = getTabPages({
74+
fetching,
6875
runId,
6976
});
7077
const breadcrumbs = getBreadcrumbs({

‎src/ui/layouts/runs/RunDetail/useService.ts‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,71 @@
1+
import { useEffect, useState } from 'react';
12
import { RunDetailRouteParams } from '.';
2-
import { runsActions } from '../../../../redux/actions';
3+
import { runPagesActions, runsActions } from '../../../../redux/actions';
34
// import { runsActions, billingActions } from '../../../../redux/actions';
4-
import { billingSelectors, runSelectors } from '../../../../redux/selectors';
5-
import { useParams, useRequestOnMount, useSelector } from '../../../hooks';
5+
import {
6+
billingSelectors,
7+
runPagesSelectors,
8+
runSelectors,
9+
} from '../../../../redux/selectors';
10+
import {
11+
useDispatch,
12+
useParams,
13+
useRequestOnMount,
14+
useSelector,
15+
} from '../../../hooks';
616

717
interface ServiceInterface {
818
runId: TId;
919
run: TRun;
1020
billing: TBilling | Record<any, any>;
21+
fetching: boolean;
1122
}
1223

1324
export const useService = (): ServiceInterface => {
25+
const dispatch = useDispatch();
1426
const { id, runId } = useParams<RunDetailRouteParams>();
15-
27+
const [isMounted, setIsMounted] = useState(false);
1628
// debugger;
1729
// useRequestOnMount(() =>
1830
// runsActions.runForId({
1931
// pipelineId,
2032
// runId: id,
2133
// }),
2234
// );
23-
useRequestOnMount(() =>
24-
runsActions.graphForRun({
25-
runId: runId,
26-
}),
27-
);
35+
// useRequestOnMount(() =>
36+
// runsActions.graphForRun({
37+
// runId: runId,
38+
// }),
39+
// );
40+
41+
useEffect(() => {
42+
if (!isMounted) {
43+
setFetching(true);
44+
dispatch(
45+
runsActions.graphForRun({
46+
runId: runId,
47+
onSuccess: () => setFetching(false),
48+
onFailure: () => setFetching(false),
49+
}),
50+
);
51+
setIsMounted(true);
52+
}
53+
}, [isMounted, setIsMounted]);
2854

2955
// useRequestOnMount(() =>
3056
// billingActions.billingForRunId({
3157
// runId: id,
3258
// pipelineId,
3359
// }),
3460
// );
61+
const fetching = useSelector(runPagesSelectors.fetching);
62+
const setFetching = (fetching: boolean) => {
63+
dispatch(runPagesActions.setFetching({ fetching }));
64+
};
3565

3666
const run: TRun = useSelector(runSelectors.runForId(runId));
3767

3868
const billing = useSelector(billingSelectors.billingForRunId(id));
3969

40-
return { runId: runId, run, billing };
70+
return { runId: runId, run, billing, fetching };
4171
};

‎src/ui/layouts/stackComponents/RunDetail/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export interface RunDetailRouteParams {
7777
export const RunDetail: React.FC = () => {
7878
const locationPath = useLocationPath();
7979
const history = useHistory();
80-
const { stackComponentId, runId, run } = useService();
80+
const { stackComponentId, runId, run, fetching } = useService();
8181
// debugger;
8282
// debugger;
8383
// const { runId, stackId, run, billing } = useService();
@@ -86,7 +86,7 @@ export const RunDetail: React.FC = () => {
8686
{
8787
text: 'DAG',
8888
// <Statistics runId={runId} stackId={stackId} />
89-
Component: () => <DAG runId={runId} />,
89+
Component: () => <DAG runId={runId} fetching={fetching} />,
9090
path: routePaths.run.component.statistics(
9191
locationPath.split('/')[2],
9292
stackComponentId,

‎src/ui/layouts/stackComponents/RunDetail/useService.ts‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,70 @@
1+
import { useEffect, useState } from 'react';
12
import { RunDetailRouteParams } from '.';
2-
import { runsActions } from '../../../../redux/actions';
3+
import { runPagesActions, runsActions } from '../../../../redux/actions';
34
// import { runsActions, billingActions } from '../../../../redux/actions';
4-
import { billingSelectors, runSelectors } from '../../../../redux/selectors';
5-
import { useParams, useRequestOnMount, useSelector } from '../../../hooks';
5+
import {
6+
billingSelectors,
7+
runPagesSelectors,
8+
runSelectors,
9+
} from '../../../../redux/selectors';
10+
import {
11+
useDispatch,
12+
useParams,
13+
useRequestOnMount,
14+
useSelector,
15+
} from '../../../hooks';
616

717
interface ServiceInterface {
818
runId: TId;
919
stackComponentId: TId;
1020
run: TRun;
1121
billing: TBilling | Record<any, any>;
1222
type: string;
23+
fetching: boolean;
1324
}
1425

1526
export const useService = (): ServiceInterface => {
27+
const dispatch = useDispatch();
1628
const { type, stackComponentId, id } = useParams<RunDetailRouteParams>();
29+
const [isMounted, setIsMounted] = useState(false);
1730
// debugger;
1831
// useRequestOnMount(() =>
1932
// runsActions.runForId({
2033
// pipelineId,
2134
// runId: id,
2235
// }),
2336
// );
24-
useRequestOnMount(() =>
25-
runsActions.graphForRun({
26-
runId: id,
27-
}),
28-
);
37+
// useRequestOnMount(() =>
38+
// runsActions.graphForRun({
39+
// runId: id,
40+
// }),
41+
// );
42+
useEffect(() => {
43+
if (!isMounted) {
44+
setFetching(true);
45+
dispatch(
46+
runsActions.graphForRun({
47+
runId: id,
48+
onSuccess: () => setFetching(false),
49+
onFailure: () => setFetching(false),
50+
}),
51+
);
52+
setIsMounted(true);
53+
}
54+
}, [isMounted, setIsMounted]);
2955

3056
// useRequestOnMount(() =>
3157
// billingActions.billingForRunId({
3258
// runId: id,
3359
// pipelineId,
3460
// }),
3561
// );
36-
62+
const fetching = useSelector(runPagesSelectors.fetching);
63+
const setFetching = (fetching: boolean) => {
64+
dispatch(runPagesActions.setFetching({ fetching }));
65+
};
3766
const run = useSelector(runSelectors.runForId(id));
3867
const billing = useSelector(billingSelectors.billingForRunId(id));
3968

40-
return { type, runId: id, stackComponentId, run, billing };
69+
return { type, runId: id, stackComponentId, run, billing, fetching };
4170
};

0 commit comments

Comments
 (0)