Using Plotly Dash¶
When you are just starting out, you probably want to develop the application without exposing it to other people in your project.
The easiest way of doing this is to just create a Jupyter server, open a terminal in that server and run the following commands:
$ source activate Python3 $ pip install dash dash-renderer dash-html-components dash-core-components plotly $ sudo sv stop jupyter
This has stopped the Jupyter notebook running on that instance, freeing the port for our application.
Let’s start by creating a directory in the project workspace:
$ mkdir -p /project/dash-example
Let’s now write the code for our application. We will create an application
that predicts whether someone is a cat-person or a dog-person based on their
name. Create a file called
/project/dash-example, with the
from flask import Flask import dash import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output server = Flask('my app') app = dash.Dash('Plotly Dash on SherlockML', server=server, url_base_pathname='/', csrf_protect=False) app.layout = html.Div(children=[ html.H1(children='Are you a cat person?'), html.Label('Your name: '), dcc.Input(id='input-div'), html.Div(id='output-div', children=) ]) @app.callback( Output(component_id='output-div', component_property='children'), [Input(component_id='input-div', component_property='value')] ) def update_output(input_value): if input_value is None or not input_value: return ['You have not typed your name yet.'] if input_value == 'Heisenberg': return ['You are a cat person.'] else: return ['You are a dog person.'] if __name__ == '__main__': app.run_server(host='127.0.0.1', port=8888, debug=True)
This code defines a minimal application that listens on port 8888, the port that we have freed by stopping Jupyter. Let’s now start our app:
$ cd /project/dash-example $ python app.py
Running the app with
python app.py runs the app with its development
server in debug mode (see
app.run_server() in the example code above),
which provides nice features like automatic reloading of the app when the
code is changed.
However, this is not suitable for use in deployed applications, where we
instead use gunicorn, a production-ready Python HTTP server. If you want to
run the app in the same way as it will be run in production, install
gunicorn and gevent from pip (
pip install gunicorn gevent) and run the
$ gunicorn --workers 4 --worker-class gevent --bind 127.0.0.1:8888 app:server
If you now go onto your server through the servers page:
You will see your application!
Carry on developing your app. When you save changes to your code, the app will automatically reload itself (unless you are running it with gunicorn, in which case you will need to first stop it by typing Ctrl-C in the terminal in which you started the app, and restart it by running the same command).
You have now developed a great dashboard, and you want to let other members of your project access it. SherlockML supports hosting Plotly Dash applications. Head to the Apps tab in SherlockML, click New, followed by Plotly Dash. You will be prompted to enter a name for your app.
Choose a name and click Create App. You will then be taken to the App settings page.
You will need to make the following changes to the application settings:
- Change the working directory to /project/dash-example.
- Change the python module to
app. This should be the name of the file containing the app, without
- Change the python object to
server. This should be the name of the Python variable that Gunicorn will serve. Look for a line like
server = Flask()in your source file.
Save your application by clicking the Save button, then click Start app to actually start your Plotly Dash server. After a few seconds, you will see the status of your app change to Running. At this point, a URL will appear. Select that URL and place it in your browser search bar. You will be taken to the application! Behind the scenes, SherlockML verifies that you are an observer in the project that the app belongs to.
For ideas on how to develop a great dashboard with Plotly Dash, check out our examples: