Links in the column headers

app/backend/data_page.py

@@ -7,6 +7,7 @@ import io
 
 from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
 import streamlit as st
+import streamlit.components.v1 as components
 from utils.st_copy_to_clipboard import st_copy_to_clipboard
 from streamlit_theme import st_theme
 
@@ -53,7 +54,7 @@ def get_column_state():
     get column state from url
     """
     query_params = st.query_params.get("grid_state", None)
-    sider_bar_hidden = st.query_params.get("sider_bar_hidden","False")
+    sider_bar_hidden = st.query_params.get("sider_bar_hidden", "False")
     if query_params:
         grid_state = decompress_msgpack(query_params)
         st.session_state.grid_state = grid_state
@@ -76,19 +77,18 @@ def render_page(group_name):
             [data-testid="stSidebarNav"] {
                 display: none !important;
             }
-            
+
             [data-testid="stBaseButton-headerNoPadding"] {
                 display: none !important;
             }
-            
+
            h1#retrieval-embedding-benchmark-rteb {
                 text-align: center;
             }
-            
+
             </style>
         """, unsafe_allow_html=True)
 
-
     # Add theme color and grid styles
     st.title("Retrieval Embedding Benchmark (RTEB)")
     st.markdown("""
@@ -335,7 +335,87 @@ def render_page(group_name):
                'headerStyle': HEADER_STYLE,
                'cellStyle': CELL_STYLE,
                "headerTooltip": column if "Average" not in column else column.replace("Average",
-                                                                                      "").strip().capitalize()
+                                                                                      "").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')) {{
+                               // For group columns (like "Code Average", "English Average"), create clickable link to respective page
+                               const groupName = fieldName.replace(' Average', '').toLowerCase();
+                               const link = document.createElement('a');
+                               link.href = '#';
+                               link.style.color = 'white';
+                               link.style.textDecoration = 'underline';
+                               link.style.cursor = 'pointer';
+                               link.textContent = columnName;
+
+                               // Prevent event bubbling to avoid sorting trigger and navigate directly
+                               link.addEventListener('click', function(e) {{
+                                   e.stopPropagation();
+                                   e.preventDefault();
+
+                                   // Try multiple navigation approaches
+                                   const targetUrl = '/' + groupName;
+
+                                   try {{
+                                       // First try: Navigate the top-level window
+                                       if (window.top && window.top.location && window.top !== window) {{
+                                           window.top.location.assign(targetUrl);
+                                           return;
+                                       }}
+                                   }} catch (ex1) {{
+                                       console.log('Top navigation blocked:', ex1);
+                                   }}
+
+                                   try {{
+                                       // Second try: Navigate the parent window
+                                       if (window.parent && window.parent.location && window.parent !== window) {{
+                                           window.parent.location.assign(targetUrl);
+                                           return;
+                                       }}
+                                   }} catch (ex2) {{
+                                       console.log('Parent navigation blocked:', ex2);
+                                   }}
+
+                                   try {{
+                                       // Third try: Replace current window location
+                                       window.location.replace(targetUrl);
+                                   }} catch (ex3) {{
+                                       console.log('Current window navigation blocked:', ex3);
+                                       // Last resort: simple assignment
+                                       window.location.href = targetUrl;
+                                   }}
+                               }});
+
+                               this.eGui.appendChild(link);
+                           }} else {{
+                               // For dataset columns, create clickable link to HuggingFace dataset
+                               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;
+
+                               // Prevent event bubbling to avoid sorting trigger
+                               link.addEventListener('click', function(e) {{
+                                   e.stopPropagation();
+                               }});
+
+                               this.eGui.appendChild(link);
+                           }}
+                       }}
+
+                       getGui() {{
+                           return this.eGui;
+                       }}
+                   }}
+               """)
                # 'suppressSizeToFit': True
                } for column in column_list if
               column not in (avg_column, "Closed average", "Open average")]