feat: add edge mouse event handlers for highlighting edges in the gra…

…ph (#1301)
bitrise-io · Nov 14, 2024 · 0621d50 · 0621d50
1 parent 20aa143
commit 0621d50
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 14 deletions.
diff --git a/.../PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.const.ts b/.../PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.const.ts
@@ -12,3 +12,4 @@ export const PLACEHOLDER_NODE_TYPE = 'placeholder';
 export const DEFAULT_GRAPH_EDGE_ZINDEX = 0;
 export const HIGHLIGHTED_GRAPH_EDGE_ZINDEX = 1;
 export const SELECTED_GRAPH_EDGE_ZINDEX = 2;
+export const DEFAULT_WORKFLOW_NODE_ZINDEX = 3;
diff --git a/...pages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.tsx b/...pages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import {
   addEdge,
+  EdgeMouseHandler,
   EdgeTypes,
   Node,
   NodeTypes,
@@ -24,7 +25,14 @@ import usePipelineWorkflows from './hooks/usePipelineWorkflows';
 import transformWorkflowsToNodesAndEdges from './utils/transformWorkflowsToNodesAndEdges';
 import autoLayoutingGraphNodes from './utils/autoLayoutingGraphNodes';
 import PlaceholderNode from './components/WorkflowNode/PlaceholderWorkflowNode';
-import { GRAPH_EDGE_TYPE, PLACEHOLDER_NODE_TYPE, WORKFLOW_NODE_TYPE } from './GraphPipelineCanvas.const';
+import {
+  DEFAULT_GRAPH_EDGE_ZINDEX,
+  GRAPH_EDGE_TYPE,
+  HIGHLIGHTED_GRAPH_EDGE_ZINDEX,
+  PLACEHOLDER_NODE_TYPE,
+  SELECTED_GRAPH_EDGE_ZINDEX,
+  WORKFLOW_NODE_TYPE,
+} from './GraphPipelineCanvas.const';
 import validateConnection from './utils/validateConnection';
 
 const nodeTypes: NodeTypes = {
@@ -37,21 +45,15 @@ const edgeTypes: EdgeTypes = {
 };
 
 const GraphPipelineCanvas = (props: ReactFlowProps) => {
-  const isGraphPipelineEnabled = useFeatureFlag('enable-dag-pipelines');
-
-  const { selectedPipeline } = usePipelineSelector();
   const workflows = usePipelineWorkflows();
-
   const { openDialog } = usePipelinesPageStore();
-  const { updateNode } = useReactFlow<Node<WorkflowNodeDataType>>();
-  const { nodes: initialNodes, edges: initialEdges } = transformWorkflowsToNodesAndEdges(
-    selectedPipeline,
-    workflows,
-    isGraphPipelineEnabled,
-  );
+  const { selectedPipeline } = usePipelineSelector();
+  const isGraphPipelineEnabled = useFeatureFlag('enable-dag-pipelines');
+  const { updateNode, updateEdge } = useReactFlow<Node<WorkflowNodeDataType>>();
+  const initial = transformWorkflowsToNodesAndEdges(selectedPipeline, workflows, isGraphPipelineEnabled);
 
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const [nodes, setNodes, onNodesChange] = useNodesState(autoLayoutingGraphNodes(initialNodes));
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initial.edges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(autoLayoutingGraphNodes(initial.nodes));
 
   const { addPipelineWorkflowDependency, removeWorkflowFromPipeline, removePipelineWorkflowDependency } =
     useBitriseYmlStore((s) => ({
@@ -108,6 +110,30 @@ const GraphPipelineCanvas = (props: ReactFlowProps) => {
     [selectedPipeline, addPipelineWorkflowDependency, setEdges, updateNode],
   );
 
+  const handleEdgeMouseEnter: EdgeMouseHandler = useCallback(
+    (_, { id, selected }) => {
+      const zIndex = selected ? SELECTED_GRAPH_EDGE_ZINDEX : HIGHLIGHTED_GRAPH_EDGE_ZINDEX;
+      updateEdge(id, { zIndex, data: { highlighted: true } });
+    },
+    [updateEdge],
+  );
+
+  const handleEdgeMouseLeave: EdgeMouseHandler = useCallback(
+    (_, { id, target, selected }) => {
+      const targetNodeSelected = nodes.some((node) => node.id === target && node.selected);
+
+      let zIndex = DEFAULT_GRAPH_EDGE_ZINDEX;
+      if (selected) {
+        zIndex = SELECTED_GRAPH_EDGE_ZINDEX;
+      } else if (targetNodeSelected) {
+        zIndex = HIGHLIGHTED_GRAPH_EDGE_ZINDEX;
+      }
+
+      updateEdge(id, { zIndex, data: { highlighted: targetNodeSelected } });
+    },
+    [updateEdge, nodes],
+  );
+
   return (
     <>
       <ReactFlow
@@ -120,6 +146,9 @@ const GraphPipelineCanvas = (props: ReactFlowProps) => {
         onEdgesDelete={handleEdgesDelete}
         onNodesChange={handleNodesChanges}
         onNodesDelete={handleNodesDelete}
+        onEdgeMouseMove={handleEdgeMouseEnter}
+        onEdgeMouseEnter={handleEdgeMouseEnter}
+        onEdgeMouseLeave={handleEdgeMouseLeave}
         connectionLineComponent={ConnectionGraphEdge}
         isValidConnection={validateConnection(nodes, edges)}
         {...props}

diff --git a/...age/components/PipelineCanvas/GraphPipelineCanvas/utils/createNodeFromPipelineWorkflow.ts b/...age/components/PipelineCanvas/GraphPipelineCanvas/utils/createNodeFromPipelineWorkflow.ts
@@ -1,6 +1,11 @@
 import { Node } from '@xyflow/react';
 import { PipelineWorkflow } from '@/core/models/Workflow';
-import { WORKFLOW_NODE_HEIGHT, WORKFLOW_NODE_TYPE, WORKFLOW_NODE_WIDTH } from '../GraphPipelineCanvas.const';
+import {
+  DEFAULT_WORKFLOW_NODE_ZINDEX,
+  WORKFLOW_NODE_HEIGHT,
+  WORKFLOW_NODE_TYPE,
+  WORKFLOW_NODE_WIDTH,
+} from '../GraphPipelineCanvas.const';
 import { WorkflowNodeDataType } from '../components/WorkflowNode/WorkflowNode';
 
 export default function createNodeFromPipelineWorkflow(
@@ -20,5 +25,6 @@ export default function createNodeFromPipelineWorkflow(
     height: WORKFLOW_NODE_HEIGHT,
     position: { x: -9999, y: -9999 },
     data: { ...workflow, pipelineId },
+    zIndex: DEFAULT_WORKFLOW_NODE_ZINDEX,
   };
 }