Handle loading component suites dynamically

[chriddyp]

Related to plotly/dash-table-experiments#28 and plotly/dash-core-components#162

It was explained in more detail on the community boards https://community.plot.ly/t/display-tables-in-dash/4707/40?u=chriddyp:

A little context: When Dash serves the page, it crawls the app.layout to see which component libraries are being used (e.g. dash_core_components). Then, with this list of unique component libraries, it serves the necessary JS and CSS bundles that are distributed with those component libraries.

In this case, we’re serving dash_table_experiments on a separate page, as the response of a callback. Dash only sees dash_html_components and dash_core_components in the app.layout and so it doesn’t serve the necessary JS and CSS bundles that are required for the dash-table-components component that is rendered in the future.

This is a design flaw of Dash. For now, you can get around this issue by rendering a hidden dash-table-experiments component in the layout like:

    app.layout = html.Div([
       html.Div(id='content'),
       dcc.Location(id='location', refresh=False),
       html.Div(dt.DataTable(rows=[{}]), style={‘display’: ‘none’})
    ])

Ideally, we'd request dash's backend for the component suites on demand, rather than all upfront.

[chriddyp]

Something like this might work: https://github.com/zeit/next.js/#3-with-no-ssr

[Akronix]

See our workaround: Grasia/grasia-dash-components#2

[edvard-bjarnason]

I'm running into this or a very similar issue with a custom react component that must be dynamically created. It is not trivial to statically add this react component to the app.layout so that it will included in the crawl. Is there a simple way that we can force dash to include this react component?

[T4rk1n]

@edvard-bjarnason You can override the dash index and include your component bundle in there.

[Akronix]

@edvard-bjarnason meanwhile Dash add support to load components dynamically, you could try to use our Import facility within our own made Dash components suite. So with this Import component you can directly add an external javascript once the page and Dash is completely loaded, you could use javascript code that sets your component to show up on a certain time, be hooked to an event or be displayed in a certain place.
You can see examples of the usage of this here in Python or here in React / JavaScript.

I'm curious, though, if we could make gdc.Import work for loading the dependencies a React component that is going to be added dynamically to the Dash app...It doesn't look like, so if you really need that and only that, most likely you will need to have a null component for your suite or a null state of your component, so you can add that to the app.layout in static time and then replace or just load your complete component in run time.

Let me know how far your research goes and if you get it working.

[chriddyp]

This has been fixed in plotly/dash#444. Invisible component hacks are no longer needed! 🥇 to @T4rk1n who took this on 🎉