From b00d0fa76f4fad187b4c93e7802f8bec717a96b4 Mon Sep 17 00:00:00 2001
From: Manohar Gupta <manohar@manohargupta.com>
Date: Sat, 23 May 2026 17:53:17 +0530
Subject: [PATCH] Add file preview to display CSV contents when clicking on
 profiles

---
 packages/web/components/ProfileViewer.tsx | 115 +++++++++++++++++++---
 1 file changed, 99 insertions(+), 16 deletions(-)

diff --git a/packages/web/components/ProfileViewer.tsx b/packages/web/components/ProfileViewer.tsx
index 05411f9..64b7ed7 100644
--- a/packages/web/components/ProfileViewer.tsx
+++ b/packages/web/components/ProfileViewer.tsx
@@ -87,6 +87,33 @@ export function ProfileViewer() {
   }>({});
   const [isUploading, setIsUploading] = useState(false);
   const [uploadError, setUploadError] = useState<string | null>(null);
+  const [selectedFile, setSelectedFile] = useState<{
+    name: string;
+    path: string;
+    data: string[][];
+    headers: string[];
+  } | null>(null);
+  const [isLoadingFile, setIsLoadingFile] = useState(false);
+
+  const API_BASE = typeof window !== 'undefined' 
+    ? ((window as any).NEXT_PUBLIC_API_URL || 'http://localhost:8000')
+    : 'http://localhost:8000';
+
+  async function fetchAndDisplayFile(path: string, name: string) {
+    setIsLoadingFile(true);
+    try {
+      const res = await fetch(`${API_BASE}${path}`);
+      const text = await res.text();
+      const lines = text.trim().split('\n');
+      const headers = lines[0].split(',');
+      const data = lines.slice(1).map(line => line.split(','));
+      setSelectedFile({ name, path, data, headers });
+    } catch (err) {
+      console.error('Failed to fetch file:', err);
+    } finally {
+      setIsLoadingFile(false);
+    }
+  }
 
   // Calculate stats for a profile
   const calculateStats = (data: number[]) => {
@@ -343,20 +370,19 @@ export function ProfileViewer() {
               {/* Bundled profiles section */}
               <div className="mb-6">
                 <h3 className="text-sm font-medium mb-3 text-muted-foreground">Bundled Reference Files</h3>
-                <div className="grid grid-cols-3 gap-3">
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                   {[
-                    { name: "Solar - Gujarat", path: "/api/profiles/solar/GJ", type: "solar" },
-                    { name: "Solar - Karnataka", path: "/api/profiles/solar/KA", type: "solar" },
-                    { name: "Solar - Rajasthan", path: "/api/profiles/solar/RJ", type: "solar" },
-                    { name: "Wind - Gujarat", path: "/api/profiles/wind/GJ", type: "wind" },
-                    { name: "Wind - Karnataka", path: "/api/profiles/wind/KA", type: "wind" },
-                    { name: "Wind - Rajasthan", path: "/api/profiles/wind/RJ", type: "wind" },
+                    { name: "Solar - Gujarat", path: "/api/profiles/solar/GJ", type: "solar", id: "solar_gj" },
+                    { name: "Solar - Karnataka", path: "/api/profiles/solar/KA", type: "solar", id: "solar_ka" },
+                    { name: "Solar - Rajasthan", path: "/api/profiles/solar/RJ", type: "solar", id: "solar_rj" },
+                    { name: "Wind - Gujarat", path: "/api/profiles/wind/GJ", type: "wind", id: "wind_gj" },
+                    { name: "Wind - Karnataka", path: "/api/profiles/wind/KA", type: "wind", id: "wind_ka" },
+                    { name: "Wind - Rajasthan", path: "/api/profiles/wind/RJ", type: "wind", id: "wind_rj" },
                   ].map((profile) => (
-                    <a
-                      key={profile.path}
-                      href={`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'}${profile.path}?as_csv=true`}
-                      download
-                      className="flex items-center gap-2 p-3 border rounded-lg hover:bg-accent transition-colors"
+                    <button
+                      key={profile.id}
+                      onClick={() => fetchAndDisplayFile(profile.path, profile.name)}
+                      className="flex items-center gap-2 p-3 border rounded-lg hover:bg-accent transition-colors text-left"
                     >
                       <span className="text-lg">{profile.type === "solar" ? "☀️" : "💨"}</span>
                       <div className="flex-1">
@@ -364,15 +390,72 @@ export function ProfileViewer() {
                         <div className="text-xs text-muted-foreground">8760 hourly values</div>
                       </div>
                       <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                        <polyline points="7 10 12 15 17 10" />
-                        <line x1="12" y1="15" x2="12" y2="3" />
+                        <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+                        <circle cx="12" cy="12" r="3" />
                       </svg>
-                    </a>
+                    </button>
                   ))}
                 </div>
               </div>
 
+              {/* File preview section */}
+              {selectedFile && (
+                <div className="mb-6 border rounded-lg overflow-hidden">
+                  <div className="flex items-center justify-between p-3 bg-muted/50 border-b">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium">{selectedFile.name}</span>
+                      <span className="text-xs text-muted-foreground">({selectedFile.data.length} rows)</span>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <a
+                        href={`${typeof window !== 'undefined' ? (window as any).NEXT_PUBLIC_API_URL || 'http://localhost:8000' : 'http://localhost:8000'}${selectedFile.path}?as_csv=true`}
+                        download
+                        className="px-2 py-1 text-xs border rounded hover:bg-accent"
+                      >
+                        Download CSV
+                      </a>
+                      <button
+                        onClick={() => setSelectedFile(null)}
+                        className="px-2 py-1 text-xs border rounded hover:bg-accent"
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                  <div className="max-h-80 overflow-auto">
+                    <table className="w-full text-xs">
+                      <thead className="bg-muted/30 sticky top-0">
+                        <tr>
+                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Hour</th>
+                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Date</th>
+                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Month</th>
+                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Day</th>
+                          <th className="px-3 py-2 text-left font-medium text-muted-foreground">Hour of Day</th>
+                          <th className="px-3 py-2 text-right font-medium text-muted-foreground">% Generation</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {selectedFile.data.slice(0, 100).map((row: string[], i: number) => (
+                          <tr key={i} className="border-t border-border/50 hover:bg-accent/30">
+                            <td className="px-3 py-1.5">{row[0]}</td>
+                            <td className="px-3 py-1.5">{row[1]}</td>
+                            <td className="px-3 py-1.5">{row[2]}</td>
+                            <td className="px-3 py-1.5">{row[3]}</td>
+                            <td className="px-3 py-1.5">{row[4]}</td>
+                            <td className="px-3 py-1.5 text-right tabular-nums">{row[5]}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                    {selectedFile.data.length > 100 && (
+                      <div className="p-3 text-center text-xs text-muted-foreground bg-muted/30 border-t">
+                        Showing first 100 of {selectedFile.data.length} rows. Download CSV for full data.
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
               {activeTab === "solar" && (
                 <div className="space-y-6">
                   <div>