re-rendering and tooltip bug?

[zerobell-lee]

I'm using react-wordcloud with select tag. When I choose an item from dropdown menu, the page shows a wordcloud that matched with that item. In this case, words get re-rendered but tooltips doesn't. Tooltips remain as of the first item.

When I change window size, so resizing occurs, tooltips get re-rendered also. Only when I replace wordcloud, this bug occurs.

Thank you for your great job, I'm very satisfied with v 1.0.2! I appreciate your effort.

[chrisrzhou]

Hi @zerobell-lee, thanks for testing it out. Do you mind reproducing the bug in a codesandbox? You can install npm modules with https://codesandbox.io and set it up. Thanks!

[chrisrzhou]

Without too much context, I'm guessing the re-rendering maybe due to the fact that words array is changing. If you pass a new array, or use something like data.map(...) to set the words prop, it will cause the component to re-render because props have changed. This is just my guess on your bug, but let me know if you can reproduce it!

[zerobell-lee]

https://codesandbox.io/s/315507jno6?fontsize=14

I made an example code. Tooltip doesn't change. I can also see long words pop out of the canvas. Thank you!

[chrisrzhou]

Ah that seems like a bug, let me dig into it next week or if you are able to find the fix, a PR would be helpful :)

[zerobell-lee]

I'd really like to do PR but I haven't learned ts and react hooks. Sorry for making you busy :( At the moment, I'm using key props to force resetting wordcloud. I heard it's a temporary solution but I don't care since it works.

[chrisrzhou]

Hi @zerobell-lee, 1.0.3 solves the tooltip bug (you can reinstall the dependency in your codesandbox.io).

I finally understood why some words occasionally fly out. This is an issue related to d3-cloud omitting words that don't fit the svg container (jasondavies/d3-cloud#36)

A couple of solutions that people have explored and I've tested them:

• Recursively decrease the font-size until all words fit.
  • This can lead to much smaller word sizes since we can't control the actual situation/reason on why a specific word cannot fit.
• When words are placed, scan through all the width/height of each word and see if they fit in size. Apply a common fontScaleSize based on word.width / size[0]. This is not ideal either, and is a lot of code to handle.

I'll try to give the problem another day or two to brainstorm on a good general solution. The current solutions that I've tried don't seem to pinpoint the exact problem and how to solve it.

In the meantime, you should increase the width/height of your parent container or set it explicitly using the size prop. You can also reduce a lot of these issues by controlling options.rotations and options.rotationAngles.

[chrisrzhou]

Hey @zerobell-lee, your specific example is fixed with v1.0.5: (codesandbox)

I spent the past 2 days digging into the issue. It's not easy to come up with a complete solution but I was able to have react-wordcloud attempt to rescale font-sizes recursively to fix the problem (until a max attempt is reached, and a warning message will be thrown). The core underlying issue is due to: jasondavies/d3-cloud#36

I added a FAQ page that explains some of the common problems and resolutions, so feel free to check it out: https://react-wordcloud.netlify.com/#/faq

Closing the issue since there is no complete fix for now :)

[zerobell-lee]

Thank you for your supporting, I updated wordcloud to the latest version :) It works good.