test2

Sleeping

App Files Files Community

ymk00 commited on 18 days ago

Commit

ca11711

1 Parent(s): 7cea663

Add functionality to change primary metric for dataset

Browse files

Files changed (8) hide show

backend/app/config/hf_config.py +2 -2
backend/app/services/leaderboard.py +118 -67
frontend/package.json +3 -2
frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/hooks/useDataProcessing.js +24 -9
frontend/src/pages/LeaderboardPage/components/Leaderboard/constants/defaults.js +1 -1
frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useDataUtils.js +286 -276
frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useSubscoreStore.js +15 -0
frontend/src/pages/LeaderboardPage/components/Leaderboard/utils/columnUtils.js +660 -462

backend/app/config/hf_config.py CHANGED Viewed

@@ -12,7 +12,7 @@ from app.utils.logging import LogFormatter
 logger = logging.getLogger(__name__)
 # Organization or user who owns the datasets
-HF_ORGANIZATION = os.environ.get("HF_ORGANIZATION", "Xueqing")
 # Get HF token directly from environment
 HF_TOKEN = os.environ.get("HF_TOKEN")
@@ -23,7 +23,7 @@ if not HF_TOKEN:
 API = HfApi(token=HF_TOKEN)
 # Repository configuration
-HF_AGGREGATED = os.environ.get("HF_AGGREGATED", "greek-contents")
 QUEUE_REPO = f"{HF_ORGANIZATION}/requests"
 AGGREGATED_REPO = f"{HF_ORGANIZATION}/{HF_AGGREGATED}"
 VOTES_REPO = f"{HF_ORGANIZATION}/votes"

 logger = logging.getLogger(__name__)
 # Organization or user who owns the datasets
+HF_ORGANIZATION = os.environ.get("HF_ORGANIZATION", "ymk00")
 # Get HF token directly from environment
 HF_TOKEN = os.environ.get("HF_TOKEN")
 API = HfApi(token=HF_TOKEN)
 # Repository configuration
+HF_AGGREGATED = os.environ.get("HF_AGGREGATED", "dataset-test")
 QUEUE_REPO = f"{HF_ORGANIZATION}/requests"
 AGGREGATED_REPO = f"{HF_ORGANIZATION}/{HF_AGGREGATED}"
 VOTES_REPO = f"{HF_ORGANIZATION}/votes"

backend/app/services/leaderboard.py CHANGED Viewed

@@ -9,33 +9,38 @@ from app.utils.logging import LogFormatter
 logger = logging.getLogger(__name__)
 class LeaderboardService:
     def __init__(self):
         pass
     async def fetch_raw_data(self) -> List[Dict[str, Any]]:
         """Fetch raw leaderboard data from HuggingFace dataset"""
         try:
             logger.info(LogFormatter.section("FETCHING LEADERBOARD DATA"))
-            logger.info(LogFormatter.info(f"Loading dataset from {HF_ORGANIZATION}/{HF_AGGREGATED}"))
             dataset = datasets.load_dataset(
                 f"{HF_ORGANIZATION}/{HF_AGGREGATED}",
-                cache_dir=cache_config.get_cache_path("datasets")
             )["train"]
             df = dataset.to_pandas()
-            data = df.to_dict('records')
             stats = {
                 "Total_Entries": len(data),
-                "Dataset_Size": f"{df.memory_usage(deep=True).sum() / 1024 / 1024:.1f}MB"
             }
             for line in LogFormatter.stats(stats, "Dataset Statistics"):
                 logger.info(line)
             return data
         except Exception as e:
             logger.error(LogFormatter.error("Failed to fetch leaderboard data", e))
             raise HTTPException(status_code=500, detail=str(e))
@@ -44,127 +49,163 @@ class LeaderboardService:
         """Get formatted leaderboard data"""
         try:
             logger.info(LogFormatter.section("FORMATTING LEADERBOARD DATA"))
             raw_data = await self.fetch_raw_data()
             formatted_data = []
             type_counts = {}
             error_count = 0
             # Initialize progress tracking
             total_items = len(raw_data)
             logger.info(LogFormatter.info(f"Processing {total_items:,} entries..."))
             for i, item in enumerate(raw_data, 1):
                 try:
                     formatted_item = await self.transform_data(item)
                     formatted_data.append(formatted_item)
                     # Count model types
                     model_type = formatted_item["model"]["type"]
                     type_counts[model_type] = type_counts.get(model_type, 0) + 1
                 except Exception as e:
                     error_count += 1
-                    logger.error(LogFormatter.error(f"Failed to format entry {i}/{total_items}", e))
                     continue
                 # Log progress every 10%
                 if i % max(1, total_items // 10) == 0:
                     progress = (i / total_items) * 100
-                    logger.info(LogFormatter.info(f"Progress: {LogFormatter.progress_bar(i, total_items)}"))
             # Log final statistics
             stats = {
                 "Total_Processed": total_items,
                 "Successful": len(formatted_data),
-                "Failed": error_count
             }
             logger.info(LogFormatter.section("PROCESSING SUMMARY"))
             for line in LogFormatter.stats(stats, "Processing Statistics"):
                 logger.info(line)
             # Log model type distribution
             type_stats = {f"Type_{k}": v for k, v in type_counts.items()}
             logger.info(LogFormatter.subsection("MODEL TYPE DISTRIBUTION"))
             for line in LogFormatter.stats(type_stats):
                 logger.info(line)
             return formatted_data
         except Exception as e:
             logger.error(LogFormatter.error("Failed to format leaderboard data", e))
             raise HTTPException(status_code=500, detail=str(e))
     async def transform_data(self, data: Dict[str, Any]) -> Dict[str, Any]:
         """Transform raw data into the format expected by the frontend"""
         try:
             # Extract model name for logging
             model_name = data.get("fullname", "Unknown")
-            logger.debug(LogFormatter.info(f"Transforming data for model: {model_name}"))
             # Create unique ID combining model name, precision, sha and chat template status
             unique_id = f"{data.get('fullname', 'Unknown')}_{data.get('Precision', 'Unknown')}_{data.get('Model sha', 'Unknown')}_{str(data.get('Chat Template', False))}"
             evaluations = {
                 "bc5cdr_chemical": {
                     "name": "BC5CDR-chemical",
-                    "value": data.get("BC5CDR-chemical Raw", 0),
-                    "normalized_score": data.get("BC5CDR-chemical", 0),
                 },
                 "ncbi_disease": {
-                    "name": "NCBI Disease",
-                    "value": data.get("NCBI Disease Raw", 0),
-                    "normalized_score": data.get("NCBI Disease", 0),
                 },
                 "chemprot": {
                     "name": "ChemProt",
-                    "value": data.get("ChemProt Raw", 0),
-                    "normalized_score": data.get("ChemProt", 0),
                 },
                 "ddi2013": {
                     "name": "DDI2013",
-                    "value": data.get("DDI2013 Raw", 0),
-                    "normalized_score": data.get("DDI2013", 0),
                 },
                 "hoc": {
                     "name": "HoC",
-                    "value": data.get("HoC Raw", 0),
-                    "normalized_score": data.get("HoC", 0),
                 },
                 "litcovid": {
                     "name": "LitCovid",
-                    "value": data.get("LitCovid Raw", 0),
-                    "normalized_score": data.get("LitCovid", 0),
                 },
                 "medqa": {
                     "name": "MedQA (5-Option)",
-                    "value": data.get("MedQA (5-Option) Raw", 0),
-                    "normalized_score": data.get("MedQA (5-Option)", 0),
                 },
                 "pubmedqa": {
                     "name": "PubMedQA",
-                    "value": data.get("PubMedQA Raw", 0),
-                    "normalized_score": data.get("PubMedQA", 0),
                 },
                 "pubmed": {
                     "name": "PubMed",
-                    "value": data.get("PubMed Raw", 0),
-                    "normalized_score": data.get("PubMed", 0),
                 },
                 "ms2": {
                     "name": "MS^2",
-                    "value": data.get("MS^2 Raw", 0),
-                    "normalized_score": data.get("MS^2", 0),
                 },
                 "cochrane_pls": {
                     "name": "Cochrane PLS",
-                    "value": data.get("Cochrane PLS Raw", 0),
-                    "normalized_score": data.get("Cochrane PLS", 0),
                 },
                 "plos": {
                     "name": "PLOS",
-                    "value": data.get("PLOS Raw", 0),
-                    "normalized_score": data.get("PLOS", 0),
                 },
             }
@@ -173,7 +214,7 @@ class LeaderboardService:
                 "is_merged": data.get("Merged", False),
                 "is_moe": data.get("MoE", False),
                 "is_flagged": data.get("Flagged", False),
-                "is_highlighted_by_maintainer": data.get("Official Providers", False)
             }
             metadata = {
@@ -184,18 +225,18 @@ class LeaderboardService:
                 "hub_license": data.get("Hub License"),
                 "hub_hearts": data.get("Hub ❤️"),
                 "params_billions": data.get("#Params (B)"),
-                "co2_cost": data.get("CO₂ cost (kg)", 0)
             }
             # Clean model type by removing emojis if present
             original_type = data.get("Type", "")
             model_type = original_type.lower().strip()
             # Remove emojis and parentheses
             if "(" in model_type:
                 model_type = model_type.split("(")[0].strip()
-            model_type = ''.join(c for c in model_type if not c in '🔶🟢🟩💬🤝🌸 ')
             # Map old model types to new ones
             model_type_mapping = {
                 "fine-tuned": "fined-tuned-on-domain-specific-dataset",
@@ -205,14 +246,18 @@ class LeaderboardService:
                 "ft": "fined-tuned-on-domain-specific-dataset",
                 "finetuning": "fined-tuned-on-domain-specific-dataset",
                 "fine tuning": "fined-tuned-on-domain-specific-dataset",
-                "fine-tuning": "fined-tuned-on-domain-specific-dataset"
             }
             mapped_type = model_type_mapping.get(model_type.lower().strip(), model_type)
             if mapped_type != model_type:
-                logger.debug(LogFormatter.info(f"Model type mapped: {original_type} -> {mapped_type}"))
             transformed_data = {
                 "id": unique_id,
                 "model": {
@@ -222,17 +267,23 @@ class LeaderboardService:
                     "type": mapped_type,
                     "weight_type": data.get("Weight type"),
                     "architecture": data.get("Architecture"),
-                    "average_score": data.get("Average ⬆️"),
-                    "has_chat_template": data.get("Chat Template", False)
                 },
                 "evaluations": evaluations,
                 "features": features,
-                "metadata": metadata
             }
-            logger.debug(LogFormatter.success(f"Successfully transformed data for {model_name}"))
             return transformed_data
         except Exception as e:
-            logger.error(LogFormatter.error(f"Failed to transform data for {data.get('fullname', 'Unknown')}", e))
             raise

 logger = logging.getLogger(__name__)
 class LeaderboardService:
     def __init__(self):
         pass
     async def fetch_raw_data(self) -> List[Dict[str, Any]]:
         """Fetch raw leaderboard data from HuggingFace dataset"""
         try:
             logger.info(LogFormatter.section("FETCHING LEADERBOARD DATA"))
+            logger.info(
+                LogFormatter.info(
+                    f"Loading dataset from {HF_ORGANIZATION}/{HF_AGGREGATED}"
+                )
+            )
             dataset = datasets.load_dataset(
                 f"{HF_ORGANIZATION}/{HF_AGGREGATED}",
+                cache_dir=cache_config.get_cache_path("datasets"),
             )["train"]
             df = dataset.to_pandas()
+            data = df.to_dict("records")
             stats = {
                 "Total_Entries": len(data),
+                "Dataset_Size": f"{df.memory_usage(deep=True).sum() / 1024 / 1024:.1f}MB",
             }
             for line in LogFormatter.stats(stats, "Dataset Statistics"):
                 logger.info(line)
             return data
         except Exception as e:
             logger.error(LogFormatter.error("Failed to fetch leaderboard data", e))
             raise HTTPException(status_code=500, detail=str(e))
         """Get formatted leaderboard data"""
         try:
             logger.info(LogFormatter.section("FORMATTING LEADERBOARD DATA"))
             raw_data = await self.fetch_raw_data()
             formatted_data = []
             type_counts = {}
             error_count = 0
             # Initialize progress tracking
             total_items = len(raw_data)
             logger.info(LogFormatter.info(f"Processing {total_items:,} entries..."))
             for i, item in enumerate(raw_data, 1):
                 try:
                     formatted_item = await self.transform_data(item)
                     formatted_data.append(formatted_item)
                     # Count model types
                     model_type = formatted_item["model"]["type"]
                     type_counts[model_type] = type_counts.get(model_type, 0) + 1
                 except Exception as e:
                     error_count += 1
+                    logger.error(
+                        LogFormatter.error(
+                            f"Failed to format entry {i}/{total_items}", e
+                        )
+                    )
                     continue
                 # Log progress every 10%
                 if i % max(1, total_items // 10) == 0:
                     progress = (i / total_items) * 100
+                    logger.info(
+                        LogFormatter.info(
+                            f"Progress: {LogFormatter.progress_bar(i, total_items)}"
+                        )
+                    )
             # Log final statistics
             stats = {
                 "Total_Processed": total_items,
                 "Successful": len(formatted_data),
+                "Failed": error_count,
             }
             logger.info(LogFormatter.section("PROCESSING SUMMARY"))
             for line in LogFormatter.stats(stats, "Processing Statistics"):
                 logger.info(line)
             # Log model type distribution
             type_stats = {f"Type_{k}": v for k, v in type_counts.items()}
             logger.info(LogFormatter.subsection("MODEL TYPE DISTRIBUTION"))
             for line in LogFormatter.stats(type_stats):
                 logger.info(line)
             return formatted_data
         except Exception as e:
             logger.error(LogFormatter.error("Failed to format leaderboard data", e))
             raise HTTPException(status_code=500, detail=str(e))
+    def _calculate_average_score(self, data: Dict[str, Any]) -> float:
+        scores = []
+        print(data)
+        for key in [
+            "BC5CDR-chemical",
+            "NCBI-disease",
+            "ChemProt",
+            "DDI2013",
+            "HoC",
+            "LitCovid",
+            "MedQA",
+            "PubMedQA",
+            "PubMed",
+            "MS^2",
+            "Cochrane PLS",
+            "PLOS",
+        ]:
+            normalized = data.get(key, {})
+            if not isinstance(normalized, dict):
+                continue
+            for metric, value in normalized.items():
+                if metric in ["bart", "dcr", "fkg"]:
+                    continue
+                if isinstance(value, (int, float)):
+                    scores.append(value)
+        return sum(scores) / len(scores) if scores else 0.0
     async def transform_data(self, data: Dict[str, Any]) -> Dict[str, Any]:
         """Transform raw data into the format expected by the frontend"""
         try:
             # Extract model name for logging
             model_name = data.get("fullname", "Unknown")
+            logger.debug(
+                LogFormatter.info(f"Transforming data for model: {model_name}")
+            )
             # Create unique ID combining model name, precision, sha and chat template status
             unique_id = f"{data.get('fullname', 'Unknown')}_{data.get('Precision', 'Unknown')}_{data.get('Model sha', 'Unknown')}_{str(data.get('Chat Template', False))}"
             evaluations = {
                 "bc5cdr_chemical": {
                     "name": "BC5CDR-chemical",
+                    "value": data.get("BC5CDR-chemical Raw", {}),
+                    "normalized_score": data.get("BC5CDR-chemical", {}),
                 },
                 "ncbi_disease": {
+                    "name": "NCBI-disease",
+                    "value": data.get("NCBI-disease Raw", {}),
+                    "normalized_score": data.get("NCBI-disease", {}),
                 },
                 "chemprot": {
                     "name": "ChemProt",
+                    "value": data.get("ChemProt Raw", {}),
+                    "normalized_score": data.get("ChemProt", {}),
                 },
                 "ddi2013": {
                     "name": "DDI2013",
+                    "value": data.get("DDI2013 Raw", {}),
+                    "normalized_score": data.get("DDI2013", {}),
                 },
                 "hoc": {
                     "name": "HoC",
+                    "value": data.get("HoC Raw", {}),
+                    "normalized_score": data.get("HoC", {}),
                 },
                 "litcovid": {
                     "name": "LitCovid",
+                    "value": data.get("LitCovid Raw", {}),
+                    "normalized_score": data.get("LitCovid", {}),
                 },
                 "medqa": {
                     "name": "MedQA (5-Option)",
+                    "value": data.get("MedQA Raw", {}),
+                    "normalized_score": data.get("MedQA", {}),
                 },
                 "pubmedqa": {
                     "name": "PubMedQA",
+                    "value": data.get("PubMedQA Raw", {}),
+                    "normalized_score": data.get("PubMedQA", {}),
                 },
                 "pubmed": {
                     "name": "PubMed",
+                    "value": data.get("PubMed Raw", {}),
+                    "normalized_score": data.get("PubMed", {}),
                 },
                 "ms2": {
                     "name": "MS^2",
+                    "value": data.get("MS^2 Raw", {}),
+                    "normalized_score": data.get("MS^2", {}),
                 },
                 "cochrane_pls": {
                     "name": "Cochrane PLS",
+                    "value": data.get("Cochrane PLS Raw", {}),
+                    "normalized_score": data.get("Cochrane PLS", {}),
                 },
                 "plos": {
                     "name": "PLOS",
+                    "value": data.get("PLOS Raw", {}),
+                    "normalized_score": data.get("PLOS", {}),
                 },
             }
                 "is_merged": data.get("Merged", False),
                 "is_moe": data.get("MoE", False),
                 "is_flagged": data.get("Flagged", False),
+                "is_highlighted_by_maintainer": data.get("Official Providers", False),
             }
             metadata = {
                 "hub_license": data.get("Hub License"),
                 "hub_hearts": data.get("Hub ❤️"),
                 "params_billions": data.get("#Params (B)"),
+                "co2_cost": data.get("CO₂ cost (kg)", 0),
             }
             # Clean model type by removing emojis if present
             original_type = data.get("Type", "")
             model_type = original_type.lower().strip()
             # Remove emojis and parentheses
             if "(" in model_type:
                 model_type = model_type.split("(")[0].strip()
+            model_type = "".join(c for c in model_type if not c in "🔶🟢🟩💬🤝🌸 ")
             # Map old model types to new ones
             model_type_mapping = {
                 "fine-tuned": "fined-tuned-on-domain-specific-dataset",
                 "ft": "fined-tuned-on-domain-specific-dataset",
                 "finetuning": "fined-tuned-on-domain-specific-dataset",
                 "fine tuning": "fined-tuned-on-domain-specific-dataset",
+                "fine-tuning": "fined-tuned-on-domain-specific-dataset",
             }
             mapped_type = model_type_mapping.get(model_type.lower().strip(), model_type)
             if mapped_type != model_type:
+                logger.debug(
+                    LogFormatter.info(
+                        f"Model type mapped: {original_type} -> {mapped_type}"
+                    )
+                )
             transformed_data = {
                 "id": unique_id,
                 "model": {
                     "type": mapped_type,
                     "weight_type": data.get("Weight type"),
                     "architecture": data.get("Architecture"),
+                    "average_score": self._calculate_average_score(data),
+                    "has_chat_template": data.get("Chat Template", False),
                 },
                 "evaluations": evaluations,
                 "features": features,
+                "metadata": metadata,
             }
+            logger.debug(
+                LogFormatter.success(f"Successfully transformed data for {model_name}")
+            )
             return transformed_data
         except Exception as e:
+            logger.error(
+                LogFormatter.error(
+                    f"Failed to transform data for {data.get('fullname', 'Unknown')}", e
+                )
+            )
             raise

frontend/package.json CHANGED Viewed

@@ -24,7 +24,8 @@
     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "serve-static": "^1.15.0",
-    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -51,5 +52,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://backend:8000"
 }

     "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "serve-static": "^1.15.0",
+    "web-vitals": "^2.1.4",
+    "zustand": "^5.0.3"
   },
   "scripts": {
     "start": "react-scripts start",
       "last 1 safari version"
     ]
   },
+  "proxy": "http://localhost:8000"
 }

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Table/hooks/useDataProcessing.js CHANGED Viewed

@@ -13,6 +13,7 @@ import {
   useFilteredData,
   useColumnVisibility,
 } from "../../../hooks/useDataUtils";
 export const useDataProcessing = (
   data,
@@ -116,14 +117,14 @@ export const useDataProcessing = (
       defaultColumn: {
         sortingFn: (rowA, rowB, columnId) => {
           const isDesc = sorting?.[0]?.desc;
           if (rowA.original.isPinned && rowB.original.isPinned) {
             return (
               pinnedModels.indexOf(rowA.original.id) -
               pinnedModels.indexOf(rowB.original.id)
             );
           }
           if (isDesc) {
             if (rowA.original.isPinned) return -1;
             if (rowB.original.isPinned) return 1;
@@ -131,17 +132,31 @@ export const useDataProcessing = (
             if (rowA.original.isPinned) return -1;
             if (rowB.original.isPinned) return 1;
           }
-          const aValue = rowA.getValue(columnId);
-          const bValue = rowB.getValue(columnId);
           if (typeof aValue === "number" && typeof bValue === "number") {
             return aValue - bValue;
           }
-          return String(aValue).localeCompare(String(bValue));
         },
-      },
     }),
     [filteredData, columns, sorting, columnVisibility, pinnedModels, setSorting]
   );

   useFilteredData,
   useColumnVisibility,
 } from "../../../hooks/useDataUtils";
+import { useSubscoreStore } from "../../../hooks/useSubscoreStore";
 export const useDataProcessing = (
   data,
       defaultColumn: {
         sortingFn: (rowA, rowB, columnId) => {
           const isDesc = sorting?.[0]?.desc;
           if (rowA.original.isPinned && rowB.original.isPinned) {
             return (
               pinnedModels.indexOf(rowA.original.id) -
               pinnedModels.indexOf(rowB.original.id)
             );
           }
           if (isDesc) {
             if (rowA.original.isPinned) return -1;
             if (rowB.original.isPinned) return 1;
             if (rowA.original.isPinned) return -1;
             if (rowB.original.isPinned) return 1;
           }
+          let aValue = rowA.getValue(columnId);
+          let bValue = rowB.getValue(columnId);
+          if (aValue && typeof aValue === "object") {
+            const selected =
+              useSubscoreStore.getState().selections[columnId] ||
+              Object.keys(aValue)[0];
+            aValue = aValue[selected];
+          }
+          if (bValue && typeof bValue === "object") {
+            const selected =
+              useSubscoreStore.getState().selections[columnId] ||
+              Object.keys(bValue)[0];
+            bValue = bValue[selected];
+          }
           if (typeof aValue === "number" && typeof bValue === "number") {
             return aValue - bValue;
           }
+          return String(aValue || "").localeCompare(String(bValue || ""));
         },
+      },
     }),
     [filteredData, columns, sorting, columnVisibility, pinnedModels, setSorting]
   );

frontend/src/pages/LeaderboardPage/components/Leaderboard/constants/defaults.js CHANGED Viewed

@@ -78,7 +78,7 @@ const COLUMN_SIZES = {
   TYPE_ICON: 65,
   MODEL: 400,
   AVERAGE_SCORE: 150,
-  BENCHMARK: 110,
   CO2_COST: 140,
   HUB_HEARTS: 140,
   ARCHITECTURE: 210,

   TYPE_ICON: 65,
   MODEL: 400,
   AVERAGE_SCORE: 150,
+  BENCHMARK: 300,
   CO2_COST: 140,
   HUB_HEARTS: 140,
   ARCHITECTURE: 210,

frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useDataUtils.js CHANGED Viewed

@@ -1,274 +1,103 @@
 import { useMemo } from "react";
 import {
-  looksLikeRegex,
-  parseSearchQuery,
-  getValueByPath,
 } from "../utils/searchUtils";
 // Calculate min/max averages
 export const useAverageRange = (data) => {
-  return useMemo(() => {
-    const averages = data.map((item) => item.model.average_score);
-    return {
-      minAverage: Math.min(...averages),
-      maxAverage: Math.max(...averages),
-    };
-  }, [data]);
 };
 // Generate colors for scores
 export const useColorGenerator = (minAverage, maxAverage) => {
-  return useMemo(() => {
-    const colorCache = new Map();
-    return (value) => {
-      const cached = colorCache.get(value);
-      if (cached) return cached;
-      const normalizedValue = (value - minAverage) / (maxAverage - minAverage);
-      const red = Math.round(255 * (1 - normalizedValue) * 1);
-      const green = Math.round(255 * normalizedValue) * 1;
-      // const color = `rgba(${red}, ${green}, 0, 1)`;
-      const color = `rgba(${red}, 0, ${green}, 1)`;
-      colorCache.set(value, color);
-      return color;
-    };
-  }, [minAverage, maxAverage]);
 };
 // Process data with boolean standardization
 export const useProcessedData = (data, averageMode, visibleColumns) => {
-  return useMemo(() => {
-    let processed = data.map((item) => {
-      const evaluationScores = Object.entries(item.evaluations)
-        .filter(([key]) => {
-          if (averageMode === "all") return true;
-          return visibleColumns.includes(`evaluations.${key}.normalized_score`);
-        })
-        .map(([, value]) => value.normalized_score);
-      const average =
-        evaluationScores.length > 0
-          ? evaluationScores.reduce((a, b) => a + b, 0) /
-            evaluationScores.length
-          : averageMode === "visible"
-          ? null
-          : 0;
-      // Boolean standardization
-      const standardizedFeatures = {
-        ...item.features,
-        is_moe: Boolean(item.features.is_moe),
-        is_flagged: Boolean(item.features.is_flagged),
-        is_highlighted_by_maintainer: Boolean(
-          item.features.is_highlighted_by_maintainer
-        ),
-        is_merged: Boolean(item.features.is_merged),
-        is_not_available_on_hub: Boolean(item.features.is_not_available_on_hub),
-      };
-      return {
-        ...item,
-        features: standardizedFeatures,
-        model: {
-          ...item.model,
-          has_chat_template: Boolean(item.model.has_chat_template),
-          average_score: average,
-        },
-      };
-    });
-    processed.sort((a, b) => {
-      if (a.model.average_score === null && b.model.average_score === null)
-        return 0;
-      if (a.model.average_score === null) return 1;
-      if (b.model.average_score === null) return -1;
-      return b.model.average_score - a.model.average_score;
-    });
-    return processed.map((item, index) => ({
-      ...item,
-      static_rank: index + 1,
-    }));
-  }, [data, averageMode, visibleColumns]);
 };
 // Common filtering logic
 export const useFilteredData = (
-  processedData,
-  selectedPrecisions,
-  selectedTypes,
-  paramsRange,
-  searchValue,
-  selectedBooleanFilters,
-  rankingMode,
-  pinnedModels = [],
-  isOfficialProviderActive = false
-) => {
-  return useMemo(() => {
-    const pinnedData = processedData.filter((row) => {
-      return pinnedModels.includes(row.id);
-    });
-    const unpinnedData = processedData.filter((row) => {
-      return !pinnedModels.includes(row.id);
-    });
-    let filteredUnpinned = unpinnedData;
-    // Filter by official providers
-    if (isOfficialProviderActive) {
-      filteredUnpinned = filteredUnpinned.filter(
-        (row) =>
-          row.features?.is_highlighted_by_maintainer ||
-          row.metadata?.is_highlighted_by_maintainer
-      );
-    }
-    // Filter by precision
-    if (selectedPrecisions.length > 0) {
-      filteredUnpinned = filteredUnpinned.filter((row) =>
-        selectedPrecisions.includes(row.model.precision)
-      );
-    }
-    // Filter by type
-    if (selectedTypes.length > 0) {
-      filteredUnpinned = filteredUnpinned.filter((row) => {
-        const modelType = row.model.type?.toLowerCase().trim();
-        return selectedTypes.some((type) => modelType?.includes(type));
-      });
-    }
-    // Filter by parameters
-    filteredUnpinned = filteredUnpinned.filter((row) => {
-      // Skip parameter filtering if no filter is active
-      if (paramsRange[0] === -1 && paramsRange[1] === 140) return true;
-      const params =
-        row.metadata?.params_billions || row.features?.params_billions;
-      if (params === undefined || params === null) return false;
-      return params >= paramsRange[0] && params < paramsRange[1];
-    });
-    // Filter by search
-    if (searchValue) {
-      const searchQueries = searchValue
-        .split(";")
-        .map((q) => q.trim())
-        .filter((q) => q);
-      if (searchQueries.length > 0) {
-        filteredUnpinned = filteredUnpinned.filter((row) => {
-          return searchQueries.some((query) => {
-            const { specialSearches, textSearch } = parseSearchQuery(query);
-            const specialSearchMatch = specialSearches.every(
-              ({ field, value }) => {
-                const fieldValue = getValueByPath(row, field)
-                  ?.toString()
-                  .toLowerCase();
-                return fieldValue?.includes(value.toLowerCase());
-              }
-            );
-            if (!specialSearchMatch) return false;
-            if (!textSearch) return true;
-            const modelName = row.model.name.toLowerCase();
-            const searchLower = textSearch.toLowerCase();
-            if (looksLikeRegex(textSearch)) {
-              try {
-                const regex = new RegExp(textSearch, "i");
-                return regex.test(modelName);
-              } catch (e) {
-                return modelName.includes(searchLower);
-              }
-            } else {
-              return modelName.includes(searchLower);
-            }
-          });
-        });
-      }
-    }
-    // Filter by booleans
-    if (selectedBooleanFilters.length > 0) {
-      filteredUnpinned = filteredUnpinned.filter((row) => {
-        return selectedBooleanFilters.every((filter) => {
-          const filterValue =
-            typeof filter === "object" ? filter.value : filter;
-          // Maintainer's Highlight keeps positive logic
-          if (filterValue === "is_highlighted_by_maintainer") {
-            return row.features[filterValue];
-          }
-          // For all other filters, invert the logic
-          if (filterValue === "is_not_available_on_hub") {
-            return row.features[filterValue];
-          }
-          return !row.features[filterValue];
-        });
-      });
-    }
-    // Create ordered array of pinned models respecting pinnedModels order
-    const orderedPinnedData = pinnedModels
-      .map((pinnedModelId) =>
-        pinnedData.find((item) => item.id === pinnedModelId)
-      )
-      .filter(Boolean);
-    // Combine all filtered data
-    const allFilteredData = [...filteredUnpinned, ...orderedPinnedData];
-    // Sort all data by average_score for dynamic_rank
-    const sortedByScore = [...allFilteredData].sort((a, b) => {
-      // Si les scores moyens sont différents, trier par score
-      if (a.model.average_score !== b.model.average_score) {
-        if (a.model.average_score === null && b.model.average_score === null)
-          return 0;
-        if (a.model.average_score === null) return 1;
-        if (b.model.average_score === null) return -1;
-        return b.model.average_score - a.model.average_score;
-      }
-      // Si les scores sont égaux, comparer le nom du modèle et la date de soumission
-      if (a.model.name === b.model.name) {
-        // Si même nom, trier par date de soumission (la plus récente d'abord)
-        const dateA = new Date(a.metadata?.submission_date || 0);
-        const dateB = new Date(b.metadata?.submission_date || 0);
-        return dateB - dateA;
-      }
-      // Si noms différents, trier par nom
-      return a.model.name.localeCompare(b.model.name);
-    });
-    // Create Map to store dynamic_ranks
-    const dynamicRankMap = new Map();
-    sortedByScore.forEach((item, index) => {
-      dynamicRankMap.set(item.id, index + 1);
-    });
-    // Add ranks to final data
-    const finalData = [...orderedPinnedData, ...filteredUnpinned].map(
-      (item) => {
-        return {
-          ...item,
-          dynamic_rank: dynamicRankMap.get(item.id),
-          rank: item.isPinned
-            ? pinnedModels.indexOf(item.id) + 1
-            : rankingMode === "static"
-            ? item.static_rank
-            : dynamicRankMap.get(item.id),
-          isPinned: pinnedModels.includes(item.id),
-        };
-      }
-    );
-    return finalData;
-  }, [
     processedData,
     selectedPrecisions,
     selectedTypes,
@@ -276,32 +105,213 @@ export const useFilteredData = (
     searchValue,
     selectedBooleanFilters,
     rankingMode,
-    pinnedModels,
-    isOfficialProviderActive,
-  ]);
 };
 // Column visibility management
 export const useColumnVisibility = (visibleColumns = []) => {
-  // Create secure visibility object
-  const columnVisibility = useMemo(() => {
-    // Check visible columns
-    const safeVisibleColumns = Array.isArray(visibleColumns)
-      ? visibleColumns
-      : [];
-    const visibility = {};
-    try {
-      safeVisibleColumns.forEach((columnKey) => {
-        if (typeof columnKey === "string") {
-          visibility[columnKey] = true;
         }
-      });
-    } catch (error) {
-      console.warn("Error in useColumnVisibility:", error);
-    }
-    return visibility;
-  }, [visibleColumns]);
-  return columnVisibility;
 };

 import { useMemo } from "react";
 import {
+    looksLikeRegex,
+    parseSearchQuery,
+    getValueByPath,
 } from "../utils/searchUtils";
 // Calculate min/max averages
 export const useAverageRange = (data) => {
+    return useMemo(() => {
+        const averages = data.map((item) => item.model.average_score);
+        return {
+            minAverage: Math.min(...averages),
+            maxAverage: Math.max(...averages),
+        };
+    }, [data]);
 };
 // Generate colors for scores
 export const useColorGenerator = (minAverage, maxAverage) => {
+    return useMemo(() => {
+        const colorCache = new Map();
+        return (value) => {
+            const cached = colorCache.get(value);
+            if (cached) return cached;
+            const normalizedValue =
+                (value - minAverage) / (maxAverage - minAverage);
+            const red = Math.round(255 * (1 - normalizedValue) * 1);
+            const green = Math.round(255 * normalizedValue) * 1;
+            // const color = `rgba(${red}, ${green}, 0, 1)`;
+            const color = `rgba(${red}, 0, ${green}, 1)`;
+            colorCache.set(value, color);
+            return color;
+        };
+    }, [minAverage, maxAverage]);
 };
 // Process data with boolean standardization
 export const useProcessedData = (data, averageMode, visibleColumns) => {
+    return useMemo(() => {
+        let processed = data.map((item) => {
+            const evaluationScores = Object.entries(item.evaluations)
+                .filter(([key]) => {
+                    if (averageMode === "all") return true;
+                    return visibleColumns.includes(
+                        `evaluations.${key}.normalized_score`
+                    );
+                })
+                .flatMap(([, value]) =>
+                    Object.entries(value.normalized_score || {})
+                        .filter(([metric]) => metric !== "bert")
+                        .map(([, val]) => val)
+                );
+            // Boolean standardization
+            const standardizedFeatures = {
+                ...item.features,
+                is_moe: Boolean(item.features.is_moe),
+                is_flagged: Boolean(item.features.is_flagged),
+                is_highlighted_by_maintainer: Boolean(
+                    item.features.is_highlighted_by_maintainer
+                ),
+                is_merged: Boolean(item.features.is_merged),
+                is_not_available_on_hub: Boolean(
+                    item.features.is_not_available_on_hub
+                ),
+            };
+            return {
+                ...item,
+                features: standardizedFeatures,
+                model: {
+                    ...item.model,
+                    has_chat_template: Boolean(item.model.has_chat_template),
+                    average_score: item.model.average_score,
+                },
+            };
+        });
+        processed.sort((a, b) => {
+            if (
+                a.model.average_score === null &&
+                b.model.average_score === null
+            )
+                return 0;
+            if (a.model.average_score === null) return 1;
+            if (b.model.average_score === null) return -1;
+            return b.model.average_score - a.model.average_score;
+        });
+        return processed.map((item, index) => ({
+            ...item,
+            static_rank: index + 1,
+        }));
+    }, [data, averageMode, visibleColumns]);
 };
 // Common filtering logic
 export const useFilteredData = (
     processedData,
     selectedPrecisions,
     selectedTypes,
     searchValue,
     selectedBooleanFilters,
     rankingMode,
+    pinnedModels = [],
+    isOfficialProviderActive = false
+) => {
+    return useMemo(() => {
+        const pinnedData = processedData.filter((row) => {
+            return pinnedModels.includes(row.id);
+        });
+        const unpinnedData = processedData.filter((row) => {
+            return !pinnedModels.includes(row.id);
+        });
+        let filteredUnpinned = unpinnedData;
+        // Filter by official providers
+        if (isOfficialProviderActive) {
+            filteredUnpinned = filteredUnpinned.filter(
+                (row) =>
+                    row.features?.is_highlighted_by_maintainer ||
+                    row.metadata?.is_highlighted_by_maintainer
+            );
+        }
+        // Filter by precision
+        if (selectedPrecisions.length > 0) {
+            filteredUnpinned = filteredUnpinned.filter((row) =>
+                selectedPrecisions.includes(row.model.precision)
+            );
+        }
+        // Filter by type
+        if (selectedTypes.length > 0) {
+            filteredUnpinned = filteredUnpinned.filter((row) => {
+                const modelType = row.model.type?.toLowerCase().trim();
+                return selectedTypes.some((type) => modelType?.includes(type));
+            });
+        }
+        // Filter by parameters
+        filteredUnpinned = filteredUnpinned.filter((row) => {
+            // Skip parameter filtering if no filter is active
+            if (paramsRange[0] === -1 && paramsRange[1] === 140) return true;
+            const params =
+                row.metadata?.params_billions || row.features?.params_billions;
+            if (params === undefined || params === null) return false;
+            return params >= paramsRange[0] && params < paramsRange[1];
+        });
+        // Filter by search
+        if (searchValue) {
+            const searchQueries = searchValue
+                .split(";")
+                .map((q) => q.trim())
+                .filter((q) => q);
+            if (searchQueries.length > 0) {
+                filteredUnpinned = filteredUnpinned.filter((row) => {
+                    return searchQueries.some((query) => {
+                        const { specialSearches, textSearch } =
+                            parseSearchQuery(query);
+                        const specialSearchMatch = specialSearches.every(
+                            ({ field, value }) => {
+                                const fieldValue = getValueByPath(row, field)
+                                    ?.toString()
+                                    .toLowerCase();
+                                return fieldValue?.includes(
+                                    value.toLowerCase()
+                                );
+                            }
+                        );
+                        if (!specialSearchMatch) return false;
+                        if (!textSearch) return true;
+                        const modelName = row.model.name.toLowerCase();
+                        const searchLower = textSearch.toLowerCase();
+                        if (looksLikeRegex(textSearch)) {
+                            try {
+                                const regex = new RegExp(textSearch, "i");
+                                return regex.test(modelName);
+                            } catch (e) {
+                                return modelName.includes(searchLower);
+                            }
+                        } else {
+                            return modelName.includes(searchLower);
+                        }
+                    });
+                });
+            }
+        }
+        // Filter by booleans
+        if (selectedBooleanFilters.length > 0) {
+            filteredUnpinned = filteredUnpinned.filter((row) => {
+                return selectedBooleanFilters.every((filter) => {
+                    const filterValue =
+                        typeof filter === "object" ? filter.value : filter;
+                    // Maintainer's Highlight keeps positive logic
+                    if (filterValue === "is_highlighted_by_maintainer") {
+                        return row.features[filterValue];
+                    }
+                    // For all other filters, invert the logic
+                    if (filterValue === "is_not_available_on_hub") {
+                        return row.features[filterValue];
+                    }
+                    return !row.features[filterValue];
+                });
+            });
+        }
+        // Create ordered array of pinned models respecting pinnedModels order
+        const orderedPinnedData = pinnedModels
+            .map((pinnedModelId) =>
+                pinnedData.find((item) => item.id === pinnedModelId)
+            )
+            .filter(Boolean);
+        // Combine all filtered data
+        const allFilteredData = [...filteredUnpinned, ...orderedPinnedData];
+        // Sort all data by average_score for dynamic_rank
+        const sortedByScore = [...allFilteredData].sort((a, b) => {
+            // Si les scores moyens sont différents, trier par score
+            if (a.model.average_score !== b.model.average_score) {
+                if (
+                    a.model.average_score === null &&
+                    b.model.average_score === null
+                )
+                    return 0;
+                if (a.model.average_score === null) return 1;
+                if (b.model.average_score === null) return -1;
+                return b.model.average_score - a.model.average_score;
+            }
+            // Si les scores sont égaux, comparer le nom du modèle et la date de soumission
+            if (a.model.name === b.model.name) {
+                // Si même nom, trier par date de soumission (la plus récente d'abord)
+                const dateA = new Date(a.metadata?.submission_date || 0);
+                const dateB = new Date(b.metadata?.submission_date || 0);
+                return dateB - dateA;
+            }
+            // Si noms différents, trier par nom
+            return a.model.name.localeCompare(b.model.name);
+        });
+        // Create Map to store dynamic_ranks
+        const dynamicRankMap = new Map();
+        sortedByScore.forEach((item, index) => {
+            dynamicRankMap.set(item.id, index + 1);
+        });
+        // Add ranks to final data
+        const finalData = [...orderedPinnedData, ...filteredUnpinned].map(
+            (item) => {
+                return {
+                    ...item,
+                    dynamic_rank: dynamicRankMap.get(item.id),
+                    rank: item.isPinned
+                        ? pinnedModels.indexOf(item.id) + 1
+                        : rankingMode === "static"
+                        ? item.static_rank
+                        : dynamicRankMap.get(item.id),
+                    isPinned: pinnedModels.includes(item.id),
+                };
+            }
+        );
+        return finalData;
+    }, [
+        processedData,
+        selectedPrecisions,
+        selectedTypes,
+        paramsRange,
+        searchValue,
+        selectedBooleanFilters,
+        rankingMode,
+        pinnedModels,
+        isOfficialProviderActive,
+    ]);
 };
 // Column visibility management
 export const useColumnVisibility = (visibleColumns = []) => {
+    // Create secure visibility object
+    const columnVisibility = useMemo(() => {
+        // Check visible columns
+        const safeVisibleColumns = Array.isArray(visibleColumns)
+            ? visibleColumns
+            : [];
+        const visibility = {};
+        try {
+            safeVisibleColumns.forEach((columnKey) => {
+                if (typeof columnKey === "string") {
+                    visibility[columnKey] = true;
+                }
+            });
+        } catch (error) {
+            console.warn("Error in useColumnVisibility:", error);
         }
+        return visibility;
+    }, [visibleColumns]);
+    return columnVisibility;
 };

frontend/src/pages/LeaderboardPage/components/Leaderboard/hooks/useSubscoreStore.js ADDED Viewed

	@@ -0,0 +1,15 @@

+import { create } from "zustand";
+// TODO: maybe subscore isn't the best name
+const useSubscoreStore = create((set) => ({
+    selections: {},
+    setSelection: (key, value) =>
+        set((state) => ({
+            selections: {
+                ...state.selections,
+                [key]: value,
+            },
+        })),
+}));
+export { useSubscoreStore };

frontend/src/pages/LeaderboardPage/components/Leaderboard/utils/columnUtils.js CHANGED Viewed

@@ -1,5 +1,15 @@
-import React from "react";
-import { Box, Typography, Link, Tooltip, IconButton } from "@mui/material";
 import { getModelTypeIcon } from "../constants/modelTypes";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
@@ -11,445 +21,567 @@ import { looksLikeRegex, extractTextSearch } from "./searchUtils";
 import { commonStyles } from "../styles/common";
 import { typeColumnSort } from "../components/Table/hooks/useSorting";
 import {
-  COLUMN_TOOLTIPS,
-  getTooltipStyle,
-  TABLE_TOOLTIPS,
 } from "../constants/tooltips";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { alpha } from "@mui/material/styles";
 import InfoIconWithTooltip from "../../../../../components/shared/InfoIconWithTooltip";
 const DatabaseIcon = () => (
-  <svg
-    className="mr-1.5 text-gray-400 group-hover:text-red-500"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    focusable="false"
-    role="img"
-    width="1.4em"
-    height="1.4em"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 25 25"
-  >
-    <ellipse
-      cx="12.5"
-      cy="5"
-      fill="currentColor"
-      fillOpacity="0.25"
-      rx="7.5"
-      ry="2"
-    ></ellipse>
-    <path
-      d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z"
-      fill="currentColor"
-      opacity="0.5"
-    ></path>
-    <path
-      d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z"
-      fill="currentColor"
-      opacity="0.5"
-    ></path>
-    <path
-      d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z"
-      fill="currentColor"
-    ></path>
-  </svg>
 );
 const HighlightedText = ({ text, searchValue }) => {
-  if (!searchValue) return text;
-  const searches = searchValue
-    .split(";")
-    .map((s) => s.trim())
-    .filter(Boolean);
-  let result = text;
-  let fragments = [{ text: result, isMatch: false }];
-  searches.forEach((search, searchIndex) => {
-    if (!search) return;
-    try {
-      let regex;
-      if (looksLikeRegex(search)) {
-        regex = new RegExp(search, "gi");
-      } else {
-        regex = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
-      }
-      const newFragments = [];
-      fragments.forEach((fragment) => {
-        if (fragment.isMatch) {
-          newFragments.push(fragment);
-          return;
-        }
-        const parts = fragment.text.split(regex);
-        const matches = fragment.text.match(regex);
-        if (!matches) {
-          newFragments.push(fragment);
-          return;
-        }
-        parts.forEach((part, i) => {
-          if (part) newFragments.push({ text: part, isMatch: false });
-          if (i < parts.length - 1) {
-            newFragments.push({
-              text: matches[i],
-              isMatch: true,
-              colorIndex: searchIndex % HIGHLIGHT_COLORS.length,
             });
-          }
-        });
-      });
-      fragments = newFragments;
-    } catch (e) {
-      console.warn("Invalid regex:", search);
-    }
-  });
-  return (
-    <>
-      {fragments.map((fragment, i) =>
-        fragment.isMatch ? (
-          <Box
-            key={i}
-            component="span"
-            sx={{
-              backgroundColor: HIGHLIGHT_COLORS[fragment.colorIndex],
-              color: (theme) =>
-                theme.palette.getContrastText(
-                  HIGHLIGHT_COLORS[fragment.colorIndex]
-                ),
-              fontWeight: 500,
-              px: 0.5,
-              py: "2px",
-              borderRadius: "3px",
-              mx: "1px",
-              overflow: "visible",
-              display: "inline-block",
-            }}
-          >
-            {fragment.text}
-          </Box>
-        ) : (
-          <React.Fragment key={i}>{fragment.text}</React.Fragment>
-        )
-      )}
-    </>
-  );
 };
 const MEDAL_STYLES = {
-  1: {
-    color: "#B58A1B",
-    background: "linear-gradient(135deg, #FFF7E0 0%, #FFD700 100%)",
-    borderColor: "rgba(212, 160, 23, 0.35)",
-    shadowColor: "rgba(212, 160, 23, 0.8)",
-  },
-  2: {
-    color: "#667380",
-    background: "linear-gradient(135deg, #FFFFFF 0%, #D8E3ED 100%)",
-    borderColor: "rgba(124, 139, 153, 0.35)",
-    shadowColor: "rgba(124, 139, 153, 0.8)",
-  },
-  3: {
-    color: "#B85C2F",
-    background: "linear-gradient(135deg, #FDF0E9 0%, #FFBC8C 100%)",
-    borderColor: "rgba(204, 108, 61, 0.35)",
-    shadowColor: "rgba(204, 108, 61, 0.8)",
-  },
 };
 const getMedalStyle = (rank) => {
-  if (rank <= 3) {
-    const medalStyle = MEDAL_STYLES[rank];
     return {
-      color: medalStyle.color,
-      fontWeight: 900,
-      fontStretch: "150%",
-      fontFamily: '"Inter", -apple-system, sans-serif',
-      width: "24px",
-      height: "24px",
-      background: medalStyle.background,
-      border: "1px solid",
-      borderColor: medalStyle.borderColor,
-      borderRadius: "50%",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      fontSize: "0.95rem",
-      lineHeight: 1,
-      padding: 0,
-      boxShadow: `1px 1px 0 ${medalStyle.shadowColor}`,
-      position: "relative",
     };
-  }
-  return {
-    color: "inherit",
-    fontWeight: rank <= 10 ? 600 : 400,
-  };
 };
 const getRankStyle = (rank) => getMedalStyle(rank);
 const RankIndicator = ({ rank, previousRank, mode }) => {
-  const rankChange = previousRank ? previousRank - rank : 0;
-  const RankChangeIndicator = ({ change }) => {
-    if (!change || mode === "dynamic") return null;
-    const getChangeColor = (change) => {
-      if (change > 0) return "success.main";
-      if (change < 0) return "error.main";
-      return "grey.500";
-    };
-    const getChangeIcon = (change) => {
-      if (change > 0) return <TrendingUpIcon sx={{ fontSize: "1rem" }} />;
-      if (change < 0) return <TrendingDownIcon sx={{ fontSize: "1rem" }} />;
-      return <RemoveIcon sx={{ fontSize: "1rem" }} />;
     };
     return (
-      <Tooltip
-        title={`${Math.abs(change)} position${
-          Math.abs(change) > 1 ? "s" : ""
-        } ${change > 0 ? "up" : "down"}`}
-        arrow
-        placement="right"
-      >
         <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            color: getChangeColor(change),
-            ml: 0.5,
-            fontSize: "0.75rem",
-          }}
         >
-          {getChangeIcon(change)}
         </Box>
-      </Tooltip>
     );
-  };
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-      }}
-    >
-      <Typography
-        sx={{
-          ...getRankStyle(rank),
-          display: "flex",
-          alignItems: "center",
-          lineHeight: 1,
-          position: "relative",
-        }}
-      >
-        {rank <= 3 ? (
-          <>
-            <Box component="span" sx={{ position: "relative", zIndex: 1 }}>
-              {rank}
-            </Box>
-            <RankChangeIndicator change={rankChange} />
-          </>
-        ) : (
-          <>
-            <Box component="span" sx={{ position: "relative", zIndex: 1 }}>
-              {rank}
-            </Box>
-            <RankChangeIndicator change={rankChange} />
-          </>
-        )}
-      </Typography>
-    </Box>
-  );
 };
 const getDetailsUrl = (modelName) => {
-  const formattedName = modelName.replace("/", "__");
-  return `https://huggingface.co/datasets/TheFinAI/lm-eval-results-private`;
 };
 const HeaderLabel = ({ label, tooltip, className, isSorted }) => (
-  <Tooltip
-    title={label}
-    arrow
-    placement="top"
-    enterDelay={1000}
-    componentsProps={getTooltipStyle}
-  >
-    <Typography
-      className={className}
-      sx={{
-        fontWeight: 600,
-        color: isSorted ? "primary.main" : "grey.700",
-        flex: 1,
-        transition: "max-width 0.2s ease",
-        maxWidth: "100%",
-        ...(label === "Rank" || label === "Type"
-          ? {
-              overflow: "visible",
-              whiteSpace: "normal",
-              textOverflow: "clip",
-              textAlign: "center",
-            }
-          : {
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-            }),
-        "@media (hover: hover)": {
-          ".MuiTableCell-root:hover &": {
-            maxWidth: tooltip ? "calc(100% - 48px)" : "100%",
-          },
-        },
-      }}
     >
-      {label}
-    </Typography>
-  </Tooltip>
 );
 const InfoIcon = ({ tooltip }) => (
-  <Box
-    component="span"
-    sx={{
-      opacity: 0.5,
-      display: "flex",
-      alignItems: "center",
-      ml: 0.5,
-    }}
-  >
-    <InfoIconWithTooltip tooltip={tooltip} />
-  </Box>
-);
-const createHeaderCell = (label, tooltip) => (header) =>
-  (
     <Box
-      className="header-content"
-      sx={{
-        display: "flex",
-        alignItems: "center",
-        width: "100%",
-        position: "relative",
-      }}
-    >
-      <HeaderLabel
-        label={label}
-        tooltip={tooltip}
-        className="header-label"
-        isSorted={header?.column?.getIsSorted()}
-      />
-      <Box
         sx={{
-          display: "flex",
-          alignItems: "center",
-          gap: 0.5,
-          ml: "auto",
-          flexShrink: 0,
         }}
-      >
-        {tooltip && <InfoIcon tooltip={tooltip} />}
-      </Box>
     </Box>
-  );
-const createModelHeader =
-  (totalModels, officialProvidersCount = 0, isOfficialProviderActive = false) =>
-  ({ table }) => {
     return (
-      <Box
-        sx={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          width: "100%",
-        }}
-      >
         <Box
-          sx={{
-            display: "flex",
-            alignItems: "center",
-            gap: 1,
-          }}
-        >
-          <Typography
             sx={{
-              fontWeight: 600,
-              color: "grey.700",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
             }}
-          >
-            Model
-          </Typography>
         </Box>
-      </Box>
     );
-  };
 const BooleanValue = ({ value }) => {
-  if (value === null || value === undefined)
-    return <Typography variant="body2">-</Typography>;
-  return (
-    <Box
-      sx={(theme) => ({
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: "4px",
-        px: 1,
-        py: 0.5,
-        backgroundColor: value
-          ? theme.palette.mode === "dark"
-            ? alpha(theme.palette.success.main, 0.1)
-            : alpha(theme.palette.success.main, 0.1)
-          : theme.palette.mode === "dark"
-          ? alpha(theme.palette.error.main, 0.1)
-          : alpha(theme.palette.error.main, 0.1),
-      })}
-    >
-      <Typography
-        variant="body2"
-        sx={(theme) => ({
-          color: value
-            ? theme.palette.mode === "dark"
-              ? theme.palette.success.light
-              : theme.palette.success.dark
-            : theme.palette.mode === "dark"
-            ? theme.palette.error.light
-            : theme.palette.error.dark,
-        })}
-      >
-        {value ? "Yes" : "No"}
-      </Typography>
-    </Box>
-  );
 };
 export const createColumns = (
-  getColorForValue,
-  scoreDisplay = "normalized",
-  columnVisibility = {},
-  totalModels,
-  averageMode = "all",
-  searchValue = "",
-  rankingMode = "static",
-  onTogglePin,
-  hasPinnedRows = false
 ) => {
     // Ajuster les tailles des colonnes en fonction de la présence de lignes épinglées
     const getColumnSize = (defaultSize) =>
@@ -650,8 +782,13 @@ export const createColumns = (
         {
             accessorKey: "model.average_score",
             header: createHeaderCell("Average", COLUMN_TOOLTIPS.AVERAGE),
-            cell: ({ row, getValue }) =>
-                createScoreCell(getValue, row, "model.average_score"),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.average_score"],
             meta: {
                 headerStyle: {
@@ -684,13 +821,23 @@ export const createColumns = (
             },
         },
     ];
-    const createScoreCell = (getValue, row, field) => {
-        const value = getValue();
         const rawValue = field.includes("normalized")
             ? row.original.evaluations[field.split(".")[1]]?.value
-            : value;
         const isAverageColumn = field === "model.average_score";
         const hasNoValue = value === null || value === undefined;
         return (
@@ -738,7 +885,7 @@ export const createColumns = (
                             "-"
                         ) : (
                             <>
-                                {isAverageColumn ? (
                                     <>
                                         {value.toFixed(2)}
                                         <span style={{ opacity: 0.5 }}> %</span>
@@ -764,14 +911,16 @@ export const createColumns = (
             accessorKey: "evaluations.bc5cdr_chemical.normalized_score",
             header: createHeaderCell(
                 "BC5CDR-chemical",
-                COLUMN_TOOLTIPS.BC5CDR_CHEMICAL
             ),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.bc5cdr_chemical.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.bc5cdr_chemical.normalized_score"
             ],
@@ -780,118 +929,160 @@ export const createColumns = (
             accessorKey: "evaluations.ncbi_disease.normalized_score",
             header: createHeaderCell(
                 "NCBI Disease",
-                COLUMN_TOOLTIPS.NCBI_DISEASE
             ),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.ncbi_disease.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ncbi_disease.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.chemprot.normalized_score",
-            header: createHeaderCell("ChemProt", COLUMN_TOOLTIPS.CHEMPROT),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.chemprot.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.chemprot.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.ddi2013.normalized_score",
-            header: createHeaderCell("DDI2013", COLUMN_TOOLTIPS.DDI2013),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.ddi2013.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ddi2013.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.hoc.normalized_score",
-            header: createHeaderCell("HoC", COLUMN_TOOLTIPS.HOC),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.hoc.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.hoc.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.litcovid.normalized_score",
-            header: createHeaderCell("LitCovid", COLUMN_TOOLTIPS.LITCOVID),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.litcovid.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.litcovid.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.medqa.normalized_score",
-            header: createHeaderCell("MedQA (5-Option)", COLUMN_TOOLTIPS.MEDQA),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.medqa.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.medqa.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.pubmedqa.normalized_score",
-            header: createHeaderCell("PubMedQA", COLUMN_TOOLTIPS.PUBMEDQA),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.pubmedqa.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.pubmedqa.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.pubmed.normalized_score",
-            header: createHeaderCell("PubMed", COLUMN_TOOLTIPS.PUBMED),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.pubmed.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.pubmed.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.ms2.normalized_score",
-            header: createHeaderCell("MS^2", COLUMN_TOOLTIPS.MS2),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.ms2.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ms2.normalized_score"
             ],
@@ -900,27 +1091,34 @@ export const createColumns = (
             accessorKey: "evaluations.cochrane_pls.normalized_score",
             header: createHeaderCell(
                 "Cochrane PLS",
-                COLUMN_TOOLTIPS.COCHRANE_PLS
             ),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.cochrane_pls.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.cochrane_pls.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.plos.normalized_score",
-            header: createHeaderCell("PLOS", COLUMN_TOOLTIPS.PLOS),
-            cell: ({ row, getValue }) =>
-                createScoreCell(
-                    getValue,
-                    row,
-                    "evaluations.plos.normalized_score"
-                ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.plos.normalized_score"
             ],

+import React, { useState } from "react";
+import {
+    Box,
+    Typography,
+    Link,
+    Tooltip,
+    IconButton,
+    Badge,
+    Chip,
+    Menu,
+    MenuItem,
+} from "@mui/material";
 import { getModelTypeIcon } from "../constants/modelTypes";
 import TrendingUpIcon from "@mui/icons-material/TrendingUp";
 import TrendingDownIcon from "@mui/icons-material/TrendingDown";
 import { commonStyles } from "../styles/common";
 import { typeColumnSort } from "../components/Table/hooks/useSorting";
 import {
+    COLUMN_TOOLTIPS,
+    getTooltipStyle,
+    TABLE_TOOLTIPS,
 } from "../constants/tooltips";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import { alpha } from "@mui/material/styles";
 import InfoIconWithTooltip from "../../../../../components/shared/InfoIconWithTooltip";
+import { useSubscoreStore } from "../hooks/useSubscoreStore";
 const DatabaseIcon = () => (
+    <svg
+        className="mr-1.5 text-gray-400 group-hover:text-red-500"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-hidden="true"
+        focusable="false"
+        role="img"
+        width="1.4em"
+        height="1.4em"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 25 25"
+    >
+        <ellipse
+            cx="12.5"
+            cy="5"
+            fill="currentColor"
+            fillOpacity="0.25"
+            rx="7.5"
+            ry="2"
+        ></ellipse>
+        <path
+            d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z"
+            fill="currentColor"
+            opacity="0.5"
+        ></path>
+        <path
+            d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z"
+            fill="currentColor"
+            opacity="0.5"
+        ></path>
+        <path
+            d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z"
+            fill="currentColor"
+        ></path>
+    </svg>
 );
 const HighlightedText = ({ text, searchValue }) => {
+    if (!searchValue) return text;
+    const searches = searchValue
+        .split(";")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    let result = text;
+    let fragments = [{ text: result, isMatch: false }];
+    searches.forEach((search, searchIndex) => {
+        if (!search) return;
+        try {
+            let regex;
+            if (looksLikeRegex(search)) {
+                regex = new RegExp(search, "gi");
+            } else {
+                regex = new RegExp(
+                    search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"),
+                    "gi"
+                );
+            }
+            const newFragments = [];
+            fragments.forEach((fragment) => {
+                if (fragment.isMatch) {
+                    newFragments.push(fragment);
+                    return;
+                }
+                const parts = fragment.text.split(regex);
+                const matches = fragment.text.match(regex);
+                if (!matches) {
+                    newFragments.push(fragment);
+                    return;
+                }
+                parts.forEach((part, i) => {
+                    if (part) newFragments.push({ text: part, isMatch: false });
+                    if (i < parts.length - 1) {
+                        newFragments.push({
+                            text: matches[i],
+                            isMatch: true,
+                            colorIndex: searchIndex % HIGHLIGHT_COLORS.length,
+                        });
+                    }
+                });
             });
+            fragments = newFragments;
+        } catch (e) {
+            console.warn("Invalid regex:", search);
+        }
+    });
+    return (
+        <>
+            {fragments.map((fragment, i) =>
+                fragment.isMatch ? (
+                    <Box
+                        key={i}
+                        component="span"
+                        sx={{
+                            backgroundColor:
+                                HIGHLIGHT_COLORS[fragment.colorIndex],
+                            color: (theme) =>
+                                theme.palette.getContrastText(
+                                    HIGHLIGHT_COLORS[fragment.colorIndex]
+                                ),
+                            fontWeight: 500,
+                            px: 0.5,
+                            py: "2px",
+                            borderRadius: "3px",
+                            mx: "1px",
+                            overflow: "visible",
+                            display: "inline-block",
+                        }}
+                    >
+                        {fragment.text}
+                    </Box>
+                ) : (
+                    <React.Fragment key={i}>{fragment.text}</React.Fragment>
+                )
+            )}
+        </>
+    );
 };
 const MEDAL_STYLES = {
+    1: {
+        color: "#B58A1B",
+        background: "linear-gradient(135deg, #FFF7E0 0%, #FFD700 100%)",
+        borderColor: "rgba(212, 160, 23, 0.35)",
+        shadowColor: "rgba(212, 160, 23, 0.8)",
+    },
+    2: {
+        color: "#667380",
+        background: "linear-gradient(135deg, #FFFFFF 0%, #D8E3ED 100%)",
+        borderColor: "rgba(124, 139, 153, 0.35)",
+        shadowColor: "rgba(124, 139, 153, 0.8)",
+    },
+    3: {
+        color: "#B85C2F",
+        background: "linear-gradient(135deg, #FDF0E9 0%, #FFBC8C 100%)",
+        borderColor: "rgba(204, 108, 61, 0.35)",
+        shadowColor: "rgba(204, 108, 61, 0.8)",
+    },
 };
 const getMedalStyle = (rank) => {
+    if (rank <= 3) {
+        const medalStyle = MEDAL_STYLES[rank];
+        return {
+            color: medalStyle.color,
+            fontWeight: 900,
+            fontStretch: "150%",
+            fontFamily: '"Inter", -apple-system, sans-serif',
+            width: "24px",
+            height: "24px",
+            background: medalStyle.background,
+            border: "1px solid",
+            borderColor: medalStyle.borderColor,
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "0.95rem",
+            lineHeight: 1,
+            padding: 0,
+            boxShadow: `1px 1px 0 ${medalStyle.shadowColor}`,
+            position: "relative",
+        };
+    }
     return {
+        color: "inherit",
+        fontWeight: rank <= 10 ? 600 : 400,
     };
 };
 const getRankStyle = (rank) => getMedalStyle(rank);
 const RankIndicator = ({ rank, previousRank, mode }) => {
+    const rankChange = previousRank ? previousRank - rank : 0;
+    const RankChangeIndicator = ({ change }) => {
+        if (!change || mode === "dynamic") return null;
+        const getChangeColor = (change) => {
+            if (change > 0) return "success.main";
+            if (change < 0) return "error.main";
+            return "grey.500";
+        };
+        const getChangeIcon = (change) => {
+            if (change > 0) return <TrendingUpIcon sx={{ fontSize: "1rem" }} />;
+            if (change < 0)
+                return <TrendingDownIcon sx={{ fontSize: "1rem" }} />;
+            return <RemoveIcon sx={{ fontSize: "1rem" }} />;
+        };
+        return (
+            <Tooltip
+                title={`${Math.abs(change)} position${
+                    Math.abs(change) > 1 ? "s" : ""
+                } ${change > 0 ? "up" : "down"}`}
+                arrow
+                placement="right"
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        color: getChangeColor(change),
+                        ml: 0.5,
+                        fontSize: "0.75rem",
+                    }}
+                >
+                    {getChangeIcon(change)}
+                </Box>
+            </Tooltip>
+        );
     };
     return (
         <Box
+            sx={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+            }}
         >
+            <Typography
+                sx={{
+                    ...getRankStyle(rank),
+                    display: "flex",
+                    alignItems: "center",
+                    lineHeight: 1,
+                    position: "relative",
+                }}
+            >
+                {rank <= 3 ? (
+                    <>
+                        <Box
+                            component="span"
+                            sx={{ position: "relative", zIndex: 1 }}
+                        >
+                            {rank}
+                        </Box>
+                        <RankChangeIndicator change={rankChange} />
+                    </>
+                ) : (
+                    <>
+                        <Box
+                            component="span"
+                            sx={{ position: "relative", zIndex: 1 }}
+                        >
+                            {rank}
+                        </Box>
+                        <RankChangeIndicator change={rankChange} />
+                    </>
+                )}
+            </Typography>
         </Box>
     );
 };
 const getDetailsUrl = (modelName) => {
+    const formattedName = modelName.replace("/", "__");
+    return `https://huggingface.co/datasets/TheFinAI/lm-eval-results-private`;
 };
 const HeaderLabel = ({ label, tooltip, className, isSorted }) => (
+    <Tooltip
+        title={label}
+        arrow
+        placement="top"
+        enterDelay={1000}
+        componentsProps={getTooltipStyle}
     >
+        <Typography
+            className={className}
+            sx={{
+                fontWeight: 600,
+                color: isSorted ? "primary.main" : "grey.700",
+                flex: 1,
+                transition: "max-width 0.2s ease",
+                maxWidth: "100%",
+                ...(label === "Rank" || label === "Type"
+                    ? {
+                          overflow: "visible",
+                          whiteSpace: "normal",
+                          textOverflow: "clip",
+                          textAlign: "center",
+                      }
+                    : {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                      }),
+                "@media (hover: hover)": {
+                    ".MuiTableCell-root:hover &": {
+                        maxWidth: tooltip ? "calc(100% - 48px)" : "100%",
+                    },
+                },
+            }}
+        >
+            {label}
+        </Typography>
+    </Tooltip>
 );
 const InfoIcon = ({ tooltip }) => (
     <Box
+        component="span"
         sx={{
+            opacity: 0.5,
+            display: "flex",
+            alignItems: "center",
+            ml: 0.5,
         }}
+    >
+        <InfoIconWithTooltip tooltip={tooltip} />
     </Box>
+);
+const metricsMap = {
+    "evaluations.bc5cdr_chemical.normalized_score": ["Exact F1 entity"],
+    "evaluations.ncbi_disease.normalized_score": ["Exact F1 entity"],
+    "evaluations.chemprot.normalized_score": ["Macro F1", "Weighted F1"],
+    "evaluations.ddi2013.normalized_score": ["Macro F1", "Weighted F1"],
+    "evaluations.hoc.normalized_score": ["Macro F1", "Weighted F1"],
+    "evaluations.litcovid.normalized_score": ["Macro F1", "Weighted F1"],
+    "evaluations.pubmedqa.normalized_score": ["Accuracy", "Macro-F1"],
+    "evaluations.medqa.normalized_score": ["Accuracy", "Macro-F1"],
+    "evaluations.pubmed.normalized_score": [
+        // "bart",
+        "bert",
+        "rouge1",
+        "rougeL",
+        "rough2",
+    ],
+    "evaluations.ms2.normalized_score": [
+        // "bart",
+        "bert",
+        "rouge1",
+        "rougeL",
+        "rough2",
+    ],
+    "evaluations.cochrane_pls.normalized_score": [
+        // "bart",
+        "bert",
+        "dcr",
+        "fkg",
+        "rouge1",
+        "rougeL",
+        "rough2",
+    ],
+    "evaluations.plos.normalized_score": [
+        // "bart",
+        "bert",
+        "dcr",
+        "fkg",
+        "rouge1",
+        "rougeL",
+        "rough2",
+    ],
+};
+const createHeaderCell = (label, tooltip, accessorKey) => (header) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const selected = useSubscoreStore(
+        (s) =>
+            s.selections[accessorKey] ||
+            (metricsMap[accessorKey] && metricsMap[accessorKey][0])
+    );
+    const setSelected = useSubscoreStore((s) => s.setSelection);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = (value) => {
+        if (value) setSelected(accessorKey, value);
+        setAnchorEl(null);
+    };
     return (
         <Box
+            className="header-content"
             sx={{
+                display: "flex",
+                alignItems: "center",
+                width: "100%",
+                overflow: "hidden",
             }}
+        >
+            <HeaderLabel
+                label={label}
+                tooltip={tooltip}
+                className="header-label"
+                isSorted={header?.column?.getIsSorted()}
+                sx={{
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    textOverflow: "ellipsis",
+                }}
+            />
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    ml: "auto",
+                    flexShrink: 0,
+                    maxWidth: "50%",
+                }}
+            >
+                {accessorKey in metricsMap && (
+                    <>
+                        <Chip
+                            label={selected}
+                            size="small"
+                            onClick={handleClick}
+                            sx={{
+                                cursor: "pointer",
+                                maxWidth: "100%",
+                                minWidth: 0,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                                flexShrink: 1,
+                            }}
+                        />
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={Boolean(anchorEl)}
+                            onClose={() => handleClose(null)}
+                        >
+                            {metricsMap[accessorKey].map((item) => (
+                                <MenuItem
+                                    key={item}
+                                    onClick={() => handleClose(item)}
+                                    sx={{
+                                        fontWeight:
+                                            selected === item
+                                                ? "bold"
+                                                : "normal",
+                                    }}
+                                >
+                                    {item}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    </>
+                )}
+                {tooltip && <InfoIcon tooltip={tooltip} />}
+            </Box>
         </Box>
     );
+};
+const createModelHeader =
+    (
+        totalModels,
+        officialProvidersCount = 0,
+        isOfficialProviderActive = false
+    ) =>
+    ({ table }) => {
+        return (
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                }}
+            >
+                <Box
+                    sx={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1,
+                    }}
+                >
+                    <Typography
+                        sx={{
+                            fontWeight: 600,
+                            color: "grey.700",
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                        }}
+                    >
+                        Model
+                    </Typography>
+                </Box>
+            </Box>
+        );
+    };
 const BooleanValue = ({ value }) => {
+    if (value === null || value === undefined)
+        return <Typography variant="body2">-</Typography>;
+    return (
+        <Box
+            sx={(theme) => ({
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "4px",
+                px: 1,
+                py: 0.5,
+                backgroundColor: value
+                    ? theme.palette.mode === "dark"
+                        ? alpha(theme.palette.success.main, 0.1)
+                        : alpha(theme.palette.success.main, 0.1)
+                    : theme.palette.mode === "dark"
+                    ? alpha(theme.palette.error.main, 0.1)
+                    : alpha(theme.palette.error.main, 0.1),
+            })}
+        >
+            <Typography
+                variant="body2"
+                sx={(theme) => ({
+                    color: value
+                        ? theme.palette.mode === "dark"
+                            ? theme.palette.success.light
+                            : theme.palette.success.dark
+                        : theme.palette.mode === "dark"
+                        ? theme.palette.error.light
+                        : theme.palette.error.dark,
+                })}
+            >
+                {value ? "Yes" : "No"}
+            </Typography>
+        </Box>
+    );
 };
 export const createColumns = (
+    getColorForValue,
+    scoreDisplay = "normalized",
+    columnVisibility = {},
+    totalModels,
+    averageMode = "all",
+    searchValue = "",
+    rankingMode = "static",
+    onTogglePin,
+    hasPinnedRows = false
 ) => {
     // Ajuster les tailles des colonnes en fonction de la présence de lignes épinglées
     const getColumnSize = (defaultSize) =>
         {
             accessorKey: "model.average_score",
             header: createHeaderCell("Average", COLUMN_TOOLTIPS.AVERAGE),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="model.average_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES["model.average_score"],
             meta: {
                 headerStyle: {
             },
         },
     ];
+    const ScoreCell = ({ getValue, row, field }) => {
         const rawValue = field.includes("normalized")
             ? row.original.evaluations[field.split(".")[1]]?.value
+            : getValue()[field];
+        const selected = useSubscoreStore(
+            (s) =>
+                s.selections[field] ||
+                (metricsMap[field] && metricsMap[field][0])
+        );
         const isAverageColumn = field === "model.average_score";
+        const value = isAverageColumn ? getValue() : getValue()[selected];
+        if (isAverageColumn) {
+            console.log(getValue.toString(), row, getValue());
+        }
         const hasNoValue = value === null || value === undefined;
         return (
                             "-"
                         ) : (
                             <>
+                                 {isAverageColumn ? (
                                     <>
                                         {value.toFixed(2)}
                                         <span style={{ opacity: 0.5 }}> %</span>
             accessorKey: "evaluations.bc5cdr_chemical.normalized_score",
             header: createHeaderCell(
                 "BC5CDR-chemical",
+                COLUMN_TOOLTIPS.BC5CDR_CHEMICAL,
+                "evaluations.bc5cdr_chemical.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.bc5cdr_chemical.normalized_score"
+                />
             ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.bc5cdr_chemical.normalized_score"
             ],
             accessorKey: "evaluations.ncbi_disease.normalized_score",
             header: createHeaderCell(
                 "NCBI Disease",
+                COLUMN_TOOLTIPS.NCBI_DISEASE,
+                "evaluations.ncbi_disease.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.ncbi_disease.normalized_score"
+                />
             ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ncbi_disease.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.chemprot.normalized_score",
+            header: createHeaderCell(
+                "ChemProt",
+                COLUMN_TOOLTIPS.CHEMPROT,
+                "evaluations.chemprot.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.chemprot.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.chemprot.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.ddi2013.normalized_score",
+            header: createHeaderCell(
+                "DDI2013",
+                COLUMN_TOOLTIPS.DDI2013,
+                "evaluations.ddi2013.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.ddi2013.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ddi2013.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.hoc.normalized_score",
+            header: createHeaderCell(
+                "HoC",
+                COLUMN_TOOLTIPS.HOC,
+                "evaluations.hoc.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.hoc.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.hoc.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.litcovid.normalized_score",
+            header: createHeaderCell(
+                "LitCovid",
+                COLUMN_TOOLTIPS.LITCOVID,
+                "evaluations.litcovid.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.litcovid.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.litcovid.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.medqa.normalized_score",
+            header: createHeaderCell(
+                "MedQA (5-Option)",
+                COLUMN_TOOLTIPS.MEDQA,
+                "evaluations.medqa.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.medqa.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.medqa.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.pubmedqa.normalized_score",
+            header: createHeaderCell(
+                "PubMedQA",
+                COLUMN_TOOLTIPS.PUBMEDQA,
+                "evaluations.pubmedqa.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.pubmedqa.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.pubmedqa.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.pubmed.normalized_score",
+            header: createHeaderCell(
+                "PubMed",
+                COLUMN_TOOLTIPS.PUBMED,
+                "evaluations.pubmed.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.pubmed.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.pubmed.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.ms2.normalized_score",
+            header: createHeaderCell(
+                "MS^2",
+                COLUMN_TOOLTIPS.MS2,
+                "evaluations.ms2.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.ms2.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.ms2.normalized_score"
             ],
             accessorKey: "evaluations.cochrane_pls.normalized_score",
             header: createHeaderCell(
                 "Cochrane PLS",
+                COLUMN_TOOLTIPS.COCHRANE_PLS,
+                "evaluations.cochrane_pls.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.cochrane_pls.normalized_score"
+                />
             ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.cochrane_pls.normalized_score"
             ],
         },
         {
             accessorKey: "evaluations.plos.normalized_score",
+            header: createHeaderCell(
+                "PLOS",
+                COLUMN_TOOLTIPS.PLOS,
+                "evaluations.plos.normalized_score"
+            ),
+            cell: ({ row, getValue }) => (
+                <ScoreCell
+                    getValue={getValue}
+                    row={row}
+                    field="evaluations.plos.normalized_score"
+                />
+            ),
             size: TABLE_DEFAULTS.COLUMNS.COLUMN_SIZES[
                 "evaluations.plos.normalized_score"
             ],