From 62a7f0976f360dca3c44c3372804125b0cf6a163 Mon Sep 17 00:00:00 2001
From: RobinTF <83676088+RobinTF@users.noreply.github.com>
Date: Thu, 15 Aug 2024 18:56:52 +0200
Subject: [PATCH 1/2] Only update data every 50ms

---
 backend/static/js/qleverUI.js | 45 ++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js
index 41016f23..624f6706 100755
--- a/backend/static/js/qleverUI.js
+++ b/backend/static/js/qleverUI.js
@@ -458,27 +458,38 @@ function createWebSocketForQuery(queryId, startTimeStamp, query) {
     ws.send("cancel_on_close");
   };
 
+  let latestMessage = null;
+  let timeoutHandle = 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;
+      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"] || (Date.now() - startTimeStamp)}ms`,
+            total: `${Date.now() - startTimeStamp}ms`
+          },
+          {
+            queryId,
+            updateTimeStamp: Date.now()
+          }
+        );
+        renderRuntimeInformationToDom();
+        timeoutHandle = null;
+      }, 50);
     }
   };
 

From 9bb9d0421003b4f10c3eee107ac599fb07d4567a Mon Sep 17 00:00:00 2001
From: RobinTF <83676088+RobinTF@users.noreply.github.com>
Date: Thu, 15 Aug 2024 19:00:52 +0200
Subject: [PATCH 2/2] Substitute now time

---
 backend/static/js/qleverUI.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/backend/static/js/qleverUI.js b/backend/static/js/qleverUI.js
index 624f6706..9bc73a68 100755
--- a/backend/static/js/qleverUI.js
+++ b/backend/static/js/qleverUI.js
@@ -460,12 +460,14 @@ function createWebSocketForQuery(queryId, startTimeStamp, query) {
 
   let latestMessage = null;
   let timeoutHandle = null;
+  let currentNow = null;
 
   ws.onmessage = (message) => {
     if (typeof message.data !== "string") {
       log("Unexpected message format", "other");
     } else {
       latestMessage = message.data;
+      currentNow = Date.now();
       if (timeoutHandle !== null) {
         return;
       }
@@ -479,12 +481,12 @@ function createWebSocketForQuery(queryId, startTimeStamp, query) {
           },
           query,
           {
-            computeResult: `${payload["total_time"] || (Date.now() - startTimeStamp)}ms`,
-            total: `${Date.now() - startTimeStamp}ms`
+            computeResult: `${payload["total_time"] || (currentNow - startTimeStamp)}ms`,
+            total: `${currentNow - startTimeStamp}ms`
           },
           {
             queryId,
-            updateTimeStamp: Date.now()
+            updateTimeStamp: currentNow
           }
         );
         renderRuntimeInformationToDom();