Only update websocket data every 50ms

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);
     }
   };