From 1a1084376f41ba5c80a7e154dc206795319258e4 Mon Sep 17 00:00:00 2001 From: rakadu1 Date: Thu, 4 Sep 2025 12:09:35 +0530 Subject: [PATCH] Acieved progress bar to Large JSON loading and caching. --- steps/index.html | 9 +- steps/src/dom.js | 36 ++---- steps/src/fileParsers.js | 10 +- steps/src/main.js | 241 ++++++++++++++++--------------------- steps/src/modal.js | 32 ++++- steps/src/parser.worker.js | 87 +++++++------ 6 files changed, 201 insertions(+), 214 deletions(-) diff --git a/steps/index.html b/steps/index.html index 9d1c367..c7a3b62 100644 --- a/steps/index.html +++ b/steps/index.html @@ -269,6 +269,13 @@

+ + + - + diff --git a/steps/src/dom.js b/steps/src/dom.js index 8161e02..68b5428 100644 --- a/steps/src/dom.js +++ b/steps/src/dom.js @@ -22,39 +22,25 @@ export const speedSlider = document.getElementById("speed-slider"); export const speedDisplay = document.getElementById("speed-display"); export const featureToggles = document.getElementById("feature-toggles"); export const toggleSnrColor = document.getElementById("toggle-snr-color"); -export const toggleClusterColor = document.getElementById( - "toggle-cluster-color" -); +export const toggleClusterColor = document.getElementById("toggle-cluster-color"); export const toggleInlierColor = document.getElementById("toggle-inlier-color"); -export const toggleStationaryColor = document.getElementById( - "toggle-stationary-color" -); +export const toggleStationaryColor = document.getElementById("toggle-stationary-color"); export const toggleVelocity = document.getElementById("toggle-velocity"); export const toggleTracks = document.getElementById("toggle-tracks"); export const toggleEgoSpeed = document.getElementById("toggle-ego-speed"); export const toggleFrameNorm = document.getElementById("toggle-frame-norm"); -export const toggleDebugOverlay = document.getElementById( - "toggle-debug-overlay" -); +export const toggleDebugOverlay = document.getElementById("toggle-debug-overlay"); export const egoSpeedDisplay = document.getElementById("ego-speed-display"); export const canSpeedDisplay = document.getElementById("can-speed-display"); export const debugOverlay = document.getElementById("debug-overlay"); -export const toggleDebug2Overlay = document.getElementById( - "toggle-debug2-overlay" -); +export const toggleDebug2Overlay = document.getElementById("toggle-debug2-overlay"); export const snrMinInput = document.getElementById("snr-min-input"); export const snrMaxInput = document.getElementById("snr-max-input"); export const applySnrBtn = document.getElementById("apply-snr-btn"); -export const autoOffsetIndicator = document.getElementById( - "auto-offset-indicator" -); +export const autoOffsetIndicator = document.getElementById("auto-offset-indicator"); export const clearCacheBtn = document.getElementById("clear-cache-btn"); -export const speedGraphContainer = document.getElementById( - "speed-graph-container" -); -export const speedGraphPlaceholder = document.getElementById( - "speed-graph-placeholder" -); +export const speedGraphContainer = document.getElementById("speed-graph-container"); +export const speedGraphPlaceholder = document.getElementById("speed-graph-placeholder"); export const modalContainer = document.getElementById("modal-container"); export const modalOverlay = document.getElementById("modal-overlay"); export const modalContent = document.getElementById("modal-content"); @@ -62,10 +48,12 @@ export const modalText = document.getElementById("modal-text"); export const modalOkBtn = document.getElementById("modal-ok-btn"); export const modalCancelBtn = document.getElementById("modal-cancel-btn"); export const toggleCloseUp = document.getElementById("toggle-close-up"); -export const togglePredictedPos = document.getElementById( - "toggle-predicted-pos" -); +export const togglePredictedPos = document.getElementById("toggle-predicted-pos"); export const toggleCovariance = document.getElementById("toggle-covariance"); +// In src/dom.js, add these exports +export const modalProgressContainer = document.getElementById("modal-progress-container"); +export const modalProgressBar = document.getElementById("modal-progress-bar"); +export const modalProgressText = document.getElementById("modal-progress-text"); //----------------------UPDATE FRAME Function----------------------// // Updates the UI to reflect the current radar frame and synchronizes video playback. diff --git a/steps/src/fileParsers.js b/steps/src/fileParsers.js index 27dc08e..789b96f 100644 --- a/steps/src/fileParsers.js +++ b/steps/src/fileParsers.js @@ -9,7 +9,7 @@ // This function can be deleted if it exists: parseJsonWithOboe // Add this simplified streaming function -export function parseJsonWithOboe(fileURL, onComplete, onError) { +export function parseJsonWithOboe(fileURL, onComplete, onError, onProgress) { const vizData = { radarFrames: [], tracks: [], @@ -24,6 +24,13 @@ export function parseJsonWithOboe(fileURL, onComplete, onError) { vizData.tracks.push(track); return oboe.drop; }) + // Add the progress listener + .on("progress", (progress) => { + // Oboe.js provides a progress object with a 'percent' property + if (onProgress) { + onProgress(progress.percent); + } + }) .done(() => { console.log("Oboe.js parsing complete."); onComplete(vizData); @@ -36,7 +43,6 @@ export function parseJsonWithOboe(fileURL, onComplete, onError) { }); } - //--------------------JSON POST-PROCESSOR (ASYNCHRONOUS & SAFE)------------------------// // Helper function to process large arrays in chunks without blocking diff --git a/steps/src/main.js b/steps/src/main.js index 943904e..629413b 100644 --- a/steps/src/main.js +++ b/steps/src/main.js @@ -16,6 +16,7 @@ // - main.js: The main application entry point that wires everything // =========================================================================================================== +import { showModal, updateModalProgress } from "./modal.js"; // Modify this import import { animationLoop } from "./sync.js"; import { radarSketch } from "./p5/radarSketch.js"; import { speedGraphSketch } from "./p5/speedGraphSketch.js"; @@ -76,7 +77,6 @@ import { resetVisualization, updateDebugOverlay, } from "./dom.js"; -import { showModal } from "./modal.js"; import { initializeTheme } from "./theme.js"; import { initDB, saveFileToDB, loadFileFromDB } from "./db.js"; @@ -101,103 +101,78 @@ clearCacheBtn.addEventListener("click", async () => { } }); +// In src/main.js, REPLACE the jsonFileInput event listener with this: jsonFileInput.addEventListener("change", (event) => { - const file = event.target.files[0]; - - if (!file) return; - - appState.jsonFilename = file.name; - - localStorage.setItem("jsonFilename", appState.jsonFilename); - - calculateAndSetOffset(); - - saveFileToDB("json", file); // Save the file object for the next session - - // 1. Show a loading modal immediately. - - showModal("Parsing large JSON file, please wait..."); - - // 2. Create a temporary URL for the streaming parser. - - const fileURL = URL.createObjectURL(file); - - // 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; - } - - appState.vizData = result.data; - - appState.globalMinSnr = result.minSnr; - - appState.globalMaxSnr = result.maxSnr; - - // Update UI with the correct, awaited data. - - snrMinInput.value = appState.globalMinSnr.toFixed(1); + const file = event.target.files[0]; + if (!file) return; - snrMaxInput.value = appState.globalMaxSnr.toFixed(1); - - resetVisualization(); + appState.jsonFilename = file.name; + localStorage.setItem("jsonFilename", appState.jsonFilename); + calculateAndSetOffset(); + saveFileToDB("json", file); // We still cache the raw file + + // 1. Show the modal with the progress bar + showModal("Parsing large JSON file...", false, true); + updateModalProgress(0); + + // 2. Create a new Worker from our script + const worker = new Worker('./src/parser.worker.js'); + + // 3. Set up listeners for messages FROM the worker + worker.onmessage = async (e) => { + const { type, data, message, percent } = e.data; + + if (type === 'progress') { + // Update the progress bar whenever the worker reports progress + updateModalProgress(percent); + } else if (type === 'complete') { + // Worker is done! Process the data it sent back. + updateModalProgress(100); + + const result = await parseVisualizationJson( + data, // Use the data object directly from the worker + appState.radarStartTimeMs, + appState.videoStartDate + ); - canvasPlaceholder.style.display = "none"; + if (result.error) { + showModal(result.error); + return; + } - featureToggles.classList.remove("hidden"); + appState.vizData = result.data; + appState.globalMinSnr = result.minSnr; + appState.globalMaxSnr = result.maxSnr; + snrMinInput.value = appState.globalMinSnr.toFixed(1); + snrMaxInput.value = appState.globalMaxSnr.toFixed(1); - if (!appState.p5_instance) { - appState.p5_instance = new p5(radarSketch); - } + resetVisualization(); + canvasPlaceholder.style.display = "none"; + featureToggles.classList.remove("hidden"); - if (appState.vizData) { - speedGraphPlaceholder.classList.add("hidden"); - if (!appState.speedGraphInstance) { - appState.speedGraphInstance = new p5(speedGraphSketch); - } - if (videoPlayer.duration) { - appState.speedGraphInstance.setData( - appState.vizData, - videoPlayer.duration - ); + if (!appState.p5_instance) { + appState.p5_instance = new p5(radarSketch); + } + if (appState.vizData && videoPlayer.duration) { + if (!appState.speedGraphInstance) { + appState.speedGraphInstance = new p5(speedGraphSketch); + } + appState.speedGraphInstance.setData(appState.vizData, videoPlayer.duration); + } + + // Close the modal and terminate the worker + document.getElementById("modal-ok-btn").click(); + worker.terminate(); + + } else if (type === 'error') { + // The worker ran into an error + showModal(message); + worker.terminate(); } - } - - // Close the loading modal. + }; - document.getElementById("modal-ok-btn").click(); - }, - - (error) => { - // This is the error callback for the streaming parser. - - showModal(error); - - URL.revokeObjectURL(fileURL); - } - ); + // 4. Send the file TO the worker to start the job + worker.postMessage({ file: file }); }); // Event listener for video file input change. @@ -452,6 +427,8 @@ function calculateAndSetOffset() { } // Application Initialization +// In src/main.js, REPLACE the entire 'DOMContentLoaded' listener with this: + document.addEventListener("DOMContentLoaded", () => { initializeTheme(); console.log("DEBUG: DOMContentLoaded fired. Starting session load."); @@ -467,22 +444,15 @@ document.addEventListener("DOMContentLoaded", () => { calculateAndSetOffset(); - const videoPromise = new Promise((resolve) => - loadFileFromDB("video", resolve) - ); - const jsonPromise = new Promise((resolve) => - loadFileFromDB("json", resolve) - ); - - // At the end of main.js, inside the DOMContentLoaded listener + const videoPromise = new Promise((resolve) => loadFileFromDB("video", resolve)); + const jsonPromise = new Promise((resolve) => loadFileFromDB("json", resolve)); Promise.all([videoPromise, jsonPromise]) .then(([videoBlob, jsonBlob]) => { - // Renamed jsonString to jsonBlob console.log("DEBUG: All data fetched from IndexedDB."); - const processRestOfData = async (parsedJson) => { - // This is our main processing logic + // This function will be called with the fully parsed JSON data when ready. + const finalizeSetup = async (parsedJson) => { if (parsedJson) { const result = await parseVisualizationJson( parsedJson, @@ -492,7 +462,8 @@ document.addEventListener("DOMContentLoaded", () => { if (!result.error) { appState.vizData = result.data; - // ... (update UI elements) + appState.globalMinSnr = result.minSnr; + appState.globalMaxSnr = result.maxSnr; snrMinInput.value = result.minSnr.toFixed(1); snrMaxInput.value = result.maxSnr.toFixed(1); } else { @@ -500,6 +471,12 @@ document.addEventListener("DOMContentLoaded", () => { } } + // Setup video player + if (videoBlob) { + const fileURL = URL.createObjectURL(videoBlob); + setupVideoPlayer(fileURL); + } + // Final UI updates if (appState.vizData) { resetVisualization(); @@ -509,47 +486,35 @@ document.addEventListener("DOMContentLoaded", () => { appState.p5_instance = new p5(radarSketch); } } - if (appState.vizData) { - speedGraphPlaceholder.classList.add("hidden"); - if (!appState.speedGraphInstance) { - appState.speedGraphInstance = new p5(speedGraphSketch); - } - if (videoPlayer.duration) { - appState.speedGraphInstance.setData( - appState.vizData, - videoPlayer.duration - ); - } - } }; - // Main controller for loading cached data - if (videoBlob) { - const fileURL = URL.createObjectURL(videoBlob); - setupVideoPlayer(fileURL); - videoPlayer.onloadedmetadata = () => { - if (jsonBlob) { - // If a JSON blob exists, parse it first - const jsonUrl = URL.createObjectURL(jsonBlob); - parseJsonWithOboe( - jsonUrl, - (data) => processRestOfData(data), - (err) => showModal(err) - ); - } else { - processRestOfData(null); + if (jsonBlob) { + // --- CACHED JSON FOUND: USE WORKER --- + showModal("Loading data from cache...", false, true); + updateModalProgress(0); + + const worker = new Worker('./src/parser.worker.js'); + + worker.onmessage = async (e) => { + const { type, data, message, percent } = e.data; + if (type === 'progress') { + updateModalProgress(percent); + } else if (type === 'complete') { + updateModalProgress(100); + await finalizeSetup(data); + document.getElementById("modal-ok-btn").click(); + worker.terminate(); + } else if (type === 'error') { + showModal(message); + worker.terminate(); } }; - } else if (jsonBlob) { - // If there's no video but there is a JSON blob - const jsonUrl = URL.createObjectURL(jsonBlob); - parseJsonWithOboe( - jsonUrl, - (data) => processRestOfData(data), - (err) => showModal(err) - ); + + worker.postMessage({ file: jsonBlob }); + } else { - processRestOfData(null); // No cached data to process + // --- NO CACHED JSON --- + finalizeSetup(null); } }) .catch((error) => { diff --git a/steps/src/modal.js b/steps/src/modal.js index 0d2e2b0..018c05e 100644 --- a/steps/src/modal.js +++ b/steps/src/modal.js @@ -1,21 +1,31 @@ import { - modalText, modalCancelBtn, modalContainer, modalOverlay, modalContent, +} from "./dom.js"; + +// First, import the new DOM elements at the top +import { + modalText, + //... modalOkBtn, + modalProgressContainer, // Add this + modalProgressBar, // Add this + modalProgressText, // Add this } from "./dom.js"; // --- Custom Modal Logic --- // // Variable to store the resolve function of the Promise, allowing the modal to return a value. -let modalResolve = null; -export function showModal(message, isConfirm = false) { +let modalResolve = null; +export function showModal(message, isConfirm = false, showProgress = false) { return new Promise((resolve) => { // Set the message text for the modal. modalText.textContent = message; // Show/hide the cancel button based on whether it's a confirmation modal. modalCancelBtn.classList.toggle("hidden", !isConfirm); + modalProgressContainer.classList.toggle("hidden", !showProgress); + // Make the modal container visible. modalContainer.classList.remove("hidden"); // Add a slight delay for CSS transitions to take effect, making the modal appear smoothly. @@ -27,12 +37,28 @@ export function showModal(message, isConfirm = false) { modalResolve = resolve; }); } +// Add this new exported function to update the progress bar +export function updateModalProgress(percent) { + if (modalProgressBar && modalProgressText) { + const p = Math.round(percent); + modalProgressBar.style.width = `${p}%`; + modalProgressText.textContent = + p < 100 ? `Parsing... ${p}%` : "Finalizing..."; + } +} + // Hides the modal and resolves the Promise with the given value. function hideModal(value) { modalOverlay.classList.add("opacity-0"); modalContent.classList.add("scale-95"); setTimeout(() => { modalContainer.classList.add("hidden"); + // Reset progress bar for the next time + if (modalProgressContainer && modalProgressBar && modalProgressText) { + modalProgressContainer.classList.add("hidden"); + modalProgressBar.style.width = "0%"; + modalProgressText.textContent = ""; + } if (modalResolve) modalResolve(value); }, 200); } diff --git a/steps/src/parser.worker.js b/steps/src/parser.worker.js index eb2a272..8469505 100644 --- a/steps/src/parser.worker.js +++ b/steps/src/parser.worker.js @@ -1,3 +1,5 @@ +// In src/parser.worker.js + // Import the lightweight and worker-safe Clarinet library importScripts('https://cdn.jsdelivr.net/npm/clarinet@0.12.5/clarinet.min.js'); @@ -9,69 +11,62 @@ self.onmessage = async function(event) { } try { - console.log('Worker: Starting robust parsing with debugging...'); - const fileSize = file.size; let bytesRead = 0; let lastReportedProgress = -1; const parser = clarinet.parser(); - const vizData = { radarFrames: [], tracks: [] }; - - // A simple state machine to track our location - let state = { - inRadarFrames: false, - inTracks: false, - currentObject: null, - currentKey: '' - }; - parser.onkey = (key) => { - state.currentKey = key; - if (key === 'radarFrames') state.inRadarFrames = true; - if (key === 'tracks') state.inTracks = true; - }; + // --- START: New Robust Parsing Logic --- + // This logic correctly builds a complete object tree from the stream. + let result; // This will hold the final, fully parsed object. + const stack = []; // A stack to keep track of current object/array. + let key = null; // The current object key. - parser.onopenobject = () => { - // We only care about objects inside our target arrays - if (state.inRadarFrames || state.inTracks) { - state.currentObject = {}; - } - }; - - parser.oncloseobject = () => { - if (state.currentObject) { - if (state.inRadarFrames) { - vizData.radarFrames.push(state.currentObject); - } else if (state.inTracks) { - vizData.tracks.push(state.currentObject); + const getParent = () => stack.length > 0 ? stack[stack.length - 1] : null; + + const assign = (value) => { + const parent = getParent(); + if (parent) { + if (Array.isArray(parent)) { + parent.push(value); + } else { + parent[key] = value; } - state.currentObject = null; // Reset for the next object + } else { + result = value; } }; - parser.onclosearray = () => { - // When we finish an array, update our state - if (state.inRadarFrames) state.inRadarFrames = false; - if (state.inTracks) state.inTracks = false; + parser.onopenobject = (k) => { + key = k; + const newObject = {}; + assign(newObject); + stack.push(newObject); + }; + + parser.onkey = (k) => { + key = k; }; + parser.onopenarray = () => { + const newArray = []; + assign(newArray); + stack.push(newArray); + }; + parser.onvalue = (value) => { - if (state.currentObject && state.currentKey) { - state.currentObject[state.currentKey] = value; - } + assign(value); }; - parser.onend = () => { - // --- DEBUGGING MESSAGES --- - console.log("Worker: Parsing complete."); - console.log("Worker: Final vizData structure:", vizData); - console.log("Worker: Number of radar frames parsed:", vizData.radarFrames ? vizData.radarFrames.length : 'undefined'); - console.log("Worker: Number of tracks parsed:", vizData.tracks ? vizData.tracks.length : 'undefined'); - // --- END DEBUGGING --- + parser.oncloseobject = () => stack.pop(); + parser.onclosearray = () => stack.pop(); + // --- END: New Robust Parsing Logic --- + parser.onend = () => { self.postMessage({ type: 'progress', percent: 100 }); - self.postMessage({ type: 'complete', data: vizData }); + // Send the fully constructed 'result' object back to the main thread. + self.postMessage({ type: 'complete', data: result }); }; parser.onerror = (err) => { @@ -79,7 +74,7 @@ self.onmessage = async function(event) { self.postMessage({ type: 'error', message: 'Failed to parse JSON structure.' }); }; - // --- Stream Reading Logic (remains the same) --- + // --- Stream Reading Logic (this part remains the same) --- const stream = file.stream(); const reader = stream.getReader(); const decoder = new TextDecoder();