Dash callbacks

Wer mit Dash arbeiten möchte, wird nicht um das Thema Dash callbacks drum rum kommen. Callbacks benutzen wir, um mit dem Dashboard zu interagieren, somit erhalten wir neue Visualisierungsmöglichkeiten. Die Installation von Dash ist in meinem Beitrag Plotly Dash installieren und einrichten beschrieben.

Abhängigkeiten laden

Um Dash lauffähig zu machen, müsst ihr sogenannte Komponenten laden. Dies sind unter anderem 

• dash_core_components – stellt uns unter anderem Dropdowns, Sliders, Checkboxen, etc. zur Verfügung. Mit diesem Komponenten können wir mit Dash interargieren.
• dash_html_components – bietet eine Palette an HTML Komponenten wie Div, Img, Table, etc. an. Diese Komponenten sind, wie der Name schon sagt, mit HTML gleichzusetzen.
• Dash oder JupyterDash – Standardmäßig wird Dash über den Browser aufgerufen. Mit der Dash Komponente instanzieren wir Dash und starten die App. JupyterDash macht es der Dash Komponente gleich. Der einzige Unterschied ist, dass wir Dash mit Jupyter starteten und betrachtet können.
• dash.dependencies – der Hauptbestandteil für die Callbacks. Output und Input sind unerlässlich für Dash callbacks.

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output,Input

Dash Instanz erstellen und das Layout erzeugen

Die Instanz erzeugen wir ganz einfach mit app = JupyterDash(__name__).

Für das Layout verwenden wir dash_html_components um, wie vom Namen schon abzuleiten ist, HTML Elemente einzufügen. All den HTML Elementen können Parameter übergeben werden. Fast alle haben z.B. den ID Parameter. Weitere sind nachzulesen unter https://dash.plotly.com/dash-html-components

# app instanzieren
app = JupyterDash(__name__)

# app Layout erstellen
app.layout = html.Div(id="container",children=[
    html.H3('Dropdown'),
    dcc.Dropdown(
        id='city_dropdown',
        options=[{'label':city,'value':city} for city in['Berlin','München','Dresden','Hamburg']]        
    ),
    html.Div(id='text_output'),
    html.Br(),
    html.Hr(),
    html.H3('Slider'),
    dcc.Slider(
        id="slider",
        min=0,
        max=10,
        value=3
        ),
    html.Div(id='slider_output')
])

Zur Veranschaulichung präsentiere ich hier den groben HTML DOM. Dieser ist stark vereinfacht, der Aufbau sollte aber ähnlich sein.

<div id='container'>
   <h3>Dropdown</h3>
      <select name="city_dropdown" id="city_dropdown"> 
         <option value="Berlin">Berlin</option>
         ...
   <div id="text_output"></div>
   <br>
   <hr>
   <h3>Slider</h3>
   <div id=slider">Slider Definierung</div>
   <div id="slider_output"></div>
</div>

Python Dekorator

Kurz, ein Dekorator ist ein aufrufbares Python Objekt. Der Dekorator nimmt die zu dekorierende Funktion als Parameter an. @app.callback ist der Dekorator bei Dash. Dieser wird üblicherweise vor der Funktion geschrieben, die nachträglich ausgeführt werden soll.

Mit Output definieren wir, wo die Ausgabe der Funktion landen soll. In diesem Fall wäre es das <Div> mit der ID = text_output. Da wir hier kein weiteres Attribut haben, wählen wir children als Ausgabeattribut.

Beim Input nehmen wir vom Dropdown Namens “city_drowdown” das Value Attribut, um unseren Wert auszulesen. Die Anzahl der definierten Inputs ist auch gleichzeitig die erwartete Anzahl der Parameter der darunterliegenden Funktion. Wird nun ein Wert aus der Dropdownliste ausgewählt, z.B. Berlin, so wird dieser Wert der Funktion “City_Namen_anzeigen” übergeben. Innerhalb der Funktion ist der Wert in der Variable “city” gespeichert. Die Funktion validiert, ob city evtl. von Typ None ist. Sollte dies der Fall sein, geben wir “Keine Stadt ausgewählt” zurück, andernfalls ist es der Wert innerhalb der Variable city. In unserem Fall also Berlin, was an den Output geht. Um es nun abzuschließen, steht “Du hast Berlin” in unserem <Div> mit der ID = text_output.

@app.callback(
    Output('text_output','children'),
    Input('city_dropdown','value')
)
def City_Namen_anzeigen(city):
    if city is None:
        return 'Keine Stadt ausgewählt'
    return 'Du hast {0} gewählt'.format(city)

@app.callback(
    Output('slider_output','children'),
    Input('slider','value')
)
def Slider_Nummer_anzeigen(num):
    if num is None:
        return 'keine Nummer ausgewählt'
    return 'Du hast {0} gewählt'.format(num)

Mit all den getätigten Codesnippets können wir nun unsere App starten lassen. Dafür ist app.run_server zuständig. Der Methode können wir mehrere Parameter übergeben. Üblicherweise erlaubt Plotly nur Zugriffe vom Localhost, dies könnte z.B. mit host angepasst werden.

if __name__ == '__main__':
    app.run_server(host='192.168.188.80', mode='inline',port='8051')

Wer interesse an dem Notebook hat, kann es sich hier downloaden.