Spaces:

DAG-UPB
/

TS-Arena

Running

TS-Arena / src /components /ModelPerformanceCharts.tsx

Leaderboards show each model's place with its rank range below

8f66cae 13 days ago

14 kB

'use client';

import { useState } from 'react';
import Link from 'next/link';
import dynamic from 'next/dynamic';
import type { PlotParams } from 'react-plotly.js';
import type { ArenaScoreScopeHistory } from '@/src/services/modelService';
import { useIsMobile } from '@/src/hooks/useIsMobile';
import { MOBILE_PLOT_CONFIG, MOBILE_PLOT_HEIGHT, MOBILE_PLOT_MARGIN } from '@/src/components/plotMobile';
import RankFigure from '@/src/components/RankFigure';
import WithReason from '@/src/components/WithReason';
import { describeRank, formatInterval, formatScore } from '@/src/lib/arenaScore';
import { ChevronDown, ChevronRight } from 'lucide-react';

// Dynamically import Plotly to avoid SSR issues. `PlotlyPlot` is the app's
// single Plotly entry point — see the note there on why it is not
// `react-plotly.js` directly.
const Plot = dynamic(() => import('@/src/components/PlotlyPlot'), { ssr: false });

interface ModelPerformanceChartsProps {
  scopes: ArenaScoreScopeHistory[];
}

export default function ModelPerformanceCharts({ scopes }: ModelPerformanceChartsProps) {
  const [expandedScopes, setExpandedScopes] = useState<Record<string, boolean>>({});

  const isMobile = useIsMobile();

  const toggleScope = (uniqueKey: string) => {
    setExpandedScopes(prev => ({
      ...prev,
      [uniqueKey]: !prev[uniqueKey]
    }));
  };

  const formatFrequencyHorizon = (scopeId: string) => {
    // Remove everything after comma
    const cleanedScopeId = scopeId.split(',')[0].trim();

    // Split by ::
    const [frequencyPart, horizonPart] = cleanedScopeId.split('::');

    // Parse frequency (format: H:MM:SS)
    const [hours, minutes, seconds] = frequencyPart.split(':').map(v => parseInt(v, 10));
    let frequencyDisplay = '';

    if (hours > 0) {
      frequencyDisplay = `${hours}h`;
    } else if (minutes > 0) {
      frequencyDisplay = `${minutes}min`;
    } else if (seconds > 0) {
      frequencyDisplay = `${seconds}s`;
    } else {
      frequencyDisplay = 'instant';
    }

    return { frequency: frequencyDisplay, horizon: horizonPart?.trim() || 'N/A' };
  };

  const getChartTitle = (scope: ArenaScoreScopeHistory) => {
    if (scope.scope_type === 'global') {
      return 'Overall Ranking';
    } else if (scope.scope_type === 'definition') {
      return scope.definition_name ?? `Challenge ${scope.definition_id ?? scope.scope_id}`;
    } else if (scope.scope_type === 'frequency_horizon' && scope.scope_id) {
      const { frequency, horizon } = formatFrequencyHorizon(scope.scope_id);
      return (
        <div className="flex items-center gap-2">
          <span className="text-gray-900 text-lg font-semibold">Horizon: {horizon}, </span>
          <span className="text-gray-900 text-lg font-semibold">Frequency: {frequency}</span>
          <span className="text-gray-500 text-sm ml-2">({scope.scope_id})</span>
        </div>
      );
    }
    return scope.scope_type; // fallback
  };

  if (!scopes || scopes.length === 0) {
    return (
      <div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">
        No ranking data available for this model.
      </div>
    );
  }

  // Sort scopes to show global first, then definitions (alphabetically), then frequency_horizon
  const sortedScopes = [...scopes].sort((a, b) => {
    // Global always comes first
    if (a.scope_type === 'global') return -1;
    if (b.scope_type === 'global') return 1;

    // Frequency_horizon always comes last
    if (a.scope_type === 'frequency_horizon') return 1;
    if (b.scope_type === 'frequency_horizon') return -1;

    // Both are definitions, sort alphabetically by name
    return (a.definition_name ?? '').localeCompare(b.definition_name ?? '');
  });

  // Group scopes by scope_type
  const groupedScopes = sortedScopes.reduce((acc, scope) => {
    if (!acc[scope.scope_type]) {
      acc[scope.scope_type] = [];
    }
    acc[scope.scope_type].push(scope);
    return acc;
  }, {} as Record<string, ArenaScoreScopeHistory[]>);

  const renderSectionHeader = (scopeType: string) => {
    if (scopeType === 'global') return null;

    if (scopeType === 'definition') {
      return (
        <div className="mb-4 mt-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-1">Challenge Definitions</h3>
          <p className="text-sm text-gray-600">Rankings evaluated for each individual challenge definition.</p>
        </div>
      );
    }

    if (scopeType === 'frequency_horizon') {
      return (
        <div className="mb-4 mt-6">
          <h3 className="text-lg font-semibold text-gray-800 mb-1">Frequency & Horizon Combinations</h3>
          <p className="text-sm text-gray-600">Rankings evaluated across different forecast frequency and horizon configurations.</p>
        </div>
      );
    }

    return null;
  };

  return (
    <div className="space-y-4">
      {['global', 'definition', 'frequency_horizon'].map((scopeType) => {
        const scopesOfType = groupedScopes[scopeType];
        if (!scopesOfType || scopesOfType.length === 0) return null;

        return (
          <div key={scopeType}>
            {renderSectionHeader(scopeType)}
            {scopesOfType.map((scope) => {
        const uniqueKey = `${scope.scope_type}-${scope.scope_id ?? ''}`;
        const isExpanded = expandedScopes[uniqueKey];
        const chartTitle = getChartTitle(scope);

        // Sort the days by date
        const days = [...scope.daily_scores].sort((a, b) =>
          new Date(a.calculation_date).getTime() - new Date(b.calculation_date).getTime()
        );
        const latest = days.length > 0 ? days[days.length - 1] : null;
        const latestRank = latest ? describeRank(latest) : null;
        const hasScores = days.some(d => d.score !== null);

        // Prepare data for Plotly
        const dates = days.map(d => d.calculation_date);
        const scores = days.map(d => d.score);
        const upper = days.map(d => d.ci_upper);
        const lower = days.map(d => d.ci_lower);
        const rankTexts = days.map(d => describeRank(d).text);

        const plotData: PlotParams['data'] = [
          {
            x: dates,
            y: lower,
            fill: 'none',
            line: { color: 'transparent' },
            name: '95 % CI lower',
            type: 'scatter',
            mode: 'lines',
            showlegend: false,
            hoverinfo: 'skip',
          },
          {
            x: dates,
            y: upper,
            fill: 'tonexty',
            fillcolor: 'rgba(59, 130, 246, 0.2)',
            line: { color: 'transparent' },
            name: '95 % CI upper',
            type: 'scatter',
            mode: 'lines',
            showlegend: false,
            hoverinfo: 'skip',
          },
          {
            x: dates,
            y: scores,
            name: 'Arena Score',
            type: 'scatter',
            mode: 'lines+markers',
            line: { color: 'rgb(59, 130, 246)', width: 2 },
            marker: { color: 'rgb(59, 130, 246)', size: 6 },
            customdata: rankTexts,
            hovertemplate:
              '<b>Date:</b> %{x}<br>' +
              '<b>Arena Score:</b> %{y:.1f}<br>' +
              '<b>Rank:</b> %{customdata}<br>' +
              '<extra></extra>',
          },
        ];

        const layout: PlotParams['layout'] = isMobile
          ? {
              // No plot title on a phone: the accordion header above already
              // names the scope, and the y-axis title names the metric, so the
              // title would only cost 50px of a 360px-tall chart.
              xaxis: {
                gridcolor: '#e5e7eb',
                showgrid: true,
                automargin: true,
                nticks: 4,
                tickangle: 0,
                tickfont: { size: 10 },
              },
              yaxis: {
                title: { text: 'Arena Score' },
                gridcolor: '#e5e7eb',
                showgrid: true,
                automargin: true,
                tickfont: { size: 10 },
              },
              hovermode: 'closest',
              // The only legend entry duplicates the y-axis title, and it sits
              // on top of the plot at (0, 1) — drop it rather than replace it.
              showlegend: false,
              dragmode: false,
              autosize: true,
              margin: MOBILE_PLOT_MARGIN,
              paper_bgcolor: 'white',
              plot_bgcolor: 'white',
            }
          : {
              title: { text: 'Arena Score Over Time' },
              xaxis: {
                title: { text: 'Date' },
                gridcolor: '#e5e7eb',
                showgrid: true,
              },
              yaxis: {
                title: { text: 'Arena Score' },
                gridcolor: '#e5e7eb',
                showgrid: true,
              },
              hovermode: 'closest',
              showlegend: true,
              legend: {
                x: 0,
                y: 1,
                bgcolor: 'rgba(255, 255, 255, 0.8)',
              },
              margin: { l: 60, r: 40, t: 50, b: 60 },
              paper_bgcolor: 'white',
              plot_bgcolor: 'white',
            };

        return (
          <div key={uniqueKey} className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
            <button
              onClick={() => toggleScope(uniqueKey)}
              className="w-full px-6 py-4 flex flex-wrap sm:flex-nowrap items-center justify-between gap-x-4 gap-y-2 bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div className="flex items-center space-x-3">
                {isExpanded ? (
                  <ChevronDown className="h-5 w-5 text-gray-500 flex-shrink-0" />
                ) : (
                  <ChevronRight className="h-5 w-5 text-gray-500 flex-shrink-0" />
                )}
                <h3 className="text-lg font-semibold text-gray-900">
                  {chartTitle}
                </h3>
              </div>
              <div className="flex items-center space-x-4 w-full justify-between sm:w-auto sm:justify-end">
                {scope.scope_type === 'definition' && (
                  <Link
                    href={`/challenges/${scope.definition_id}`}
                    onClick={(e) => e.stopPropagation()}
                    className="text-sm text-blue-600 hover:text-blue-800 hover:underline sm:w-32 sm:text-right"
                  >
                    View Challenge →
                  </Link>
                )}
                {scope.scope_type !== 'definition' && (
                  <div className="hidden sm:block sm:w-32"></div>
                )}
                {latest && latestRank && (
                  <>
                    <span className="text-gray-900 text-base font-semibold sm:w-44 sm:text-right">
                      Arena Score: {latest.score === null ? '–' : formatScore(latest.score)}
                    </span>
                    {latestRank.ranked ? (
                      <span className="text-blue-600 text-base font-semibold sm:w-52 sm:text-right" title={latestRank.title}>
                        Rank: {latestRank.text}
                      </span>
                    ) : (
                      <span className="text-gray-500 text-sm sm:w-52 sm:text-right" title={latestRank.title}>
                        {latestRank.text}
                      </span>
                    )}
                  </>
                )}
              </div>
            </button>

            {isExpanded && latest && latestRank && hasScores && (
              <div className="p-6">
                <Plot
                  data={plotData}
                  layout={layout}
                  config={isMobile ? MOBILE_PLOT_CONFIG : {
                    responsive: true,
                    displayModeBar: true,
                    displaylogo: false,
                    modeBarButtonsToRemove: ['lasso2d', 'select2d'],
                  }}
                  style={{ width: '100%', height: isMobile ? MOBILE_PLOT_HEIGHT : '400px' }}
                />

                {/* Current stats */}
                <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
                  <div className="bg-gray-50 p-3 rounded">
                    <div className="text-gray-500 text-xs">Current Rank</div>
                    {latestRank.bounds ? (
                      <RankFigure
                        bounds={latestRank.bounds}
                        reason={latestRank.title}
                        className="text-lg font-semibold text-gray-900"
                      />
                    ) : (
                      <WithReason reason={latestRank.title} className="block text-sm text-gray-700">
                        {latestRank.text}
                      </WithReason>
                    )}
                  </div>
                  <div className="bg-gray-50 p-3 rounded">
                    <div className="text-gray-500 text-xs">Current Arena Score</div>
                    <div className="text-lg font-semibold text-gray-900">
                      {latest.score === null ? '–' : formatScore(latest.score)}
                    </div>
                  </div>
                  <div className="bg-gray-50 p-3 rounded">
                    <div className="text-gray-500 text-xs">95 % CI</div>
                    <div className="text-lg font-semibold text-gray-900">
                      {formatInterval(latest.ci_lower, latest.ci_upper) ?? '–'}
                    </div>
                  </div>
                </div>
              </div>
            )}

            {isExpanded && !(latest && hasScores) && (
              <div className="p-6 text-center text-gray-500">
                No score history available for this ranking.
              </div>
            )}
          </div>
        );
      })}
          </div>
        );
      })}
    </div>
  );
}

	'use client';

	import { useState } from 'react';
	import Link from 'next/link';
	import dynamic from 'next/dynamic';
	import type { PlotParams } from 'react-plotly.js';
	import type { ArenaScoreScopeHistory } from '@/src/services/modelService';
	import { useIsMobile } from '@/src/hooks/useIsMobile';
	import { MOBILE_PLOT_CONFIG, MOBILE_PLOT_HEIGHT, MOBILE_PLOT_MARGIN } from '@/src/components/plotMobile';
	import RankFigure from '@/src/components/RankFigure';
	import WithReason from '@/src/components/WithReason';
	import { describeRank, formatInterval, formatScore } from '@/src/lib/arenaScore';
	import { ChevronDown, ChevronRight } from 'lucide-react';

	// Dynamically import Plotly to avoid SSR issues. `PlotlyPlot` is the app's
	// single Plotly entry point — see the note there on why it is not
	// `react-plotly.js` directly.
	const Plot = dynamic(() => import('@/src/components/PlotlyPlot'), { ssr: false });

	interface ModelPerformanceChartsProps {
	scopes: ArenaScoreScopeHistory[];
	}

	export default function ModelPerformanceCharts({ scopes }: ModelPerformanceChartsProps) {
	const [expandedScopes, setExpandedScopes] = useState<Record<string, boolean>>({});

	const isMobile = useIsMobile();

	const toggleScope = (uniqueKey: string) => {
	setExpandedScopes(prev => ({
	...prev,
	[uniqueKey]: !prev[uniqueKey]
	}));
	};

	const formatFrequencyHorizon = (scopeId: string) => {
	// Remove everything after comma
	const cleanedScopeId = scopeId.split(',')[0].trim();

	// Split by ::
	const [frequencyPart, horizonPart] = cleanedScopeId.split('::');

	// Parse frequency (format: H:MM:SS)
	const [hours, minutes, seconds] = frequencyPart.split(':').map(v => parseInt(v, 10));
	let frequencyDisplay = '';

	if (hours > 0) {
	frequencyDisplay = `${hours}h`;
	} else if (minutes > 0) {
	frequencyDisplay = `${minutes}min`;
	} else if (seconds > 0) {
	frequencyDisplay = `${seconds}s`;
	} else {
	frequencyDisplay = 'instant';
	}

	return { frequency: frequencyDisplay, horizon: horizonPart?.trim() \|\| 'N/A' };
	};

	const getChartTitle = (scope: ArenaScoreScopeHistory) => {
	if (scope.scope_type === 'global') {
	return 'Overall Ranking';
	} else if (scope.scope_type === 'definition') {
	return scope.definition_name ?? `Challenge ${scope.definition_id ?? scope.scope_id}`;
	} else if (scope.scope_type === 'frequency_horizon' && scope.scope_id) {
	const { frequency, horizon } = formatFrequencyHorizon(scope.scope_id);
	return (
	<div className="flex items-center gap-2">
	<span className="text-gray-900 text-lg font-semibold">Horizon: {horizon}, </span>
	<span className="text-gray-900 text-lg font-semibold">Frequency: {frequency}</span>
	<span className="text-gray-500 text-sm ml-2">({scope.scope_id})</span>
	</div>
	);
	}
	return scope.scope_type; // fallback
	};

	if (!scopes \|\| scopes.length === 0) {
	return (
	<div className="bg-white rounded-lg shadow-md p-8 text-center text-gray-500">
	No ranking data available for this model.
	</div>
	);
	}

	// Sort scopes to show global first, then definitions (alphabetically), then frequency_horizon
	const sortedScopes = [...scopes].sort((a, b) => {
	// Global always comes first
	if (a.scope_type === 'global') return -1;
	if (b.scope_type === 'global') return 1;

	// Frequency_horizon always comes last
	if (a.scope_type === 'frequency_horizon') return 1;
	if (b.scope_type === 'frequency_horizon') return -1;

	// Both are definitions, sort alphabetically by name
	return (a.definition_name ?? '').localeCompare(b.definition_name ?? '');
	});

	// Group scopes by scope_type
	const groupedScopes = sortedScopes.reduce((acc, scope) => {
	if (!acc[scope.scope_type]) {
	acc[scope.scope_type] = [];
	}
	acc[scope.scope_type].push(scope);
	return acc;
	}, {} as Record<string, ArenaScoreScopeHistory[]>);

	const renderSectionHeader = (scopeType: string) => {
	if (scopeType === 'global') return null;

	if (scopeType === 'definition') {
	return (
	<div className="mb-4 mt-6">
	<h3 className="text-lg font-semibold text-gray-800 mb-1">Challenge Definitions</h3>
	<p className="text-sm text-gray-600">Rankings evaluated for each individual challenge definition.</p>
	</div>
	);
	}

	if (scopeType === 'frequency_horizon') {
	return (
	<div className="mb-4 mt-6">
	<h3 className="text-lg font-semibold text-gray-800 mb-1">Frequency & Horizon Combinations</h3>
	<p className="text-sm text-gray-600">Rankings evaluated across different forecast frequency and horizon configurations.</p>
	</div>
	);
	}

	return null;
	};

	return (
	<div className="space-y-4">
	{['global', 'definition', 'frequency_horizon'].map((scopeType) => {
	const scopesOfType = groupedScopes[scopeType];
	if (!scopesOfType \|\| scopesOfType.length === 0) return null;

	return (
	<div key={scopeType}>
	{renderSectionHeader(scopeType)}
	{scopesOfType.map((scope) => {
	const uniqueKey = `${scope.scope_type}-${scope.scope_id ?? ''}`;
	const isExpanded = expandedScopes[uniqueKey];
	const chartTitle = getChartTitle(scope);

	// Sort the days by date
	const days = [...scope.daily_scores].sort((a, b) =>
	new Date(a.calculation_date).getTime() - new Date(b.calculation_date).getTime()
	);
	const latest = days.length > 0 ? days[days.length - 1] : null;
	const latestRank = latest ? describeRank(latest) : null;
	const hasScores = days.some(d => d.score !== null);

	// Prepare data for Plotly
	const dates = days.map(d => d.calculation_date);
	const scores = days.map(d => d.score);
	const upper = days.map(d => d.ci_upper);
	const lower = days.map(d => d.ci_lower);
	const rankTexts = days.map(d => describeRank(d).text);

	const plotData: PlotParams['data'] = [
	{
	x: dates,
	y: lower,
	fill: 'none',
	line: { color: 'transparent' },
	name: '95 % CI lower',
	type: 'scatter',
	mode: 'lines',
	showlegend: false,
	hoverinfo: 'skip',
	},
	{
	x: dates,
	y: upper,
	fill: 'tonexty',
	fillcolor: 'rgba(59, 130, 246, 0.2)',
	line: { color: 'transparent' },
	name: '95 % CI upper',
	type: 'scatter',
	mode: 'lines',
	showlegend: false,
	hoverinfo: 'skip',
	},
	{
	x: dates,
	y: scores,
	name: 'Arena Score',
	type: 'scatter',
	mode: 'lines+markers',
	line: { color: 'rgb(59, 130, 246)', width: 2 },
	marker: { color: 'rgb(59, 130, 246)', size: 6 },
	customdata: rankTexts,
	hovertemplate:
	'<b>Date:</b> %{x}<br>' +
	'<b>Arena Score:</b> %{y:.1f}<br>' +
	'<b>Rank:</b> %{customdata}<br>' +
	'<extra></extra>',
	},
	];

	const layout: PlotParams['layout'] = isMobile
	? {
	// No plot title on a phone: the accordion header above already
	// names the scope, and the y-axis title names the metric, so the
	// title would only cost 50px of a 360px-tall chart.
	xaxis: {
	gridcolor: '#e5e7eb',
	showgrid: true,
	automargin: true,
	nticks: 4,
	tickangle: 0,
	tickfont: { size: 10 },
	},
	yaxis: {
	title: { text: 'Arena Score' },
	gridcolor: '#e5e7eb',
	showgrid: true,
	automargin: true,
	tickfont: { size: 10 },
	},
	hovermode: 'closest',
	// The only legend entry duplicates the y-axis title, and it sits
	// on top of the plot at (0, 1) — drop it rather than replace it.
	showlegend: false,
	dragmode: false,
	autosize: true,
	margin: MOBILE_PLOT_MARGIN,
	paper_bgcolor: 'white',
	plot_bgcolor: 'white',
	}
	: {
	title: { text: 'Arena Score Over Time' },
	xaxis: {
	title: { text: 'Date' },
	gridcolor: '#e5e7eb',
	showgrid: true,
	},
	yaxis: {
	title: { text: 'Arena Score' },
	gridcolor: '#e5e7eb',
	showgrid: true,
	},
	hovermode: 'closest',
	showlegend: true,
	legend: {
	x: 0,
	y: 1,
	bgcolor: 'rgba(255, 255, 255, 0.8)',
	},
	margin: { l: 60, r: 40, t: 50, b: 60 },
	paper_bgcolor: 'white',
	plot_bgcolor: 'white',
	};

	return (
	<div key={uniqueKey} className="bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
	<button
	onClick={() => toggleScope(uniqueKey)}
	className="w-full px-6 py-4 flex flex-wrap sm:flex-nowrap items-center justify-between gap-x-4 gap-y-2 bg-gray-50 hover:bg-gray-100 transition-colors"
	>
	<div className="flex items-center space-x-3">
	{isExpanded ? (
	<ChevronDown className="h-5 w-5 text-gray-500 flex-shrink-0" />
	) : (
	<ChevronRight className="h-5 w-5 text-gray-500 flex-shrink-0" />
	)}
	<h3 className="text-lg font-semibold text-gray-900">
	{chartTitle}
	</h3>
	</div>
	<div className="flex items-center space-x-4 w-full justify-between sm:w-auto sm:justify-end">
	{scope.scope_type === 'definition' && (
	<Link
	href={`/challenges/${scope.definition_id}`}
	onClick={(e) => e.stopPropagation()}
	className="text-sm text-blue-600 hover:text-blue-800 hover:underline sm:w-32 sm:text-right"
	>
	View Challenge →
	</Link>
	)}
	{scope.scope_type !== 'definition' && (
	<div className="hidden sm:block sm:w-32"></div>
	)}
	{latest && latestRank && (
	<>
	<span className="text-gray-900 text-base font-semibold sm:w-44 sm:text-right">
	Arena Score: {latest.score === null ? '–' : formatScore(latest.score)}
	</span>
	{latestRank.ranked ? (
	<span className="text-blue-600 text-base font-semibold sm:w-52 sm:text-right" title={latestRank.title}>
	Rank: {latestRank.text}
	</span>
	) : (
	<span className="text-gray-500 text-sm sm:w-52 sm:text-right" title={latestRank.title}>
	{latestRank.text}
	</span>
	)}
	</>
	)}
	</div>
	</button>

	{isExpanded && latest && latestRank && hasScores && (
	<div className="p-6">
	<Plot
	data={plotData}
	layout={layout}
	config={isMobile ? MOBILE_PLOT_CONFIG : {
	responsive: true,
	displayModeBar: true,
	displaylogo: false,
	modeBarButtonsToRemove: ['lasso2d', 'select2d'],
	}}
	style={{ width: '100%', height: isMobile ? MOBILE_PLOT_HEIGHT : '400px' }}
	/>

	{/* Current stats */}
	<div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-4 text-sm">
	<div className="bg-gray-50 p-3 rounded">
	<div className="text-gray-500 text-xs">Current Rank</div>
	{latestRank.bounds ? (
	<RankFigure
	bounds={latestRank.bounds}
	reason={latestRank.title}
	className="text-lg font-semibold text-gray-900"
	/>
	) : (
	<WithReason reason={latestRank.title} className="block text-sm text-gray-700">
	{latestRank.text}
	</WithReason>
	)}
	</div>
	<div className="bg-gray-50 p-3 rounded">
	<div className="text-gray-500 text-xs">Current Arena Score</div>
	<div className="text-lg font-semibold text-gray-900">
	{latest.score === null ? '–' : formatScore(latest.score)}
	</div>
	</div>
	<div className="bg-gray-50 p-3 rounded">
	<div className="text-gray-500 text-xs">95 % CI</div>
	<div className="text-lg font-semibold text-gray-900">
	{formatInterval(latest.ci_lower, latest.ci_upper) ?? '–'}
	</div>
	</div>
	</div>
	</div>
	)}

	{isExpanded && !(latest && hasScores) && (
	<div className="p-6 text-center text-gray-500">
	No score history available for this ranking.
	</div>
	)}
	</div>
	);
	})}
	</div>
	);
	})}
	</div>
	);
	}