[APM] Zoom functionality for Service Map

[katrin-freihofner]

The idea behind this feature is to make the service map #44853 zoomable. Therefore, this issue is dependent on #44853.

The proposed UI shows zoom buttons and a 'View full screen' button

• Zoom buttons (https://elastic.github.io/eui/#/navigation/button -> Button Group, Icon only)
• View full-screen button

This also means that the service map needs to be draggable.

Open questions:

• How should the labels on zoom behave? Should the font size be zoomed too? At which point (while zooming out) should we remove the labels?
• Should the size of the arrows stay the same?

[elasticmachine]

Pinging @elastic/apm-ui

[smith]

@katrin-freihofner

Assuming we're using cytoscape to render this:

The map should be draggable by default. By default you can also grab any node or edge and move it around, though I'd suggest turning it off for simplicity's sake to start out.

Labels can be shown or hidded based on the zoom level. I'd suggest starting by hiding them when the text is too small to read. We can experiment from there.

By default, the size of the arrows will be proportional to the zoom; zoom in more, get bigger arrows; zoom out, smaller arrows. It's possible to scale the arrow size based on the zoom level, but it would take extra code and there would be a performance impact. I'd recommend starting with the defaults and only going against those if it's needed. See

The zoom controls should probably follow the placement and behavior of maps and graph's controls as much as possible.