If you're viewing these slides on the web, press the down key whenever you see a ⬇️

👍

Mathematical modelling consultancy based in central London.

Sorry 🇪🇺

Invite

PyCon 🇬🇧 2019

Friday 13 - Tuesday 17 September

in Cardiff 🏴󠁧󠁢󠁷󠁬󠁳󠁿

https://2019.pyconuk.org/

But... what if I want an interactive webpage?

First: how does this work in JS?

⬇️

Hello there!

3 DOM (Document Object Model) Nodes:

• P
  • Span#helloName
• Input#helloInput

We need a script that sets the innerHTML of Span#helloName to value of Input#helloInput, and monitors it for changes.

Javacript allows us to manipulate the DOM in the browser to do this.

React lets us do this declaratively. Rather than write our own script, we declare the value of something and how it changes.

Precise syntax isn't important, but the value of Input#helloInput would be a prop to the Span#helloName component.

A javascript function ultimately defines how the relationship works.

	let spanHelloName = (helloInputValue) => (
	  {helloInputValue}
	);

Meanwhile... in Dash...

⬇️

Interaction and changes to the layout/DOM are managed by callbacks. They define relationships between components.

Think of these a bit like excel.

They are functions that are called whenever any of their inputs change.

Updated Hello World! ⬇️

Give the heading an ID, my-h1

	app.layout = html.Div(
	    children=[
	        html.H1(id="my-h1"),
	        dcc.Input(
	            id="my-input",
	            value="Basel",
	            type="text",
	        ),
	    ]
	)
	

Set its value with a Callback: taking the value of my-input

	@app.callback(
	    Output(
	        component_id="my-h1",
	        component_property="children",
	    ),
	    [
	        Input(
	            component_id="my-input",
	            component_property="value",
	        )
	    ],
	)
	def update_output_div(input_value: str) -> str:
	    return f"Hello {input_value}!"  # python 3.6
	

	$ python app01.py
		

See it live app01.py

Important ❗⬇️

The code defining the relationship between our components now lives in python. The 🐍 lives on the server.

Whereas in a React app, this would all be managed inside the browser, in Dash it now involves a call to the server (to get the new value for the DIV)

🏎️ vs 🛴

Huge performance loss compared with pure React.

But that's okay...

I want to build an app really quickly. Using familiar technologies for data scientists. In order to build a proof-of-concept (PoC), or a very low-use alpha.

1. Display Data Quickly and Easily

app03.py: listing the 🛳️ dataset ⬇️

Full Code Example

app.layout = html.Div(
    children=[
        html.H1("Titanic Dataset"),
        html.H5("Filter by sex:"),
        dcc.Dropdown(
            id="my-dropdown",
            options=[{"label": "All", "value": "both"}]
            + [
                {"label": sex, "value": sex}
                for sex in df.Sex.unique()
            ],
            value="both",
        ),
        html.Div(id="my-div"),
        dash_table.DataTable(
            id="my-table",
            columns=[
                {"name": i, "id": i} for i in df.columns
            ],
            data=[],
        ),
    ]
)

@app.callback(
    Output(
        component_id="my-table", component_property="data"
    ),
    [
        Input(
            component_id="my-dropdown",
            component_property="value",
        )
    ],
)
def provide_passengers(sex: str) -> Iterable[Mapping]:
    if sex == "both":
        return df.to_dict("rows")

    return df[df.Sex == sex].to_dict("rows")

See it live app03.py

Displaying Graphs

Full support for a rich suite of graphing functions.

Full code example

app.layout = html.Div(
	  children=[
	      html.H1("Titanic Names"),
	      dcc.Graph(
	          id="example-graph",
	          figure={
	              "data": [
	                  {
	                      "x": letters,
	                      "y": freq,
	                      "type": "bar",
	                      "name": "Titanic Passengers By First Name",
	                  }
	              ],
	              "layout": {
	                  "title": (
	                      "Number of Passengers on the Titanic By First "
	                      "Letter of First Name"
	                  )
	              },
	          },
	      ),
	  ]
)

See it live app03a.py

Making Interactive Tools

Example: basic To-Do list (app04.py) ⬇️

app.layout = html.Div(
  children=[
      html.H1("To Do List"),
      html.Ul(
          id="my-ul",
          children=list_tasks(data_store["tasks"]),
      ),
      dcc.Input(id="my-input"),
      html.Button(
          id="my-button", n_clicks=0, children="Add"
      ),
  ]
)

# replace this with a real data store!
data_store = {"tasks": []}

def list_tasks(tasks: Iterable[str]) -> Iterable[html.Li]:
  """Return list items of tasks."""

  return [html.Li(children=task) for task in tasks]

@app.callback(
	Output("my-ul", "children"),
	[Input("my-button", "n_clicks")],
	[State("my-input", "value")],
)
def add_task(
	n_clicks: int = 0,
	value: str = None,
	data_store: Mapping[str, Iterable] = data_store,
) -> Iterable[html.Li]:
	"""Called when the button is clicked."""
	if value is not None and len(value.strip()):
			data_store["tasks"].append(value.strip())

	return list_tasks(data_store["tasks"])

Key to transactional/interactive interface:

• Input causes the callback to be run whenever this value changes (i.e, button is pushed)
• State provides the value of another DOM element, but does not cause the callback to be fired whenever that value changes.

See it live app04.py

1. Organize your application! ⬇️

Dash is novel and experimental, so people are always referring to the docs.

All the docs display apps in a single file.

Result: 2,000 line single-file dash apps.

This may seem like very basic coding advice but it's important!

File Structures

• Split callbacks and layouts into different files
• Run the app as a module with __main__.py
• Give sets of fetures their own directories
• Abstract logical code from callbacks

File Structures: app05.py

Separation of concerns

• __init__.py
• __main__.py - runs the app (as module)
• app.py - calls dash.Dash() to construct the app
• callbacks.py - handles interactions
• layouts.py - defines the look of the app

$ python -m app05

2. Build your app with factory functions

...because...

3. This allows easier routing and navigation! ⬇️

• At decisionLab, we've abstracted the Dash interface from our callbacks and layouts.
• Our App class has a callback decorator which stores callbacks as they are declared.
• And a layout decorator which stores layout (i.e., dash components) alongside a route (a string for the URL path)..
• Our default template and factory functions then build a dash app based on the modules declared in our application's entry point.

"""Run the app."""
from .factory import create_app

from .home import *  # at dL we parameterize this instead
from .todo import *
from .shopping import *

app = create_app()

if __name__ == "__main__":
  app.run_server(debug=True)

@App.callback(
  Output("my-shopping-ul", "children"),
  [Input("my-shopping-button", "n_clicks")],
  [State("my-shopping-input", "value")],
)
def add_item(
  n_clicks: int = 0,
  value: str = None,
  data_store: Mapping[str, Iterable] = data_store,
) -> Iterable[html.Li]:
  """Called when the button is clicked."""
  if value is not None and len(value.strip()):
      data_store["items"].append(value.strip())

  return list_items(data_store["items"])

@App.layout(label="Shopping List", path="/shopping")
def shopping_layout() -> html.Div:
  return html.Div(
      children=[
          html.H1("Shopping List"),
          html.Ul(
              id="my-shopping-ul",
              children=list_items(data_store["items"]),
          ),
          dcc.Input(id="my-shopping-input"),
          html.Button(
              id="my-shopping-button", n_clicks=0, children="Add Item"
          ),
      ]
  )

Register a single callback/base layout

def register_template(app: dash.dash.Dash) -> None:
  """Register the main template of the application, including css."""
  app.layout = base_layout()
  app.callback(
      Output("page_content", "children"), [Input("url", "pathname")]
  )(App.route)

Layout...

def base_layout() -> html.Div:
  """Return a Dash Component which will serve as the top-level layout."""
  # register the layout
  return html.Div(
      [dcc.Location(id='url', refresh=False),] + [html.Div(

          html.Ul([
              html.Li(
                  dcc.Link(
                      route["label"],
                      href=path
                  ),
              )
              for path, route in App._ROUTES.items()
          ])
      ),
      html.Div(id="page_content", children="Click link to continue"),]
  )

Methods on our App class.

@classmethod
def route(cls, path) -> dash.development.base_component.Component:
  """Return the desired layout."""
  try:
      return cls._ROUTES[path]["callable"]()
  except KeyError:
      return cls._not_found()

@staticmethod
def _not_found() -> html.Div:
  return html.Div("Not Found")

$ python -m app06

See it live app06

4. Tooling up Dash: Dependency Injection ⬇️

Once we have a class to declare and manage the app, and factory functions to build it, we can start to integrate other tools to make life for our users easier.

The first such tool we've begun to use is dependency injection, using google/pinject.

If you're interested in implementing this, please contact me to talk further!