feat:add link header (#15)

- feat - add link header (5f8dbda8769060dfb1af2ad0ab934654e536f866)


Co-authored-by: Y <[email protected]>

app/backend/data_page.py

@@ -6,8 +6,11 @@
 import io
 
 from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
+
 import streamlit as st
-import streamlit.components.v1 as components
+
+from app.backend.data_engine import DataEngine
+from app.backend.multi_header_util import get_header_options
 from utils.st_copy_to_clipboard import st_copy_to_clipboard
 from streamlit_theme import st_theme
 
@@ -20,9 +23,8 @@ COLUMNS = ['model_name', 'vendor',
            'query_instruct', 'corpus_instruct', 'reference'
 
            ]
-LARGER_HEADER_STYLE = {'fontSize': '18px'}
-HEADER_STYLE = {'fontSize': '14px'}
-CELL_STYLE = {'fontSize': '14px'}
+HEADER_STYLE = {'fontSize': '18px'}
+CELL_STYLE = {'fontSize': '18px'}
 
 
 def is_section(group_name):
@@ -35,7 +37,7 @@ def is_section(group_name):
 
 
 def get_closed_dataset():
-    data_engine = st.session_state["data_engine"]
+    data_engine = st.session_state.get("data_engine", DataEngine())
     closed_list = []
     results = data_engine.results
     for result in results:
@@ -44,23 +46,6 @@ def get_closed_dataset():
     return closed_list
 
 
-def get_dataset_url_name(field_name):
-    """Convert field name to proper URL format for closed datasets"""
-    # Handle field names like "ClosedDataset 2 (German Legal Sentences)"
-    if field_name.startswith("ClosedDataset "):
-        # Extract the number and format it as ClosedDataset_X
-        if "(" in field_name:
-            # Extract number from "ClosedDataset 2 (description)" -> "2"
-            number_part = field_name.split("ClosedDataset ")[1].split(" ")[0]
-            return f"ClosedDataset_{number_part}"
-        else:
-            # Handle cases where it might already be in the right format or no parentheses
-            return field_name.replace(" ", "_")
-    
-    # Return original field_name for open datasets
-    return field_name
-
-
 def convert_df_to_csv(df):
     output = io.StringIO()
     df.to_csv(output, index=False)
@@ -73,168 +58,23 @@ def get_column_state():
     """
     query_params = st.query_params.get("grid_state", None)
     sider_bar_hidden = st.query_params.get("sider_bar_hidden", "False")
+    table_only = st.query_params.get("table_only", "False")
     if query_params:
         grid_state = decompress_msgpack(query_params)
         st.session_state.grid_state = grid_state
     if sider_bar_hidden.upper() == 'FALSE':
         st.session_state.sider_bar_hidden = False
+    if table_only.upper() == 'FALSE':
+        st.session_state.table_only = False
     return None
 
 
-def _get_dataset_columns(group_name, column_list, avg_column):
-    """Generate dataset columns with proper grouping for individual dataset pages."""
-    dataset_columns = [col for col in column_list if col not in (avg_column, "Closed average", "Open average")]
-    
-    # For individual dataset pages (not sections), group datasets by open/closed
-    if not is_section(group_name) and dataset_columns:
-        # Separate open and closed datasets
-        open_datasets = [d for d in dataset_columns if not d.startswith('_') and not d.startswith('ClosedDataset ')]
-        closed_datasets = [d for d in dataset_columns if d.startswith('_') or d.startswith('ClosedDataset ')]
-        
-        grouped_columns = []
-        
-        # Add Open Datasets group
-        if open_datasets:
-            grouped_columns.append({
-                'headerName': 'Open Datasets',
-                'headerStyle': LARGER_HEADER_STYLE,
-                'headerClass': 'group-header',
-                'marryChildren': True,
-                'openByDefault': True,
-                'children': [
-                    {
-                        'headerName': column,
-                        'field': column,
-                        'headerStyle': HEADER_STYLE,
-                        'cellStyle': CELL_STYLE,
-                        "headerTooltip": column,
-                        'headerComponent': JsCode(f"""
-                            class DatasetHeaderRenderer {{
-                                init(params) {{
-                                    this.eGui = document.createElement('div');
-                                    const columnName = params.displayName;
-                                    const fieldName = params.column.colId;
-
-                                    const link = document.createElement('a');
-                                    link.href = 'https://huggingface.co/datasets/embedding-benchmark/' + fieldName;
-                                    link.target = '_blank';
-                                    link.style.color = 'white';
-                                    link.style.textDecoration = 'underline';
-                                    link.style.cursor = 'pointer';
-                                    link.textContent = columnName;
-
-                                    link.addEventListener('click', function(e) {{
-                                        e.stopPropagation();
-                                    }});
-
-                                    this.eGui.appendChild(link);
-                                }}
-
-                                getGui() {{
-                                    return this.eGui;
-                                }}
-                            }}
-                        """)
-                    } for column in open_datasets
-                ]
-            })
-        
-        # Add Closed Datasets group
-        if closed_datasets:
-            grouped_columns.append({
-                'headerName': 'Closed Datasets',
-                'headerStyle': LARGER_HEADER_STYLE,
-                'headerClass': 'group-header',
-                'marryChildren': True,
-                'openByDefault': True,
-                'children': [
-                    {
-                        'headerName': column,
-                        'field': column,
-                        'headerStyle': HEADER_STYLE,
-                        'cellStyle': CELL_STYLE,
-                        "headerTooltip": column,
-                        'headerComponent': JsCode(f"""
-                            class DatasetHeaderRenderer {{
-                                init(params) {{
-                                    this.eGui = document.createElement('div');
-                                    const columnName = params.displayName;
-                                    const fieldName = params.column.colId;
-
-                                    const link = document.createElement('a');
-                                    link.href = 'https://huggingface.co/datasets/embedding-benchmark/' + '{get_dataset_url_name(column)}';
-                                    link.target = '_blank';
-                                    link.style.color = 'white';
-                                    link.style.textDecoration = 'underline';
-                                    link.style.cursor = 'pointer';
-                                    link.textContent = '{column}';
-
-                                    link.addEventListener('click', function(e) {{
-                                        e.stopPropagation();
-                                    }});
-
-                                    this.eGui.appendChild(link);
-                                }}
-
-                                getGui() {{
-                                    return this.eGui;
-                                }}
-                            }}
-                        """)
-                    } for column in closed_datasets
-                ]
-            })
-        
-        return grouped_columns
-    else:
-        # For section pages, return columns without grouping (original behavior)
-        return [{'headerName': column if column.startswith('_') and "Average" not in column else (column if "Average" not in column else column.replace("Average", "").strip().capitalize()),
-               'field': column,
-               'headerStyle': HEADER_STYLE,
-               'cellStyle': CELL_STYLE,
-               "headerTooltip": column if column.startswith('_') and "Average" not in column else (column if "Average" not in column else column.replace("Average",
-                                                                                      "").strip().capitalize()),
-               'headerComponent': JsCode(f"""
-                   class DatasetHeaderRenderer {{
-                       init(params) {{
-                           this.eGui = document.createElement('div');
-                           const columnName = params.displayName;
-                           const fieldName = params.column.colId;
-
-                           if (fieldName.includes('Average')) {{
-                               this.eGui.textContent = columnName;
-                           }} else {{
-                               const link = document.createElement('a');
-                               link.href = 'https://huggingface.co/datasets/embedding-benchmark/' + '{get_dataset_url_name(column)}';
-                               link.target = '_blank';
-                               link.style.color = 'white';
-                               link.style.textDecoration = 'underline';
-                               link.style.cursor = 'pointer';
-                               
-                               link.textContent = '{column}';
-
-                               link.addEventListener('click', function(e) {{
-                                   e.stopPropagation();
-                               }});
-
-                               this.eGui.appendChild(link);
-                           }}
-                       }}
-
-                       getGui() {{
-                           return this.eGui;
-                       }}
-                   }}
-               """)
-               } for column in dataset_columns]
-
-
-def render_page(group_name):
-    grid_state = st.session_state.get("grid_state", {})
-    st.session_state.sider_bar_hidden = True
-    get_column_state()
+def sidebar_css():
+    """
 
-    if st.session_state.sider_bar_hidden:
+    :return:
+    """
+    if st.session_state.get("sider_bar_hidden"):
         st.markdown("""
             <style>
             [data-testid="stSidebar"] {
@@ -255,91 +95,51 @@ def render_page(group_name):
             </style>
         """, unsafe_allow_html=True)
 
-    # Add theme color and grid styles
-    st.title("Retrieval Embedding Benchmark (RTEB)")
-    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;
-            }
+def table_only_css():
+    if st.session_state.get("table_only"):
+        st.markdown("""
+                <style>
 
-            .ag-row-hover {
-                background-color: var(--theme-color-light) !important;
-            }
+                [data-testid="stMainBlockContainer"] {
+                    padding-top: 0px;
+                    padding-left: 0px;
+                    padding-bottom: 0px;
+                    padding-right: 0px;
+                }
 
-            .ag-row-selected {
-                background-color: var(--theme-color-light) !important;
-            }
+                [data-testid="stHeader"] {
+                    height: 0px;
+                }
 
-            .ag-row-focus {
-                background-color: var(--theme-color-light) !important;
-            }
+                [data-testid="stApp"] {
+                    height: 456px;
+                }
 
-            .ag-cell-focus {
-                border-color: var(--theme-color) !important;
-            }
+                .st-emotion-cache-1dp5vir {
 
-            /* 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;
-            }
-            /* Download Button */
-            button[data-testid="stBaseButton-secondary"] {
-                float: right;
-
-            }
-            /* Toast On The Top*/
-            div[data-testid="stToastContainer"] {
-                position: fixed !important;
-                z-index: 2147483647 !important;
-            }
-        </style>
-
-    """, unsafe_allow_html=True)
+                    height: 0px;
 
-    #  logo
-    # st.markdown('<img src="https://www.voyageai.com/logo.svg" class="center-image" width="200">', unsafe_allow_html=True)
-    title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize(), "")} {group_name.capitalize()}</h2>'
-    if is_section(group_name):
-        title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize() + " Leaderboard", "")} {group_name.capitalize() + " Leaderboard"}</h2>'
-    # title
-    st.markdown(title, unsafe_allow_html=True)
+                }
+                 </style>
+            """, unsafe_allow_html=True)
 
-    data_engine = st.session_state["data_engine"]
 
-    df = data_engine.jsons_to_df().copy()
+def table_area(group_name, grid_state, data_engine=None, df=None):
+    """
+    table_area
+    :param group_name:
+    :param grid_state:
+    :param data_engine:
+    :param df:
+    :return:
+    """
+    table_only_css()
 
-    csv = convert_df_to_csv(df)
-    file_name = f"{group_name.capitalize()} Leaderboard" if is_section(group_name) else group_name.capitalize()
+    if data_engine is None:
+        data_engine = st.session_state.get("data_engine", DataEngine())
+    if df is None:
+        df = data_engine.jsons_to_df().copy()
 
     # get columns
     column_list = []
@@ -370,10 +170,6 @@ def render_page(group_name):
         if dataset_dict["name"] == group_name:
             dataset_list = dataset_dict["datasets"]
     if not is_section(group_name):
-        # Sort datasets: open first, then closed
-        open_datasets = [d for d in dataset_list if not d.startswith('_')]
-        closed_datasets = [d for d in dataset_list if d.startswith('_')]
-        dataset_list = open_datasets + closed_datasets
         column_list.extend(dataset_list)
     closed_list = get_closed_dataset()
     close_avg_list = list(set(dataset_list) & set(closed_list))
@@ -393,132 +189,13 @@ def render_page(group_name):
         column_list.remove(avg_column)
         avg_column = new_column
 
-    # setting column config
-    grid_options = {
-        'columnDefs': [
-            {
-                'headerName': 'Model Name',
-                'field': 'model_name',
-                'pinned': 'left',
-                'sortable': False,
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                "tooltipValueGetter": JsCode(
-                    """function(p) {return p.value}"""
-                ),
-                "width": 250,
-                'cellRenderer': JsCode("""class CustomHTML {
-                    init(params) {
-                        const link = params.data.reference;
-                        this.eGui = document.createElement('div');
-                        this.eGui.innerHTML = link ? 
-                            `<a href="${link}" class="a-cell" target="_blank">${params.value} </a>` : 
-                            params.value;
-                    }
-
-                    getGui() {
-                        return this.eGui;
-                    }
-                }"""),
-                'suppressSizeToFit': True
-
-            },
-            {'headerName': "Vendor",
-             'field': 'vendor',
-             'headerStyle': HEADER_STYLE,
-             'cellStyle': CELL_STYLE,
-             # 'suppressSizeToFit': True
-             },
-            {'headerName': "Overall Score",
-             'field': avg_column,
-             'headerStyle': HEADER_STYLE,
-             'cellStyle': CELL_STYLE,
-             # 'suppressSizeToFit': True
-             },
-
-            # Add Open average column definition
-            {'headerName': 'Open Average',
-             'field': 'Open average',
-             'headerStyle': HEADER_STYLE,
-             'cellStyle': CELL_STYLE,
-             # 'suppressSizeToFit': True
-             },
-
-            {'headerName': 'Closed Average',
-             'field': 'Closed average',
-             'headerStyle': HEADER_STYLE,
-             'cellStyle': CELL_STYLE,
-             # 'suppressSizeToFit': True
-             },
-
-            {
-                'headerName': 'Embd Dtype',
-                'field': 'embd_dtype',
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                # 'suppressSizeToFit': True,
-            },
-            {
-                'headerName': 'Embd Dim',
-                'field': 'embd_dim',
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                # 'suppressSizeToFit': True,
-            },
-            {
-                'headerName': 'Number of Parameters',
-                'field': 'num_params',
-                'cellDataType': 'number',
-                "colId": "num_params",
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                'valueFormatter': JsCode(
-                    """function(params) {
-                    const num = params.value;
-                    if (num >= 1e9) return (num / 1e9).toFixed(2) + "B";
-                    if (num >= 1e6) return (num / 1e6).toFixed(2) + "M";
-                    if (num >= 1e3) return (num / 1e3).toFixed(2) + "K";
-                    return num;
-                    }"""
-                ),
-                "width": 120,
-                # 'suppressSizeToFit': True,
-            },
-            {
-                'headerName': 'Context Length',
-                'field': 'max_tokens',
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                'valueFormatter': JsCode(
-                    """function(params) {
-                    const num = params.value;
-                    if (typeof num === 'number' && num >= 10000) {
-                        return num.toLocaleString();
-                    }
-                    return num;
-                    }"""
-                ),
-                # 'suppressSizeToFit': True,
-            },
-
-            *(_get_dataset_columns(group_name, column_list, avg_column))
-        ],
-        'defaultColDef': {
-            'filter': True,
-            'sortable': True,
-            'resizable': True,
-            'headerClass': "multi-line-header",
-            'autoHeaderHeight': True,
-            'width': 105
-        },
+    # setting column config - 优化缓存机制，减少不必要的session_state更新
+    grid_options = st.session_state.get(f"{group_name}_grid_options")
+    if grid_options is None:
+        grid_options = get_header_options(column_list, avg_column, is_section(group_name))
+        st.session_state[f"{group_name}_grid_options"] = grid_options
 
-        "autoSizeStrategy": {
-            "type": 'fitCellContents',
-            "colIds": [column for column in column_list if column not in (avg_column, "Closed average", "Open average")]
-        },
-        "tooltipShowDelay": 500,
-        "initialState": grid_state,
-    }
+    grid_options["initialState"] = grid_state
 
     custom_css = {
         # Model Name Cell
@@ -541,8 +218,23 @@ def render_page(group_name):
             "font-weight": "bold",
             "padding": "10px",
             "text-align": "left",
-        }
-        ,
+        },
+        # Custom header and cell styles to replace headerStyle and cellStyle
+        ".custom-header-style": {
+            "text-overflow": "clip",
+            "overflow": "visible",
+            "white-space": "normal",
+            "height": "auto",
+            "font-family": 'Arial',
+            "font-size": "14px",
+            "font-weight": "bold",
+            "padding": "10px",
+            "text-align": "left",
+        },
+        ".custom-cell-style": {
+            "font-size": "14px",
+            "color": "inherit",
+        },
         # Filter Options and Input
         ".ag-theme-streamlit .ag-popup": {
             "font-family": 'Arial',
@@ -570,9 +262,109 @@ def render_page(group_name):
         columns_auto_size_mode=ColumnsAutoSizeMode.FIT_ALL_COLUMNS_TO_VIEW,
         theme="streamlit",
         custom_css=custom_css,
-        update_on=["stateUpdated"],
+        update_on=["selectionChanged", "filterChanged"],  # 减少WebSocket触发频率，只在重要变化时触发
     )
 
+    return grid
+
+
+def main_page(group_name, grid_state):
+    """
+    main_page
+    :param group_name:
+    :param grid_state:
+    :return:
+    """
+
+    # Add theme color and grid styles
+    st.title("Retrieval Embedding Benchmark (RTEB)")
+    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;
+            }
+            /* Download Button */
+            button[data-testid="stBaseButton-secondary"] {
+                float: right;
+
+            }
+            /* Toast On The Top*/
+            div[data-testid="stToastContainer"] {
+                position: fixed !important;
+                z-index: 2147483647 !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 = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize(), "")} {group_name.capitalize()}</h2>'
+    if is_section(group_name):
+        title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize() + " Leaderboard", "")} {group_name.capitalize() + " Leaderboard"}</h2>'
+    # title
+    st.markdown(title, unsafe_allow_html=True)
+
+    data_engine = st.session_state.get("data_engine", DataEngine())
+
+    df = data_engine.jsons_to_df().copy()
+
+    csv = convert_df_to_csv(df)
+    file_name = f"{group_name.capitalize()} Leaderboard" if is_section(group_name) else group_name.capitalize()
+
+    grid = table_area(group_name, grid_state, data_engine, df)
+
     @st.dialog("URL")
     def share_url():
         state = grid.grid_state
@@ -604,3 +396,17 @@ def render_page(group_name):
 
     if share_btn:
         share_url()
+
+
+def render_page(group_name):
+    grid_state = st.session_state.get("grid_state", {})
+    st.session_state.sider_bar_hidden = True
+    st.session_state.table_only = True
+    get_column_state()
+
+    sidebar_css()
+
+    if st.session_state.get("table_only"):
+        table_area(group_name, grid_state)
+    else:
+        main_page(group_name, grid_state)

app/backend/multi_header_util.py

@@ -0,0 +1,212 @@
+"""
+handle multi_header options
+"""
+from st_aggrid import JsCode
+from streamlit_theme import st_theme
+
+
+HEADER_STYLE = {'fontSize': '18px'}
+CELL_STYLE = {'fontSize': '18px'}
+LINK = ' https://huggingface.co/datasets/embedding-benchmark/'
+
+
+def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
+    """
+    get mutil_header_options - 优化版本，减少组件实例化
+    :param column_list:
+    :param avg_column:
+    :param is_section:
+    :return:
+    """
+    if is_section:
+        column_def_list = [
+            {'headerName': column if "Average" not in column else column.replace("Average", "").strip().capitalize(),
+             'field': column,
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'headerTooltip': column if "Average" not in column else column.replace("Average",
+                                                                                    "").strip().capitalize()
+             # 'suppressSizeToFit': True
+             } for column in column_list if
+            column not in (avg_column, "Closed average", "Open average")]
+
+        return column_def_list
+
+    mutil_column_list = [column for column in column_list if
+                         column not in (avg_column, "Closed average", "Open average")]
+    close_group_list = list(filter(lambda x: x.startswith('_'), mutil_column_list))
+    open_group_list = list(filter(lambda x: not x.startswith('_'), mutil_column_list))
+
+    theme = st_theme(key="st_theme_1")
+    if theme:
+        current_theme = theme.get("base", "light")
+    else:
+        current_theme = "light"
+
+
+
+    close_group_def = {
+        'headerName': 'CLOSED DATASETS',
+        'children': [
+            {'headerName': column.replace('_', ''),
+             'field': column,
+
+             "headerComponentParams": {
+                 "innerHeaderComponent": "linkHeaderComponent",
+                 "url": LINK + column.replace('_', ''),
+                 "headerName": column
+             },
+
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'sortable': True,
+             'width': 150,
+             # "suppressColumnVirtualisation": True,
+
+             } for column in close_group_list
+        ],
+
+    }
+    open_group_def = {
+        'headerName': 'OPEN DATASETS',
+        'children': [
+            {'headerName': column,
+             'field': column,
+             "headerComponentParams": {
+                 "innerHeaderComponent": "linkHeaderComponent",
+                 "url": LINK + column.replace('_', ''),
+                 "headerName": column
+             },
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             'sortable': True,
+             'width': 150,
+             "suppressColumnVirtualisation": True,
+
+             } for column in open_group_list
+        ],
+
+    }
+    return [close_group_def, open_group_def]
+
+
+def get_header_options(column_list: list, avg_column: str,  is_section: bool):
+    grid_options = {
+        'columnDefs': [
+            {
+                'headerName': 'Model Name',
+                'field': 'model_name',
+                'pinned': 'left',
+                'sortable': False,
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                'autoHeaderHeight': True,
+                "tooltipValueGetter": JsCode(
+                    """function(p) {return p.value}"""
+                ),
+                "width": 250,
+                'cellRenderer': JsCode("""class CustomHTML {
+                            init(params) {
+                                const link = params.data.reference;
+                                this.eGui = document.createElement('div');
+                                this.eGui.innerHTML = link ? 
+                                    `<a href="${link}" class="a-cell" target="_blank">${params.value} </a>` : 
+                                    params.value;
+                            }
+
+                            getGui() {
+                                return this.eGui;
+                            }
+                        }"""),
+                'suppressSizeToFit': True
+
+            },
+            {'headerName': "Vendor",
+             'field': 'vendor',
+             'headerStyle': HEADER_STYLE,
+             'cellStyle': CELL_STYLE,
+             # 'suppressSizeToFit': True
+             },
+            {'headerName': "Overall Score",
+             'field': avg_column,
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            # Add Open average column definition
+            {'headerName': 'Open Average',
+             'field': 'Open average',
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            {'headerName': 'Closed Average',
+             'field': 'Closed average',
+             'headerClass': 'custom-header-style',
+             'cellClass': 'custom-cell-style',
+             # 'suppressSizeToFit': True
+             },
+
+            {
+                'headerName': 'Embd Dtype',
+                'field': 'embd_dtype',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Embd Dim',
+                'field': 'embd_dim',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Number of Parameters',
+                'field': 'num_params',
+                'cellDataType': 'number',
+                "colId": "num_params",
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                'valueFormatter': JsCode(
+                    """function(params) {
+                    const num = params.value;
+                    if (num >= 1e9) return (num / 1e9).toFixed(2) + "B";
+                    if (num >= 1e6) return (num / 1e6).toFixed(2) + "M";
+                    if (num >= 1e3) return (num / 1e3).toFixed(2) + "K";
+                    return num;
+                    }"""
+                ),
+                "width": 120,
+                # 'suppressSizeToFit': True,
+            },
+            {
+                'headerName': 'Context Length',
+                'field': 'max_tokens',
+                'headerClass': 'custom-header-style',
+                'cellClass': 'custom-cell-style',
+                # 'suppressSizeToFit': True,
+            },
+
+            *mutil_header_options(column_list, avg_column, is_section)
+        ],
+        'defaultColDef': {
+            'filter': True,
+            'sortable': True,
+            'resizable': True,
+            'headerClass': "multi-line-header",
+            'autoHeaderHeight': True,
+            'width': 105
+        },
+
+        "autoSizeStrategy": {
+            "type": 'fitCellContents',
+            "colIds": [column for column in column_list if column not in (avg_column, "Closed average", "Open average")]
+        },
+        "tooltipShowDelay": 500,
+
+    }
+
+    return grid_options

requirements.txt

@@ -1,6 +1,6 @@
 streamlit==1.47.1
-streamlit-aggrid==1.1.7
 st-pages==1.0.1
 msgpack==1.1.0
 zstandard==0.23.0
-st-theme==1.2.3
+st-theme==1.2.3
+https://github.com/q275343119/streamlit-aggrid-link_header/releases/download/v0.0.2/streamlit_aggrid-1.1.7-py3-none-any.whl