Skip to content

Highlighting a node is not rendering edges label on top #216

@jsjohann

Description

@jsjohann

Describe the bug

When hovering a node to highlight it and its edges, the label of the node gets shifted to the front to ensure they're rendered on top of any edges. This is not the case for the labels of the edges when an edge is highlighted.

Thus it is possible that they're rendered underneath the path of the edge. This is especially a problem, if there are labels of different intersected edges rendered on top of each other. Then, the active edge label is not visible at all (see attached screenshot where the highlighted label is underneath the label of another edge).

Steps to Reproduce the Bug or Issue

  1. Have a graph with intersecting edges
  2. Set labelType={'all'} to the GraphCanvas and
const {
        selections,
        actives,
        onCanvasClick,
        onNodePointerOver: onNodePointerOverSelection,
        onNodePointerOut: onNodePointerOutSelection,
    } = useSelection({
        ref: graphRef,
        nodes,
        edges,
        pathHoverType: 'all',
    });
  1. Hover over a node to highlight its related edges/nodes.

Expected behavior

When hovering/selecting a node/edge, the corresponding labels of the edges should always be painted on top so ensure visibility like it's the case for the labels of the nodes.

Screenshots or Videos

image

Platform

  • Reagraph Version: 4.15.26
  • OS: macOS
  • Browser: Chrome

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions