feat(frontend): limit training history to 3 runs with expand toggle
Both training panels (OCR and segmentation) share TrainingHistory. Show only the 3 most recent runs by default; render a Mehr/Weniger anzeigen button when there are more. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,6 +20,12 @@ interface Props {
|
|||||||
|
|
||||||
let { runs }: Props = $props();
|
let { runs }: Props = $props();
|
||||||
|
|
||||||
|
const COLLAPSED_COUNT = 3;
|
||||||
|
let expanded = $state(false);
|
||||||
|
|
||||||
|
const visibleRuns = $derived(expanded ? runs : runs.slice(0, COLLAPSED_COUNT));
|
||||||
|
const hasMore = $derived(runs.length > COLLAPSED_COUNT);
|
||||||
|
|
||||||
const dateFormatter = new Intl.DateTimeFormat('de-DE', {
|
const dateFormatter = new Intl.DateTimeFormat('de-DE', {
|
||||||
day: 'numeric',
|
day: 'numeric',
|
||||||
month: 'short',
|
month: 'short',
|
||||||
@@ -54,7 +60,7 @@ function formatCer(cer: number | undefined | null): string {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{:else}
|
{:else}
|
||||||
{#each runs as run (run.id)}
|
{#each visibleRuns as run (run.id)}
|
||||||
<tr class="border-b border-line/50 last:border-0">
|
<tr class="border-b border-line/50 last:border-0">
|
||||||
<td class="py-2 text-ink-2">{formatDate(run.createdAt)}</td>
|
<td class="py-2 text-ink-2">{formatDate(run.createdAt)}</td>
|
||||||
<td class="py-2">
|
<td class="py-2">
|
||||||
@@ -117,3 +123,15 @@ function formatCer(cer: number | undefined | null): string {
|
|||||||
{/if}
|
{/if}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{#if hasMore}
|
||||||
|
<div class="mt-2 text-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-xs font-medium text-ink-3 transition-colors hover:text-ink"
|
||||||
|
onclick={() => (expanded = !expanded)}
|
||||||
|
>
|
||||||
|
{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|||||||
Reference in New Issue
Block a user