Using dash library in Seeq Data Lab

[Ayub Lakhani]

Hello,

Is it possible to implement a Plotly's Dash Dashboard on Seeq Data Lab ?

When I try to implement a trivial example code 

import dash

 

app = dash.Dash(__name__)

 

app.layout = dash.html.Div([

    dash.html.H1("Hello World!")

])

 

if __name__ == "__main__":

    app.run_server()

and run the code. I can't access the development url that it provides, I get the following error. When ran on my local computer, it works fine. I was wondering if Seeq Server is blocking the use of this? It would be nice to be able to implement a Dash's dashboard instead of using ipywidgets or ipyvuetify. Thank you!

[Teddy]

Yes! Dash apps are possible within Seeq Data Lab. Refer to the following KB page for instructions on how to enable and set up a Dash app within Data Lab:

https://support.seeq.com/kb/latest/cloud/how-to-setup-dash-app-in-data-lab

[Andrea]

Hi, I got the same issue, I need to create a 'Mass flow' as the video: Bing Videos

I copied the full code, and it is not working. 

404 : Not Found

You are requesting a page that does not exist!

Edited November 25, 2024 by Andrea

[Chris Herrera]

Hi Andrea,

This likely stems from not having jupyter-lab-proxy installed in both the 3.8 and 3.11 kernels. This is done by opening a terminal in your project and executing 

pip install jupyter_server_proxy==4.1.2

Then you will want to switch kernels with the following command

pyversion 3.8

Then you will execute the same pip install command again

pip install jupyter_server_proxy==4.1.2

You then want to shutdown the project by clicking 

Re open the project and you should be able to see your dash app.

[Andrea]

 

To create a line graph using Dash, you'll need to use the dash library along with plotly for the graphing components. Below is a step-by-step guide to creating a simple line graph with Dash:

1. Install Required Libraries: Ensure you have Dash and Plotly installed. You can install them using pip if you haven't already: pip install dash plotly
2. Create a Dash Application: Set up a basic Dash application.
3. Define the Layout: Use Plotly to create a line graph and set it in the Dash layout.
4. Run the Application: Start the Dash server to view the graph in your web browser.

Here's a complete example:

# Import necessary libraries
import dash
from dash import dcc, html, Dash
import plotly.graph_objs as go

# Initialize the Dash app
# Create a Dash application
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("F34FFU", requests_pathname_prefix=requests_pathname_prefix)

# Sample data for the line graph
x_values = [1, 2, 3, 4, 5]
y_values = [10, 15, 13, 17, 10]

# Define the layout of the app
app.layout = html.Div(children=[
    html.H1(children='Simple Line Graph'),

    dcc.Graph(
        id='example-line-graph',
        figure={
            'data': [
                go.Scatter(
                    x=x_values,
                    y=y_values,
                    mode='lines+markers',
                    name='Line Plot'
                )
            ],
            'layout': go.Layout(
                title='Line Graph Example',
                xaxis={'title': 'X Axis'},
                yaxis={'title': 'Y Axis'}
            )
        }
    )
])

# Run the app
app.run(port=port, jupyter_server_url=spy.session.public_url)

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]