I’d like to create a dashboard that shows information from a number of different servers - most likely a top-level Tabs from which the user picks a server and then sees the dashboard for that server as the tab content. It could be done with iframes, but I’ve never liked the user experience of iframes: they have to be given a fixed size, rather than sizing themselves the way a Div would.
Is there some way to have Dash retrieve layout from multiple servers and stitch it into a single combined layout? And also deal correctly with callbacks (I don’t need the dashboards to interact with each other though).
Fortunately I am in control of the server code, so I can add CORS headers or add extra layout mangling code on the server side if necessary. My JS skills are about 15 years out of date though.
I started writing a hack that wrapped the HTTP endpoints (/_dask-layout, /_dash-dependencies and /_dash-update-component) and stitched together a layout from multiple dash servers. Unfortunately I think the show-stopper is going to be the lack of truly dynamic callbacks, because the servers will come and go dynamically, and each might have its own set of controls. Wildcard props (https://github.com/plotly/dash/issues/475) might help a little, but it would still require the master dashboard server to know about every possible dependency that might be used by a monitored server.
I this would need to be solved at a deeper level, possibly with a custom component that would render itself by creating a whole new dash renderer pointing at a different server (with suitable CORS headers).