Try out react-tag-cloud for prominent wordcloud

[maartenleenders]

Summary

As requested in https://github.com/Yoast/wordpress-seo-premium/issues/2297, we investigated the usability of react-tag-cloud for creating a word-cloud to visualise prominent words. While reasonably plug-and-play in theory, there is some behaviour that should be fixed which may cost more time than is desirable for a feature this size (see below)
We have created an example in the apps/components example-app.

The problem: words can be missing from the wordcloud.

When does this happen:

• If a word is too long too fit within the viewport (which can be due to length and/or font-size)
• If a word has to be placed next to another word, and does not fit in that location (so together, their length exceeds the viewport).

It does not seem trivial to change this behaviour, as it is deeply rooted in the package underlying most wordcloud packages, d3-cloud. On their github page they mention:

Note: if a word cannot be placed in any of the positions attempted along the spiral, it is not included in the final word layout. This may be addressed in a future release.

As not being able to fit is more likely for longer and larger words, and our most prominent words are the largest (due to font size), we run the risk of not showing that word in the WordCloud. This will be aggravated by our WordCloud having to work in the constrained space of the SideBar, and on mobile devices. Users that speak a language that has longer words will also be encountering the issue more.

Possible solution:
There is a fork of d3-cloud (so not the react version we implemented here) that implements an overflow mechanic. I already saw some comments that this fork does not deal with whitespace very nicely, but it might be worthwhile to check out.

Test instructions

This PR can be tested by following these steps:

• Checkout branch, and in the javascript root, for good measure, run yarn install && lerna bootstrap.

• Go to .../javascript/apps/components and run yarn start.

• In the browser, go to localhost:3333, and click the WordCloud button in the top menu.

• Play around with the settings here. For a hint of one of the issues with this package: try making the most frequent word quite long, and make the window narrower. At some point the most frequent word will not be included in the cloud.

  • Package(s) involved:
    components

  • Should the change be included in the package changelog?

    • No
    • Yes

  • Should the change be included in one or more plugin changelogs?

    • No
    • Free
    • Premium
    • Other (please specify)

  • Package changelog item (if applicable):
    Added a WordCloud component.

  • Plugin changelog item (if applicable):
    Added a the WordCloud component to the improved internal linking feature.

Impact check

• This PR affects the following parts of the plugin, which may require extra testing:
  • Insights tab under the improved internal linking feature flag will be altered.

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Quality assurance

• I have tested this code to the best of my abilities
• I have added unittests to verify the code works as intended

Related to https://github.com/Yoast/wordpress-seo-premium/issues/2297