Update app.py

app.py

@@ -11,7 +11,7 @@ plt.rcParams["figure.dpi"] = 100
 # ============================================================
 # Global font styling
 # - All non-title text: Arial Black size 10
-# - Titles: Arial Black size 14 (unchanged from your spec)
+# - Titles: Arial Black size 14
 # ============================================================
 plt.rcParams["font.family"] = "Arial"
 plt.rcParams["font.weight"] = "black"
@@ -130,8 +130,24 @@ def hex_to_rgb01(h: str):
     return (int(h[0:2], 16) / 255.0, int(h[2:4], 16) / 255.0, int(h[4:6], 16) / 255.0)
 
 
+def stylize_axis_fonts(ax):
+    # Apply consistent fonts to ticks/labels
+    for t in ax.get_xticklabels() + ax.get_yticklabels():
+        t.set_fontsize(TEXT_FONTSIZE)
+        t.set_fontweight("black")
+        t.set_family("Arial")
+    ax.xaxis.label.set_fontsize(TEXT_FONTSIZE)
+    ax.xaxis.label.set_fontweight("black")
+    ax.xaxis.label.set_family("Arial")
+    ax.yaxis.label.set_fontsize(TEXT_FONTSIZE)
+    ax.yaxis.label.set_fontweight("black")
+    ax.yaxis.label.set_family("Arial")
+
+
 # =========================
 # Donut chart (Turnover Risk)
+# - Legend made visible by widening figure + right margin
+# - No center subtitle text
 # =========================
 def make_turnover_donut(p_leave: float, p_stay: float):
     p_leave = max(0.0, min(1.0, float(p_leave)))
@@ -143,7 +159,8 @@ def make_turnover_donut(p_leave: float, p_stay: float):
     else:
         p_leave, p_stay = p_leave / s, p_stay / s
 
-    fig, ax = plt.subplots(figsize=(4.8, 3.4))
+    # Wider so legend isn't clipped
+    fig, ax = plt.subplots(figsize=(8.6, 3.2))
 
     ax.pie(
         [p_leave, p_stay],
@@ -166,31 +183,39 @@ def make_turnover_donut(p_leave: float, p_stay: float):
         family="Arial",
     )
 
-    ax.legend(
+    leg = ax.legend(
         ["Probability of Turnover", "Probability of Retention"],
         loc="center left",
         bbox_to_anchor=(1.02, 0.5),
         frameon=False,
         prop={"family": "Arial", "weight": "black", "size": TEXT_FONTSIZE},
+        handlelength=1.2,
+        borderaxespad=0.0,
     )
+    for txt in leg.get_texts():
+        txt.set_fontsize(TEXT_FONTSIZE)
+        txt.set_fontweight("black")
+        txt.set_family("Arial")
 
-    ax.set_title("Turnover Risk", pad=10, fontweight="black", fontsize=TITLE_FONTSIZE, family="Arial")
+    ax.set_title("Turnover Risk", pad=8, fontweight="black", fontsize=TITLE_FONTSIZE, family="Arial")
     ax.set_aspect("equal")
 
+    # Leave room on the right for legend
     plt.tight_layout()
+    plt.subplots_adjust(right=0.80)
+
     plt.close(fig)
     return fig
 
 
 # =========================
 # Plot: Average of key drivers + Goal Average
-# (Longer + intended for bottom full-width placement)
 # =========================
 def make_driver_plot(driver_vals: dict):
     values = [driver_vals[v] for v in ALL_DRIVER_VARS]
     goals = [GOAL_AVG[v] for v in ALL_DRIVER_VARS]
 
-    fig, ax = plt.subplots(figsize=(13.0, 3.2))  # longer/wider
+    fig, ax = plt.subplots(figsize=(13.0, 3.1))  # long/wide
 
     bars = ax.bar(range(len(ALL_DRIVER_LABELS)), values, tick_label=ALL_DRIVER_LABELS)
 
@@ -214,9 +239,11 @@ def make_driver_plot(driver_vals: dict):
 
     ax.set_ylim(1, 5.4)
     ax.set_yticks([1, 2, 3, 4, 5])
-    ax.set_ylabel("Score (1–5)", fontsize=TEXT_FONTSIZE, fontweight="black", family="Arial")
+    ax.set_ylabel("Score (1–5)")
     ax.set_title("Average of key drivers", fontsize=TITLE_FONTSIZE, fontweight="black", family="Arial")
 
+    stylize_axis_fonts(ax)
+
     ax.margins(x=0.06)
     plt.tight_layout()
     plt.subplots_adjust(bottom=0.28)
@@ -227,16 +254,17 @@ def make_driver_plot(driver_vals: dict):
 
 # =========================
 # SHAP waterfall
-# Make positive = RED, negative = BLUE
+# - Force positive = RED, negative = BLUE
+# - Add title: "Feature Importance (Shap)"
 # =========================
 def make_catboost_shap_plot(X: pd.DataFrame):
-    fig, ax = plt.subplots(figsize=(8.6, 3.6))
+    fig, ax = plt.subplots(figsize=(8.6, 3.2))
 
     try:
         import shap
         from catboost import Pool
 
-        # force SHAP waterfall color theme (pos=red, neg=blue)
+        # Try to force SHAP waterfall palette to red/blue
         try:
             shap.plots.colors.red_rgb = hex_to_rgb01(RED)
             shap.plots.colors.blue_rgb = hex_to_rgb01(BLUE)
@@ -282,13 +310,12 @@ def make_catboost_shap_plot(X: pd.DataFrame):
         shap.plots.waterfall(exp, max_display=8, show=False)
 
         fig2 = plt.gcf()
-        fig2.set_size_inches(8.6, 3.6)
+        fig2.set_size_inches(8.6, 3.2)
 
-        # enforce tick font sizes
+        # Put a clean title on the SHAP plot
         try:
             ax2 = fig2.axes[0]
-            if ax2.get_title():
-                ax2.set_title(ax2.get_title(), fontsize=TITLE_FONTSIZE, fontweight="black", family="Arial")
+            ax2.set_title("Feature Importance (Shap)", fontsize=TITLE_FONTSIZE, fontweight="black", family="Arial")
             for t in ax2.get_xticklabels() + ax2.get_yticklabels():
                 t.set_fontsize(TEXT_FONTSIZE)
                 t.set_fontweight("black")
@@ -325,7 +352,7 @@ def make_catboost_shap_plot(X: pd.DataFrame):
 
 # =========================
 # Core predict
-# Returns: donut, shap, drivers (so we can lay them out how you want)
+# Returns: donut, shap, drivers
 # =========================
 def predict(
     Engagement,
@@ -419,8 +446,11 @@ def apply_recommendation():
 
 # =========================
 # UI Layout
-# - Right side: donut then SHAP directly below
-# - Bottom: wide drivers bar chart centered under everything
+# - Top: At risk + Apply recommendation buttons
+# - Left: sliders, then Predict button (under sliders)
+# - Right: donut then SHAP directly below (same width)
+# - Bottom: wide drivers bar chart centered
+# - Sliders column a bit shorter to fit Predict button cleanly
 # =========================
 CSS = f"""
 #app-wrap {{ max-width: 1200px; margin: 0 auto; }}
@@ -430,6 +460,9 @@ CSS = f"""
 
 #btn_atrisk button {{ background: {RED} !important; color: white !important; border: none !important; }}
 #btn_reco button {{ background: {BLUE} !important; color: white !important; border: none !important; }}
+
+/* Tighten slider spacing a bit so Predict fits nicely */
+.gr-slider {{ margin-bottom: 6px !important; }}
 """
 
 with gr.Blocks(css=CSS) as demo:
@@ -440,15 +473,14 @@ with gr.Blocks(css=CSS) as demo:
         "</div>"
     )
 
-    # TOP BUTTON ROW
+    # TOP BUTTON ROW (keep these at top)
     with gr.Row():
         btn_atrisk = gr.Button("At risk group", elem_id="btn_atrisk")
         btn_reco = gr.Button("Apply recommendation", elem_id="btn_reco")
-        btn_predict = gr.Button("Predict")
 
-    # TOP MAIN ROW
+    # MAIN ROW
     with gr.Row():
-        # LEFT: sliders
+        # LEFT: sliders + Predict (under sliders)
         with gr.Column(scale=4):
             Engagement = gr.Slider(1, 5, value=CLUSTER_3["Engagement"], step=0.01, label="Engagement")
             SupportiveGM = gr.Slider(1, 5, value=CLUSTER_3["SupportiveGM"], step=0.01, label="Supportive GM")
@@ -458,7 +490,9 @@ with gr.Blocks(css=CSS) as demo:
             DecisionAutonomy = gr.Slider(1, 5, value=CLUSTER_3["DecisionAutonomy"], step=0.01, label="Decision Autonomy")
             Workload = gr.Slider(1, 5, value=CLUSTER_3["Workload"], step=0.01, label="Workload")
 
-        # RIGHT: donut + SHAP stacked
+            btn_predict = gr.Button("Predict")
+
+        # RIGHT: donut + SHAP stacked (same width)
         with gr.Column(scale=6):
             donut_plot = gr.Plot(label="Turnover Risk")
             shap_plot = gr.Plot(label="Feature Importance (Shap)")