mod - Modify the Title and Navigation Bar

app.py

@@ -1,22 +1,10 @@
 import os
-
 import streamlit as st
 
-from st_pages import add_page_title, get_nav_from_toml
-
 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()
@@ -24,13 +12,124 @@ 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")
+    ]
 
-pg = st.navigation(nav)
+    # 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)
 
-add_page_title(pg)
+# 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")
 
-pg.run()
+# Render current selected page
+render_page(st.session_state.selected_page)

app/__init__.py

@@ -0,0 +1 @@
+

app/backend/data_engine.py

@@ -12,12 +12,12 @@ from utils.http_utils import get
 COLUMNS = ['model_name',
            'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
            'query_instruct', 'corpus_instruct',
-           'ndcg_at_10',
+
            ]
 COLUMNS_TYPES = ["markdown",
                  'str', 'str', 'number', 'number', 'str',
                  'str', 'str',
-                 'number',
+
                  ]
 
 GIT_URL = "https://raw.githubusercontent.com/embedding-benchmark/ebr/refs/heads/main/results/"
@@ -83,6 +83,8 @@ class DataEngine:
             df_results_list.append(df_result_row)
         df_result = pd.concat(df_results_list)
 
+        df_result = df_result[["model_name", "dataset_name", "ndcg_at_10"]]
+
         df_datasets_list = []
         for item in self.datasets:
             dataset_names = item["datasets"]
@@ -101,12 +103,36 @@ class DataEngine:
         df_model = pd.DataFrame(models_list)
 
         df = pd.merge(df_result, df_dataset, on=["dataset_name"], how="inner")
-        df = df.groupby(["model_name", "group_name"], as_index=False)["ndcg_at_10"].mean()
-        df = pd.merge(df, df_model, on=["model_name"], how="inner")
+        # df = pd.merge(df, df_model, on=["model_name"], how="inner")
+
+        dataset_num_map = {}
+        grouped_dataset_count = df.groupby(["group_name"]).agg({
+            "dataset_name": "nunique"
+        }).reset_index()
+
+        for _, row in grouped_dataset_count.iterrows():
+            dataset_num_map[row["group_name"]] = row["dataset_name"]
+
+        grouped_model = df.groupby(["model_name", "group_name"]).agg({
+            "ndcg_at_10": "mean",
+        }).reset_index()
+
+        pivot = grouped_model.pivot(index="model_name", columns="group_name", values=["ndcg_at_10"])
+
+        # Rename columns
+        pivot.columns = list(
+            map(lambda x: f"{x[1].capitalize()} Average ({dataset_num_map[x[1]]} datasets)" if x[
+                                                                                                   1] != 'text' else f"Average ({dataset_num_map[x[1]]} datasets)",
+                pivot.columns))
+
+        pivot_dataset = df_result.pivot(index="model_name", columns="dataset_name", values="ndcg_at_10")
+
+        df = pd.merge(df_model, pivot, on="model_name")
+        df = pd.merge(df, pivot_dataset, on="model_name")
 
         if df.empty:
-            return pd.DataFrame(columns=COLUMNS + ["group_name", "reference"])
-        return df[COLUMNS + ["group_name", "reference"]]
+            return pd.DataFrame(columns=COLUMNS + ["reference"])
+        return df
 
     def filter_df(self, group_name: str):
         """
@@ -115,3 +141,8 @@ 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

@@ -0,0 +1,216 @@
+# -*- coding: utf-8 -*-
+# @Date     : 2025/2/5 16:26
+# @Author   : q275343119
+# @File     : data_page.py
+# @Description:
+from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
+
+import streamlit as st
+
+COLUMNS = ['model_name',
+           'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
+           'query_instruct', 'corpus_instruct', 'reference'
+
+           ]
+HEADER_STYLE = {'fontSize': '18px'}
+CELL_STYLE = {'fontSize': '18px'}
+
+
+def render_page(group_name):
+    # Add theme color and grid styles
+    st.markdown("""
+        <style>
+            :root {
+                --theme-color: rgb(129, 150, 64);
+                --theme-color-light: rgba(129, 150, 64, 0.2);
+            }
+    
+            /* AG Grid specific overrides */
+            .ag-theme-alpine {
+                --ag-selected-row-background-color: var(--theme-color-light) !important;
+                --ag-row-hover-color: var(--theme-color-light) !important;
+                --ag-selected-tab-color: var(--theme-color) !important;
+                --ag-range-selection-border-color: var(--theme-color) !important;
+                --ag-range-selection-background-color: var(--theme-color-light) !important;
+            }
+    
+            .ag-row-hover {
+                background-color: var(--theme-color-light) !important;
+            }
+    
+            .ag-row-selected {
+                background-color: var(--theme-color-light) !important;
+            }
+    
+            .ag-row-focus {
+                background-color: var(--theme-color-light) !important;
+            }
+    
+            .ag-cell-focus {
+                border-color: var(--theme-color) !important;
+            }
+    
+            /* Keep existing styles */
+            .center-text {
+                text-align: center;
+                color: var(--theme-color);
+            }
+            .center-image {
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+            }
+            h2 {
+                color: var(--theme-color) !important;
+            }
+            .ag-header-cell {
+                background-color: var(--theme-color) !important;
+                color: white !important;
+            }
+            a {
+                color: var(--theme-color) !important;
+            }
+            a:hover {
+                color: rgba(129, 150, 64, 0.8) !important;
+            }
+        </style>
+    """, unsafe_allow_html=True)
+
+    #  logo
+    # st.markdown('<img src="https://www.voyageai.com/logo.svg" class="center-image" width="200">', unsafe_allow_html=True)
+
+    # 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()[:]
+    # get columns
+    column_list = []
+    avg_column = None
+    if group_name == "text":
+        avg_columns = []
+        for column in df.columns:
+
+            if column.startswith("Average"):
+                avg_columns.insert(0, column)
+                continue
+            if "Average" in column:
+                avg_columns.append(column)
+                continue
+        avg_column = avg_columns[0]
+        column_list.extend(avg_columns)
+    else:
+        for column in df.columns:
+
+            if column.startswith(group_name.capitalize() + " "):
+                avg_column = column
+                new_column = avg_column.replace(group_name.capitalize(), "").strip()
+                df.rename(columns={avg_column: new_column}, inplace=True)
+                column_list.append(new_column)
+                avg_column = new_column
+
+    dataset_list = []
+    if group_name != "text":
+        for dataset_dict in data_engine.datasets:
+            if dataset_dict["name"] == group_name:
+                dataset_list = dataset_dict["datasets"]
+        column_list.extend(dataset_list)
+
+    df = df[COLUMNS + column_list].sort_values(by=avg_column, ascending=False)
+
+    # setting column config
+    grid_options = {
+        'columnDefs': [
+            {
+                'headerName': 'Model Name',
+                'field': 'model_name',
+                'pinned': 'left',
+                'sortable': False,
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+                'cellRenderer': JsCode("""class CustomHTML {
+                    init(params) {
+                        const link = params.data.reference;
+                        this.eGui = document.createElement('div');
+                        this.eGui.innerHTML = link ? 
+                            `<a href="${link}" target="_blank">${params.value}</a>` : 
+                            params.value;
+                    }
+    
+                    getGui() {
+                        return this.eGui;
+                    }
+                }"""),
+            },
+            {'headerName': avg_column,
+             'field': avg_column,
+             'headerStyle': HEADER_STYLE,
+             'cellStyle': CELL_STYLE,
+             'suppressSizeToFit': True},
+            {
+                'headerName': 'Data Type',
+                'field': 'embd_dtype',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+            },
+            {
+                'headerName': 'Embd Dim',
+                'field': 'embd_dim',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+            },
+            {
+                'headerName': 'Model Size (# of Parameters)',
+                'field': 'num_params',
+                'cellDataType': 'number',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+            },
+            {
+                'headerName': 'Context Length',
+                'field': 'max_tokens',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+            },
+            {
+                'headerName': 'Query Instruction',
+                'field': 'query_instruct',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+                'suppressSizeToFit': True,
+
+            },
+            {
+                'headerName': 'Corpus Instruction',
+                'field': 'corpus_instruct',
+                'headerStyle': HEADER_STYLE,
+                'cellStyle': CELL_STYLE,
+                'suppressSizeToFit': True,
+
+            },
+            *[{'headerName': column,
+               'field': column,
+               'headerStyle': HEADER_STYLE,
+               'cellStyle': CELL_STYLE,
+               'suppressSizeToFit': True} for column in column_list if column != avg_column]
+        ],
+        'defaultColDef': {
+            'filter': True,
+            'sortable': True,
+            'resizable': True
+        },
+        'autoSizeStrategy': {
+            'type': 'fitCellContents'
+        }
+    }
+
+    AgGrid(
+        df,
+        enable_enterprise_modules=False,
+        gridOptions=grid_options,
+        allow_unsafe_jscode=True,
+        columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
+        theme="streamlit",
+    )

app/ui/pages/data_page.py

@@ -1,170 +0,0 @@
-from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
-
-import streamlit as st
-
-HEADER_STYLE = {'fontSize': '18px'}
-CELL_STYLE = {'fontSize': '18px'}
-
-# Add theme color and grid styles
-st.markdown("""
-    <style>
-        :root {
-            --theme-color: rgb(129, 150, 64);
-            --theme-color-light: rgba(129, 150, 64, 0.2);
-        }
-        
-        /* AG Grid specific overrides */
-        .ag-theme-alpine {
-            --ag-selected-row-background-color: var(--theme-color-light) !important;
-            --ag-row-hover-color: var(--theme-color-light) !important;
-            --ag-selected-tab-color: var(--theme-color) !important;
-            --ag-range-selection-border-color: var(--theme-color) !important;
-            --ag-range-selection-background-color: var(--theme-color-light) !important;
-        }
-        
-        .ag-row-hover {
-            background-color: var(--theme-color-light) !important;
-        }
-        
-        .ag-row-selected {
-            background-color: var(--theme-color-light) !important;
-        }
-        
-        .ag-row-focus {
-            background-color: var(--theme-color-light) !important;
-        }
-        
-        .ag-cell-focus {
-            border-color: var(--theme-color) !important;
-        }
-        
-        /* Keep existing styles */
-        .center-text {
-            text-align: center;
-            color: var(--theme-color);
-        }
-        .center-image {
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        h2 {
-            color: var(--theme-color) !important;
-        }
-        .ag-header-cell {
-            background-color: var(--theme-color) !important;
-            color: white !important;
-        }
-        a {
-            color: var(--theme-color) !important;
-        }
-        a:hover {
-            color: rgba(129, 150, 64, 0.8) !important;
-        }
-    </style>
-""", unsafe_allow_html=True)
-
-#  logo
-# st.markdown('<img src="https://www.voyageai.com/logo.svg" class="center-image" width="200">', unsafe_allow_html=True)
-
-# title
-st.markdown('<h2 class="center-text">Embedding Benchmark For Retrieval</h2>', unsafe_allow_html=True)
-
-group_name = "$group_name$"
-
-data_engine = st.session_state["data_engine"]
-
-df = data_engine.jsons_to_df()[:]
-
-df = df[df["group_name"] == group_name].sort_values(by="ndcg_at_10", ascending=False)
-
-# setting column config
-grid_options = {
-    'columnDefs': [
-        {
-            'headerName': 'Model Name',
-            'field': 'model_name',
-            'pinned': 'left',
-            'sortable': False,
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-            'cellRenderer': JsCode("""class CustomHTML {
-                init(params) {
-                    const link = params.data.reference;
-                    this.eGui = document.createElement('div');
-                    this.eGui.innerHTML = link ? 
-                        `<a href="${link}" target="_blank">${params.value}</a>` : 
-                        params.value;
-                }
-
-                getGui() {
-                    return this.eGui;
-                }
-            }"""),
-        },
-        {
-            'headerName': 'NDCG@10',
-            'field': 'ndcg_at_10',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-        },
-        {
-            'headerName': 'Data Type',
-            'field': 'embd_dtype',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-        },
-        {
-            'headerName': 'Embd Dim',
-            'field': 'embd_dim',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-        },
-        {
-            'headerName': 'Model Size (# of Parameters)',
-            'field': 'num_params',
-            'cellDataType': 'number',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-        },
-        {
-            'headerName': 'Context Length',
-            'field': 'max_tokens',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-        },
-        {
-            'headerName': 'Query Instruction',
-            'field': 'query_instruct',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-            'suppressSizeToFit': True,
-
-        },
-        {
-            'headerName': 'Corpus Instruction',
-            'field': 'corpus_instruct',
-            'headerStyle': HEADER_STYLE,
-            'cellStyle': CELL_STYLE,
-            'suppressSizeToFit': True,
-
-        },
-    ],
-    'defaultColDef': {
-        'filter': True,
-        'sortable': True,
-        'resizable': True
-    },
-    'autoSizeStrategy': {
-        'type': 'fitCellContents'
-    }
-}
-
-ag = AgGrid(
-    df,
-    enable_enterprise_modules=False,
-    gridOptions=grid_options,
-    allow_unsafe_jscode=True,
-    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
-    theme="streamlit",
-)

app/ui/pages_sections.toml

@@ -1,38 +0,0 @@
-[[pages]]
-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 = "🛠️"
-
-
-
-