Migrate Word Cloud visualization to React

[kravets-levko]

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

• Refactor
• Feature
• Bug Fix

Description

• Convert component to React
• Make visualization responsive (scale contents to fit container) - this should also fix WordCloud hides words that don't fit in the container #3730:
  • fit visualization to its container;
  • watch container size changes and update visualization;
  • handle very long words (with high frequencies).
• Implement Word Cloud visualization improvements #1414 (replace [#1414] Word Cloud Word Frequency Selection #3668):
  • pass word frequencies in another column;
  • limits on min/max word frequency and min/max word length.
• Tests

Related Tickets & Documents

#3301 (Migrate Visualizations to React -> Word Cloud)

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

Query page:

New editor options:

Dashboard:

[kravets-levko]

@arikfr @ranbena @gabrieldutra This PR is ready for review - I'll appreciate any feedback. I'm still testing it, and will remove WIP label once I'm finally happy with everything.

[kravets-levko]

@mohamagdy Since this PR is going to replace yours (#3668) I'll appreciate your feedback as well (sorry, cannot request your review from GitHub UI)

[arikfr]

👌

[arikfr]

👌

[ranbena]

I think the only thing missing now is a simple Percy test for it.

[kravets-levko]

@ranbena Added some tests

[ranbena]

Perfection

[kravets-levko]

@ranbena Thanks! There are some issues with Percy (visualization is messed up on screenshots), I'm trying to figure this out. After that I'll merge this PR.

[kravets-levko]

@arikfr @ranbena @gabrieldutra

There is an issue with this visualization and Percy, which was quite hard to figure out (even required a help from Percy support). Word Cloud used an "Impact" font to compute layout, and later the same font was assigned to all words. But "Impact" is not available on all machines, so browser uses some fallback. To take a screenshot of a page, Percy takes a complete DOM snapshot with all loaded resources and inline CSS, copies it to own machines and then loads in own browsers. On CI machines word cloud was computed using some default font, and after copying DOM to Percy - restored with another default font available on that machine:

Words are messed up because Percy's browser uses different font with a different size of letter

The only solution which 100% worked was to use some fixed font, which will be exactly the same on all machines. I tried Roboto because we already have it (however, don't use since #2081), but before I merge it - I decided to start a discussion to be sure that I'm not missing anything important.

Using Roboto font

Upd.: This behavior is totally not a problem for users, because when user changes OS/browser - they will reload page and visualization will re-build using another font. The issue is only when using CI and Percy together (because of copying DOM instead of reloading page in Percy or taking screenshot on CI machines)

[arikfr]

@kravets-levko good catch! How about we define a Percy only CSS rule that uses Roboto, but keep things for users unchanged?

[kravets-levko]

@arikfr We need to detect Cypress env as well - because Roboto should be loaded there for proper layout calculation. Not sure if there is any "legal" way to target Cypress and Percy 🤔

[kravets-levko]

I think I can add some env to Cypress dockerfile and then use it to conditionally add fonts during webpack build:

redash/.circleci/docker-compose.cypress.yml

Lines 12 to 16 in d7b03ba

	PYTHONUNBUFFERED: 0
	REDASH_LOG_LEVEL: "INFO"
	REDASH_REDIS_URL: "redis://redis:6379/0"
	REDASH_DATABASE_URL: "postgresql://postgres@postgres/postgres"
	REDASH_RATELIMIT_ENABLED: "false"

@gabrieldutra Do you have any better ideas?

[arikfr]

We need to detect Cypress env as well - because Roboto should be loaded there for proper layout calculation. Not sure if there is any "legal" way to target Cypress and Percy 🤔

In the test code we have full control of the browser, why not change the CSS from code? Feels safer and easier than passing around from the Dockerfile.

[kravets-levko]

That's interesting idea. If Percy will pick that injected font - then it should work. Need to try

[kravets-levko]

@arikfr Yay, it works! I needed to update webpack config to copy Roboto files to dist/ without referencing them anywhere, but they won't load anywhere except of CI. Can you please take a last look before I merge it? Thanks!

[arikfr]

Looks good 👍