I have an existing ReactJS application and would like to start incorporating Dash dashboards into different parts of the UI. The dashboards are maintained by our internal quant team (separate from the team that manages the UI).
I would like to pass events back and forth between the ReactJS application and the Dash dashboard.
Example: On a single ReactJS page, there is a table (with checkboxes) listing 10 consumer products. Next to the table is a Dash visualization displaying price history and profit margin for each product over the last 2 years. The UI architecture is a ReactJS application with the Dash visualization surfaced in an iframe and the table is an AG-Grid implementation. When I click on a record in the table, I would like the visualization to react to the selection event (displaying the history for only that product).
How would I accomplish this? I am new to Dash so I may be missing something very foundational. Is there a way I can incorporate the Dash React components directly into my React application (without using an iframe)?
If not, how do I pass events back and forth that allow me to filter the visualization?
Also, the eventual inverse will be requested where you first select in the visualization and then the table selects the appropriate row(s).