github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 🐛 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 <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Marco Liberati 2022-02-15 11:38:13 +01:00 • committed by GitHub
parent 556b629691
commit 57ef9e56a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 104 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

84
x-pack/plugins/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap generated
View file

@ -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"

17
x-pack/plugins/graph/public/components/graph_visualization/_graph_visualization.scss
View file

@ -23,17 +23,24 @@
stroke-width: 2;
stroke-opacity: .5;
&:hover {
stroke-opacity: .95;
cursor: pointer;
}
&--selected {
stroke: $euiColorDarkShade;
stroke-opacity: .95;
}
}
.gphEdge--clickable {
fill: transparent;
opacity: 0;
}
.gphEdge--wrapper:hover {
.gphEdge {
stroke-opacity: .95;
cursor: pointer;
}
}
.gphNode {
cursor: pointer;
}

2
x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.test.tsx
View file

@ -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]);

43
x-pack/plugins/graph/public/components/graph_visualization/graph_visualization.tsx
View file

@ -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 &&

2
x-pack/test/functional/apps/graph/graph.ts
View file

@ -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();

4
x-pack/test/functional/page_objects/graph_page.ts
View file

@ -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[] = [];