Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: update node executions to display map tasks #455

Merged
merged 10 commits into from
May 13, 2022
Prev Previous commit
Next Next commit
fix: fix flickering and unnecessary rerenders
Signed-off-by: Olga Nad <olga@union.ai>
olga-union committed May 12, 2022
commit 98e870bc8cc5f45fc525db7538a5e4d74c4e8778
Original file line number Diff line number Diff line change
@@ -340,7 +340,7 @@ export const NodeExecutionDetailsPanelContent: React.FC<NodeExecutionDetailsProp
const statusContent = nodeExecution ? (
<div className={styles.statusContainer}>
<div className={styles.statusHeaderContainer}>
<ExecutionStatusBadge phase={nodeExecution?.closure.phase} type="node" />
<ExecutionStatusBadge phase={nodeExecution.closure.phase} type="node" />
{isRunningPhase && (
<InfoIcon className={styles.reasonsIcon} onClick={handleReasonsVisibility} />
)}
Original file line number Diff line number Diff line change
@@ -17,13 +17,20 @@ const nodeExecutionStatusChanged = (previous, nodeExecutionsById) => {
return false;
};

const nodeExecutionResourcesChanged = (previous, nodeExecutionsById) => {
const nodeExecutionLogsChanged = (previous, nodeExecutionsById) => {
for (const exe in nodeExecutionsById) {
const oldStatus = previous[exe]?.logsByPhase;
const newStatus = nodeExecutionsById[exe]?.logsByPhase;
if (oldStatus !== newStatus) {
const oldLogs = previous[exe]?.logsByPhase ?? new Map();
const newLogs = nodeExecutionsById[exe]?.logsByPhase ?? new Map();
if (oldLogs.size !== newLogs.size) {
return true;
}
for (const phase in newLogs) {
const oldNumOfLogs = oldLogs.get(phase)?.length ?? 0;
const newNumOfLogs = newLogs.get(phase)?.length ?? 0;
if (oldNumOfLogs !== newNumOfLogs) {
return true;
}
}
}
return false;
};
@@ -53,7 +60,7 @@ const ReactFlowGraphComponent = (props) => {
onPhaseSelectionChanged,
rfGraphJson: null,
});

// const [nodeExecutionUpdateCount, setNodeExecutionUpdateCount] = useState<number>(0);
olga-union marked this conversation as resolved.
Show resolved Hide resolved
const onAddNestedView = (view) => {
const currentView = state.currentNestedView[view.parent] || [];
const newView = {
@@ -68,7 +75,7 @@ const ReactFlowGraphComponent = (props) => {
const onRemoveNestedView = (viewParent, viewIndex) => {
const currentNestedView: any = { ...state.currentNestedView };
currentNestedView[viewParent] = currentNestedView[viewParent]?.filter(
(item, i) => i <= viewIndex,
(_item, i) => i <= viewIndex,
);
if (currentNestedView[viewParent]?.length < 1) {
delete currentNestedView[viewParent];
@@ -85,21 +92,33 @@ const ReactFlowGraphComponent = (props) => {
nodeExecutionsById: state.nodeExecutionsById,
onNodeSelectionChanged: state.onNodeSelectionChanged,
onPhaseSelectionChanged: state.onPhaseSelectionChanged,
onAddNestedView: onAddNestedView,
onRemoveNestedView: onRemoveNestedView,
onAddNestedView,
onRemoveNestedView,
currentNestedView: state.currentNestedView,
maxRenderDepth: 1,
} as ConvertDagProps);
};

useEffect(() => {
const newRFGraphData = buildReactFlowGraphData();
// console.log('CLO ~ useEffect ~ newRFGraphData', newRFGraphData);
olga-union marked this conversation as resolved.
Show resolved Hide resolved
setState((state) => ({
...state,
rfGraphJson: newRFGraphData,
}));
}, [state.currentNestedView, state.nodeExecutionsById]);

// useEffect(() => {
olga-union marked this conversation as resolved.
Show resolved Hide resolved
// if (nodeExecutionUpdateCount < 2) {
// const newRFGraphData = buildReactFlowGraphData();
// setState((state) => ({
// ...state,
// rfGraphJson: newRFGraphData,
// }));
// setNodeExecutionUpdateCount(nodeExecutionUpdateCount + 1);
// }
// }, [state.nodeExecutionsById]);

useEffect(() => {
if (graphNodeCountChanged(state.data, data)) {
setState((state) => ({
@@ -109,20 +128,20 @@ const ReactFlowGraphComponent = (props) => {
}
if (
nodeExecutionStatusChanged(state.nodeExecutionsById, nodeExecutionsById) ||
nodeExecutionResourcesChanged(state.nodeExecutionsById, nodeExecutionsById)
nodeExecutionLogsChanged(state.nodeExecutionsById, nodeExecutionsById)
) {
setState((state) => ({
...state,
nodeExecutionsById: nodeExecutionsById,
nodeExecutionsById,
}));
}
}, [data, nodeExecutionsById]);

useEffect(() => {
setState((state) => ({
...state,
onNodeSelectionChanged: onNodeSelectionChanged,
onPhaseSelectionChanged: onPhaseSelectionChanged,
onNodeSelectionChanged,
onPhaseSelectionChanged,
}));
}, [onNodeSelectionChanged, onPhaseSelectionChanged]);

@@ -141,7 +160,7 @@ const ReactFlowGraphComponent = (props) => {
backgroundStyle,
rfGraphJson: state.rfGraphJson,
type: RFGraphTypes.main,
nodeExecutionsById: nodeExecutionsById,
nodeExecutionsById,
currentNestedView: state.currentNestedView,
};
return (