Update app.py

app.py

@@ -107,7 +107,7 @@ def get_plot_explanation(benchmark_type, x_metric, y_metric, aspect, dataset, si
     if benchmark_type == "function":
         return (
             f"Heat‑map shows model scores for **{aspect.upper()}** terms with **{single_metric}**. "
-            "Darker squares → better predictions."
+            "Darker squares → better predictions."
         )
     if benchmark_type == "family":
         return (
@@ -137,31 +137,35 @@ def generate_plot_and_explanation(benchmark_type, methods_selected, x_metric, y_
 # Custom CSS for frozen first column and clearer table styles
 # ---------------------------------------------------------------------------
 CUSTOM_CSS = """
-/* freeze first column */
-#leaderboard-table table tr th:first-child,
-#leaderboard-table table tr td:first-child {
+/* Freeze first column & improve scrolling for static Dataframe output */
+#leaderboard-table .dataframe-wrap {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-height: 650px; /* taller table */
+}
+#leaderboard-table table {
+  border-collapse: collapse;
+}
+#leaderboard-table thead th,
+#leaderboard-table tbody td {
+  padding: 4px 6px;
+}
+#leaderboard-table thead th:first-child,
+#leaderboard-table tbody td:first-child {
   position: sticky;
   left: 0;
   background: white;
-  z-index: 2;
+  z-index: 3; /* stay on top */
+  box-shadow: 2px 0 2px -2px #aaa; /* subtle divider */
 }
-
-/* striped rows for readability */
-#leaderboard-table table tr:nth-child(odd) {
+/* striped rows */
+#leaderboard-table tbody tr:nth-child(odd) {
   background: #fafafa;
 }
-
-/* centre numeric cells */
-#leaderboard-table td:not(:first-child) {
+/* center numeric columns */
+#leaderboard-table tbody td:not(:first-child) {
   text-align: center;
 }
-
-/* scrollable and taller table */
-#leaderboard-table .dataframe-wrap {
-  max-height: 1200px;
-  overflow-y: auto;
-  overflow-x: auto;
-}
 """
 
 # ---------------------------------------------------------------------------
@@ -181,9 +185,14 @@ with block:
             gr.Image(
                 value="./src/data/PROBE_workflow_figure.jpg",
                 show_label=False,
-                height=1000,
+                height=150,
                 container=False,
             )
+            # explanatory sentence just below the figure
+            gr.Markdown(
+                "For detailed explanations of the metrics and benchmarks, please refer to the “About” tab.",
+                elem_classes="leaderboard-note",
+            )
 
             leaderboard = get_baseline_df(None, None)
             method_names = leaderboard['Method'].unique().tolist()
@@ -230,8 +239,7 @@ with block:
                     datatype=baseline_datatype,
                     interactive=False,
                     elem_id="leaderboard-table",
-                    pinned_columns=1,
-                    max_height=1000,
+                      # make table longer
                 )
 
             # callbacks
@@ -373,4 +381,4 @@ with block:
         )
 
 # ---------------------------------------------------------------------------
-block.launch()
+block.launch()