Refactor UI layout and add custom tab styling

- Implement custom CSS for Streamlit tabs with improved visual design
- Reorganize tab1 and tab2 layouts using expanders and containers
- Enhance user interface with more structured and responsive elements
- Improve data display and interaction in both tabs

app.py

@@ -29,6 +29,37 @@ player_roo_format = {'Top_finish': '{:.2%}','Top_5_finish': '{:.2%}', 'Top_10_fi
 dk_columns = ['FLEX1', 'FLEX2', 'FLEX3', 'FLEX4', 'FLEX5', 'FLEX6', 'salary', 'proj', 'Own']
 fd_columns = ['FLEX1', 'FLEX2', 'FLEX3', 'FLEX4', 'FLEX5', 'FLEX6', 'salary', 'proj', 'Own']
 
+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 = 60)
 def init_baselines():
     collection = db["PGA_Range_of_Outcomes"] 
@@ -120,30 +151,31 @@ salaryCut = 0
 tab1, tab2 = st.tabs(["Player Overall Projections", "Optimals and Exposures"])
 
 with tab1:
-    if st.button("Reset Data", key='reset1'):
-            # Clear values from *all* all in-memory and on-disk data caches:
-            # i.e. clear values from both square and cube
-            st.cache_data.clear()
-            roo_data, sd_roo_data, timestamp = init_baselines()
-            dk_lineups = init_DK_lineups('Regular')
-            fd_lineups = init_FD_lineups('Regular')
-            hold_display = roo_data
-            for key in st.session_state.keys():
-                del st.session_state[key]
+    with st.expander("Info and Filters"):
+        if st.button("Reset Data", key='reset1'):
+                # Clear values from *all* all in-memory and on-disk data caches:
+                # i.e. clear values from both square and cube
+                st.cache_data.clear()
+                roo_data, sd_roo_data, timestamp = init_baselines()
+                dk_lineups = init_DK_lineups('Regular')
+                fd_lineups = init_FD_lineups('Regular')
+                hold_display = roo_data
+                for key in st.session_state.keys():
+                    del st.session_state[key]
 
-    st.write(timestamp)
-    info_container = st.empty()
-    options_container = st.empty()
-    hold_container = st.empty()
+        st.write(timestamp)
+        info_container = st.empty()
+        options_container = st.empty()
+        hold_container = st.empty()
 
-    with options_container:
-        col1, col2, col3 = st.columns(3)
-        with col1:
-            view_var = st.radio("Select a View", ["Simple", "Advanced"])
-        with col2:
-            site_var = st.radio("Select a Site", ["Draftkings", "FanDuel"])
-        with col3:
-            type_var = st.radio("Select a Type", ["Full Slate", "Showdown"])
+        with options_container:
+            col1, col2, col3 = st.columns(3)
+            with col1:
+                view_var = st.radio("Select a View", ["Simple", "Advanced"])
+            with col2:
+                site_var = st.radio("Select a Site", ["Draftkings", "FanDuel"])
+            with col3:
+                type_var = st.radio("Select a Type", ["Full Slate", "Showdown"])
     with hold_container:
         if type_var == "Full Slate":
             display = hold_display[hold_display['Site'] == site_var]
@@ -173,8 +205,7 @@ with tab1:
     )
 
 with tab2:
-    col1, col2 = st.columns([1, 7])
-    with col1:
+    with st.expander("Info and Filters"):
         if st.button("Load/Reset Data", key='reset2'):
             st.cache_data.clear()
             roo_data, sd_roo_data, timestamp = init_baselines()
@@ -253,196 +284,195 @@ with tab2:
                 file_name='NBA_optimals_export.csv',
                 mime='text/csv',
             )
-    with col2:
         
-        if site_var1 == 'Draftkings':
-            if 'working_seed' in st.session_state:
-                st.session_state.working_seed = st.session_state.working_seed
-                if player_var1 == 'Specific Players':
-                    st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
-                elif player_var1 == 'Full Slate':
-                    st.session_state.working_seed = dk_lineups.copy()
-                st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
-            elif 'working_seed' not in st.session_state:
+    if site_var1 == 'Draftkings':
+        if 'working_seed' in st.session_state:
+            st.session_state.working_seed = st.session_state.working_seed
+            if player_var1 == 'Specific Players':
+                st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
+            elif player_var1 == 'Full Slate':
                 st.session_state.working_seed = dk_lineups.copy()
-                st.session_state.working_seed = st.session_state.working_seed
-                if player_var1 == 'Specific Players':
-                    st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
-                elif player_var1 == 'Full Slate':
-                    st.session_state.working_seed = dk_lineups.copy()
-                st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+            st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+        elif 'working_seed' not in st.session_state:
+            st.session_state.working_seed = dk_lineups.copy()
+            st.session_state.working_seed = st.session_state.working_seed
+            if player_var1 == 'Specific Players':
+                st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
+            elif player_var1 == 'Full Slate':
+                st.session_state.working_seed = dk_lineups.copy()
+            st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+        
+    elif site_var1 == 'Fanduel':
+        if 'working_seed' in st.session_state:
+            st.session_state.working_seed = st.session_state.working_seed
+            if player_var1 == 'Specific Players':
+                st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
+            elif player_var1 == 'Full Slate':
+                st.session_state.working_seed = fd_lineups.copy()
+            st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+        elif 'working_seed' not in st.session_state:
+            st.session_state.working_seed = fd_lineups.copy()
+            st.session_state.working_seed = st.session_state.working_seed
+            if player_var1 == 'Specific Players':
+                st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
+            elif player_var1 == 'Full Slate':
+                st.session_state.working_seed = fd_lineups.copy()
+            st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+
+    export_file = st.session_state.data_export_display.copy()
+    # if site_var1 == 'Draftkings':
+    #     for col_idx in range(6):
+    #         export_file.iloc[:, col_idx] = export_file.iloc[:, col_idx].map(id_dict)
+    # elif site_var1 == 'Fanduel':
+    #     for col_idx in range(6):
+    #         export_file.iloc[:, col_idx] = export_file.iloc[:, col_idx].map(id_dict)
             
-        elif site_var1 == 'Fanduel':
-            if 'working_seed' in st.session_state:
-                st.session_state.working_seed = st.session_state.working_seed
-                if player_var1 == 'Specific Players':
-                    st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
-                elif player_var1 == 'Full Slate':
-                    st.session_state.working_seed = fd_lineups.copy()
-                st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
-            elif 'working_seed' not in st.session_state:
+    with st.container():
+        if st.button("Reset Optimals", key='reset3'):
+            for key in st.session_state.keys():
+                del st.session_state[key]
+            if site_var1 == 'Draftkings':
+                st.session_state.working_seed = dk_lineups.copy()
+            elif site_var1 == 'Fanduel':
                 st.session_state.working_seed = fd_lineups.copy()
-                st.session_state.working_seed = st.session_state.working_seed
-                if player_var1 == 'Specific Players':
-                    st.session_state.working_seed = st.session_state.working_seed[np.equal.outer(st.session_state.working_seed, player_var2).any(axis=1).all(axis=1)]
-                elif player_var1 == 'Full Slate':
-                    st.session_state.working_seed = fd_lineups.copy()
-                st.session_state.data_export_display = pd.DataFrame(st.session_state.working_seed[0:lineup_num_var], columns=column_names)
+        if 'data_export_display' in st.session_state:
+            st.dataframe(st.session_state.data_export_display.style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), height=500, use_container_width = True)
+        st.download_button(
+            label="Export display optimals",
+            data=convert_df(export_file),
+            file_name='NBA_display_optimals.csv',
+            mime='text/csv',
+        )
+    
+    with st.container():
+        if 'working_seed' in st.session_state:
+            # Create a new dataframe with summary statistics
+            if site_var1 == 'Draftkings':
+                summary_df = pd.DataFrame({
+                    'Metric': ['Min', 'Average', 'Max', 'STDdev'],
+                    'Salary': [
+                        np.min(st.session_state.working_seed[:,6]),
+                        np.mean(st.session_state.working_seed[:,6]),
+                        np.max(st.session_state.working_seed[:,6]),
+                        np.std(st.session_state.working_seed[:,6])
+                    ],
+                    'Proj': [
+                        np.min(st.session_state.working_seed[:,7]),
+                        np.mean(st.session_state.working_seed[:,7]),
+                        np.max(st.session_state.working_seed[:,7]),
+                        np.std(st.session_state.working_seed[:,7])
+                    ],
+                    'Own': [
+                        np.min(st.session_state.working_seed[:,8]),
+                        np.mean(st.session_state.working_seed[:,8]),
+                        np.max(st.session_state.working_seed[:,8]),
+                        np.std(st.session_state.working_seed[:,8])
+                    ]
+                })
+            elif site_var1 == 'Fanduel':
+                summary_df = pd.DataFrame({
+                    'Metric': ['Min', 'Average', 'Max', 'STDdev'],
+                    'Salary': [
+                        np.min(st.session_state.working_seed[:,6]),
+                        np.mean(st.session_state.working_seed[:,6]),
+                        np.max(st.session_state.working_seed[:,6]),
+                        np.std(st.session_state.working_seed[:,6])
+                    ],
+                    'Proj': [
+                        np.min(st.session_state.working_seed[:,7]),
+                        np.mean(st.session_state.working_seed[:,7]),
+                        np.max(st.session_state.working_seed[:,7]),
+                        np.std(st.session_state.working_seed[:,7])
+                    ],
+                    'Own': [
+                        np.min(st.session_state.working_seed[:,8]),
+                        np.mean(st.session_state.working_seed[:,8]),
+                        np.max(st.session_state.working_seed[:,8]),
+                        np.std(st.session_state.working_seed[:,8])
+                    ]
+                })
 
-        export_file = st.session_state.data_export_display.copy()
-        # if site_var1 == 'Draftkings':
-        #     for col_idx in range(6):
-        #         export_file.iloc[:, col_idx] = export_file.iloc[:, col_idx].map(id_dict)
-        # elif site_var1 == 'Fanduel':
-        #     for col_idx in range(6):
-        #         export_file.iloc[:, col_idx] = export_file.iloc[:, col_idx].map(id_dict)
-                
-        with st.container():
-            if st.button("Reset Optimals", key='reset3'):
-                for key in st.session_state.keys():
-                    del st.session_state[key]
+            # Set the index of the summary dataframe as the "Metric" column
+            summary_df = summary_df.set_index('Metric')
+
+            # Display the summary dataframe
+            st.subheader("Optimal Statistics")
+            st.dataframe(summary_df.style.format({
+                'Salary': '{:.2f}',
+                'Proj': '{:.2f}',
+                'Own': '{:.2f}'
+            }).background_gradient(cmap='RdYlGn', axis=0, subset=['Salary', 'Proj', 'Own']), use_container_width=True)
+
+    with st.container():
+        tab1, tab2 = st.tabs(["Display Frequency", "Seed Frame Frequency"])
+        with tab1:
+            if 'data_export_display' in st.session_state:
                 if site_var1 == 'Draftkings':
-                    st.session_state.working_seed = dk_lineups.copy()
+                    player_columns = st.session_state.data_export_display.iloc[:, :6]
                 elif site_var1 == 'Fanduel':
-                    st.session_state.working_seed = fd_lineups.copy()
-            if 'data_export_display' in st.session_state:
-                st.dataframe(st.session_state.data_export_display.style.background_gradient(axis=0).background_gradient(cmap='RdYlGn').format(precision=2), height=500, use_container_width = True)
-            st.download_button(
-                label="Export display optimals",
-                data=convert_df(export_file),
-                file_name='NBA_display_optimals.csv',
-                mime='text/csv',
-            )
-        
-        with st.container():
+                    player_columns = st.session_state.data_export_display.iloc[:, :6]
+                
+                # Flatten the DataFrame and count unique values
+                value_counts = player_columns.values.flatten().tolist()
+                value_counts = pd.Series(value_counts).value_counts()
+                
+                percentages = (value_counts / lineup_num_var * 100).round(2)
+                
+                # Create a DataFrame with the results
+                summary_df = pd.DataFrame({
+                    'Player': value_counts.index,
+                    'Frequency': value_counts.values,
+                    'Percentage': percentages.values
+                })
+                
+                # Sort by frequency in descending order
+                summary_df['Salary'] = summary_df['Player'].map(player_salaries)
+                summary_df = summary_df[['Player', 'Salary', 'Frequency', 'Percentage']]
+                summary_df = summary_df.sort_values('Frequency', ascending=False)
+                summary_df = summary_df.set_index('Player')
+                
+                # Display the table
+                st.write("Player Frequency Table:")
+                st.dataframe(summary_df.style.format({'Percentage': '{:.2f}%'}), height=500, use_container_width=True)
+            
+                st.download_button(
+                    label="Export player frequency",
+                    data=convert_df_to_csv(summary_df),
+                    file_name='PGA_player_frequency.csv',
+                    mime='text/csv',
+                )
+        with tab2:
             if 'working_seed' in st.session_state:
-                # Create a new dataframe with summary statistics
                 if site_var1 == 'Draftkings':
-                    summary_df = pd.DataFrame({
-                        'Metric': ['Min', 'Average', 'Max', 'STDdev'],
-                        'Salary': [
-                            np.min(st.session_state.working_seed[:,6]),
-                            np.mean(st.session_state.working_seed[:,6]),
-                            np.max(st.session_state.working_seed[:,6]),
-                            np.std(st.session_state.working_seed[:,6])
-                        ],
-                        'Proj': [
-                            np.min(st.session_state.working_seed[:,7]),
-                            np.mean(st.session_state.working_seed[:,7]),
-                            np.max(st.session_state.working_seed[:,7]),
-                            np.std(st.session_state.working_seed[:,7])
-                        ],
-                        'Own': [
-                            np.min(st.session_state.working_seed[:,8]),
-                            np.mean(st.session_state.working_seed[:,8]),
-                            np.max(st.session_state.working_seed[:,8]),
-                            np.std(st.session_state.working_seed[:,8])
-                        ]
-                    })
+                    player_columns = st.session_state.working_seed[:, :6]
                 elif site_var1 == 'Fanduel':
-                    summary_df = pd.DataFrame({
-                        'Metric': ['Min', 'Average', 'Max', 'STDdev'],
-                        'Salary': [
-                            np.min(st.session_state.working_seed[:,6]),
-                            np.mean(st.session_state.working_seed[:,6]),
-                            np.max(st.session_state.working_seed[:,6]),
-                            np.std(st.session_state.working_seed[:,6])
-                        ],
-                        'Proj': [
-                            np.min(st.session_state.working_seed[:,7]),
-                            np.mean(st.session_state.working_seed[:,7]),
-                            np.max(st.session_state.working_seed[:,7]),
-                            np.std(st.session_state.working_seed[:,7])
-                        ],
-                        'Own': [
-                            np.min(st.session_state.working_seed[:,8]),
-                            np.mean(st.session_state.working_seed[:,8]),
-                            np.max(st.session_state.working_seed[:,8]),
-                            np.std(st.session_state.working_seed[:,8])
-                        ]
-                    })
-
-                # Set the index of the summary dataframe as the "Metric" column
-                summary_df = summary_df.set_index('Metric')
-
-                # Display the summary dataframe
-                st.subheader("Optimal Statistics")
-                st.dataframe(summary_df.style.format({
-                    'Salary': '{:.2f}',
-                    'Proj': '{:.2f}',
-                    'Own': '{:.2f}'
-                }).background_gradient(cmap='RdYlGn', axis=0, subset=['Salary', 'Proj', 'Own']), use_container_width=True)
-
-        with st.container():
-            tab1, tab2 = st.tabs(["Display Frequency", "Seed Frame Frequency"])
-            with tab1:
-                if 'data_export_display' in st.session_state:
-                    if site_var1 == 'Draftkings':
-                        player_columns = st.session_state.data_export_display.iloc[:, :6]
-                    elif site_var1 == 'Fanduel':
-                        player_columns = st.session_state.data_export_display.iloc[:, :6]
-                    
-                    # Flatten the DataFrame and count unique values
-                    value_counts = player_columns.values.flatten().tolist()
-                    value_counts = pd.Series(value_counts).value_counts()
-                    
-                    percentages = (value_counts / lineup_num_var * 100).round(2)
-                    
-                    # Create a DataFrame with the results
-                    summary_df = pd.DataFrame({
-                        'Player': value_counts.index,
-                        'Frequency': value_counts.values,
-                        'Percentage': percentages.values
-                    })
-                    
-                    # Sort by frequency in descending order
-                    summary_df['Salary'] = summary_df['Player'].map(player_salaries)
-                    summary_df = summary_df[['Player', 'Salary', 'Frequency', 'Percentage']]
-                    summary_df = summary_df.sort_values('Frequency', ascending=False)
-                    summary_df = summary_df.set_index('Player')
-                    
-                    # Display the table
-                    st.write("Player Frequency Table:")
-                    st.dataframe(summary_df.style.format({'Percentage': '{:.2f}%'}), height=500, use_container_width=True)
+                    player_columns = st.session_state.working_seed[:, :6]
                 
-                    st.download_button(
-                        label="Export player frequency",
-                        data=convert_df_to_csv(summary_df),
-                        file_name='PGA_player_frequency.csv',
-                        mime='text/csv',
-                    )
-            with tab2:
-                if 'working_seed' in st.session_state:
-                    if site_var1 == 'Draftkings':
-                        player_columns = st.session_state.working_seed[:, :6]
-                    elif site_var1 == 'Fanduel':
-                        player_columns = st.session_state.working_seed[:, :6]
-                    
-                    # Flatten the DataFrame and count unique values
-                    value_counts = player_columns.flatten().tolist()
-                    value_counts = pd.Series(value_counts).value_counts()
-                    
-                    percentages = (value_counts / len(st.session_state.working_seed) * 100).round(2)
-                    # Create a DataFrame with the results
-                    summary_df = pd.DataFrame({
-                        'Player': value_counts.index,
-                        'Frequency': value_counts.values,
-                        'Percentage': percentages.values
-                    })
-                    
-                    # Sort by frequency in descending order
-                    summary_df['Salary'] = summary_df['Player'].map(player_salaries)
-                    summary_df = summary_df[['Player', 'Salary', 'Frequency', 'Percentage']]
-                    summary_df = summary_df.sort_values('Frequency', ascending=False)
-                    summary_df = summary_df.set_index('Player')
-                    
-                    # Display the table
-                    st.write("Seed Frame Frequency Table:")
-                    st.dataframe(summary_df.style.format({'Percentage': '{:.2f}%'}), height=500, use_container_width=True)
+                # Flatten the DataFrame and count unique values
+                value_counts = player_columns.flatten().tolist()
+                value_counts = pd.Series(value_counts).value_counts()
+                
+                percentages = (value_counts / len(st.session_state.working_seed) * 100).round(2)
+                # Create a DataFrame with the results
+                summary_df = pd.DataFrame({
+                    'Player': value_counts.index,
+                    'Frequency': value_counts.values,
+                    'Percentage': percentages.values
+                })
                 
-                    st.download_button(
-                        label="Export seed frame frequency",
-                        data=convert_df_to_csv(summary_df),
-                        file_name='PGA_seed_frame_frequency.csv',
-                        mime='text/csv',
-                    )
+                # Sort by frequency in descending order
+                summary_df['Salary'] = summary_df['Player'].map(player_salaries)
+                summary_df = summary_df[['Player', 'Salary', 'Frequency', 'Percentage']]
+                summary_df = summary_df.sort_values('Frequency', ascending=False)
+                summary_df = summary_df.set_index('Player')
+                
+                # Display the table
+                st.write("Seed Frame Frequency Table:")
+                st.dataframe(summary_df.style.format({'Percentage': '{:.2f}%'}), height=500, use_container_width=True)
+            
+                st.download_button(
+                    label="Export seed frame frequency",
+                    data=convert_df_to_csv(summary_df),
+                    file_name='PGA_seed_frame_frequency.csv',
+                    mime='text/csv',
+                )