fix: broken selection of nested node executions (#118)

src/components/Executions/ExecutionDetails/ExecutionWorkflowGraph.tsx

@@ -1,16 +1,16 @@
 import { DetailsPanel } from 'components/common';
 import { WorkflowGraph } from 'components/WorkflowGraph';
 import { keyBy } from 'lodash';
-import { endNodeId, NodeExecution, startNodeId } from 'models';
+import { endNodeId, startNodeId } from 'models';
 import { Workflow } from 'models/Workflow';
 import * as React from 'react';
 import { NodeExecutionsContext } from '../contexts';
-import { useDetailedNodeExecutions } from '../useDetailedNodeExecutions';
+import { DetailedNodeExecution } from '../types';
 import { NodeExecutionDetails } from './NodeExecutionDetails';
 import { TaskExecutionNodeRenderer } from './TaskExecutionNodeRenderer/TaskExecutionNodeRenderer';
 
 export interface ExecutionWorkflowGraphProps {
-    nodeExecutions: NodeExecution[];
+    nodeExecutions: DetailedNodeExecution[];
     workflow: Workflow;
 }
 
@@ -19,10 +19,9 @@ export const ExecutionWorkflowGraph: React.FC<ExecutionWorkflowGraphProps> = ({
     nodeExecutions,
     workflow
 }) => {
-    const detailedNodeExecutions = useDetailedNodeExecutions(nodeExecutions);
     const nodeExecutionsById = React.useMemo(
-        () => keyBy(detailedNodeExecutions, 'id.nodeId'),
-        [detailedNodeExecutions]
+        () => keyBy(nodeExecutions, 'id.nodeId'),
+        [nodeExecutions]
     );
     const [selectedNodes, setSelectedNodes] = React.useState<string[]>([]);
     const onNodeSelectionChanged = (newSelection: string[]) => {

src/components/Executions/Tables/NodeExecutionRow.tsx

@@ -7,7 +7,6 @@ import {
 } from '../contexts';
 import { DetailedNodeExecution } from '../types';
 import { useChildNodeExecutions } from '../useChildNodeExecutions';
-import { useDetailedChildNodeExecutions } from '../useDetailedNodeExecutions';
 import { NodeExecutionsTableContext } from './contexts';
 import { ExpandableExecutionError } from './ExpandableExecutionError';
 import { NodeExecutionChildren } from './NodeExecutionChildren';
@@ -52,17 +51,13 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
 
     // TODO: Handle error case for loading children.
     // Maybe show an expander in that case and make the content the error?
-    const childNodeExecutions = useChildNodeExecutions({
+    const { value: childNodeExecutions } = useChildNodeExecutions({
         nodeExecution,
         requestConfig,
         workflowExecution
     });
 
-    const detailedChildNodeExecutions = useDetailedChildNodeExecutions(
-        childNodeExecutions.value
-    );
-
-    const isExpandable = detailedChildNodeExecutions.length > 0;
+    const isExpandable = childNodeExecutions.length > 0;
     const tableStyles = useExecutionTableStyles();
 
     const selected = state.selectedExecution
@@ -85,7 +80,7 @@ export const NodeExecutionRow: React.FC<NodeExecutionRowProps> = ({
             })}
         >
             <NodeExecutionChildren
-                childGroups={detailedChildNodeExecutions}
+                childGroups={childNodeExecutions}
                 level={level + 1}
             />
         </div>

src/components/Executions/Tables/NodeExecutionsTable.tsx

@@ -2,9 +2,9 @@ import * as classnames from 'classnames';
 import { DetailsPanel, ListProps } from 'components/common';
 import { useCommonStyles } from 'components/common/styles';
 import * as scrollbarSize from 'dom-helpers/util/scrollbarSize';
-import { NodeExecution } from 'models/Execution/types';
 import * as React from 'react';
 import { NodeExecutionDetails } from '../ExecutionDetails/NodeExecutionDetails';
+import { DetailedNodeExecution } from '../types';
 import { NodeExecutionsTableContext } from './contexts';
 import { ExecutionsTableHeader } from './ExecutionsTableHeader';
 import { generateColumns } from './nodeExecutionColumns';
@@ -13,7 +13,8 @@ import { NoExecutionsContent } from './NoExecutionsContent';
 import { useColumnStyles, useExecutionTableStyles } from './styles';
 import { useNodeExecutionsTableState } from './useNodeExecutionsTableState';
 
-export interface NodeExecutionsTableProps extends ListProps<NodeExecution> {}
+export interface NodeExecutionsTableProps
+    extends ListProps<DetailedNodeExecution> {}
 
 const scrollbarPadding = scrollbarSize();
 

src/components/Executions/Tables/__stories__/NodeExecutionsTable.stories.tsx

@@ -75,11 +75,15 @@ const apiContext = mockAPIContextValue({
 const dataCache = createExecutionDataCache(apiContext);
 dataCache.insertWorkflow(workflow);
 dataCache.insertWorkflowExecutionReference(workflowExecution.id, workflow.id);
+const detailedNodeExecutions = dataCache.mapNodeExecutionDetails(
+    nodeExecutions
+);
+dataCache.insertNodeExecutions(detailedNodeExecutions);
 
 const fetchAction = action('fetch');
 
 const props: NodeExecutionsTableProps = {
-    value: nodeExecutions,
+    value: detailedNodeExecutions,
     lastError: null,
     state: State.from(fetchStates.LOADED),
     moreItemsAvailable: false,