Refactor UI layout and add custom tab styling in app.py

Simplified the tab layout by removing unnecessary column divisions and introducing an expandable section for filters. Added custom CSS styling for tabs to improve visual appearance and user experience.

app.py

@@ -26,6 +26,37 @@ db = init_conn()
 player_roo_format = {'Top_finish': '{:.2%}','Top_5_finish': '{:.2%}', 'Top_10_finish': '{:.2%}', '20+%': '{:.2%}', '2x%': '{:.2%}', '3x%': '{:.2%}',
                    '4x%': '{:.2%}'}
 
+st.markdown("""
+<style>
+    /* Tab styling */
+    .stTabs [data-baseweb="tab-list"] {
+        gap: 8px;
+        padding: 4px;
+    }
+
+    .stTabs [data-baseweb="tab"] {
+        height: 50px;
+        white-space: pre-wrap;
+        background-color: #FFD700;
+        color: white;
+        border-radius: 10px;
+        gap: 1px;
+        padding: 10px 20px;
+        font-weight: bold;
+        transition: all 0.3s ease;
+    }
+
+    .stTabs [aria-selected="true"] {
+        background-color: #DAA520;
+        color: white;
+    }
+
+    .stTabs [data-baseweb="tab"]:hover {
+        background-color: #DAA520;
+        cursor: pointer;
+    }
+</style>""", unsafe_allow_html=True)
+
 @st.cache_resource(ttl=200)
 def player_stat_table():
     collection = db["Player_Level_ROO"] 
@@ -58,13 +89,12 @@ t_stamp = f"Last Update: " + str(timestamp) + f" CST"
 tab1, tab2, tab3 = st.tabs(["Player Range of Outcomes", "Line Combo Range of Outcomes", "Power Play Range of Outcomes"])
 
 with tab1:
-    col1, col2 = st.columns([1, 7])
-    with col1:
+    with st.expander("Info and Filters"):
         st.info(t_stamp)
         if st.button("Load/Reset Data", key='reset1'):
-              st.cache_data.clear()
-              player_frame, line_frame, pp_frame, timestamp = player_stat_table()
-              t_stamp = f"Last Update: " + str(timestamp) + f" CST"
+            st.cache_data.clear()
+            player_frame, line_frame, pp_frame, timestamp = player_stat_table()
+            t_stamp = f"Last Update: " + str(timestamp) + f" CST"
         site_var1 = st.radio("What table would you like to display?", ('Draftkings', 'Fanduel'), key='site_var1')
         main_var1 = st.radio("Main slate or secondary slate?", ('Main Slate', 'Secondary Slate'), key='main_var1')
         split_var1 = st.radio("Would you like to view the whole slate or just specific games?", ('Full Slate Run', 'Specific Games'), key='split_var1')
@@ -78,30 +108,28 @@ with tab1:
         elif pos_split1 == 'All Positions':
             pos_var1 = 'All'
         sal_var1 = st.slider("Is there a certain price range you want to view?", 2000, 10000, (2000, 20000), key='sal_var1')
-    
-    with col2:
-        final_Proj = player_frame[player_frame['Site'] == str(site_var1)]
-        final_Proj = final_Proj[final_Proj['Type'] == 'Basic']
-        final_Proj = final_Proj[final_Proj['Slate'] == main_var1]
-        final_Proj = final_Proj[player_frame['Team'].isin(team_var1)]
-        final_Proj = final_Proj[final_Proj['Salary'] >= sal_var1[0]]
-        final_Proj = final_Proj[final_Proj['Salary'] <= sal_var1[1]]
-        if pos_var1 != 'All':
-               final_Proj = final_Proj[final_Proj['Position'].str.contains('|'.join(pos_var1))]
-               final_Proj = final_Proj.sort_values(by='Median', ascending=False)
-        if pos_var1 == 'All':
-               final_Proj = final_Proj.sort_values(by='Median', ascending=False)
-        st.dataframe(final_Proj.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(player_roo_format, precision=2), use_container_width = True)
-        st.download_button(
-              label="Export Tables",
-              data=convert_df_to_csv(final_Proj),
-              file_name='NHL_player_export.csv',
-              mime='text/csv',
-        )
+
+    final_Proj = player_frame[player_frame['Site'] == str(site_var1)]
+    final_Proj = final_Proj[final_Proj['Type'] == 'Basic']
+    final_Proj = final_Proj[final_Proj['Slate'] == main_var1]
+    final_Proj = final_Proj[player_frame['Team'].isin(team_var1)]
+    final_Proj = final_Proj[final_Proj['Salary'] >= sal_var1[0]]
+    final_Proj = final_Proj[final_Proj['Salary'] <= sal_var1[1]]
+    if pos_var1 != 'All':
+            final_Proj = final_Proj[final_Proj['Position'].str.contains('|'.join(pos_var1))]
+            final_Proj = final_Proj.sort_values(by='Median', ascending=False)
+    if pos_var1 == 'All':
+            final_Proj = final_Proj.sort_values(by='Median', ascending=False)
+    st.dataframe(final_Proj.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(player_roo_format, precision=2), use_container_width = True)
+    st.download_button(
+            label="Export Tables",
+            data=convert_df_to_csv(final_Proj),
+            file_name='NHL_player_export.csv',
+            mime='text/csv',
+    )
 
 with tab2:
-    col1, col2 = st.columns([1, 7])
-    with col1:
+    with st.expander("Info and Filters"):
         st.info(t_stamp)
         if st.button("Load/Reset Data", key='reset2'):
               st.cache_data.clear()
@@ -110,26 +138,24 @@ with tab2:
         site_var2 = st.radio("What table would you like to display?", ('Draftkings', 'Fanduel'), key='site_var2')
         main_var2 = st.radio("Main slate or secondary slate?", ('Main Slate', 'Secondary Slate'), key='main_var2')
         sal_var2 = st.slider("Is there a certain price range you want to view?", 5000, 40000, (5000, 40000), key='sal_var2')
-    
-    with col2:
-        final_line_combos = line_frame[line_frame['Site'] == str(site_var2)]
-        final_line_combos = final_line_combos[final_line_combos['Type'] == 'Basic']
-        final_line_combos = final_line_combos[final_line_combos['Slate'] == main_var2]
-        final_line_combos = final_line_combos[final_line_combos['Salary'] >= sal_var2[0]]
-        final_line_combos = final_line_combos[final_line_combos['Salary'] <= sal_var2[1]]
-        final_line_combos = final_line_combos.drop_duplicates(subset=['Player'])
-        final_line_combos = final_line_combos.sort_values(by='Median', ascending=False)
-        st.dataframe(final_line_combos.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), use_container_width = True)
-        st.download_button(
-              label="Export Tables",
-              data=convert_df_to_csv(final_line_combos),
-              file_name='NHL_linecombos_export.csv',
-              mime='text/csv',
-        )
+
+    final_line_combos = line_frame[line_frame['Site'] == str(site_var2)]
+    final_line_combos = final_line_combos[final_line_combos['Type'] == 'Basic']
+    final_line_combos = final_line_combos[final_line_combos['Slate'] == main_var2]
+    final_line_combos = final_line_combos[final_line_combos['Salary'] >= sal_var2[0]]
+    final_line_combos = final_line_combos[final_line_combos['Salary'] <= sal_var2[1]]
+    final_line_combos = final_line_combos.drop_duplicates(subset=['Player'])
+    final_line_combos = final_line_combos.sort_values(by='Median', ascending=False)
+    st.dataframe(final_line_combos.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), use_container_width = True)
+    st.download_button(
+            label="Export Tables",
+            data=convert_df_to_csv(final_line_combos),
+            file_name='NHL_linecombos_export.csv',
+            mime='text/csv',
+    )
 
 with tab3:
-    col1, col2 = st.columns([1, 7])
-    with col1:
+    with st.expander("Info and Filters"):
         st.info(t_stamp)
         if st.button("Load/Reset Data", key='reset3'):
               st.cache_data.clear()
@@ -139,18 +165,17 @@ with tab3:
         main_var3 = st.radio("Main slate or secondary slate?", ('Main Slate', 'Secondary Slate'), key='main_var3')
         sal_var3 = st.slider("Is there a certain price range you want to view?", 5000, 40000, (5000, 40000), key='sal_var3')
     
-    with col2:
-        final_pp_combos = pp_frame[pp_frame['Site'] == str(site_var3)]
-        final_pp_combos = final_pp_combos[final_pp_combos['Type'] == 'Basic']
-        final_pp_combos = final_pp_combos[final_pp_combos['Slate'] == main_var3]
-        final_pp_combos = final_pp_combos[final_pp_combos['Salary'] >= sal_var3[0]]
-        final_pp_combos = final_pp_combos[final_pp_combos['Salary'] <= sal_var3[1]]
-        final_pp_combos = final_pp_combos.drop_duplicates(subset=['Player'])
-        final_pp_combos = final_pp_combos.sort_values(by='Median', ascending=False)
-        st.dataframe(final_pp_combos.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), use_container_width = True)
-        st.download_button(
-              label="Export Tables",
-              data=convert_df_to_csv(final_pp_combos),
-              file_name='NHL_powerplay_export.csv',
-              mime='text/csv',
-        )
+    final_pp_combos = pp_frame[pp_frame['Site'] == str(site_var3)]
+    final_pp_combos = final_pp_combos[final_pp_combos['Type'] == 'Basic']
+    final_pp_combos = final_pp_combos[final_pp_combos['Slate'] == main_var3]
+    final_pp_combos = final_pp_combos[final_pp_combos['Salary'] >= sal_var3[0]]
+    final_pp_combos = final_pp_combos[final_pp_combos['Salary'] <= sal_var3[1]]
+    final_pp_combos = final_pp_combos.drop_duplicates(subset=['Player'])
+    final_pp_combos = final_pp_combos.sort_values(by='Median', ascending=False)
+    st.dataframe(final_pp_combos.iloc[:, :-3].style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), use_container_width = True)
+    st.download_button(
+            label="Export Tables",
+            data=convert_df_to_csv(final_pp_combos),
+            file_name='NHL_powerplay_export.csv',
+            mime='text/csv',
+    )