Update app.py

app.py

@@ -5,10 +5,18 @@ import pandas as pd
 import numpy as np
 import joblib
 import matplotlib
-matplotlib.use("Agg")
+matplotlib.use("Agg")  # fallback only
 import matplotlib.pyplot as plt
 from sklearn.metrics import r2_score, mean_squared_error, mean_absolute_error
 
+# Try Plotly for interactivity
+HAVE_PLOTLY = True
+try:
+    import plotly.graph_objects as go
+    from plotly.subplots import make_subplots
+except Exception:
+    HAVE_PLOTLY = False
+
 # =========================
 # Defaults
 # =========================
@@ -18,7 +26,7 @@ MODELS_DIR = Path("models")
 DEFAULT_MODEL = MODELS_DIR / "ucs_rf.joblib"
 MODEL_FALLBACKS = [MODELS_DIR / "model.joblib", MODELS_DIR / "model.pkl"]
 
-COLORS = {"pred": "#1f77b4", "actual": "#f2b702", "ref": "#5a5a5a"}
+COLORS = {"pred": "#1f77b4", "actual": "#f2b702", "ref": "#5a5a5a", "orange": "#f59e0b", "green": "#198754"}
 
 # =========================
 # Page / Theme
@@ -31,13 +39,27 @@ st.markdown(
     .stApp { background: #FFFFFF; }
     section[data-testid="stSidebar"] { background: #F6F9FC; }
     .block-container { padding-top: .5rem; padding-bottom: .5rem; }
-    .stButton>button{ background:#007bff; color:#fff; font-weight:bold; border-radius:8px; border:none; padding:10px 24px; }
-    .stButton>button:hover{ background:#0056b3; }
+    .stButton>button{ background:#0d6efd; color:#fff; font-weight:bold; border-radius:8px; border:none; padding:10px 24px; }
+    .stButton>button:hover{ filter: brightness(0.92); }
+
+    /* Hero header */
     .st-hero { display:flex; align-items:center; gap:16px; padding-top: 4px; }
     .st-hero .brand { width:110px; height:110px; object-fit:contain; }
     .st-hero h1 { margin:0; line-height:1.05; }
     .st-hero .tagline { margin:2px 0 0 2px; color:#6b7280; font-size:1.05rem; font-style:italic; }
     [data-testid="stBlock"]{ margin-top:0 !important; }
+
+    /* Colorize sidebar button groups we wrap with custom classes */
+    section[data-testid="stSidebar"] .dev-actions .stButton:nth-of-type(1) button { background: #f59e0b !important; } /* Preview - orange */
+    section[data-testid="stSidebar"] .dev-actions .stButton:nth-of-type(2) button { background: #0d6efd !important; } /* Run - blue */
+    section[data-testid="stSidebar"] .dev-actions .stButton:nth-of-type(3) button { background: #198754 !important; } /* Proceed - green */
+
+    section[data-testid="stSidebar"] .val-actions .stButton:nth-of-type(1) button { background: #f59e0b !important; } /* Preview - orange */
+    section[data-testid="stSidebar"] .val-actions .stButton:nth-of-type(2) button { background: #0d6efd !important; } /* Predict - blue */
+
+    /* Disabled look */
+    section[data-testid="stSidebar"] .dev-actions .stButton button:disabled,
+    section[data-testid="stSidebar"] .val-actions .stButton button:disabled { filter: grayscale(40%); opacity:.6; }
     </style>
     """,
     unsafe_allow_html=True
@@ -49,7 +71,6 @@ st.markdown(
 try:
     dialog = st.dialog
 except AttributeError:
-    # Fallback (expander) if st.dialog is unavailable
     def dialog(title):
         def deco(fn):
             def wrapper(*args, **kwargs):
@@ -58,21 +79,16 @@ except AttributeError:
             return wrapper
         return deco
 
-def _get_model_url():
-    return (os.environ.get("MODEL_URL", "") or "").strip()
-
+def _get_model_url(): return (os.environ.get("MODEL_URL", "") or "").strip()
 def rmse(y_true, y_pred): return float(np.sqrt(mean_squared_error(y_true, y_pred)))
 
 def ensure_cols(df, cols):
     miss = [c for c in cols if c not in df.columns]
-    if miss:
-        st.error(f"Missing columns: {miss}\nFound: {list(df.columns)}")
-        return False
+    if miss: st.error(f"Missing columns: {miss}\nFound: {list(df.columns)}"); return False
     return True
 
 @st.cache_resource(show_spinner=False)
-def load_model(model_path: str):
-    return joblib.load(model_path)
+def load_model(model_path: str): return joblib.load(model_path)
 
 @st.cache_data(show_spinner=False)
 def parse_excel(data_bytes: bytes):
@@ -83,8 +99,7 @@ def parse_excel(data_bytes: bytes):
 def read_book_bytes(data_bytes: bytes):
     if not data_bytes: return {}
     try: return parse_excel(data_bytes)
-    except Exception as e:
-        st.error(f"Failed to read Excel: {e}"); return {}
+    except Exception as e: st.error(f"Failed to read Excel: {e}"); return {}
 
 def find_sheet(book, names):
     low2orig = {k.lower(): k for k in book.keys()}
@@ -92,52 +107,6 @@ def find_sheet(book, names):
         if nm.lower() in low2orig: return low2orig[nm.lower()]
     return None
 
-def cross_plot(actual, pred, title, size=(3.9, 3.9)):
-    fig, ax = plt.subplots(figsize=size, dpi=100)
-    ax.scatter(actual, pred, s=14, alpha=0.85, color=COLORS["pred"])
-    lo = float(np.nanmin([actual.min(), pred.min()]))
-    hi = float(np.nanmax([actual.max(), pred.max()]))
-    pad = 0.03 * (hi - lo if hi > lo else 1.0)
-    ax.plot([lo - pad, hi + pad], [lo - pad, hi + pad], '--', lw=1.2, color=COLORS["ref"])
-    ax.set_xlim(lo - pad, hi + pad); ax.set_ylim(lo - pad, hi + pad)
-    ax.set_aspect('equal', 'box')
-    ax.set_xlabel("Actual UCS"); ax.set_ylabel("Predicted UCS"); ax.set_title(title)
-    ax.grid(True, ls=":", alpha=0.4)
-    return fig
-
-def depth_or_index_track(df, title=None, include_actual=True):
-    depth_col = next((c for c in df.columns if 'depth' in str(c).lower()), None)
-    fig_w = 3.1
-    fig_h = 7.6 if depth_col is not None else 7.2
-    fig, ax = plt.subplots(figsize=(fig_w, fig_h), dpi=100)
-    if depth_col is not None:
-        ax.plot(df["UCS_Pred"], df[depth_col], '-', lw=1.8, color=COLORS["pred"], label="UCS_Pred")
-        if include_actual and TARGET in df.columns:
-            ax.plot(df[TARGET], df[depth_col], ':', lw=2.0, color=COLORS["actual"], alpha=0.95, label="UCS (actual)")
-        ax.set.ylabel(depth_col); ax.set_xlabel("UCS")
-        ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
-    else:
-        idx = np.arange(1, len(df) + 1)
-        ax.plot(df["UCS_Pred"], idx, '-', lw=1.8, color=COLORS["pred"], label="UCS_Pred")
-        if include_actual and TARGET in df.columns:
-            ax.plot(df[TARGET], idx, ':', lw=2.0, color=COLORS["actual"], alpha=0.95, label="UCS (actual)")
-        ax.set_ylabel("Point Index"); ax.set_xlabel("UCS")
-        ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
-    ax.grid(True, linestyle=":", alpha=0.4)
-    if title: ax.set_title(title, pad=8)
-    ax.legend(loc="best")
-    return fig
-
-def export_workbook(sheets_dict, summary_df=None):
-    try: import openpyxl  # noqa
-    except Exception: raise RuntimeError("Export requires openpyxl. Please add it to requirements or install it.")
-    buf = io.BytesIO()
-    with pd.ExcelWriter(buf, engine="openpyxl") as xw:
-        for name, frame in sheets_dict.items():
-            frame.to_excel(xw, sheet_name=name[:31], index=False)
-        if summary_df is not None: summary_df.to_excel(xw, sheet_name="Summary", index=False)
-    return buf.getvalue()
-
 def toast(msg):
     try: st.toast(msg)
     except Exception: st.info(msg)
@@ -163,27 +132,114 @@ def inline_logo(path="logo.png") -> str:
     except Exception:
         return ""
 
-# ---------- Preview modal helpers ----------
-def make_index_tracks(df: pd.DataFrame, cols: list[str]):
+# -------- Plotting (Plotly first, Matplotlib fallback) --------
+def cross_plotly(actual, pred, title):
+    lo = float(np.nanmin([actual.min(), pred.min()]))
+    hi = float(np.nanmax([actual.max(), pred.max()]))
+    pad = 0.03 * (hi - lo if hi > lo else 1.0)
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        x=actual, y=pred, mode="markers",
+        marker=dict(size=6, color=COLORS["pred"]),
+        hovertemplate="Actual: %{x:.2f}<br>Pred: %{y:.2f}<extra></extra>",
+        name="Points"
+    ))
+    fig.add_trace(go.Scatter(
+        x=[lo - pad, hi + pad], y=[lo - pad, hi + pad],
+        mode="lines", line=dict(dash="dash", width=1.5, color=COLORS["ref"]),
+        hoverinfo="skip", showlegend=False
+    ))
+    fig.update_layout(
+        title=title, margin=dict(l=10, r=10, t=40, b=10), height=350,
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, x=0)
+    )
+    fig.update_xaxes(title_text="Actual UCS", scaleanchor="y", scaleratio=1)
+    fig.update_yaxes(title_text="Predicted UCS")
+    return fig
+
+def track_plotly(df, include_actual=True):
+    depth_col = next((c for c in df.columns if 'depth' in str(c).lower()), None)
+    if depth_col is not None:
+        y = df[depth_col]
+        y_label = depth_col
+    else:
+        y = np.arange(1, len(df) + 1)
+        y_label = "Point Index"
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(
+        x=df["UCS_Pred"], y=y, mode="lines",
+        line=dict(color=COLORS["pred"], width=2),
+        name="UCS_Pred",
+        hovertemplate="UCS_Pred: %{x:.2f}<br>"+y_label+": %{y}<extra></extra>"
+    ))
+    if include_actual and TARGET in df.columns:
+        fig.add_trace(go.Scatter(
+            x=df[TARGET], y=y, mode="lines",
+            line=dict(color=COLORS["actual"], dash="dot", width=2.2),
+            name="UCS (actual)",
+            hovertemplate="UCS (actual): %{x:.2f}<br>"+y_label+": %{y}<extra></extra>"
+        ))
+    fig.update_yaxes(autorange="reversed", title_text=y_label)
+    fig.update_xaxes(title_text="UCS", side="top")
+    fig.update_layout(
+        margin=dict(l=10, r=10, t=40, b=10), height=650,
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, x=0)
+    )
+    return fig
+
+def make_index_tracks_plotly(df: pd.DataFrame, cols: list[str]):
     cols = [c for c in cols if c in df.columns]
+    if not cols:
+        fig = go.Figure()
+        fig.add_annotation(text="No selected columns in sheet", showarrow=False, x=0.5, y=0.5)
+        fig.update_xaxes(visible=False); fig.update_yaxes(visible=False)
+        fig.update_layout(height=200, margin=dict(l=10,r=10,t=10,b=10))
+        return fig
     n = len(cols)
-    if n == 0:
-        fig, ax = plt.subplots(figsize=(4, 2))
-        ax.text(0.5, 0.5, "No selected columns in sheet", ha="center", va="center")
-        ax.axis("off"); return fig
-    width_per = 2.2
-    fig_h = 7.0
-    fig, axes = plt.subplots(1, n, figsize=(width_per * n, fig_h), sharey=True, dpi=100)
-    if n == 1: axes = [axes]
+    fig = make_subplots(rows=1, cols=n, shared_y=True, horizontal_spacing=0.05)
     idx = np.arange(1, len(df) + 1)
-    for ax, col in zip(axes, cols):
-        ax.plot(df[col], idx, '-', lw=1.4, color="#333")
-        ax.set_xlabel(col)
-        ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
-        ax.grid(True, linestyle=":", alpha=0.3)
-    axes[0].set_ylabel("Point Index")
+    for i, col in enumerate(cols, start=1):
+        fig.add_trace(
+            go.Scatter(x=df[col], y=idx, mode="lines", line=dict(color="#333", width=1.2),
+                       hovertemplate=f"{col}: "+"%{x:.2f}<br>Index: %{y}<extra></extra>", name=col, showlegend=False),
+            row=1, col=i
+        )
+        fig.update_xaxes(title_text=col, side="top", row=1, col=i)
+    fig.update_yaxes(autorange="reversed", title_text="Point Index", row=1, col=1)
+    fig.update_layout(height=650, margin=dict(l=10, r=10, t=40, b=10))
     return fig
 
+# Fallbacks (kept if Plotly missing)
+def cross_plot_mpl(actual, pred, title, size=(3.9,3.9)):
+    fig, ax = plt.subplots(figsize=size, dpi=100)
+    ax.scatter(actual, pred, s=14, alpha=0.85, color=COLORS["pred"])
+    lo = float(np.nanmin([actual.min(), pred.min()])); hi = float(np.nanmax([actual.max(), pred.max()]))
+    pad = 0.03 * (hi - lo if hi > lo else 1.0)
+    ax.plot([lo-pad, hi+pad], [lo-pad, hi+pad], '--', lw=1.2, color=COLORS["ref"])
+    ax.set_xlim(lo-pad, hi+pad); ax.set_ylim(lo-pad, hi+pad); ax.set_aspect('equal','box')
+    ax.set_xlabel("Actual UCS"); ax.set_ylabel("Predicted UCS"); ax.set_title(title); ax.grid(True, ls=":", alpha=0.4)
+    return fig
+
+def depth_or_index_track_mpl(df, title=None, include_actual=True):
+    depth_col = next((c for c in df.columns if 'depth' in str(c).lower()), None)
+    fig, ax = plt.subplots(figsize=(3.1, 7.2), dpi=100)
+    if depth_col is not None:
+        ax.plot(df["UCS_Pred"], df[depth_col], '-', lw=1.8, color=COLORS["pred"], label="UCS_Pred")
+        if include_actual and TARGET in df.columns:
+            ax.plot(df[TARGET], df[depth_col], ':', lw=2.0, color=COLORS["actual"], alpha=0.95, label="UCS (actual)")
+        ax.set_ylabel(depth_col); ax.set_xlabel("UCS"); ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
+    else:
+        idx = np.arange(1, len(df) + 1)
+        ax.plot(df["UCS_Pred"], idx, '-', lw=1.8, color=COLORS["pred"], label="UCS_Pred")
+        if include_actual and TARGET in df.columns:
+            ax.plot(df[TARGET], idx, ':', lw=2.0, color=COLORS["actual"], alpha=0.95, label="UCS (actual)")
+        ax.set_ylabel("Point Index"); ax.set_xlabel("UCS"); ax.xaxis.set_label_position('top'); ax.xaxis.tick_top(); ax.invert_yaxis()
+    ax.grid(True, linestyle=":", alpha=0.4); 
+    if title: ax.set_title(title, pad=8)
+    ax.legend(loc="best")
+    return fig
+
+# ---------- Preview modal helpers ----------
 def stats_table(df: pd.DataFrame, cols: list[str]) -> pd.DataFrame:
     cols = [c for c in cols if c in df.columns]
     if not cols:
@@ -209,8 +265,13 @@ def preview_modal_dev(book: dict[str, pd.DataFrame], feature_cols: list[str]):
     for t, df in zip(t_objs, data):
         with t:
             t1, t2 = st.tabs(["Tracks", "Summary"])
-            with t1: st.pyplot(make_index_tracks(df, feature_cols), use_container_width=True)
-            with t2: st.dataframe(stats_table(df, feature_cols), use_container_width=True)
+            with t1:
+                if HAVE_PLOTLY:
+                    st.plotly_chart(make_index_tracks_plotly(df, feature_cols), use_container_width=True, theme=None)
+                else:
+                    st.pyplot(depth_or_index_track_mpl(df, title=None, include_actual=False), use_container_width=True)
+            with t2:
+                st.dataframe(stats_table(df, feature_cols), use_container_width=True)
 
 @dialog("Preview data")
 def preview_modal_val(book: dict[str, pd.DataFrame], feature_cols: list[str]):
@@ -219,8 +280,13 @@ def preview_modal_val(book: dict[str, pd.DataFrame], feature_cols: list[str]):
     vname = find_sheet(book, ["Validation","Validate","validation2","Val","val"]) or list(book.keys())[0]
     df = book[vname]
     t1, t2 = st.tabs(["Tracks", "Summary"])
-    with t1: st.pyplot(make_index_tracks(df, feature_cols), use_container_width=True)
-    with t2: st.dataframe(stats_table(df, feature_cols), use_container_width=True)
+    with t1:
+        if HAVE_PLOTLY:
+            st.plotly_chart(make_index_tracks_plotly(df, feature_cols), use_container_width=True, theme=None)
+        else:
+            st.pyplot(depth_or_index_track_mpl(df, title=None, include_actual=False), use_container_width=True)
+    with t2:
+        st.dataframe(stats_table(df, feature_cols), use_container_width=True)
 
 # =========================
 # Model presence
@@ -231,8 +297,7 @@ def ensure_model_present() -> Path:
     for p in [DEFAULT_MODEL, *MODEL_FALLBACKS]:
         if p.exists() and p.stat().st_size > 0:
             return p
-    if not MODEL_URL:
-        return None
+    if not MODEL_URL: return None
     try:
         import requests
         DEFAULT_MODEL.parent.mkdir(parents=True, exist_ok=True)
@@ -276,17 +341,10 @@ if "app_step" not in st.session_state: st.session_state.app_step = "intro"
 if "results" not in st.session_state: st.session_state.results = {}
 if "train_ranges" not in st.session_state: st.session_state.train_ranges = None
 
-# Dev page state (persist file)
 for k, v in {
-    "dev_ready": False,
-    "dev_file_loaded": False,
-    "dev_previewed": False,
-    "dev_file_signature": None,
-    "dev_preview_request": False,
-    "dev_file_bytes": b"",
-    "dev_file_name": "",
-    "dev_file_rows": 0,
-    "dev_file_cols": 0,
+    "dev_ready": False, "dev_file_loaded": False, "dev_previewed": False,
+    "dev_file_signature": None, "dev_preview_request": False,
+    "dev_file_bytes": b"", "dev_file_name": "", "dev_file_rows": 0, "dev_file_cols": 0,
 }.items():
     if k not in st.session_state: st.session_state[k] = v
 
@@ -311,10 +369,8 @@ st.markdown(
 # =========================
 if st.session_state.app_step == "intro":
     st.header("Welcome!")
-    st.markdown(
-        "This software is developed by *Smart Thinking AI-Solutions Team* to estimate UCS from drilling data."
-    )
-    st.subheader("Expected Input Features")
+    st.markdown("This software is developed by *Smart Thinking AI-Solutions Team* to estimate UCS from drilling data.")
+    st.subheader("Required Input Columns")
     st.markdown(
         "- Q, gpm — Flow rate (gallons per minute)  \n"
         "- SPP(psi) — Stand pipe pressure  \n"
@@ -340,20 +396,17 @@ if st.session_state.app_step == "dev":
     dev_label = "Upload Data (Excel)" if not st.session_state.dev_file_name else "Replace data (Excel)"
     train_test_file = st.sidebar.file_uploader(dev_label, type=["xlsx","xls"], key="dev_upload")
 
-    # Detect new/changed file and PERSIST BYTES
+    # Persist upload
     if train_test_file is not None:
         try:
-            file_bytes = train_test_file.getvalue()
-            size = len(file_bytes)
+            file_bytes = train_test_file.getvalue(); size = len(file_bytes)
         except Exception:
-            file_bytes = b""
-            size = 0
+            file_bytes = b""; size = 0
         sig = (train_test_file.name, size)
         if sig != st.session_state.dev_file_signature and size > 0:
             st.session_state.dev_file_signature = sig
             st.session_state.dev_file_name = train_test_file.name
             st.session_state.dev_file_bytes = file_bytes
-            # Inspect first sheet for rows/cols
             _book_tmp = read_book_bytes(file_bytes)
             if _book_tmp:
                 first_df = next(iter(_book_tmp.values()))
@@ -363,29 +416,23 @@ if st.session_state.app_step == "dev":
                 st.session_state.dev_previewed = False
                 st.session_state.dev_ready = False
 
-    # Sidebar caption (from persisted info)
     if st.session_state.dev_file_loaded:
         st.sidebar.caption(
             f"**Data loaded:** {st.session_state.dev_file_name} • "
             f"{st.session_state.dev_file_rows} rows × {st.session_state.dev_file_cols} cols"
         )
 
-    # Sidebar actions
+    # Button group with wrapper to color via CSS
+    st.sidebar.markdown('<div class="dev-actions">', unsafe_allow_html=True)
     preview_btn = st.sidebar.button("Preview data", use_container_width=True, disabled=not st.session_state.dev_file_loaded)
-    if preview_btn and st.session_state.dev_file_loaded:
-        st.session_state.dev_preview_request = True
-
     run_btn = st.sidebar.button("Run Model", type="primary", use_container_width=True)
+    proceed_clicked = st.sidebar.button("Proceed to Prediction ▶", use_container_width=True, disabled=not st.session_state.dev_ready)
+    st.sidebar.markdown('</div>', unsafe_allow_html=True)
 
-    proceed_clicked = st.sidebar.button(
-        "Proceed to Prediction ▶",
-        use_container_width=True,
-        disabled=not st.session_state.dev_ready
-    )
     if proceed_clicked and st.session_state.dev_ready:
         st.session_state.app_step = "predict"; st.rerun()
 
-    # ----- ALWAYS-ON TOP: Title + helper -----
+    # Pinned helper
     helper_top = st.container()
     with helper_top:
         st.subheader("Model Development")
@@ -398,14 +445,11 @@ if st.session_state.app_step == "dev":
         else:
             st.write("**Upload your data to build a case, then run the model to review development performance.**")
 
-    # If user clicked preview, open modal *after* helper so helper stays on top
-    if st.session_state.dev_preview_request and st.session_state.dev_file_bytes:
+    if preview_btn and st.session_state.dev_file_loaded and st.session_state.dev_file_bytes:
         _book = read_book_bytes(st.session_state.dev_file_bytes)
         st.session_state.dev_previewed = True
-        st.session_state.dev_preview_request = False
         preview_modal_dev(_book, FEATURES)
 
-    # Run model (from persisted bytes)
     if run_btn and st.session_state.dev_file_bytes:
         with st.status("Processing…", expanded=False) as status:
             book = read_book_bytes(st.session_state.dev_file_bytes)
@@ -442,7 +486,7 @@ if st.session_state.app_step == "dev":
             status.update(label="Done ✓", state="complete"); toast("Model run complete 🚀")
             st.rerun()
 
-    # Results (if available)
+    # Results
     if ("Train" in st.session_state.results) or ("Test" in st.session_state.results):
         tab1, tab2 = st.tabs(["Training", "Testing"])
         if "Train" in st.session_state.results:
@@ -452,9 +496,18 @@ if st.session_state.app_step == "dev":
                 c1.metric("R²", f"{m['R2']:.4f}"); c2.metric("RMSE", f"{m['RMSE']:.4f}"); c3.metric("MAE", f"{m['MAE']:.4f}")
                 left, right = st.columns([0.9, 0.55])
                 with left:
-                    st.pyplot(cross_plot(df[TARGET], df["UCS_Pred"], "Training: Actual vs Predicted"), use_container_width=True)
+                    if HAVE_PLOTLY:
+                        st.plotly_chart(cross_plotly(df[TARGET], df["UCS_Pred"], "Training: Actual vs Predicted"),
+                                        use_container_width=True, theme=None)
+                    else:
+                        st.pyplot(cross_plot_mpl(df[TARGET], df["UCS_Pred"], "Training: Actual vs Predicted"),
+                                  use_container_width=True)
                 with right:
-                    st.pyplot(depth_or_index_track(df, title=None, include_actual=True), use_container_width=True)
+                    if HAVE_PLOTLY:
+                        st.plotly_chart(track_plotly(df, include_actual=True), use_container_width=True, theme=None)
+                    else:
+                        st.pyplot(depth_or_index_track_mpl(df, title=None, include_actual=True),
+                                  use_container_width=True)
         if "Test" in st.session_state.results:
             with tab2:
                 df = st.session_state.results["Test"]; m = st.session_state.results["metrics_test"]
@@ -462,9 +515,18 @@ if st.session_state.app_step == "dev":
                 c1.metric("R²", f"{m['R2']:.4f}"); c2.metric("RMSE", f"{m['RMSE']:.4f}"); c3.metric("MAE", f"{m['MAE']:.4f}")
                 left, right = st.columns([0.9, 0.55])
                 with left:
-                    st.pyplot(cross_plot(df[TARGET], df["UCS_Pred"], "Testing: Actual vs Predicted"), use_container_width=True)
+                    if HAVE_PLOTLY:
+                        st.plotly_chart(cross_plotly(df[TARGET], df["UCS_Pred"], "Testing: Actual vs Predicted"),
+                                        use_container_width=True, theme=None)
+                    else:
+                        st.pyplot(cross_plot_mpl(df[TARGET], df["UCS_Pred"], "Testing: Actual vs Predicted"),
+                                  use_container_width=True)
                 with right:
-                    st.pyplot(depth_or_index_track(df, title=None, include_actual=True), use_container_width=True)
+                    if HAVE_PLOTLY:
+                        st.plotly_chart(track_plotly(df, include_actual=True), use_container_width=True, theme=None)
+                    else:
+                        st.pyplot(depth_or_index_track_mpl(df, title=None, include_actual=True),
+                                  use_container_width=True)
 
         st.markdown("---")
         sheets = {}; rows = []
@@ -484,7 +546,7 @@ if st.session_state.app_step == "dev":
             st.warning(str(e))
 
 # =========================
-# PREDICTION (Validation) — (kept simple; uploader works fine)
+# PREDICTION (Validation)
 # =========================
 if st.session_state.app_step == "predict":
     st.sidebar.header("Prediction (Validation)")
@@ -495,17 +557,19 @@ if st.session_state.app_step == "predict":
             first_df = next(iter(_book_tmp.values()))
             st.sidebar.caption(f"**Data loaded:** {validation_file.name} • {first_df.shape[0]} rows × {first_df.shape[1]} cols")
 
+    st.sidebar.markdown('<div class="val-actions">', unsafe_allow_html=True)
     preview_val_btn = st.sidebar.button("Preview data", use_container_width=True, disabled=(validation_file is None))
-    if preview_val_btn and validation_file is not None:
-        _book = read_book_bytes(validation_file.getvalue())
-        preview_modal_val(_book, FEATURES)
-
     predict_btn = st.sidebar.button("Predict", type="primary", use_container_width=True)
     st.sidebar.button("⬅ Back", on_click=lambda: st.session_state.update(app_step="dev"), use_container_width=True)
+    st.sidebar.markdown('</div>', unsafe_allow_html=True)
 
     st.subheader("Prediction")
     st.write("Upload a new dataset to generate UCS predictions and evaluate performance on unseen data.")
 
+    if preview_val_btn and validation_file is not None:
+        _book = read_book_bytes(validation_file.getvalue())
+        preview_modal_val(_book, FEATURES)
+
     if predict_btn and validation_file is not None:
         with st.status("Predicting…", expanded=False) as status:
             vbook = read_book_bytes(validation_file.getvalue())
@@ -524,7 +588,8 @@ if st.session_state.app_step == "predict":
                 any_viol = pd.DataFrame(viol).any(axis=1); oor_pct = float(any_viol.mean()*100.0)
                 if any_viol.any():
                     offenders = df_val.loc[any_viol, FEATURES].copy()
-                    offenders["Violations"] = pd.DataFrame(viol).loc[any_viol].apply(lambda r: ", ".join([c for c,v in r.items() if v]), axis=1)
+                    offenders["Violations"] = pd.DataFrame(viol).loc[any_viol].apply(
+                        lambda r: ", ".join([c for c,v in r.items() if v]), axis=1)
                     offenders.index = offenders.index + 1; oor_table = offenders
 
             metrics_val = None
@@ -558,17 +623,27 @@ if st.session_state.app_step == "predict":
         left, right = st.columns([0.9, 0.55])
         with left:
             if TARGET in st.session_state.results["Validate"].columns:
-                st.pyplot(cross_plot(st.session_state.results["Validate"][TARGET],
-                                     st.session_state.results["Validate"]["UCS_Pred"],
-                                     "Validation: Actual vs Predicted"),
-                          use_container_width=True)
+                if HAVE_PLOTLY:
+                    st.plotly_chart(cross_plotly(st.session_state.results["Validate"][TARGET],
+                                                 st.session_state.results["Validate"]["UCS_Pred"],
+                                                 "Validation: Actual vs Predicted"),
+                                    use_container_width=True, theme=None)
+                else:
+                    st.pyplot(cross_plot_mpl(st.session_state.results["Validate"][TARGET],
+                                             st.session_state.results["Validate"]["UCS_Pred"],
+                                             "Validation: Actual vs Predicted"),
+                              use_container_width=True)
             else:
                 st.info("Actual UCS values are not available in the validation data. Cross-plot cannot be generated.")
         with right:
-            st.pyplot(depth_or_index_track(
-                st.session_state.results["Validate"], title=None,
-                include_actual=(TARGET in st.session_state.results["Validate"].columns)
-            ), use_container_width=True)
+            if HAVE_PLOTLY:
+                st.plotly_chart(track_plotly(st.session_state.results["Validate"],
+                                             include_actual=(TARGET in st.session_state.results["Validate"].columns)),
+                                use_container_width=True, theme=None)
+            else:
+                st.pyplot(depth_or_index_track_mpl(st.session_state.results["Validate"], title=None,
+                                                   include_actual=(TARGET in st.session_state.results["Validate"].columns)),
+                          use_container_width=True)
 
         if oor_table is not None:
             st.write("*Out-of-range rows (vs. Training min–max):*")