Refactor: 학습 그래프 대기 표시

This commit is contained in:
정현조 2024-10-02 23:14:16 +09:00
parent 494b5503cb
commit f628a84477
3 changed files with 39 additions and 2 deletions

View File

@ -123,6 +123,7 @@ function ModelEvaluation({ projectId, selectedModel }: ModelEvaluationProps) {
{/* 차트의 높이를 100%로 맞춤 */} {/* 차트의 높이를 100%로 맞춤 */}
<ModelLineChart <ModelLineChart
data={reportData} data={reportData}
isTraining={false}
className="h-full" className="h-full"
/> />
</div> </div>

View File

@ -4,9 +4,11 @@ import { CartesianGrid, Line, LineChart, XAxis, YAxis, Tooltip, Legend } from 'r
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { ChartConfig, ChartContainer } from '@/components/ui/chart'; import { ChartConfig, ChartContainer } from '@/components/ui/chart';
import { ReportResponse } from '@/types'; import { ReportResponse } from '@/types';
import { Spinner } from '@/components/ui/spinner';
interface ModelLineChartProps { interface ModelLineChartProps {
data: ReportResponse[]; data: ReportResponse[];
isTraining: boolean;
className?: string; className?: string;
} }
@ -33,7 +35,7 @@ const chartConfig = {
}, },
} satisfies ChartConfig; } satisfies ChartConfig;
export default function ModelLineChart({ data, className }: ModelLineChartProps) { export default function ModelLineChart({ data, isTraining, className }: ModelLineChartProps) {
const latestData = data.length > 0 ? data[data.length - 1] : undefined; const latestData = data.length > 0 ? data[data.length - 1] : undefined;
const totalEpochs = latestData?.totalEpochs || 0; const totalEpochs = latestData?.totalEpochs || 0;
@ -55,6 +57,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
const hasNonZeroData = filledData.some((d) => d[dataKey] !== 0); const hasNonZeroData = filledData.some((d) => d[dataKey] !== 0);
return hasNonZeroData ? ( return hasNonZeroData ? (
<Line <Line
key={dataKey}
dataKey={dataKey} dataKey={dataKey}
type="monotone" type="monotone"
stroke={color} stroke={color}
@ -63,6 +66,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
/> />
) : null; ) : null;
}; };
return ( return (
<Card className={className}> <Card className={className}>
<CardHeader> <CardHeader>
@ -73,7 +77,7 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
<div className="mb-4 flex justify-between"> <div className="mb-4 flex justify-between">
<p> : {latestData.epoch}</p> <p> : {latestData.epoch}</p>
<p> : {latestData.totalEpochs}</p> <p> : {latestData.totalEpochs}</p>
<p> : {latestData.leftSecond}</p> <p> : {latestData.leftSecond.toFixed(2)}</p>
</div> </div>
)} )}
<ChartContainer config={chartConfig}> <ChartContainer config={chartConfig}>
@ -101,6 +105,37 @@ export default function ModelLineChart({ data, className }: ModelLineChartProps)
{renderLine('dflLoss', chartConfig.dflLoss.color)} {renderLine('dflLoss', chartConfig.dflLoss.color)}
{renderLine('fitness', chartConfig.fitness.color)} {renderLine('fitness', chartConfig.fitness.color)}
{renderLine('segLoss', chartConfig.segLoss.color)} {renderLine('segLoss', chartConfig.segLoss.color)}
{isTraining && data.length === 0 && (
<foreignObject
x="0"
y="0"
width="100%"
height="100%"
>
<div className="flex h-full w-full items-center justify-center">
<div className="flex flex-col items-center">
<Spinner
size="large"
show={true}
/>
<p className="mt-4 text-lg font-semibold"> ...</p>
</div>
</div>
</foreignObject>
)}
{!isTraining && data.length === 0 && (
<foreignObject
x="0"
y="0"
width="100%"
height="100%"
>
<div className="flex h-full w-full items-center justify-center text-lg font-semibold text-gray-500">
.
</div>
</foreignObject>
)}
</LineChart> </LineChart>
</ChartContainer> </ChartContainer>
</CardContent> </CardContent>

View File

@ -27,6 +27,7 @@ export default function TrainingGraph({
return ( return (
<ModelLineChart <ModelLineChart
data={trainingDataList || []} data={trainingDataList || []}
isTraining={isTraining}
className={className} className={className}
/> />
); );