Add tooltips

app/backend/data_page.py

@@ -46,8 +46,6 @@ def get_closed_dataset():
     return closed_list
 
 
-
-
 def convert_df_to_csv(df):
     output = io.StringIO()
     df.to_csv(output, index=False)
@@ -123,7 +121,6 @@ def table_only_css():
                     height: 0px;
 
                 }
-                 </style>
             """, unsafe_allow_html=True)
 
 
@@ -203,17 +200,20 @@ def table_area(group_name, grid_state, data_engine=None, df=None):
         # Model Name Cell
         ".a-cell": {
             "display": "inline-block",
-            "white-space": "nowrap",
-            "overflow": "hidden",
-            "text-overflow": "ellipsis",
+            # "white-space": "nowrap",
+            # "overflow": "hidden",
+            # "text-overflow": "ellipsis",
             "width": "100%",
             "min-width": "0"
         },
         # Header
+        ".ag-header":{
+            "overflow": "visible !important",
+        },
         ".multi-line-header": {
             "text-overflow": "clip",
             "overflow": "visible",
-            "white-space": "normal",
+            "white-space": "nowrap",
             "height": "auto",
             "font-family": 'Arial',
             "font-size": "14px",
@@ -232,7 +232,7 @@ def table_area(group_name, grid_state, data_engine=None, df=None):
             "font-weight": "bold",
             "padding": "10px",
             "text-align": "left",
-            "width":"150px"
+            # "width": "100%"
         },
         ".custom-cell-style": {
             "font-size": "14px",
@@ -254,7 +254,31 @@ def table_area(group_name, grid_state, data_engine=None, df=None):
             "font-size": "14px",
 
         }
+        # , ".link-header-component": {
+        #     "overflow": "visible !important",
+        #     "min-width": "auto !important",
+        # }
+        #
+        # , ".link-header-component > span ": {
+        #     "overflow": "visible !important",
+        #     "white-space": "nowrap !important",
+        #     "text-overflow": "unset !important",
+        #     "flex": "unset !important",
+        # },
+        # ,".custom-link-header-style": {
+        #
+        #     "display": "inline-block",
+        # }
+        ,".ag-header-cell-text":{
+            "overflow": "visible !important",
+            "width":"fit-content"
+
+        }
+        ,".ag-header-cell-label":{
+            "overflow": "visible !important",
+            "width": "fit-content"
 
+        }
     }
 
     grid = AgGrid(

app/backend/multi_header_util.py

@@ -4,11 +4,11 @@ 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 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)"
@@ -25,6 +25,7 @@ def get_dataset_url_name(field_name):
     # Return original field_name for open datasets
     return field_name
 
+
 def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
     """
     get mutil_header_options - 优化版本，减少组件实例化
@@ -50,13 +51,16 @@ def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
     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('_') or x.startswith("ClosedDataset "), mutil_column_list))
-    open_group_list = list(filter(lambda x: not x.startswith('_') and not x.startswith("ClosedDataset "), mutil_column_list))
-
-    theme = st_theme(key="st_theme_1")
+    open_group_list = list(
+        filter(lambda x: not x.startswith('_') and not x.startswith("ClosedDataset "), mutil_column_list))
 
 
     close_group_def = {
         'headerName': 'CLOSED DATASETS',
+        'width': 'fit-content',
+        'headerClass': 'custom-header-style',
+        'cellClass': 'custom-cell-style',
+        'autoHeaderHeight': True,
         'children': [
             {'headerName': column.replace('_', ''),
              'field': column,
@@ -70,8 +74,8 @@ def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
              'sortable': True,
-             'width': 150,
-             # "suppressColumnVirtualisation": True,
+             # 'width': 150,
+             "suppressColumnVirtualisation": True,
 
              } for column in close_group_list
         ],
@@ -79,6 +83,10 @@ def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
     }
     open_group_def = {
         'headerName': 'OPEN DATASETS',
+        'width': 'fit-content',
+        'headerClass': 'custom-header-style',
+        'cellClass': 'custom-cell-style',
+        'autoHeaderHeight': True,
         'children': [
             {'headerName': column,
              'field': column,
@@ -90,8 +98,8 @@ def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
              'sortable': True,
-             'width': 150,
-             # "suppressColumnVirtualisation": True,
+             # 'width': 150,
+             "suppressColumnVirtualisation": True,
 
              } for column in open_group_list
         ],
@@ -100,7 +108,7 @@ def mutil_header_options(column_list: list, avg_column: str, is_section: bool):
     return [close_group_def, open_group_def]
 
 
-def get_header_options(column_list: list, avg_column: str,  is_section: bool):
+def get_header_options(column_list: list, avg_column: str, is_section: bool):
     grid_options = {
         'columnDefs': [
             {
@@ -112,7 +120,13 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                 'cellClass': 'custom-cell-style',
                 'autoHeaderHeight': True,
                 "tooltipValueGetter": JsCode(
-                    """function(p) {return p.value}"""
+                    """
+                    function(p) {
+                    const value = p.value || "";
+                    const link = p.data && p.data.reference ? p.data.reference : "";
+                    return link ? `${value} (${link})` : value;
+    }
+                    """
                 ),
                 "width": 250,
                 'cellRenderer': JsCode("""class CustomHTML {
@@ -128,20 +142,24 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                                 return this.eGui;
                             }
                         }"""),
-                'suppressSizeToFit': True
+                'suppressSizeToFit': True,
+                'headerTooltip': 'Model Name',
 
             },
             {'headerName': "Vendor",
              'field': 'vendor',
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
-             # 'suppressSizeToFit': True
+             # 'suppressSizeToFit': True,
+             'headerTooltip': 'Vendor',
              },
             {'headerName': "Overall Score",
              'field': avg_column,
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
-             # 'suppressSizeToFit': True
+             # 'suppressSizeToFit': True,
+             'headerTooltip': 'Overall Score',
+
              },
 
             # Add Open average column definition
@@ -149,14 +167,18 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
              'field': 'Open average',
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
-             # 'suppressSizeToFit': True
+             # 'suppressSizeToFit': True,
+             'headerTooltip': 'Open Average',
+
              },
 
             {'headerName': 'Closed Average',
              'field': 'Closed average',
              'headerClass': 'custom-header-style',
              'cellClass': 'custom-cell-style',
-             # 'suppressSizeToFit': True
+             # 'suppressSizeToFit': True,
+             'headerTooltip': 'Closed Average',
+
              },
 
             {
@@ -165,6 +187,8 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                 'headerClass': 'custom-header-style',
                 'cellClass': 'custom-cell-style',
                 # 'suppressSizeToFit': True,
+                'headerTooltip': 'Embd Dtype',
+
             },
             {
                 'headerName': 'Embd Dim',
@@ -172,6 +196,20 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                 'headerClass': 'custom-header-style',
                 'cellClass': 'custom-cell-style',
                 # 'suppressSizeToFit': True,
+                'valueFormatter': JsCode(
+                    """
+                    function(params) {
+                            const num = params.value;
+                            if (typeof num !== "number") return num;
+                            if (Math.abs(num) >= 10000) {
+                                return num.toLocaleString("en-US");
+                            }
+                            return num;
+                        }
+                    """
+                ),
+                'headerTooltip': 'Embd Dim',
+
             },
             {
                 'headerName': 'Number of Parameters',
@@ -191,6 +229,8 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                 ),
                 "width": 120,
                 # 'suppressSizeToFit': True,
+                'headerTooltip': 'Number of Parameters',
+
             },
             {
                 'headerName': 'Context Length',
@@ -198,6 +238,20 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
                 'headerClass': 'custom-header-style',
                 'cellClass': 'custom-cell-style',
                 # 'suppressSizeToFit': True,
+                'valueFormatter': JsCode(
+                    """
+                    function(params) {
+                            const num = params.value;
+                            if (typeof num !== "number") return num;
+                            if (Math.abs(num) >= 10000) {
+                                return num.toLocaleString("en-US");
+                            }
+                            return num;
+                        }
+                    """
+                ),
+                'headerTooltip': 'Context Length',
+
             },
 
             *mutil_header_options(column_list, avg_column, is_section)
@@ -216,6 +270,7 @@ def get_header_options(column_list: list, avg_column: str,  is_section: bool):
             "colIds": [column for column in column_list if column not in (avg_column, "Closed average", "Open average")]
         },
         "tooltipShowDelay": 500,
+        "suppressColumnVirtualisation": True
 
     }
 

requirements.txt

@@ -3,4 +3,4 @@ st-pages==1.0.1
 msgpack==1.1.0
 zstandard==0.23.0
 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
+https://github.com/embedding-benchmark/streamlit-aggrid/releases/download/v0.01/streamlit_aggrid-1.1.7-py3-none-any.whl