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:
@@ -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)}
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user