feat(web): Add tooltip to production source legends in BreakdownChart

[silkeholmebonnen]

Issue

AVO-234

Description

This PR adds a tooltip to the production source legend list in the BreakdownChart.

Preview

Mobile:

Double check

• I have tested my parser changes locally with poetry run test_parser "zone_key"
• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[silkeholmebonnen]

@Alportan Do you have any feedback?

[Alportan]

@Alportan Do you have any feedback?

Looking good! 😎 Maybe one small thing, could we use the frosted background blur on the modal? 🙌

I believe we already use it on a few components/elements.

[VIKTORVAV99]

@Alportan Do you have any feedback?

Looking good! 😎 Maybe one small thing, could we use the frosted background blur on the modal? 🙌

I believe we already use it on a few components/elements.

I have been using background-blur (not sm) to not get the edges to bleed tough, it would be nice if it was the same here :)

[silkeholmebonnen]

I added the blur and I also changed the mobile version to not be in the middle of the screen, but right above or below the production source icons, because thats what it looked like in figma. Will you take a look at it again @Alportan, and let me know if you would rather have in be in the center on mobile.

[Alportan]

I added the blur and I also changed the mobile version to not be in the middle of the screen, but right above or below the production source icons, because thats what it looked like in figma. Will you take a look at it again @Alportan, and let me know if you would rather have in be in the center on mobile.

Looks good with the blur! 🫶

Regarding the center modal on mobile, that's a good question. I'm unsure about it for now because adding a tooltip on top of the graph might be disruptive, as the main goal is to help users identify sources on the graph.

It's important to keep the design consistent and avoid too many custom components or logic. However, we should review all current use-cases first. There’s a future task to assess and unify tooltips, so we can start with this implementation and refine it later as needed.

[silkeholmebonnen]

I added the blur and I also changed the mobile version to not be in the middle of the screen, but right above or below the production source icons, because thats what it looked like in figma. Will you take a look at it again @Alportan, and let me know if you would rather have in be in the center on mobile.

Looks good with the blur! 🫶

Regarding the center modal on mobile, that's a good question. I'm unsure about it for now because adding a tooltip on top of the graph might be disruptive, as the main goal is to help users identify sources on the graph.

It's important to keep the design consistent and avoid too many custom components or logic. However, we should review all current use-cases first. There’s a future task to assess and unify tooltips, so we can start with this implementation and refine it later as needed.

Okay, I'll keep it as it is for now then:)

[silkeholmebonnen]

/review

[github-actions]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Possible Bug: The use of key={index} in the map function within ProductionSourceTooltipInner might lead to issues if the list of sources can change dynamically. It's better to use a unique identifier from the source object if available. Code Duplication: The styling for the tooltip in mobile and non-mobile modes is very similar and could potentially be refactored into a single component or function to reduce redundancy and improve maintainability.

[VIKTORVAV99]

LGTM! 🎉

Just one minor thing but nothing blocking! Nice work!

[VIKTORVAV99]

As the bot suggested you can use the source object directly as a key here as well just as you did later in the code.