[Graph] Make graph edges easier to click (#124053)

* 🐛 Make edge easier to click on graph visualization * ✅ Fix tests for new implementation * 🐛 Fix functional test * 🐛 Fix more functional tests * 🐛 Fix tests * 🐛 Fix hover behaviour * 📸 Update snapshot * ✅ Adjust fucntional objects for new changes Co-authored-by: Kibana Machine <[email protected]>
elastic · Feb 15, 2022 · 57ef9e5 · 57ef9e5
1 parent 556b629
commit 57ef9e5
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 47 deletions.
diff --git a/...aph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap b/...aph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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[] = [];