Migrate Box Plot visualization to React

[kravets-levko]

What type of PR is this? (check all applicable)

• Refactor
• Feature

Description

• Convert component to React
• Make visualization responsive (scale contents to fit container) + watch container resize
• Tests

Related Tickets & Documents

#3301 (Migrate Visualizations to React -> Box Plot)

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

Query page:

Dashboard:

[ranbena]

Ok I gotta ask - if this visualization is marked as (deprecated), wouldn't this be the opportunity to actually drop it?

[kravets-levko]

I think someone may still use it, therefore we don't drop it. Anyway, it's already migrated (and it didn't took much time)...

[kravets-levko]

@ranbena @gabrieldutra Updating viewport definitely helped:

So now few questions.

1. Do we need other width except of 1280? (my opinion - yes)
2. Should I change Cypress viewport (probably for all tests), and leave Percy defaults, or to tell Percy to use Cypress browser size (1000px in our case)? (my opinion - change Cypress to match Percy)
3. Do not touch anything, but create a helper to take few Percy screenshots using different viewports (which will update cy.viewport, wait a little bit, take a screenshot of this size, - and will repeat it for all sizes).

WDYT?

[arikfr]

I think someone may still use it, therefore we don't drop it. Anyway, it's already migrated (and it didn't took much time)...

It's actually almost unused. Considering you already did the work to migrate it, then let's keep it. But how about we update the list not to show deprecated types in the list when creating a new visualization but render it if it exists?

[kravets-levko]

@arikfr It's good idea, but I'll do it in another PR

[gabrieldutra]

Do we need other width except of 1280?

In this case I'd say only 1280px is enough.

For the default we should think if Mobile Percy diff is that useful in most cases as it doubles the number of screenshots taken on each build. Imo we could leave only the 1280px as a default and trigger mobile ones only for specific pages.

Should I change Cypress viewport (probably for all tests), and leave Percy defaults, or to tell Percy to use Cypress browser size (1000px in our case)?

I prefer 1280px too.

Do not touch anything, but create a helper to take few Percy screenshots using different viewports

🤔 I would do it in case there are Snapshots that require more than only the 1280px with the same issue. With only the that resolution, the global cypress option should do fine.

[arikfr]

It's good idea, but I'll do it in another PR

Definitely.

[kravets-levko]

It had to be pretty small and quick refactor/React migration PR of a not-so-important component, but we have what we have 😅

[kravets-levko]

Okay, I thinks it's ready for review and (if everyone is happy with code) to merge.

[ranbena]

We're stronger now 💪🏋️‍♀️