Summary
My app has a form that allows users to select a variety of options and then click ‘submit’ to see two plotly charts based on their selections. I’m using plotly.express.line for these charts and for some reason when a user switches their selections on the form and reloads the page a pair of ‘phantom’ line artifacts from the previous set of charts persists on the new set.
Steps to reproduce
Code snippet:
import os
import pandas as pd
import streamlit as st
import plotly.express as px
dir_path = os.getcwd()
csv_path = os.path.join(dir_path, 'streamlit/signing_times/data/signing_data.csv')
source_data = pd.read_csv(csv_path)
test_strategies = source_data['Test Strategy'].dropna().unique().tolist()
devices = source_data['Model Name'].dropna().unique().tolist()
device_colors = {
'Model One': '#00cc00',
'Model T': '#006600',
'Nano S': '#99ccff',
'Nano X': '#0099ff',
'Nano S+': '#0000ff',
'Mk3': '#ff6666',
'Mk4': '#cc0000'
}
def makeFig(test_strategy, model_names, x_ax_metric, y_data, title):
filtered_data = source_data.loc[
source_data['Test Strategy'].isin([test_strategy])
& source_data['Model Name'].isin(model_names)]
ticks = filtered_data[x_ax_metric].dropna().unique().tolist()
x_min = min(ticks)
x_max = max(ticks)
fig = px.line(
filtered_data,
x=x_ax_metric,
y=y_data,
markers=True,
line_shape='spline',
color='Model Name',
color_discrete_map=device_colors,
)
fig.update_xaxes(
range=[x_min * .5, x_max * 1.05],
tickvals=ticks
)
fig.update_traces(connectgaps=False)
fig.update_layout(
autosize=True,
title={
'text' : title,
'xanchor': 'center'
}
)
return fig
with st.form(key='viz_settings'):
test_strategy = st.selectbox("Test Strategy:", test_strategies, index=0)
model_names = st.multiselect("Model Names:", devices, default=devices)
x_ax_metric = st.selectbox("X-Axis Metric", ['UTXOs', 'Unsigned PSBT (kB)'], index=0)
submit_button = st.form_submit_button()
if submit_button:
if model_names:
pre_fig = makeFig(
test_strategy,
model_names,
x_ax_metric,
y_data='Pre-Confirmation Duration (minutes)',
title='Pre-Confirmation Duration'
)
st.plotly_chart(pre_fig, use_container_width=True, sharing='streamlit')
post_fig = makeFig(
test_strategy,
model_names,
x_ax_metric,
y_data='Post-Confirmation Duration (minutes)',
title='Post-Confirmation Duration'
)
st.plotly_chart(post_fig, use_container_width=True, sharing='streamlit')
else: st.write("Error: Select at least one value for 'Model Names'")
If applicable, please provide the steps we should take to reproduce the error or specified behavior.
- Go to my app using the link
- Click ‘Submit’ immediately with the default options
- Select ‘F2Pool…’ as ‘Test Strategy’
- Click ‘Submit’ again
- Note the phantom lines that show up from the previous chart
Debug info
- Streamlit version: Streamlit, version 1.17.0
- Python version: Python 3.9.16
- Using: PipEnv
- OS version: MacOS
- Browser version: Brave
Requirements file
Pipfile contents:
[[source]]
url = “Simple index”
verify_ssl = true
name = “pypi”
[packages]
streamlit = “*”
pandas = “*”
plotly = “*”
watchdog = “*”
[dev-packages]
[requires]
python_version = “3.9”
Links
- Link to your deployed app: https://bitcoin-device-signing-times.streamlit.app/