📣 Announcing Dash Dev Tools

Just to add that this is a multi page app. Maybe it would be a good idea to render only those callbacks that has output visible on current page and not all the callbacks in the app (which I think is implemented right now). Cause the number of callbacks on one page is dramatically lower.

2 Likes

Yeah that’s a great idea. Totally do-able.

Will you implement it in the near future? Or should I search for some kind of hack to make it work?:wink:

I can’t really commit to it now, unless a customer (Get Pricing) needs this prioritized or an organization wants to sponsor the development (Consulting, Training & Open-Source Development).

We would also gladly accept a PR that would implement this feature.

Soooo great! Btw, how did you make that DAG with curved edges, that go around nodes? If it is via cytoscape, how?

@Vetertann we were using http://visjs.org/

I am sorry to report that some widgets eg a slider wont show on my app after upgrade to 0.42.0 went back to 0.40.0 and all fine
would love to give a code snipet to illustrate this but my app has become too big to do that
the same thing had happened to me when 0.39.0 was released and a hack fix was possible by including style={‘overflow’:‘hidden’}
in my wrapping html.Div

@jelkhoury thanks for sharing your app snapshot with dev-tools UI. so the error message for ID='fut-agg-level' was not helpful for solving the problem? the slider failed to render as there is a prop error. can you share the coding/data for that failed component?

Thanks @byronz
I am not good in JavaScript so I m not able to interpret the error message
I also assume that since it was working with Dash == 0.40.0 it is not related to my code , I might be wrong
here is the code snippet where I define the two sliders fut-cutoff and fut-agg-level:

html.Div(className=‘three columns’,style={‘width’ :‘50%’,‘align’:‘right’},children =[
dcc.Slider(id=‘fut-cutoff’,
min=.05,max=.3,step=.05,value=.1,
marks={round(j,2): str(round(j,2)) for j in list(np.arange(.05,.35,.05))})]),
]),
html.Div(className=‘row’,children=[
html.Div(className=‘three columns’,children =[html.H6(‘Price Agg (bps):’)]),
html.Div(className=‘three columns’,style={‘width’ :‘50%’,‘align’:‘right’},children =[
dcc.Slider(id=‘fut-agg-level’,
marks = {i:10**(i-2) for i in range(0,5)},
max = 4,
value = 2,
step = 1)]),
]),

the upgrade to React 16 in recent release has some significant side effects on the component props. In React 15, it will swallow the errors (sometimes it has no impact on rendering it properly like your case). The release with dev-tools comes with dev_tools_check_props=True by default, so in your case marks= {i: 10**(i-2) for i in range(0,5)} is breaking the propstype contract in slider component https://github.com/plotly/dash-core-components/blob/79b0f3244966848f824d462ea6f2c71e96020850/src/components/Slider.react.js#L88-L96

you can either use str(i) to comply with the protocol or turn check_props off by
app.run_server(debug=True, dev_tools_props_check=False)

1 Like

@byronz

Thank you very much str(mark) is the fix indeed
should have spotted myself

@jelkhoury good to know it helps. your app is in production or just a hobby project?

I use Dash and Python to script the apps for the IT to implement in whatever language they think is fit / performant

1 Like

The callback map is great! But is it possible to highlight the paths when hover over to or click on a function nodes? I have too many callbacks with many inputs, which make is very hard to trace back to the start of each arrow.

Super addition.

One more suggestion: in the callback graph, show connections for objects that are State parameters as well as Input parameters.

2 Likes

Is there a way we could open an interactive console on error? So that when the error occurs, you can inspect the value of all the variables and see what led to the error. See Open debugger on error - Dash