From 827da9063c69187e6c3697fc21f738f202048b60 Mon Sep 17 00:00:00 2001
From: Mark Saroufim <marksaroufim@meta.com>
Date: Tue, 10 Feb 2026 20:31:37 -0800
Subject: [PATCH] Remove LOC column from leaderboard rankings

The LOC feature was causing rendering bugs where the fetchCodes call
and conditional grid layout could race with auth state initialization,
preventing users from logging in.
---
 frontend/src/api/api.ts                       | 24 -------
 .../src/pages/leaderboard/Leaderboard.tsx     |  1 -
 .../leaderboard/components/CodeDialog.tsx     | 71 ++-----------------
 .../leaderboard/components/RankingLists.tsx   | 68 ++----------------
 4 files changed, 9 insertions(+), 155 deletions(-)

diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
index 43e38cb..7b1ee11 100644
--- a/frontend/src/api/api.ts
+++ b/frontend/src/api/api.ts
@@ -38,30 +38,6 @@ export async function fetchLeaderBoard(id: string): Promise<any> {
   return r.data;
 }
 
-export async function fetchCodes(
-  leaderboardId: number | string,
-  submissionIds: (number | string)[],
-): Promise<any> {
-  const res = await fetch("/api/codes", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({
-      leaderboard_id: leaderboardId,
-      submission_ids: submissionIds,
-    }),
-  });
-
-  if (!res.ok) {
-    const json = await res.json();
-    const message = json?.message || "Unknown error";
-    throw new APIError(`Failed to fetch news contents: ${message}`, res.status);
-  }
-  const r = await res.json();
-  return r.data;
-}
-
 export async function fetchAllNews(): Promise<any> {
   const res = await fetch("/api/news");
   if (!res.ok) {
diff --git a/frontend/src/pages/leaderboard/Leaderboard.tsx b/frontend/src/pages/leaderboard/Leaderboard.tsx
index 7e55744..2f5f2c3 100644
--- a/frontend/src/pages/leaderboard/Leaderboard.tsx
+++ b/frontend/src/pages/leaderboard/Leaderboard.tsx
@@ -174,7 +174,6 @@ export default function Leaderboard() {
               <RankingsList
                 rankings={data.rankings}
                 leaderboardId={id}
-                deadline={data.deadline}
               />
             ) : (
               <Box display="flex" flexDirection="column" alignItems="center">
diff --git a/frontend/src/pages/leaderboard/components/CodeDialog.tsx b/frontend/src/pages/leaderboard/components/CodeDialog.tsx
index df04e71..c832405 100644
--- a/frontend/src/pages/leaderboard/components/CodeDialog.tsx
+++ b/frontend/src/pages/leaderboard/components/CodeDialog.tsx
@@ -1,79 +1,16 @@
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  Typography,
-} from "@mui/material";
-import { useState } from "react";
-import { Link } from "react-router-dom";
-import CodeBlock from "../../../components/codeblock/CodeBlock";
+import { Typography } from "@mui/material";
 
 export function CodeDialog({
-  code,
   fileName = "file",
-  isActive = false,
-  rank,
-  userName,
-  problemName,
 }: {
-  code: any;
   fileName?: string;
-  isActive?: boolean;
   rank?: number;
   userName?: string;
   problemName?: string;
 }) {
-  const [open, setOpen] = useState(false);
-
-  if (isActive)
-    return (
-      <Typography variant="body2" sx={{ fontSize: "0.8125rem" }}>
-        {fileName}
-      </Typography>
-    );
-
-  if (!code)
-    return (
-      <Button
-        component={Link}
-        to="/login"
-        variant="text"
-        size="small"
-        sx={{ textTransform: "none" }}
-      >
-        {fileName}
-      </Button>
-    );
-
   return (
-    <>
-      <Button
-        variant="text"
-        size="small"
-        onClick={() => setOpen(true)}
-        sx={{ textTransform: "none" }}
-      >
-        {fileName}
-      </Button>
-      <Dialog
-        open={open}
-        onClose={() => setOpen(false)}
-        maxWidth="md"
-        fullWidth
-      >
-        <DialogTitle>
-          {rank != null && userName && problemName
-            ? `Rank #${rank} by ${userName} on ${problemName}`
-            : fileName}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Box>
-            <CodeBlock code={code} />
-          </Box>
-        </DialogContent>
-      </Dialog>
-    </>
+    <Typography variant="body2" sx={{ fontSize: "0.8125rem" }}>
+      {fileName}
+    </Typography>
   );
 }
diff --git a/frontend/src/pages/leaderboard/components/RankingLists.tsx b/frontend/src/pages/leaderboard/components/RankingLists.tsx
index 27f42de..01dc7e2 100644
--- a/frontend/src/pages/leaderboard/components/RankingLists.tsx
+++ b/frontend/src/pages/leaderboard/components/RankingLists.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useState } from "react";
 import {
   Box,
   Button,
@@ -12,9 +12,7 @@ import RankingTitleBadge from "./RankingTitleBadge";
 
 import { formatMicroseconds } from "../../../lib/utils/ranking.ts";
 import { getMedalIcon } from "../../../components/common/medal.tsx";
-import { fetchCodes } from "../../../api/api.ts";
 import { CodeDialog } from "./CodeDialog.tsx";
-import { isExpired } from "../../../lib/date/utils.ts";
 import { useAuthStore } from "../../../lib/store/authStore.ts";
 
 interface RankingItem {
@@ -29,7 +27,6 @@ interface RankingItem {
 interface RankingsListProps {
   rankings: Record<string, RankingItem[]>;
   leaderboardId?: string;
-  deadline?: string;
 }
 
 const styles: Record<string, SxProps<Theme>> = {
@@ -70,11 +67,6 @@ const styles: Record<string, SxProps<Theme>> = {
     color: "text.secondary",
     minWidth: "90px",
   },
-  loc: {
-    fontFamily: "monospace",
-    color: "text.secondary",
-    textAlign: "right",
-  },
   submissionId: {
     fontFamily: "monospace",
     color: "text.secondary",
@@ -84,49 +76,13 @@ const styles: Record<string, SxProps<Theme>> = {
 export default function RankingsList({
   rankings,
   leaderboardId,
-  deadline,
 }: RankingsListProps) {
-  const showLoc = !!deadline && isExpired(deadline);
   const me = useAuthStore((s) => s.me);
   const isAdmin = !!me?.user?.is_admin;
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
   const [colorHash, _] = useState<string>(
     Math.random().toString(36).slice(2, 8),
   );
-  const [codes, setCodes] = useState<Map<number, string>>(new Map());
-
-  const submissionIds = useMemo(() => {
-    if (!rankings) return [];
-    const ids: number[] = [];
-    Object.entries(rankings).forEach(([key, value]) => {
-      const li = value as any[];
-      if (Array.isArray(li) && li.length > 0) {
-        li.forEach((item) => {
-          if (item?.submission_id) {
-            ids.push(item.submission_id);
-          }
-        });
-      }
-    });
-    return ids;
-  }, [rankings]);
-
-  useEffect(() => {
-    if (!showLoc) return;
-    if (!submissionIds || submissionIds.length === 0 || !leaderboardId) return;
-    fetchCodes(leaderboardId, submissionIds)
-      .then((data) => {
-        const map = new Map<number, string>();
-        for (const item of data?.results ?? []) {
-          map.set(item.submission_id, item.code);
-        }
-        setCodes(map);
-      })
-      .catch((err) => {
-        // soft error handle it since it's not critical
-        console.warn("[RankingsList] Failed to fetch codes:", err);
-      });
-  }, [leaderboardId, submissionIds, showLoc]);
 
   const toggleExpanded = (field: string) => {
     setExpanded((prev) => ({
@@ -181,35 +137,21 @@ export default function RankingsList({
                       {item.user_name} {getMedalIcon(item.rank)}
                     </Typography>
                   </Grid>
-                  <Grid size={showLoc ? 2 : isAdmin ? 2 : 3}>
+                  <Grid size={isAdmin ? 2 : 3}>
                     <Typography sx={styles.score}>
                       {formatMicroseconds(item.score)}
                     </Typography>
                   </Grid>
-                  <Grid size={showLoc ? (isAdmin ? 1.5 : 2) : isAdmin ? 2 : 3}>
+                  <Grid size={isAdmin ? 2 : 3}>
                     <Typography sx={styles.delta}>
                       {item.prev_score > 0 &&
                         `+${formatMicroseconds(item.prev_score)}`}
                     </Typography>
                   </Grid>
-                  {showLoc && (
-                    <Grid size={isAdmin ? 1.5 : 2}>
-                      <Typography sx={styles.loc}>
-                        {(() => {
-                          const code = codes.get(item?.submission_id);
-                          if (!code) return "";
-                          const lines = code.split("\n").length;
-                          return `${lines} LOC`;
-                        })()}
-                      </Typography>
-                    </Grid>
-                  )}
-                  <Grid size={showLoc ? (isAdmin ? 2.5 : 3) : 3}>
+                  <Grid size={3}>
                     <Typography>
                       <CodeDialog
-                        code={codes.get(item?.submission_id)}
                         fileName={item.file_name}
-                        isActive={!showLoc}
                         rank={item.rank}
                         userName={item.user_name}
                         problemName={field}
@@ -217,7 +159,7 @@ export default function RankingsList({
                     </Typography>
                   </Grid>
                   {isAdmin && (
-                    <Grid size={showLoc ? 1.5 : 2}>
+                    <Grid size={2}>
                       <Typography sx={styles.submissionId}>
                         ID: {item.submission_id}
                       </Typography>