From 10f94596272bf0dd17ef57b1cf310d49496b21b6 Mon Sep 17 00:00:00 2001
From: "dayuan.jiang" <jdy.toh@gmail.com>
Date: Wed, 19 Mar 2025 06:11:04 +0000
Subject: [PATCH] refactor: change extractDiagramXML to synchronous function
 and improve error handling in the UI

---
 app/extract_xml.ts |  6 +++---
 app/page.tsx       | 18 ++++++++++++++----
 package-lock.json  |  8 ++++++++
 package.json       |  1 +
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/app/extract_xml.ts b/app/extract_xml.ts
index e5181d8..cdf4e4d 100644
--- a/app/extract_xml.ts
+++ b/app/extract_xml.ts
@@ -1,9 +1,9 @@
 import * as pako from 'pako';
 
-export async function extractDiagramXML(xml_svg_string: string): Promise<string> {
+export function extractDiagramXML(xml_svg_string: string): string {
     try {
         // 1. Parse the SVG string (using built-in DOMParser in a browser-like environment)
-        const svgString = atob(xml_svg_string.slice(26))
+        const svgString = atob(xml_svg_string.slice(26));
         const parser = new DOMParser();
         const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
         const svgElement = svgDoc.querySelector('svg');
@@ -66,4 +66,4 @@ export async function extractDiagramXML(xml_svg_string: string): Promise<string>
         console.error("Error extracting diagram XML:", error);
         throw error; // Re-throw for caller handling
     }
-}
\ No newline at end of file
+}
diff --git a/app/page.tsx b/app/page.tsx
index 0eedd02..a4044ca 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -67,10 +67,20 @@ export default function Home() {
                         <div className="bg-amber-300 w-full h-[400px]">{imgData &&
                             <>
                                 {/* <img src={imgData} /> */}
-                                <div className="bg-blue-100 h-[400px]">
-                                    <h1>Extracted XML</h1>
-                                    <div>imgData</div>
-                                    <div>{extractDiagramXML(imgData)}</div>
+                                <div className="bg-blue-100 h-[400px] p-4 overflow-auto">
+                                    <h1 className="font-semibold mb-2">Extracted XML</h1>
+                                    {(() => {
+                                        try {
+                                            const extractedXml = extractDiagramXML(imgData);
+                                            return <pre className="whitespace-pre-wrap text-sm">{extractedXml}</pre>;
+                                        } catch (error) {
+                                            return (
+                                                <div className="text-red-600">
+                                                    Error extracting XML: {error instanceof Error ? error.message : 'Unknown error'}
+                                                </div>
+                                            );
+                                        }
+                                    })()}
                                 </div>
                             </>}
                             <Button onClick={handleExport}>Export</Button>
diff --git a/package-lock.json b/package-lock.json
index 341af07..0ad3031 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
+        "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "tailwindcss": "^4",
@@ -1300,6 +1301,13 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/pako": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@types/pako/-/pako-2.0.3.tgz",
+      "integrity": "sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.0.11",
       "license": "MIT",
diff --git a/package.json b/package.json
index 76bb6d4..7b0aa29 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
+    "@types/pako": "^2.0.3",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "tailwindcss": "^4",