Enhancement in the UI

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template, request, send_file
+from flask import Flask, render_template, request, redirect, url_for, send_file
 import pandas as pd
 import matplotlib.pyplot as plt
 import numpy as np
@@ -6,9 +6,71 @@ import io
 import os
 
 app = Flask(__name__)
+app.config["UPLOAD_FOLDER"] = "uploads"
+os.makedirs(app.config["UPLOAD_FOLDER"], exist_ok=True)
+
+# Global variables to hold data between requests
+df1, df2, limits, cols_to_plot = None, None, {}, []
+
+def process_files(golden_file, test_file):
+    global df1, df2, limits, cols_to_plot
+    limits_df1 = pd.read_excel(golden_file, nrows=4)
+    df1 = pd.read_excel(golden_file)
+    df1 = df1.drop([0, 1, 2, 3])
+    df2 = pd.read_excel(test_file)
+    df2 = df2.drop([0, 1, 2, 3])
+
+    df1 = df1.apply(pd.to_numeric, errors="coerce")
+    df2 = df2.apply(pd.to_numeric, errors="coerce")
+
+    limits_df1 = limits_df1.drop([0])
+    ignore_cols = ["SITE_NUM", "PART_ID", "PASSFG", "SOFT_BIN", "T_TIME", "TEST_NUM"]
+    cols_to_plot = [col for col in limits_df1.columns if "_" in col and col not in ignore_cols]
+    limits_df1 = limits_df1.drop(columns=ignore_cols)
+
+    limits = {
+        col: {"LL": limits_df1.iloc[0][col], "UL": limits_df1.iloc[1][col]}
+        for col in limits_df1.columns
+    }
+    return df1, df2, limits, cols_to_plot
+
+
+def generate_plot(col):
+    """Generate a matplotlib plot for a single column."""
+    plt.figure(figsize=(6, 4))
+
+    x1 = np.arange(1, len(df1[col]) + 1)
+    y1 = pd.to_numeric(df1[col], errors="coerce").values
+    plt.plot(x1, y1, marker="o", linestyle="-", color="blue", label="Golden")
+
+    if col in df2.columns:
+        x2 = np.arange(1, len(df2[col]) + 1)
+        y2 = pd.to_numeric(df2[col], errors="coerce").values
+        plt.plot(x2, y2, marker="s", linestyle="--", color="red", label="Test")
+
+    if col in limits:
+        ll, ul = limits[col]["LL"], limits[col]["UL"]
+        plt.axhline(ll, color="green", linestyle="--", linewidth=2, label="LL")
+        plt.axhline(ul, color="orange", linestyle="--", linewidth=2, label="UL")
+
+    plt.title(f"{col}")
+    plt.xlabel("Part # (sequence)")
+    plt.ylabel("Value")
+    plt.grid(True, linestyle="--", alpha=0.7)
+    plt.legend(fontsize="small")
+    plt.tight_layout()
+
+    buf = io.BytesIO()
+    plt.savefig(buf, format="png", bbox_inches="tight")
+    buf.seek(0)
+    plt.close()
+    return buf
+
 
 @app.route("/", methods=["GET", "POST"])
 def index():
+    global df1, df2, limits, cols_to_plot
+
     if request.method == "POST":
         golden_file = request.files.get("golden_file")
         test_file = request.files.get("test_file")
@@ -17,69 +79,28 @@ def index():
             return render_template("index.html", error="Please upload both files.")
 
         try:
-            # --- Read Data ---
-            limits_df1 = pd.read_excel(golden_file, nrows=4)
-            df1 = pd.read_excel(golden_file)
-            df1 = df1.drop([0, 1, 2, 3])
-            df2 = pd.read_excel(test_file)
-            df2 = df2.drop([0, 1, 2, 3])
-
-            df1 = df1.apply(pd.to_numeric, errors="coerce")
-            df2 = df2.apply(pd.to_numeric, errors="coerce")
-
-            # --- Build Limits ---
-            limits_df1 = limits_df1.drop([0])
-            ignore_cols = ["SITE_NUM", "PART_ID", "PASSFG", "SOFT_BIN", "T_TIME", "TEST_NUM"]
-            cols_to_plot = [col for col in limits_df1.columns if "_" in col and col not in ignore_cols]
-            limits_df1 = limits_df1.drop(columns=ignore_cols)
-
-            limits = {
-                col: {"LL": limits_df1.iloc[0][col], "UL": limits_df1.iloc[1][col]}
-                for col in limits_df1.columns
-            }
-
-            # --- Plot ---
-            n_cols = 3
-            n_rows = (len(cols_to_plot) + n_cols - 1) // n_cols
-
-            plt.figure(figsize=(n_cols * 5, n_rows * 3.5))
-            for i, col in enumerate(cols_to_plot, 1):
-                plt.subplot(n_rows, n_cols, i)
-                x1 = np.arange(1, len(df1[col]) + 1)
-                y1 = pd.to_numeric(df1[col], errors="coerce").values
-                plt.plot(x1, y1, marker="o", linestyle="-", color="blue", label="Golden")
-
-                if col in df2.columns:
-                    x2 = np.arange(1, len(df2[col]) + 1)
-                    y2 = pd.to_numeric(df2[col], errors="coerce").values
-                    plt.plot(x2, y2, marker="s", linestyle="--", color="red", label="Test")
-
-                if col in limits:
-                    ll, ul = limits[col]["LL"], limits[col]["UL"]
-                    plt.axhline(ll, color="green", linestyle="--", linewidth=2, label="LL")
-                    plt.axhline(ul, color="orange", linestyle="--", linewidth=2, label="UL")
-
-                plt.title(f"{col}")
-                plt.xlabel("Part # (sequence)")
-                plt.ylabel("Value")
-                plt.grid(True, linestyle="--", alpha=0.7)
-                plt.legend(fontsize="small")
-
-            plt.tight_layout()
-
-            # Save plot to in-memory buffer
-            buf = io.BytesIO()
-            plt.savefig(buf, format="png", bbox_inches="tight")
-            buf.seek(0)
-            plt.close()
-
-            return send_file(buf, mimetype="image/png")
+            df1, df2, limits, cols_to_plot = process_files(golden_file, test_file)
+
+            # Show the first 3 plots initially
+            preview_cols = cols_to_plot[:3]
+            return render_template(
+                "plot.html",
+                cols=cols_to_plot,
+                preview_cols=preview_cols,
+            )
 
         except Exception as e:
             return render_template("index.html", error=f"Error: {str(e)}")
 
     return render_template("index.html")
-    
+
+
+@app.route("/plot_image/<col>")
+def plot_image(col):
+    """Return plot as PNG stream for the selected column."""
+    buf = generate_plot(col)
+    return send_file(buf, mimetype="image/png")
+
 
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=7860, debug=True)

templates/index.html

@@ -1,42 +1,36 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>IPM Golden vs Test Data Visualizer</title>
+    <title>IPM Data Visualizer</title>
     <style>
         body {
             font-family: Arial, sans-serif;
-            background: #f2f2f2;
             text-align: center;
+            background: #f8f9fa;
             padding: 40px;
         }
         form {
             background: white;
-            padding: 20px;
-            border-radius: 10px;
+            padding: 30px;
+            border-radius: 8px;
             display: inline-block;
         }
-        input[type=file] {
+        input[type=file], button {
             margin: 10px;
         }
         button {
             background-color: #0078d7;
             color: white;
-            border: none;
             padding: 10px 20px;
+            border: none;
             border-radius: 5px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #005fa3;
-        }
-        .error {
-            color: red;
         }
+        .error { color: red; }
     </style>
 </head>
 <body>
     <h2>📊 IPM Golden vs Test Data Visualizer</h2>
-    <p>Upload your Golden and Test Excel files to compare results visually.</p>
+    <p>Upload both Golden and Test Excel files to generate visual comparison.</p>
 
     {% if error %}
     <p class="error">{{ error }}</p>
@@ -49,7 +43,7 @@
         <label>Test Data (.xlsx):</label><br>
         <input type="file" name="test_file" accept=".xlsx" required><br><br>
 
-        <button type="submit">Generate Plot</button>
+        <button type="submit">Generate Plots</button>
     </form>
 </body>
 </html>

templates/plot.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>IPM Data Plots</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background: #f4f4f4;
+            padding: 20px;
+        }
+        img {
+            max-width: 90%;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            margin: 15px;
+        }
+        select {
+            padding: 10px;
+            margin: 20px;
+            font-size: 16px;
+        }
+        .preview-title {
+            font-weight: bold;
+            margin-top: 20px;
+        }
+    </style>
+    <script>
+        function showPlot() {
+            const col = document.getElementById("col-select").value;
+            document.getElementById("dynamic-plot").src = "/plot_image/" + encodeURIComponent(col);
+        }
+    </script>
+</head>
+<body>
+    <h2>📈 IPM Data Comparison</h2>
+
+    <h3>Preview (First few plots):</h3>
+    {% for c in preview_cols %}
+        <div class="preview-title">{{ c }}</div>
+        <img src="/plot_image/{{ c }}" alt="{{ c }}">
+    {% endfor %}
+
+    <hr>
+    <h3>View Other Columns</h3>
+    <select id="col-select" onchange="showPlot()">
+        <option disabled selected>Select a column</option>
+        {% for c in cols %}
+        <option value="{{ c }}">{{ c }}</option>
+        {% endfor %}
+    </select>
+
+    <br>
+    <img id="dynamic-plot" style="display:block; margin:auto; max-width:90%;">
+</body>
+</html>