Skip to content

PerfTrend: Remove Fastest toggle; Put Best Over Time first #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msaroufim merged 1 commit into from
Feb 25, 2026
Merged

PerfTrend: Remove Fastest toggle; Put Best Over Time first #207

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 33 additions & 47 deletions frontend/src/pages/leaderboard/components/UserTrendChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
const [data, setData] = useState<UserTrendResponse | null>(null);
const [customData, setCustomData] = useState<CustomTrendResponse | null>(null);
const [fastestTrendData, setFastestTrendData] = useState<FastestTrendResponse | null>(null);
const [showFastestTrend, setShowFastestTrend] = useState(true);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [selectedGpuType, setSelectedGpuType] = useState<string>(defaultGpuType || "");
Expand Down Expand Up @@ -361,20 +360,18 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
loadCustomData();
}, [leaderboardId]);

// Fetch fastest trend data when checkbox is toggled on
// Fetch fastest trend data on mount
useEffect(() => {
if (showFastestTrend && !fastestTrendData) {
const loadFastestTrend = async () => {
try {
const result = await fetchFastestTrend(leaderboardId);
setFastestTrendData(result);
} catch (err) {
console.error("Failed to load fastest trend data:", err);
}
};
loadFastestTrend();
}
}, [showFastestTrend, fastestTrendData, leaderboardId]);
const loadFastestTrend = async () => {
try {
const result = await fetchFastestTrend(leaderboardId);
setFastestTrendData(result);
} catch (err) {
console.error("Failed to load fastest trend data:", err);
}
};
loadFastestTrend();
}, [leaderboardId]);

// Build combined options: users + custom entries
// Custom entries are identified by id starting with "custom_"
Expand Down Expand Up @@ -678,52 +675,41 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
{resetting ? "Loading..." : " Load Top 5 "}
</Button>
)}
<Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
<FormControlLabel
control={
<Switch
checked={clipOffscreen}
onChange={(e) => setClipOffscreen(e.target.checked)}
size="small"
/>
}
label="Clip offscreen"
slotProps={{ typography: { variant: "body2" } }}
/>
<FormControlLabel
control={
<Switch
checked={showFastestTrend}
onChange={(e) => setShowFastestTrend(e.target.checked)}
size="small"
/>
}
label="⚡ Fastest (All Users)"
slotProps={{ typography: { variant: "body2" } }}
/>
</Box>
<RadioGroup
value={displayMode}
onChange={(e) => setDisplayMode(e.target.value as "all" | "best")}
sx={{ ml: 1 }}
>
<FormControlLabel
value="all"
value="best"
control={<Radio size="small" sx={{ p: 0.5 }} />}
label="Raw Submissions"
label="Best Over Time"
slotProps={{ typography: { variant: "body2" } }}
/>
<FormControlLabel
value="best"
value="all"
control={<Radio size="small" sx={{ p: 0.5 }} />}
label="Best Over Time"
label="Raw Submissions"
slotProps={{ typography: { variant: "body2" } }}
/>
</RadioGroup>
<Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
<FormControlLabel
control={
<Switch
checked={clipOffscreen}
onChange={(e) => setClipOffscreen(e.target.checked)}
size="small"
/>
}
label="Clip offscreen"
slotProps={{ typography: { variant: "body2" } }}
/>
</Box>
</Box>
);

if (selectedUsers.length === 0 && selectedCustomEntries.length === 0 && !showFastestTrend) {
if (selectedUsers.length === 0 && selectedCustomEntries.length === 0 && !fastestTrendData) {
return (
<Box>
{renderSearchInput()}
Expand Down Expand Up @@ -777,7 +763,7 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
const hasUserData = data?.time_series && Object.keys(data.time_series).length > 0;
const hasCustomSelection = selectedCustomEntries.length > 0;

if (!hasUserData && !hasCustomSelection && !showFastestTrend) {
if (!hasUserData && !hasCustomSelection && !fastestTrendData) {
return (
<Box>
{renderSearchInput()}
Expand All @@ -798,7 +784,7 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
// effectiveGpuType is already defined via useMemo at the top of the component
const gpuData = data?.time_series?.[effectiveGpuType] || {};

if (Object.keys(gpuData).length === 0 && !hasCustomSelection && !showFastestTrend) {
if (Object.keys(gpuData).length === 0 && !hasCustomSelection && !fastestTrendData) {
return (
<Box>
{renderSearchInput()}
Expand Down Expand Up @@ -948,8 +934,8 @@ export default function UserTrendChart({ leaderboardId, defaultUsers, defaultGpu
});
}

// Add fastest trend series if enabled
if (showFastestTrend && fastestTrendData?.time_series?.[effectiveGpuType]) {
// Add fastest trend series (togglable via the chart legend)
if (fastestTrendData?.time_series?.[effectiveGpuType]) {
const fastestGpuData = fastestTrendData.time_series[effectiveGpuType];
const fastestDataPoints = fastestGpuData.fastest;

Expand Down
Loading