Customize progress dashboard

app.py

@@ -24,304 +24,127 @@ def get_progress(dataset: rg.Dataset) -> dict:
         "annotated": completed,
         "progress": progress,
         "users": {
-            username: user_progress["completed"].get("submitted")
+            username: user_progress["completed"].get("submitted") + user_progress["pending"].get("submitted")
             for username, user_progress in dataset_progress["users"].items()
         }
     }
 
 
-def create_gauge_chart(progress):
-    fig = go.Figure(
-        go.Indicator(
-            mode="gauge+number+delta",
-            value=progress["progress"],
-            title={"text": "Dataset Annotation Progress", "font": {"size": 24}},
-            delta={"reference": 100, "increasing": {"color": "RebeccaPurple"}},
-            number={"font": {"size": 40}, "valueformat": ".1f", "suffix": "%"},
-            gauge={
-                "axis": {"range": [None, 100], "tickwidth": 1, "tickcolor": "darkblue"},
-                "bar": {"color": "deepskyblue"},
-                "bgcolor": "white",
-                "borderwidth": 2,
-                "bordercolor": "gray",
-                "steps": [
-                    {"range": [0, progress["progress"]], "color": "royalblue"},
-                    {"range": [progress["progress"], 100], "color": "lightgray"},
-                ],
-                "threshold": {
-                    "line": {"color": "red", "width": 4},
-                    "thickness": 0.75,
-                    "value": 100,
-                },
-            },
-        )
-    )
-
-    fig.update_layout(
-        annotations=[
-            dict(
-                text=(
-                    f"Total records: {progress['total']}<br>"
-                    f"Annotated: {progress['annotated']} ({progress['progress']:.1f}%)<br>"
-                    f"Remaining: {progress['total'] - progress['annotated']} ({100 - progress['progress']:.1f}%)"
-                ),
-                # x=0.5,
-                # y=-0.2,
-                showarrow=False,
-                xref="paper",
-                yref="paper",
-                font=dict(size=16),
-            )
-        ],
-    )
-
-    fig.add_annotation(
-        text=(
-            f"Current Progress: {progress['progress']:.1f}% complete<br>"
-            f"({progress['annotated']} out of {progress['total']} records annotated)"
-        ),
-        xref="paper",
-        yref="paper",
-        x=0.5,
-        y=1.1,
-        showarrow=False,
-        font=dict(size=18),
-        align="center",
-    )
-
-    return fig
-
-
-def create_treemap(user_annotations, total_records):
-    sorted_users = sorted(user_annotations.items(), key=lambda x: x[1], reverse=True)
-    color_scale = colors.qualitative.Pastel + colors.qualitative.Set3
-
-    labels, parents, values, text, user_colors = [], [], [], [], []
-
-    for i, (user, contribution) in enumerate(sorted_users):
-        percentage = (contribution / total_records) * 100
-        labels.append(user)
-        parents.append("Annotations")
-        values.append(contribution)
-        text.append(f"{contribution} annotations<br>{percentage:.2f}%")
-        user_colors.append(color_scale[i % len(color_scale)])
-
-    labels.append("Annotations")
-    parents.append("")
-    values.append(total_records)
-    text.append(f"Total: {total_records} annotations")
-    user_colors.append("#FFFFFF")
-
-    fig = go.Figure(
-        go.Treemap(
-            labels=labels,
-            parents=parents,
-            values=values,
-            text=text,
-            textinfo="label+text",
-            hoverinfo="label+text+value",
-            marker=dict(colors=user_colors, line=dict(width=2)),
-        )
-    )
-
-    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)
-
-def update_dashboard(dataset_idx: int| None = None):
-    if dataset_idx is None:
-        return [None, None, None]
-
-    dataset = datasets[dataset_idx]
-    progress = get_progress(dataset)
-
-    gauge_chart = create_gauge_chart(progress)
-    treemap = create_treemap(progress["users"], progress["total"])
-
-    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 gauge_chart, treemap, leaderboard_df
-
-
-
-with gr.Blocks() as demo:
-    gr.Markdown("# Argilla Dataset Dashboard")
-
-    datasets_dropdown = gr.Dropdown(label="Select your dataset")
-    datasets_dropdown.choices = [(dataset.name, idx) for idx, dataset in enumerate(datasets)]
-
-    def set_selected_dataset(dataset_idx) -> None:
-        global selected_dataset
-
-        dataset = datasets[dataset_idx]
-        selected_dataset = dataset
-
-
-    with gr.Row():
-        gauge_output = gr.Plot(label="Overall Progress")
-        treemap_output = gr.Plot(label="User contributions")
-
-    with gr.Row():
-        leaderboard_output = gr.Dataframe(
-            label="Leaderboard", headers=["User", "Annotations"]
-        )
-
-    demo.load(
-        update_dashboard,
-        inputs=[datasets_dropdown],
-        outputs=[gauge_output, treemap_output, leaderboard_output],
-        every=5,
-    )
+def create_progress_bar(progress):
+    top_labels = ['Completed', 'Pending']
 
-    datasets_dropdown.change(
-        update_dashboard,
-        inputs=[datasets_dropdown],
-        outputs=[gauge_output, treemap_output, leaderboard_output],
-    )
+    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"]]]
 
-if __name__ == "__main__":
-    demo.launch()
-# app dashboard from https://huggingface.co/spaces/davanstrien/argilla-progress/blob/main/app.py
-import os
-from typing import List
+    y_data = ['Progress']
 
-import argilla as rg
-import gradio as gr
-import pandas as pd
-import plotly.colors as colors
-import plotly.graph_objects as go
+    fig = go.Figure()
 
-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")
-            for username, user_progress in dataset_progress["users"].items()
-        }
-    }
-
-
-def create_gauge_chart(progress):
-    fig = go.Figure(
-        go.Indicator(
-            mode="gauge+number+delta",
-            value=progress["progress"],
-            title={"text": "Dataset Annotation Progress", "font": {"size": 24}},
-            delta={"reference": 100, "increasing": {"color": "RebeccaPurple"}},
-            number={"font": {"size": 40}, "valueformat": ".1f", "suffix": "%"},
-            gauge={
-                "axis": {"range": [None, 100], "tickwidth": 1, "tickcolor": "darkblue"},
-                "bar": {"color": "deepskyblue"},
-                "bgcolor": "white",
-                "borderwidth": 2,
-                "bordercolor": "gray",
-                "steps": [
-                    {"range": [0, progress["progress"]], "color": "royalblue"},
-                    {"range": [progress["progress"], 100], "color": "lightgray"},
-                ],
-                "threshold": {
-                    "line": {"color": "red", "width": 4},
-                    "thickness": 0.75,
-                    "value": 100,
-                },
-            },
-        )
-    )
+    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(
-        annotations=[
-            dict(
-                text=(
-                    f"Total records: {progress['total']}<br>"
-                    f"Annotated: {progress['annotated']} ({progress['progress']:.1f}%)<br>"
-                    f"Remaining: {progress['total'] - progress['annotated']} ({100 - progress['progress']:.1f}%)"
-                ),
-                # x=0.5,
-                # y=-0.2,
-                showarrow=False,
-                xref="paper",
-                yref="paper",
-                font=dict(size=16),
-            )
-        ],
-    )
+        xaxis=dict(
+            showgrid=False,
+            showline=False,
+            showticklabels=False,
+            zeroline=False,
+            domain=[0.15, 1]
 
-    fig.add_annotation(
-        text=(
-            f"Current Progress: {progress['progress']:.1f}% complete<br>"
-            f"({progress['annotated']} out of {progress['total']} records annotated)"
         ),
-        xref="paper",
-        yref="paper",
-        x=0.5,
-        y=1.1,
-        showarrow=False,
-        font=dict(size=18),
-        align="center",
-    )
-
+        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_treemap(user_annotations, total_records):
+
+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, parents, values, text, user_colors = [], [], [], [], []
+    labels, values, user_colors = [], [], []
 
     for i, (user, contribution) in enumerate(sorted_users):
-        percentage = (contribution / total_records) * 100
         labels.append(user)
-        parents.append("Annotations")
         values.append(contribution)
-        text.append(f"{contribution} annotations<br>{percentage:.2f}%")
         user_colors.append(color_scale[i % len(color_scale)])
 
-    labels.append("Annotations")
-    parents.append("")
-    values.append(total_records)
-    text.append(f"Total: {total_records} annotations")
-    user_colors.append("#FFFFFF")
-
     fig = go.Figure(
-        go.Treemap(
+        go.Pie(
             labels=labels,
-            parents=parents,
             values=values,
-            text=text,
-            textinfo="label+text",
-            hoverinfo="label+text+value",
-            marker=dict(colors=user_colors, line=dict(width=2)),
         )
     )
 
@@ -340,15 +163,17 @@ def get_datasets(client: rg.Argilla) -> List[rg.Dataset]:
 
 datasets = get_datasets(client)
 
-def update_dashboard(dataset_idx: int| None = None):
+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)
 
-    gauge_chart = create_gauge_chart(progress)
-    treemap = create_treemap(progress["users"], progress["total"])
+    progress_bar = create_progress_bar(progress)
+    piechart = create_piechart(progress["users"])
 
     leaderboard_df = pd.DataFrame(
         list(progress["users"].items()), columns=["User", "Annotations"]
@@ -358,15 +183,20 @@ def update_dashboard(dataset_idx: int| None = None):
         "Annotations", ascending=False
     ).reset_index(drop=True)
 
-    return gauge_chart, treemap, leaderboard_df
+    return progress_bar, piechart, leaderboard_df
 
 
 
 with gr.Blocks() as demo:
     gr.Markdown("# Argilla Dataset Dashboard")
 
-    datasets_dropdown = gr.Dropdown(label="Select your dataset")
-    datasets_dropdown.choices = [(dataset.name, idx) for idx, dataset in enumerate(datasets)]
+    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
@@ -376,25 +206,27 @@ with gr.Blocks() as demo:
 
 
     with gr.Row():
-        gauge_output = gr.Plot(label="Overall Progress")
-        treemap_output = gr.Plot(label="User contributions")
+        progress_bar_output = gr.Plot(label="Overall Progress")
+
+    gr.Markdown("## Contributor Leaderboard")
 
     with gr.Row():
         leaderboard_output = gr.Dataframe(
-            label="Leaderboard", headers=["User", "Annotations"]
+            headers=["User", "Submitted records"]
         )
+        piechart_output = gr.Plot(label="User contributions")
 
     demo.load(
         update_dashboard,
         inputs=[datasets_dropdown],
-        outputs=[gauge_output, treemap_output, leaderboard_output],
+        outputs=[progress_bar_output, piechart_output, leaderboard_output],
         every=5,
     )
 
     datasets_dropdown.change(
         update_dashboard,
         inputs=[datasets_dropdown],
-        outputs=[gauge_output, treemap_output, leaderboard_output],
+        outputs=[progress_bar_output, piechart_output, leaderboard_output],
     )