fix: relation name persisting on screen while hovering graph edges #1066

[faisal7008]

Problem

In the current implementation of the Cytoscape graph, we have two issues. First, when users zoom out while hovering over a node relation, the tooltip persists on the screen even after moving the mouse. This behavior can stack and lead to multiple tooltips staying on the screen. Second, when users hover over the tooltip, they are unable to zoom out.

fixes #1066

Solution

To solve these issues, I’ve added checks in the zoom event handler to remove any tooltips when zooming crosses its threshold i.e. zoomLevelBreakpoint. I’ve also disabled pointer events on the tooltip to allow zoom events to pass through.

Changes Made

• Added a check in the zoom event handler to remove tooltips when zooming crosses breakpoint.
• Disabled pointer events on tooltips to allow zoom events to pass through.
• Commented the extra CytoScapeComponent which was overlapping the current Component

How to Test

1. Zoom on the resources explorer.
2. Hover over a relation between two nodes — the name of the relation appears.
3. Zoom out, keeping the mouse still.
4. The relation caption stays on the screen and disappears as soon as the zooming threshold for the resource names to be hidden is reached.

Screenshots

Notes

[Any additional notes or information that you would like to share with the reviewers.]

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary
• Any dependencies have been added to the project, if necessary

Reviewers

@AllieMendes

[Kolawole99]

LGTM

[Traxmaxx]

LGTM too