xpltdco/chrysopedia
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

fix: StageTabView useCallback dependency loop — use ref for initial tab selection

Browse source
This commit is contained in:
jlightner 2026-04-03 03:30:45 +00:00
parent c7a4d8aa27
commit 995d0c900d
1 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages/AdminPipeline.tsx
View file

@ -537,6 +537,7 @@ function StageTabView({ videoId, runId, status }: { videoId: string; runId: stri
const [events, setEvents] = useState<PipelineEvent[]>([]); const [events, setEvents] = useState<PipelineEvent[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState<string | null>(null); const [activeTab, setActiveTab] = useState<string | null>(null);
const initialSelect = useRef(false);
const load = useCallback(async (silent = false) => { const load = useCallback(async (silent = false) => {
if (!silent) setLoading(true); if (!silent) setLoading(true);
@ -548,14 +549,14 @@ function StageTabView({ videoId, runId, status }: { videoId: string; runId: stri
run_id: runId, run_id: runId,
}); });
setEvents(res.items); setEvents(res.items);
// Auto-select the most interesting tab: latest active or error stage // Auto-select tab on first load only
if (!silent && activeTab === null && res.items.length > 0) { if (!initialSelect.current && res.items.length > 0) {
initialSelect.current = true;
const stages = new Set(res.items.map((e) => e.stage)); const stages = new Set(res.items.map((e) => e.stage));
const errorStage = res.items.find((e) => e.event_type === "error")?.stage; const errorStage = res.items.find((e) => e.event_type === "error")?.stage;
if (errorStage) { if (errorStage) {
setActiveTab(errorStage); setActiveTab(errorStage);
} else { } else {
// Pick the latest stage that has events
const lastStage = [...STAGE_TAB_ORDER].reverse().find((s) => stages.has(s.key)); const lastStage = [...STAGE_TAB_ORDER].reverse().find((s) => stages.has(s.key));
if (lastStage) setActiveTab(lastStage.key); if (lastStage) setActiveTab(lastStage.key);
} }
@ -565,7 +566,7 @@ function StageTabView({ videoId, runId, status }: { videoId: string; runId: stri
} finally { } finally {
if (!silent) setLoading(false); if (!silent) setLoading(false);
} }
}, [videoId, runId, activeTab]); }, [videoId, runId]);
useEffect(() => { void load(); }, [load]); useEffect(() => { void load(); }, [load]);