layout_expander.qmd

---
title: "Expanders"
filters:
  - whitphx/stlite
---

The expander allows additional information to be hidden away until the user clicks in the relevant spot.

This can be a handy way to keep an app clear and easy-to-use while allowing users the flexibility to dive deeper into the data or find out additional information about the processes.

```{python}
#| eval: false
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

penguins = load_penguins()

fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

st.plotly_chart(fig)

with st.expander("Click here to view the underlying data"): # <1>
    st.dataframe(penguins[['sex', 'species', 'island', 'bill_length_mm', 'bill_depth_mm']]) # <2>

st.write("This is some text that appears after the expander.") # <3>
```

1. We create an expander object, passing in the text that we want to appear to the user when the expander is collapsed.
2. We indent anything we want to appear within that particular expander.
3. Returning to the previous level of indentation will allow you to continue adding things to your page after the expander.

```{stlite-python}
import micropip
await micropip.install("setuptools")
await micropip.install("palmerpenguins")
await micropip.install("plotly")
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

penguins = load_penguins()

fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

st.plotly_chart(fig)

with st.expander("Click here to view the underlying data"):
    st.dataframe(penguins[['sex', 'species', 'island', 'bill_length_mm', 'bill_depth_mm']])

st.write("This is some text that appears after the expander.") # <3>
```


As with many other layout elements, you can write expanders in a different way to achieve the same result.

```{python}
#| eval: false
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

penguins = load_penguins()

fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

st.plotly_chart(fig)

extra_data_expander = st.expander("Click here to view the underlying data") # <1>
extra_data_expander.dataframe(penguins[['sex', 'species', 'island', 'bill_length_mm', 'bill_depth_mm']]) # <2>

st.write("This is some text that appears after the expander.") # <3>

extra_data_expander.write("This is some additional text I'm later adding in to the expander") # <4>
```

1. Here, instead of using the 'with' notation, we have saved the output of our `st.expander` to a variable.
2. Then, instead of using `st.dataframe`, we replace `st.` with the name of the variable we just created
3. When we want to return to adding something to the main body of the app, we revert to using `st.`
4. One benefit of using this notation instead of the 'with' notation is that we can later add additional things into the expander, even if we have done other actions first.

```{stlite-python}
import micropip
await micropip.install("setuptools")
await micropip.install("palmerpenguins")
await micropip.install("plotly")
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

penguins = load_penguins()

fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

st.plotly_chart(fig)

extra_data_expander = st.expander("Click here to view the underlying data")
extra_data_expander.dataframe(penguins[['sex', 'species', 'island', 'bill_length_mm', 'bill_depth_mm']])

st.write("This is some text that appears after the expander.") # <3>

extra_data_expander.write("This is some additional text I'm later adding in to the expander") # <4>

```


## Nesting expanders in other layout elements

Expanders can sit within other layout elements.

```{python}
#| eval: false
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

tab1, tab2 = st.tabs(["Penguin Graphs", "Penguin Facts"])

penguins = load_penguins()

with tab1:

    col1, col2 = st.columns(2)

    with col1:
        fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
        title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

        st.plotly_chart(fig)

        with st.expander("Click here to see the code for the graph"):
            st.code(
              """
              fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
                    title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")
              """
            )

    with col2:
        fig = px.scatter(penguins, x='flipper_length_mm', y='body_mass_g', color="species",
                    title=f"Penguins Dataset - Flipper Length (mm) vs Body Weight(g), coloured by Species")

        st.plotly_chart(fig)

        with st.expander("Click here to see the code for the graph"):
            st.code(
              """
              fig = px.scatter(penguins, x='flipper_length_mm', y='body_mass_g', color="species",
                    title=f"Penguins Dataset - Flipper Length (mm) vs Body Weight(g), coloured by Species")
              """
            )

    with st.expander("Click here to see the underlying data"):
        st.dataframe(penguins)

with tab2:
    st.header("Penguin Facts")
    st.subheader("Gentoo Penguins")

    st.write(
      """
      The gentoo penguin (JEN-too) (Pygoscelis papua) is a penguin species (or possibly a species complex) in the genus Pygoscelis, most closely related to the Adélie penguin (P. adeliae) and the chinstrap penguin (P. antarcticus). The earliest scientific description was made in 1781 by Johann Reinhold Forster with a type locality in the Falkland Islands. The species calls in a variety of ways, but the most frequently heard is a loud trumpeting, which the bird emits with its head thrown back.
      """
    )

    expander_video = st.expander("Click here to watch a penguin video")
    expander_video.video("https://www.youtube.com/watch?v=nFAK8Vj62WM")
```


```{stlite-python}
import micropip
await micropip.install("setuptools")
await micropip.install("palmerpenguins")
await micropip.install("plotly")
import streamlit as st
from palmerpenguins import load_penguins
import plotly.express as px

tab1, tab2 = st.tabs(["Penguin Graphs", "Penguin Facts"])

penguins = load_penguins()

with tab1:

    col1, col2 = st.columns(2)

    with col1:
        fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
        title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")

        st.plotly_chart(fig)

        with st.expander("Click here to see the code for the graph"):
            st.code(
              """
              fig = px.scatter(penguins, x='bill_length_mm', y='bill_depth_mm', color="sex",
                    title=f"Penguins Dataset - Bill Length (mm) vs Bill Depth (mm), coloured by Sex")
              """
            )

    with col2:
        fig = px.scatter(penguins, x='flipper_length_mm', y='body_mass_g', color="species",
                    title=f"Penguins Dataset - Flipper Length (mm) vs Body Weight(g), coloured by Species")

        st.plotly_chart(fig)

        with st.expander("Click here to see the code for the graph"):
            st.code(
              """
              fig = px.scatter(penguins, x='flipper_length_mm', y='body_mass_g', color="species",
                    title=f"Penguins Dataset - Flipper Length (mm) vs Body Weight(g), coloured by Species")
              """
            )

    with st.expander("Click here to see the underlying data"):
        st.dataframe(penguins)

with tab2:
    st.header("Penguin Facts")
    st.subheader("Gentoo Penguins")

    st.write(
      """
      The gentoo penguin (JEN-too) (Pygoscelis papua) is a penguin species (or possibly a species complex) in the genus Pygoscelis, most closely related to the Adélie penguin (P. adeliae) and the chinstrap penguin (P. antarcticus). The earliest scientific description was made in 1781 by Johann Reinhold Forster with a type locality in the Falkland Islands. The species calls in a variety of ways, but the most frequently heard is a loud trumpeting, which the bird emits with its head thrown back.
      """
    )

    expander_video = st.expander("Click here to watch a penguin video")
    expander_video.video("https://www.youtube.com/watch?v=nFAK8Vj62WM")
```