Updated sorting of performance page

components.py

@@ -54,13 +54,15 @@ def model_selector(models: list[str]) -> set[str]:
 
 
 def overview_view(data):
-    st.markdown("""
+    st.markdown(
+        """
     [EnFoBench](https://github.com/attila-balint-kul/energy-forecast-benchmark-toolkit) 
     is a community driven benchmarking framework for energy forecasting models. 
     
     This dashboard presents the results of the electricity demand forecasting usecase. All models were cross-validated
     on **365 days** of day ahead forecasting horizon *(10AM until midnight of the next day)*.
-    """)
+    """
+    )
 
     st.divider()
     st.markdown("## Leaderboard")
@@ -69,20 +71,34 @@ def overview_view(data):
 
     left, middle, right = st.columns(3)
     with left:
-        best_models_mae = leaderboard.sort_values("MAE.mean", ascending=False).head(10).sort_values("MAE.mean")
-        fig = px.bar(best_models_mae, x="MAE.mean",  y=best_models_mae.index)
-        fig.update_layout(title="Top 10 models by MAE", xaxis_title="", yaxis_title="Model")
+        best_models_mae = (
+            leaderboard.sort_values("MAE.mean", ascending=False)
+            .head(10)
+            .sort_values("MAE.mean")
+        )
+        fig = px.bar(best_models_mae, x="MAE.mean", y=best_models_mae.index)
+        fig.update_layout(
+            title="Top 10 models by MAE", xaxis_title="", yaxis_title="Model"
+        )
         st.plotly_chart(fig, use_container_width=True)
 
     with middle:
-        best_models_mae = leaderboard.sort_values("RMSE.mean", ascending=False).head(10).sort_values("RMSE.mean")
-        fig = px.bar(best_models_mae, x="RMSE.mean",  y=best_models_mae.index)
+        best_models_mae = (
+            leaderboard.sort_values("RMSE.mean", ascending=False)
+            .head(10)
+            .sort_values("RMSE.mean")
+        )
+        fig = px.bar(best_models_mae, x="RMSE.mean", y=best_models_mae.index)
         fig.update_layout(title="Top 10 models by RMSE", xaxis_title="", yaxis_title="")
         st.plotly_chart(fig, use_container_width=True)
 
     with right:
-        best_models_mae = leaderboard.sort_values("rMAE.mean", ascending=False).head(10).sort_values("rMAE.mean")
-        fig = px.bar(best_models_mae, x="rMAE.mean",  y=best_models_mae.index)
+        best_models_mae = (
+            leaderboard.sort_values("rMAE.mean", ascending=False)
+            .head(10)
+            .sort_values("rMAE.mean")
+        )
+        fig = px.bar(best_models_mae, x="rMAE.mean", y=best_models_mae.index)
         fig.update_layout(title="Top 10 models by rMAE", xaxis_title="", yaxis_title="")
         st.plotly_chart(fig, use_container_width=True)
 
@@ -222,8 +238,18 @@ def performance_view(data: pd.DataFrame, models_to_plot: set[str]):
             "Aggregation", ["min", "mean", "median", "max", "std"], index=1
         )
     st.markdown(f"#### {aggregation.capitalize()} {metric} per building")
+
+    rank_df = (
+        data_to_plot.groupby(["model"])
+        .agg("median", numeric_only=True)
+        .sort_values(by=f"{metric}.{aggregation}")
+        .reset_index()
+        .rename_axis("rank")
+        .reset_index()[["rank", "model"]]
+    )
+
     fig = px.box(
-        data_to_plot,
+        data_to_plot.merge(rank_df, on="model").sort_values(by="rank"),
         x=f"{metric}.{aggregation}",
         y="model",
         color="model",
@@ -283,7 +309,9 @@ def performance_view(data: pd.DataFrame, models_to_plot: set[str]):
             key="table_aggregation",
         )
 
-    metrics_table = data_to_plot.groupby(["model"]).agg(aggregation, numeric_only=True)[
+    metrics_per_building_table = data_to_plot.groupby(["model"]).agg(
+        aggregation, numeric_only=True
+    )[
         [
             f"{metric}.min",
             f"{metric}.mean",
@@ -302,15 +330,22 @@ def performance_view(data: pd.DataFrame, models_to_plot: set[str]):
         return styler
 
     st.markdown(f"#### {aggregation.capitalize()} {metric} stats per model")
-    styled_table = metrics_table.style.pipe(custom_table)
+    styled_table = metrics_per_building_table.style.pipe(custom_table)
     st.dataframe(styled_table, use_container_width=True)
 
-    metrics_table = (
+    metrics_per_building_table = (
         data_to_plot.groupby(["model", "unique_id"])
         .apply(aggregation, numeric_only=True)
         .reset_index()
         .pivot(index="model", columns="unique_id", values=f"{metric}.{aggregation}")
     )
+    metrics_per_building_table.insert(
+        0, "median", metrics_per_building_table.median(axis=1)
+    )
+    metrics_per_building_table.insert(
+        0, "mean", metrics_per_building_table.mean(axis=1)
+    )
+    metrics_per_building_table = metrics_per_building_table.sort_values(by="mean")
 
     def custom_table(styler):
         styler.background_gradient(cmap="seismic", axis=None)
@@ -321,7 +356,7 @@ def performance_view(data: pd.DataFrame, models_to_plot: set[str]):
         return styler
 
     st.markdown(f"#### {aggregation.capitalize()} {metric} stats per building")
-    styled_table = metrics_table.style.pipe(custom_table)
+    styled_table = metrics_per_building_table.style.pipe(custom_table)
     st.dataframe(styled_table, use_container_width=True)