simplify UI

DEPLOYMENT.md

@@ -59,8 +59,23 @@ The README.md contains the required HF Spaces metadata:
 
 ## Environment Variables
 
-- `HF_TOKEN`: Hugging Face API token (optional, can use HF OAuth)
+### Required
+- **`HF_TOKEN`**: Hugging Face API token with read access to datasets
+  - Required to access `mideind/icelandic-llm-leaderboard-*` repositories
+  - Get from: https://huggingface.co/settings/tokens
+  - Add as repository secret in HF Spaces settings
+
+### Optional
 - `PORT`: Frontend server port (default: 7860)
 - `INTERNAL_API_PORT`: Backend server port (default: 7861)
+- `HF_HOME`: Cache directory (default: /app/.cache)
+
+## HF Spaces Setup
+
+1. **Create Space** with Docker SDK
+2. **Add HF_TOKEN secret**:
+   - Go to Space Settings → Repository secrets
+   - Add secret: Name=`HF_TOKEN`, Value=`hf_your_token_here`
+3. **Push code** and restart Space
 
-The application will automatically use HF OAuth for authentication when deployed on HF Spaces.
+The HF_TOKEN is essential for downloading evaluation data from the Icelandic repositories.

Dockerfile_

@@ -1,62 +0,0 @@
-# Build frontend
-FROM node:18 as frontend-build
-WORKDIR /app
-COPY frontend/package*.json ./
-RUN npm install
-COPY frontend/ ./
-
-RUN npm run build
-
-# Build backend
-FROM python:3.12-slim
-WORKDIR /app
-
-# Create non-root user
-RUN useradd -m -u 1000 user
-
-# Install poetry
-RUN pip install poetry
-
-# Create and configure cache directory
-RUN mkdir -p /app/.cache && \
-    chown -R user:user /app
-
-# Copy and install backend dependencies
-COPY backend/pyproject.toml backend/poetry.lock* ./
-RUN poetry config virtualenvs.create false \
-    && poetry install --no-interaction --no-ansi --no-root --only main
-
-# Copy backend code
-COPY backend/ .
-
-# Install Node.js and npm
-RUN apt-get update && apt-get install -y \
-    curl \
-    netcat-openbsd \
-    && curl -fsSL https://deb.nodesource.com/setup_18.x | bash - \
-    && apt-get install -y nodejs \
-    && rm -rf /var/lib/apt/lists/*
-
-# Copy frontend server and build
-COPY --from=frontend-build /app/build ./frontend/build
-COPY --from=frontend-build /app/package*.json ./frontend/
-COPY --from=frontend-build /app/server.js ./frontend/
-
-# Install frontend production dependencies
-WORKDIR /app/frontend
-RUN npm install --production
-WORKDIR /app
-
-# Environment variables
-ENV HF_HOME=/app/.cache \
-    HF_DATASETS_CACHE=/app/.cache \
-    INTERNAL_API_PORT=7861 \
-    PORT=7860 \
-    NODE_ENV=production
-
-# Note: HF_TOKEN should be provided at runtime, not build time
-USER user
-EXPOSE 7860
-
-# Start both servers with wait-for
-CMD ["sh", "-c", "uvicorn app.asgi:app --host 0.0.0.0 --port 7861 & while ! nc -z localhost 7861; do sleep 1; done && cd frontend && npm run serve"]

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

@@ -11,96 +11,7 @@ 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,17 +177,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(
     () => (
@@ -411,14 +311,8 @@ const Leaderboard = () => {
             memoizedSearchBar
           )}
           <Box sx={{ mt: 1 }}>
-            {loadingStates.showFiltersSkeleton ? (
-              <QuickFiltersSkeleton />
-            ) : (
-              <FilterAccordion
-                expanded={state.filtersExpanded}
-                quickFilters={memoizedQuickFilters}
-                advancedFilters={memoizedLeaderboardFilters}
-              />
+            {!loadingStates.showFiltersSkeleton && state.filtersExpanded && (
+              memoizedLeaderboardFilters
             )}
           </Box>
         </Box>

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

@@ -348,13 +348,8 @@ const LeaderboardFilters = ({
   const [localParamsRange, setLocalParamsRange] = useState(paramsRange);
   const stableTimerRef = useRef(null);
   const { state, actions } = useLeaderboard();
-  const { normal: filterCounts, officialOnly: officialOnlyCounts } =
-    state.filterCounts;
-  const isOfficialProviderActive = state.filters.isOfficialProviderActive;
-  const currentCounts = useMemo(
-    () => (isOfficialProviderActive ? officialOnlyCounts : filterCounts),
-    [isOfficialProviderActive, officialOnlyCounts, filterCounts]
-  );
+  const { normal: filterCounts } = state.filterCounts;
+  const currentCounts = filterCounts;
 
   useEffect(() => {
     setLocalParamsRange(paramsRange);
@@ -403,17 +398,10 @@ const LeaderboardFilters = ({
   };
 
   // Filter options based on their hide property
-  const showFilterOptions = BOOLEAN_FILTER_OPTIONS.filter(
-    (option) => !option.hide
-  );
   const hideFilterOptions = BOOLEAN_FILTER_OPTIONS.filter(
     (option) => option.hide
   );
 
-  const handleOfficialProviderToggle = () => {
-    actions.toggleOfficialProvider();
-  };
-
   return loading ? null : (
     <Box>
       <Accordion
@@ -444,7 +432,7 @@ const LeaderboardFilters = ({
         >
           <Box>
             <Grid container spacing={3}>
-              <Grid item xs={12} md={9} sx={{ display: "flex" }}>
+              <Grid item xs={12} sx={{ display: "flex" }}>
                 <Box
                   sx={{
                     backgroundColor: (theme) =>
@@ -692,153 +680,6 @@ const LeaderboardFilters = ({
                   </Box>
                 </Box>
               </Grid>
-
-              <Grid item xs={12} md={3} sx={{ display: "flex" }}>
-                <Box
-                  sx={{
-                    backgroundColor: (theme) =>
-                      alpha(theme.palette.secondary.main, 0.02),
-                    border: "1px solid",
-                    borderColor: (theme) =>
-                      alpha(theme.palette.secondary.main, 0.15),
-                    borderRadius: 1,
-                    p: 3,
-                    position: "relative",
-                    width: "100%",
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    textAlign: "center",
-                    minHeight: "100%",
-                    "&:hover": {
-                      borderColor: (theme) =>
-                        alpha(theme.palette.secondary.main, 0.25),
-                      backgroundColor: (theme) =>
-                        alpha(theme.palette.secondary.main, 0.03),
-                    },
-                    transition: (theme) =>
-                      theme.transitions.create(
-                        ["border-color", "background-color"],
-                        {
-                          duration: theme.transitions.duration.short,
-                        }
-                      ),
-                  }}
-                >
-                  <Box
-                    sx={{
-                      display: "flex",
-                      flexDirection: "column",
-                      alignItems: "center",
-                      gap: 2,
-                    }}
-                  >
-                    <Typography
-                      variant="h6"
-                      sx={{
-                        fontWeight: 600,
-                        color: "text.primary",
-                        fontSize: "1.1rem",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 1,
-                      }}
-                    >
-                      Official Models
-                    </Typography>
-                    <Typography
-                      variant="body2"
-                      sx={{
-                        color: "text.secondary",
-                        fontSize: "0.8rem",
-                        lineHeight: 1.4,
-                        maxWidth: "280px",
-                      }}
-                    >
-                      Show only models that are officially provided and
-                      maintained by their original creators.
-                    </Typography>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: 1,
-                        width: "100%",
-                        alignItems: "center",
-                      }}
-                    >
-                      {showFilterOptions.map((filter) => (
-                        <Box
-                          key={filter.value}
-                          sx={{
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            gap: 1,
-                          }}
-                        >
-                          <FilterTag
-                            label={filter.label}
-                            checked={
-                              filter.value === "is_official_provider"
-                                ? isOfficialProviderActive
-                                : selectedBooleanFilters.includes(filter.value)
-                            }
-                            onChange={
-                              filter.value === "is_official_provider"
-                                ? handleOfficialProviderToggle
-                                : () => handleBooleanFilterToggle(filter.value)
-                            }
-                            count={
-                              filter.value === "is_official_provider"
-                                ? currentCounts.officialProviders
-                                : 0
-                            }
-                            showCheckbox={true}
-                            variant="secondary"
-                          />
-                          <Box
-                            sx={{
-                              display: "flex",
-                              alignItems: "center",
-                              gap: 0.5,
-                              color: "text.secondary",
-                              fontSize: "0.75rem",
-                            }}
-                          >
-                            <Box
-                              component="span"
-                              sx={{
-                                width: 6,
-                                height: 6,
-                                borderRadius: "50%",
-                                backgroundColor: (
-                                  filter.value ===
-                                  "is_official_provider"
-                                    ? isOfficialProviderActive
-                                    : selectedBooleanFilters.includes(
-                                        filter.value
-                                      )
-                                )
-                                  ? "success.main"
-                                  : "text.disabled",
-                              }}
-                            />
-                            {(
-                              filter.value === "is_official_provider"
-                                ? isOfficialProviderActive
-                                : selectedBooleanFilters.includes(filter.value)
-                            )
-                              ? "Filter active"
-                              : "Filter inactive"}
-                          </Box>
-                        </Box>
-                      ))}
-                    </Box>
-                  </Box>
-                </Box>
-              </Grid>
             </Grid>
           </Box>
         </AccordionDetails>