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`] = `
>
-
+
-
+
+
+
+
+ x1={7}
+ x2={12}
+ y1={9}
+ y2={2}
+ />
+
+
{
/>
);
- 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({
{workspace.edges &&
workspace.edges.map((edge) => (
- {
- 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 */}
+
+ {
+ edgeClick(edge);
+ }}
+ className="gphEdge gphEdge--clickable"
+ style={{
+ strokeWidth: Math.max(edge.width, 15),
+ }}
+ />
+
))}
{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 = {};
const edges: Edge[] = [];