From 57ef9e56a52b1b641e616da78dbd0c0b20fe1f7c Mon Sep 17 00:00:00 2001
From: Marco Liberati <dej611@users.noreply.github.com>
Date: Tue, 15 Feb 2022 11:38:13 +0100
Subject: [PATCH] [Graph] Make graph edges easier to click (#124053)

* :bug: Make edge easier to click on graph visualization

* :white_check_mark: Fix tests for new implementation

* :bug: Fix functional test

* :bug: Fix more functional tests

* :bug: Fix tests

* :bug: Fix hover behaviour

* :camera_flash: Update snapshot

* :white_check_mark: Adjust fucntional objects for new changes

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../graph_visualization.test.tsx.snap         | 84 +++++++++++++------
 .../_graph_visualization.scss                 | 15 +++-
 .../graph_visualization.test.tsx              |  2 +-
 .../graph_visualization.tsx                   | 43 ++++++----
 x-pack/test/functional/apps/graph/graph.ts    |  2 +-
 .../functional/page_objects/graph_page.ts     |  4 +-
 6 files changed, 103 insertions(+), 47 deletions(-)

diff --git a/x-pack/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/x-pack/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
index 0339bfc8a9be5d..a66ebc7bc1f1ea 100644
--- a/x-pack/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
+++ b/x-pack/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
@@ -11,36 +11,68 @@ exports[`graph_visualization should render to svg elements 1`] = `
 >
   <g>
     <g>
-      <line
-        className="gphEdge gphEdge--selected"
+      <g
+        className="gphEdge--wrapper"
         key="A..1-B..2"
-        onClick={[Function]}
-        strokeLinecap="round"
-        style={
-          Object {
-            "strokeWidth": 2,
+      >
+        <line
+          className="gphEdge gphEdge--selected"
+          strokeLinecap="round"
+          style={
+            Object {
+              "strokeWidth": 2,
+            }
           }
-        }
-        x1={5}
-        x2={7}
-        y1={5}
-        y2={9}
-      />
-      <line
-        className="gphEdge gphEdge--selected"
+          x1={5}
+          x2={7}
+          y1={5}
+          y2={9}
+        />
+        <line
+          className="gphEdge gphEdge--clickable"
+          onClick={[Function]}
+          style={
+            Object {
+              "strokeWidth": 15,
+            }
+          }
+          x1={5}
+          x2={7}
+          y1={5}
+          y2={9}
+        />
+      </g>
+      <g
+        className="gphEdge--wrapper"
         key="B..2-C..3"
-        onClick={[Function]}
-        strokeLinecap="round"
-        style={
-          Object {
-            "strokeWidth": 2.2,
+      >
+        <line
+          className="gphEdge gphEdge--selected"
+          strokeLinecap="round"
+          style={
+            Object {
+              "strokeWidth": 2.2,
+            }
           }
-        }
-        x1={7}
-        x2={12}
-        y1={9}
-        y2={2}
-      />
+          x1={7}
+          x2={12}
+          y1={9}
+          y2={2}
+        />
+        <line
+          className="gphEdge gphEdge--clickable"
+          onClick={[Function]}
+          style={
+            Object {
+              "strokeWidth": 15,
+            }
+          }
+          x1={7}
+          x2={12}
+          y1={9}
+          y2={2}
+        />
+      </g>
     </g>
     <g
       className="gphNode"
diff --git a/x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss b/x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
index 0853ab41145952..c2432a288ae226 100644
--- a/x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
+++ b/x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
@@ -23,14 +23,21 @@
   stroke-width: 2;
   stroke-opacity: .5;
 
-  &:hover {
+  &--selected {
+    stroke: $euiColorDarkShade;
     stroke-opacity: .95;
-    cursor: pointer;
   }
+}
 
-  &--selected {
-    stroke: $euiColorDarkShade;
+.gphEdge--clickable {
+  fill: transparent;
+  opacity: 0;
+}
+
+.gphEdge--wrapper:hover {
+  .gphEdge {
     stroke-opacity: .95;
+    cursor: pointer;
   }
 }
 
diff --git a/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx b/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
index 8273d99f890c83..adfbe68fff9817 100644
--- a/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
+++ b/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
@@ -202,7 +202,7 @@ describe('graph_visualization', () => {
       />
     );
 
-    instance.find('.gphEdge').first().simulate('click');
+    instance.find('.gphEdge').at(1).simulate('click');
 
     expect(workspace.getAllIntersections).toHaveBeenCalled();
     expect(edges[0].topSrc).toEqual(workspace.getAllIntersections.mock.calls[0][1][0]);
diff --git a/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.tsx b/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
index 26359101a9a5bc..4859daa16488e4 100644
--- a/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
+++ b/x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
@@ -90,24 +90,39 @@ export function GraphVisualization({
         <g>
           {workspace.edges &&
             workspace.edges.map((edge) => (
-              <line
+              <g
                 key={`${makeNodeId(edge.source.data.field, edge.source.data.term)}-${makeNodeId(
                   edge.target.data.field,
                   edge.target.data.term
                 )}`}
-                x1={edge.topSrc.kx}
-                y1={edge.topSrc.ky}
-                x2={edge.topTarget.kx}
-                y2={edge.topTarget.ky}
-                onClick={() => {
-                  edgeClick(edge);
-                }}
-                className={classNames('gphEdge', {
-                  'gphEdge--selected': edge.isSelected,
-                })}
-                style={{ strokeWidth: edge.width }}
-                strokeLinecap="round"
-              />
+                className="gphEdge--wrapper"
+              >
+                {/* Draw two edges: a thicker one for better click handling and the one to show the user */}
+                <line
+                  x1={edge.topSrc.kx}
+                  y1={edge.topSrc.ky}
+                  x2={edge.topTarget.kx}
+                  y2={edge.topTarget.ky}
+                  className={classNames('gphEdge', {
+                    'gphEdge--selected': edge.isSelected,
+                  })}
+                  strokeLinecap="round"
+                  style={{ strokeWidth: edge.width }}
+                />
+                <line
+                  x1={edge.topSrc.kx}
+                  y1={edge.topSrc.ky}
+                  x2={edge.topTarget.kx}
+                  y2={edge.topTarget.ky}
+                  onClick={() => {
+                    edgeClick(edge);
+                  }}
+                  className="gphEdge gphEdge--clickable"
+                  style={{
+                    strokeWidth: Math.max(edge.width, 15),
+                  }}
+                />
+              </g>
             ))}
         </g>
         {workspace.nodes &&
diff --git a/x-pack/test/functional/apps/graph/graph.ts b/x-pack/test/functional/apps/graph/graph.ts
index 172686692110e9..6410a0b0272f8e 100644
--- a/x-pack/test/functional/apps/graph/graph.ts
+++ b/x-pack/test/functional/apps/graph/graph.ts
@@ -138,7 +138,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await browser.execute(() => {
         const event = document.createEvent('SVGEvents');
         event.initEvent('click', true, true);
-        return document.getElementsByClassName('gphEdge')[0].dispatchEvent(event);
+        return document.getElementsByClassName('gphEdge--clickable')[0].dispatchEvent(event);
       });
       await PageObjects.common.sleep(1000);
       await PageObjects.graph.startLayout();
diff --git a/x-pack/test/functional/page_objects/graph_page.ts b/x-pack/test/functional/page_objects/graph_page.ts
index b0389510e5ef5b..bc6890246f444f 100644
--- a/x-pack/test/functional/page_objects/graph_page.ts
+++ b/x-pack/test/functional/page_objects/graph_page.ts
@@ -131,7 +131,9 @@ export class GraphPageObject extends FtrService {
       const elements = document.querySelectorAll('#graphSvg text.gphNode__label');
       return [...elements].map(element => element.innerHTML);
     `);
-    const graphElements = await this.find.allByCssSelector('#graphSvg line, #graphSvg circle');
+    const graphElements = await this.find.allByCssSelector(
+      '#graphSvg line:not(.gphEdge--clickable), #graphSvg circle'
+    );
     const nodes: Node[] = [];
     const nodePositionMap: Record<string, number> = {};
     const edges: Edge[] = [];