How to get started with Streamlit apps.

How to get started with Streamlit apps.

You can easily build Python apps with Streamlit from the Cognite Data Fusion (CDF) user interface. Navigate to fusion.cognite.com and log in to your CDF project. We don’t have a sandbox or demo project set up for testing Streamlit as of now, so you will need access to a CDF project through your company. Try the Streamlit playground if you want to try out Streamlit components without your data.

Under the Data management workspace, and the Build solutions drop-down, you find Streamlit apps.

Here you can view all Streamlit apps that you have access to. Let's create our own. Click the blue Create app button. Give your new app a great name, something that other users will easily recognize when they come to use your app. We want to make an app that can visualize our time series data.

Once we click OK. We can fill in the Python code needed for our app. For this example, we used the following code: 

import plotly.graph_objs as go

import streamlit as st



from cognite.client import CogniteClient

from cognite.client.data_classes.data_modeling import ViewId

from cognite.client.data_classes.data_modeling.query import Query



# Create client with user's auth

client = CogniteClient()



# Where the data is

schema_space = "IceCreamFactorySchema"

view = "IceCreamFactoryTimeSeries"



# Get 25 unordered nodes

time_series = client.data_modeling.instances.list(

   instance_type="node",

   sources=ViewId(schema_space, view, "v1"),

)



# make the selection box readable

selection = st.selectbox(

   "Which Time series do you wanna see?",

   time_series,

   format_func=lambda x:x.external_id

)



# All the datapoints for the selected time series

datapoints = client.time_series.data.retrieve_dataframe(

   instance_id=selection.as_id()

)



# Plotly supports stepwise line graphs

fig = go.Figure(

   data=go.Scatter(

       x=datapoints.index,

       y=datapoints[datapoints.columns[0]],

       mode="lines",

       line={"shape": "hv"}

   ),

   layout={

       "title": selection.external_id,

       "xaxis_title": "Timestamp",

   }

)



st.plotly_chart(fig)

We are given the following warning every time we open any Streamlit app. Please make sure to check with the CDF Admin or the author of the app before running it if you are unsure that the app is suitable. 

The data model we are using for this app looks like this:

After running the script, we have our app that visualizes our selected time series from a drop-down menu. 

Here are some helpful links to the documentation used to build this guide.

List all data modeling instances:

https://cognite-sdk-python.readthedocs-hosted.com/en/latest/data_modeling.html#list-instances

Selection box: https://docs.streamlit.io/develop/api-reference/widgets/st.selectbox

Retrieve all datapoints for selected Time series: https://cognite-sdk-python.readthedocs-hosted.com/en/latest/time_series.html#retrieve-datapoints-in-pandas-dataframe

Line graph: https://plotly.com/python-api-reference/generated/plotly.graph_objects.Figure.html

Draw the line graph: https://docs.streamlit.io/develop/api-reference/charts/st.plotly_chart