Merge pull request #14949 from ayanahye/leaderboard-evaluation-additions

Feat: add initial modal for the leaderboard

src/lib/components/admin/Evaluations/Leaderboard.svelte

@@ -7,6 +7,8 @@
 	import { onMount, getContext } from 'svelte';
 	import { models } from '$lib/stores';
 
+	import ModelModal from './LeaderboardModal.svelte';
+
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import MagnifyingGlass from '$lib/components/icons/MagnifyingGlass.svelte';
@@ -66,6 +68,25 @@
 		}
 	}
 
+	//////////////////////
+	//
+	// Aggregate Level Modal
+	//
+	//////////////////////
+
+	let showLeaderboardModal = false;
+	let selectedModel = null;
+
+	const openFeedbackModal = (model) => {
+		showLeaderboardModal = true;
+		selectedModel = model;
+	};
+
+	const closeLeaderboardModal = () => {
+		showLeaderboardModal = false;
+		selectedModel = null;
+	};
+
 	//////////////////////
 	//
 	// Rank models by Elo rating
@@ -305,6 +326,13 @@
 	});
 </script>
 
+<ModelModal
+	bind:show={showLeaderboardModal}
+	model={selectedModel}
+	{feedbacks}
+	onClose={closeLeaderboardModal}
+/>
+
 <div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
 	<div class="flex md:self-center text-lg font-medium px-0.5 shrink-0 items-center">
 		<div class=" gap-1">
@@ -475,7 +503,10 @@
 			</thead>
 			<tbody class="">
 				{#each sortedModels as model, modelIdx (model.id)}
-					<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs group">
+					<tr
+						class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs group cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+						on:click={() => openFeedbackModal(model)}
+					>
 						<td class="px-3 py-1.5 text-left font-medium text-gray-900 dark:text-white w-fit">
 							<div class=" line-clamp-1">
 								{model?.rating !== '-' ? modelIdx + 1 : '-'}

src/lib/components/admin/Evaluations/LeaderboardModal.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+	import Modal from '$lib/components/common/Modal.svelte';
+	import { getContext } from 'svelte';
+	export let show = false;
+	export let model = null;
+	export let feedbacks = [];
+	export let onClose: () => void = () => {};
+	const i18n = getContext('i18n');
+
+	const close = () => {
+		show = false;
+		onClose();
+	};
+
+	$: topTags = model ? getTopTagsForModel(model.id, feedbacks) : [];
+
+	const getTopTagsForModel = (modelId: string, feedbacks: any[], topN = 5) => {
+		const tagCounts = new Map();
+		feedbacks
+			.filter((fb) => fb.data.model_id === modelId)
+			.forEach((fb) => {
+				(fb.data.tags || []).forEach((tag) => {
+					tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
+				});
+			});
+		return Array.from(tagCounts.entries())
+			.sort((a, b) => b[1] - a[1])
+			.slice(0, topN)
+			.map(([tag, count]) => ({ tag, count }));
+	};
+</script>
+
+<Modal size="sm" bind:show>
+	{#if model}
+		<div class="flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
+			<div class="text-lg font-medium self-center">
+				{model.name}
+				{$i18n.t('Details')}
+			</div>
+			<button class="self-center" on:click={close} aria-label="Close">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
+			</button>
+		</div>
+		<div class="px-5 pb-4 dark:text-gray-200">
+			<div class="mb-2">
+				<strong>{$i18n.t('Top Tags')}:</strong>
+				{#if topTags.length}
+					<div class="flex flex-wrap gap-1 mt-1">
+						{#each topTags as tagInfo}
+							<span class="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-xs">
+								{tagInfo.tag} <span class="text-gray-500">({tagInfo.count})</span>
+							</span>
+						{/each}
+					</div>
+				{:else}
+					<span>-</span>
+				{/if}
+			</div>
+			<div class="flex justify-end pt-3">
+				<button
+					class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
+					type="button"
+					on:click={close}
+				>
+					{$i18n.t('Close')}
+				</button>
+			</div>
+		</div>
+	{/if}
+</Modal>