app.py

# app dashboard from https://huggingface.co/spaces/davanstrien/argilla-progress/blob/main/app.py
import os
from typing import List

import argilla as rg
import gradio as gr
import pandas as pd
import plotly.colors as colors
import plotly.graph_objects as go

client = rg.Argilla(
    api_url=os.getenv("ARGILLA_API_URL"),
    api_key=os.getenv("ARGILLA_API_KEY"),
)

def get_progress(dataset: rg.Dataset) -> dict:
    dataset_progress = dataset.progress(with_users_distribution=True)

    total, completed = dataset_progress["total"], dataset_progress["completed"]
    progress = (completed / total) * 100 if total > 0 else 0

    return {
        "total": total,
        "annotated": completed,
        "progress": progress,
        "users": {
            username: user_progress["completed"].get("submitted") + user_progress["pending"].get("submitted")
            for username, user_progress in dataset_progress["users"].items()
        }
    }


def create_progress_bar(progress):
    top_labels = ['Completed', 'Pending']

    colors = ['rgba(38, 24, 74, 0.8)', 
            # 'rgba(71, 58, 131, 0.8)',
            # 'rgba(122, 120, 168, 0.8)', 'rgba(164, 163, 204, 0.85)',
            'rgba(190, 192, 213, 1)']

    x_data = [[progress["annotated"], progress["total"] - progress["annotated"]]]

    y_data = ['Progress']

    fig = go.Figure()

    for i in range(0, len(x_data[0])):
        for xd, yd in zip(x_data, y_data):
            fig.add_trace(go.Bar(
                x=[xd[i]], y=[yd],
                orientation='h',
                marker=dict(
                    color=colors[i],
                    line=dict(color='rgb(248, 248, 249)', width=1)
                ),
                hoverinfo='text',
                hovertext=f"{top_labels[i]} records: {xd[i]}"
            ))

    fig.update_layout(
        xaxis=dict(
            showgrid=False,
            showline=False,
            showticklabels=False,
            zeroline=False,
            domain=[0.15, 1]

        ),
        yaxis=dict(
            showgrid=False,
            showline=False,
            showticklabels=False,
            zeroline=False,
            domain=[0.15, 0.5]
        ),
        barmode='stack',
        paper_bgcolor='rgb(248, 248, 255)',
        plot_bgcolor='rgb(248, 248, 255)',
        margin=dict(l=120, r=10, t=140, b=80),
        showlegend=False
    )

    annotations = []

    for yd, xd in zip(y_data, x_data):
        # labeling the y-axis
        annotations.append(dict(xref='paper', yref='y',
                                x=0.14, y=yd,
                                xanchor='right',
                                text=str(yd),
                                font=dict(family='Arial', size=14,
                                        color='rgb(67, 67, 67)'),
                                showarrow=False, align='right'))
        # labeling the first percentage of each bar (x_axis)
        annotations.append(dict(xref='x', yref='y',
                                x=xd[0] / 2, y=yd,
                                text=str(xd[0]),
                                font=dict(family='Arial', size=14,
                                        color='rgb(248, 248, 255)'),
                                showarrow=False))
        # # labeling the first Likert scale (on the top)
        # if yd == y_data[-1]:
        #     annotations.append(dict(xref='x', yref='paper',
        #                             x=xd[0] / 2, y=1.1,
        #                             text=top_labels[0],
        #                             font=dict(family='Arial', size=14,
        #                                     color='rgb(67, 67, 67)'),
        #                             showarrow=False))
        space = xd[0]
        for i in range(1, len(xd)):
                # labeling the rest of percentages for each bar (x_axis)
                annotations.append(dict(xref='x', yref='y',
                                        x=space + (xd[i]/2), y=yd,
                                        text=str(xd[i]),
                                        font=dict(family='Arial', size=14,
                                                color='rgb(248, 248, 255)'),
                                        showarrow=False))
                # # labeling the Likert scale
                # if yd == y_data[-1]:
                #     annotations.append(dict(xref='x', yref='paper',
                #                             x=space + (xd[i]/2), y=1.1,
                #                             text=top_labels[i],
                #                             font=dict(family='Arial', size=14,
                #                                     color='rgb(67, 67, 67)'),
                #                             showarrow=False))
                space += xd[i]

    fig.update_layout(annotations=annotations, height=80)  
    return fig



def create_piechart(user_annotations):
    sorted_users = sorted(user_annotations.items(), key=lambda x: x[1], reverse=True)
    color_scale = colors.qualitative.Pastel + colors.qualitative.Set3

    labels, values, user_colors = [], [], []

    for i, (user, contribution) in enumerate(sorted_users):
        labels.append(user)
        values.append(contribution)
        user_colors.append(color_scale[i % len(color_scale)])

    fig = go.Figure(
        go.Pie(
            labels=labels,
            values=values,
        )
    )

    fig.update_layout(
        title_text="User contributions to the total end dataset",
        height=500,
        margin=dict(l=10, r=10, t=50, b=10),
        paper_bgcolor="#F0F0F0",  # Light gray background
        plot_bgcolor="#F0F0F0",  # Light gray background
    )

    return fig

def get_datasets(client: rg.Argilla) -> List[rg.Dataset]:
    return client.datasets.list()

datasets = get_datasets(client)

from typing import Optional

def update_dashboard(dataset_idx: Optional[int] = None):
    if dataset_idx is None:
        return [None, None, None]

    dataset = datasets[dataset_idx]
    progress = get_progress(dataset)

    progress_bar = create_progress_bar(progress)
    piechart = create_piechart(progress["users"])

    leaderboard_df = pd.DataFrame(
        list(progress["users"].items()), columns=["User", "Annotations"]
    )

    leaderboard_df = leaderboard_df.sort_values(
        "Annotations", ascending=False
    ).reset_index(drop=True)

    return progress_bar, piechart, leaderboard_df



with gr.Blocks() as demo:
    gr.Markdown("# Argilla Dataset Dashboard")

    dataset_choices = [(dataset.name, idx) for idx, dataset in enumerate(datasets)]
    datasets_dropdown = gr.Dropdown(
        choices=dataset_choices,
        label="Select your dataset",
        value=0,
        visible=True
    )

    def set_selected_dataset(dataset_idx) -> None:
        global selected_dataset

        dataset = datasets[dataset_idx]
        selected_dataset = dataset


    with gr.Row():
        progress_bar_output = gr.Plot(label="Overall Progress")

    gr.Markdown("## Contributor Leaderboard")

    with gr.Row():
        leaderboard_output = gr.Dataframe(
            headers=["User", "Submitted records"]
        )
        piechart_output = gr.Plot(label="User contributions")

    demo.load(
        update_dashboard,
        inputs=[datasets_dropdown],
        outputs=[progress_bar_output, piechart_output, leaderboard_output],
        every=5,
    )

    datasets_dropdown.change(
        update_dashboard,
        inputs=[datasets_dropdown],
        outputs=[progress_bar_output, piechart_output, leaderboard_output],
    )


if __name__ == "__main__":
    demo.launch()