Add secondary header (#12)

- Add secondary header (881b278aaee9cec3d4c5cb0c7f36e29a20237d16)

app/backend/data_page.py

@@ -20,8 +20,9 @@ COLUMNS = ['model_name', 'vendor',
            'query_instruct', 'corpus_instruct', 'reference'
 
            ]
-HEADER_STYLE = {'fontSize': '18px'}
-CELL_STYLE = {'fontSize': '18px'}
+LARGER_HEADER_STYLE = {'fontSize': '18px'}
+HEADER_STYLE = {'fontSize': '14px'}
+CELL_STYLE = {'fontSize': '14px'}
 
 
 def is_section(group_name):
@@ -63,6 +64,153 @@ def get_column_state():
     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('_')]
+        closed_datasets = [d for d in dataset_columns if d.startswith('_')]
+        
+        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/' + 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 closed_datasets
+                ]
+            })
+        
+        return grouped_columns
+    else:
+        # For section pages, return columns without grouping (original behavior)
+        return [{'headerName': column if "Average" not in column else column.replace("Average", "").strip().capitalize(),
+               'field': column,
+               'headerStyle': HEADER_STYLE,
+               'cellStyle': CELL_STYLE,
+               "headerTooltip": 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/' + 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 dataset_columns]
+
+
 def render_page(group_name):
     grid_state = st.session_state.get("grid_state", {})
     st.session_state.sider_bar_hidden = True
@@ -156,7 +304,6 @@ def render_page(group_name):
                 position: fixed !important;
                 z-index: 2147483647 !important;
             }
-
         </style>
 
     """, unsafe_allow_html=True)
@@ -175,13 +322,6 @@ def render_page(group_name):
 
     csv = convert_df_to_csv(df)
     file_name = f"{group_name.capitalize()} Leaderboard" if is_section(group_name) else group_name.capitalize()
-    st.download_button(
-        label="Download CSV",
-        data=csv,
-        file_name=f"{file_name}.csv",
-        mime="text/csv",
-        icon=":material/download:",
-    )
 
     # get columns
     column_list = []
@@ -212,6 +352,10 @@ 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))
@@ -330,49 +474,7 @@ def render_page(group_name):
                 # 'suppressSizeToFit': True,
             },
 
-            *[{'headerName': column if "Average" not in column else column.replace("Average", "").strip().capitalize(),
-               'field': column,
-               'headerStyle': HEADER_STYLE,
-               'cellStyle': CELL_STYLE,
-               "headerTooltip": 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')) {{
-                               // For group columns (like "Code Average", "English Average"), display as plain text
-                               this.eGui.textContent = columnName;
-                           }} 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")]
+            *(_get_dataset_columns(group_name, column_list, avg_column))
         ],
         'defaultColDef': {
             'filter': True,
@@ -461,7 +563,17 @@ def render_page(group_name):
         st_copy_to_clipboard(share_link, before_copy_label='📋Push to copy', after_copy_label='✅Text copied!',
                              theme=theme)
 
-    share_btn = st.button("Share this page", icon=":material/share:")
+    col1, col2 = st.columns([1, 1])
+    with col1:
+        st.download_button(
+            label="Download CSV",
+            data=csv,
+            file_name=f"{file_name}.csv",
+            mime="text/csv",
+            icon=":material/download:",
+        )
+    with col2:
+        share_btn = st.button("Share this page", icon=":material/share:")
 
     if share_btn:
         share_url()

requirements.txt

@@ -1,5 +1,5 @@
-streamlit==1.41.1
-streamlit-aggrid==1.0.5
+streamlit==1.47.1
+streamlit-aggrid==1.1.7
 st-pages==1.0.1
 msgpack==1.1.0
 zstandard==0.23.0