Tooltips on application graph

[willtsai]

Overview of feature request

As a user of the application graph visualizations within Radius dashboard, I would like tool tips to appear for the resource or component that my cursor is currently pointed at.

Acceptance criteria

Tool tip appears when cursor is pointed to a resource depicted in the application graph visualization
Tool tip contains details pertaining to the resource: name, type, group, application, environment

Additional context

No response

Would you like to support us?

• Yes, I would like to support you

AB#11023

[willtsai]

Looks like ReactFlow has tooltips built in, adding good-first-issue tag.

https://reactflow.dev/api-reference/components/node-toolbar

[lechnerc77]

@willtsai I created a first draft for this issue that you can find here: #73

However, adding the application and environment could from my perspective not be solved very well in the frontend part. The data for the nodes is fetched via an API call to the backend (/apis/api.ucp.dev/v1alpha3/${application}/getGraph?api-version=2023-10-01-preview in ApplicationTab.tsx) and if I do not miss anything the data for the node-specific information for the application and the environment should be fetched also via this call. Does this make sense?

In addition feedback for the formatting of the tooltip is welcome.