udpate filters | url handling | searchbar and languages

client/src/components/LeaderboardFilters/LeaderboardFilters.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import {
   Box,
   Stack,
@@ -16,6 +16,25 @@ import { useDebounce } from "../../hooks/useDebounce";
 import { alpha } from "@mui/material/styles";
 import { useMediaQuery } from "@mui/material";
 
+// Helper function to get the category group of a section
+const getSectionGroup = (id) => {
+  const groups = {
+    modalities: ["agentic", "vision", "audio"],
+    capabilities: ["code", "math"],
+    languages: ["language"],
+    domains: ["financial", "medical", "legal"],
+    evaluation: ["safety"],
+    misc: ["uncategorized"],
+  };
+
+  for (const [group, ids] of Object.entries(groups)) {
+    if (ids.includes(id)) {
+      return group;
+    }
+  }
+  return "misc";
+};
+
 const LeaderboardFilters = ({ allSections }) => {
   const {
     setSearchQuery,
@@ -24,10 +43,14 @@ const LeaderboardFilters = ({ allSections }) => {
     totalLeaderboards,
     filteredCount,
     filterLeaderboards,
+    filterLeaderboardsForCount,
     leaderboards,
+    selectedCategory,
+    setSelectedCategory,
+    searchQuery,
   } = useLeaderboard();
 
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(searchQuery || "");
   const [totalArenaCount, setTotalArenaCount] = useState(0);
   const debouncedSearch = useDebounce(inputValue, 200);
 
@@ -36,19 +59,60 @@ const LeaderboardFilters = ({ allSections }) => {
     setSearchQuery(debouncedSearch);
   }, [debouncedSearch, setSearchQuery]);
 
-  // Update total arena count when toggle changes
+  // Update input value when searchQuery changes externally
   React.useEffect(() => {
-    if (arenaOnly) {
-      const arenaCount = leaderboards.filter((board) =>
-        board.tags?.includes("judge:humans")
-      ).length;
-      setTotalArenaCount(arenaCount);
-    }
-  }, [arenaOnly, leaderboards]);
+    setInputValue(searchQuery || "");
+  }, [searchQuery]);
+
+  // Update total arena count
+  React.useEffect(() => {
+    // Si une catégorie est sélectionnée, on compte les arena dans cette catégorie
+    const boardsToCount = selectedCategory
+      ? allSections.find((section) => section.id === selectedCategory)?.data ||
+        []
+      : allSections.reduce((acc, section) => [...acc, ...section.data], []);
+
+    const arenaCount = boardsToCount.filter((board) =>
+      board.tags?.includes("judge:humans")
+    ).length;
+    setTotalArenaCount(arenaCount);
+  }, [leaderboards, selectedCategory, allSections]);
 
   // Check if any filter is active
   const isFilterActive = debouncedSearch || arenaOnly;
 
+  // Calculer le nombre total en fonction de la catégorie sélectionnée
+  const totalCount = useMemo(() => {
+    if (selectedCategory) {
+      const categorySection = allSections.find(
+        (section) => section.id === selectedCategory
+      );
+      return categorySection ? categorySection.data.length : 0;
+    }
+    // Quand aucune catégorie n'est sélectionnée, on compte tous les leaderboards de toutes les sections
+    return allSections.reduce(
+      (total, section) => total + section.data.length,
+      0
+    );
+  }, [selectedCategory, allSections]);
+
+  // Calculer le nombre filtré en prenant en compte tous les filtres
+  const currentFilteredCount = useMemo(() => {
+    if (selectedCategory) {
+      const categorySection = allSections.find(
+        (section) => section.id === selectedCategory
+      );
+      if (!categorySection) return 0;
+      return filterLeaderboards(categorySection.data).length;
+    }
+    // Quand aucune catégorie n'est sélectionnée, on compte dans toutes les sections
+    const allBoards = allSections.reduce(
+      (acc, section) => [...acc, ...section.data],
+      []
+    );
+    return filterLeaderboards(allBoards).length;
+  }, [selectedCategory, allSections, filterLeaderboards]);
+
   const isMobile = useMediaQuery((theme) => theme.breakpoints.down("md"));
 
   return (
@@ -70,68 +134,81 @@ const LeaderboardFilters = ({ allSections }) => {
           justifyContent="center"
           sx={{ pb: 2 }}
         >
-          {allSections.map(({ id, title, data }) => {
-            const filteredCount = filterLeaderboards(data).length;
+          {allSections.map(({ id, title, data }, index) => {
+            const filteredCount = filterLeaderboardsForCount(data).length;
+            const currentGroup = getSectionGroup(id);
+            const prevGroup =
+              index > 0 ? getSectionGroup(allSections[index - 1].id) : null;
+            const needsSpacing = currentGroup !== prevGroup;
+
             return (
-              <Button
-                key={id}
-                onClick={() => {
-                  if (filteredCount > 0) {
-                    document.getElementById(id)?.scrollIntoView({
-                      behavior: "smooth",
-                      block: "start",
-                    });
-                  }
-                }}
-                variant="outlined"
-                size="small"
-                disabled={filteredCount === 0}
-                sx={{
-                  textTransform: "none",
-                  cursor: filteredCount === 0 ? "default" : "pointer",
-                  mb: 1,
-                  backgroundColor: (theme) =>
-                    theme.palette.mode === "dark"
-                      ? "background.paper"
-                      : "white",
-                  "&:hover": {
+              <React.Fragment key={id}>
+                {needsSpacing && index > 0 && (
+                  <Box sx={{ width: "0.5rem", display: "inline-block" }} />
+                )}
+                <Button
+                  onClick={() => {
+                    if (selectedCategory === id || filteredCount > 0) {
+                      setSelectedCategory(selectedCategory === id ? null : id);
+                    }
+                  }}
+                  variant={selectedCategory === id ? "contained" : "outlined"}
+                  size="small"
+                  disabled={filteredCount === 0 && selectedCategory !== id}
+                  sx={{
+                    textTransform: "none",
+                    cursor:
+                      filteredCount === 0 && selectedCategory !== id
+                        ? "default"
+                        : "pointer",
+                    mb: 1,
                     backgroundColor: (theme) =>
-                      theme.palette.mode === "dark"
+                      selectedCategory === id
+                        ? undefined
+                        : theme.palette.mode === "dark"
                         ? "background.paper"
                         : "white",
-                  },
-                  "& .MuiTouchRipple-root": {
+                    "&:hover": {
+                      backgroundColor: (theme) =>
+                        selectedCategory === id
+                          ? undefined
+                          : theme.palette.mode === "dark"
+                          ? "background.paper"
+                          : "white",
+                    },
+                    "& .MuiTouchRipple-root": {
+                      transition: "none",
+                    },
                     transition: "none",
-                  },
-                  transition: "none",
-                }}
-              >
-                {title}
-                <Box
-                  component="span"
-                  sx={{
-                    display: "inline-flex",
-                    alignItems: "center",
-                    gap: 0.75,
-                    color: "text.secondary",
-                    ml: 0.75,
                   }}
                 >
+                  {title}
                   <Box
                     component="span"
-                    sx={(theme) => ({
-                      width: "4px",
-                      height: "4px",
-                      borderRadius: "100%",
-                      backgroundColor: alpha(
-                        theme.palette.text.primary,
-                        theme.palette.mode === "dark" ? 0.2 : 0.15
-                      ),
-                    })}
-                  />
-                  {filteredCount}
-                </Box>
-              </Button>
+                    sx={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 0.75,
+                      color: "text.secondary",
+                      ml: 0.75,
+                    }}
+                  >
+                    <Box
+                      component="span"
+                      sx={(theme) => ({
+                        width: "4px",
+                        height: "4px",
+                        borderRadius: "100%",
+                        backgroundColor: alpha(
+                          theme.palette.text.primary,
+                          theme.palette.mode === "dark" ? 0.2 : 0.15
+                        ),
+                      })}
+                    />
+                    {filteredCount}
+                  </Box>
+                </Button>
+              </React.Fragment>
             );
           })}
         </Stack>
@@ -180,7 +257,7 @@ const LeaderboardFilters = ({ allSections }) => {
                         fontWeight: 500,
                       }}
                     >
-                      {filteredCount}
+                      {currentFilteredCount}
                     </Typography>
                     <Box
                       sx={{
@@ -204,7 +281,7 @@ const LeaderboardFilters = ({ allSections }) => {
                           fontWeight: 500,
                         }}
                       >
-                        {arenaOnly ? totalArenaCount : totalLeaderboards}
+                        {arenaOnly ? totalArenaCount : totalCount}
                       </Typography>
                     </Box>
                     <Typography

client/src/components/LeaderboardSection.jsx

@@ -1,31 +1,95 @@
-import React, { useState } from "react";
-import { Typography, Grid, Box, Button, Collapse } from "@mui/material";
+import React, { useState, useMemo } from "react";
+import { Typography, Grid, Box, Button, Collapse, Stack } from "@mui/material";
 import { alpha } from "@mui/material/styles";
 import LeaderboardCard from "./LeaderboardCard";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import ExpandLessIcon from "@mui/icons-material/ExpandLess";
+import { useLeaderboard } from "../context/LeaderboardContext";
+import SearchOffIcon from "@mui/icons-material/SearchOff";
 
 const ITEMS_PER_PAGE = 3;
 
-const LeaderboardSection = ({ title, leaderboards }) => {
-  const [showAll, setShowAll] = useState(false);
-  const [expanded, setExpanded] = useState(false);
+const LeaderboardSection = ({
+  title,
+  leaderboards,
+  filteredLeaderboards,
+  id,
+}) => {
+  const {
+    expandedSections,
+    setExpandedSections,
+    selectedLanguage,
+    setSelectedLanguage,
+    searchQuery,
+    selectedCategory,
+  } = useLeaderboard();
+  const isExpanded = expandedSections.has(id);
 
-  if (!leaderboards || leaderboards.length === 0) return null;
+  // Extraire la liste des langues si c'est la section Language Specific
+  // Cette liste ne doit JAMAIS changer, peu importe les filtres
+  const languages = useMemo(() => {
+    if (id !== "language") return null;
+    const langSet = new Set();
+    leaderboards.forEach((board) => {
+      board.tags?.forEach((tag) => {
+        if (tag.startsWith("language:")) {
+          const language = tag.split(":")[1];
+          const capitalizedLang =
+            language.charAt(0).toUpperCase() + language.slice(1);
+          langSet.add(capitalizedLang);
+        }
+      });
+    });
+    return Array.from(langSet).sort();
+  }, [id, leaderboards]);
+
+  // Calculer le nombre de leaderboards par langue
+  // On utilise les leaderboards bruts pour avoir toutes les langues
+  const languageStats = useMemo(() => {
+    if (!languages) return null;
+    const stats = new Map();
+
+    // Compter les leaderboards pour chaque langue
+    languages.forEach((lang) => {
+      const count = leaderboards.filter((board) =>
+        board.tags?.some(
+          (tag) => tag.toLowerCase() === `language:${lang.toLowerCase()}`
+        )
+      ).length;
+      stats.set(lang, count);
+    });
+
+    return stats;
+  }, [languages, leaderboards]);
+
+  // On ne retourne null que si on n'a pas de leaderboards bruts
+  if (!leaderboards) return null;
 
   // On affiche toujours les 3 premiers
-  const displayedLeaderboards = leaderboards.slice(0, ITEMS_PER_PAGE);
+  const displayedLeaderboards = filteredLeaderboards.slice(0, ITEMS_PER_PAGE);
   // Le reste sera dans le Collapse
-  const remainingLeaderboards = leaderboards.slice(ITEMS_PER_PAGE);
+  const remainingLeaderboards = filteredLeaderboards.slice(ITEMS_PER_PAGE);
+
+  // Calculate how many skeletons we need
+  const skeletonsNeeded = Math.max(0, 3 - filteredLeaderboards.length);
+
+  // On affiche le bouton seulement si aucune catégorie n'est sélectionnée
+  const showExpandButton = !selectedCategory;
+
+  // Le bouton est actif seulement s'il y a plus de 3 leaderboards
+  const isExpandButtonEnabled = filteredLeaderboards.length > ITEMS_PER_PAGE;
 
   const toggleExpanded = () => {
-    setShowAll(!showAll);
-    setExpanded(!expanded);
+    setExpandedSections((prev) => {
+      const newSet = new Set(prev);
+      if (isExpanded) {
+        newSet.delete(id);
+      } else {
+        newSet.add(id);
+      }
+      return newSet;
+    });
   };
 
-  // Calculate how many skeletons we need
-  const skeletonsNeeded = Math.max(0, 3 - leaderboards.length);
-
   return (
     <Box sx={{ mb: 6 }}>
       <Box
@@ -33,7 +97,7 @@ const LeaderboardSection = ({ title, leaderboards }) => {
           display: "flex",
           alignItems: "center",
           justifyContent: "space-between",
-          mb: 4,
+          mb: languageStats ? 2 : 4,
         }}
       >
         <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
@@ -66,71 +130,209 @@ const LeaderboardSection = ({ title, leaderboards }) => {
               fontSize: { xs: "1.25rem", md: "1.5rem" },
             }}
           >
-            {leaderboards.length}
+            {filteredLeaderboards.length}
           </Typography>
         </Box>
-        {leaderboards.length > ITEMS_PER_PAGE && (
+        {showExpandButton && (
           <Button
             onClick={toggleExpanded}
             size="small"
+            disabled={!isExpandButtonEnabled}
             sx={{
               color: "text.secondary",
               fontSize: "0.875rem",
               textTransform: "none",
+              opacity: isExpandButtonEnabled ? 1 : 0.5,
               "&:hover": {
                 backgroundColor: (theme) =>
-                  alpha(
-                    theme.palette.text.primary,
-                    theme.palette.mode === "dark" ? 0.1 : 0.06
-                  ),
+                  isExpandButtonEnabled
+                    ? alpha(
+                        theme.palette.text.primary,
+                        theme.palette.mode === "dark" ? 0.1 : 0.06
+                      )
+                    : "transparent",
               },
             }}
             endIcon={
               <ExpandMoreIcon
                 sx={{
-                  transform: expanded ? "rotate(180deg)" : "rotate(0deg)",
+                  transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
                   transition: "transform 300ms",
                 }}
               />
             }
           >
-            {expanded ? "Show less" : "Show more"}
+            {isExpanded ? "Show less" : "Show more"}
           </Button>
         )}
       </Box>
-      <Grid container spacing={3}>
-        {displayedLeaderboards.map((leaderboard, index) => (
-          <Grid item xs={12} sm={6} md={4} key={index}>
-            <LeaderboardCard leaderboard={leaderboard} />
-          </Grid>
-        ))}
-        {/* Add skeletons if needed */}
-        {Array.from({ length: skeletonsNeeded }).map((_, index) => (
-          <Grid item xs={12} sm={6} md={4} key={`skeleton-${index}`}>
-            <Box
-              sx={{
-                height: "180px",
-                borderRadius: 2,
-                bgcolor: (theme) => alpha(theme.palette.primary.main, 0.15),
-                opacity: 1,
-                transition: "opacity 0.3s ease-in-out",
-                "&:hover": {
-                  opacity: 0.8,
-                },
-              }}
-            />
+
+      {languages && selectedCategory === "language" && (
+        <>
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{ mb: 2, fontWeight: 500 }}
+          >
+            Languages represented in this category
+          </Typography>
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 1,
+              mb: filteredLeaderboards.length > 0 ? 4 : 2,
+              mx: -0.5,
+            }}
+          >
+            {languages.map((lang) => {
+              const isActive = selectedLanguage === lang;
+              const count = languageStats?.get(lang) || 0;
+
+              return (
+                <Button
+                  key={lang}
+                  onClick={() => setSelectedLanguage(isActive ? null : lang)}
+                  variant={isActive ? "contained" : "outlined"}
+                  size="small"
+                  sx={{
+                    textTransform: "none",
+                    m: 0.125,
+                    backgroundColor: (theme) =>
+                      isActive
+                        ? undefined
+                        : theme.palette.mode === "dark"
+                        ? "background.paper"
+                        : "white",
+                    "&:hover": {
+                      backgroundColor: (theme) =>
+                        isActive
+                          ? undefined
+                          : theme.palette.mode === "dark"
+                          ? "background.paper"
+                          : "white",
+                    },
+                    "& .MuiTouchRipple-root": {
+                      transition: "none",
+                    },
+                    transition: "none",
+                  }}
+                >
+                  {lang}
+                  <Box
+                    component="span"
+                    sx={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 0.75,
+                      color: isActive ? "inherit" : "text.secondary",
+                      ml: 0.75,
+                    }}
+                  >
+                    <Box
+                      component="span"
+                      sx={(theme) => ({
+                        width: "4px",
+                        height: "4px",
+                        borderRadius: "100%",
+                        backgroundColor: alpha(
+                          theme.palette.text.primary,
+                          theme.palette.mode === "dark" ? 0.2 : 0.15
+                        ),
+                      })}
+                    />
+                    {count}
+                  </Box>
+                </Button>
+              );
+            })}
+          </Box>
+        </>
+      )}
+
+      {filteredLeaderboards.length === 0 ? (
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+            py: 7,
+            bgcolor: (theme) =>
+              theme.palette.mode === "dark"
+                ? "background.paper"
+                : "background.default",
+            borderRadius: 2,
+          }}
+        >
+          <SearchOffIcon
+            sx={{
+              fontSize: 64,
+              color: "text.secondary",
+              opacity: 0.5,
+            }}
+          />
+          <Typography variant="h5" color="text.secondary" align="center">
+            {searchQuery ? (
+              <>
+                No {title.toLowerCase()} leaderboard matches{" "}
+                <Box
+                  component="span"
+                  sx={{
+                    bgcolor: "primary.main",
+                    color: "primary.contrastText",
+                    px: 1,
+                    borderRadius: 1,
+                  }}
+                >
+                  {searchQuery}
+                </Box>
+              </>
+            ) : (
+              `No ${title.toLowerCase()} leaderboard matches your criteria`
+            )}
+          </Typography>
+          <Typography variant="body1" color="text.secondary" align="center">
+            Try adjusting your search filters
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          <Grid container spacing={3}>
+            {displayedLeaderboards.map((leaderboard, index) => (
+              <Grid item xs={12} sm={6} md={4} key={index}>
+                <LeaderboardCard leaderboard={leaderboard} />
+              </Grid>
+            ))}
+            {/* Add skeletons if needed */}
+            {Array.from({ length: skeletonsNeeded }).map((_, index) => (
+              <Grid item xs={12} sm={6} md={4} key={`skeleton-${index}`}>
+                <Box
+                  sx={{
+                    height: "180px",
+                    borderRadius: 2,
+                    bgcolor: (theme) => alpha(theme.palette.primary.main, 0.15),
+                    opacity: 1,
+                    transition: "opacity 0.3s ease-in-out",
+                    "&:hover": {
+                      opacity: 0.8,
+                    },
+                  }}
+                />
+              </Grid>
+            ))}
           </Grid>
-        ))}
-      </Grid>
-      <Collapse in={showAll} timeout={300} unmountOnExit>
-        <Grid container spacing={3} sx={{ mt: 0 }}>
-          {remainingLeaderboards.map((leaderboard, index) => (
-            <Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
-              <LeaderboardCard leaderboard={leaderboard} />
+          <Collapse in={isExpanded} timeout={300} unmountOnExit>
+            <Grid container spacing={3} sx={{ mt: 0 }}>
+              {remainingLeaderboards.map((leaderboard, index) => (
+                <Grid item xs={12} sm={6} md={4} key={index + ITEMS_PER_PAGE}>
+                  <LeaderboardCard leaderboard={leaderboard} />
+                </Grid>
+              ))}
             </Grid>
-          ))}
-        </Grid>
-      </Collapse>
+          </Collapse>
+        </>
+      )}
     </Box>
   );
 };

client/src/components/Logo/Logo.jsx

@@ -3,10 +3,33 @@ import { Link } from "react-router-dom";
 import { Box } from "@mui/material";
 import logoText from "../../assets/logo-text.svg";
 import gradient from "../../assets/gradient.svg";
+import { useLeaderboard } from "../../context/LeaderboardContext";
 
 const Logo = () => {
+  const {
+    setSearchQuery,
+    setArenaOnly,
+    setSelectedCategory,
+    setSelectedLanguage,
+    setExpandedSections,
+  } = useLeaderboard();
+
+  const handleReset = (e) => {
+    e.preventDefault();
+    setSearchQuery("");
+    setArenaOnly(false);
+    setSelectedCategory(null);
+    setSelectedLanguage(null);
+    setExpandedSections(new Set());
+    window.history.pushState({}, "", window.location.pathname);
+  };
+
   return (
-    <Link to="/" style={{ textDecoration: "none", position: "relative" }}>
+    <Link
+      to="/"
+      onClick={handleReset}
+      style={{ textDecoration: "none", position: "relative" }}
+    >
       <Box
         component="img"
         src={gradient}

client/src/context/LeaderboardContext.jsx

@@ -4,14 +4,218 @@ import React, {
   useState,
   useCallback,
   useMemo,
+  useEffect,
 } from "react";
 
 const LeaderboardContext = createContext();
 
+// Helper pour mettre à jour l'URL
+const updateURL = (params) => {
+  const url = new URL(window.location);
+  Object.entries(params).forEach(([key, value]) => {
+    if (value) {
+      url.searchParams.set(key, value);
+    } else {
+      url.searchParams.delete(key);
+    }
+  });
+  window.history.pushState({}, "", url);
+};
+
+// Helper pour lire les paramètres de l'URL
+const getURLParams = () => {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    category: params.get("category"),
+    search: params.get("search"),
+    arena: params.get("arena") === "true",
+    language: params.get("language"),
+  };
+};
+
 export const LeaderboardProvider = ({ children }) => {
+  // Lire les paramètres initiaux depuis l'URL
+  const initialParams = getURLParams();
+
   const [leaderboards, setLeaderboards] = useState([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [arenaOnly, setArenaOnly] = useState(false);
+  const [searchQuery, setSearchQuery] = useState(initialParams.search || "");
+  const [arenaOnly, setArenaOnly] = useState(initialParams.arena);
+  const [selectedCategory, setSelectedCategory] = useState(
+    initialParams.category
+  );
+  const [selectedLanguage, setSelectedLanguage] = useState(
+    initialParams.language
+  );
+  const [expandedSections, setExpandedSections] = useState(new Set());
+
+  // Mettre à jour l'URL quand les filtres changent
+  useEffect(() => {
+    updateURL({
+      category: selectedCategory,
+      search: searchQuery,
+      arena: arenaOnly ? "true" : null,
+      language: selectedLanguage,
+    });
+  }, [selectedCategory, searchQuery, arenaOnly, selectedLanguage]);
+
+  // Écouter les changements d'URL (navigation back/forward)
+  useEffect(() => {
+    const handleURLChange = () => {
+      const params = getURLParams();
+      setSearchQuery(params.search || "");
+      setArenaOnly(params.arena);
+      setSelectedCategory(params.category);
+      setSelectedLanguage(params.language);
+    };
+
+    window.addEventListener("popstate", handleURLChange);
+    return () => window.removeEventListener("popstate", handleURLChange);
+  }, []);
+
+  // Wrapper pour setSelectedCategory qui gère aussi l'expansion des sections
+  const handleCategorySelection = useCallback((categoryId) => {
+    // On réinitialise toujours la langue sélectionnée
+    setSelectedLanguage(null);
+
+    setSelectedCategory((prev) => {
+      if (prev === categoryId) {
+        // Si on désélectionne, on replie toutes les sections
+        setExpandedSections(new Set());
+        return null;
+      }
+      // Si on sélectionne une nouvelle catégorie, on la déploie
+      setExpandedSections(new Set([categoryId]));
+      return categoryId;
+    });
+  }, []);
+
+  // Wrapper pour la sélection de langue
+  const handleLanguageSelection = useCallback((language) => {
+    setSelectedLanguage((prev) => (prev === language ? null : language));
+  }, []);
+
+  // Filter leaderboards based on search query and arena toggle, ignoring category selection
+  const filterLeaderboardsForCount = useCallback(
+    (boards) => {
+      if (!boards) return [];
+
+      let filtered = [...boards];
+
+      // Filter by search query (text only)
+      if (searchQuery) {
+        const query = searchQuery.toLowerCase();
+        filtered = filtered.filter((board) =>
+          board.card_data?.title?.toLowerCase().includes(query)
+        );
+      }
+
+      // Filter arena only
+      if (arenaOnly) {
+        filtered = filtered.filter((board) =>
+          board.tags?.includes("judge:humans")
+        );
+      }
+
+      return filtered;
+    },
+    [searchQuery, arenaOnly]
+  );
+
+  // Filter leaderboards based on all criteria including category and language selection
+  const filterLeaderboards = useCallback(
+    (boards) => {
+      if (!boards) return [];
+
+      let filtered = filterLeaderboardsForCount(boards);
+
+      // Filter by selected language if any
+      if (selectedLanguage) {
+        filtered = filtered.filter((board) =>
+          board.tags?.some(
+            (tag) =>
+              tag.toLowerCase() === `language:${selectedLanguage.toLowerCase()}`
+          )
+        );
+      }
+
+      // Filter by selected category if any
+      if (selectedCategory) {
+        filtered = filtered.filter((board) => {
+          const { tags = [] } = board;
+          switch (selectedCategory) {
+            case "agentic":
+              return tags.includes("modality:agent");
+            case "code":
+              return tags.includes("eval:code");
+            case "math":
+              return tags.includes("eval:math");
+            case "language":
+              return tags.some((tag) => tag.startsWith("language:"));
+            case "vision":
+              return tags.some(
+                (tag) => tag === "modality:video" || tag === "modality:image"
+              );
+            case "audio":
+              return tags.includes("modality:audio");
+            case "financial":
+              return tags.includes("domain:financial");
+            case "medical":
+              return tags.includes("domain:medical");
+            case "legal":
+              return tags.includes("domain:legal");
+            case "safety":
+              return tags.includes("eval:safety");
+            case "uncategorized":
+              return !tags.some(
+                (tag) =>
+                  [
+                    "modality:agent",
+                    "eval:code",
+                    "eval:math",
+                    "modality:video",
+                    "modality:image",
+                    "modality:audio",
+                    "domain:financial",
+                    "domain:medical",
+                    "domain:legal",
+                    "eval:safety",
+                  ].includes(tag) || tag.startsWith("language:")
+              );
+            default:
+              return true;
+          }
+        });
+      }
+
+      return filtered;
+    },
+    [filterLeaderboardsForCount, selectedCategory, selectedLanguage]
+  );
+
+  // Fonction pour obtenir les leaderboards bruts d'une section
+  const getSectionLeaderboards = useCallback((boards) => {
+    if (!boards) return [];
+    return [...boards];
+  }, []);
+
+  // Fonction pour compter les leaderboards par langue
+  const getLanguageStats = useCallback((boards) => {
+    const stats = new Map();
+
+    boards.forEach((board) => {
+      board.tags?.forEach((tag) => {
+        if (tag.startsWith("language:")) {
+          const language = tag.split(":")[1];
+          const capitalizedLang =
+            language.charAt(0).toUpperCase() + language.slice(1);
+          const count = stats.get(capitalizedLang) || 0;
+          stats.set(capitalizedLang, count + 1);
+        }
+      });
+    });
+
+    return stats;
+  }, []);
 
   // Calculate total number of unique leaderboards (excluding duplicates)
   const totalLeaderboards = useMemo(() => {
@@ -57,60 +261,10 @@ export const LeaderboardProvider = ({ children }) => {
     );
   }, []);
 
-  // Filter leaderboards based on search query and arena toggle
-  const filterLeaderboards = useCallback(
-    (boards) => {
-      if (!boards) return [];
-
-      // On évite de créer une copie inutile
-      let filtered = boards;
-
-      // Filter by search query
-      if (searchQuery) {
-        const query = searchQuery.toLowerCase();
-        const searchableTagPrefixes = [
-          "domain:",
-          "language:",
-          "judge:",
-          "test:",
-          "modality:",
-          "submission:",
-          "domain:",
-          "eval:",
-        ];
-
-        filtered = filtered.filter((board) => {
-          const isTagSearch = searchableTagPrefixes.some((prefix) =>
-            query.startsWith(prefix)
-          );
-
-          if (isTagSearch) {
-            return board.tags?.some((tag) => tag.toLowerCase().includes(query));
-          }
-
-          return board.card_data?.title?.toLowerCase().includes(query);
-        });
-      }
-
-      // Filter arena only
-      if (arenaOnly) {
-        filtered = filtered.filter((board) =>
-          board.tags?.includes("judge:humans")
-        );
-      }
-
-      return filtered;
-    },
-    [searchQuery, arenaOnly]
-  );
-
-  // Define sections
+  // Define sections with raw data
   const allSections = useMemo(() => {
     if (!leaderboards) return [];
 
-    // D'abord filtrer les leaderboards selon la recherche
-    const filteredBoards = filterLeaderboards(leaderboards);
-
     // Garder une trace des leaderboards déjà catégorisés
     const categorizedIds = new Set();
 
@@ -118,7 +272,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "agentic",
         title: "Agentic",
-        data: filterByTag("modality:agent", filteredBoards).map((board) => {
+        data: filterByTag("modality:agent", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -126,7 +280,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "code",
         title: "Code",
-        data: filterByTag("eval:code", filteredBoards).map((board) => {
+        data: filterByTag("eval:code", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -134,7 +288,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "math",
         title: "Math",
-        data: filterByTag("eval:math", filteredBoards).map((board) => {
+        data: filterByTag("eval:math", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -142,7 +296,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "language",
         title: "Language Specific",
-        data: filterByLanguage(filteredBoards).map((board) => {
+        data: filterByLanguage(leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -150,7 +304,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "vision",
         title: "Vision",
-        data: filterByVision(filteredBoards).map((board) => {
+        data: filterByVision(leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -158,7 +312,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "audio",
         title: "Audio",
-        data: filterByTag("modality:audio", filteredBoards).map((board) => {
+        data: filterByTag("modality:audio", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -166,7 +320,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "financial",
         title: "Financial",
-        data: filterByTag("domain:financial", filteredBoards).map((board) => {
+        data: filterByTag("domain:financial", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -174,7 +328,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "medical",
         title: "Medical",
-        data: filterByTag("domain:medical", filteredBoards).map((board) => {
+        data: filterByTag("domain:medical", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -182,7 +336,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "legal",
         title: "Legal",
-        data: filterByTag("domain:legal", filteredBoards).map((board) => {
+        data: filterByTag("domain:legal", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -190,7 +344,7 @@ export const LeaderboardProvider = ({ children }) => {
       {
         id: "safety",
         title: "Safety",
-        data: filterByTag("eval:safety", filteredBoards).map((board) => {
+        data: filterByTag("eval:safety", leaderboards).map((board) => {
           categorizedIds.add(board.id);
           return board;
         }),
@@ -199,18 +353,12 @@ export const LeaderboardProvider = ({ children }) => {
         id: "uncategorized",
         title: "Uncategorized",
         // Mettre dans uncategorized uniquement les leaderboards qui n'apparaissent nulle part ailleurs
-        data: filteredBoards.filter((board) => !categorizedIds.has(board.id)),
+        data: leaderboards.filter((board) => !categorizedIds.has(board.id)),
       },
     ];
 
     return sections;
-  }, [
-    leaderboards,
-    filterLeaderboards,
-    filterByTag,
-    filterByLanguage,
-    filterByVision,
-  ]);
+  }, [leaderboards, filterByTag, filterByLanguage, filterByVision]);
 
   // Get sections with data
   const sections = useMemo(() => {
@@ -259,8 +407,8 @@ export const LeaderboardProvider = ({ children }) => {
 
   // Get filtered count
   const filteredCount = useMemo(() => {
-    return filterLeaderboards(leaderboards).length;
-  }, [filterLeaderboards, leaderboards]);
+    return filterLeaderboardsForCount(leaderboards).length;
+  }, [filterLeaderboardsForCount, leaderboards]);
 
   // Function to get highlighted parts of text
   const getHighlightedText = useCallback((text, searchTerm) => {
@@ -303,9 +451,18 @@ export const LeaderboardProvider = ({ children }) => {
     totalLeaderboards,
     filteredCount,
     filterLeaderboards,
+    filterLeaderboardsForCount,
     sections,
     allSections,
     getHighlightedText,
+    selectedCategory,
+    setSelectedCategory: handleCategorySelection,
+    selectedLanguage,
+    setSelectedLanguage: handleLanguageSelection,
+    expandedSections,
+    setExpandedSections,
+    getLanguageStats,
+    getSectionLeaderboards,
   };
 
   return (

client/src/pages/HowToSubmitPage/HowToSubmitPage.jsx

@@ -205,7 +205,7 @@ const getTagEmoji = (tag) => {
       function: "⚙️",
       model: "🧠",
       humans: "👥",
-      vibe_check: "✨",
+      vibeCheck: "✨",
     },
     modality: {
       text: "📝",
@@ -228,7 +228,7 @@ const getTagEmoji = (tag) => {
     language: {
       english: "🇬🇧",
       french: "🇫🇷",
-      whatever: "🌍",
+      yourOwnLanguage: "🌍",
     },
     domain: {
       financial: "💰",
@@ -645,7 +645,7 @@ const HowToSubmitPage = () => {
             "judge:function",
             "judge:model",
             "judge:humans",
-            "judge:vibe_check",
+            "judge:vibe check",
           ]}
           explanations={[
             "evaluations are run <strong>automatically</strong>, using an evaluation suite such as <strong>lm_eval</strong> or <strong>lighteval</strong>",
@@ -685,7 +685,7 @@ const HowToSubmitPage = () => {
             "eval:code",
             "eval:performance",
             "eval:safety",
-            "task:rag",
+            "eval:rag",
           ]}
           explanations={[
             "the evaluation looks at <strong>generation capabilities</strong> specifically (can be image generation, text generation, ...)",
@@ -700,7 +700,11 @@ const HowToSubmitPage = () => {
         <TagSection
           title="Language"
           description="You can indicate the languages covered by your benchmark like so: language:mylanguage."
-          tags={["language:english", "language:french", "language:whatever"]}
+          tags={[
+            "language:english",
+            "language:french",
+            "language:your own language",
+          ]}
           explanations={[
             "",
             "",
@@ -737,7 +741,7 @@ const HowToSubmitPage = () => {
               },
             }}
           >
-            Clementine Fourrier
+            Clémentine Fourrier
           </Link>{" "}
           on Hugging Face.
         </Typography>

client/src/pages/LeaderboardPage/LeaderboardPage.jsx

@@ -20,6 +20,7 @@ const LeaderboardPageContent = () => {
     allSections,
     searchQuery,
     arenaOnly,
+    selectedCategory,
   } = useLeaderboard();
 
   useEffect(() => {
@@ -96,7 +97,8 @@ const LeaderboardPageContent = () => {
         >
           <LeaderboardFilters allSections={allSections} />
 
-          {!hasLeaderboards && isFiltering && (
+          {/* Message global "No results" seulement si on n'a pas de catégorie sélectionnée */}
+          {!hasLeaderboards && isFiltering && !selectedCategory && (
             <Box
               sx={{
                 display: "flex",
@@ -140,19 +142,38 @@ const LeaderboardPageContent = () => {
             </Box>
           )}
 
-          {(hasLeaderboards || !isFiltering) &&
-            sections.map(({ id, title, data }) => {
-              const filteredLeaderboards = filterLeaderboards(data);
-              if (filteredLeaderboards.length === 0) return null;
-              return (
-                <Box key={id} id={id}>
-                  <LeaderboardSection
-                    title={title}
-                    leaderboards={filteredLeaderboards}
-                  />
-                </Box>
-              );
-            })}
+          {/* On affiche toujours la section sélectionnée, sinon on affiche les sections avec des résultats */}
+          {selectedCategory
+            ? sections
+                .filter(({ id }) => id === selectedCategory)
+                .map(({ id, title, data }) => {
+                  const filteredLeaderboards = filterLeaderboards(data);
+                  return (
+                    <Box key={id} id={id}>
+                      <LeaderboardSection
+                        id={id}
+                        title={title}
+                        leaderboards={data}
+                        filteredLeaderboards={filteredLeaderboards}
+                      />
+                    </Box>
+                  );
+                })
+            : (hasLeaderboards || !isFiltering) &&
+              sections.map(({ id, title, data }) => {
+                const filteredLeaderboards = filterLeaderboards(data);
+                if (filteredLeaderboards.length === 0) return null;
+                return (
+                  <Box key={id} id={id}>
+                    <LeaderboardSection
+                      id={id}
+                      title={title}
+                      leaderboards={data}
+                      filteredLeaderboards={filteredLeaderboards}
+                    />
+                  </Box>
+                );
+              })}
         </Box>
       )}
     </Box>

server/pyproject.toml

@@ -3,6 +3,9 @@ name = "leaderboard-explorer-server"
 version = "0.1.0"
 description = "Backend server for Leaderboard Explorer"
 authors = ["Your Name <[email protected]>"]
+packages = [
+    { include = "server.py" }
+]
 
 [tool.poetry.dependencies]
 python = "^3.9"
@@ -14,6 +17,9 @@ python-jose = {extras = ["cryptography"], version = "^3.3.0"}
 apscheduler = "^3.10.4"
 huggingface-hub = "^0.21.3"
 
+[tool.poetry.scripts]
+dev = "uvicorn server:app --reload --host 0.0.0.0 --port 3002"
+
 [build-system]
 requires = ["poetry-core>=1.0.0"]
 build-backend = "poetry.core.masonry.api"