Standard Streamlit Implementation

The following snippet demonstrates the traditional top-down approach used in Streamlit to display key performance indicators and a bar chart for ambulance handover data. The layout is defined by columns, and data is filtered based on a selected hospital.

col1, col2, col3, col4, col5 = st.columns((1,1,1,1,1))

metrics_data = pd.read_excel('DataforMock.xlsx', sheet_name='metrics')
unresolved = metrics_data[(metrics_data['Hospital Attended']==selected_hosp) & (metrics_data['Metric']== 'Total Outstanding')]
avg_time = metrics_data[(metrics_data['Hospital Attended']==selected_hosp) & (metrics_data['Metric']== 'Current Handover Average Mins')]
wasted_hours = metrics_data[(metrics_data['Hospital Attended']==selected_hosp) & (metrics_data['Metric']== 'Hours Lost to Handovers Over 15 Mins')]

col1.write('')
col2.metric(label='Total Outstanding Handovers', value=int(unresolved['Value']), delta=str(int(unresolved['Previous']))+' Compared to 1 hour ago', delta_color='inverse')
col3.metric(label='Current Handover Average', value=str(int(avg_time['Value']))+" Mins", delta=str(int(avg_time['Previous']))+' Compared to 1 hour ago', delta_color='inverse')
col4.metric(label='Time Lost today (Above 15 mins)', value=str(int(wasted_hours['Value']))+" Hours", delta=str(int(wasted_hours['Previous']))+' Compared to yesterday')
col1.write('')

# Hourly Handover Completion Chart
chart_col1, chart_col2, chart_col3 = st.columns((1,1,1))

hourly_df = pd.read_excel('DataforMock.xlsx', sheet_name='Graph')
filtered_df = hourly_df[hourly_df['Hospital Attended']==selected_hosp]

fig = px.bar(filtered_df, x='Arrived Destination Resolved', y='Number of Handovers', template='seaborn')
fig.update_traces(marker_color='#264653')
fig.update_layout(title_text="Number of Completed Handovers by Hour", title_x=0, margin=dict(l=0,r=10,b=10,t=30), yaxis_title=None, xaxis_title=None)

chart_col1.plotly_chart(fig, use_container_width=True)

Adapting to SimpleStart Event-Driven Model

SimpleStart operates on an event-response mechanism. Instead of executing code linearly, seletcing a hospital triggers a specific event function to update the UI components. This requires initializing widgets with placeholders and updating them within the event callback.

def update_dashboard(state=None, value=None):  
    current_hospital = hospital_selector.value
    
    # Load and filter data
    chart_data = pd.read_excel('DataforMock.xlsx', sheet_name='Graph')
    specific_data = chart_data[chart_data['Hospital Attended']==current_hospital]
    
    # Create visualization
    bar_fig = px.bar(specific_data, x='Arrived Destination Resolved', y='Number of Handovers', template='seaborn')
    bar_fig.update_traces(marker_color='#264653')
    bar_fig.update_layout(title_text="Number of Completed Handovers by Hour", title_x=0, margin=dict(l=0,r=10,b=10,t=30), yaxis_title=None, xaxis_title=None)
    
    # Update the chart widget with new data
    handover_chart.update(bar_fig) 

# Initial Setup
hospital_list = pd.read_excel('DataforMock.xlsx', sheet_name='Hospitals')
hospital_selector = ss.selectbox(hospital_list, label='Choose Hospital', help='Filter report to show only one hospital', onchange=update_dashboard)

# Define Layout with Placeholders
col1, col2, col3, col4, col5 = ss.columns((1,1,1,1,1), design=False)

metrics_data = pd.read_excel('DataforMock.xlsx', sheet_name='metrics')

col1.write('')
kpi1 = col2.metric(label="Pending Handovers", value=0, delta=0)
kpi2 = col3.metric() # Placeholder for average time
kpi3 = col4.metric() # Placeholder for lost hours

chart_col1, chart_col2, chart_col3 = ss.columns((1,1,1), design=False)
handover_chart = chart_col1.plotly_chart() # Placeholder for the bar chart
other_chart1 = chart_col2.plotly_chart()
other_chart2 = chart_col3.plotly_chart()

# Initialize view
update_dashboard()

In this refactored version, handover_chart = chart_col1.plotly_chart() creates an empty container. The logic to generate the figure is moved into the update_dashboard function, which is called either on initialization or when the selectbox triggers an onchange event. The .update() method refreshes the content without rerunning the entire script linearly.