Detailed information of nodes is not displayed when clicking the node…

… consecutively #11325 Signed-off-by: Elay Aharoni (EXT-Nokia) <[email protected]>
kubeflow · Dec 31, 2024 · 19dcddc · 19dcddc
1 parent 2ebb853
commit 19dcddc
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 34 deletions.
diff --git a/frontend/src/pages/PipelineDetailsV2.tsx b/frontend/src/pages/PipelineDetailsV2.tsx
@@ -13,8 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { useState } from 'react';
-import { Elements, FlowElement } from 'react-flow-renderer';
+import React, { MouseEvent as ReactMouseEvent, useState } from 'react';
+import { FlowElement } from 'react-flow-renderer';
 import { V2beta1Pipeline, V2beta1PipelineVersion } from 'src/apisv2beta1/pipeline';
 import MD2Tabs from 'src/atoms/MD2Tabs';
 import { FlowElementDataBase } from 'src/components/graph/Constants';
@@ -25,6 +25,7 @@ import { StaticNodeDetailsV2 } from 'src/components/tabs/StaticNodeDetailsV2';
 import { PipelineFlowElement } from 'src/lib/v2/StaticFlow';
 import { commonCss, padding } from 'src/Css';
 import DagCanvas from './v2/DagCanvas';
+import { Edge, Node } from 'react-flow-renderer/dist/types';
 
 const TAB_NAMES = ['Graph', 'Pipeline Spec'];
 
@@ -57,16 +58,6 @@ function PipelineDetailsV2({
     setSubDagLayers(l);
   };
 
-  const onSelectionChange = (elements: Elements<FlowElementDataBase> | null) => {
-    if (!elements || elements?.length === 0) {
-      setSelectedNode(null);
-      return;
-    }
-    if (elements && elements.length === 1) {
-      setSelectedNode(elements[0]);
-    }
-  };
-
   const getNodeName = function(element: FlowElement<FlowElementDataBase> | null): string {
     if (element && element.data && element.data.label) {
       return element.data.label;
@@ -84,7 +75,9 @@ function PipelineDetailsV2({
             layers={layers}
             onLayersUpdate={layerChange}
             elements={pipelineFlowElements}
-            onSelectionChange={onSelectionChange}
+            onElementClick={(event: ReactMouseEvent, element: Node | Edge) =>
+              setSelectedNode(element)
+            }
             setFlowElements={() => {}}
           ></DagCanvas>
           <PipelineVersionCard
@@ -98,7 +91,7 @@ function PipelineDetailsV2({
               <SidePanel
                 isOpen={!!selectedNode}
                 title={getNodeName(selectedNode)}
-                onClose={() => onSelectionChange(null)}
+                onClose={() => setSelectedNode(null)}
                 defaultWidth={'50%'}
               >
                 <div className={commonCss.page}>

diff --git a/frontend/src/pages/RunDetailsV2.tsx b/frontend/src/pages/RunDetailsV2.tsx
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { Elements, FlowElement } from 'react-flow-renderer';
+import { MouseEvent as ReactMouseEvent, useEffect, useState } from 'react';
+import { FlowElement } from 'react-flow-renderer';
 import { useQuery } from 'react-query';
 import { V2beta1Experiment } from 'src/apisv2beta1/experiment';
 import { V2beta1Run, V2beta1RuntimeState, V2beta1RunStorageState } from 'src/apisv2beta1/run';
@@ -51,6 +51,7 @@ import { classes } from 'typestyle';
 import { RunDetailsProps } from './RunDetails';
 import { statusToIcon } from './StatusV2';
 import DagCanvas from './v2/DagCanvas';
+import { Edge, Node } from 'react-flow-renderer/dist/types';
 
 const QUERY_STALE_TIME = 10000; // 10000 milliseconds == 10 seconds.
 const QUERY_REFETCH_INTERNAL = 10000; // 10000 milliseconds == 10 seconds.
@@ -140,18 +141,12 @@ export function RunDetailsV2(props: RunDetailsV2Props) {
     );
   }
 
-  const onSelectionChange = (elements: Elements<FlowElementDataBase> | null) => {
-    if (!elements || elements?.length === 0) {
-      setSelectedNode(null);
-      return;
-    }
-    if (elements && elements.length === 1) {
-      setSelectedNode(elements[0]);
-      if (data) {
-        setSelectedNodeMlmdInfo(
-          getNodeMlmdInfo(elements[0], data.executions, data.events, data.artifacts),
-        );
-      }
+  const onElementSelection = (event: ReactMouseEvent, element: Node | Edge) => {
+    setSelectedNode(element);
+    if (data) {
+      setSelectedNodeMlmdInfo(
+        getNodeMlmdInfo(element, data.executions, data.events, data.artifacts),
+      );
     }
   };
 
@@ -198,7 +193,7 @@ export function RunDetailsV2(props: RunDetailsV2Props) {
               layers={layers}
               onLayersUpdate={layerChange}
               elements={dynamicFlowElements}
-              onSelectionChange={onSelectionChange}
+              onElementClick={onElementSelection}
               setFlowElements={elems => setFlowElements(elems)}
             ></DagCanvas>
 
@@ -207,7 +202,7 @@ export function RunDetailsV2(props: RunDetailsV2Props) {
               <SidePanel
                 isOpen={!!selectedNode}
                 title={getNodeName(selectedNode)}
-                onClose={() => onSelectionChange(null)}
+                onClose={() => setSelectedNode(null)}
                 defaultWidth={'50%'}
               >
                 <RuntimeNodeDetailsV2

diff --git a/frontend/src/pages/v2/DagCanvas.tsx b/frontend/src/pages/v2/DagCanvas.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { MouseEvent as ReactMouseEvent } from 'react';
 import ReactFlow, {
   Background,
   Controls,
@@ -27,21 +27,22 @@ import { FlowElementDataBase } from 'src/components/graph/Constants';
 import SubDagLayer from 'src/components/graph/SubDagLayer';
 import { color } from 'src/Css';
 import { getTaskKeyFromNodeKey, NodeTypeNames, NODE_TYPES } from 'src/lib/v2/StaticFlow';
+import { Edge, Node } from 'react-flow-renderer/dist/types';
 
 export interface DagCanvasProps {
   elements: Elements<FlowElementDataBase>;
   setFlowElements: (elements: Elements<any>) => void;
-  onSelectionChange: (elements: Elements<any> | null) => void;
   layers: string[];
   onLayersUpdate: (layers: string[]) => void;
+  onElementClick: (event: ReactMouseEvent, element: Node | Edge) => void;
 }
 
 export default function DagCanvas({
   elements,
   layers,
   onLayersUpdate,
-  onSelectionChange,
   setFlowElements,
+  onElementClick,
 }: DagCanvasProps) {
   const onLoad = (reactFlowInstance: OnLoadParams) => {
     reactFlowInstance.fitView();
@@ -71,7 +72,7 @@ export default function DagCanvas({
             onLoad={onLoad}
             nodeTypes={NODE_TYPES}
             edgeTypes={{}}
-            onSelectionChange={onSelectionChange}
+            onElementClick={onElementClick}
             onNodeDragStop={(event, node) => {
               setFlowElements(
                 elements.map(value => {