plotly/dash-renderer

dash dev tools UI

chriddyp opened this issue · 9 comments

chriddyp commented

Mocks here: https://www.figma.com/proto/icviajRVLhC69Ud0OW7dKe/dev-tools?node-id=162%3A2

This involves two things:

  1. Providing a CSS file to re-skin the werkzeug debugger
  2. Implementing the dash dev tools UI in the dash-renderer library.

@rmarren1 has written the skeleton UI for dash dev tools #64. @valentijnnieman will work off that branch to implement the UI on top of it.

chriddyp commented

To start, we'll leave out the callback graph and the dev tools UI. We'll implement these in later PRs

valentijnnieman commented

To start, we'll leave out the callback graph and the dev tools UI. We'll implement these in later PRs

So just style the werkzeug debugger first?

chriddyp commented

and the dev tools UI

Sorry, I misspoke here. I meant the "Live Reload" UI and the "Callback Graph". We should do the "Notifications" and the werkzeug debugger.
image

T4rk1n commented

HotReload should be easy to disable/enable. Just need to stop the interval and restart it. Tell me if you need help.

valentijnnieman commented

I have a couple of questions about the design! I noticed the front end error cards say "clicking an alert takes the user to it's 'expanded view' in the alerts tray", but I don't see any designs for the expanded view, nor for the alerts tray (edit: actually I guess the alerts tray is at the bottom). Am I missing something? I also cannot find designs for how the werkzeug debugger is supposed to be styled.

chriddyp commented

@valentijnnieman - The style for the werkzeug debugger are on pages 12-16:
image

valentijnnieman commented

@chriddyp I just noticed there are multiple designs. I've been going off the "lo-fi" designs, which is what is linked in this issue, and as they were presented in presentation mode in Figma, I didn't think anything of it. The "hi-fi" designs indeed include the werkzeug debugger. I assume that the "hi-fi" designs are the ones I should've built.

Spend a good bit of time building this:
screen shot 2018-12-13 at 10 31 32 pm

Shouldn't be THAT much work to reskin them though.

valentijnnieman commented

@chriddyp Ugh, if I click on the link now, it does go to hi-fo mode. My bad. Not sure what happened.

alexcjohnson commented

Dev tools UI is a thing. Any remaining issues with it please open a new issue in dash