From 36b0150878cc621aa69e7cdb5ef75eee6e6dd235 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20Fontbot=C3=A9-Schmidt?= <moritzfo@phys.ethz.ch>
Date: Sun, 7 Jun 2026 08:57:11 +0200
Subject: [PATCH] feat: add "Latest" toggle to data panel to auto-track newest
 experiment

When enabled, the toggle automatically selects the job with the highest
ID whenever the job list updates, so the user always sees the most
recently created experiment without manual clicks.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/data.tsx | 28 ++++++++++++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/data.tsx b/frontend/src/pages/data.tsx
index e04b13ed..3eb20d1b 100644
--- a/frontend/src/pages/data.tsx
+++ b/frontend/src/pages/data.tsx
@@ -1,5 +1,5 @@
-import React, { useContext, useMemo } from "react";
-import { List, ListItemButton, ListItemText, ListSubheader } from "@mui/material";
+import React, { useContext, useEffect, useMemo, useState } from "react";
+import { FormControlLabel, List, ListItemButton, ListItemText, ListSubheader, Switch } from "@mui/material";
 import { JobsContext } from "../contexts/JobsContext";
 import { JobView } from "../components/JobView";
 import { useSearchParams } from "react-router";
@@ -39,6 +39,19 @@ export function DataPage() {
     return Object.values(groupedJobs).some((list) => list.length > 0);
   }, [groupedJobs]);
 
+  const [alwaysShowLatest, setAlwaysShowLatest] = useState(false);
+
+  const latestJobId = useMemo(() => {
+    const ids = Object.keys(jobs).map(Number);
+    return ids.length > 0 ? Math.max(...ids) : null;
+  }, [jobs]);
+
+  useEffect(() => {
+    if (alwaysShowLatest && latestJobId !== null) {
+      setSearchParams({ jobId: String(latestJobId) });
+    }
+  }, [alwaysShowLatest, latestJobId]);
+
   const handleSelectJob = (jobId: number) => {
     setSearchParams({ jobId: String(jobId) });
   };
@@ -54,6 +67,17 @@ export function DataPage() {
           borderRight: "1px solid var(--mui-palette-divider)",
         }}
       >
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              checked={alwaysShowLatest}
+              onChange={(_, v) => setAlwaysShowLatest(v)}
+            />
+          }
+          label="Latest"
+          sx={{ mx: 1, my: 0.5 }}
+        />
         <List dense disablePadding>
           {(Object.entries(groupedJobs) as [JobStatus, Job[]][]).map(
             ([status, jobList]) =>