Merge pull request #1 from Sachin-Sagar/refactor/modularize

Fix Large JSON issue, During first load,.

steps/src/main.js

@@ -120,24 +120,28 @@ jsonFileInput.addEventListener("change", (event) => {
   calculateAndSetOffset();
   saveFileToDB("json", file); // Save the file object for the next session
 
-  const reader = new FileReader();
+  // 1. Show a loading modal immediately.
+  showModal("Parsing large JSON file, please wait...");
 
-  // 1. Show the modal immediately.
-  showModal("Loading large JSON file, this may take a moment...");
+  // 2. Create a temporary URL for the streaming parser.
+  const fileURL = URL.createObjectURL(file);
 
-  reader.onload = (e) => {
-    // 2. Use setTimeout to schedule the heavy work for the next event loop cycle.
-    // This gives the browser time to render the modal before it freezes.
-    setTimeout(() => {
-        const jsonString = e.target.result;
-        // Note: We don't need to save to DB here, as we saved the file object earlier.
-
-        const result = parseVisualizationJson(
-            jsonString,
+  // 3. Use the robust streaming parser.
+  parseJsonWithOboe(
+    fileURL,
+    async (parsedData) => {
+      // This is the success callback, running after the file is parsed.
+      // We make it async so we can `await` the next step.
+
+      const result = await parseVisualizationJson(
+        parsedData,
         appState.radarStartTimeMs,
         appState.videoStartDate
       );
 
+      // Revoke the temporary URL to free up memory.
+      URL.revokeObjectURL(fileURL);
+
       if (result.error) {
         showModal(result.error);
         return;
@@ -147,7 +151,7 @@ jsonFileInput.addEventListener("change", (event) => {
       appState.globalMinSnr = result.minSnr;
       appState.globalMaxSnr = result.maxSnr;
 
-        // Update UI
+      // Update UI with the correct, awaited data.
       snrMinInput.value = appState.globalMinSnr.toFixed(1);
       snrMaxInput.value = appState.globalMaxSnr.toFixed(1);
       resetVisualization();
@@ -166,16 +170,15 @@ jsonFileInput.addEventListener("change", (event) => {
         );
       }
 
-        // Close the loading modal
+      // Close the loading modal.
       document.getElementById("modal-ok-btn").click();
-    }, 50); // A small 50ms delay is enough for the UI to update.
-  };
-
-  reader.onerror = () => {
-      showModal("Error reading the selected file.");
-  };
-
-  reader.readAsText(file);
+    },
+    (error) => {
+      // This is the error callback for the streaming parser.
+      showModal(error);
+      URL.revokeObjectURL(fileURL);
+    }
+  );
 });
 
 // Event listener for video file input change.