New to Streamlit - Help with LinkColumn

Using Streamlit
1

Hi,

I am starting with Streamlit and I have a question about LinkColumn feature.
I am trying to create a link using data coming from a MySQL database.
My code is able to make the link appear but I don’t know how to go to a specific target.

# streamlit_app.py

import streamlit as st
import pandas as pd

# Initialize connection.
conn = st.connection('mysql', type='sql')

# Perform query.
# df = conn.query('SELECT * FROM block;', ttl=600)
dfp = pd.DataFrame(conn.query('SELECT * FROM block;', ttl=600))
dfb = pd.DataFrame(conn.query('SELECT name,totalcapacity FROM backup;', ttl=600))
add_sidebar = st.sidebar.selectbox('Select Technology', ('Block', 'Backup'))


if add_sidebar == 'Block':
    st.data_editor(
    dfp,
    width=None,
    height=int((len(dfp.reset_index(drop=True))+1) * 35.5),
    use_container_width=True,
    column_config={
        "array": st.column_config.LinkColumn("Array")
        }
    )
    

if add_sidebar == 'Backup':
    st.write(dfb)

here is an app screenshot.

image
image1453×517 59.8 KB

If I click on any link a new page opens but with this error:

WebSocket connection to ‘ws://localhost:8501/CW3PAR01/_stcore/stream’ failed:

My goal is to have all links landing on the same page (eg. details.html) and that page will query the database again but using the “array name” as parameter.

2

You should create a separate page in advance http://localhost:8501/details Add CW3PAR01/_stcore/stream as a query parameter to the connection, for example http://localhost:8501/details/?Array=CW3PAR01&a=_stcore&b=stream

3

Hey…
Thanks for the answer.

But how do I “point” the link to the details page? I remember with HTML that I can use but I don’t know where in my code should I add this pointer.

Thanks
4

Here’s one option – add a new column that is a link to page2

import streamlit as st
import pandas as pd


# Data for the simplified DataFrame
data = {
    "Array": [
        "CW3PAR01",
        "CW3PAR02",
        "JPN3PAR01",
        "KDC3PAR03",
        "KDC3PAR04",
        "KDC3PAR05",
        "KDC3PAR06",
        "KDCPRIM01",
        "KDCPRIM02",
        "KDCPRIM03",
        "RCH3PAR01",
        "SMH3PAR01",
        "SMHPRIM01",
    ],
    "freespace": [
        48148480,
        61478912,
        14154752,
        42907648,
        38764544,
        90319872,
        84789248,
        89344000,
        95602688,
        98793472,
        56819712,
        69309440,
        85596160,
    ],
}

# Create the DataFrame
df = pd.DataFrame(data)

df["More Details"] = "/page2?array=" + df["Array"]

st.dataframe(
    df,
    column_config={
        "More Details": st.column_config.LinkColumn(display_text="More details")
    },
)

Then on page/page2.py you can do

import streamlit as st

st.write("Array is:", st.query_params["array"])

It will always open in a new tab, unfortunately, but that’s the best way to accomplish what you’re looking for, as far as I know

1 Like