Remove unused filters

frontend/src/pages/LeaderboardPage/components/Leaderboard/Leaderboard.js

@@ -7,100 +7,9 @@ import { useLeaderboard } from "./context/LeaderboardContext";
 import { useLeaderboardProcessing } from "./hooks/useLeaderboardData";
 import { useLeaderboardData } from "./hooks/useLeaderboardData";
 
-import LeaderboardFilters from "./components/Filters/Filters";
 import LeaderboardTable from "./components/Table/Table";
 import SearchBar, { SearchBarSkeleton } from "./components/Filters/SearchBar";
 import PerformanceMonitor from "./components/PerformanceMonitor";
-import QuickFilters, {
-  QuickFiltersSkeleton,
-} from "./components/Filters/QuickFilters";
-
-const FilterAccordion = ({ expanded, quickFilters, advancedFilters }) => {
-  const advancedFiltersRef = React.useRef(null);
-  const quickFiltersRef = React.useRef(null);
-  const [height, setHeight] = React.useState("auto");
-  const resizeTimeoutRef = React.useRef(null);
-
-  const updateHeight = React.useCallback(() => {
-    if (expanded && advancedFiltersRef.current) {
-      setHeight(`${advancedFiltersRef.current.scrollHeight}px`);
-    } else if (!expanded && quickFiltersRef.current) {
-      setHeight(`${quickFiltersRef.current.scrollHeight}px`);
-    }
-  }, [expanded]);
-
-  React.useEffect(() => {
-    // Initial height calculation
-    const timer = setTimeout(updateHeight, 100);
-
-    // Resize handler with debounce
-    const handleResize = () => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-      resizeTimeoutRef.current = setTimeout(updateHeight, 150);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      clearTimeout(timer);
-      window.removeEventListener("resize", handleResize);
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
-      }
-    };
-  }, [updateHeight]);
-
-  // Update height when expanded state changes
-  React.useEffect(() => {
-    updateHeight();
-  }, [expanded, updateHeight]);
-
-  return (
-    <Box
-      sx={{
-        position: "relative",
-        width: "100%",
-        height,
-        transition: "height 0.3s ease",
-        mb: 0.5,
-        overflow: "hidden",
-      }}
-    >
-      <Box
-        ref={quickFiltersRef}
-        sx={{
-          position: expanded ? "absolute" : "relative",
-          top: 0,
-          left: 0,
-          right: 0,
-          opacity: expanded ? 0 : 1,
-          visibility: expanded ? "hidden" : "visible",
-          transition: "opacity 0.3s ease",
-          mb: 0,
-        }}
-      >
-        {quickFilters}
-      </Box>
-      <Box
-        ref={advancedFiltersRef}
-        sx={{
-          position: !expanded ? "absolute" : "relative",
-          top: 0,
-          left: 0,
-          right: 0,
-          opacity: expanded ? 1 : 0,
-          visibility: !expanded ? "hidden" : "visible",
-          transition: "opacity 0.3s ease",
-          mt: 0,
-        }}
-      >
-        {advancedFilters}
-      </Box>
-    </Box>
-  );
-};
 
 const Leaderboard = () => {
   const { state, actions } = useLeaderboard();
@@ -266,49 +175,6 @@ const Leaderboard = () => {
     ]
   );
 
-  const memoizedQuickFilters = useMemo(
-    () => (
-      <QuickFilters
-        totalCount={state.models.length}
-        filteredCount={memoizedFilteredData?.length || 0}
-        data={memoizedFilteredData}
-        table={memoizedTable}
-      />
-    ),
-    [state.models.length, memoizedFilteredData, memoizedTable]
-  );
-
-  const memoizedLeaderboardFilters = useMemo(
-    () => (
-      <LeaderboardFilters
-        data={memoizedFilteredData}
-        loading={loadingStates.showFiltersSkeleton}
-        selectedPrecisions={state.filters.precisions}
-        onPrecisionsChange={onPrecisionsChange}
-        selectedTypes={state.filters.types}
-        onTypesChange={onTypesChange}
-        paramsRange={state.filters.paramsRange}
-        onParamsRangeChange={onParamsRangeChange}
-        selectedBooleanFilters={state.filters.booleanFilters}
-        onBooleanFiltersChange={onBooleanFiltersChange}
-        onReset={onReset}
-      />
-    ),
-    [
-      memoizedFilteredData,
-      loadingStates.showFiltersSkeleton,
-      state.filters.precisions,
-      state.filters.types,
-      state.filters.paramsRange,
-      state.filters.booleanFilters,
-      onPrecisionsChange,
-      onTypesChange,
-      onParamsRangeChange,
-      onBooleanFiltersChange,
-      onReset,
-    ]
-  );
-
   // No need to memoize LeaderboardTable as it handles its own sorting state
   const tableComponent = (
     <LeaderboardTable
@@ -410,17 +276,6 @@ const Leaderboard = () => {
           ) : (
             memoizedSearchBar
           )}
-          <Box sx={{ mt: 1 }}>
-            {loadingStates.showFiltersSkeleton ? (
-              <QuickFiltersSkeleton />
-            ) : (
-              <FilterAccordion
-                expanded={state.filtersExpanded}
-                quickFilters={memoizedQuickFilters}
-                advancedFilters={memoizedLeaderboardFilters}
-              />
-            )}
-          </Box>
         </Box>
 
         <Box

frontend/src/pages/LeaderboardPage/components/Leaderboard/components/Filters/SearchBar.js

@@ -250,43 +250,6 @@ const SearchBar = ({
               </Typography>
             </Box>
           )}
-          <Box
-            onClick={onToggleFilters}
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 0.5,
-              cursor: "pointer",
-              color:
-                !loading && hasActiveFilters
-                  ? "primary.main"
-                  : filtersOpen
-                  ? "primary.main"
-                  : "text.secondary",
-              backgroundColor: filtersOpen
-                ? alpha(theme.palette.primary.main, 0.04)
-                : "transparent",
-              border: "1px solid",
-              borderColor: filtersOpen ? "primary.100" : "divider",
-              borderRadius: 1,
-              padding: "4px 8px",
-              "&:hover": {
-                backgroundColor: alpha(theme.palette.primary.main, 0.08),
-              },
-              userSelect: "none",
-            }}
-          >
-            <FilterListIcon sx={{ fontSize: "1.2rem" }} />
-            <Typography
-              variant="body2"
-              sx={{
-                fontWeight: 600,
-                display: { xs: "none", md: "block" },
-              }}
-            >
-              Advanced Filters
-            </Typography>
-          </Box>
           <InfoIconWithTooltip
             tooltip={UI_TOOLTIPS.SEARCH_BAR}
             iconProps={{