src/display/formatting.py

def model_hyperlink(link, model_name):
    return f'<a target="_blank" href="{link}" style="color: var(--link-text-color); text-decoration: underline;text-decoration-style: dotted;">{model_name}</a>'


def make_clickable_model(model_name):
    link = f"https://huggingface.co/{model_name}"
    return model_hyperlink(link, model_name)


def styled_error(error):
    return f"<p style='color: red; font-size: 20px; text-align: center;'>{error}</p>"


def styled_warning(warn):
    return f"<p style='color: orange; font-size: 20px; text-align: center;'>{warn}</p>"


def styled_message(message):
    return f"<p style='color: green; font-size: 20px; text-align: center;'>{message}</p>"


def has_no_nan_values(df, columns):
    return df[columns].notna().all(axis=1)


def has_nan_values(df, columns):
    return df[columns].isna().any(axis=1)

def get_score_bar(score):
    """
    Generate HTML for a score bar with gradient styling.
    Expects score in the range 0-100.
    """
    width = max(0, min(score, 100))  # Clamp to [0, 100]
    return f"""
        <div class="score-bar">
            <div class="score-bar-track">
                <div class="score-bar-fill" style="width: {width}%;"></div>
            </div>
            <span class="score-bar-value">{score:.3f}</span>
        </div>
    """

def render_leaderboard_html(df, overall_col="average"):
    """
    Render a DataFrame as an HTML table, replacing the overall_col with a gauge bar.
    """
    from .formatting import get_score_bar
    from src.display.css_html_js import get_rank_badge

    def get_type_badge(model_type):
        if model_type == "open":
            return '<span class="badge badge-open">open</span>'
        else:
            return '<span class="badge badge-closed">closed</span>'

    def get_output_badge(output_form):
        if output_form == "reasoning":
            return '<span class="badge badge-reasoning">reasoning</span>'
        else:
            return '<span class="badge badge-normal">normal</span>'

    # 숨길 컬럼
    hidden_cols = ["Model", "Model Type", "Output Form", "Rank"]

    # Build table header
    def get_sort_arrow(col, sort_col, sort_asc):
        # "Model Name", "Group" 컬럼을 제외한 모든 컬럼에 정렬 버튼 노출
        if col in {"Model Name", "Group"}:
            return ""
        # 하나의 버튼(▲ 또는 ▼)만 노출, 클릭 시 asc가 반전됨
        if col == sort_col:
            # 현재 정렬 상태에 따라 아이콘과 data-asc를 반전
            if sort_asc:
                # 오름차순 상태: ▼ 아이콘, 클릭 시 내림차순
                svg = (
                    '<svg width="14" height="14" viewBox="0 0 14 14" style="vertical-align:middle">'
                    '<polygon points="3,5 11,5 7,11" fill="currentColor"/></svg>'
                )
                return (
                    f'<span class="sort-arrow active" data-col="{col}" data-asc="false" aria-label="내림차순 정렬">{svg}</span>'
                )
            else:
                # 내림차순 상태: ▲ 아이콘, 클릭 시 오름차순
                svg = (
                    '<svg width="14" height="14" viewBox="0 0 14 14" style="vertical-align:middle">'
                    '<polygon points="7,3 11,9 3,9" fill="currentColor"/></svg>'
                )
                return (
                    f'<span class="sort-arrow active" data-col="{col}" data-asc="true" aria-label="오름차순 정렬">{svg}</span>'
                )
        else:
            # 정렬 중이 아닌 컬럼: ▲(오름차순) 아이콘, 클릭 시 오름차순
            svg = (
                '<svg width="14" height="14" viewBox="0 0 14 14" style="vertical-align:middle">'
                '<polygon points="7,3 11,9 3,9" fill="currentColor"/></svg>'
            )
            return (
                f'<span class="sort-arrow" data-col="{col}" data-asc="true" aria-label="오름차순 정렬">{svg}</span>'
            )

    # 정렬 상태 추출 (State에서 전달받거나 기본값)
    sort_col = getattr(df, "_sort_col", None) or (df.columns[0] if len(df.columns) > 0 else None)
    sort_asc = getattr(df, "_sort_asc", None)
    if sort_asc is None:
        sort_asc = True

    html = '<table class="pretty-leaderboard-table">\n<thead><tr>'
    for col in df.columns:
        if col in hidden_cols:
            continue
        html += f'<th>{col}{get_sort_arrow(col, sort_col, sort_asc)}</th>'
    html += '</tr></thead>\n<tbody>\n'

    # Build table rows
    for idx, row in df.iterrows():
        html += '<tr>'
        for col in df.columns:
            if col in hidden_cols:
                continue
            cell = row[col]
            if col == overall_col:
                try:
                    cell_html = get_score_bar(float(cell))
                except Exception:
                    cell_html = str(cell)
                html += f'<td>{cell_html}</td>'
            elif col in ["Model Name"]:
                # 1~3위 하이라이트 + 4등 이후 흰색 + 뱃지 항상 표시
                rank = row.get("Rank", None)
                model_type = row.get("Model Type", None) or row.get("Model_Type", None)
                output_form = row.get("Output Form", None) or row.get("Output_Form", None)
                highlight_style = ""
                if rank == 1 or rank == "1":
                    highlight_style = "color: #ffd700; font-weight: bold; text-shadow: 0 0 4px #fff2;"
                elif rank == 2 or rank == "2":
                    highlight_style = "color: #b0b0b0; font-weight: bold;"
                elif rank == 3 or rank == "3":
                    highlight_style = "color: #cd7f32; font-weight: bold;"
                else:
                    highlight_style = "color: #fff; font-weight: 600;"
                badge_html = ""
                if model_type:
                    badge_html += " " + get_type_badge(model_type)
                if output_form:
                    badge_html += " " + get_output_badge(output_form)
                html += f'<td><span style="{highlight_style}">{cell}</span>{badge_html}</td>'
            else:
                html += f'<td>{cell}</td>'
        html += '</tr>\n'
    html += '</tbody></table>'
    return html