On the ui, keep the last caption job bar visible at the bottom of a dataset so it can be viewed and edited

This commit is contained in:
Jaret Burkett
2026-08-12 17:32:48 -06:00
parent 18645d93b7
commit e16e04f123
2 changed files with 14 additions and 6 deletions

View File

@@ -20,7 +20,8 @@ interface CaptionMonitorProps {
// info, and the live log. // info, and the live log.
export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionMonitorProps) { export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionMonitorProps) {
const { job, status, refreshJob } = useJobByRef(datasetPath, 3000); const { job, status, refreshJob } = useJobByRef(datasetPath, 3000);
const [collapsed, setCollapsed] = useState(false); // Start collapsed; an active run pops it open via the effect below.
const [collapsed, setCollapsed] = useState(true);
const isActive = !!(job && (job.status === 'running' || job.status === 'queued')); const isActive = !!(job && (job.status === 'running' || job.status === 'queued'));
@@ -68,12 +69,13 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
}, [log, isScrolledToBottom]); }, [log, isScrolledToBottom]);
// Animate the docked height instead of translating, so the collapsed panel // Animate the docked height instead of translating, so the collapsed panel
// never extends below the container and adds scroll. Inactive -> 0 (hidden), // never extends below the container and adds scroll. No job for this
// collapsed -> just the header bar, expanded -> full panel. // dataset -> 0 (hidden), collapsed -> just the header bar, expanded ->
// full panel. The most recent captioning job is shown even when finished.
const HEADER_HEIGHT = 44; const HEADER_HEIGHT = 44;
const PANEL_HEIGHT = 300; const PANEL_HEIGHT = 300;
let height = 0; let height = 0;
if (isActive) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT; if (job) height = collapsed ? HEADER_HEIGHT : PANEL_HEIGHT;
useEffect(() => { useEffect(() => {
onHeightChange?.(height); onHeightChange?.(height);
@@ -107,7 +109,7 @@ export default function CaptionMonitor({ datasetPath, onHeightChange }: CaptionM
</span> </span>
</div> </div>
)} )}
<div className="flex items-center gap-3 flex-shrink-0"> <div className="flex items-center gap-3 flex-shrink-0 ml-auto">
{job && <JobActionBar job={job} onRefresh={refreshJob} autoStartQueue={true} menuAnchor="top end" />} {job && <JobActionBar job={job} onRefresh={refreshJob} autoStartQueue={true} menuAnchor="top end" />}
<button <button
onClick={() => setCollapsed(c => !c)} onClick={() => setCollapsed(c => !c)}

View File

@@ -119,6 +119,12 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
const [savedCaption, setSavedCaption] = useState<string>(''); const [savedCaption, setSavedCaption] = useState<string>('');
const dirtyRef = useRef<boolean>(false); const dirtyRef = useRef<boolean>(false);
// Cards are keyed by image path, so this never needs resetting. Once loaded,
// keep the textarea mounted through poll refreshes — swapping in the
// "Loading caption..." placeholder unmounts it and resets scroll.
const hasLoadedCaptionRef = useRef(false);
if (isCaptionLoaded) hasLoadedCaptionRef.current = true;
// Sync from the fetched caption, but don't clobber unsaved local edits. // Sync from the fetched caption, but don't clobber unsaved local edits.
useEffect(() => { useEffect(() => {
if (!isCaptionLoaded) return; if (!isCaptionLoaded) return;
@@ -265,7 +271,7 @@ const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
'border-transparent border-2': isCaptionCurrent, 'border-transparent border-2': isCaptionCurrent,
})} })}
> >
{isCaptionLoaded ? ( {isCaptionLoaded || hasLoadedCaptionRef.current ? (
<form <form
onSubmit={e => { onSubmit={e => {
e.preventDefault(); e.preventDefault();