@cosmos.gl/graph 2.4.0 → 2.5.0

package/dist/modules/Lines/index.d.ts

@@ -1,17 +1,25 @@
+import { default as regl } from 'regl';
 import { CoreModule } from '../core-module';
 export declare class Lines extends CoreModule {
+    linkIndexFbo: regl.Framebuffer2D | undefined;
+    hoveredLineIndexFbo: regl.Framebuffer2D | undefined;
     private drawCurveCommand;
+    private hoveredLineIndexCommand;
     private pointsBuffer;
     private colorBuffer;
     private widthBuffer;
     private arrowBuffer;
     private curveLineGeometry;
     private curveLineBuffer;
+    private linkIndexBuffer;
+    private quadBuffer;
     initPrograms(): void;
     draw(): void;
+    updateLinkIndexFbo(): void;
     updatePointsBuffer(): void;
     updateColor(): void;
     updateWidth(): void;
     updateArrow(): void;
     updateCurveLineGeometry(): void;
+    findHoveredLine(): void;
 }

package/dist/modules/Store/index.d.ts

@@ -1,6 +1,13 @@
 import { mat3 } from 'gl-matrix';
+import { GraphConfigInterface } from '../../config';
 export declare const ALPHA_MIN = 0.001;
 export declare const MAX_POINT_SIZE = 64;
+/**
+ * Maximum number of executions to delay before performing hover detection.
+ * This threshold prevents excessive hover detection calls for performance optimization.
+ * The `findHoveredItem` method will skip actual detection until this count is reached.
+ */
+export declare const MAX_HOVER_DETECTION_DELAY = 4;
 export type Hovered = {
     index: number;
     position: [number, number];
@@ -24,14 +31,17 @@ export declare class Store {
     hoveredPoint: Hovered | undefined;
     focusedPoint: Focused | undefined;
     draggingPointIndex: number | undefined;
+    hoveredLinkIndex: number | undefined;
     adjustedSpaceSize: number;
     isSpaceKeyPressed: boolean;
     div: HTMLDivElement | undefined;
     webglMaxTextureSize: number;
     hoveredPointRingColor: number[];
     focusedPointRingColor: number[];
+    hoveredLinkColor: number[];
     greyoutPointColor: number[];
     isDarkenGreyout: boolean;
+    isLinkHoveringEnabled: boolean;
     private alphaTarget;
     private scalePointX;
     private scalePointY;
@@ -53,9 +63,11 @@ export declare class Store {
     updateScreenSize(width: number, height: number): void;
     scaleX(x: number): number;
     scaleY(y: number): number;
-    setHoveredPointRingColor(color: string): void;
-    setFocusedPointRingColor(color: string): void;
+    setHoveredPointRingColor(color: string | [number, number, number, number]): void;
+    setFocusedPointRingColor(color: string | [number, number, number, number]): void;
     setGreyoutPointColor(color: string | [number, number, number, number] | undefined): void;
+    updateLinkHoveringEnabled(config: Pick<GraphConfigInterface, 'onLinkClick' | 'onLinkMouseOver' | 'onLinkMouseOut'>): void;
+    setHoveredLinkColor(color?: string | [number, number, number, number]): void;
     setFocusedPoint(index?: number): void;
     addAlpha(decay: number): number;
     private alphaDecay;

package/dist/modules/core-module.d.ts

@@ -9,5 +9,6 @@ export declare class CoreModule {
     readonly store: Store;
     readonly data: GraphData;
     readonly points: Points | undefined;
+    _debugRandomNumber: number;
     constructor(reglInstance: regl.Regl, config: GraphConfigInterface, store: Store, data: GraphData, points?: Points);
 }

package/dist/stories/beginners/link-hovering/data-generator.d.ts

@@ -0,0 +1,19 @@
+interface Point {
+    id: number;
+}
+interface Link {
+    source: number;
+    target: number;
+}
+interface NetworkData {
+    pointPositions: Float32Array;
+    pointColors: Float32Array;
+    pointSizes: Float32Array;
+    links: Float32Array;
+    linkColors: Float32Array;
+    linkWidths: Float32Array;
+    points: Point[];
+    connections: Link[];
+}
+export declare function generateData(pointCount?: number): NetworkData;
+export {};

package/dist/stories/beginners/link-hovering/index.d.ts

@@ -0,0 +1,5 @@
+import { Graph } from '../../..';
+export declare const linkHovering: () => {
+    div: HTMLDivElement;
+    graph: Graph;
+};

package/dist/stories/beginners.stories.d.ts

@@ -6,4 +6,5 @@ export declare const QuickStart: Story;
 export declare const BasicSetUp: Story;
 export declare const PointLabels: Story;
 export declare const RemovePoints: Story;
+export declare const LinkHovering: Story;
 export default meta;

package/dist/variables.d.ts

@@ -13,18 +13,21 @@ export declare const defaultConfigValues: {
     spaceSize: number;
     pointSizeScale: number;
     linkWidthScale: number;
-    arrowSizeScale: number;
+    linkArrowsSizeScale: number;
     renderLinks: boolean;
     curvedLinks: boolean;
     curvedLinkSegments: number;
     curvedLinkWeight: number;
     curvedLinkControlPointDistance: number;
-    arrowLinks: boolean;
+    linkArrows: boolean;
     linkVisibilityDistanceRange: number[];
     linkVisibilityMinTransparency: number;
     hoveredPointCursor: string;
+    hoveredLinkCursor: string;
     renderHoveredPointRing: boolean;
     hoveredPointRingColor: string;
+    hoveredLinkColor: undefined;
+    hoveredLinkWidthIncrease: number;
     focusedPointRingColor: string;
     focusedPointIndex: undefined;
     useClassicQuadtree: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmos.gl/graph",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "GPU-based force graph layout and rendering",
   "jsdelivr": "dist/index.min.js",
   "main": "dist/index.js",

package/src/config.ts

@@ -98,6 +98,12 @@ export interface GraphConfigInterface {
    */
   hoveredPointCursor?: string;
 
+  /**
+   * Cursor style to use when hovering over a link
+   * Default value: `auto`
+   */
+  hoveredLinkCursor?: string;
+
   /**
    * Turns ring rendering around a point on hover on / off
    * Default value: `false`
@@ -158,6 +164,19 @@ export interface GraphConfigInterface {
    * Default value: `1`
   */
   linkWidth?: number;
+  /**
+   * The color to use for links when they are hovered.
+   * This can be either a hex color string (e.g., '#ff3333') or an array of RGBA values
+   * in the format `[red, green, blue, alpha]` where each value is a number between 0 and 255.
+   * Default value: `undefined`
+   */
+  hoveredLinkColor?: string | [number, number, number, number];
+  /**
+   * Number of pixels to add to the link width when hovered.
+   * The hovered width is calculated as: originalWidth + hoveredLinkWidthIncrease
+   * Default value: `5`
+   */
+  hoveredLinkWidthIncrease?: number;
   /**
    * Scale factor for the link width.
    * Default value: `1`
@@ -324,9 +343,15 @@ export interface GraphConfigInterface {
   onSimulationPause?: () => void;
   /**
    * Callback function that will be called when the simulation is restarted.
+   * @deprecated Use `onSimulationUnpause` instead. This callback will be removed in a future version.
    * Default value: `undefined`
    */
   onSimulationRestart?: () => void;
+  /**
+   * Callback function that will be called when the simulation is unpaused.
+   * Default value: `undefined`
+   */
+  onSimulationUnpause?: () => void;
 
   /**
    * Callback function that will be called on every canvas click.
@@ -339,6 +364,40 @@ export interface GraphConfigInterface {
     index: number | undefined, pointPosition: [number, number] | undefined, event: MouseEvent
   ) => void;
 
+  /**
+   * Callback function that will be called when a point is clicked.
+   * The point index will be passed as the first argument,
+   * position as the second argument and the corresponding mouse event as the third argument:
+   * `(index: number, pointPosition: [number, number], event: MouseEvent) => void`.
+   * Default value: `undefined`
+   */
+  onPointClick?: (
+    index: number,
+    pointPosition: [number, number],
+    event: MouseEvent
+  ) => void;
+
+  /**
+   * Callback function that will be called when a link is clicked.
+   * The link index will be passed as the first argument and the corresponding mouse event as the second argument:
+   * `(linkIndex: number, event: MouseEvent) => void`.
+   * Default value: `undefined`
+   */
+  onLinkClick?: (
+    linkIndex: number,
+    event: MouseEvent
+  ) => void;
+
+  /**
+   * Callback function that will be called when the background (empty space) is clicked.
+   * The mouse event will be passed as the first argument:
+   * `(event: MouseEvent) => void`.
+   * Default value: `undefined`
+   */
+  onBackgroundClick?: (
+    event: MouseEvent
+  ) => void;
+
   /**
    * Callback function that will be called when mouse movement happens.
    * If the mouse moves over a point, its index will be passed as the first argument,
@@ -374,6 +433,22 @@ export interface GraphConfigInterface {
    */
   onPointMouseOut?: (event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void;
 
+  /**
+   * Callback function that will be called when the mouse moves over a link.
+   * The link index will be passed as the first argument:
+   * `(linkIndex: number) => void`.
+   * Default value: `undefined`
+   */
+  onLinkMouseOver?: (linkIndex: number) => void;
+
+  /**
+   * Callback function that will be called when the mouse moves out of a link.
+   * The event will be passed as the first argument:
+   * `(event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void`.
+   * Default value: `undefined`
+   */
+  onLinkMouseOut?: (event: MouseEvent | D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | undefined) => void;
+
   /**
    * Callback function that will be called when zooming or panning starts.
    * First argument is a D3 Zoom Event and second indicates whether
@@ -546,6 +621,7 @@ export class GraphConfig implements GraphConfigInterface {
   public pointOpacity = defaultPointOpacity
   public pointSizeScale = defaultConfigValues.pointSizeScale
   public hoveredPointCursor = defaultConfigValues.hoveredPointCursor
+  public hoveredLinkCursor = defaultConfigValues.hoveredLinkCursor
   public renderHoveredPointRing = defaultConfigValues.renderHoveredPointRing
   public hoveredPointRingColor = defaultConfigValues.hoveredPointRingColor
   public focusedPointRingColor = defaultConfigValues.focusedPointRingColor
@@ -555,13 +631,15 @@ export class GraphConfig implements GraphConfigInterface {
   public linkGreyoutOpacity = defaultGreyoutLinkOpacity
   public linkWidth = defaultLinkWidth
   public linkWidthScale = defaultConfigValues.linkWidthScale
+  public hoveredLinkColor = defaultConfigValues.hoveredLinkColor
+  public hoveredLinkWidthIncrease = defaultConfigValues.hoveredLinkWidthIncrease
   public renderLinks = defaultConfigValues.renderLinks
   public curvedLinks = defaultConfigValues.curvedLinks
   public curvedLinkSegments = defaultConfigValues.curvedLinkSegments
   public curvedLinkWeight = defaultConfigValues.curvedLinkWeight
   public curvedLinkControlPointDistance = defaultConfigValues.curvedLinkControlPointDistance
-  public linkArrows = defaultConfigValues.arrowLinks
-  public linkArrowsSizeScale = defaultConfigValues.arrowSizeScale
+  public linkArrows = defaultConfigValues.linkArrows
+  public linkArrowsSizeScale = defaultConfigValues.linkArrowsSizeScale
   public scaleLinksOnZoom = defaultConfigValues.scaleLinksOnZoom
   public linkVisibilityDistanceRange = defaultConfigValues.linkVisibilityDistanceRange
   public linkVisibilityMinTransparency = defaultConfigValues.linkVisibilityMinTransparency
@@ -586,11 +664,17 @@ export class GraphConfig implements GraphConfigInterface {
   public onSimulationEnd: GraphConfigInterface['onSimulationEnd'] = undefined
   public onSimulationPause: GraphConfigInterface['onSimulationPause'] = undefined
   public onSimulationRestart: GraphConfigInterface['onSimulationRestart'] = undefined
+  public onSimulationUnpause: GraphConfigInterface['onSimulationUnpause'] = undefined
 
   public onClick: GraphConfigInterface['onClick'] = undefined
+  public onPointClick: GraphConfigInterface['onPointClick'] = undefined
+  public onLinkClick: GraphConfigInterface['onLinkClick'] = undefined
+  public onBackgroundClick: GraphConfigInterface['onBackgroundClick'] = undefined
   public onMouseMove: GraphConfigInterface['onMouseMove'] = undefined
   public onPointMouseOver: GraphConfigInterface['onPointMouseOver'] = undefined
   public onPointMouseOut: GraphConfigInterface['onPointMouseOut'] = undefined
+  public onLinkMouseOver: GraphConfigInterface['onLinkMouseOver'] = undefined
+  public onLinkMouseOut: GraphConfigInterface['onLinkMouseOut'] = undefined
   public onZoomStart: GraphConfigInterface['onZoomStart'] = undefined
   public onZoom: GraphConfigInterface['onZoom'] = undefined
   public onZoomEnd: GraphConfigInterface['onZoomEnd'] = undefined

package/src/index.ts

@@ -17,10 +17,10 @@ import { FPSMonitor } from '@/graph/modules/FPSMonitor'
 import { GraphData } from '@/graph/modules/GraphData'
 import { Lines } from '@/graph/modules/Lines'
 import { Points } from '@/graph/modules/Points'
-import { Store, ALPHA_MIN, MAX_POINT_SIZE, type Hovered } from '@/graph/modules/Store'
+import { Store, ALPHA_MIN, MAX_POINT_SIZE, MAX_HOVER_DETECTION_DELAY, type Hovered } from '@/graph/modules/Store'
 import { Zoom } from '@/graph/modules/Zoom'
 import { Drag } from '@/graph/modules/Drag'
-import { defaultConfigValues, defaultScaleToZoom } from '@/graph/variables'
+import { defaultConfigValues, defaultScaleToZoom, defaultGreyoutPointColor, defaultBackgroundColor } from '@/graph/variables'
 import { createWebGLErrorMessage } from './graph/utils/error-message'
 
 export class Graph {
@@ -50,12 +50,12 @@ export class Graph {
 
   private currentEvent: D3ZoomEvent<HTMLCanvasElement, undefined> | D3DragEvent<HTMLCanvasElement, undefined, Hovered> | MouseEvent | undefined
   /**
-   * The value of `_findHoveredPointExecutionCount` is incremented by 1 on each animation frame.
-   * When the counter reaches 2 (or more), it is reset to 0 and the `findHoveredPoint` method is executed.
+   * The value of `_findHoveredItemExecutionCount` is incremented by 1 on each animation frame.
+   * When the counter reaches MAX_HOVER_DETECTION_DELAY (default 4), it is reset to 0 and the `findHoveredPoint` or `findHoveredLine` method is executed.
    */
-  private _findHoveredPointExecutionCount = 0
+  private _findHoveredItemExecutionCount = 0
   /**
-   * If the mouse is not on the Canvas, the `findHoveredPoint` method will not be executed.
+   * If the mouse is not on the Canvas, the `findHoveredPoint` or `findHoveredLine` method will not be executed.
    */
   private _isMouseOnCanvas = false
   /**
@@ -123,7 +123,30 @@ export class Graph {
     this.canvasD3Selection
       .on('mouseenter.cosmos', () => { this._isMouseOnCanvas = true })
       .on('mousemove.cosmos', () => { this._isMouseOnCanvas = true })
-      .on('mouseleave.cosmos', () => { this._isMouseOnCanvas = false })
+      .on('mouseleave.cosmos', (event) => {
+        this._isMouseOnCanvas = false
+        this.currentEvent = event
+
+        // Clear point hover state and trigger callback if needed
+        if (this.store.hoveredPoint !== undefined && this.config.onPointMouseOut) {
+          this.config.onPointMouseOut(event)
+        }
+
+        // Clear link hover state and trigger callback if needed
+        if (this.store.hoveredLinkIndex !== undefined && this.config.onLinkMouseOut) {
+          this.config.onLinkMouseOut(event)
+        }
+
+        // Reset right-click flag
+        this.isRightClickMouse = false
+
+        // Clear hover states
+        this.store.hoveredPoint = undefined
+        this.store.hoveredLinkIndex = undefined
+
+        // Update cursor style after clearing hover states
+        this.updateCanvasCursor()
+      })
     select(document)
       .on('keydown.cosmos', (event) => { if (event.code === 'Space') this.store.isSpaceKeyPressed = true })
       .on('keyup.cosmos', (event) => { if (event.code === 'Space') this.store.isSpaceKeyPressed = false })
@@ -176,18 +199,15 @@ export class Graph {
     this.clusters = new Clusters(this.reglInstance, this.config, this.store, this.graph, this.points)
 
     this.store.backgroundColor = getRgbaColor(this.config.backgroundColor)
-    if (this.config.hoveredPointRingColor) {
-      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor)
-    }
-    if (this.config.focusedPointRingColor) {
-      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
-    }
+    this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor ?? defaultConfigValues.hoveredPointRingColor)
+    this.store.setFocusedPointRingColor(this.config.focusedPointRingColor ?? defaultConfigValues.focusedPointRingColor)
     if (this.config.focusedPointIndex !== undefined) {
       this.store.setFocusedPoint(this.config.focusedPointIndex)
     }
-    if (this.config.pointGreyoutColor) {
-      this.store.setGreyoutPointColor(this.config.pointGreyoutColor)
-    }
+    this.store.setGreyoutPointColor(this.config.pointGreyoutColor ?? defaultGreyoutPointColor)
+    this.store.setHoveredLinkColor(this.config.hoveredLinkColor ?? defaultConfigValues.hoveredLinkColor)
+
+    this.store.updateLinkHoveringEnabled(this.config)
 
     if (this.config.showFPSMonitor) this.fpsMonitor = new FPSMonitor(this.canvas)
 
@@ -251,15 +271,20 @@ export class Graph {
       prevConfig.curvedLinks !== this.config.curvedLinks) {
       this.lines.updateCurveLineGeometry()
     }
-    if (prevConfig.backgroundColor !== this.config.backgroundColor) this.store.backgroundColor = getRgbaColor(this.config.backgroundColor)
+    if (prevConfig.backgroundColor !== this.config.backgroundColor) {
+      this.store.backgroundColor = getRgbaColor(this.config.backgroundColor ?? defaultBackgroundColor)
+    }
     if (prevConfig.hoveredPointRingColor !== this.config.hoveredPointRingColor) {
-      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor)
+      this.store.setHoveredPointRingColor(this.config.hoveredPointRingColor ?? defaultConfigValues.hoveredPointRingColor)
     }
     if (prevConfig.focusedPointRingColor !== this.config.focusedPointRingColor) {
-      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor)
+      this.store.setFocusedPointRingColor(this.config.focusedPointRingColor ?? defaultConfigValues.focusedPointRingColor)
     }
     if (prevConfig.pointGreyoutColor !== this.config.pointGreyoutColor) {
-      this.store.setGreyoutPointColor(this.config.pointGreyoutColor)
+      this.store.setGreyoutPointColor(this.config.pointGreyoutColor ?? defaultGreyoutPointColor)
+    }
+    if (prevConfig.hoveredLinkColor !== this.config.hoveredLinkColor) {
+      this.store.setHoveredLinkColor(this.config.hoveredLinkColor ?? defaultConfigValues.hoveredLinkColor)
     }
     if (prevConfig.focusedPointIndex !== this.config.focusedPointIndex) {
       this.store.setFocusedPoint(this.config.focusedPointIndex)
@@ -285,6 +310,12 @@ export class Graph {
     if (prevConfig.enableZoom !== this.config.enableZoom || prevConfig.enableDrag !== this.config.enableDrag) {
       this.updateZoomDragBehaviors()
     }
+
+    if (prevConfig.onLinkClick !== this.config.onLinkClick ||
+        prevConfig.onLinkMouseOver !== this.config.onLinkMouseOver ||
+        prevConfig.onLinkMouseOut !== this.config.onLinkMouseOut) {
+      this.store.updateLinkHoveringEnabled(this.config)
+    }
   }
 
   /**
@@ -1065,7 +1096,8 @@ export class Graph {
   }
 
   /**
-   * Pause the simulation.
+   * Pause the simulation. When paused, the simulation stops running
+   * and can be resumed using the unpause method.
    */
   public pause (): void {
     if (this._isDestroyed) return
@@ -1074,7 +1106,19 @@ export class Graph {
   }
 
   /**
-   * Restart the simulation.
+   * Unpause the simulation. This method resumes a paused
+   * simulation and continues its execution.
+   */
+  public unpause (): void {
+    if (this._isDestroyed) return
+    this.store.isSimulationRunning = true
+    this.config.onSimulationUnpause?.()
+  }
+
+  /**
+   * Restart/Resume the simulation. This method unpauses a paused
+   * simulation and resumes its execution.
+   * @deprecated Use `unpause()` instead. This method will be removed in a future version.
    */
   public restart (): void {
     if (this._isDestroyed) return
@@ -1245,6 +1289,7 @@ export class Graph {
   }
 
   private frame (): void {
+    if (this._isDestroyed) return
     const { config: { simulationGravity, simulationCenter, renderLinks, enableSimulation }, store: { alpha, isSimulationRunning } } = this
     if (alpha < ALPHA_MIN && isSimulationRunning) this.end()
     if (!this.store.pointsTextureSize) return
@@ -1252,7 +1297,9 @@ export class Graph {
     this.requestAnimationFrameId = window.requestAnimationFrame((now) => {
       this.fpsMonitor?.begin()
       this.resizeCanvas()
-      if (!this.dragInstance.isActive) this.findHoveredPoint()
+      if (!this.dragInstance.isActive) {
+        this.findHoveredItem()
+      }
 
       if (enableSimulation) {
         if (this.isRightClickMouse && this.config.enableRightClickRepulsion) {
@@ -1318,7 +1365,9 @@ export class Graph {
       this.fpsMonitor?.end(now)
 
       this.currentEvent = undefined
-      this.frame()
+      if (!this._isDestroyed) {
+        this.frame()
+      }
     })
   }
 
@@ -1338,6 +1387,23 @@ export class Graph {
       this.store.hoveredPoint?.position,
       event
     )
+
+    if (this.store.hoveredPoint) {
+      this.config.onPointClick?.(
+        this.store.hoveredPoint.index,
+        this.store.hoveredPoint.position,
+        event
+      )
+    } else if (this.store.hoveredLinkIndex !== undefined) {
+      this.config.onLinkClick?.(
+        this.store.hoveredLinkIndex,
+        event
+      )
+    } else {
+      this.config.onBackgroundClick?.(
+        event
+      )
+    }
   }
 
   private updateMousePosition (event: MouseEvent | D3DragEvent<HTMLCanvasElement, undefined, Hovered>): void {
@@ -1365,6 +1431,7 @@ export class Graph {
   }
 
   private resizeCanvas (forceResize = false): void {
+    if (this._isDestroyed) return
     const prevWidth = this.canvas.width
     const prevHeight = this.canvas.height
     const w = this.canvas.clientWidth
@@ -1382,6 +1449,10 @@ export class Graph {
       this.canvasD3Selection
         ?.call(this.zoomInstance.behavior.transform, this.zoomInstance.getTransform([centerPosition], k))
       this.points?.updateSampledPointsGrid()
+      // Only update link index FBO if link hovering is enabled
+      if (this.store.isLinkHoveringEnabled) {
+        this.lines?.updateLinkIndexFbo()
+      }
     }
   }
 
@@ -1413,13 +1484,31 @@ export class Graph {
     }
   }
 
-  private findHoveredPoint (): void {
-    if (!this._isMouseOnCanvas || !this.reglInstance || !this.points) return
-    if (this._findHoveredPointExecutionCount < 2) {
-      this._findHoveredPointExecutionCount += 1
+  private findHoveredItem (): void {
+    if (this._isDestroyed || !this._isMouseOnCanvas || !this.reglInstance) return
+    if (this._findHoveredItemExecutionCount < MAX_HOVER_DETECTION_DELAY) {
+      this._findHoveredItemExecutionCount += 1
       return
     }
-    this._findHoveredPointExecutionCount = 0
+    this._findHoveredItemExecutionCount = 0
+    this.findHoveredPoint()
+
+    if (this.graph.linksNumber && this.store.isLinkHoveringEnabled) {
+      this.findHoveredLine()
+    } else if (this.store.hoveredLinkIndex !== undefined) {
+      // Clear stale hoveredLinkIndex when there are no links
+      const wasHovered = this.store.hoveredLinkIndex !== undefined
+      this.store.hoveredLinkIndex = undefined
+      if (wasHovered && this.config.onLinkMouseOut) {
+        this.config.onLinkMouseOut(this.currentEvent)
+      }
+    }
+
+    this.updateCanvasCursor()
+  }
+
+  private findHoveredPoint (): void {
+    if (this._isDestroyed || !this.reglInstance || !this.points) return
     this.points.findHoveredPoint()
     let isMouseover = false
     let isMouseout = false
@@ -1447,15 +1536,46 @@ export class Graph {
       )
     }
     if (isMouseout) this.config.onPointMouseOut?.(this.currentEvent)
-    this.updateCanvasCursor()
+  }
+
+  private findHoveredLine (): void {
+    if (this._isDestroyed || !this.reglInstance || !this.lines) return
+    if (this.store.hoveredPoint) {
+      if (this.store.hoveredLinkIndex !== undefined) {
+        this.store.hoveredLinkIndex = undefined
+        this.config.onLinkMouseOut?.(this.currentEvent)
+      }
+      return
+    }
+    this.lines.findHoveredLine()
+    let isMouseover = false
+    let isMouseout = false
+
+    const pixels = readPixels(this.reglInstance, this.lines.hoveredLineIndexFbo as regl.Framebuffer2D)
+    const hoveredLineIndex = pixels[0] as number
+
+    if (hoveredLineIndex >= 0) {
+      if (this.store.hoveredLinkIndex !== hoveredLineIndex) isMouseover = true
+      this.store.hoveredLinkIndex = hoveredLineIndex
+    } else {
+      if (this.store.hoveredLinkIndex !== undefined) isMouseout = true
+      this.store.hoveredLinkIndex = undefined
+    }
+
+    if (isMouseover && this.store.hoveredLinkIndex !== undefined) {
+      this.config.onLinkMouseOver?.(this.store.hoveredLinkIndex)
+    }
+    if (isMouseout) this.config.onLinkMouseOut?.(this.currentEvent)
   }
 
   private updateCanvasCursor (): void {
-    const { hoveredPointCursor } = this.config
+    const { hoveredPointCursor, hoveredLinkCursor } = this.config
     if (this.dragInstance.isActive) select(this.canvas).style('cursor', 'grabbing')
     else if (this.store.hoveredPoint) {
       if (!this.config.enableDrag || this.store.isSpaceKeyPressed) select(this.canvas).style('cursor', hoveredPointCursor)
       else select(this.canvas).style('cursor', 'grab')
+    } else if (this.store.isLinkHoveringEnabled && this.store.hoveredLinkIndex !== undefined) {
+      select(this.canvas).style('cursor', hoveredLinkCursor)
     } else select(this.canvas).style('cursor', null)
   }
 

package/src/modules/Lines/draw-curve-line.frag

@@ -6,6 +6,10 @@ varying float arrowLength;
 varying float useArrow;
 varying float smoothing;
 varying float arrowWidthFactor;
+varying float linkIndex;
+
+// renderMode: 0.0 = normal rendering, 1.0 = index buffer rendering for picking
+uniform float renderMode;
 
 float map(float value, float min1, float max1, float min2, float max2) {
   return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
@@ -31,5 +35,12 @@ void main() {
     opacity = linkOpacity;
   } else opacity = rgbaColor.a * smoothstep(0.5, 0.5 - smoothing, abs(pos.y));
   
-  gl_FragColor = vec4(color, opacity);
+  if (renderMode > 0.0) {
+    if (opacity > 0.0) {
+      gl_FragColor = vec4(linkIndex, 0.0, 0.0, 1.0);
+    } else {
+      gl_FragColor = vec4(-1.0, 0.0, 0.0, 0.0);
+    }
+  } else gl_FragColor = vec4(color, opacity);
+
 }