hover on edges detected and display the label

Author: william-schlegel

packages/app-builder/src/components/Graph/CustomerGraphContext.tsx

@@ -104,6 +104,9 @@ export type CustomerGraphContextValue = {
   hoveredNodeId: string | null;
   setHoveredNodeId: (id: string | null) => void;
 
+  hoveredEdgeId: string | null;
+  setHoveredEdgeId: (id: string | null) => void;
+
   // Manually hidden nodes (node ids). Orphans cascade out via the reachability sweep.
   hiddenNodeIds: Set<string>;
   hideNodes: (ids: string[]) => void;
@@ -196,6 +199,7 @@ export function CustomerGraphProvider({
   const [selectionMode, setSelectionMode] = useState(false);
   const [checkedNodeIds, setCheckedNodeIds] = useState<Set<string>>(() => new Set());
   const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
+  const [hoveredEdgeId, setHoveredEdgeId] = useState<string | null>(null);
   const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<string>>(() => new Set());
   const [expandedRootIds, setExpandedRootIds] = useState<Set<string>>(() => new Set());
   const [addedNodeTagIds, setAddedNodeTagIds] = useState<Map<string, string[]>>(() => new Map());
@@ -309,6 +313,8 @@ export function CustomerGraphProvider({
       clearCheckedNodes,
       hoveredNodeId,
       setHoveredNodeId,
+      hoveredEdgeId,
+      setHoveredEdgeId,
       hiddenNodeIds,
       hideNodes,
       restoreHiddenNodes,
@@ -348,6 +354,7 @@ export function CustomerGraphProvider({
       isNodeChecked,
       clearCheckedNodes,
       hoveredNodeId,
+      hoveredEdgeId,
       hiddenNodeIds,
       hideNodes,
       restoreHiddenNodes,

packages/app-builder/src/components/Graph/GraphComponents.tsx

@@ -418,7 +418,7 @@ function GraphEdge({
   label,
   data,
 }: EdgeProps<GraphRfEdge>) {
-  const { showEdgeLabels } = useCustomerGraph();
+  const { showEdgeLabels, hoveredEdgeId } = useCustomerGraph();
   const highlighted = useEdgeHighlighted(source, target);
   const appearance = EDGE_APPEARANCE[type ?? 'link'];
 
@@ -436,7 +436,7 @@ function GraphEdge({
   // structural rather than a label.
   const mergedCount = data?.mergedCount;
   const isMerged = mergedCount != null;
-  const labelContent = isMerged ? mergedCount : showEdgeLabels ? label : null;
+  const labelContent = isMerged ? mergedCount : showEdgeLabels || hoveredEdgeId === id ? label : null;
 
   return (
     <>

packages/app-builder/src/components/Graph/GraphImpl.tsx

@@ -2,15 +2,15 @@ import { AutoLayoutControlButton } from '@app-builder/components/ReactFlow';
 import { useTheme } from '@app-builder/contexts/ThemeContext';
 import { type DataModel } from '@app-builder/models/data-model';
 import { type GraphData } from '@app-builder/models/graph';
-import { ControlButton, Controls, type NodeMouseHandler, ReactFlow } from '@xyflow/react';
+import { ControlButton, Controls, EdgeMouseHandler, type NodeMouseHandler, ReactFlow } from '@xyflow/react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'ui-icons';
 import { useCustomerGraph } from './CustomerGraphContext';
 import { graphEdgeTypes, graphNodeTypes } from './GraphComponents';
 import { graphI18n } from './graph-i18n';
 import { type GraphObjectRef, nodeKey, parseNodeKey } from './graph-keys';
-import { type GraphRfNode } from './graph-rf-types';
+import { GraphRfEdge, type GraphRfNode } from './graph-rf-types';
 import {
   applyVisibilityFilters,
   GraphMeasuredLayout,
@@ -40,6 +40,7 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
     setSelectedObject,
     selectionMode,
     setHoveredNodeId,
+    setHoveredEdgeId,
     hiddenNodeIds,
     checkedNodeIds,
     setGraphStats,
@@ -158,6 +159,17 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
     setHoveredNodeId(null);
   }, [setHoveredNodeId]);
 
+  const onEdgeMouseEnter = useCallback<EdgeMouseHandler<GraphRfEdge>>(
+    (_event, edge) => {
+      setHoveredEdgeId(edge.id);
+    },
+    [setHoveredEdgeId],
+  );
+
+  const onEdgeMouseLeave = useCallback<EdgeMouseHandler<GraphRfEdge>>(() => {
+    setHoveredEdgeId(null);
+  }, [setHoveredEdgeId]);
+
   return (
     <ReactFlow
       className="h-full min-h-0"
@@ -170,6 +182,8 @@ export function GraphImpl({ data, dataModel }: GraphImplProps) {
       onNodeClick={onNodeClick}
       onNodeMouseEnter={onNodeMouseEnter}
       onNodeMouseLeave={onNodeMouseLeave}
+      onEdgeMouseEnter={onEdgeMouseEnter}
+      onEdgeMouseLeave={onEdgeMouseLeave}
       fitView
       fitViewOptions={graphFitViewOptions}
       maxZoom={5}