From c9f5d644ab9cc4ff71f6bb9fad9ba35549ce7bf3 Mon Sep 17 00:00:00 2001
From: srikant <srksriks123@gmail.com>
Date: Sat, 31 Aug 2024 04:54:06 +0530
Subject: [PATCH] #2130 Link hover styles aren't applied in Firefox when using
 Handles  (#2131)

Signed-off-by: srikant <srksriks123@gmail.com>
---
 canvas_modules/common-canvas/package.json                 | 2 +-
 .../common-canvas/src/common-canvas/svg-canvas-d3.scss    | 6 +++++-
 .../src/common-canvas/svg-canvas-renderer.js              | 8 ++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/canvas_modules/common-canvas/package.json b/canvas_modules/common-canvas/package.json
index ae1b0b0a13..55c4c18b29 100644
--- a/canvas_modules/common-canvas/package.json
+++ b/canvas_modules/common-canvas/package.json
@@ -34,7 +34,7 @@
     "@codemirror/view": "^6.28.6",
     "@elyra/pipeline-schemas": "^3.0.68",
     "codemirror": "^6.0.1",
-    "d3": "^7.1.1",
+    "d3": "7.9.0",
     "dagre": "^0.8.5",
     "date-fns": "^2.28.0",
     "immutable": "^4.0.0",
diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
index b6de25ba05..1240006c09 100644
--- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
+++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-d3.scss
@@ -1036,7 +1036,9 @@ g.bkg-col-cyan-50 {
 
 // When pointer hovers over the link this style will be applied.
 .d3-link-group:hover .d3-link-line,
-.d3-link-group:hover .d3-link-line-arrow-head {
+.d3-link-group:hover .d3-link-line-arrow-head,
+.d3-link-group.handles-detachable-hover .d3-link-line,
+.d3-link-group.handles-detachable-hover .d3-link-line-arrow-head {
 	stroke: $link-highlight-color;
 	stroke-width: 2;
 }
@@ -1066,6 +1068,7 @@ g.bkg-col-cyan-50 {
 }
 
 .d3-link-group:hover .d3-link-handle-start,
+.d3-link-group.handles-detachable-hover .d3-link-handle-start,
 .d3-link-group[data-selected] .d3-link-handle-start {
 	display: inherit;
 	stroke: $link-highlight-color;
@@ -1082,6 +1085,7 @@ g.bkg-col-cyan-50 {
 }
 
 .d3-link-group:hover .d3-link-handle-end,
+.d3-link-group.handles-detachable-hover .d3-link-handle-end,
 .d3-link-group[data-selected] .d3-link-handle-end {
 	display: inherit;
 	stroke: $link-highlight-color;
diff --git a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
index 3721cbb506..43971dafe7 100644
--- a/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
+++ b/canvas_modules/common-canvas/src/common-canvas/svg-canvas-renderer.js
@@ -4562,13 +4562,17 @@ export default class SVGCanvasRenderer {
 	}
 
 	raiseLinkToTop(obj) {
+		// Add handles-detachable-hover class to avoid firefox hover issue
 		d3.select(obj)
-			.raise();
+			.raise()
+			.classed("handles-detachable-hover", true);
 	}
 
 	lowerLinkToBottom(obj) {
+		// Remove handles-detachable-hover class to avoid firefox hover issue
 		d3.select(obj)
-			.lower();
+			.lower()
+			.classed("handles-detachable-hover", false);
 	}
 
 	// Returns true if the link passed in has one or more decorations.