How to get dash-d3cloud wordcloud word selection

Someone made dash-d3cloud, a great plotly dash component wrapper for react-wordcloud. It makes really nice wordclouds for plotly dash, but as far as I can tell, it’s missing a prop for the selected word, meaning I can’t trigger a callback using the selected word. I’m not all that familiar with react or d3, so does anybody have some idea of how to add that functionality?



It doesn’t look that complicated, as one can pass callback functions to the React component (see here). So it is “just” a matter of provide the onWordClick callback to the object:

this.props.callbacks = {onWordClick: (word) => setProps({value: word.value})}

Then the “value” prop (or whatever name you want to give) needs to be declared in PropTypes, so it gets exported as parameter (read-only) to the component on the Python side.

Of course, all of the above probably doesn’t make any sense to you, but I would strongly encourage you to take a look on the documentation regarding custom components and React in general:

I am pretty sure you will find helpful people in this forum to chip in and give tips as you make the changes. :slightly_smiling_face:

1 Like

Thanks! I’m not quite where to put the this.props.callbacks = {onWordClick: (word) => setProps({"value": word})} bit. I added it to the componentWillMount bit and the render bit in WordCloud.react.js, and added value: PropTypes.string to WordCloud.propTypes. But i’m still getting an error that says “Invalid prop for this component”. I assume the value prop isn’t getting passed to react-wordcloud?

Do you have a fork to the repo with your changes? It is easier to see what you have changed on github…

I do now: GitHub - aboyher/dash_d3cloud: Dash Component able to render wordclouds

1 Like