refactor: graph edge highlighting (#1304)

bitrise-io · Nov 15, 2024 · 09720be · 09720be
1 parent ae2a03c
commit 09720be
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 55 deletions.
diff --git a/...pages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.tsx b/...pages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/GraphPipelineCanvas.tsx
@@ -25,14 +25,7 @@ import usePipelineWorkflows from './hooks/usePipelineWorkflows';
 import transformWorkflowsToNodesAndEdges from './utils/transformWorkflowsToNodesAndEdges';
 import autoLayoutingGraphNodes from './utils/autoLayoutingGraphNodes';
 import PlaceholderNode from './components/WorkflowNode/PlaceholderWorkflowNode';
-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 { GRAPH_EDGE_TYPE, PLACEHOLDER_NODE_TYPE, WORKFLOW_NODE_TYPE } from './GraphPipelineCanvas.const';
 import validateConnection from './utils/validateConnection';
 
 const nodeTypes: NodeTypes = {
@@ -49,7 +42,7 @@ const GraphPipelineCanvas = (props: ReactFlowProps) => {
   const { openDialog } = usePipelinesPageStore();
   const { selectedPipeline } = usePipelineSelector();
   const isGraphPipelineEnabled = useFeatureFlag('enable-dag-pipelines');
-  const { updateNode, updateEdge } = useReactFlow<Node<WorkflowNodeDataType>>();
+  const { updateNode, updateEdgeData } = useReactFlow<Node<WorkflowNodeDataType>>();
   const initial = transformWorkflowsToNodesAndEdges(selectedPipeline, workflows, isGraphPipelineEnabled);
 
   const [edges, setEdges, onEdgesChange] = useEdgesState(initial.edges);
@@ -111,27 +104,16 @@ const GraphPipelineCanvas = (props: ReactFlowProps) => {
   );
 
   const handleEdgeMouseEnter: EdgeMouseHandler = useCallback(
-    (_, { id, selected }) => {
-      const zIndex = selected ? SELECTED_GRAPH_EDGE_ZINDEX : HIGHLIGHTED_GRAPH_EDGE_ZINDEX;
-      updateEdge(id, { zIndex, data: { highlighted: true } });
-    },
-    [updateEdge],
+    (_, { id }) => updateEdgeData(id, { highlighted: true }),
+    [updateEdgeData],
   );
 
   const handleEdgeMouseLeave: EdgeMouseHandler = useCallback(
-    (_, { id, target, selected }) => {
+    (_, { id, target }) => {
       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 } });
+      updateEdgeData(id, { highlighted: targetNodeSelected });
     },
-    [updateEdge, nodes],
+    [updateEdgeData, nodes],
   );
 
   return (

diff --git a/...ages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/components/GraphEdge.tsx b/...ages/PipelinesPage/components/PipelineCanvas/GraphPipelineCanvas/components/GraphEdge.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, useEffect } from 'react';
+import { CSSProperties, useEffect, useMemo } from 'react';
 import {
   BaseEdge,
   ConnectionLineComponentProps,
@@ -17,23 +17,19 @@ const edgeStyle = (style?: CSSProperties) => {
   return { strokeWidth: 2, ...style };
 };
 
-const GraphEdge = ({ id, style, selected, data: { highlighted } = {}, ...props }: EdgeProps) => {
+const GraphEdge = ({ id, style, selected, data, ...props }: EdgeProps) => {
   const { updateEdge } = useReactFlow();
   const [path] = getSmoothStepPath({ ...props, offset: 0, borderRadius: 12 });
 
-  useEffect(() => {
-    updateEdge(id, (edge) => {
-      if (selected) {
-        return { zIndex: SELECTED_GRAPH_EDGE_ZINDEX };
-      }
-
-      if (edge.data?.highlighted) {
-        return { zIndex: HIGHLIGHTED_GRAPH_EDGE_ZINDEX };
-      }
+  const zIndex = useMemo(() => {
+    if (selected) return SELECTED_GRAPH_EDGE_ZINDEX;
+    if (data?.highlighted) return HIGHLIGHTED_GRAPH_EDGE_ZINDEX;
+    return DEFAULT_GRAPH_EDGE_ZINDEX;
+  }, [data?.highlighted, selected]);
 
-      return { zIndex: DEFAULT_GRAPH_EDGE_ZINDEX };
-    });
-  }, [id, selected, updateEdge]);
+  useEffect(() => {
+    updateEdge(id, { zIndex });
+  }, [id, zIndex, updateEdge]);
 
   return (
     <BaseEdge
@@ -43,7 +39,7 @@ const GraphEdge = ({ id, style, selected, data: { highlighted } = {}, ...props }
       style={edgeStyle({
         ...style,
         ...{ stroke: 'var(--colors-border-regular)' },
-        ...(highlighted ? { stroke: 'var(--colors-border-hover)' } : {}),
+        ...(data?.highlighted ? { stroke: 'var(--colors-border-hover)' } : {}),
         ...(selected ? { stroke: 'var(--colors-border-selected)' } : {}),
       })}
     />

diff --git a/...ge/components/PipelineCanvas/GraphPipelineCanvas/components/WorkflowNode/WorkflowNode.tsx b/...ge/components/PipelineCanvas/GraphPipelineCanvas/components/WorkflowNode/WorkflowNode.tsx
@@ -5,12 +5,7 @@ import { Node, NodeProps, useReactFlow } from '@xyflow/react';
 import { PipelineWorkflow } from '@/core/models/Workflow';
 import { WorkflowCard } from '@/components/unified-editor';
 import useFeatureFlag from '@/hooks/useFeatureFlag';
-import {
-  DEFAULT_GRAPH_EDGE_ZINDEX,
-  HIGHLIGHTED_GRAPH_EDGE_ZINDEX,
-  SELECTED_GRAPH_EDGE_ZINDEX,
-  WORKFLOW_NODE_WIDTH,
-} from '../../GraphPipelineCanvas.const';
+import { WORKFLOW_NODE_WIDTH } from '../../GraphPipelineCanvas.const';
 import { PipelineConfigDialogType, usePipelinesPageStore } from '../../../../../PipelinesPage.store';
 import { LeftHandle, RightHandle } from './Handles';
 
@@ -74,15 +69,7 @@ const WorkflowNode = ({ data: { pipelineId }, id, zIndex, selected }: Props) =>
     setEdges((edges) => {
       return edges.map((edge) => {
         if (edge.target === id) {
-          const newEdge = { ...edge, zIndex: DEFAULT_GRAPH_EDGE_ZINDEX, data: { ...edge.data, highlighted } };
-
-          if (edge.selected) {
-            newEdge.zIndex = SELECTED_GRAPH_EDGE_ZINDEX;
-          } else if (highlighted) {
-            newEdge.zIndex = HIGHLIGHTED_GRAPH_EDGE_ZINDEX;
-          }
-
-          return newEdge;
+          return { ...edge, data: { ...edge.data, highlighted } };
         }
 
         return edge;