add a layout tree view to Dash devtools

[nicolaskruchten]

In the dev tools today we have the callback graph, which is awesome, but callbacks are only half the Dash app story, the other half being layout. I wonder if we shouldn't have a "layout tree" button in the dev tools that shows a collapsible tree view of the layout, so people can get a handle on the current layout of their app? I know some version of this is available in browser dev tools/React dev tools, but a Dash-specific view might be nice too.

[chriddyp]

That's a great idea. Even the React dev tools view is pretty hard to parse after things have been minified and all of the intermediate context providers etc:

This could be a view on all of the derived / event properties too, like hoverData or derived_virtual_data. #1179 is going to be amazing for inspecting those properties once you've already subscribed to them, but sometimes you just want to inspect them before you write your callback.

[nicolaskruchten]

(sorry, should mention this was prompted by an idea @emmanuelle had :)

[alexcjohnson]

That's an excellent idea @emmanuelle / @nicolaskruchten - I often find myself looking at store.getState().layout in the console, but we could do substantially better with our own version that highlights the component name, separates children from other props for a flatter structure, etc.