[APM] Alert annotation in Service maps

[formgeist]

Summary

In #170 we specified a way to indicate alerts on the service nodes. The issue had a concept of how we might annotate alerts, this issue is to complete that work separately from the original issue.

Proposed solution

[elasticmachine]

Pinging @elastic/observability-design (design)

[smith]

The dot on the node might be some work with normal Cytoscape.js. It might need to be drawn as part of the icon SVG (though I'm not sure if that can break out of the circle) or be a separate layer overlay on top of the graph that will need to be positioned and sized based on the pan and zoom.

[formgeist]

I looked at some of the demos, and there's an example where on the hover and selected state, it adds a little dot (albeit at the top of the circular node). I haven't pulled down the demo to check out how it was achieved, but I assume that's a custom SVG?

https://cytoscape.org/cytoscape.js-edgehandles/demo-snap.html

[smith]

@formgeist looks like this is done with the cytoscape/cytoscape.js-edgehandles extension, which extends cytoscape itself, and those dots are for dragging a connecting line to another node. We can look at the code for that extension to see how it was done.

[formgeist]

@smith Thanks for investigating - right now, I'm still working on the final form of the annotation, so I'll share when I have something that we can discuss from.

[formgeist]

Closing in favor of #222 which also handles the design of the alert annotation