From 8bc88acd66c6ca6c42f567cec5e42fa5469f335e Mon Sep 17 00:00:00 2001
From: David Konsumer <konsumer@jetboystudio.com>
Date: Thu, 16 May 2024 11:40:32 -0700
Subject: [PATCH] better download and mapping

---
 ui/src/App.jsx                 | 4 ++--
 ui/src/ButtonDownloadJSON.jsx  | 7 ++++++-
 ui/src/ButtonDownloadProto.jsx | 8 ++++++--
 ui/src/ProtoDisplay.jsx        | 4 +---
 4 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.jsx b/ui/src/App.jsx
index e9aa8ca..c9e143a 100644
--- a/ui/src/App.jsx
+++ b/ui/src/App.jsx
@@ -44,8 +44,8 @@ function App () {
           <div>
             <input type='file' className='mb-2 w-full file-input' onChange={handleFileChange} />
           </div>
-          {!!fields && (<ButtonDownloadJSON tree={fields} typeMap={typeMap} nameMap={typeMap} />)}
-          {!!fields && (<ButtonDownloadProto tree={fields} typeMap={typeMap} nameMap={typeMap} />)}
+          {!!fields && (<ButtonDownloadJSON tree={fields} typeMap={typeMap} nameMap={nameMap} />)}
+          {!!fields && (<ButtonDownloadProto tree={fields} typeMap={typeMap} nameMap={nameMap} />)}
         </div>
 
         {!!fields && (
diff --git a/ui/src/ButtonDownloadJSON.jsx b/ui/src/ButtonDownloadJSON.jsx
index 57795bd..37d8498 100644
--- a/ui/src/ButtonDownloadJSON.jsx
+++ b/ui/src/ButtonDownloadJSON.jsx
@@ -1,6 +1,11 @@
 export default function ButtonDownloadJSON ({ tree, prefix = 'f', typeMap, nameMap, children = 'Download JSON', className = 'btn btn-primary', filename = 'download.json' }) {
   const handleClick = e => {
-    e.target.setAttribute('href', `data:application/json;base64,${btoa(unescape(encodeURIComponent(JSON.stringify(tree.toJS(undefined, prefix, nameMap, typeMap), null, 2))))}`)
+    const d = tree.toJS(undefined, prefix, nameMap, typeMap)
+    console.log({ tree, typeMap, nameMap, json: d })
+    const u = URL.createObjectURL(new Blob([JSON.stringify(d, null, 2)], { type: 'application/json' }))
+    e.target.setAttribute('href', u)
+    setTimeout(() => URL.revokeObjectURL(u), 0)
   }
+
   return <a className={className} onClick={handleClick} href='#proto' download={filename}>{children}</a>
 }
diff --git a/ui/src/ButtonDownloadProto.jsx b/ui/src/ButtonDownloadProto.jsx
index 771e8b6..4cbb4a5 100644
--- a/ui/src/ButtonDownloadProto.jsx
+++ b/ui/src/ButtonDownloadProto.jsx
@@ -1,6 +1,10 @@
-export default function ButtonDownloadProto ({ tree, prefix = 'f', typeMap, nameMap, messageName = 'MessageRoot', children = 'Download Proto', className = 'btn btn-primary', filename = 'download.proto' }) {
+export default function ButtonDownloadProto ({ tree, prefix = 'f', typeMap, nameMap, messageName = 'MessageRoot', children = 'Download Proto', className = 'btn btn-secondary', filename = 'download.proto' }) {
   const handleClick = e => {
-    e.target.setAttribute('href', `data:text/plain;base64,${btoa(unescape(encodeURIComponent(tree.toProto(undefined, prefix, nameMap, typeMap, messageName))))}`)
+    const d = tree.toProto(undefined, prefix, nameMap, typeMap, messageName)
+    const u = URL.createObjectURL(new Blob([d], { type: 'text/plain' }))
+    e.target.setAttribute('href', u)
+    setTimeout(() => URL.revokeObjectURL(u), 0)
   }
+
   return <a className={className} onClick={handleClick} href='#proto' download={filename}>{children}</a>
 }
diff --git a/ui/src/ProtoDisplay.jsx b/ui/src/ProtoDisplay.jsx
index 4c65687..893a90e 100644
--- a/ui/src/ProtoDisplay.jsx
+++ b/ui/src/ProtoDisplay.jsx
@@ -23,17 +23,15 @@ badgeColors[wireTypes.I64] = 'accent'
 badgeColors[wireTypes.I32] = 'secondary'
 badgeColors[wireTypes.SGROUP] = 'primary'
 
-
 const hex = (b) => [...b].map((c) => c.toString(16).padStart(2, '0')).join(' ')
 
 export default function ProtoDisplay ({ open = false, tree, typeMap = {}, nameMap = {}, className }) {
-  const [o, setO] = useState(open)
   if (tree) {
     tree.renderType = 'sub'
   }
   return tree
     ? (
-      <details open={o} className={className}>
+      <details className={className} open={open}>
         <summary>
           <div className={`badge badge-${badgeColors[tree.type]} gap-2`}>{tree.name || 'root (0)'}</div>
           <p className='text-gray-500 italic'>{parseLabels[tree.renderType]}</p>