Clarify table sort controls

app.py

@@ -448,6 +448,32 @@ def leaderboard_columns(columns: Iterable[str], metric: object) -> list[dict]:
     return defs
 
 
+def sort_status(
+    sort_by: list[dict] | None,
+    default: tuple[str, bool],
+    labels: dict[str, str] | None = None,
+) -> str:
+    column, ascending = default
+    if sort_by:
+        for item in sort_by:
+            candidate = item.get("column_id")
+            if candidate:
+                column = candidate
+                ascending = item.get("direction") == "asc"
+                break
+
+    merged_labels = dict(TABLE_LABELS)
+    if labels:
+        merged_labels.update(labels)
+    label = merged_labels.get(column, column)
+
+    if column in {"method", "family", "hardware"}:
+        direction = "A to Z" if ascending else "Z to A"
+    else:
+        direction = "low to high" if ascending else "high to low"
+    return f"Sorted by {label}: {direction}"
+
+
 def value_text(value: object, digits: int = 3) -> str:
     if value is None or pd.isna(value):
         return "Not available"
@@ -1261,7 +1287,10 @@ app.layout = html.Div(
                             html.Div(
                                 [
                                     html.Div(
-                                        dataframe_table("leaderboard-table", page_size=23, max_height="680px", sort_action="custom"),
+                                        [
+                                            html.Div(id="leaderboard-sort-state", className="sort-state"),
+                                            dataframe_table("leaderboard-table", page_size=23, max_height="680px", sort_action="custom"),
+                                        ],
                                         className="leaderboard-table-wrap",
                                     ),
                                     dcc.Graph(id="dataset-ranking", config={"displayModeBar": False}),
@@ -1286,6 +1315,7 @@ app.layout = html.Div(
                                 [
                                     html.Div(
                                         [
+                                            html.Div(id="consistency-sort-state", className="sort-state"),
                                             dataframe_table(
                                                 "consistency-table",
                                                 page_size=23,
@@ -1293,7 +1323,6 @@ app.layout = html.Div(
                                                 sort_action="custom",
                                                 sort_by=[{"column_id": "alignment_score", "direction": "desc"}],
                                             ),
-                                            html.P("Click a column header to sort. Click a method row to update the 3D latent view.", className="table-hint"),
                                         ],
                                         className="consistency-table-wrap",
                                     ),
@@ -1400,6 +1429,7 @@ app.layout = html.Div(
 
 @app.callback(
     Output("leaderboard-top", "children"),
+    Output("leaderboard-sort-state", "children"),
     Output("leaderboard-table", "columns"),
     Output("leaderboard-table", "data"),
     Output("dataset-ranking", "figure"),
@@ -1423,6 +1453,7 @@ def update_leaderboard(dataset: str, sort_by: list[dict] | None):
     metric = df["metric"].dropna().iloc[0] if df["metric"].notna().any() else "score"
     return (
         leaderboard_summary(dataset, df),
+        sort_status(sort_by, ("task_score", False), {"task_score": decoding_label(metric)}),
         leaderboard_columns([c for c in visible_cols if c in table_df.columns], metric),
         records(table_df),
         ranking_figure(dataset, df),
@@ -1433,6 +1464,7 @@ def update_leaderboard(dataset: str, sort_by: list[dict] | None):
 @app.callback(
     Output("consistency-table", "columns"),
     Output("consistency-table", "data"),
+    Output("consistency-sort-state", "children"),
     Output("latent-space", "figure"),
     Output("consistency-bars", "figure"),
     Output("consistency-heatmap", "figure"),
@@ -1449,6 +1481,7 @@ def update_consistency(dataset: str, active_cell: dict | None, sort_by: list[dic
     return (
         column_defs([c for c in visible_cols if c in table_df.columns]),
         records(table_df),
+        sort_status(sort_by, ("alignment_score", False)),
         latent_space_figure(dataset, model),
         consistency_bar_figure(dataset, df),
         consistency_heatmap(None),

assets/styles.css

@@ -211,6 +211,21 @@ h2 {
   min-width: 0;
 }
 
+.sort-state {
+  display: inline-flex;
+  align-items: center;
+  min-height: 30px;
+  margin: 0 0 8px;
+  padding: 6px 10px;
+  border: 1px solid #cfd8df;
+  border-radius: 6px;
+  background: #f7fafb;
+  color: #344452;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.2;
+}
+
 .latent-grid {
   display: grid;
   grid-template-columns: minmax(360px, 0.42fr) minmax(620px, 1fr);
@@ -253,6 +268,60 @@ h2 {
 
 .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th {
   background: #f3f6f8 !important;
+  padding: 0 !important;
+  border-right: 1px solid #d8e1e7 !important;
+  overflow: visible !important;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:last-child {
+  border-right: 0 !important;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header > div {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  gap: 8px !important;
+  min-height: 43px;
+  padding: 10px 12px !important;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name {
+  flex: 1 1 auto !important;
+  min-width: 0;
+  color: #26323f;
+  line-height: 1.15;
+  white-space: normal;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-actions {
+  order: -1;
+  flex: 0 0 auto !important;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort {
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #c7d3dc;
+  border-radius: 5px;
+  background: #ffffff;
+  color: #526171 !important;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 1;
+  opacity: 1 !important;
+}
+
+.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .column-header--sort {
+  border-color: #1565C0;
+  background: #edf6ff;
+  color: #1565C0 !important;
 }
 
 .dash-table-container .previous-next-container {