search

plotly / dash

Data Apps & Dashboards for Python. No JavaScript Required.
https://plotly.com/dash
MIT License
21.14k stars 2.04k forks source link

add a layout tree view to Dash devtools #1326

Open nicolaskruchten opened 4 years ago

nicolaskruchten commented 4 years ago

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 commented 4 years ago

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: image

This could be a view on all of the derived / event properties too, like hoverData or derived_virtual_data. https://github.com/plotly/dash/pull/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 commented 4 years ago

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

alexcjohnson commented 4 years ago

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.