Unable to clear or delete columns from 'beta_columns'

Custom Components
1

I’m trying to do a live interactive scorer of NBA games, but I’m having troubles at updating this scorer. To set this scorer I use the beta_columns component the way you can see in this function:

# Dado unos datos necesarios, muestra un cabecero de página con la información relevante sobre un encuentro de la NBA en directo
def show_live_match_header(home_score, away_score, home_team, away_team, date, hour, quarter, minutes_left):

	# Definimos 5 columnas para mostrar el resultado actual del partido en cada instante
	col1, col2, col3, col4, col5 = st.beta_columns([4, 3, 4, 3, 4])

	quarter_ending = "er"
	if quarter == 2:
		quarter_ending = "do"
	elif quarter == 1 or quarter == 3:
		quarter_ending = "er"
	elif quarter == 4:
		quarter_ending = "to"


	# Añadimos objetos a la primera columna relacionados con el equipo local
	with col1:
		st.markdown('<center><img src=' + TEAM_ICONS_DICT[home_team] + '></center>', unsafe_allow_html=True)
		st.markdown("<h3 style='text-align: center; color: black;'><b>" + home_team + "</b></h3>", unsafe_allow_html=True)
		st.markdown("<h5 style='text-align: center; color: gray;'> (Local) </h5>", unsafe_allow_html=True)

	# Añadimos objetos a la segunda columna relacionados con la puntuación del equipo local en este instante
	with col2:
		st.write("")
		st.write("")
		st.write("")
		if home_score == -1 or away_score == -1:
			st.markdown("<h1 style='text-align: center; color: black;'><b>" + "-" + "</b></h1>", unsafe_allow_html=True)
		else:
			st.markdown("<h1 style='text-align: center; color: black;'><b>" + str(home_score) + "</b></h1>", unsafe_allow_html=True)
		st.write("")
		st.write("")
		st.write("")

	# Añadimos objetos a la tercera columna relacionados con información del partido como el minuto en el que está en este mismo instante
	with col3:
		st.write("")
		st.write("")
		st.write("")
		if home_score == -1 or away_score == -1:
			st.markdown("<h3 style='text-align: center; color: red;'><b>" + "El partido no ha comenzado aún" + "</b></h3>", unsafe_allow_html=True)
			st.markdown("<h5 style='text-align: center; color: grey;'> Hora del comienzo del partido: " + hour + " </h5>", unsafe_allow_html=True)
			st.markdown("<h5 style='text-align: center; color: grey;'> (" + date + ") </h5>", unsafe_allow_html=True)
		else:
			st.markdown("<h3 style='text-align: center; color: red;'><b> " + str(quarter) + quarter_ending + " Cuarto   " + str(minutes_left) + "' </b></h3>", unsafe_allow_html=True)
			st.markdown("<h5 style='text-align: center; color: grey;'> (" + date + ", " + hour + ") </h5>", unsafe_allow_html=True)
		st.write("")
		st.write("")

	# Añadimos objetos a la cuarta columna relacionados con la puntuación del equipo visitante en este instante
	with col4:
		st.write("")
		st.write("")
		st.write("")
		if home_score == -1 or away_score == -1:
			st.markdown("<h1 style='text-align: center; color: black;'><b>" + "-" + "</b></h1>", unsafe_allow_html=True)
		else:
			st.markdown("<h1 style='text-align: center; color: black;'><b>" + str(away_score) + "</b></h1>", unsafe_allow_html=True)
		st.write("")
		st.write("")
		st.write("")

	# Añadimos objetos a la primera columna relacionados con el equipo local
	with col5:
		st.markdown('<center><img src=' + TEAM_ICONS_DICT[away_team] + '></center>', unsafe_allow_html=True)
		st.markdown("<h3 style='text-align: center; color: black;'><b>" + away_team + "</b></h3>", unsafe_allow_html=True)
		st.markdown("<h5 style='text-align: center; color: gray;'> (Visitante) </h5>", unsafe_allow_html=True)

	col5 = st.empty()

	return [col1, col2, col3, col4, col5]

This way I obtain this results:

Example of using the method once
Example of using the method once1918×1004 75.2 KB

The problem comes when I try to remove the beta_columns returned in order to set new ones with each score updated. I tried to do this by this example code:

	# Definimos las estructuras que se mostrarán en la interfaz
	session_state.counter = -1
	match_header = None

	while session_state.counter < 5:
		if match_header is not None:
			for col in match_header:
				col.empty()

		home_score = away_score = session_state.counter
		match_header = show_live_match_header(home_score, away_score, session_state.home_team, session_state.away_team, session_state.date, session_state.hour, 1, 10)
		session_state.counter = session_state.counter + 1
		sleep(1)

Obtaining this awful result:

Awful Result :(
Awful Result :(1918×1006 151 KB

I tried a lot of things, but I can’t delete the previous columns before setting the new ones. Is there another way to do this update or a chance of deleting the previous columns?

1 Like
2

Hi @Agustin_6199 ,
Do you solve this problem? because I have the same one

Tanks a lot

3

Do you solve this problem? because I have the same one

Tanks a lot

1 Like
4

Hi @cjl , and welcome to the Streamlit community! :balloon::raised_hands:

Have you tried with:

import time

for seconds in range(60):

    with placeholder.container():

        kpi1, kpi2 = st.columns(2)

        kpi1.write(f"Hourglass with flowing sand {seconds} seconds have passed")

        kpi2.write(f"Hourglass with flowing sand {seconds * 2} seconds have passed")

        time.sleep(1)

    placeholder.empty()
5

Thanks! But what is placeholder?

6

Placeholder usually means something as:

placeholder = st.empty()

The docs about st.empty().