As stated here, the External resources docs need to include the explanation that it is needed to add __name__ in order to make Dash recognize as local resources the files (css, favicon...) inside the assets folder

A good dash initialization would be:
app = dash.Dash(name=__name__)

related to https://community.plot.ly/t/only-first-callback-in-multiple-callbacks-work/10718/2

gets tricky because you have to import app from other files that declare the callbacks

it would be good to have a page on how to debug dash apps. Many folks have trouble figuring out how to inspect data inside their callbacks. For example, see e.g. https://community.plot.ly/t/help-with-multi-true-in-drop-down/13774/4 or https://community.plot.ly/t/still-open-getting-different-marker-shapes-in-a-dash-app/11928/6?u=chriddyp

A general debugging chapter could include:

• Links to our dev-tools works
• Tutorial on how to use ipdb:

You can always add print statements inside your callbacks. However, we recommend using an interactive debugger: ipdb.

pip install ipdb

Insert debugging statements in your code with

import ipdb; ipdb.set_trace()

This will open up an interactive terminal session. You can:

• Inspect the values of variables and print them
• Step through your callback functions line-by-line
• Run your own code

Press these keys while your inside the interactive prompt:

• q will "quit"
• n will proceed to the "next" line
• c will "continue" until the next breakpoint
• h will bring up "help"

• A tutorial on IDEs like Pycharm or VisualStudio that have line-by-line debugging built in
• Explanation about the browser console and how errors might happen there. And a link to the PRs where we're going to expose these errors to the user

This is a follow-up to #136. I'll update the list after more reviews.

• add more Celery content to "Linking a Celery Process"
• add more errors to "Common Errors"
• add contributing guide

If you have any more ideas that you would like to see in the DDS documentation discuss below.

When following the tutorial on how to write your own components for Dash, I came across some stuff that I thought could be improved:

• When trying out my custom component in a “real” project (with python setup.py install), when running the app, Dash tries to download the package from unpkg, but because I hadn't done step 7 yet which handles publishing a component, it couldn't find it and it threw some errors. A workaround could be to use app.scripts.config.serve_locally = True in the Dash app, I think it’s good to add this to the tutorial (maybe in step 5 or 6)
• I was stuck for a bit when trying to add styling to my custom component - I talked to @nicolaskruchten about this and he made the point that this encourages experimentation with CSS and the like, which is a good point, but I still think some guidance here could be beneficial. I suggest adding maybe a couple of lines that explain how it works in dash-core-components, and/or maybe some suggestions of how it could also work: inline styles, css-in-js, styled-jsx, glamorous, etc, and the suggestion for the user to experiment with it. I guess my point is that I felt I was missing something, that I was just missing a line somewhere that talked about how to handle styling, and that confused me.

That’s all I can think of for now, they’re not big improvements, but I think it will help to make the tutorial a bit more welcoming to new users!

Let me know what you think, @chriddyp !

We should have a document to explain how to get IDE auto-complete working with all the popular IDEs.

I think we should have:

• Atom
• VSCode
• PyCharm
• Jupyter Notebooks

Link leads to an empty plotly link with no content

I haven't seen this feature mentioned in the docs. Basically, we let users assign a function as layout, this function can then dynamically create the layout depending on some other variables. I think it's a great feature for more advanced users and we should document it somewhere.

There's a few caveats that should be mentioned when dealing with this feature.

• The layout function will be called before the first requests, meaning if you want to use flask.requests you will have to check if you actually have the request context.
• The initial layout should return the whole layout with all the components that are used in callbacks or set app.config.suppress_callback_exceptions = True.

• explain that the log is does no persist across deploys (cleared upon redeploy)
• mention we display the last 500 lines in the dds UI and the full log can be accessed from the server.

The interactive graph callbacks demo example is not working in the Dash Guide. None of hover, click etc callbacks fire in both the live version and also running locally.

Strangely, this doesn't seem to be a problem when running tutorial/examples/graph_callbacks_simple.py as a standalone app outside of the tutorial.

Furthermore, the correct behaviour can be restored to the dash-docs app by downgrading to dash_core_components==0.20.1

We should add more information on how to change the favicon, right now we only tell that we look for a favicon in the assets folder. But now that we have a default favicon we should be more explicit:

• A default favicon is provided if no favicon.ico is found in the assets folder.
• To override the default favicon you need to put favicon.ico in the assets folder, there is no other way.
• Changes to the favicon in the assets folder will bust the favicon cache.

create a page: https://dash.plot.ly/dash-deployment-server/privacy to discuss:

• point to https://dash.plot.ly/authentication for more information about dash-auth
• outline the 3 privacy options: public/private/secret available with dash auth
• discuss how to add collaborators via the UI
• discuss how to add collaborators programatically (via https://api.plot.ly/v2/files#collaborators)

cc @chriddyp @bcdunbar

Someone just wrote to me saying that "only 7 of the 18 examples worked at first try".

Some of the issues seem to be that he/she needed to install 3rd party packages, like pandas, flask-caching, redis. Perhaps we should include an "optional installation" section in the installation guide?

Another issue was that we might be missing an # -*- coding: utf-8 -*- in some of the examples, as he/she said that "Replacing the text Montréal with Montreal made some errors disappear "

We should write some tests that run all of the examples in different python environments

No graph appears and I see

 python dash-docs/tutorial/examples/basic_callbacks_events.py 
 * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger pin code: 275-473-831
127.0.0.1 - - [11/Dec/2017 17:53:55] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [11/Dec/2017 17:54:02] "GET /_dash-layout HTTP/1.1" 200 -
127.0.0.1 - - [11/Dec/2017 17:54:02] "GET /_dash-dependencies HTTP/1.1" 200 -
127.0.0.1 - - [11/Dec/2017 17:54:03] "GET /favicon.ico HTTP/1.1" 200 -
127.0.0.1 - - [11/Dec/2017 17:54:08] "POST /_dash-update-component HTTP/1.1" 500 -
Traceback (most recent call last):
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1997, in __call__
    return self.wsgi_app(environ, start_response)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1985, in wsgi_app
    response = self.handle_exception(e)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1540, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1982, in wsgi_app
    response = self.full_dispatch_request()
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1614, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1517, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/_compat.py", line 33, in reraise
    raise value
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1612, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/flask/app.py", line 1598, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/dash/dash.py", line 551, in dispatch
    return self.callback_map[target_id]['callback'](*args)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/dash/dash.py", line 508, in add_context
    output_value = func(*args, **kwargs)
  File "/Users/cpsievert/github/dash-docs/tutorial/examples/basic_callbacks_events.py", line 45, in update_graph
    dt(2017, 1, 1), dt.now()
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/pandas_datareader/data.py", line 137, in DataReader
    session=session).read()
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/pandas_datareader/base.py", line 181, in read
    params=self._get_params(self.symbols))
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/pandas_datareader/base.py", line 79, in _read_one_data
    out = self._read_url_as_StringIO(url, params=params)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/pandas_datareader/base.py", line 90, in _read_url_as_StringIO
    response = self._get_response(url, params=params)
  File "/Users/cpsievert/anaconda/lib/python3.5/site-packages/pandas_datareader/base.py", line 139, in _get_response
    raise RemoteDataError('Unable to read URL: {0}'.format(url))
pandas_datareader._utils.RemoteDataError: Unable to read URL: http://www.google.com/finance/historical?output=csv&startdate=Jan+01%2C+2017&enddate=Dec+11%2C+2017&q=COKE

I was reading https://dash.plot.ly/plugins and it seems to me it's a bit out of date now that we generate materialized Python files and not JSON descriptors, right?

As discussed on slack, it appears we don't have docs for on-prem https deploys. We should definitely have these for customers.

Feel free to ask in the on-prem room for how it should work so it gets documented correctly :)

/cc @cldougl @bcd @chriddyp

It'd be good to have a simple table of contents on https://dash.plot.ly/dash-core-components

• n_nlur -> the input lost focus
• n_submit -> Enter was pressed.

They also each have a timestamp.

The example for the dcc.Upload component should have only one Input and the rest as State.

For reference:
plotly/dash-core-components#245

1. Don't name your file dash.py
2. Make sure that pip is using the same instance of python - plotly/dash#347 (comment)
3. Try installing in a virtualenv - plotly/dash#347 (comment)
4. We can create an issue to hold and crowdsource all of these 'installation problems'

When I follow the instructions in the Readme, I get the following error:

ModuleNotFoundError: No module named 'tutorial.run'

Here is a screenshot of my IDE with versions of my python, virtualenv, and gunicorn. I am on a 2017 MacBook Pro with macOS High Sierra (Version 10.13.6).

When I run the example code using my dash-docs venv it looks there is a unicode error in the traceback that is fixed when I upgrade plotly.py to 3.2.1

A big FAQ or gotcha is working with the children property. It takes a while for new users to realize that they can update huge swaths of their app by updating the children property of some parent component. For example, consider this community question: https://community.plot.ly/t/switching-multiple-apps-with-dropdown/12949

Note that the FAQ is not yet merged, but should be soon in #146

these commits 1b9688a...8570fb0 were recently reverted by @nicolaskruchten . Apparently they broke the docs on master

Hey there,

I was looking into the docs and noticed few typos here:

• styleseets -> stylesheets
• can optionally these -> can host? these

Not really suitable for a PR, so feel free to include it in one of a fix commits 😃

I recently re-installed Dash on a new computer, and noticed that when I pip install dash, it automatically installs dash-renderer and plotly; I didn't need to do that.

It's not the worst thing in the world, but the installation page doesn't need to instruct me to install dash-renderer or plotly. Unless there's some edge case I can't think of where it's needed to know all the relevant Dash libraries, could the installation instructions be changed to reflect this? 3 packages is much less intimidating than 5. :)

We've merged some PR's that contain fixes for the Tabs component, notably bugs that we mention in the docs. We should update the docs section about Tabs!

add general instructions for redis and celery from: https://github.com/plotly/dash-redis-demo/blob/master/README.md (and link example repo) to the onprem deployment doc

update https://dash.plot.ly/react-for-python-developers based on: https://github.com/plotly/dash-component-boilerplate#dash-component-boilerplate (ie run npm demo won't work + add instructions of running the cookie cutter instructions)

We should update the plugin documentation with the cookiecutter usage information.

This is a placeholder issue to get feedback from users about our "React for Python Developers" guide. By following the instructions in that guide, you should feel comfortable creating your own React Dash components, even if it was your first time programming in JavaScript and React.

How did it go? What did we leave out? Let us know in this issue!

Now that tabs are released, it's time to update our user guide with some examples 🎉

See #123 for a similar set of files that will need to be updated.

For the examples, I like to:

• Include a bare bones example for the index page: https://dash.plot.ly/dash-core-components/. Basically including only the props that you need.
• In the "Examples and Reference" link for the page (it'll be https://dash.plot.ly/dash-core-components/Tabs), include several useful examples with some text explaining them and, for the first couple of examples, callbacks tying it all together. https://dash.plot.ly/dash-core-components/dropdown is a good example
• In all of the examples, I try to make them useful and aesthetically pleasing/inspiring

For tabs, I think these examples would be useful:

• Explaining the inline content vs content in a callback and clearly explaining the tradeoffs (loading all of the content vs loading it on the fly)
• An example overriding the colors with some other nice colors
• An example changing the style from full-width tabs to GitHub style tabs (as I attempted to do in the original PR)

And then we'll want to include the reference table for both the Tabs component and the Tab component.

also in the URL: https://dash.plot.ly/dash-deployment-server/enviornment-variables

to fix the URL, we'll need to add a redirect from /dash-deployment-server/enviornment-variables ➡️ /dash-deployment-server/environment-variables

I made a note about of few of them here -- plotly/dashR@5708c82

This is a placeholder issue to get feedback from users about our "React + D3" guides.

How did it go? What did we leave out? Let us know in this issue!

I think that we should do whatever we can to reduce the barriers of entry in creating custom Dash components. One of the largest barriers to entry is React and JavaScript itself: our community is (by definition) mostly Python developers.

One way that we can help out our community in creating or customizing Dash components is by providing a really friendly, step-by-step guide to creating a Dash component. I'll call this the "React.js for the Python Developer Guide".

Below is a rough outline of what I'm imagining. Would love feedback on this!

For Tutorial 1, here's a rough syllabus that I've used in the workshops:

1. Introduction:

   • React and JavaScript is easier than it seems, you can do it!
   • Most Dash component's are simple wrappers around existing components. And there are hundreds of thousands of them.

2. Developer Setup

   • Installing Node, NPM, and create-react-app
     • In practice, it would be nice to use our dash-component-archetype here once we make it better

3. Making your first change

   • Opening up App.js and changing "React" to "Dash"
   • Observing the hot-reload
   • Making an error and seeing where to find error messages: throw error
   • Doing console.log and seeing the data

4. Quick React vs Python:

   • React has classes's like Python classes
   • Declare variables in JavaScript: const and let
   • JavaScript "objects" are Python's "dict"
     • Except the keys are always strings
   • console.log instead of print
   • import and export

5. Quick create your own component in the same file as App.js:

   1. Create Header and include it in App:

   class Header extends Component {
       render() {
           return 'Header'
       }
   }
   
   class App extends Component {
       ...
   
       render() {
           ...
           return <Header/>
       }
   }
   

   2. Thread a property through:

       return <div>{this.props.name}</div>
   

       const myHeaderName = 'Dash Header'
       return <Header name={myHeaderName}/>
   

   3. Add another property like style:

       return <div style={this.props.style}>{this.props.name}</div>
   

       const myHeaderName = 'Dash Header';
       const style={'color': 'blue', 'fontSize': 20}
       return <Header name={myHeaderName}/>
   

6. Making this component Dash-ready:

   • Quick pause: this "component" is hydrated from JavaScript, now let's make it a standalone Dash component
   • Move it to a new file
   • Add propTypes
   • Run the toolchain
   • Fire up usage.py and have:

   app.layout = html.Div([
       my_component.Header(name='Dash Header', style={'color': 'blue', 'fontSize': 20})
   ])
   - Isn't that amazing? Dash components are 1-1 with their React components
   

7. Making it more complex with updates and events in react:

   • Making an Input component

   class TextInput extends Component {
       render() {
           return (
               <input value={this.props.value}/>
           )
       }
   }
   

   class App extends Component {
       render() {
           const myValue = 'Text input'
           return <TextInput value={myValue}/>
       }
   }
   

   • Inputs are "controlled":
     • Note how you can't enter any text in that input. It's value is fixed.
     • Note how if you remove value={...}, then you could type into it
     • So, we need a way to handle keypresses and feed those values back into the input
   • Adding an onChange:

     <input value={this.props.value} onChange={(e) => {
         console.log(e.target.value)
     }}/>
     

     • Woah, that (e) => {...} thing? That's basically like a Python lambda function. Inline, anonymous function.
     • e.target.value? That's just "something you know", it's the standard syntax for input events with JavaScript
   • Start typing and check out your console. Letters!
   • Adding state:

   class TextInput extends Component {
       constructor() {
           this.state = {
               value: 'test'
           }
       }
       render() {
           return (
               <input value={this.state.value}/>
           )
       }
   }
   

   • this.state is a special react class property. We refer to it with this, just like as in python classes
   • React provides a special way to update this.state: this.setState. When you call this.setState, it will call the render component automatically to "rerender" your component. Let's try it:

   class TextInput extends Component {
       constructor() {
           this.state = {
               value: 'test'
           }
       }
   
       render() {
           console.log('rendering')
           return (
               <input 
                   value={this.props.value}
                   onChange={e => {
                       console.log(e.target.value);
                       this.setState({value: e.target.value});
                   }}
               />
           )
       }
   
   }
   

   • Now type: notice how we're just renderering and rendering our component. And notice how our input is now getting updated!
   • Now, let's move the state from TextInput to App:

   class App extends Component {
       constructor() {
           this.state = {
               value: 'test'
           }
       }
       render () {
           console.log('rendering App')
           return (
               <div>
                   <TextInput
                       value={this.state.value}
                       updateValue={newValue => this.setState({value: newValue})}
                   />
               </div>
           );
       }
   }
   
   class TextInput extends Component {
       render() {
           console.log('rendering TextInput')
           return (
               <input 
                   value={this.props.value}
                   onChange={e => {
                       console.log(e.target.value);
                       this.props.updateValue(e.target.value)
                   }}
               />
           )
       }
   }
   

   • data is flowing in a big loop! From the input up to the app, re-rendering the app and re-rendering the TextInput with the new value.

8. Now here's the kicker. App? That's basically dash-renderer. It's rendering all of the components and it's providing the data down into the components as props. It also provides an updateValue-like prop, except it's called setProps and it takes an object. So, to make this Dash-ready, let's:

   • Move TextInput into it's own file
   • Add propTypes
   • Rename updateValue to setProps and update the call signature to setProps({value: e.target.value})
   • Run the toolchain
   • Add it to usage.py and create a callback
     • value is now a property that we "listen" to as a callback Input

9. Now, in practice we won't create our own components. We'll frequently just provide wrappers around existing components. Let's try it out with the react colorpicker:

   • npm install react-colorpicker
     • npm is the pip for node
   • import ColorPicker from 'react-colorpicker'
   • Add this.setProps
   • Add propetypes
   • Run the toolchain
   • Magic

10. Advanced:

    • If the component's properties don't update with callbacks, then it can manage its own state completely. This will be a quite a bit faster as the dash-renderer re-render cycle can take a moment or two.
      • You can check if a component can manage its own state by seeing if this.props.setProps is defined or not.
      • For an example, see the Input component in dash-core-components source
    • We use Ramda as our "standard library", here's the docs: https://ramdajs.com/
    • Read the source for the existing components in dash-core-components
    • Subscribe to this issue to be aware of breaking changes in the components: plotly/dash-components-archetype#40

The dash dash-html-components section highlights that HTML components can be styled using inline styles or by attaching a custom stylesheet, and we now have a question in the FAQ about how to style your Dash app. This is helpful for users who have some HTML/CSS experience, but many Dash users do not have such experience.

It would be good to have a section that walks through both the mechanics of using inline styles with the style attribute and external stylesheets with className etc, along with a gentle introduction to CSS in the context of styling a Dash app.

This would also provide a place to make clear that dash-core-components accept the className attribute too, which is currently not explicitly mentioned in the docs.

Dash 0.27.0 released with the first set of features from dev tools. We should add a section about it.

Can refer to the docstring for more info:

https://github.com/plotly/dash/blob/f94991be2db9a3a640ea680c2cf872611f857eb6/dash/dash.py#L992-L999

Updated docstring with more info in hot-reload branch:

https://github.com/plotly/dash/blob/a395d32a6894ac8840b5fb59ac5fb313227580c1/dash/dash.py#L1038-L1068

our previous URL for the dash deployment docs was https://dash.plot.ly/deployment/on-premise. Our new url is https://dash.plot.ly/dash-deployment-server. We should have a redirect in place from the old URL to the new URL.

You should be able to add a url redirect with something like:

@app.server.route('/deployment/on-premise')
def hello():
    return redirect("/dash-deployment-server", code=302)

inside https://github.com/plotly/dash-docs/blob/master/tutorial/server.py

@bcdunbar - could you take this one as soon as you can?

We'd like to eventually remove app.css.append_css. We've created new methods for including local and remote css (plotly/dash#286) and we should update all of our examples to use these new methods instead of append_css.

The new way to include remote and local assets are documented here: https://dash.plot.ly/external-resources. We should replace append_css with external_stylesheets=[...] everywhere

Update and add content https://dash.plot.ly/dash-deployment-server/app-authentication for latest changes in dash-auth 1.1.4

Something like:

1. Initialize app (link to initialize chapter)
2. Add environment variables via DDS settings UI
3. Add the below code to app.py and amend a, b, c
4. Deploy (link to deploy chapter)
5. Navigate to your home folder and update viewer permissions

The button example:

Could use a page of its own, like the rest of the components. In that page, we should include an example of n_clicks_timestamp (see the forum for examples)

• assets_url_path change the url to requests the assets.
• assets_ignore regex filter for the included assets.
• assets_external_path to serve the assets from a cdn.

I've been learning Dash over the past couple of weeks, mostly using the official tutorial at https://dash.plot.ly/.

I'd like to improve the tutorial as follows:

1. Correct the part-numbering. Currently the page linked above lists 6 parts to the tutorial. However, the tutorial pages themselves are misnumbered. This should be an easy fix. I would also like to remove the section included in the first few tutorial parts, in the image below, because it doesn't match the structure of the tutorial as listed on the main page of the User Guide:

2. Add a page for the excellent style guide currently hosted here: https://codepen.io/chriddyp/full/bWLwgP/. Personally, I am still unclear on whether I need to link to any external CSS to make use of Dash's grid system, so we should probably address that on the style guide page.

Lastly, and this is unrelated, but I have noticed that pages frequently load at the bottom or middle of pages rather than the top in the User Guide. Is there a known reason for this? Is it fixable? I found it annoying and would hate for others to miss the great tutorial on Dash's website if they're also experiencing it.