Introduction

This PR introduces a major feature called "contextual zoom". The idea is to see different level of details at different zoom levels, so that users can focus on a small subsets of content to work on. Think of it as Google maps where you zoom in & out to see different levels of details.

The feature contains roughly two significant behaviors:

1. different levels in the hierarchy have different font sizes
2. when zooming out, the pods and scopes that become too small to view will be collapsed into a block, with large text summarizing its content. These blocks can be dragged and moved easily (which is pretty easy to use).

This feature is experimental and disabled by default. There's a setting contextual zoom in the sidebar to enable it.

Future work

• expose font-size ladder configuration for different levels (currently 8, 16, 24, 32, 48, defined in settingSlice.tsx)
• display more meaningful summary information

Fully expanded (zoomed in):

Zoom out:

Zoom out:

Zoom out: