Modify Menu Size

app.py

@@ -1,135 +1,45 @@
 import os
+
 import streamlit as st
 
+from st_pages import get_nav_from_toml, add_page_title
+
 from app.backend.constant import LEADERBOARD_MAP
 from app.backend.data_engine import DataEngine
-from app.backend.data_page import render_page
+
+# init pages
+with open("app/ui/pages/data_page.py", "r", encoding="utf-8") as f:
+    data_page = f.read()
+for leaderboard, group_names in LEADERBOARD_MAP.items():
+
+    for group_name in group_names:
+        path = os.path.join("app/ui/pages", f"{group_name}.py")
+        with open(path, "w", encoding="utf-8") as f:
+            f.write(data_page.replace("$group_name$", group_name)
+                    )
 
 # init global data engine
 data_engine = DataEngine()
-data_engine.jsons_to_df()
 st.session_state["data_engine"] = data_engine
-
 st.set_page_config(layout="wide")
 
+# load page tree
+nav = get_nav_from_toml(
+    "app/ui/pages_sections.toml"
+)
+
 # Add custom CSS
 st.markdown("""
-<style>
-    /* Sidebar background color */
-    section[data-testid="stSidebar"] {
-        background-color: #f0f2f6;
-    }
-    
-    /* Navigation button style */
-    section[data-testid="stSidebar"] .stButton button {
-        width: 100%;
-        padding: 0.75rem 1rem;
-        background-color: transparent;
-        border: none;
-        text-align: left;
-        color: rgb(49, 51, 63);
-        font-size: 0.9rem;
-        font-weight: 400;
-        line-height: 1.6;
-        margin: 0.1rem 0;
-    }
-    
-    .st-emotion-cache-64tehz {
-
-         gap: 0rem; 
-    }
-    
-    .st-emotion-cache-qsto9u {
-
-        justify-content: left;
-    
-    }
-    
-    [data-testid="stVerticalBlock"] .stVerticalBlock {
-        text-indent: 2rem;
-    } 
-
-    /* Navigation button hover effect */
-    section[data-testid="stSidebar"] .stButton button:hover {
-        background-color: rgba(151, 166, 195, 0.15);
-    }
-    
-    /* Selected state */
-    section[data-testid="stSidebar"] .stButton button.selected,
-    section[data-testid="stSidebar"] .stButton button:active,
-    section[data-testid="stSidebar"] .stButton button:focus {
-        background-color: #fff;
-        border: none;
-        box-shadow: none;
-    }
-    
-    /* Page title style */
-    h1 {
-        font-size: 3rem !important;
-        font-weight: 600 !important;
-        color: rgb(49, 51, 63) !important;
-        margin-bottom: 1rem !important;
-    }
-    
-    /* Divider style */
-    hr {
-        margin: 0.5rem 0;
-        border-color: rgba(49, 51, 63, 0.1);
-    }
-    
-    /* Subpage indentation */
-    .child-page {
-        padding-left: 1rem;
-    }
-</style>
-""", unsafe_allow_html=True)
-
-# Implement navigation using sidebar
-with st.sidebar:
-    # Initialize session state
-    if "selected_page" not in st.session_state:
-        st.session_state.selected_page = "text"
-
-    # Text Leaderboard as clickable button
-    selected_class = "selected" if st.session_state.selected_page == "text" else ""
-    if st.button("📚 Text Leaderboard", key="text",
-                 use_container_width=True,
-                 ):
-        st.session_state.selected_page = "text"
-        st.rerun()
-
-    # Subpage list
-    pages = [
-        ("law", "⚖️ Law"),
-        ("multilingual", "🌎 Multilingual"),
-        ("german", "🇩🇪 German"),
-        ("code", "💻 Code"),
-        ("tech", "🛠️ Tech")
-    ]
+    <style>
+        ul[data-testid="stSidebarNavItems"] li:not(:first-child) {
+            text-indent: 2rem;
+        }
+    </style>
+    """
+            , unsafe_allow_html=True)
 
-    # Use container for indentation
-    with st.container():
-        st.markdown('<div class="child-page">', unsafe_allow_html=True)
-        for page_id, page_title in pages:
-            selected_class = "selected" if st.session_state.selected_page == page_id else ""
-            if st.button(page_title, key=page_id, use_container_width=True):
-                st.session_state.selected_page = page_id
-                # st.rerun()
-        st.markdown('</div>', unsafe_allow_html=True)
+pg = st.navigation(nav)
 
-# Add page title
-if st.session_state.selected_page == "text":
-    st.title("📚 Text Leaderboard")
-elif st.session_state.selected_page == "law":
-    st.title("⚖️ Law")
-elif st.session_state.selected_page == "multilingual":
-    st.title("🌎 Multilingual")
-elif st.session_state.selected_page == "german":
-    st.title("🇩🇪 German")
-elif st.session_state.selected_page == "code":
-    st.title("💻 Code")
-elif st.session_state.selected_page == "tech":
-    st.title("🛠️ Tech")
+add_page_title(pg)
 
-# Render current selected page
-render_page(st.session_state.selected_page)
+pg.run()

app/backend/data_engine.py

@@ -141,8 +141,3 @@ class DataEngine:
         df = self.jsons_to_df()
 
         return df[df["group_name"] == group_name][COLUMNS][:]
-
-    def summarize_dataframe(self):
-        """
-        Summarize data statistics
-        """

app/backend/data_page.py

@@ -82,7 +82,6 @@ def render_page(group_name):
     # title
     st.markdown('<h2 class="center-text">Embedding Benchmark For Retrieval</h2>', unsafe_allow_html=True)
 
-
     data_engine = st.session_state["data_engine"]
 
     df = data_engine.jsons_to_df()[:]
@@ -213,4 +212,4 @@ def render_page(group_name):
         allow_unsafe_jscode=True,
         columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
         theme="streamlit",
-    )
+    )

app/ui/pages/data_page.py

@@ -0,0 +1,3 @@
+from app.backend.data_page import render_page
+
+render_page("$group_name$")

app/ui/pages_sections.toml

@@ -0,0 +1,35 @@
+[[pages]]
+path = "app/ui/pages/text.py"
+name = "Text Leaderboard"
+icon = "📚"
+#is_section = true
+
+#[[pages]]
+#path = "app/ui/pages/text.py"
+#name = "Overall"
+#icon = "🏆"
+
+[[pages]]
+path = "app/ui/pages/law.py"
+name = "Law"
+icon = "⚖️"
+
+[[pages]]
+path = "app/ui/pages/multilingual.py"
+name = "Multilingual"
+icon = "🌎"
+
+[[pages]]
+path = "app/ui/pages/german.py"
+name = "German"
+icon = "🇩🇪"
+
+[[pages]]
+path = "app/ui/pages/code.py"
+name = "Code"
+icon = "💻"
+
+[[pages]]
+path = "app/ui/pages/tech.py"
+name = "Tech"
+icon = "🛠️"