diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx index 8f634c0cf..915cb3bfa 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx +++ b/packages/console/src/components/Executions/ExecutionDetails/Timeline/ExecutionTimeline.tsx @@ -172,7 +172,7 @@ export const ExecutionTimeline: React.FC = ({ }; const toggleNode = async (id: string, scopedId: string, level: number) => { - fetchChildrenExecutions( + await fetchChildrenExecutions( queryClient, scopedId, nodeExecutionsById, diff --git a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx index 7a58f9fc5..83987f101 100644 --- a/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx +++ b/packages/console/src/components/Executions/ExecutionDetails/Timeline/TaskNames.tsx @@ -56,6 +56,8 @@ export const TaskNames = React.forwardRef( const styles = useStyles(); const { nodeExecutionsById } = useContext(NodeExecutionsByIdContext); + const expanderRef = React.useRef(); + return (
{nodes.map(node => { @@ -84,6 +86,7 @@ export const TaskNames = React.forwardRef(
{nodeExecution && isParentNode(nodeExecution) ? ( } expanded={node.expanded || false} onClick={() => onToggle(node.id, node.scopedId, nodeLevel) diff --git a/packages/console/src/components/Executions/Tables/NodeExecutionRow.tsx b/packages/console/src/components/Executions/Tables/NodeExecutionRow.tsx index 26107716f..c1511afa6 100644 --- a/packages/console/src/components/Executions/Tables/NodeExecutionRow.tsx +++ b/packages/console/src/components/Executions/Tables/NodeExecutionRow.tsx @@ -44,12 +44,13 @@ export const NodeExecutionRow: React.FC = ({ }) => { const styles = useStyles(); const theme = useTheme(); + const expanderRef = React.useRef(); + const tableStyles = useExecutionTableStyles(); const { selectedExecution, setSelectedExecution } = useContext(DetailsPanelContext); const nodeLevel = node?.level ?? 0; - const expanded = isExpanded(node); // For the first level, we want the borders to span the entire table, // so we'll use padding to space the content. For nested rows, we want the @@ -66,18 +67,20 @@ export const NodeExecutionRow: React.FC = ({ ? isEqual(selectedExecution, nodeExecution) : false; - const expanderContent = ( -
- {isParentNode(nodeExecution) ? ( - onToggle(node.id, node.scopedId, nodeLevel)} - /> - ) : ( -
- )} -
- ); + const expanderContent = React.useMemo(() => { + return isParentNode(nodeExecution) ? ( + } + key={node.scopedId} + expanded={isExpanded(node)} + onClick={() => { + onToggle(node.id, node.scopedId, nodeLevel); + }} + /> + ) : ( +
+ ); + }, [node, nodeLevel]); // open the side panel for selected execution's detail // use null in case if there is no execution provided - when it is null, will close side panel @@ -99,7 +102,9 @@ export const NodeExecutionRow: React.FC = ({
- {expanderContent} +
+ {expanderContent} +
{columns.map(({ className, key: columnKey, cellRenderer }) => (
= ({ ); useEffect(() => { - setOriginalNodes( - appliedFilters.length > 0 && filteredNodes ? filteredNodes : initialNodes, - ); + setOriginalNodes(ogn => { + const newNodes = + appliedFilters.length > 0 && filteredNodes + ? filteredNodes + : merge(initialNodes, ogn); + + if (!eq(newNodes, ogn)) { + return newNodes; + } + + return ogn; + }); + const plainNodes = convertToPlainNodes(originalNodes); const updatedShownNodesMap = plainNodes.map(node => { const execution = nodeExecutionsById[node.scopedId]; @@ -88,7 +99,7 @@ export const NodeExecutionsTable: React.FC = ({ }, [initialNodes, filteredNodes, originalNodes, nodeExecutionsById]); const toggleNode = async (id: string, scopedId: string, level: number) => { - fetchChildrenExecutions( + await fetchChildrenExecutions( queryClient, scopedId, nodeExecutionsById, diff --git a/packages/console/src/components/Executions/Tables/RowExpander.tsx b/packages/console/src/components/Executions/Tables/RowExpander.tsx index cca089ddb..b9d4f3642 100644 --- a/packages/console/src/components/Executions/Tables/RowExpander.tsx +++ b/packages/console/src/components/Executions/Tables/RowExpander.tsx @@ -1,25 +1,34 @@ +import * as React from 'react'; import { IconButton } from '@material-ui/core'; import ChevronRight from '@material-ui/icons/ChevronRight'; import ExpandMore from '@material-ui/icons/ExpandMore'; -import * as React from 'react'; import t from './strings'; -/** A simple expand/collapse arrow to be rendered next to row items. */ -export const RowExpander: React.FC<{ +interface RowExpanderProps { expanded: boolean; + key?: string; onClick: () => void; -}> = ({ expanded, onClick }) => ( - ) => { - // prevent the parent row body onClick event trigger - e.stopPropagation(); - onClick(); - }} - > - {expanded ? : } - -); +} +/** A simple expand/collapse arrow to be rendered next to row items. */ +export const RowExpander = React.forwardRef< + HTMLButtonElement, + RowExpanderProps +>(({ expanded, key, onClick }, ref) => { + return ( + ) => { + // prevent the parent row body onClick event trigger + e.stopPropagation(); + onClick(); + }} + > + {expanded ? : } + + ); +}); diff --git a/packages/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx index e49f99345..e4fd67641 100644 --- a/packages/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx +++ b/packages/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx @@ -114,7 +114,7 @@ export const ReactFlowWrapper: React.FC = ({ const onNodeClick = async (_event, node) => { const scopedId = node.data.scopedId; if (node.data.isParentNode) { - fetchChildrenExecutions( + await fetchChildrenExecutions( queryClient, scopedId, nodeExecutionsById,