Skip to content

Add devtool hook #3371

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jul 18, 2025
Merged

Add devtool hook #3371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
00eb045
Add devtool hook
T4rk1n Jul 16, 2025
533af1f
fix layout callbacks
T4rk1n Jul 16, 2025
92040d7
fix tests with paths
T4rk1n Jul 17, 2025
1042956
fix cbmo004
T4rk1n Jul 17, 2025
5f435d4
Merge branch 'dev' into devtool-hook
T4rk1n Jul 17, 2025
a8f5d8a
Update changelog
T4rk1n Jul 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ This project adheres to [Semantic Versioning](https://semver.org/).

## Added
- [#3369](https://github.com/plotly/dash/pull/3369) Expose `dash.NoUpdate` type
- [#3371](https://github.com/plotly/dash/pull/3371) Add devtool hook to add components to the devtool bar ui.

## Fixed
- [#3353](https://github.com/plotly/dash/pull/3353) Support pattern-matching/dict ids in `dcc.Loading` `target_components`

- [#3371](https://github.com/plotly/dash/pull/3371) Fix allow_optional triggering a warning for not found input.

# [3.1.1] - 2025-06-29

Expand Down
19 changes: 19 additions & 0 deletions dash/_hooks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ def __init__(self) -> None:
"callback": [],
"index": [],
"custom_data": [],
"dev_tools": [],
}
self._js_dist = []
self._css_dist = []
Expand Down Expand Up @@ -216,6 +217,24 @@ def wrap(func: _t.Callable[[_t.Dict], _t.Any]):

return wrap

def devtool(self, namespace: str, component_type: str, props=None):
"""
Add a component to be rendered inside the dev tools.

If it's a dash component, it can be used in callbacks provided
that it has an id and the dependency is set with allow_optional=True.

`props` can be a function, in which case it will be called before
sending the component to the frontend.
"""
self._ns["dev_tools"].append(
{
"namespace": namespace,
"type": component_type,
"props": props or {},
}
)


hooks = _Hooks()

Expand Down
19 changes: 12 additions & 7 deletions dash/dash-renderer/src/APIController.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,22 +103,22 @@ const UnconnectedContainer = props => {

content = (
<>
{Array.isArray(layout) ? (
layout.map((c, i) =>
{Array.isArray(layout.components) ? (
layout.components.map((c, i) =>
isSimpleComponent(c) ? (
c
) : (
<DashWrapper
_dashprivate_error={error}
componentPath={[i]}
componentPath={['components', i]}
key={i}
/>
)
)
) : (
<DashWrapper
_dashprivate_error={error}
componentPath={[]}
componentPath={['components']}
/>
)}
</>
Expand Down Expand Up @@ -153,7 +153,7 @@ function storeEffect(props, events, setErrorLoading) {
}
dispatch(apiThunk('_dash-layout', 'GET', 'layoutRequest'));
} else if (layoutRequest.status === STATUS.OK) {
if (isEmpty(layout)) {
if (isEmpty(layout.components)) {
if (typeof hooks.layout_post === 'function') {
hooks.layout_post(layoutRequest.content);
}
Expand All @@ -163,7 +163,12 @@ function storeEffect(props, events, setErrorLoading) {
);
dispatch(
setPaths(
computePaths(finalLayout, [], null, events.current)
computePaths(
finalLayout,
['components'],
null,
events.current
)
)
);
dispatch(setLayout(finalLayout));
Expand Down Expand Up @@ -194,7 +199,7 @@ function storeEffect(props, events, setErrorLoading) {
!isEmpty(graphs) &&
// LayoutRequest and its computed stores
layoutRequest.status === STATUS.OK &&
!isEmpty(layout) &&
!isEmpty(layout.components) &&
// Hasn't already hydrated
appLifecycle === getAppState('STARTED')
) {
Expand Down
13 changes: 12 additions & 1 deletion dash/dash-renderer/src/actions/dependencies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
any,
ap,
assoc,
concat,
difference,
equals,
evolve,
Expand Down Expand Up @@ -568,10 +569,20 @@ export function validateCallbacksToLayout(state_, dispatchError) {
function validateMap(map, cls, doState) {
for (const id in map) {
const idProps = map[id];
const fcb = flatten(values(idProps));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm trying to guess what fcb stands for…

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flatten callbacks?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aahh... thanks

const optional = all(
({allow_optional}) => allow_optional,
flatten(
fcb.map(cb => concat(cb.outputs, cb.inputs, cb.states))
).filter(dep => dep.id === id)
);
if (optional) {
continue;
}
const idPath = getPath(paths, id);
if (!idPath) {
if (validateIds) {
missingId(id, cls, flatten(values(idProps)));
missingId(id, cls, fcb);
}
} else {
for (const property in idProps) {
Expand Down
2 changes: 1 addition & 1 deletion dash/dash-renderer/src/actions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ function triggerDefaultState(dispatch, getState) {

dispatch(
addRequestedCallbacks(
getLayoutCallbacks(graphs, paths, layout, {
getLayoutCallbacks(graphs, paths, layout.components, {
outputsOnly: true
})
)
Expand Down
23 changes: 23 additions & 0 deletions dash/dash-renderer/src/components/error/menu/DebugMenu.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import Expand from '../icons/Expand.svg';
import {VersionInfo} from './VersionInfo.react';
import {CallbackGraphContainer} from '../CallbackGraph/CallbackGraphContainer.react';
import {FrontEndErrorContainer} from '../FrontEnd/FrontEndErrorContainer.react';
import ExternalWrapper from '../../../wrapper/ExternalWrapper';
import {useSelector} from 'react-redux';

const classes = (base, variant, variant2) =>
`${base} ${base}--${variant}` + (variant2 ? ` ${base}--${variant2}` : '');
Expand All @@ -35,6 +37,7 @@ const MenuContent = ({
toggleCallbackGraph,
config
}) => {
const ready = useSelector(state => state.appLifecycle === 'HYDRATED');
const _StatusIcon = hotReload
? connected
? CheckIcon
Expand All @@ -47,6 +50,25 @@ const MenuContent = ({
: 'unavailable'
: 'cold';

let custom = null;
if (config.dev_tools?.length && ready) {
custom = (
<>
{config.dev_tools.map((devtool, i) => (
<ExternalWrapper
component={devtool}
componentPath={['__dash_devtools', i]}
key={devtool?.props?.id ? devtool.props.id : i}
/>
))}
<div
className='dash-debug-menu__divider'
style={{marginRight: 0}}
/>
</>
);
}

return (
<div className='dash-debug-menu__content'>
<button
Expand Down Expand Up @@ -91,6 +113,7 @@ const MenuContent = ({
className='dash-debug-menu__divider'
style={{marginRight: 0}}
/>
{custom}
</div>
);
};
Expand Down
9 changes: 6 additions & 3 deletions dash/dash-renderer/src/reducers/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,15 @@ import {

import {getAction} from '../actions/constants';

const layout = (state = {}, action) => {
const layout = (state = {components: []}, action) => {
if (action.type === getAction('SET_LAYOUT')) {
if (Array.isArray(action.payload)) {
return [...action.payload];
state.components = [...action.payload];
} else {
state.components = {...action.payload};
}
return {...action.payload};

return state;
} else if (
includes(action.type, [
'UNDO_PROP_CHANGE',
Expand Down
10 changes: 10 additions & 0 deletions dash/dash.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -890,6 +890,16 @@ def _config(self):

config["validation_layout"] = validation_layout

if self._dev_tools.ui:
# Add custom dev tools hooks if the ui is activated.
custom_dev_tools = []
for hook_dev_tools in self._hooks.get_hooks("dev_tools"):
props = hook_dev_tools.get("props", {})
if callable(props):
props = props()
custom_dev_tools.append({**hook_dev_tools, "props": props})
config["dev_tools"] = custom_dev_tools

return config

def serve_reload_hash(self):
Expand Down
6 changes: 4 additions & 2 deletions tests/async_tests/test_async_callbacks.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,9 +119,10 @@ async def update_input(value):
paths = dash_duo.redux_state_paths
assert paths["objs"] == {}
assert paths["strs"] == {
"input": ["props", "children", 0],
"output": ["props", "children", 1],
"input": ["components", "props", "children", 0],
"output": ["components", "props", "children", 1],
"sub-input-1": [
"components",
"props",
"children",
1,
Expand All @@ -132,6 +133,7 @@ async def update_input(value):
0,
],
"sub-output-1": [
"components",
"props",
"children",
1,
Expand Down
24 changes: 18 additions & 6 deletions tests/integration/callbacks/state_path.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
"chapter1": {
"objs": {},
"strs": {
"toc": ["props", "children", 0],
"body": ["props", "children", 1],
"toc": ["components", "props", "children", 0],
"body": ["components", "props", "children", 1],
"chapter1-header": [
"components",
"props",
"children",
1,
Expand All @@ -15,6 +16,7 @@
0
],
"chapter1-controls": [
"components",
"props",
"children",
1,
Expand All @@ -25,6 +27,7 @@
1
],
"chapter1-label": [
"components",
"props",
"children",
1,
Expand All @@ -35,6 +38,7 @@
2
],
"chapter1-graph": [
"components",
"props",
"children",
1,
Expand All @@ -49,9 +53,10 @@
"chapter2": {
"objs": {},
"strs": {
"toc": ["props", "children", 0],
"body": ["props", "children", 1],
"toc": ["components", "props", "children", 0],
"body": ["components", "props", "children", 1],
"chapter2-header": [
"components",
"props",
"children",
1,
Expand All @@ -62,6 +67,7 @@
0
],
"chapter2-controls": [
"components",
"props",
"children",
1,
Expand All @@ -72,6 +78,7 @@
1
],
"chapter2-label": [
"components",
"props",
"children",
1,
Expand All @@ -82,6 +89,7 @@
2
],
"chapter2-graph": [
"components",
"props",
"children",
1,
Expand All @@ -96,9 +104,10 @@
"chapter3": {
"objs": {},
"strs": {
"toc": ["props", "children", 0],
"body": ["props", "children", 1],
"toc": ["components", "props", "children", 0],
"body": ["components", "props", "children", 1],
"chapter3-header": [
"components",
"props",
"children",
1,
Expand All @@ -112,6 +121,7 @@
0
],
"chapter3-label": [
"components",
"props",
"children",
1,
Expand All @@ -125,6 +135,7 @@
1
],
"chapter3-graph": [
"components",
"props",
"children",
1,
Expand All @@ -138,6 +149,7 @@
2
],
"chapter3-controls": [
"components",
"props",
"children",
1,
Expand Down
6 changes: 4 additions & 2 deletions tests/integration/callbacks/test_basic_callback.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,9 +113,10 @@ def update_input(value):
paths = dash_duo.redux_state_paths
assert paths["objs"] == {}
assert paths["strs"] == {
"input": ["props", "children", 0],
"output": ["props", "children", 1],
"input": ["components", "props", "children", 0],
"output": ["components", "props", "children", 1],
"sub-input-1": [
"components",
"props",
"children",
1,
Expand All @@ -126,6 +127,7 @@ def update_input(value):
0,
],
"sub-output-1": [
"components",
"props",
"children",
1,
Expand Down
Loading