Sidebar and dataset table (#28)

- Add sidebar sections (Domain/Languages) and datasets reference table (e1ce0ca2a9ee3e9a5b0fd4d36410551b48915f09)

app.py

@@ -4,7 +4,7 @@ import streamlit as st
 
 from st_pages import get_nav_from_toml, add_page_title
 
-from app.backend.app_init_func import LI_CSS, init_leaderboard, init_pages
+from app.backend.app_init_func import init_leaderboard, init_pages
 from app.backend.data_engine import DataEngine
 
 # init global data engine
@@ -24,20 +24,20 @@ nav = get_nav_from_toml(
 )
 
 # Add custom CSS
-css = "\n".join(LI_CSS)
-st.markdown(f"""
+st.markdown("""
     <style>
-
-        div[data-testid="stToolbar"] {{visibility: hidden; height: 0px;}}
-
-        footer {{visibility: hidden;}}
-    </style>
-
-    <style>
-        {css}
+        div[data-testid="stToolbar"] {visibility: hidden; height: 0px;}
+        footer {visibility: hidden;}
+
+        /* Indent Domain and Languages sections under Text Leaderboard */
+        ul[data-testid="stSidebarNavItems"] > div:nth-child(2),
+        ul[data-testid="stSidebarNavItems"] > div:nth-child(3) {
+            padding-left: 1.5rem;
+            border-left: 2px solid rgba(129, 150, 64, 0.3);
+            margin-left: 0.75rem;
+        }
     </style>
-    """
-            , unsafe_allow_html=True)
+    """, unsafe_allow_html=True)
 
 pg = st.navigation(nav)
 

app/backend/app_init_func.py

@@ -1,22 +1,47 @@
 import streamlit as st
 import os
 
-from app.backend.constant import LEADERBOARD_ICON_MAP, get_display_name
+from app.backend.constant import (
+    LEADERBOARD_ICON_MAP, get_display_name,
+    DOMAIN_GROUPS, LANGUAGE_GROUPS,
+)
 
 LEADERBOARD_MAP = {}
-LI_CSS = []
 PAGE_SECTIONS = []
 
 
+def _page_toml(name, page_name):
+    icon = LEADERBOARD_ICON_MAP.get(page_name, "")
+    return f"""
+[[pages]]
+path = "app/ui/pages/{name}.py"
+name = "{page_name}"
+icon = "{icon}"
+"""
+
+
+def _section_toml(section_name):
+    return f"""
+[[pages]]
+name = "{section_name}"
+icon = ""
+is_section = true
+"""
+
+
 def init_leaderboard():
     data_engine = st.session_state["data_engine"]
     leaderboard_map = {}
-    page_sections = []
-    li_css = []
-    sort_id = 0
     leaderboard_change = False
     page_change = False
 
+    text_root = []
+    domain_pages = []
+    language_pages = []
+    multimodal_root = []
+    multimodal_sub = []
+    sort_id = 0
+
     for dataset in data_engine.datasets:
         sort_id += 1
         leaderboard = dataset["leaderboard"]
@@ -25,27 +50,42 @@ def init_leaderboard():
         leaderboard_section = f"{leaderboard.capitalize()} Leaderboard"
         if leaderboard_section not in leaderboard_map:
             leaderboard_map[leaderboard_section] = []
-        if name.lower() == leaderboard.lower():
-            leaderboard_map[leaderboard_section].append((name, 0))
-        else:
-            leaderboard_map[leaderboard_section].append((name, sort_id))
-            li_css.append(f"""
-            ul[data-testid="stSidebarNavItems"] li:nth-child({sort_id}) {{
-            text-indent: 2rem;
-        }}
-            """)
-        page_name = leaderboard_section if name.lower() == leaderboard.lower() else get_display_name(name)
-        page_sections.append(f"""
-        [[pages]]
-        path = "app/ui/pages/{name}.py"
-        name = "{page_name}"
-        icon = "{LEADERBOARD_ICON_MAP.get(page_name, "")}"
-        """)
-
-    # ensure leaderboard is first
+
+        is_root = name.lower() == leaderboard.lower()
+        leaderboard_map[leaderboard_section].append((name, 0 if is_root else sort_id))
+
+        page_name = leaderboard_section if is_root else get_display_name(name)
+        entry = _page_toml(name, page_name)
+
+        if leaderboard.lower() == "text":
+            if is_root:
+                text_root.append(entry)
+            elif name in DOMAIN_GROUPS:
+                domain_pages.append(entry)
+            elif name in LANGUAGE_GROUPS:
+                language_pages.append(entry)
+        elif leaderboard.lower() == "multimodal":
+            if is_root:
+                multimodal_root.append(entry)
+            else:
+                multimodal_sub.append(entry)
+
     for k, v in leaderboard_map.items():
         v.sort(key=lambda x: x[1])
 
+    page_sections = []
+    page_sections.extend(text_root)
+    if domain_pages:
+        page_sections.append(_section_toml("Domain"))
+        page_sections.extend(domain_pages)
+    if language_pages:
+        page_sections.append(_section_toml("Languages"))
+        page_sections.extend(language_pages)
+    if multimodal_root or multimodal_sub:
+        page_sections.append(_section_toml("Multimodal"))
+        page_sections.extend(multimodal_root)
+        page_sections.extend(multimodal_sub)
+
     if leaderboard_map != LEADERBOARD_MAP:
         LEADERBOARD_MAP.update(leaderboard_map)
         leaderboard_change = True
@@ -53,25 +93,19 @@ def init_leaderboard():
         PAGE_SECTIONS.clear()
         PAGE_SECTIONS.extend(page_sections)
         page_change = True
-    if li_css != LI_CSS:
-        LI_CSS.clear()
-        LI_CSS.extend(li_css)
 
     return leaderboard_change, page_change
 
 
 def init_pages(leaderboard_change, page_change):
-    # init pages
     if leaderboard_change:
         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[0]}.py")
                 with open(path, "w", encoding="utf-8") as f:
-                    f.write(data_page.replace("$group_name$", group_name[0])
-                            )
+                    f.write(data_page.replace("$group_name$", group_name[0]))
     if page_change:
         with open("app/ui/pages_sections.toml", "w", encoding="utf-8") as f:
             f.write("\n".join(PAGE_SECTIONS))
@@ -79,6 +113,5 @@ def init_pages(leaderboard_change, page_change):
 
 if __name__ == '__main__':
     init_leaderboard()
-    init_pages()
+    init_pages(True, True)
     print("\n".join(PAGE_SECTIONS))
-    print("\n".join(LI_CSS))

app/backend/constant.py

@@ -93,6 +93,9 @@ LEADERBOARD_ICON_MAP = {
     "Document": "📄",
 }
 
+DOMAIN_GROUPS = {"legal", "code", "healthcare", "finance"}
+LANGUAGE_GROUPS = {"english", "french", "german", "japanese"}
+
 USERNAME = "embedding-benchmark"
 SPACENAME = "RTEB"
 

app/backend/data_page.py

@@ -9,8 +9,10 @@ from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
 
 import streamlit as st
 
+import pandas as pd
+
 from app.backend.data_engine import DataEngine
-from app.backend.multi_header_util import get_header_options
+from app.backend.multi_header_util import get_header_options, get_dataset_url_name, LINK
 from utils.st_copy_to_clipboard import st_copy_to_clipboard
 from streamlit_theme import st_theme
 
@@ -133,6 +135,33 @@ def table_only_css():
             """, unsafe_allow_html=True)
 
 
+def datasets_table(group_name, data_engine):
+    dataset_list = []
+    for dataset_dict in data_engine.datasets:
+        if dataset_dict["name"] == group_name:
+            dataset_list = dataset_dict["datasets"]
+            break
+
+    if not dataset_list:
+        return
+
+    base_url = LINK.strip()
+    rows = []
+    for ds_name in dataset_list:
+        url_name = get_dataset_url_name(ds_name)
+        rows.append({"Dataset": ds_name, "URL": f"{base_url}{url_name}"})
+
+    df_datasets = pd.DataFrame(rows)
+    st.dataframe(
+        df_datasets,
+        column_config={
+            "URL": st.column_config.LinkColumn("URL", display_text="Open ↗")
+        },
+        hide_index=True,
+        use_container_width=True,
+    )
+
+
 def table_area(group_name, grid_state, data_engine=None, df=None):
     """
     table_area
@@ -404,6 +433,8 @@ def main_page(group_name, grid_state):
 
     data_engine = st.session_state.get("data_engine", DataEngine())
 
+    datasets_table(group_name, data_engine)
+
     df = data_engine.jsons_to_df().copy()
 
     csv = convert_df_to_csv(df)