add support for session parsing, fixes #4

Author: seveibar

Diff for: biome.json

@@ -22,7 +22,7 @@
     }
   },
   "linter": {
-    "enabled": true,
+    "enabled": false,
     "rules": {
       "recommended": true,
       "suspicious": {

Diff for: bun.lockb

@@ -12,7 +12,7 @@
   "dependencies": {
     "@tscircuit/pcb-viewer": "^1.10.17",
     "autoprefixer": "^10.4.20",
-    "dsn-converter": "^0.0.10",
+    "dsn-converter": "^0.0.26",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

Diff for: package.json

@@ -1,9 +1,60 @@
 import { useState, useCallback } from "react"
 import { PCBViewer } from "@tscircuit/pcb-viewer"
-import { parseDsnToCircuitJson } from "dsn-converter"
+import {
+  convertDsnSessionToCircuitJson,
+  DsnPcb,
+  DsnSession,
+  parseDsnToCircuitJson,
+  parseDsnToDsnJson,
+} from "dsn-converter"
 
 function App() {
   const [circuitJson, setCircuitJson] = useState<any>(null)
+  const [inDsnSessionMode, setInDsnSessionMode] = useState(false)
+  const [sessionFile, setSessionFile] = useState<string | null>(null)
+  const [dsnPcbFile, setDsnPcbFile] = useState<string | null>(null)
+
+  const isSessionFileUploaded = Boolean(sessionFile)
+  const isDsnPcbFileUploaded = Boolean(dsnPcbFile)
+
+  const processDsnUploadOrPaste = (content: string) => {
+    if (!inDsnSessionMode) {
+      try {
+        const json = parseDsnToCircuitJson(content)
+        setCircuitJson(json)
+      } catch (err) {
+        console.log(err)
+        console.error("Failed to parse DSN content:", err)
+        alert("Failed to parse DSN content. Please check the format.")
+      }
+      return
+    }
+
+    let dsnPcbContent = dsnPcbFile
+    let sessionContent = sessionFile
+
+    if (content.trim().startsWith("(pcb")) {
+      dsnPcbContent = content
+      setDsnPcbFile(content)
+    }
+
+    if (content.trim().startsWith("(session")) {
+      sessionContent = content
+      setSessionFile(content)
+    }
+
+    if (sessionContent && dsnPcbContent) {
+      const dsnPcb = parseDsnToDsnJson(dsnPcbContent) as DsnPcb
+      const dsnSession = parseDsnToDsnJson(sessionContent) as DsnSession
+      try {
+        setCircuitJson(convertDsnSessionToCircuitJson(dsnPcb, dsnSession))
+      } catch (err) {
+        console.log(err)
+        console.error("Failed to convert DSN session to circuit JSON:", err)
+        alert("Failed to convert DSN session to circuit JSON.")
+      }
+    }
+  }
 
   const handleDrop = useCallback((e: React.DragEvent) => {
     e.preventDefault()
@@ -12,13 +63,7 @@ function App() {
       const reader = new FileReader()
       reader.onload = async (e) => {
         const dsnContent = e.target?.result as string
-        try {
-          const json = parseDsnToCircuitJson(dsnContent)
-          setCircuitJson(json)
-        } catch (err) {
-          console.error("Failed to parse DSN file:", err)
-          alert("Failed to parse DSN file. Please check the format.")
-        }
+        processDsnUploadOrPaste(dsnContent)
       }
       reader.readAsText(file)
     }
@@ -27,13 +72,7 @@ function App() {
   const handlePaste = useCallback((e: React.ClipboardEvent) => {
     const dsnContent = e.clipboardData.getData("text")
     if (dsnContent) {
-      try {
-        const json = parseDsnToCircuitJson(dsnContent)
-        setCircuitJson(json)
-      } catch (err) {
-        console.error("Failed to parse DSN content:", err)
-        alert("Failed to parse DSN content. Please check the format.")
-      }
+      processDsnUploadOrPaste(dsnContent)
     }
   }, [])
 
@@ -54,33 +93,67 @@ function App() {
             <h1 className="text-3xl font-bold mb-4">
               Specctra DSN File Viewer
             </h1>
-            <p className="text-gray-400 mb-2">Drag and drop a DSN file here</p>
-            <p className="text-gray-400">
-              or paste DSN content with Ctrl/CMD+V
-            </p>
-            {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
-            <div
-              className="underline cursor-pointer"
-              onClick={() => {
-                fetch("/exampledsn.dsn")
-                  .then((response) => response.text())
-                  .then((dsnContent) => {
-                    try {
-                      const json = parseDsnToCircuitJson(dsnContent)
-                      setCircuitJson(json)
-                    } catch (err) {
-                      console.error("Failed to parse example DSN:", err)
-                      alert("Failed to parse example DSN file.")
-                    }
-                  })
-                  .catch((err) => {
-                    console.error("Failed to load example DSN:", err)
-                    alert("Failed to load example DSN file.")
-                  })
-              }}
-            >
-              open example
-            </div>
+            {!inDsnSessionMode && (
+              <>
+                <p className="text-gray-400 mb-2">
+                  Drag and drop a DSN file here
+                </p>
+                <p className="text-gray-400">
+                  or paste DSN content with Ctrl/CMD+V
+                </p>
+              </>
+            )}
+            {inDsnSessionMode && (
+              <>
+                <p className="text-gray-400 mb-2">
+                  Drag and drop or paste a DSN session and original (DSN PCB)
+                  file here
+                </p>
+                <p className="text-gray-400">
+                  You must upload both files to see the results.
+                </p>
+                <p className="text-gray-400">
+                  {isSessionFileUploaded ? "✅" : "❌"} Session file uploaded
+                </p>
+                <p className="text-gray-400">
+                  {isDsnPcbFileUploaded ? "✅" : "❌"} DSN PCB file uploaded
+                </p>
+              </>
+            )}
+            {!inDsnSessionMode && (
+              <div className="flex gap-4 justify-center">
+                <div
+                  className="underline cursor-pointer"
+                  onClick={() => {
+                    fetch("/exampledsn.dsn")
+                      .then((response) => response.text())
+                      .then((dsnContent) => {
+                        try {
+                          const json = parseDsnToCircuitJson(dsnContent)
+                          setCircuitJson(json)
+                        } catch (err) {
+                          console.error("Failed to parse example DSN:", err)
+                          alert("Failed to parse example DSN file.")
+                        }
+                      })
+                      .catch((err) => {
+                        console.error("Failed to load example DSN:", err)
+                        alert("Failed to load example DSN file.")
+                      })
+                  }}
+                >
+                  open example
+                </div>
+                <div
+                  className="underline cursor-pointer"
+                  onClick={() => {
+                    setInDsnSessionMode(true)
+                  }}
+                >
+                  upload session
+                </div>
+              </div>
+            )}
           </div>
           <div className="text-gray-400 text-sm mt-16">
             Unofficial Specctra DSN Parser/Viewer created by{" "}