Graph: Enhance UI

[andreaskienle]

Description

This design was well perceived and can be reused as much as possible from initial POC

Mandatory before Release on August 12!

• Reuse YAML icon
• No need to call Legend legend - remove label
• Remove whitespace on top of Legend box

• Color scheme to tell apart - use accent-colors!
  https://www.sap.com/design-system/fiori-design-web/foundations/visual/colors/colors?external#accent-colors [except for red as that indicates broken]

• Make legend box part of canvas, not seperate

• Visualize --> rename to Group by

• Reuse Status icon/hover logic from Table

Additional

In our graph we show several controls which could be improved a bit:

• Check if it makes sense to use Panels (React Flow) to contain the header (colorization) and legend, so they are part of the canvas: https://reactflow.dev/api-reference/components/panel

• Check semantic HTML (e.g. radio buttons should be grouped by <fieldset>)

• Remove the "toggle interactivity" option from controls (we aren’t interactive)
  

• Remove lock button

• Support theming (at least dark and light modes). Library documentation: https://reactflow.dev/learn/customization/theming#built-in-dark-and-light-mode

• Color scheme in dark mode broken

• We should not show the loading indicator when the graph does a subsequent refresh (after the first load). This happens because useProvidersConfigResource reports isLoading in this case which is only reserved for the initial load (moved to Fetching data breaks user experience #224)