diff --git a/presto-ui/src/components/LivePlan.jsx b/presto-ui/src/components/LivePlan.jsx
index 1917639adedb4..5c12c36bfb661 100644
--- a/presto-ui/src/components/LivePlan.jsx
+++ b/presto-ui/src/components/LivePlan.jsx
@@ -18,7 +18,7 @@ import ReactDOMServer from "react-dom/server";
 import * as dagreD3 from "dagre-d3-es";
 import * as d3 from "d3";
 
-import {formatRows, getStageStateColor, truncateString} from "../utils";
+import {formatRows, getStageStateColor, truncateString, formatDataSizeBytes} from "../utils";
 import {initializeGraph, initializeSvg} from "../d3utils";
 import {QueryHeader} from "./QueryHeader";
 
@@ -98,18 +98,18 @@ export class StageStatistics extends React.Component<StageStatisticsProps, Stage
                     {stage.state}
                     <hr/>
                     CPU: {stats.totalCpuTime}<br />
-                    Buffered: {stats.bufferedDataSize}<br />
+                    Buffered: {formatDataSizeBytes(stats.bufferedDataSizeInBytes)}<br />
                     {stats.fullyBlocked ?
                         <div style={{color: '#ff0000'}}>Blocked: {stats.totalBlockedTime} </div> :
                         <div>Blocked: {stats.totalBlockedTime} </div>
                     }
-                    Memory: {stats.userMemoryReservation}
+                    Memory: {formatDataSizeBytes(stats.userMemoryReservationInBytes)}
                     <br/>
                     Splits: {"Q:" + stats.queuedDrivers + ", R:" + stats.runningDrivers + ", F:" + stats.completedDrivers}
                     <br/>
                     Lifespans: {stats.completedLifespans + " / " + stats.totalLifespans}
                     <hr/>
-                    Input: {stats.rawInputDataSize + " / " + formatRows(stats.rawInputPositions)}
+                    Input: {formatDataSizeBytes(stats.rawInputDataSizeInBytes) + " / " + formatRows(stats.rawInputPositions)}
                 </div>
             </div>
         );
@@ -160,6 +160,7 @@ type LivePlanState = {
     render: any,
 }
 
+
 export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
     timeoutId: TimeoutID;
 
@@ -250,7 +251,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
                                 class: "plan-edge",
                                 style: "stroke-width: 4px",
                                 arrowheadClass: "plan-arrowhead",
-                                label: sourceStats.outputDataSize + " / " + formatRows(sourceStats.outputPositions),
+                                label: formatDataSizeBytes(sourceStats.outputDataSizeInBytes) + " / " + formatRows(sourceStats.outputPositions),
                                 labelStyle: "color: #fff; font-weight: bold; font-size: 24px;",
                                 labelType: "html",
                         });
@@ -308,9 +309,7 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
     }
 
     componentDidUpdate(prevProps: LivePlanProps, prevState: LivePlanState) {
-        if (this.state.query !== prevState.query) {
-            this.updateD3Graph();
-        }
+        this.updateD3Graph();
         //$FlowFixMe
         $('[data-bs-toggle="tooltip"]')?.tooltip?.()
     }
@@ -361,4 +360,4 @@ export class LivePlan extends React.Component<LivePlanProps, LivePlanState> {
     }
 }
 
-export default LivePlan;
\ No newline at end of file
+export default LivePlan;
diff --git a/presto-ui/src/components/QueryHeader.jsx b/presto-ui/src/components/QueryHeader.jsx
index ab53f88011e00..9a374016a05a4 100644
--- a/presto-ui/src/components/QueryHeader.jsx
+++ b/presto-ui/src/components/QueryHeader.jsx
@@ -115,10 +115,10 @@ export class QueryHeader extends React.Component {
                     <div className="col-6 d-flex justify-content-end">
                         <nav className="nav nav-tabs">
                             {tabs.map((page, _) => (
-                                <>
+                                <React.Fragment key={page.path}>
                                     <a className={clsx('nav-link', 'navbar-btn', this.isActive(page.path) && 'active')} href={page.path + '?' + queryId} >{page.label}</a>
                                     &nbsp;
-                                </>
+                                </React.Fragment>
                             ))}
                             <a className="nav-link navbar-btn" href={"/v1/query/" + query.queryId + "?pretty"} target="_blank">JSON</a>
                         </nav>
diff --git a/presto-ui/src/components/QueryPlanView.jsx b/presto-ui/src/components/QueryPlanView.jsx
index dfa670baee369..1fe9b3776f290 100644
--- a/presto-ui/src/components/QueryPlanView.jsx
+++ b/presto-ui/src/components/QueryPlanView.jsx
@@ -20,7 +20,7 @@ import { StageStatistics, PlanNode } from './LivePlan';
 import ReactDOMServer from "react-dom/server";
 import * as dagreD3 from "dagre-d3-es";
 import * as d3 from "d3";
-import { formatRows, getStageStateColor } from "../utils";
+import { formatDataSizeBytes, formatRows, getStageStateColor } from "../utils";
 import { initializeGraph } from "../d3utils";
 
 export default function PlanView({show, data}) {
@@ -64,7 +64,7 @@ export default function PlanView({show, data}) {
                             class: "plan-edge",
                             style: "stroke-width: 4px",
                             arrowheadClass: "plan-arrowhead",
-                            label: sourceStats.outputDataSize + " / " + formatRows(sourceStats.outputPositions),
+                            label: formatDataSizeBytes(sourceStats.outputDataSizeInBytes) + " / " + formatRows(sourceStats.outputPositions),
                             labelStyle: "color: #fff; font-weight: bold; font-size: 24px;",
                             labelType: "html",
                         });
@@ -131,4 +131,4 @@ export default function PlanView({show, data}) {
             </div>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/presto-ui/src/components/QueryStageView.jsx b/presto-ui/src/components/QueryStageView.jsx
index 14ab116629b8c..bf2949e8f4664 100644
--- a/presto-ui/src/components/QueryStageView.jsx
+++ b/presto-ui/src/components/QueryStageView.jsx
@@ -25,7 +25,6 @@ import {
     formatDataSize,
     formatDuration,
     getTaskNumber,
-    parseDataSize,
     parseDuration
 } from "../utils";
 import { initializeGraph } from '../d3utils';
@@ -43,7 +42,7 @@ function OperatorSummary({ operator }) {
         parseDuration(operator.finishWall) +
         parseDuration(operator.blockedWall);
     const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
-    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
+    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
 
     return (
         <div className="header-data">
@@ -62,7 +61,7 @@ function OperatorSummary({ operator }) {
                             Output
                         </td>
                         <td>
-                            {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
+                            {formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
                         </td>
                     </tr>
                     <tr>
@@ -94,7 +93,7 @@ function OperatorSummary({ operator }) {
                             Input
                         </td>
                         <td>
-                            {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
+                            {formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
                         </td>
                     </tr>
                 </tbody>
@@ -160,8 +159,8 @@ function OperatorDetail({ index, operator, tasks }) {
         },
         {
             name: "Input Data Size",
-            id: "inputDataSize",
-            supplier: operator => parseDataSize(operator.inputDataSize),
+            id: "inputDataSizeInBytes",
+            supplier: operator => operator.inputDataSizeInBytes,
             renderer: formatDataSize
         },
         {
@@ -172,8 +171,8 @@ function OperatorDetail({ index, operator, tasks }) {
         },
         {
             name: "Output Data Size",
-            id: "outputDataSize",
-            supplier: operator => parseDataSize(operator.outputDataSize),
+            id: "outputDataSizeInBytes",
+            supplier: operator => operator.outputDataSizeInBytes,
             renderer: formatDataSize
         },
     ];
@@ -204,10 +203,10 @@ function OperatorDetail({ index, operator, tasks }) {
     const totalWallTime = getTotalWallTime(operator);
 
     const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
-    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
+    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
 
     const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
-    const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
+    const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputDataSizeInBytes) / (totalWallTime / 1000.0);
 
     return (
         <div className="col-12 container mx-2">
@@ -230,7 +229,7 @@ function OperatorDetail({ index, operator, tasks }) {
                                             Input
                                         </td>
                                         <td>
-                                            {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
+                                            {formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
                                         </td>
                                     </tr>
                                     <tr>
@@ -246,7 +245,7 @@ function OperatorDetail({ index, operator, tasks }) {
                                             Output
                                         </td>
                                         <td>
-                                            {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
+                                            {formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
                                         </td>
                                     </tr>
                                     <tr>
diff --git a/presto-ui/src/components/StageDetail.jsx b/presto-ui/src/components/StageDetail.jsx
index 36ff0a2480c84..d0d8619be1dc9 100644
--- a/presto-ui/src/components/StageDetail.jsx
+++ b/presto-ui/src/components/StageDetail.jsx
@@ -28,7 +28,6 @@ import {
     getFirstParameter,
     getTaskNumber,
     isQueryEnded,
-    parseDataSize,
     parseDuration
 } from "../utils";
 import { initializeGraph, initializeSvg } from "../d3utils";
@@ -45,7 +44,7 @@ class OperatorSummary extends React.Component {
         const totalWallTime = parseDuration(operator.addInputWall) + parseDuration(operator.getOutputWall) + parseDuration(operator.finishWall) + parseDuration(operator.blockedWall);
 
         const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / (totalWallTime / 1000.0);
-        const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
+        const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
 
         return (
             <div className="header-data">
@@ -64,7 +63,7 @@ class OperatorSummary extends React.Component {
                             Output
                         </td>
                         <td>
-                            {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
+                            {formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
                         </td>
                     </tr>
                     <tr>
@@ -96,7 +95,7 @@ class OperatorSummary extends React.Component {
                             Input
                         </td>
                         <td>
-                            {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
+                            {formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
                         </td>
                     </tr>
                     </tbody>
@@ -162,8 +161,8 @@ function OperatorDetail({ index, operator, tasks }) {
         },
         {
             name: "Input Data Size",
-            id: "inputDataSize",
-            supplier: operator => parseDataSize(operator.inputDataSize),
+            id: "inputDataSizeInBytes",
+            supplier: operator => operator.inputDataSizeInBytes,
             renderer: formatDataSize
         },
         {
@@ -174,8 +173,8 @@ function OperatorDetail({ index, operator, tasks }) {
         },
         {
             name: "Output Data Size",
-            id: "outputDataSize",
-            supplier: operator => parseDataSize(operator.outputDataSize),
+            id: "outputDataSizeInBytes",
+            supplier: operator => operator.outputDataSizeInBytes,
             renderer: formatDataSize
         },
     ];
@@ -206,10 +205,10 @@ function OperatorDetail({ index, operator, tasks }) {
     const totalWallTime = getTotalWallTime(operator);
 
     const rowInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputPositions) / totalWallTime;
-    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.inputDataSize)) / (totalWallTime / 1000.0);
+    const byteInputRate = totalWallTime === 0 ? 0 : (1.0 * operator.inputDataSizeInBytes) / (totalWallTime / 1000.0);
 
     const rowOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputPositions) / totalWallTime;
-    const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * parseDataSize(operator.outputDataSize)) / (totalWallTime / 1000.0);
+    const byteOutputRate = totalWallTime === 0 ? 0 : (1.0 * operator.outputDataSizeInBytes) / (totalWallTime / 1000.0);
 
     return (
         <div className="col-12 container mx-2">
@@ -232,7 +231,7 @@ function OperatorDetail({ index, operator, tasks }) {
                                         Input
                                     </td>
                                     <td>
-                                        {formatCount(operator.inputPositions) + " rows (" + operator.inputDataSize + ")"}
+                                        {formatCount(operator.inputPositions) + " rows (" + formatDataSize(operator.inputDataSizeInBytes) + ")"}
                                     </td>
                                 </tr>
                                 <tr>
@@ -248,7 +247,7 @@ function OperatorDetail({ index, operator, tasks }) {
                                         Output
                                     </td>
                                     <td>
-                                        {formatCount(operator.outputPositions) + " rows (" + operator.outputDataSize + ")"}
+                                        {formatCount(operator.outputPositions) + " rows (" + formatDataSize(operator.outputDataSizeInBytes) + ")"}
                                     </td>
                                 </tr>
                                 <tr>
@@ -649,4 +648,4 @@ export class StageDetail extends React.Component {
     }
 }
 
-export default StageDetail;
\ No newline at end of file
+export default StageDetail;