dash dev tools UI - Githubissues

plotly / dash-renderer

OBSOLETE has been merged into dash

https://github.com/plotly/dash

MIT License

97 stars 32 forks source link

dash dev tools UI #94

Closed chriddyp closed 5 years ago

chriddyp commented 5 years ago

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

This involves two things:

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

@rmarren1 has written the skeleton UI for dash dev tools https://github.com/plotly/dash-renderer/pull/64. @valentijnnieman will work off that branch to implement the UI on top of it.

chriddyp commented 5 years ago

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

valentijnnieman commented 5 years ago

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 5 years ago

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.

T4rk1n commented 5 years ago

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

valentijnnieman commented 5 years ago

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 5 years ago

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

valentijnnieman commented 5 years ago

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

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

valentijnnieman commented 5 years ago

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

alexcjohnson commented 5 years ago

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