diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js index 41016f2..9bc73a6 100755 --- a/backend/static/js/qleverUI.js +++ b/backend/static/js/qleverUI.js @@ -458,27 +458,40 @@ function createWebSocketForQuery(queryId, startTimeStamp, query) { ws.send("cancel_on_close"); }; + let latestMessage = null; + let timeoutHandle = null; + let currentNow = null; + ws.onmessage = (message) => { if (typeof message.data !== "string") { log("Unexpected message format", "other"); } else { - const payload = JSON.parse(message.data); - appendRuntimeInformation( - { - query_execution_tree: payload, - meta: {} - }, - query, - { - computeResult: `${payload["total_time"] || (Date.now() - startTimeStamp)}ms`, - total: `${Date.now() - startTimeStamp}ms` - }, - { - queryId, - updateTimeStamp: Date.now() - } - ); - renderRuntimeInformationToDom(); + latestMessage = message.data; + currentNow = Date.now(); + if (timeoutHandle !== null) { + return; + } + // Only update UI every 50ms to avoid heavy load. + timeoutHandle = setTimeout(() => { + const payload = JSON.parse(latestMessage); + appendRuntimeInformation( + { + query_execution_tree: payload, + meta: {} + }, + query, + { + computeResult: `${payload["total_time"] || (currentNow - startTimeStamp)}ms`, + total: `${currentNow - startTimeStamp}ms` + }, + { + queryId, + updateTimeStamp: currentNow + } + ); + renderRuntimeInformationToDom(); + timeoutHandle = null; + }, 50); } };