feat: add CSV export and fix ETL script filename logic

Author: 偉哲 林

Components/App.razor

@@ -13,5 +13,6 @@
     <Routes @rendermode="@RenderMode.InteractiveServer" />
     <script src="_framework/blazor.web.js"></script>
     <script src="js/graphVisualizer.js"></script>
+    <script src="js/download.js"></script>
 </body>
 </html>

Components/Pages/Home.razor

@@ -4,6 +4,7 @@
 @inject SchemaReaderService SchemaReader
 @inject LlmAnalysisService LlmAnalysis
 @inject GraphModelService GraphService
+@inject CsvExportService CsvExport
 @inject IJSRuntime JS
 
 <div class="home-container">
@@ -169,6 +170,19 @@
                         }
                         else if (activeTab == "etl")
                         {
+                            <div class="code-actions" style="margin-bottom: 10px; display: flex; gap: 10px;">
+                                <button class="btn btn-secondary btn-sm" @onclick="DownloadCsvZip" disabled="@isExporting">
+                                    @if (isExporting)
+                                    {
+                                        <span class="spinner-sm"></span>
+                                        <span>打包中...</span>
+                                    }
+                                    else
+                                    {
+                                        <span>📥 下載 CSV 資料包 (.zip)</span>
+                                    }
+                                </button>
+                            </div>
                             <pre><code>@analysisResult.CypherETL</code></pre>
                         }
                         else
@@ -191,7 +205,8 @@
     private bool isConnected = false;
     private bool isTestingConnection = false;
     private bool isAnalyzing = false;
-    private bool isProcessing => isTestingConnection || isAnalyzing;
+    private bool isExporting = false;
+    private bool isProcessing => isTestingConnection || isAnalyzing || isExporting;
     private int currentStep = 1;
     private bool includeSampleData = true;
     private string analysisStatus = "分析中，請稍候...";
@@ -276,6 +291,32 @@
         selectedTable = selectedTable == tableName ? null : tableName;
     }
 
+    private async Task DownloadCsvZip()
+    {
+        if (sqlSchema == null || sqlSchema.Tables.Count == 0) return;
+
+        try
+        {
+            isExporting = true;
+            StateHasChanged();
+
+            using var stream = await CsvExport.ExportTablesToZipAsync(connectionString, sqlSchema.Tables);
+            var fileName = $"neo4j_import_{DateTime.Now:yyyyMMddHHmmss}.zip";
+            
+            using var streamRef = new DotNetStreamReference(stream);
+            await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
+        }
+        catch (Exception ex)
+        {
+            await JS.InvokeVoidAsync("alert", $"匯出失敗: {ex.Message}");
+        }
+        finally
+        {
+            isExporting = false;
+            StateHasChanged();
+        }
+    }
+
     private async Task CopyToClipboard()
     {
         var content = activeTab switch

Program.cs

@@ -11,6 +11,7 @@
 builder.Services.AddScoped<SchemaReaderService>();
 builder.Services.AddScoped<LlmAnalysisService>();
 builder.Services.AddScoped<GraphModelService>();
+builder.Services.AddScoped<CsvExportService>();
 
 var app = builder.Build();
 

README.md

@@ -12,6 +12,7 @@
 - **LLM 智能分析** — 使用 Azure OpenAI 理解語意，產生最佳 Graph Model
 - **Sample Data 推斷** — 即使沒有 FK 定義，也能從資料內容推斷隱藏關係
 - **互動式視覺化** — 力導向圖，節點可拖拉，連線會 highlight
+- **一鍵 CSV 匯出** — 自動打包 CSV 資料檔，支援大檔案下載，簡化 Neo4j 匯入流程
 - **自動產生 Cypher** — DDL (Constraints/Index) + ETL (資料遷移腳本)
 - **中文支援** — 描述和推理解釋使用繁體中文
 
@@ -21,6 +22,12 @@
 
 ![無 FK 推斷展示](docs/withoutFK.png)
 
+## 📊 Neo4j 匯入成果與驗證
+
+下圖為實際匯入 Neo4j 後的查詢結果 (`MATCH (n) RETURN n`)。可以看到即使來源資料庫**完全沒有 Foreign Key**，透過 SQL2Graph 推斷出的 Graph Model 依然建立了正確的關聯（如 `WORKS_ON`, `HAS_LEADER`, `REPORTS_TO`）：
+
+![Neo4j 匯入成果](docs/neo4J.png)
+
 ---
 
 ## 🔬 與傳統工具的技術比較
@@ -35,6 +42,7 @@
 | **解釋設計決策** | ❌ | ✅ 推理面板 |
 | 視覺化預覽 | ⚠️ 需另開工具 | ✅ 內建力導向圖 |
 | 產生 Cypher DDL/ETL | ✅ | ✅ |
+| **資料匯出** | ⚠️ 手動或複雜配置 | ✅ **一鍵打包 CSV** |
 
 ### 技術實現差異
 
@@ -78,7 +86,7 @@ copy appsettings.template.json appsettings.json
 dotnet run
 ```
 
-打開瀏覽器：`http://localhost:5000`
+打開瀏覽器：`http://localhost:5050` (預設)
 
 ### 3. 連接資料庫並分析
 
@@ -87,6 +95,16 @@ dotnet run
 3. 點擊「開始分析」
 4. 查看 Graph Model 視覺化和 Cypher 腳本
 
+### 4. 匯出與遷移
+
+1. 切換至「ETL」分頁
+2. 點擊「📥 下載 CSV 資料包」
+3. 將 ZIP 解壓縮並複製 CSV 至 Neo4j Import 目錄：
+   ```bash
+   docker cp ./extracted_files/. neo4j:/var/lib/neo4j/import/
+   ```
+4. 複製並在 Neo4j Browser (`http://localhost:7474`) 執行 ETL Cypher 腳本
+
 ---
 
 ## 🔧 使用產生的 Cypher
@@ -100,12 +118,6 @@ docker run -d --name neo4j \
   neo4j:latest
 ```
 
-### 執行遷移
-
-1. 在 Neo4j Browser (`http://localhost:7474`) 執行 DDL 腳本
-2. 從 MSSQL 匯出 CSV
-3. 執行 ETL 腳本匯入資料
-
 ---
 
 ## 🏗️ 技術架構
@@ -129,14 +141,17 @@ SQL2Graph/
 ├── Services/
 │   ├── SchemaReaderService.cs  # 讀取 MSSQL Schema + Sample Data
 │   ├── LlmAnalysisService.cs   # LLM 分析
-│   └── GraphModelService.cs    # Cypher 產生
+│   ├── GraphModelService.cs    # Cypher 產生
+│   └── CsvExportService.cs     # CSV 打包下載
 ├── Models/
 │   ├── SqlSchema.cs            # SQL 結構定義
 │   └── GraphModel.cs           # Graph 結構定義
 ├── wwwroot/
 │   ├── app.css                 # 樣式
 │   ├── guide.html              # Graph DB 教學指南
-│   └── js/graphVisualizer.js   # Cytoscape.js 封裝
+│   └── js/
+│       ├── graphVisualizer.js  # Cytoscape.js 封裝
+│       └── download.js         # 檔案下載 Helper
 └── docs/
     └── withoutFK.png           # 展示截圖
 ```

Services/CsvExportService.cs

@@ -0,0 +1,92 @@
+using System.IO.Compression;
+using System.Text;
+using Microsoft.Data.SqlClient;
+using SQL2Graph.Models;
+
+namespace SQL2Graph.Services;
+
+public class CsvExportService
+{
+    private readonly ILogger<CsvExportService> _logger;
+
+    public CsvExportService(ILogger<CsvExportService> logger)
+    {
+        _logger = logger;
+    }
+
+    public async Task<Stream> ExportTablesToZipAsync(string connectionString, List<TableInfo> tables)
+    {
+        var memoryStream = new MemoryStream();
+        
+        using (var archive = new ZipArchive(memoryStream, ZipArchiveMode.Create, true))
+        {
+            foreach (var table in tables)
+            {
+                var entryName = $"{table.SchemaName}_{table.TableName}.csv";
+                var entry = archive.CreateEntry(entryName);
+
+                using var entryStream = entry.Open();
+                using var writer = new StreamWriter(entryStream, new UTF8Encoding(false)); // UTF-8 without BOM
+
+                try
+                {
+                    await WriteTableToCsvAsync(connectionString, table, writer);
+                }
+                catch (Exception ex)
+                {
+                    _logger.LogError(ex, "Error exporting table {TableName}", table.FullName);
+                    // Continue with other tables, or write error to CSV? 
+                    // Let's just log and continue for now.
+                }
+            }
+        }
+
+        memoryStream.Position = 0;
+        return memoryStream;
+    }
+
+    private async Task WriteTableToCsvAsync(string connectionString, TableInfo table, StreamWriter writer)
+    {
+        using var connection = new SqlConnection(connectionString);
+        await connection.OpenAsync();
+
+        var query = $"SELECT * FROM {table.FullName}"; // Be mindful of SQL injection if TableInfo comes from untrusted source. Here it comes from SchemaReader which reads DB metadata.
+
+        using var command = new SqlCommand(query, connection);
+        using var reader = await command.ExecuteReaderAsync();
+
+        // Write Headers
+        var columnCount = reader.FieldCount;
+        var headers = new string[columnCount];
+        for (int i = 0; i < columnCount; i++)
+        {
+            headers[i] = EscapeCsv(reader.GetName(i));
+        }
+        await writer.WriteLineAsync(string.Join(",", headers));
+
+        // Write Rows
+        while (await reader.ReadAsync())
+        {
+            var line = new string[columnCount];
+            for (int i = 0; i < columnCount; i++)
+            {
+                var value = reader.IsDBNull(i) ? "" : reader.GetValue(i).ToString();
+                line[i] = EscapeCsv(value);
+            }
+            await writer.WriteLineAsync(string.Join(",", line));
+        }
+    }
+
+    private string EscapeCsv(string? field)
+    {
+        if (string.IsNullOrEmpty(field)) return "";
+        
+        if (field.Contains(",") || field.Contains("\"") || field.Contains("\n") || field.Contains("\r"))
+        {
+            // Escape quotes by doubling them
+            return $"\"{field.Replace("\"", "\"\"")}\"";
+        }
+        
+        return field;
+    }
+}

Services/GraphModelService.cs

@@ -74,7 +74,8 @@ public string GenerateCypherETL(GraphModel model, SqlSchema schema)
         foreach (var node in model.Nodes)
         {
             sb.AppendLine($"// Create {node.Label} nodes from {node.SourceTable}");
-            sb.AppendLine($"LOAD CSV WITH HEADERS FROM 'file:///{node.SourceTable.Replace(".", "_")}.csv' AS row");
+            var tableName = node.SourceTable.Contains(".") ? node.SourceTable.Replace(".", "_") : $"dbo_{node.SourceTable}";
+            sb.AppendLine($"LOAD CSV WITH HEADERS FROM 'file:///{tableName}.csv' AS row");
             sb.Append($"CREATE (n:{node.Label} {{");
 
             var propStrings = node.Properties.Select(p => 
@@ -97,7 +98,8 @@ public string GenerateCypherETL(GraphModel model, SqlSchema schema)
             var toKey = toNode.Properties.FirstOrDefault(p => p.IsKey)?.GraphProperty ?? "id";
 
             sb.AppendLine($"// Create {rel.Type} relationships");
-            sb.AppendLine($"LOAD CSV WITH HEADERS FROM 'file:///{rel.SourceTable.Replace(".", "_")}.csv' AS row");
+            var relTableName = rel.SourceTable.Contains(".") ? rel.SourceTable.Replace(".", "_") : $"dbo_{rel.SourceTable}";
+            sb.AppendLine($"LOAD CSV WITH HEADERS FROM 'file:///{relTableName}.csv' AS row");
             sb.AppendLine($"MATCH (from:{rel.FromNode} {{{fromKey}: row.from_id}})");
             sb.AppendLine($"MATCH (to:{rel.ToNode} {{{toKey}: row.to_id}})");
 

docs/neo4J.png

@@ -0,0 +1,11 @@
+window.downloadFileFromStream = async (fileName, contentStreamReference) => {
+    const arrayBuffer = await contentStreamReference.arrayBuffer();
+    const blob = new Blob([arrayBuffer]);
+    const url = URL.createObjectURL(blob);
+    const anchorElement = document.createElement('a');
+    anchorElement.href = url;
+    anchorElement.download = fileName ?? '';
+    anchorElement.click();
+    anchorElement.remove();
+    URL.revokeObjectURL(url);
+}