Login
Back to bricks list
Introduction Version

Streamlit live task


The Streamlit live task is a special type of task that lets you create a Streamlit dashboard app connected to your lab's data.



Streamlit is a popular Python package for rapidly building data apps. You can find more information and examples on the Streamlit website: https://streamlit.io/.





Inputs


When you develop a streamlit live task you can provide as many inputs as needed. The inputs must be File and Folder.



When you write the code of a streamlit env live task , there are 1 important variable available in your code context :


  • source_paths : type List[string]
    • list of string containing the path of files and folders defined as inputs. The list size and order match the inputs defined in the task.

    Outputs


    The Streamlit live task has only one output, which is a StreamlitResource. Opening this resource will allow you to access the Streamlit app. In this resource, you also have access to all the input File and Folder used in the Streamlit app.



    Example


    Here is an example of a simple streamlit app that takes a csv file as input. It show the dataframe in streamlit app and allow the user to select 2 columns to make a scatter plot. 


    # This is a template for a streamlit live task.
    # This generates an app with one dataframe as input. Then the user can select 2 columns to plot a scatter plot.
    
    import pandas as pd
    import plotly.express as px
    import streamlit as st
    
    # Your Streamlit app code here
    st.title("Dashboard example")
    
    # show a table from file_path which is a csv file full width
    if source_paths:
        df = pd.read_csv(source_paths[0])
    
        # show the dataframe
        st.dataframe(df)
    
        # add a select widget with the columns names with no default value
        # set the selectbox side by side
        col1, col2 = st.columns(2)
    
        with col1:
            x_col = st.selectbox("Select x column", options=df.columns, index=0)
    
        with col2:
            y_col = st.selectbox("Select y column", options=df.columns, index=1)
    
        if x_col and y_col:
            # Generate a scatter plot with plotly express
            fig = px.scatter(df, x=x_col, y=y_col)
            st.plotly_chart(fig)
    

    Here is the result app :




    Use brick classes in streamlit app


    In a streamlit app you can load the gws environment to work with classes from your brick (like resources, tasks, database...). With this you can interact with the database to create real time dashboard, generate experiments or report...


    To do this, simply import the StreamlitEnvLoader and use the with statement :


    from gws_streamlit_helper import StreamlitEnvLoader
    
    with StreamlitEnvLoader():
      # Now you can import from the gws_core module
      from gws_core import ExperimentService, Logger, User, CurrentUserService


    Here is an example of a streamlit app that creates an empty experiment when the button is clicked. 


    import streamlit as st
    from gws_streamlit_helper import StreamlitEnvLoader
    
    # Your Streamlit app code here
    st.title("Create experiment app")
    
    with StreamlitEnvLoader():
      # Now you can import from the gws_core module
      from gws_core import ExperimentService, Logger, User, CurrentUserService
        
      if st.button("Create experiment"):
          st.write("Creating experiment")
          Logger.info("Creating experiment from streamlit app")
          # Call gws_core service to create the experiment
          ExperimentService.create_experiment(title="Super streamlit")
      else:
          st.write("No creating")
      


    Develop the streamlit live task



    When you're deploying a Streamlit app in Constellab, the system takes care of deployment, security, and app cleanup, so you don't need to worry about those aspects.




    You can develop and test your Streamlit app directly in the Codelab environment. Write your Streamlit app within a folder. Once it's ready, run the Streamlit app using port 8501 with the following command: streamlit run [PATH_TO_FILE] --server.port 8501. You should see the message: "You can now view your Streamlit app in your browser."



    To test your app, open the URL: https//dashboard-dev.[LAB].constellab.app. Basically, you need to take the URL of your Codelab, replace "codelab" with "streamlit-dev," and remove everything after "/". This will open the Streamlit app, allowing you to test it.



    Once your app is ready, you can test it within a Streamlit live task and connect it with your data. Replace your input variables with the source_paths variable and remove the st.set_page_config statement. The app should work as tested in the Codelab.



    Troubleshoot


    Connecting / Connection lost / Connection timed out


    If you encounter connection issues such as "Connecting/Connection lost/Connection timed out" when opening the Streamlit app, please close the resource or view and then reopen it. This should resolve the issue and allow you to use the app again.