Beautifying Streamlit Apps

Welcome to Section 2 of the book! In Section 1, Creating Basic Streamlit Applications, we focused on the basics – visualization, deployment, and data munging – all the topics that are crucial to getting started with Streamlit. In this part of the book, the purpose is to explore Streamlit through more complex applications and use cases, with the intent of turning you into an expert Streamlit user.

Throughout this chapter, we’ll work with elements (including sidebars, tabs, columns, and colors) to extend our ability to make beautiful Streamlit applications. Along with this, we’ll explore how to create multi-page applications to manage user flow, creating a cleaner and more structured user experience.

By the end of this chapter, you should feel much more comfortable creating applications that are better than the average Minimum Viable Product (MVP). We’ll start by learning about columns and move on to the rest of...

Technical requirements

This chapter requires a free GitHub account, which can be obtained at https://www.github.com. A full primer on GitHub, along with detailed setup instructions, can be found in the A quick primer on GitHub section in the previous chapter, Chapter 5, Deploying Streamlit with Streamlit Community Cloud.

Setting up the SF Trees dataset

For this chapter, we will be working with the SF Trees dataset again, the same dataset that we used in Chapter 3, Data Visualization. As we did in the previous chapters, we need to follow this list of steps for the setup:

1. Create a new folder for the chapter.
2. Add our data to the folder.
3. Create a Python file for our app.

Let’s see each of these steps in detail.

In our main streamlit_apps folder, run the following code in your terminal to make a new folder cleverly called pretty_trees. You can also create a new folder manually outside the terminal:

mkdir pretty_trees

Now, we need to move our data from Chapter 3, Data Visualization, into our folder for this chapter. The following code copies the data into the correct folder:

cp trees_app/trees.csv pretty_trees

If you do not have the trees_app folder and have not yet completed Chapter 3, Data Visualization, you can also download the necessary...

Using Streamlit tabs

There is a second way to organize your Streamlit app layout that is remarkably similar to the Streamlit column, called the tab. Tabs are useful when you have content that is too wide to break up into columns, even in wide mode, and also are useful when you want to focus attention by only showing one piece of content at a time. For example, if we had three very distinct graphs that only looked good in wide mode, but we didn’t want to put them vertically on top of each other, we could use tabs to selectively show them. Let’s explore exactly how this works!

st.tabs works very similarly to st.columns, but instead of telling Streamlit the number of tabs we want, we instead pass along the names of the tabs and then use now-familiar with statements to place content into the tab. The next bit of code turns the columns from our most recent Streamlit app into tabs:

import pandas as pd
import streamlit as st
 
st.set_page_config(layout="wide"...

Using the Streamlit sidebar

As we have already seen in Streamlit, when we start to both accept large amounts of user input and also start to develop longer Streamlit apps, we often lose the ability for the user to see both their input and the output on the same screen. In other cases, we may want to put all the user input into its own section to clearly separate input and output in our Streamlit app. For both of these use cases, we can use the Streamlit sidebar, which allows us to place a minimizable sidebar on the left side of the Streamlit app and add any Streamlit component to it.

To begin with, we can create a basic example that takes one of the graphs from our preceding app and filters the data behind it based on the user’s input. In this case, we can ask the user to specify the type of tree owner (for example, a private owner or the Department of Public Works) and filter on those conditions using the st.multiselect() function, which allows the user to select multiple...

Picking colors with a color picker

Colors are very difficult to take in as user input in apps. If a user wants red, do they want light red or dark red? Maroon or a pinkish red? Streamlit’s approach to this problem is st.color_picker(), which lets the user pick a color as a part of their user input, and returns that color in a hex string (which is a unique string that defines very specific color shades used by most graphing libraries as input). The following code adds this color picker to our previous app and changes the color of the Seaborn graphs to be based on the color that the user selects:

import pandas as pd
import plotly.express as px
import streamlit as st
st.set_page_config(layout="wide")
st.title("SF Trees")
st.write(
    """
    This app analyses trees in San Francisco using
    a dataset kindly provided by SF DPW. The dataset
    is filtered by the owner of the tree as selected
    in the sidebar!
    """
)...

Multi-page apps

Our Streamlit apps thus far have all been single pages, where all or nearly all the information in the app has been visible to us with a simple scroll. However, Streamlit also has multi-page functionality. Multi-page apps are a powerful tool for creating apps that are not limited to one page of content and can extend the user experience that comes with Streamlit. For example, the Streamlit data team currently primarily builds multi-page apps, having a new app for each project or team that they are creating Streamlit apps for.

For our first multi-page app, we’re going to focus on separating the map section of the trees app from the rest of the graphs in two separate apps. The way Streamlit creates multi-page apps is it looks in the same directory as our Streamlit app for a folder called pages and then runs each Python file inside the pages folder as its own Streamlit app. To do this, create a new folder inside pretty_trees called pages, and then put a file...

Editable DataFrames

So far in this book, we have assumed that we want the data used in these apps to be static. We have used mostly CSV files or programmatically generated datasets that remain unchanged by the users of our apps.

This is very often the case, but we might want to give users the ability to alter or edit the underlying data in a very user-friendly way. To help solve this, Streamlit released st.experimental_data_editor, a way to give users edit ability on top of an st.dataframe-style interface.

There are a massive number of potential apps for editing DataFrames, from using Streamlit as a quality control system to allowing for direct edits to configuration parameters to doing even more of the “what-if” analyses that we have done so far in this book. As a creator of many different apps in a work setting, I have noticed that people are often extremely comfortable with the everpresent spreadsheet and prefer that type of UI.

For this example, let...

Summary

This concludes our adventures with the SF Trees dataset and learning about the various ways to make our Streamlit apps more aesthetically pleasing. We covered separating our apps into columns and page configuration, along with gathering user input in the sidebar, getting specific colors in user input through the st.color_picker() feature, and finally learning how to use Streamlit multi-page apps and the new data editor.

In the next chapter, we will learn about the open source community around Streamlit by understanding how to download and use Streamlit Components built by users.

Learn more on Discord

To join the Discord community for this book – where you can share feedback, ask questions to the author, and learn about new releases – follow the QR code below:

https://packt.link/sl