Update app.py

app.py

@@ -1,6 +1,5 @@
 #!/usr/bin/env python
 # coding: utf-8
-
 import joblib
 import pandas as pd
 import gradio as gr
@@ -11,7 +10,6 @@ import matplotlib.pyplot as plt
 # =========================
 model = joblib.load("cat (1).joblib")
 
-# MUST match model.feature_names_ EXACTLY
 FEATURES = [
     "Engagement",
     "SupportiveGM",
@@ -63,7 +61,6 @@ CLUSTER_PROFILES = {
     },
 }
 
-# Defaults for hidden vars when user adjusts sliders manually (TOTAL means)
 HIDDEN_DEFAULTS = {"Voice": 4.23, "DecisionAutonomy": 4.50, "Workload": 4.13}
 VISIBLE_DRIVERS = ["Engagement", "SupportiveGM", "WellBeing", "WorkEnvironment"]
 
@@ -77,18 +74,13 @@ def clamp_1_5(x: float) -> float:
 
 
 def build_X(vals: dict) -> pd.DataFrame:
-    """Build 1-row DataFrame in exact model feature order."""
     return pd.DataFrame([[vals[f] for f in FEATURES]], columns=FEATURES)
 
 
 def prob_at_risk(X: pd.DataFrame) -> float:
-    """
-    Return P(At Risk) using classes_ lookup.
-    Your encoding: At Risk / low intent is class 1.
-    """
     probs = model.predict_proba(X)[0]
     classes = list(model.classes_)
-    idx = classes.index(1)
+    idx = classes.index(1)  # At Risk = 1
     return float(probs[idx])
 
 
@@ -97,26 +89,22 @@ def risk_status(p: float, cutoff: float = 0.5) -> str:
 
 
 def stable_threshold_from_cluster1() -> float:
-    """Threshold = min of the 4 visible drivers in Cluster 1."""
     c1 = CLUSTER_PROFILES["Cluster 1"]
     return min(c1[d] for d in VISIBLE_DRIVERS)
 
 
 def make_driver_plot_midlevel(Engagement, SupportiveGM, WellBeing, WorkEnvironment):
-    """
-    Plot only Mid-level managers' 4 drivers, with a threshold line based on Cluster 1 minimum.
-    Bars turn red if below threshold, green if at/above threshold.
-    """
     threshold = stable_threshold_from_cluster1()
     drivers = ["Engagement", "Supportive GM", "Well-Being", "Work Environment"]
     values = [Engagement, SupportiveGM, WellBeing, WorkEnvironment]
     colors = ["seagreen" if v >= threshold else "firebrick" for v in values]
 
-    # Deterministic layout (reduces jitter)
+    # Deterministic layout helps reduce jitter
     fig, ax = plt.subplots(figsize=(11, 5), constrained_layout=True)
-    ax.bar(drivers, values, color=colors)
 
+    ax.bar(drivers, values, color=colors)
     ax.axhline(threshold, linestyle="--", linewidth=2)
+
     ax.text(
         0.99,
         threshold,
@@ -126,19 +114,19 @@ def make_driver_plot_midlevel(Engagement, SupportiveGM, WellBeing, WorkEnvironme
         va="center",
     )
 
-    # Extra space above 5
+    # More space above 5
     ax.set_ylim(1, 5.6)
     ax.set_ylabel("Survey Score (1–5)")
     ax.set_title("Key Drivers (Mid-level managers) — Probability of Being At Risk of Leaving")
 
-    # Lock x-limits to avoid autoscale twitching
+    # Lock x-limits so bar geometry never changes
     ax.set_xlim(-0.6, len(drivers) - 0.4)
 
     return fig
 
 
 # =========================
-# Dashboard prediction
+# Prediction
 # =========================
 def predict_dashboard(
     Engagement,
@@ -149,13 +137,11 @@ def predict_dashboard(
     DecisionAutonomy=None,
     Workload=None,
 ):
-    # visible
     Engagement = clamp_1_5(Engagement)
     SupportiveGM = clamp_1_5(SupportiveGM)
     WellBeing = clamp_1_5(WellBeing)
     WorkEnvironment = clamp_1_5(WorkEnvironment)
 
-    # hidden
     Voice = clamp_1_5(HIDDEN_DEFAULTS["Voice"] if Voice is None else Voice)
     DecisionAutonomy = clamp_1_5(HIDDEN_DEFAULTS["DecisionAutonomy"] if DecisionAutonomy is None else DecisionAutonomy)
     Workload = clamp_1_5(HIDDEN_DEFAULTS["Workload"] if Workload is None else Workload)
@@ -182,7 +168,6 @@ def predict_dashboard(
         )
 
     df_table = pd.DataFrame(rows)
-
     mid_status = df_table.loc[df_table["Management Level"] == MGMT_LABELS[2], "Risk Status"].iloc[0]
     headline = f"Mid-level managers: **{mid_status}**"
 
@@ -211,17 +196,16 @@ def apply_cluster(cluster_name: str):
         DecisionAutonomy=DecisionAutonomy,
         Workload=Workload,
     )
-
     return Engagement, SupportiveGM, WellBeing, WorkEnvironment, headline, table, fig
 
 
 # =========================
-# Gradio UI (CSS locks layout without Dataframe height=)
+# UI sizing via CSS wrappers (works on older Gradio too)
 # =========================
 CSS = """
 #headline_box { min-height: 44px; }
 
-/* fixed-height container for the dataframe to prevent page reflow */
+/* Fixed-height containers to prevent page jumping */
 #table_box {
   height: 240px;
   overflow: auto;
@@ -229,6 +213,23 @@ CSS = """
   border-radius: 10px;
   padding: 6px;
 }
+
+#plot_box {
+  height: 460px;
+  overflow: hidden;
+  border: 1px solid rgba(0,0,0,0.08);
+  border-radius: 10px;
+  padding: 6px;
+}
+
+/* Make the plot fill the fixed container */
+#plot_box .plot-container, 
+#plot_box .gradio-plot, 
+#plot_box canvas, 
+#plot_box svg {
+  height: 100% !important;
+  width: 100% !important;
+}
 """
 
 with gr.Blocks() as demo:
@@ -238,7 +239,7 @@ with gr.Blocks() as demo:
         "The table shows **At Risk / Not At Risk** by management level."
     )
 
-    with gr.Row(equal_height=True):
+    with gr.Row():
         with gr.Column(scale=1, min_width=420):
             with gr.Row():
                 btn_c1 = gr.Button("Load Cluster 1")
@@ -255,12 +256,13 @@ with gr.Blocks() as demo:
         with gr.Column(scale=1, min_width=520):
             headline = gr.Markdown(elem_id="headline_box")
 
-            # Wrap dataframe in a fixed-height container using HTML
             gr.HTML('<div id="table_box">')
             table = gr.Dataframe(label="Risk Status by Management Level")
             gr.HTML("</div>")
 
-            plot = gr.Plot(height=420)
+            gr.HTML('<div id="plot_box">')
+            plot = gr.Plot()
+            gr.HTML("</div>")
 
     btn_predict.click(
         fn=predict_dashboard,