How To: Setup Dash App in Data Lab

Overview

This document provides a step-by-step guide on how to set up and run Dash apps within Data Lab, our Jupyter offering. These steps will enable users to seamlessly integrate and run their dash applications within the Data Lab environment.

Steps to Setup Dash App

1. Install jupyter_server_proxy Package (one time)

   1. Open a Data Lab Project.

   2. Open a new terminal/command line interface.

   3. Install the jupyter_server_proxy Python package by executing the following command

      CODE

      pip install jupyter_server_proxy==4.1.2

   4. Shutdown (by clicking the power icon at top right) the Data Lab project and reopen it. This step ensures that the jupyter_server_proxy extension is linked and loaded to the Jupyter server upon the next startup.

This step must be done on both python 3.8 and 3.11 if you are running Dash in a 3.11 notebook

Global installation of the jupyter_server_proxy package is not supported.

2. Write Code and Utilize Example below

   1. Open a new terminal/command line interface.

   2. Install all the required packages. (e.g., dash using pip)

      PY

      pip install dash

   3. Write your code for creating the Dash app within your Jupyter Notebook.

   4. Utilize the following example to configure the app:

      PY

      from dash import Dash, html, dcc, callback, Output, Input
      
      # Load the dataset from Example >> Cooling Tower 1 >> Area A
      results = spy.search({"Path": "Example >> Cooling Tower 1 >> Area A"}, quiet=True)
      df = spy.pull(results, start='2019-01-01', end='2019-01-15', grid='30min', header='Name', quiet=True)
      
      project_id = spy.utils.get_data_lab_project_id()
      port = spy.utils.get_open_port()
      
      # Set the requests_pathname_prefix
      requests_pathname_prefix = f"/data-lab/{project_id}/proxy/{port}/"
      
      app = Dash("Cooling Tower 1", requests_pathname_prefix=requests_pathname_prefix)
      
      # Define the layout of the app
      app.layout = html.Div([
          html.H1("Cooling Tower 1 >> Area A",style={'text-align': 'center'}),
          html.Label("Select a signal to display:"),
          dcc.Dropdown(
              id='dropdown',
              options=[{'label': col, 'value': col} for col in df.columns],
              value=df.columns[0]
          ),
          html.Div(id='output-graph')
      ])
      
      # Define callback to update the output
      @app.callback(
          Output('output-graph', 'children'),
          [Input('dropdown', 'value')]
      )
      def update_graph(selected_column):
          return dcc.Graph(
              figure={
                  'data': [
                      {'x': df.index, 'y': df[selected_column], 'type': 'line', 'name': selected_column}
                  ],
                  'layout': {
                      'title': selected_column + ' over time',
                      'xaxis': {'title': 'Timestamp'},
                      'yaxis': {'title': selected_column}
                  }
              }
          )
      
      # Run the app
      app.run(port=port, jupyter_server_url=spy.session.public_url)

   5. Run the App

      1. Execute the code within your Jupyter notebook.

      2. Once the code is executed, the Dash app should run inline within your Jupyter Notebook.

The spy.utils.get_open_port() utility function is available from Spy version 192.16 and above. If your Spy version is lower, utilize the helper function provided below.

CODE

def get_open_port() -> int:
    import socket
    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
        s.bind(('', 0))
        return s.getsockname()[1]