mod - modify menu size

app.py

@@ -2,7 +2,7 @@ import os
 
 import streamlit as st
 
-from st_pages import add_page_title, get_nav_from_toml
+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
@@ -17,11 +17,10 @@ for leaderboard, group_names in LEADERBOARD_MAP.items():
         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
@@ -29,6 +28,16 @@ nav = get_nav_from_toml(
     "app/ui/pages_sections.toml"
 )
 
+# Add custom CSS
+st.markdown("""
+    <style>
+        ul[data-testid="stSidebarNavItems"] li:not(:first-child) {
+            text-indent: 2rem;
+        }
+    </style>
+    """
+            , unsafe_allow_html=True)
+
 pg = st.navigation(nav)
 
 add_page_title(pg)

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):
         """

app/backend/data_page.py

@@ -0,0 +1,215 @@
+# -*- 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 +1,3 @@
-from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
+from app.backend.data_page import render_page
 
-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",
-)
+render_page("$group_name$")

app/ui/pages_sections.toml

@@ -1,12 +1,13 @@
 [[pages]]
+path = "app/ui/pages/text.py"
 name = "Text Leaderboard"
 icon = "📚"
-is_section = true
+#is_section = true
 
-[[pages]]
-path = "app/ui/pages/text.py"
-name = "Overall"
-icon = "🏆"
+#[[pages]]
+#path = "app/ui/pages/text.py"
+#name = "Overall"
+#icon = "🏆"
 
 [[pages]]
 path = "app/ui/pages/law.py"
@@ -31,8 +32,4 @@ icon = "💻"
 [[pages]]
 path = "app/ui/pages/tech.py"
 name = "Tech"
-icon = "🛠️"
-
-
-
-
+icon = "🛠️"