ui: group suite rows under their devlogic/sysops total header
Each category now renders as a self-contained section: its colored total strip, its own column headings, and its suite rows directly beneath. Empty categories are omitted entirely. Removes the old single-column-header layout that sat above all rows regardless of category.
This commit is contained in:
PeterChrz
parent
75337a80a7
commit
895a764b88
GPG key ID:
8F0826ECF7302C63
1 changed files with 115 additions and 74 deletions
|
|
@ -164,85 +164,126 @@ class="w-64"
|
||||||
<span class="text-sm text-zinc-500">{{ $session->band->runner_name ?? 'anonymous' }}</span>
|
<span class="text-sm text-zinc-500">{{ $session->band->runner_name ?? 'anonymous' }}</span>
|
||||||
<span class="text-xs text-zinc-400">{{ optional($session->band->ran_at)->format('M j Y') }}</span>
|
<span class="text-xs text-zinc-400">{{ optional($session->band->ran_at)->format('M j Y') }}</span>
|
||||||
</div>
|
</div>
|
||||||
{{-- Dual totals: Devlogic (soft/prose/psych/depthsweep) + Sysops (infra/scenario) --}}
|
@php
|
||||||
@if ($session->band->devlogic_tps !== null || $session->band->sysops_tps !== null)
|
$devlogicSuites = ['softbench', 'prosebench', 'psychbench', 'depthsweep'];
|
||||||
<div class="flex flex-col border-b border-zinc-200 dark:border-zinc-700">
|
$sysopsSuites = ['infrabench', 'scenariobench'];
|
||||||
@if ($session->band->devlogic_tps !== null)
|
$devlogicRows = $session->suites->filter(fn ($r) => in_array($r->suite, $devlogicSuites));
|
||||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-sky-400 bg-sky-50/50 px-4 py-2 dark:border-sky-500 dark:bg-sky-950/20">
|
$sysopsRows = $session->suites->filter(fn ($r) => in_array($r->suite, $sysopsSuites));
|
||||||
<span class="text-xs font-semibold uppercase tracking-wider text-sky-600 dark:text-sky-400">{{ __('Devlogic total') }}</span>
|
@endphp
|
||||||
<span class="text-sm">
|
{{-- Devlogic section: total strip + column headers + suite rows --}}
|
||||||
<span class="font-mono font-semibold">{{ number_format($session->band->devlogic_tps, 1) }}</span>
|
@if ($devlogicRows->isNotEmpty() && $session->band->devlogic_tps !== null)
|
||||||
<span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-sky-400 bg-sky-50/50 px-4 py-2 dark:border-sky-500 dark:bg-sky-950/20">
|
||||||
|
<span class="text-xs font-semibold uppercase tracking-wider text-sky-600 dark:text-sky-400">{{ __('Devlogic total') }}</span>
|
||||||
|
<span class="text-sm">
|
||||||
|
<span class="font-mono font-semibold">{{ number_format($session->band->devlogic_tps, 1) }}</span>
|
||||||
|
<span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="text-sm">
|
||||||
|
<span class="font-mono font-semibold">{{ number_format($session->band->devlogic_tokens) }}</span>
|
||||||
|
<span class="text-xs text-zinc-400">{{ __('tokens') }}</span>
|
||||||
|
</span>
|
||||||
|
<span class="text-sm">
|
||||||
|
<flux:badge size="xs" color="emerald">✔ {{ $session->band->devlogic_passed }}</flux:badge>
|
||||||
|
<flux:badge size="xs" color="{{ $session->band->devlogic_failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $session->band->devlogic_failed }}</flux:badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden px-4 pt-2 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Benchmark') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Thinking') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Result') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Speed (tok/s)') }} <span class="font-normal normal-case">{{ __('weighted average') }}</span></span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Tokens') }}</span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||||
|
@foreach ($devlogicRows as $row)
|
||||||
|
@php
|
||||||
|
$detailUrl = $row->suite === 'scenariobench'
|
||||||
|
? route('sessions.scenarios', $session->band->id)
|
||||||
|
: route('runs.show', $row->run_id) . ($row->level && $row->suite === 'depthsweep' ? '?level=' . $row->level : '');
|
||||||
|
@endphp
|
||||||
|
<a href="{{ $detailUrl }}" wire:navigate
|
||||||
|
class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
||||||
|
<span><flux:badge size="xs">{{ $row->suite }}</flux:badge></span>
|
||||||
|
<span>
|
||||||
|
@if ($row->level)
|
||||||
|
<flux:badge size="xs" color="sky">{{ $row->level }}</flux:badge>
|
||||||
|
@endif
|
||||||
</span>
|
</span>
|
||||||
<span class="text-sm">
|
<span class="flex items-center gap-1.5">
|
||||||
<span class="font-mono font-semibold">{{ number_format($session->band->devlogic_tokens) }}</span>
|
<flux:badge size="xs" color="emerald">✔ {{ $row->passed }}</flux:badge>
|
||||||
<span class="text-xs text-zinc-400">{{ __('tokens') }}</span>
|
<flux:badge size="xs" color="{{ $row->failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $row->failed }}</flux:badge>
|
||||||
</span>
|
</span>
|
||||||
<span class="text-sm">
|
<span>
|
||||||
<flux:badge size="xs" color="emerald">✔ {{ $session->band->devlogic_passed }}</flux:badge>
|
@if ($row->weighted_user_tps !== null)
|
||||||
<flux:badge size="xs" color="{{ $session->band->devlogic_failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $session->band->devlogic_failed }}</flux:badge>
|
<span class="font-mono text-sm">{{ number_format($row->weighted_user_tps, 1) }}</span>
|
||||||
|
@elseif ($row->gen_tps !== null)
|
||||||
|
<span class="font-mono text-sm">{{ number_format($row->gen_tps, 1) }} <span class="text-xs text-zinc-400">{{ __('gen') }}</span></span>
|
||||||
|
@endif
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span class="font-mono text-sm">{{ number_format($row->total_tokens) }}</span>
|
||||||
@endif
|
<span class="text-xs text-zinc-400 md:justify-self-end">{{ __('per-task detail') }} →</span>
|
||||||
@if ($session->band->sysops_tps !== null)
|
</a>
|
||||||
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-amber-400 bg-amber-50/50 px-4 py-2 dark:border-amber-500 dark:bg-amber-950/20">
|
@endforeach
|
||||||
<span class="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">{{ __('Sysops total') }}</span>
|
</div>
|
||||||
<span class="text-sm">
|
@endif
|
||||||
<span class="font-mono font-semibold">{{ number_format($session->band->sysops_tps, 1) }}</span>
|
{{-- Sysops section: total strip + column headers + suite rows --}}
|
||||||
<span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>
|
@if ($sysopsRows->isNotEmpty() && $session->band->sysops_tps !== null)
|
||||||
</span>
|
<div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-l-2 border-amber-400 bg-amber-50/50 px-4 py-2 dark:border-amber-500 dark:bg-amber-950/20">
|
||||||
<span class="text-sm">
|
<span class="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">{{ __('Sysops total') }}</span>
|
||||||
<span class="font-mono font-semibold">{{ number_format($session->band->sysops_tokens) }}</span>
|
<span class="text-sm">
|
||||||
<span class="text-xs text-zinc-400">{{ __('tokens') }}</span>
|
<span class="font-mono font-semibold">{{ number_format($session->band->sysops_tps, 1) }}</span>
|
||||||
</span>
|
<span class="text-xs text-zinc-400">{{ __('tok/s') }}</span>
|
||||||
<span class="text-sm">
|
</span>
|
||||||
<flux:badge size="xs" color="emerald">✔ {{ $session->band->sysops_passed }}</flux:badge>
|
<span class="text-sm">
|
||||||
<flux:badge size="xs" color="{{ $session->band->sysops_failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $session->band->sysops_failed }}</flux:badge>
|
<span class="font-mono font-semibold">{{ number_format($session->band->sysops_tokens) }}</span>
|
||||||
</span>
|
<span class="text-xs text-zinc-400">{{ __('tokens') }}</span>
|
||||||
</div>
|
</span>
|
||||||
@endif
|
<span class="text-sm">
|
||||||
|
<flux:badge size="xs" color="emerald">✔ {{ $session->band->sysops_passed }}</flux:badge>
|
||||||
|
<flux:badge size="xs" color="{{ $session->band->sysops_failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $session->band->sysops_failed }}</flux:badge>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="hidden px-4 pt-2 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Benchmark') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Thinking') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Result') }}</span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Speed (tok/s)') }} <span class="font-normal normal-case">{{ __('weighted average') }}</span></span>
|
||||||
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Tokens') }}</span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||||
|
@foreach ($sysopsRows as $row)
|
||||||
|
@php
|
||||||
|
$detailUrl = $row->suite === 'scenariobench'
|
||||||
|
? route('sessions.scenarios', $session->band->id)
|
||||||
|
: route('runs.show', $row->run_id) . ($row->level && $row->suite === 'depthsweep' ? '?level=' . $row->level : '');
|
||||||
|
@endphp
|
||||||
|
<a href="{{ $detailUrl }}" wire:navigate
|
||||||
|
class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
||||||
|
<span><flux:badge size="xs">{{ $row->suite }}</flux:badge></span>
|
||||||
|
<span>
|
||||||
|
@if ($row->level)
|
||||||
|
<flux:badge size="xs" color="sky">{{ $row->level }}</flux:badge>
|
||||||
|
@endif
|
||||||
|
</span>
|
||||||
|
<span class="flex items-center gap-1.5">
|
||||||
|
<flux:badge size="xs" color="emerald">✔ {{ $row->passed }}</flux:badge>
|
||||||
|
<flux:badge size="xs" color="{{ $row->failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $row->failed }}</flux:badge>
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
@if ($row->weighted_user_tps !== null)
|
||||||
|
<span class="font-mono text-sm">{{ number_format($row->weighted_user_tps, 1) }}</span>
|
||||||
|
@elseif ($row->gen_tps !== null)
|
||||||
|
<span class="font-mono text-sm">{{ number_format($row->gen_tps, 1) }} <span class="text-xs text-zinc-400">{{ __('gen') }}</span></span>
|
||||||
|
@endif
|
||||||
|
</span>
|
||||||
|
<span class="font-mono text-sm">{{ number_format($row->total_tokens) }}</span>
|
||||||
|
<span class="text-xs text-zinc-400 md:justify-self-end">{{ __('per-task detail') }} →</span>
|
||||||
|
</a>
|
||||||
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
{{-- Column titles aligned over the suite rows (md+ only) --}}
|
|
||||||
<div class="hidden px-4 pt-2 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
|
||||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Benchmark') }}</span>
|
|
||||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Thinking') }}</span>
|
|
||||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Result') }}</span>
|
|
||||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Speed (tok/s)') }} <span class="font-normal normal-case">{{ __('weighted average') }}</span></span>
|
|
||||||
<span class="text-[10px] font-semibold uppercase tracking-wider text-zinc-400">{{ __('Tokens') }}</span>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
||||||
@foreach ($session->suites as $row)
|
|
||||||
@php
|
|
||||||
$detailUrl = $row->suite === 'scenariobench'
|
|
||||||
? route('sessions.scenarios', $session->band->id)
|
|
||||||
: route('runs.show', $row->run_id) . ($row->level && $row->suite === 'depthsweep' ? '?level=' . $row->level : '');
|
|
||||||
@endphp
|
|
||||||
<a href="{{ $detailUrl }}" wire:navigate
|
|
||||||
class="flex flex-wrap items-center gap-x-4 gap-y-1 px-4 py-2.5 hover:bg-zinc-50 dark:hover:bg-zinc-800/60 md:grid md:grid-cols-[7.5rem_4.5rem_7rem_15rem_6rem_1fr] md:gap-x-4 md:items-center">
|
|
||||||
<span><flux:badge size="xs">{{ $row->suite }}</flux:badge></span>
|
|
||||||
<span>
|
|
||||||
@if ($row->level)
|
|
||||||
<flux:badge size="xs" color="sky">{{ $row->level }}</flux:badge>
|
|
||||||
@endif
|
|
||||||
</span>
|
|
||||||
<span class="flex items-center gap-1.5">
|
|
||||||
<flux:badge size="xs" color="emerald">✔ {{ $row->passed }}</flux:badge>
|
|
||||||
<flux:badge size="xs" color="{{ $row->failed > 0 ? 'rose' : 'zinc' }}">✘ {{ $row->failed }}</flux:badge>
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
@if ($row->weighted_user_tps !== null)
|
|
||||||
<span class="font-mono text-sm">{{ number_format($row->weighted_user_tps, 1) }}</span>
|
|
||||||
@elseif ($row->gen_tps !== null)
|
|
||||||
<span class="font-mono text-sm">{{ number_format($row->gen_tps, 1) }} <span class="text-xs text-zinc-400">{{ __('gen') }}</span></span>
|
|
||||||
@endif
|
|
||||||
</span>
|
|
||||||
<span class="font-mono text-sm">{{ number_format($row->total_tokens) }}</span>
|
|
||||||
<span class="text-xs text-zinc-400 md:justify-self-end">{{ __('per-task detail') }} →</span>
|
|
||||||
</a>
|
|
||||||
@endforeach
|
|
||||||
</div>
|
|
||||||
</flux:card>
|
</flux:card>
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue