[Feature Request] devtool hook additional functionality and a few quirks

[antonymilne]

Hi guys! I've been playing around with the devtool hook - as explained in that PR, I see that it's not yet made it into the docs but I guess it's public given that it's announced in the changelog?

This is a really cool feature and I'm very excited to use it, but there's a few things that seem a little awkward about it. I just wanted to make some suggestions and understand whether it's been intentionally written the way it is.

Dash component is in JSON format

devtool expects you to enter namespace, component_type and props rather than a Dash component itself. This means my usage looks like this:

component = html.Button(...)
hooks.devtool(**component.to_plotly_json())

This is ok but doesn't feel very natural. Is there a reason it expects the JSON format rather than just accepting hooks.devtool(component)?

Argument name not consistent

Actually if you try the above you'll find it doesn't work because there's a mismatch in argument names - the hook renames type to component_type. So you actually need to do this, which is even more awkward:

component = html.Button(...).to_plotly_json()
hooks.devtool(
    namespace=component["namespace"],
    props=component["props"],
    component_type=component["type"],  # Name mismatch!
)

Was this intentional or just a typo?

Styling

What is the best way to achieve styling that fits into the devtools menu? I copied className="dash-debug-menu__button" and it works ok but doesn't feel very robust and doesn't reproduce all the styling (e.g. underlining the active button). I see there's a new position argument coming to customise the placement of the component inside the debug menu but it still won't quite fit in right without the right styling.

How to integrate with something that's collapsible?

Given that there's not much space in the debug bar itself, I imagine a common pattern here would be to follow the example set by the error log and callback graph and to do something like this:

component = dbc.Offcanvas(id="off_canvas")
button = html.Button(id="open_off_canvas", className="dash-debug-menu__button")
# Add both component and button to hooks.devtool

clientside_callback(
    "function(_, is_open) { return !is_open }",
    Output("offcanvas", "is_open"),
    Input("open_off_canvas", "n_clicks"),
    State("offcanvas", "is_open"),
)

This works ok but feels a bit odd because you're adding the dbc.Offcanvas into a space in the debug menu when it shouldn't really occupy "space" there. If you group the dbc.Offcanvas and html.Button into html.Div then it's harder to achieve consistent styling with the other debug menu items though.

At the moment hooks.devtools feels very generic, which makes it powerful, but I feel like there could be some ways to achieve common patterns like "add a button that opens/closes a new component or my choice, and that button should be styled consistently with the other buttons".

Given that it's possible already to get something that looks ok, and this is only really a relevant feature when debug=True I guess improving the feature further might not be high priority, but I'm curious what you all think anyway 🙂

[T4rk1n]

Dash component is in JSON format

I initially only wanted pure react component in the devtools since it's out of the layout tree. But with the ExternalWrapper and some debugging I made it possible to add dash component and works with callbacks. Unfortunately, the naming of the argument stuck with component_type as the named, can probably add some mapping with kwargs to make it more friendly.

What is the best way to achieve styling that fits into the devtools menu?

There will be a new dash_component_api, {popup, setPopup} = window.dash_component_api.useDebugContext() you can use to toggle the devtools popup and use the "dash-debug-menu__button" when position = left. is popup === what you have then you can add the css class: "dash-debug-menu__button--selected"

[gvwilson]

@antonymilne does @T4rk1n 's response answer your question? If so, can we close this issue?

[antonymilne]

Sort of! It would all be much clearer with an example, but I believe that's coming in future (@ndrezn said he'd let me know when there's some docs available). I don't need this feature urgently anyway, so I'm happy to wait until there's some examples available.

[ndrezn]

cc @LiamConnors for when working on documentation, we can cover these cases