@yugabytedb/perf-advisor-ui 1.0.86 → 1.0.87

package/dist/esm/index.js

@@ -21,113 +21,6 @@ import { TabContext, TabPanel } from '@material-ui/lab';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { render as render$1 } from 'react-dom';
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 function toVal(mix) {
 	var k, y, str='';
 
@@ -400,8 +293,115 @@ var YBErrorIndicator = function (_a) {
     if (type === 'universe') {
         errorDisplayMessage = (jsx(Box$1, { children: "Seems like universe with UUID ".concat(uuid, " has issues or does not exist.") }));
     }
-    return (jsxs(Box$1, __assign({ className: classes.errorContainer }, { children: [jsx(Box$1, { children: jsx("span", { children: 'Aww Snap.' }) }), jsx(Box$1, { children: errorDisplayMessage }), customErrorMessage &&
-                jsx(Box$1, { children: jsx("span", __assign({ className: classes.errorText }, { children: customErrorMessage })) }), jsx(Box$1, { children: errorRecoveryMessage })] })));
+    return (jsxs(Box$1, { className: classes.errorContainer, children: [jsx(Box$1, { children: jsx("span", { children: 'Aww Snap.' }) }), jsx(Box$1, { children: errorDisplayMessage }), customErrorMessage &&
+                jsx(Box$1, { children: jsx("span", { className: classes.errorText, children: customErrorMessage }) }), jsx(Box$1, { children: errorRecoveryMessage })] }));
+};
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 var isCheckBoxInput = (element) => element.type === 'checkbox';
@@ -2444,7 +2444,7 @@ var YBInfinitePagination = function (_a) {
             void dataPrefetchFn();
         }
     }, []); // Empty dependency array ensures this runs only once after the component is mounted
-    return (jsxs(Box$1, __assign({ className: classes.root }, { children: [showRecordsPerPage && (jsxs(Grid$2, __assign({ item: true, xs: 12, lg: 4, className: classes.dropdownContainer }, { children: [recordsPerPageCaption && (jsx(Box$1, __assign({ mr: 1, minWidth: "100px" }, { children: recordsPerPageCaption }))), jsx(YBSelect, __assign({ value: rowsPerPage, onChange: function (event) {
+    return (jsxs(Box$1, { className: classes.root, children: [showRecordsPerPage && (jsxs(Grid$2, { item: true, xs: 12, lg: 4, className: classes.dropdownContainer, children: [recordsPerPageCaption && (jsx(Box$1, { mr: 1, minWidth: "100px", children: recordsPerPageCaption })), jsx(YBSelect, { value: rowsPerPage, onChange: function (event) {
                             onPageSizeChange(event.target.value);
                         }, className: classes.dropdown, dataTestId: "RowsPerPageSelect", menuProps: {
                             className: classes.dropdownMenu,
@@ -2452,7 +2452,7 @@ var YBInfinitePagination = function (_a) {
                                 vertical: 'top',
                                 horizontal: 'left'
                             }
-                        } }, { children: rowsPerPageOptions.map(function (recordSize) { return (jsx(MenuItem$1, __assign({ value: recordSize, "data-testid": "RowsPerPageSelectMenuItem-".concat(recordSize) }, { children: recordSize }), recordSize)); }) }))] }))), jsx(Box$1, __assign({ ml: 4 }, { children: jsx(YBPagination, { currentPage: page + 1, pageSize: totalPages, onPageSelect: handleOnPageSelect, hasMore: hasMoreData, dataTestId: "TablePagination" }) }))] })));
+                        }, children: rowsPerPageOptions.map(function (recordSize) { return (jsx(MenuItem$1, { value: recordSize, "data-testid": "RowsPerPageSelectMenuItem-".concat(recordSize), children: recordSize }, recordSize)); }) })] })), jsx(Box$1, { ml: 4, children: jsx(YBPagination, { currentPage: page + 1, pageSize: totalPages, onPageSelect: handleOnPageSelect, hasMore: hasMoreData, dataTestId: "TablePagination" }) })] }));
 };
 
 var useStyles$n = makeStyles$1(function (theme) { return ({
@@ -2483,7 +2483,7 @@ var YBPanelItem = function (_a) {
     var noBackground = _a.noBackground, className = _a.className, bodyClassName = _a.bodyClassName, children = _a.children, body = _a.body, header = _a.header, title = _a.title;
     var classes = useStyles$n();
     var panelBodyClassName = clsx(classes.body, noBackground && classes.transparentBody, bodyClassName);
-    return (jsxs(Box$1, __assign({ className: className ? classes.contentPanel + className : 'classes.contentPanel' }, { children: [(header || title) && (jsxs(Box$1, __assign({ className: classes.header }, { children: [header, " ", title] }))), jsx(Box$1, __assign({ className: "container" }, { children: body && (jsxs(Box$1, __assign({ className: panelBodyClassName }, { children: [body, children] }))) }))] })));
+    return (jsxs(Box$1, { className: className ? classes.contentPanel + className : 'classes.contentPanel', children: [(header || title) && (jsxs(Box$1, { className: classes.header, children: [header, " ", title] })), jsx(Box$1, { className: "container", children: body && (jsxs(Box$1, { className: panelBodyClassName, children: [body, children] })) })] }));
 };
 
 var _a$2;
@@ -3355,14 +3355,14 @@ var METRICS_SESSION_STORAGE_KEY = 'METRICS_NAMES';
 var METRICS_OUTLIER_TABLES_STORAGE_KEY = 'METRICS_OUTLIER_TABLES_NAMES';
 var METRICS_OUTLIER_DATABASES_STORAGE_KEY = 'METRICS_OUTLIER_DATABASES_NAMES';
 var COLORS = [
-    '#8c564b',
-    '#4754DB',
-    '#2FB3FF',
-    '#BB42BC',
-    '#20A7C9',
-    '#e377c2',
-    '#7f7f7f',
-    '#bcbd22',
+    '#8c564b', // muted blue
+    '#4754DB', // safety orange
+    '#2FB3FF', // cooked asparagus green
+    '#BB42BC', // brick red
+    '#20A7C9', // muted purple
+    '#e377c2', // raspberry yogurt pink
+    '#7f7f7f', // middle gray
+    '#bcbd22', // curry yellow-green
     '#17becf' // blue-teal
 ];
 var NAME_COLOR_MAPPING = {
@@ -3378,7 +3378,7 @@ var NAME_COLOR_MAPPING = {
     LWLock: '#DA1515',
     Lock: '#E34F6E',
     TServerWait: '#e377c2',
-    '# vCPU': '#888888',
+    '# vCPU': '#888888', // Denotes overall CPU Core cunt
     // Anomaly categories colors
     DB: '#7879F1',
     NODE: '#FFD383',
@@ -3388,72 +3388,72 @@ var NAME_COLOR_MAPPING = {
     BACKGROUND_JOBS: '#D7DEE4',
     // Source of data: https://github.com/yugabyte/yugabyte-db/blob/4f304d5aabe5b992b4d04e59f1e6096fa35233d9/docs/content/stable/explore/observability/active-session-history.md?plain=1#L121
     // YSQL Wait event types
-    TableRead: '#966919',
-    CatalogRead: '#966919',
-    IndexRead: '#966919',
-    StorageFlush: '#966919',
-    TableWrite: '#966919',
-    CatalogWrite: '#966919',
-    IndexWrite: '#966919',
-    WaitingOnTServer: '#966919',
+    TableRead: '#966919', // Network or RPCWait
+    CatalogRead: '#966919', // Network or RPCWait
+    IndexRead: '#966919', // Network or RPCWait
+    StorageFlush: '#966919', // Network or RPCWait
+    TableWrite: '#966919', // Network or RPCWait
+    CatalogWrite: '#966919', // Network or RPCWait
+    IndexWrite: '#966919', // Network or RPCWait
+    WaitingOnTServer: '#966919', // Network or RPCWait
     // YSQLQuery class Wait event types
-    QueryProcessing: '#56C188',
-    yb_ash_metadata: '#DA1515',
-    YBParallelScanEmpty: '#3884FB',
-    CopyCommandStreamRead: '#3884FB',
-    CopyCommandStreamWrite: '#3884FB',
-    YbAshMain: '#0B1117',
-    YbAshCircularBuffer: '#DA1515',
-    ProcArray: '#DA1515',
-    QueryDiagnosticsMain: '#0B1117',
-    YbQueryDiagnostics: '#DA1515',
-    YbQueryDiagnosticsCircularBuffer: '#DA1515',
-    YBTxnConflictBackoff: '#B7C3CB',
+    QueryProcessing: '#56C188', // CPU
+    yb_ash_metadata: '#DA1515', // LWLock
+    YBParallelScanEmpty: '#3884FB', // IPC → Treated as IO
+    CopyCommandStreamRead: '#3884FB', // IO
+    CopyCommandStreamWrite: '#3884FB', // IO
+    YbAshMain: '#0B1117', // Activity → Treated as Queries
+    YbAshCircularBuffer: '#DA1515', // LWLock
+    ProcArray: '#DA1515', // LWLock
+    QueryDiagnosticsMain: '#0B1117', // Activity → Treated as Queries
+    YbQueryDiagnostics: '#DA1515', // LWLock
+    YbQueryDiagnosticsCircularBuffer: '#DA1515', // LWLock
+    YBTxnConflictBackoff: '#B7C3CB', // Timeout → Treated as WaitOnCondition
     // YB-TServer Common class Wait event types
-    OnCpu_Passive: '#56C188',
-    OnCpu_Active: '#56C188',
-    Idle: '#B7C3CB',
-    Rpc_Done: '#B7C3CB',
-    RetryableRequests_SaveToDisk: '#E48B2C',
+    OnCpu_Passive: '#56C188', // CPU
+    OnCpu_Active: '#56C188', // CPU
+    Idle: '#B7C3CB', // WaitOnCondition
+    Rpc_Done: '#B7C3CB', // WaitOnCondition
+    RetryableRequests_SaveToDisk: '#E48B2C', // DiskIO
     // TabletWait class Wait event types
-    MVCC_WaitForSafeTime: '#B7C3CB',
-    LockedBatchEntry_Lock: '#E34F6E',
-    BackfillIndex_WaitForAFreeSlot: '#B7C3CB',
-    CreatingNewTablet: '#E48B2C',
-    SaveRaftGroupMetadataToDisk: '#E48B2C',
-    TransactionStatusCache_DoGetCommitData: '#966919',
-    WaitForYSQLBackendsCatalogVersion: '#B7C3CB',
-    WriteSysCatalogSnapshotToDisk: '#E48B2C',
-    DumpRunningRpc_WaitOnReactor: '#B7C3CB',
-    ConflictResolution_ResolveConficts: '#966919',
-    ConflictResolution_WaitOnConflictingTxns: '#B7C3CB',
+    MVCC_WaitForSafeTime: '#B7C3CB', // WaitOnCondition
+    LockedBatchEntry_Lock: '#E34F6E', // Lock
+    BackfillIndex_WaitForAFreeSlot: '#B7C3CB', // WaitOnCondition
+    CreatingNewTablet: '#E48B2C', // DiskIO
+    SaveRaftGroupMetadataToDisk: '#E48B2C', // DiskIO
+    TransactionStatusCache_DoGetCommitData: '#966919', // Network
+    WaitForYSQLBackendsCatalogVersion: '#B7C3CB', // WaitOnCondition
+    WriteSysCatalogSnapshotToDisk: '#E48B2C', // DiskIO
+    DumpRunningRpc_WaitOnReactor: '#B7C3CB', // WaitOnCondition
+    ConflictResolution_ResolveConficts: '#966919', // Network or RPCWait
+    ConflictResolution_WaitOnConflictingTxns: '#B7C3CB', // WaitOnCondition
     // Consensus class Wait event types
-    WAL_Append: '#E48B2C',
-    WAL_Sync: '#E48B2C',
-    Raft_WaitingForReplication: '#966919',
-    Raft_ApplyingEdits: '#56C188',
-    ConsensusMeta_Flush: '#E48B2C',
-    ReplicaState_TakeUpdateLock: '#B7C3CB',
+    WAL_Append: '#E48B2C', // DiskIO
+    WAL_Sync: '#E48B2C', // DiskIO
+    Raft_WaitingForReplication: '#966919', // Network or RPCWait
+    Raft_ApplyingEdits: '#56C188', // WaitOnCondition/CPU → Prefer CPU
+    ConsensusMeta_Flush: '#E48B2C', // DiskIO
+    ReplicaState_TakeUpdateLock: '#B7C3CB', // WaitOnCondition
     // RocksDB class Wait event types
-    RocksDB_ReadBlockFromFile: '#E48B2C',
-    RocksDB_OpenFile: '#E48B2C',
-    RocksDB_WriteToFile: '#E48B2C',
-    RocksDB_Flush: '#56C188',
-    RocksDB_Compaction: '#56C188',
-    RocksDB_PriorityThreadPoolTaskPaused: '#B7C3CB',
-    RocksDB_CloseFile: '#E48B2C',
-    RocksDB_RateLimiter: '#B7C3CB',
-    RocksDB_WaitForSubcompaction: '#B7C3CB',
-    RocksDB_NewIterator: '#E48B2C',
+    RocksDB_ReadBlockFromFile: '#E48B2C', // DiskIO
+    RocksDB_OpenFile: '#E48B2C', // DiskIO
+    RocksDB_WriteToFile: '#E48B2C', // DiskIO
+    RocksDB_Flush: '#56C188', // CPU
+    RocksDB_Compaction: '#56C188', // CPU
+    RocksDB_PriorityThreadPoolTaskPaused: '#B7C3CB', // WaitOnCondition
+    RocksDB_CloseFile: '#E48B2C', // DiskIO
+    RocksDB_RateLimiter: '#B7C3CB', // WaitOnCondition
+    RocksDB_WaitForSubcompaction: '#B7C3CB', // WaitOnCondition
+    RocksDB_NewIterator: '#E48B2C', // DiskIO
     // YCQLQuery class Wait event types
-    YCQL_Parse: '#56C188',
-    YCQL_Read: '#56C188',
-    YCQL_Write: '#56C188',
-    YCQL_Analyze: '#56C188',
-    YCQL_Execute: '#56C188',
+    YCQL_Parse: '#56C188', // CPU
+    YCQL_Read: '#56C188', // CPU
+    YCQL_Write: '#56C188', // CPU
+    YCQL_Analyze: '#56C188', // CPU
+    YCQL_Execute: '#56C188', // CPU
     // Client class Wait event types
-    YBClient_WaitingOnDocDB: '#966919',
-    YBClient_LookingUpTablet: '#966919',
+    YBClient_WaitingOnDocDB: '#966919', // Network or RPCWait
+    YBClient_LookingUpTablet: '#966919', // Network or RPCWait
     EMPTY_EVENT: '#F0F4F7'
 };
 var TOOLTIP_TEXT = {
@@ -3647,8 +3647,8 @@ var useHelperStyles = makeStyles(function (theme) { return ({
         WebkitBoxOrient: 'vertical',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        WebkitLineClamp: 3,
-        maxHeight: '4.5em',
+        WebkitLineClamp: 3, // Limit to 3 lines
+        maxHeight: '4.5em', // 3 lines * 1.5 line-height
         lineHeight: '1.5em'
     },
     searchInput: {
@@ -3891,9 +3891,9 @@ var useHelperStyles = makeStyles(function (theme) { return ({
     tooltip: {
         maxWidth: '400px',
         maxHeight: '200px',
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        whiteSpace: 'normal',
+        overflowY: 'auto', // Enable vertical scrolling
+        overflowX: 'hidden', // Prevent horizontal scrolling
+        whiteSpace: 'normal', // Allow text to wrap
         padding: theme.spacing(1) // Add some padding for better readability
     },
     gridBox: {
@@ -4115,7 +4115,7 @@ var TableActions = function (_a) {
         onSelectedQuery === null || onSelectedQuery === void 0 ? void 0 : onSelectedQuery(queryId.toString(), params);
         window.history.pushState({}, '', "".concat(window.location.pathname, "/").concat(queryId, "?").concat(urlParams.toString()));
     };
-    return (jsxs(Fragment, { children: [appName === AppName.YBM && routeToSecondary(), (appName === AppName.WEB || appName === AppName.YBA) &&
+    return (jsxs(Fragment, { children: [(appName === AppName.YBM || appName === AppName.YBA) && routeToSecondary(), (appName === AppName.WEB) &&
                 handleRedirect(queryId, databaseId === null || databaseId === void 0 ? void 0 : databaseId.toString(), universeId)] }));
 };
 
@@ -4130,18 +4130,18 @@ var TableRowComponent = React__default.memo(function (_a) {
         }
     };
     var hasDisplayHeaders = tableColumns.filter(function (col) { return !ignoredColumns.includes(col.name); }).length > 0;
-    return (jsxs(Fragment$1, { children: [jsx(TableRow, __assign({ className: classes.tableRow, onClick: handleRowClick }, { children: hasDisplayHeaders &&
+    return (jsxs(Fragment$1, { children: [jsx(TableRow, { className: classes.tableRow, onClick: handleRowClick, children: hasDisplayHeaders &&
                     data.map(function (val, index) {
                         if (val !== undefined) {
-                            return (jsx(TableCell, __assign({ className: showQuery ? classes.rowTableCell : '', style: {
+                            return (jsx(TableCell, { className: showQuery ? classes.rowTableCell : '', style: {
                                     overflow: 'visible',
                                     position: 'relative',
                                     paddingTop: 8,
                                     paddingBottom: 8
-                                } }, { children: val }), "TableHelper-row-".concat(dataIndex, "-body-cell-").concat(index)));
+                                }, children: val }, "TableHelper-row-".concat(dataIndex, "-body-cell-").concat(index)));
                         }
                         return null;
-                    }) }), "TableHelper-queries-row-".concat(String(data[0]))), expandedRowIndex === dataIndex && (jsx(TableActions, { appName: appName, rowData: displayedRows[dataIndex], onSelectedQuery: onSelectedQuery, onClose: function () { return handleExpandedRowIndex(null); } }))] }));
+                    }) }, "TableHelper-queries-row-".concat(String(data[0]))), expandedRowIndex === dataIndex && (jsx(TableActions, { appName: appName, rowData: displayedRows[dataIndex], onSelectedQuery: onSelectedQuery, onClose: function () { return handleExpandedRowIndex(null); } }))] }));
 });
 var getRowCellComponent = function (appName, currentTablePage, displayedRows, classes, showQuery, tableColumns, ignoredColumns, startTime, endTime, expandedRowIndex, handleExpandedRowIndex, onSelectedQuery) {
     var rowCellComponent = function (data, dataIndex) {
@@ -4211,10 +4211,10 @@ var handleRowClick = function (_a) {
         // This will ensure that full page reload is not done and just loads the neccessary component
         onNavigateToUrl === null || onNavigateToUrl === void 0 ? void 0 : onNavigateToUrl(url);
     };
-    if (appName === AppName.YBM) {
+    if (appName === AppName.YBM || appName === AppName.YBA) {
         routeToSecondary();
     }
-    else if (appName === AppName.WEB || appName === AppName.YBA) {
+    else if (appName === AppName.WEB) {
         handleRedirect(queryId, databaseId === null || databaseId === void 0 ? void 0 : databaseId.toString(), universeId);
     }
 };
@@ -4252,7 +4252,7 @@ var MetricSplitSelector = function (_a) {
             dataTestId: "MetricSplitSelector-MetricSplitButton-".concat(metricSplitSelector.value),
         },
     }); });
-    return (jsx(Box$1, __assign({ display: "flex", flexDirection: "row" }, { children: jsx(YBButtonGroup, { divider: true, buttons: buttons, value: (_m = metricSplitSelectors[active]) === null || _m === void 0 ? void 0 : _m.value, dataTestId: "MetricTypeSelector-MetricMeasureButton" }) })));
+    return (jsx(Box$1, { display: "flex", flexDirection: "row", children: jsx(YBButtonGroup, { divider: true, buttons: buttons, value: (_m = metricSplitSelectors[active]) === null || _m === void 0 ? void 0 : _m.value, dataTestId: "MetricTypeSelector-MetricMeasureButton" }) }));
 };
 
 var NUM_NODES_SELECTOR_OPTIONS = [
@@ -4293,9 +4293,9 @@ var OutlierSelector = function (_a) {
             dataTestId: "OutlierSelector-OutlierButton-".concat(outlierSelector.value),
         },
     }); });
-    return (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: "center" }, { children: [jsx(Box$1, { children: jsx(YBButtonGroup, { divider: true, buttons: buttons, dataTestId: "OutlierSelector-OutlierButton", value: (_b = metricOutlierSelectors[active]) === null || _b === void 0 ? void 0 : _b.value }) }), showNumNodesInput && (jsx(Box$1, __assign({ ml: 2 }, { children: jsx(YBInput, { type: "number", className: classes.input, inputProps: {
+    return (jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: "center", children: [jsx(Box$1, { children: jsx(YBButtonGroup, { divider: true, buttons: buttons, dataTestId: "OutlierSelector-OutlierButton", value: (_b = metricOutlierSelectors[active]) === null || _b === void 0 ? void 0 : _b.value }) }), showNumNodesInput && (jsx(Box$1, { ml: 2, children: jsx(YBInput, { type: "number", className: classes.input, inputProps: {
                         min: 1
-                    }, dataTestId: "OutlierSelector-NumNodesInput", value: selectedNumNodes, onChange: function (event) { return onNumNodesChanged(event.target.value); }, inputMode: "numeric" }) }))), showNumNodesSelector && (jsx(Box$1, __assign({ ml: 1, mr: 1 }, { children: jsx(YBSelect, __assign({ style: { width: '80px' }, className: classes.overrideMuiInput, dataTestId: "OutlierSelector-NumNodesSelector", value: selectedNumNodes, onChange: function (event) { return onNumNodesChanged(event.target.value); } }, { children: NUM_NODES_SELECTOR_OPTIONS.map(function (numNodesOption) { return (jsx(MenuItem$1, __assign({ value: numNodesOption.value }, { children: numNodesOption.label }), numNodesOption.value)); }) })) }))), jsx(Typography$1, __assign({ variant: 'body2', style: { marginRight: '8px' } }, { children: METRIC_MEASURE_TEXT[metricMeasure] }))] })));
+                    }, dataTestId: "OutlierSelector-NumNodesInput", value: selectedNumNodes, onChange: function (event) { return onNumNodesChanged(event.target.value); }, inputMode: "numeric" }) })), showNumNodesSelector && (jsx(Box$1, { ml: 1, mr: 1, children: jsx(YBSelect, { style: { width: '80px' }, className: classes.overrideMuiInput, dataTestId: "OutlierSelector-NumNodesSelector", value: selectedNumNodes, onChange: function (event) { return onNumNodesChanged(event.target.value); }, children: NUM_NODES_SELECTOR_OPTIONS.map(function (numNodesOption) { return (jsx(MenuItem$1, { value: numNodesOption.value, children: numNodesOption.label }, numNodesOption.value)); }) }) })), jsx(Typography$1, { variant: 'body2', style: { marginRight: '8px' }, children: METRIC_MEASURE_TEXT[metricMeasure] })] }));
 };
 
 /**
@@ -4605,9 +4605,9 @@ var ZoneNodeSelector = function (_a) {
     var classes = useStyles$l();
     var renderZoneAndNodeItems = function (primaryZoneToNodesMap, asyncZoneToNodesMap) {
         var renderedItems = [];
-        renderedItems.push(jsx(MenuItem$1, __assign({ value: ALL_ZONES, onClick: function (e) {
+        renderedItems.push(jsx(MenuItem$1, { value: ALL_ZONES, onClick: function (e) {
                 onZoneNodeSelected(false, false, ALL_ZONES);
-            } }, { children: ALL_ZONES }), ALL_ZONES));
+            }, children: ALL_ZONES }, ALL_ZONES));
         renderedItems.push(jsx(Divider, {}, "divider-all-zones"));
         var primaryMapValues = primaryZoneToNodesMap.values();
         var primaryMapiterator = primaryMapValues.next();
@@ -4616,16 +4616,16 @@ var ZoneNodeSelector = function (_a) {
             var primaryClusterZoneName = primaryMapValueObject.zoneName;
             var primaryClusternodeNames = primaryMapValueObject.nodeNames;
             if (primaryClusterZoneName) {
-                renderedItems.push(jsx(MenuItem$1, __assign({ value: primaryClusterZoneName, onClick: function (e) {
+                renderedItems.push(jsx(MenuItem$1, { value: primaryClusterZoneName, onClick: function (e) {
                         onZoneNodeSelected(true, false, primaryClusterZoneName);
-                    }, className: classes.menuItem }, { children: primaryClusterZoneName }), primaryClusterZoneName));
+                    }, className: classes.menuItem, children: primaryClusterZoneName }, primaryClusterZoneName));
             }
             // Add Primary Zones and Nodes
             if (isNonEmptyArray(primaryClusternodeNames)) {
                 primaryClusternodeNames.forEach(function (nodeName) {
-                    renderedItems.push(jsxs(MenuItem$1, __assign({ value: nodeName, onClick: function (e) {
+                    renderedItems.push(jsxs(MenuItem$1, { value: nodeName, onClick: function (e) {
                             onZoneNodeSelected(false, true, nodeName);
-                        }, className: classes.regularText }, { children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), nodeName] }), "primary-".concat(primaryClusterZoneName, "-").concat(nodeName)));
+                        }, className: classes.regularText, children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), nodeName] }, "primary-".concat(primaryClusterZoneName, "-").concat(nodeName)));
                 });
             }
             primaryMapiterator = primaryMapValues.next();
@@ -4643,15 +4643,15 @@ var ZoneNodeSelector = function (_a) {
                 var asyncClusterZoneName = asyncMapValueObject.zoneName;
                 var asyncClusternodeNames = asyncMapValueObject.nodeNames;
                 if (asyncClusterZoneName) {
-                    renderedItems.push(jsx(MenuItem$1, __assign({ value: asyncClusterZoneName, onClick: function (e) {
+                    renderedItems.push(jsx(MenuItem$1, { value: asyncClusterZoneName, onClick: function (e) {
                             onZoneNodeSelected(true, false, asyncClusterZoneName);
-                        } }, { children: asyncClusterZoneName }), asyncClusterZoneName));
+                        }, children: asyncClusterZoneName }, asyncClusterZoneName));
                 }
                 if (isNonEmptyArray(asyncClusternodeNames)) {
                     asyncClusternodeNames.forEach(function (nodeName) {
-                        renderedItems.push(jsxs(MenuItem$1, __assign({ value: nodeName, onClick: function (e) {
+                        renderedItems.push(jsxs(MenuItem$1, { value: nodeName, onClick: function (e) {
                                 onZoneNodeSelected(false, true, nodeName);
-                            }, className: classes.regularText }, { children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), nodeName] }), "async-".concat(asyncClusterZoneName, "-").concat(nodeName)));
+                            }, className: classes.regularText, children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), nodeName] }, "async-".concat(asyncClusterZoneName, "-").concat(nodeName)));
                     });
                 }
                 asyncMapiterator = asyncMapValues.next();
@@ -4662,7 +4662,7 @@ var ZoneNodeSelector = function (_a) {
         }
         return renderedItems;
     };
-    return (jsx(YBSelect, __assign({ className: clsx(classes.selectBox, classes.overrideMuiInput), dataTestId: "YBZoneNodeSelector-Zone", value: selectedItem }, { children: renderZoneAndNodeItems(primaryZoneToNodesMap, asyncZoneToNodesMap) })));
+    return (jsx(YBSelect, { className: clsx(classes.selectBox, classes.overrideMuiInput), dataTestId: "YBZoneNodeSelector-Zone", value: selectedItem, children: renderZoneAndNodeItems(primaryZoneToNodesMap, asyncZoneToNodesMap) }));
 };
 
 var useStyles$k = makeStyles(function (theme) { return ({
@@ -4698,9 +4698,9 @@ var ClusterRegionSelector = function (_a) {
     var classes = useStyles$k();
     var renderClusterAndRegionItems = function (primaryClusterToRegionMap, asyncClusterToRegionMap) {
         var renderedItems = [];
-        renderedItems.push(jsx(MenuItem$1, __assign({ value: ALL_REGIONS, onClick: function (e) {
+        renderedItems.push(jsx(MenuItem$1, { value: ALL_REGIONS, onClick: function (e) {
                 onClusterRegionSelected(false, false, ALL_REGIONS, false);
-            } }, { children: ALL_REGIONS }), ALL_REGIONS));
+            }, children: ALL_REGIONS }, ALL_REGIONS));
         renderedItems.push(jsx(Divider, {}, "divider-all-regions"));
         var primaryMapValues = primaryClusterToRegionMap.values();
         var primaryMapValueObject = primaryMapValues.next().value;
@@ -4709,15 +4709,15 @@ var ClusterRegionSelector = function (_a) {
         var primaryClusterUuid = primaryMapValueObject.uuid;
         // Add Primary Zones and Nodes
         if (isNonEmptyString(primaryCluster)) {
-            renderedItems.push(jsx(MenuItem$1, __assign({ value: primaryClusterUuid, onClick: function (e) {
+            renderedItems.push(jsx(MenuItem$1, { value: primaryClusterUuid, onClick: function (e) {
                     onClusterRegionSelected(true, false, primaryClusterUuid, true);
-                }, className: classes.menuItem }, { children: primaryCluster }), primaryClusterUuid));
+                }, className: classes.menuItem, children: primaryCluster }, primaryClusterUuid));
         }
         if (isNonEmptyArray(primaryClusterRegions)) {
             primaryClusterRegions.forEach(function (region) {
-                renderedItems.push(jsxs(MenuItem$1, __assign({ value: region, onClick: function (e) {
+                renderedItems.push(jsxs(MenuItem$1, { value: region, onClick: function (e) {
                         onClusterRegionSelected(false, true, region, true);
-                    }, className: classes.regularText }, { children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), region] }), "primary-".concat(primaryClusterUuid, "-").concat(region)));
+                    }, className: classes.regularText, children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), region] }, "primary-".concat(primaryClusterUuid, "-").concat(region)));
             });
         }
         // Add Read Replica Zones and Nodes
@@ -4729,22 +4729,22 @@ var ClusterRegionSelector = function (_a) {
             var asyncClusterRegions = asyncMapValueObject.regions;
             var asyncClusterUuid_1 = asyncMapValueObject.uuid;
             if (isNonEmptyString(asyncCluster)) {
-                renderedItems.push(jsx(MenuItem$1, __assign({ value: asyncClusterUuid_1, onClick: function (e) {
+                renderedItems.push(jsx(MenuItem$1, { value: asyncClusterUuid_1, onClick: function (e) {
                         onClusterRegionSelected(true, false, asyncClusterUuid_1, true);
-                    } }, { children: asyncCluster }), asyncClusterUuid_1));
+                    }, children: asyncCluster }, asyncClusterUuid_1));
             }
             if (isNonEmptyArray(asyncClusterRegions)) {
                 asyncClusterRegions.forEach(function (region) {
-                    renderedItems.push(jsxs(MenuItem$1, __assign({ value: region, onClick: function (e) {
+                    renderedItems.push(jsxs(MenuItem$1, { value: region, onClick: function (e) {
                             onClusterRegionSelected(false, true, region, true);
-                        }, className: classes.regularText }, { children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), region] }), "async-".concat(asyncClusterUuid_1, "-").concat(region)));
+                        }, className: classes.regularText, children: [jsx("img", { className: classes.icon, src: TreeIcon, alt: "Indicator towards metric measure to use" }), region] }, "async-".concat(asyncClusterUuid_1, "-").concat(region)));
                 });
             }
         }
         return renderedItems;
     };
-    return (jsx(YBSelect, __assign({ className: clsx(classes.selectBox, classes.overrideMuiInput), dataTestId: "cluster-region-select", value: selectedItem }, { children: primaryClusterToRegionMap.size > 0 &&
-            renderClusterAndRegionItems(primaryClusterToRegionMap, asyncClusterToRegionMap) })));
+    return (jsx(YBSelect, { className: clsx(classes.selectBox, classes.overrideMuiInput), dataTestId: "cluster-region-select", value: selectedItem, children: primaryClusterToRegionMap.size > 0 &&
+            renderClusterAndRegionItems(primaryClusterToRegionMap, asyncClusterToRegionMap) }));
 };
 
 var YBCheckboxField = function (props) {
@@ -4760,7 +4760,7 @@ var ybaTheme = yba.ybaTheme;
  */
 var YBThemeWrapper = function (_a) {
     var children = _a.children, appName = _a.appName;
-    return (jsx(YBThemeProvider, __assign({ theme: appName === AppName.YBM ? coreTheme : ybaTheme }, { children: children })));
+    return (jsx(YBThemeProvider, { theme: appName === AppName.YBM ? coreTheme : ybaTheme, children: children }));
 };
 
 function _typeof$4(o) {
@@ -7886,7 +7886,10 @@ var getBreadcrumbCategoryLabel = function (anomalyData, anomalyCategory, isHisto
     else {
         suffix = ClusterLoadOverallTabs.ANOMALIES;
     }
-    if (anomalyData) {
+    // In case of Insights, we dont need to show any category label in front
+    // for example. if we have unused index, we will show Insights / Tablet Insights / index_name
+    // It should rather be Insights /  index_name
+    if (anomalyData && urlState.currentTab !== InsightsTabs.INSIGHTS) {
         if (anomalyCategory) {
             var categoryString = String(anomalyCategory);
             var capitalizedCategory = categoryString.charAt(0).toUpperCase() + categoryString.slice(1).toLowerCase();
@@ -7930,7 +7933,7 @@ var parseUrlState = function (appName) {
     var ybaTab = urlParams.get('tab');
     var currentTab = InsightsTabs.CLUSTER_LOAD;
     var clusterLoadSubTab = ClusterLoadSubTabs.OVERALL_LOAD;
-    var clusterLoadOverallSubTab = ClusterLoadOverallTabs.ANOMALIES;
+    var clusterLoadOverallSubTab = ClusterLoadOverallTabs.QUERIES;
     // Determine main tab
     if (path.includes("/".concat(URL_TAB_PATH.METRICS)) || ybaTab === URL_TAB_PATH.METRICS) {
         currentTab = InsightsTabs.METRICS;
@@ -7941,37 +7944,20 @@ var parseUrlState = function (appName) {
     else if (path.includes("/".concat(URL_TAB_PATH.CLUSTER_LOAD)) ||
         ybaTab === URL_TAB_PATH.CLUSTER_LOAD) {
         currentTab = InsightsTabs.CLUSTER_LOAD;
-        // Determine sub-tabs for Cluster Load
-        if (appName === AppName.YBA) {
-            var subTab = urlParams.get('subTab');
-            clusterLoadSubTab =
-                subTab === URL_TAB_PATH.CLUSTER_LOAD_DB
-                    ? ClusterLoadSubTabs.LOAD_BY_DATABASE
-                    : ClusterLoadSubTabs.OVERALL_LOAD;
-            // Parse overallSubTab from query parameter for YBA
-            if (clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD) {
-                var overallSubTab = urlParams.get('overallSubTab');
-                clusterLoadOverallSubTab =
-                    overallSubTab === URL_TAB_PATH.ANOMALIES
-                        ? ClusterLoadOverallTabs.ANOMALIES
-                        : ClusterLoadOverallTabs.QUERIES;
-            }
+        // Web app: parse from path
+        // eslint-disable-next-line no-lonely-if
+        if (path.includes("/".concat(URL_TAB_PATH.CLUSTER_LOAD_DB))) {
+            clusterLoadSubTab = ClusterLoadSubTabs.LOAD_BY_DATABASE;
         }
         else {
-            // Web app: parse from path
-            // eslint-disable-next-line no-lonely-if
-            if (path.includes("/".concat(URL_TAB_PATH.CLUSTER_LOAD_DB))) {
-                clusterLoadSubTab = ClusterLoadSubTabs.LOAD_BY_DATABASE;
-            }
-            else {
-                clusterLoadSubTab = ClusterLoadSubTabs.OVERALL_LOAD;
-                var isQueriesPath = path.includes("/".concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD, "/").concat(URL_TAB_PATH.QUERIES));
-                clusterLoadOverallSubTab = isQueriesPath
-                    ? ClusterLoadOverallTabs.QUERIES
-                    : ClusterLoadOverallTabs.ANOMALIES;
-            }
+            clusterLoadSubTab = ClusterLoadSubTabs.OVERALL_LOAD;
+            var isAnomaliesPath = path.includes("/".concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD, "/").concat(URL_TAB_PATH.ANOMALIES));
+            clusterLoadOverallSubTab = isAnomaliesPath
+                ? ClusterLoadOverallTabs.ANOMALIES
+                : ClusterLoadOverallTabs.QUERIES;
         }
     }
+    console.warn('clusterLoadOverallSubTab', clusterLoadOverallSubTab);
     return { currentTab: currentTab, clusterLoadSubTab: clusterLoadSubTab, clusterLoadOverallSubTab: clusterLoadOverallSubTab };
 };
 /**
@@ -7982,6 +7968,7 @@ var parseUrlState = function (appName) {
  * @returns The complete URL path with query string
  */
 var buildWebAppPath = function (tab, subTab, overallSubTab) {
+    console.warn('buildWebAppPath', tab, subTab, overallSubTab);
     var path = window.location.pathname;
     var urlParams = new URLSearchParams(window.location.search);
     var queryString = urlParams.toString();
@@ -8005,44 +7992,9 @@ var buildWebAppPath = function (tab, subTab, overallSubTab) {
             path = "".concat(path, "/").concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD, "/").concat(overallPath);
         }
     }
+    console.warn('PATH1122', path);
     return "".concat(path).concat(queryString ? "?".concat(queryString) : '');
 };
-/**
- * Build URL for YBA (query parameters)
- * @param tab - The current tab
- * @param subTab - The cluster load sub-tab (optional)
- * @param overallSubTab - The overall sub-tab for cluster load (optional)
- * @returns The complete URL with query parameters
- */
-var buildYbaUrl = function (tab, subTab, overallSubTab) {
-    var path = window.location.pathname;
-    var urlParams = new URLSearchParams(window.location.search);
-    if (tab === InsightsTabs.CLUSTER_LOAD) {
-        urlParams.set('tab', URL_TAB_PATH.CLUSTER_LOAD);
-        if (subTab !== undefined) {
-            urlParams.set('subTab', subTab === ClusterLoadSubTabs.LOAD_BY_DATABASE
-                ? URL_TAB_PATH.CLUSTER_LOAD_DB
-                : URL_TAB_PATH.OVERALL_LOAD);
-            // Set overallSubTab query parameter for YBA when subTab is OVERALL_LOAD
-            if (subTab === ClusterLoadSubTabs.OVERALL_LOAD && overallSubTab !== undefined) {
-                urlParams.set('overallSubTab', overallSubTab === ClusterLoadOverallTabs.QUERIES
-                    ? URL_TAB_PATH.QUERIES
-                    : URL_TAB_PATH.ANOMALIES);
-            }
-            else if (subTab === ClusterLoadSubTabs.LOAD_BY_DATABASE) {
-                // Remove overallSubTab when switching to LOAD_BY_DATABASE
-                urlParams.delete('overallSubTab');
-            }
-        }
-    }
-    else if (tab === InsightsTabs.METRICS) {
-        urlParams.set('tab', URL_TAB_PATH.METRICS);
-    }
-    else if (tab === InsightsTabs.INSIGHTS) {
-        urlParams.set('tab', URL_TAB_PATH.INSIGHTS);
-    }
-    return "".concat(path, "?").concat(urlParams.toString());
-};
 /**
  * Update URL based on app type
  * @param appName - The application name (YBA or Web)
@@ -8053,9 +8005,7 @@ var buildYbaUrl = function (tab, subTab, overallSubTab) {
  */
 var updateUrl = function (appName, tab, subTab, overallSubTab, usePushState) {
     if (usePushState === void 0) { usePushState = false; }
-    var newUrl = appName === AppName.YBA
-        ? buildYbaUrl(tab, subTab, overallSubTab)
-        : buildWebAppPath(tab, subTab, overallSubTab);
+    var newUrl = buildWebAppPath(tab, subTab, overallSubTab);
     var urlParams = new URLSearchParams(window.location.search);
     var queryString = urlParams.toString();
     var currentUrl = window.location.pathname + (queryString ? "?".concat(queryString) : '');
@@ -8074,9 +8024,10 @@ var updateUrl = function (appName, tab, subTab, overallSubTab, usePushState) {
  * @param tab - The current tab
  */
 var ensureCompletePath = function (appName, tab) {
-    if (appName === AppName.YBA || tab !== InsightsTabs.CLUSTER_LOAD) {
-        return;
-    }
+    // if (appName === AppName.YBA || tab !== InsightsTabs.CLUSTER_LOAD) {
+    //   return;
+    // }
+    console.warn('ensureCompletePath', appName, tab);
     var path = window.location.pathname;
     var urlParams = new URLSearchParams(window.location.search);
     var queryString = urlParams.toString();
@@ -8085,7 +8036,7 @@ var ensureCompletePath = function (appName, tab) {
         path.endsWith("/".concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD));
     if (needsCompletion) {
         var basePath = path.replace(new RegExp("/".concat(URL_TAB_PATH.CLUSTER_LOAD, "(/").concat(URL_TAB_PATH.OVERALL_LOAD, ")?$")), '');
-        var newPath = "".concat(basePath, "/").concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD, "/").concat(URL_TAB_PATH.ANOMALIES).concat(queryString ? "?".concat(queryString) : '');
+        var newPath = "".concat(basePath, "/").concat(URL_TAB_PATH.CLUSTER_LOAD, "/").concat(URL_TAB_PATH.OVERALL_LOAD, "/").concat(URL_TAB_PATH.QUERIES).concat(queryString ? "?".concat(queryString) : '');
         window.history.replaceState(null, '', newPath);
     }
 };
@@ -8096,6 +8047,7 @@ var ensureCompletePath = function (appName, tab) {
  */
 var buildPrimaryDashboardUrl = function (appName, isQueryViewFromAnomaly) {
     if (isQueryViewFromAnomaly === void 0) { isQueryViewFromAnomaly = false; }
+    console.warn('buildPrimaryDashboardUrl', appName);
     var currentUrl = window.location.href;
     var baseUrl = currentUrl.substring(0, currentUrl.lastIndexOf('/'));
     var urlParams = new URLSearchParams(window.location.search);
@@ -8145,6 +8097,7 @@ var buildPrimaryDashboardUrl = function (appName, isQueryViewFromAnomaly) {
  */
 var buildYbmUrl = function (isHistoricalQueryView, isQueryViewFromAnomalyView) {
     if (isQueryViewFromAnomalyView === void 0) { isQueryViewFromAnomalyView = false; }
+    console.warn('buildYbmUrl');
     var ybmCurrentUrl = new URL(window.location.href);
     if (isHistoricalQueryView) {
         // List of query parameters to remove
@@ -8190,7 +8143,7 @@ var buildYbmDrilldownUrl = function () {
  * @param onNavigateToUrl - Optional callback for React Router navigation (used in YBM)
  */
 var navigateToPrimaryDashboard = function (appName, isHistoricalQueryView, onSelectedIssue, onSelectedQuery, onNavigateToUrl) {
-    if (appName === AppName.YBM) {
+    if (appName === AppName.YBM || appName === AppName.YBA) {
         if (isHistoricalQueryView) {
             onSelectedQuery === null || onSelectedQuery === void 0 ? void 0 : onSelectedQuery(null);
             var ybmCurrentUrl = buildYbmUrl(true);
@@ -8230,8 +8183,7 @@ var navigateToPrimaryDashboard = function (appName, isHistoricalQueryView, onSel
  */
 var navigateToDrilldownView = function (appName, anomalyData, onSelectedIssue, onNavigateToUrl) {
     var _a, _b;
-    if (appName === AppName.YBM) {
-        // Select the anomaly issue
+    if (appName === AppName.YBM || appName === AppName.YBA) {
         onSelectedIssue === null || onSelectedIssue === void 0 ? void 0 : onSelectedIssue((_b = (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.uuid) !== null && _b !== void 0 ? _b : null);
         // Build the drilldown URL by removing query-specific path and parameters
         var drilldownUrl = buildYbmDrilldownUrl();
@@ -8287,12 +8239,12 @@ var MetadataHeader = function (_a) {
             e.stopPropagation();
         }
     };
-    return (jsx(Box$1, { children: isDrilldownView && showDetails && (jsx(Box$1, __assign({ className: clsx(helperClasses.headerMetadataBox, helperClasses.boxContainer, helperClasses.flexColumn), mt: 3 }, { children: !isHistoricalQueryView ? (jsx(Fragment, { children: anomalyData && (jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsxs(Box$1, __assign({ className: helperClasses.flexRow, width: "100%", justifyContent: 'space-between' }, { children: [jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: ANOMALY_TAG })), jsx(Box$1, __assign({ className: helperClasses.anomalyTypeTag }, { children: jsx("span", __assign({ className: helperClasses.anomalyTypeText }, { children: ANOMALY_TYPE_TO_NAME_MAP[(_p = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _p === void 0 ? void 0 : _p.type] })) }))] })), anomalyCategory !== AnomalyCategory.SQL && (jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: (_r = CATEGORY_HEADER_DATA_MAP[(_q = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _q === void 0 ? void 0 : _q.type]) === null || _r === void 0 ? void 0 : _r.title })), jsxs(Box$1, { children: [jsx(YBTooltip, __assign({ title: entityDisplayName || '', placement: "top", arrow: true }, { children: jsx("span", __assign({ className: helperClasses.regularMetadata }, { children: truncateEntityDisplayName(entityDisplayName, anomalyCategory, anomalyCategory === AnomalyCategory.SQL ? 40 : 30) })) })), (anomalyCategory === AnomalyCategory.NODE ||
-                                                    anomalyCategory === AnomalyCategory.APP) && (jsx(YBTooltip, __assign({ title: copied ? 'Copied' : 'Copy', open: copied ? true : undefined }, { children: jsx("img", { src: CopyIcon, alt: "Copy Icon", style: { marginLeft: '4px', cursor: 'pointer' }, onClick: function () {
+    return (jsx(Box$1, { children: isDrilldownView && showDetails && (jsx(Box$1, { className: clsx(helperClasses.headerMetadataBox, helperClasses.boxContainer, helperClasses.flexColumn), mt: 3, children: !isHistoricalQueryView ? (jsx(Fragment, { children: anomalyData && (jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsxs(Box$1, { className: helperClasses.flexRow, width: "100%", justifyContent: 'space-between', children: [jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: ANOMALY_TAG }), jsx(Box$1, { className: helperClasses.anomalyTypeTag, children: jsx("span", { className: helperClasses.anomalyTypeText, children: ANOMALY_TYPE_TO_NAME_MAP[(_p = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _p === void 0 ? void 0 : _p.type] }) })] }), anomalyCategory !== AnomalyCategory.SQL && (jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: (_r = CATEGORY_HEADER_DATA_MAP[(_q = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _q === void 0 ? void 0 : _q.type]) === null || _r === void 0 ? void 0 : _r.title }), jsxs(Box$1, { children: [jsx(YBTooltip, { title: entityDisplayName || '', placement: "top", arrow: true, children: jsx("span", { className: helperClasses.regularMetadata, children: truncateEntityDisplayName(entityDisplayName, anomalyCategory, anomalyCategory === AnomalyCategory.SQL ? 40 : 30) }) }), (anomalyCategory === AnomalyCategory.NODE ||
+                                                    anomalyCategory === AnomalyCategory.APP) && (jsx(YBTooltip, { title: copied ? 'Copied' : 'Copy', open: copied ? true : undefined, children: jsx("img", { src: CopyIcon, alt: "Copy Icon", style: { marginLeft: '4px', cursor: 'pointer' }, onClick: function () {
                                                             navigator.clipboard.writeText(entityDisplayName);
                                                             setCopied(true);
                                                             setTimeout(function () { return setCopied(false); }, 2000);
-                                                        } }) })))] })] }))), anomalyCategory === AnomalyCategory.SQL && (jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: DB_CAPS_TAG })), jsx(Box$1, { children: jsx("span", __assign({ className: helperClasses.regularMetadata }, { children: (_s = universeQueryStatsData === null || universeQueryStatsData === void 0 ? void 0 : universeQueryStatsData[0]) === null || _s === void 0 ? void 0 : _s.namespaceName })) })] }))), anomalyCategory === AnomalyCategory.SQL && (jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: QUERY_TYPE_TAG })), jsx(Box$1, { children: jsx("span", __assign({ className: helperClasses.regularMetadata }, { children: (_t = universeQueryStatsData === null || universeQueryStatsData === void 0 ? void 0 : universeQueryStatsData[0]) === null || _t === void 0 ? void 0 : _t.queryType })) })] }))), anomalyCategory === AnomalyCategory.DB && isAnomalyTabletType && (jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: DB_CAPS_TAG })), jsx(Box$1, { children: jsx("span", __assign({ className: helperClasses.regularMetadata }, { children: getSqlAnomalyGroupParams(anomalyData).dbName })) })] }))), jsxs(Box$1, __assign({ className: helperClasses.flexColumn }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: anomalyCategory === AnomalyCategory.DB
+                                                        } }) }))] })] })), anomalyCategory === AnomalyCategory.SQL && (jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: DB_CAPS_TAG }), jsx(Box$1, { children: jsx("span", { className: helperClasses.regularMetadata, children: (_s = universeQueryStatsData === null || universeQueryStatsData === void 0 ? void 0 : universeQueryStatsData[0]) === null || _s === void 0 ? void 0 : _s.namespaceName }) })] })), anomalyCategory === AnomalyCategory.SQL && (jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: QUERY_TYPE_TAG }), jsx(Box$1, { children: jsx("span", { className: helperClasses.regularMetadata, children: (_t = universeQueryStatsData === null || universeQueryStatsData === void 0 ? void 0 : universeQueryStatsData[0]) === null || _t === void 0 ? void 0 : _t.queryType }) })] })), anomalyCategory === AnomalyCategory.DB && isAnomalyTabletType && (jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: DB_CAPS_TAG }), jsx(Box$1, { children: jsx("span", { className: helperClasses.regularMetadata, children: getSqlAnomalyGroupParams(anomalyData).dbName }) })] })), jsxs(Box$1, { className: helperClasses.flexColumn, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: anomalyCategory === AnomalyCategory.DB
                                                 ? typeof isAnomalyTabletType !== 'undefined'
                                                     ? isAnomalyTabletType
                                                         ? TABLET_ID_TAG
@@ -8301,16 +8253,16 @@ var MetadataHeader = function (_a) {
                                                 : anomalyCategory === AnomalyCategory.NODE ||
                                                     anomalyCategory === AnomalyCategory.APP
                                                     ? REGION_ZONE_TAG
-                                                    : null })), jsx(Box$1, { children: jsx("span", __assign({ className: helperClasses.regularMetadata }, { children: anomalyCategory === AnomalyCategory.DB ? (isAnomalyTabletType ? ((_x = (_w = (_v = (_u = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _u === void 0 ? void 0 : _u.mainGraphs) === null || _v === void 0 ? void 0 : _v[0].filters) === null || _w === void 0 ? void 0 : _w.tabletId) === null || _x === void 0 ? void 0 : _x[0]) : ((_1 = (_0 = (_z = (_y = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _y === void 0 ? void 0 : _y.mainGraphs) === null || _z === void 0 ? void 0 : _z[0].filters) === null || _0 === void 0 ? void 0 : _0.tableName) === null || _1 === void 0 ? void 0 : _1[0])) : anomalyCategory === AnomalyCategory.NODE ||
-                                                    anomalyCategory === AnomalyCategory.APP ? (jsx(Fragment, { children: "".concat(regionName === null || regionName === void 0 ? void 0 : regionName.toUpperCase(), " (").concat(zoneName, ")") })) : null })) })] })), jsx(Box$1, { children: jsx(YBButton, __assign({ size: "small", variant: "ghost", onClick: function () { return onShowDetails(false); }, dataTestId: "BreadCrumbsAndMetadataHeader-HideDetails" }, { children: jsx("span", __assign({ style: {
+                                                    : null }), jsx(Box$1, { children: jsx("span", { className: helperClasses.regularMetadata, children: anomalyCategory === AnomalyCategory.DB ? (isAnomalyTabletType ? ((_x = (_w = (_v = (_u = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _u === void 0 ? void 0 : _u.mainGraphs) === null || _v === void 0 ? void 0 : _v[0].filters) === null || _w === void 0 ? void 0 : _w.tabletId) === null || _x === void 0 ? void 0 : _x[0]) : ((_1 = (_0 = (_z = (_y = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _y === void 0 ? void 0 : _y.mainGraphs) === null || _z === void 0 ? void 0 : _z[0].filters) === null || _0 === void 0 ? void 0 : _0.tableName) === null || _1 === void 0 ? void 0 : _1[0])) : anomalyCategory === AnomalyCategory.NODE ||
+                                                    anomalyCategory === AnomalyCategory.APP ? (jsx(Fragment, { children: "".concat(regionName === null || regionName === void 0 ? void 0 : regionName.toUpperCase(), " (").concat(zoneName, ")") })) : null }) })] }), jsx(Box$1, { children: jsx(YBButton, { size: "small", variant: "ghost", onClick: function () { return onShowDetails(false); }, dataTestId: "BreadCrumbsAndMetadataHeader-HideDetails", children: jsx("span", { style: {
                                                 color: '#2B59C3',
                                                 fontSize: '11.5px',
                                                 fontStyle: 'semibold'
-                                            } }, { children: 'Hide Details' })) })) })] })), anomalyCategory === AnomalyCategory.SQL && (jsx(Box$1, __assign({ mt: 2 }, { children: jsx(Box$1, __assign({ onClick: handleCodeBlockClick, width: "100%", style: { minWidth: 0, overflow: 'hidden', display: 'grid' } }, { children: jsx(YBCodeBlock, { lang: "sql", showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, text: (_2 = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _2 === void 0 ? void 0 : _2.entityDisplayName, containerClassName: codeBlockClasses.queryContainerCodeInBreadcrumbs }, "TableHelperQueries-query") })) })))] }))) })) : (jsxs(Box$1, { children: [jsxs(Box$1, __assign({ className: helperClasses.flexRow, width: "100%" }, { children: [jsxs(Box$1, __assign({ className: helperClasses.flexColumn, alignItems: "flex-start", flex: 1 }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: DB_CAPS_TAG })), jsx(Box$1, { children: queryObject === null || queryObject === void 0 ? void 0 : queryObject.namespaceName })] })), jsxs(Box$1, __assign({ className: helperClasses.flexColumn, alignItems: "flex-start", flex: 1 }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerTitle }, { children: QUERY_TYPE_TAG })), jsx(Box$1, { children: queryObject === null || queryObject === void 0 ? void 0 : queryObject.queryType })] })), jsx(Box$1, __assign({ className: helperClasses.flexColumn, alignItems: "flex-start", ml: "auto" }, { children: jsx(YBButton, __assign({ size: "small", variant: "ghost", onClick: function () { return onShowDetails(false); }, dataTestId: "BreadCrumbsAndMetadataHeader-HideDetails" }, { children: jsx("span", __assign({ style: {
+                                            }, children: 'Hide Details' }) }) })] }), anomalyCategory === AnomalyCategory.SQL && (jsx(Box$1, { mt: 2, children: jsx(Box$1, { onClick: handleCodeBlockClick, width: "100%", style: { minWidth: 0, overflow: 'hidden', display: 'grid' }, children: jsx(YBCodeBlock, { lang: "sql", showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, text: (_2 = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _2 === void 0 ? void 0 : _2.entityDisplayName, containerClassName: codeBlockClasses.queryContainerCodeInBreadcrumbs }, "TableHelperQueries-query") }) }))] })) })) : (jsxs(Box$1, { children: [jsxs(Box$1, { className: helperClasses.flexRow, width: "100%", children: [jsxs(Box$1, { className: helperClasses.flexColumn, alignItems: "flex-start", flex: 1, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: DB_CAPS_TAG }), jsx(Box$1, { children: queryObject === null || queryObject === void 0 ? void 0 : queryObject.namespaceName })] }), jsxs(Box$1, { className: helperClasses.flexColumn, alignItems: "flex-start", flex: 1, children: [jsx(Box$1, { className: helperClasses.headerTitle, children: QUERY_TYPE_TAG }), jsx(Box$1, { children: queryObject === null || queryObject === void 0 ? void 0 : queryObject.queryType })] }), jsx(Box$1, { className: helperClasses.flexColumn, alignItems: "flex-start", ml: "auto", children: jsx(YBButton, { size: "small", variant: "ghost", onClick: function () { return onShowDetails(false); }, dataTestId: "BreadCrumbsAndMetadataHeader-HideDetails", children: jsx("span", { style: {
                                             color: '#2B59C3',
                                             fontSize: '11.5px',
                                             fontStyle: 'semibold'
-                                        } }, { children: 'Hide Details' })) })) }))] })), jsx(Box$1, __assign({ className: helperClasses.flexColumn, mt: 2 }, { children: jsx(Box$1, __assign({ onClick: handleCodeBlockClick, width: "100%", style: { minWidth: 0, overflow: 'hidden', display: 'grid' } }, { children: jsx(YBCodeBlock, { lang: "sql", showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, text: (_3 = queryObject === null || queryObject === void 0 ? void 0 : queryObject.query) !== null && _3 !== void 0 ? _3 : '', containerClassName: codeBlockClasses.queryContainerCodeInBreadcrumbs }, "TableHelperQueries-query") })) }))] })) }))) }));
+                                        }, children: 'Hide Details' }) }) })] }), jsx(Box$1, { className: helperClasses.flexColumn, mt: 2, children: jsx(Box$1, { onClick: handleCodeBlockClick, width: "100%", style: { minWidth: 0, overflow: 'hidden', display: 'grid' }, children: jsx(YBCodeBlock, { lang: "sql", showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, text: (_3 = queryObject === null || queryObject === void 0 ? void 0 : queryObject.query) !== null && _3 !== void 0 ? _3 : '', containerClassName: codeBlockClasses.queryContainerCodeInBreadcrumbs }, "TableHelperQueries-query") }) })] })) })) }));
 };
 
 var img$f = "data:image/svg+xml,%3csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.66667 3.66667H1M4.33333 1H1M12.3333 6.33333H1M9.66667 9H1' stroke='%232B59C3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -8321,7 +8273,7 @@ var BreadCrumbsHeader = function (_a) {
     var appName = _a.appName, anomalyData = _a.anomalyData, showDetails = _a.showDetails, _d = _a.isDrilldownView, isDrilldownView = _d === void 0 ? true : _d, isHistoricalQueryView = _a.isHistoricalQueryView, queryObject = _a.queryObject, onSelectedQuery = _a.onSelectedQuery, onSelectedIssue = _a.onSelectedIssue, onShowDetails = _a.onShowDetails, onNavigateToUrl = _a.onNavigateToUrl;
     var helperClasses = useHelperStyles();
     // const [showDetails, setShowDetails] = useState(true);
-    var urlState = parseUrlState(appName);
+    var urlState = parseUrlState();
     var getPrimaryBreadcrumbLabel = function () {
         if (urlState.currentTab === InsightsTabs.CLUSTER_LOAD) {
             var subTabLabel = urlState.clusterLoadSubTab;
@@ -8385,10 +8337,12 @@ var BreadCrumbsHeader = function (_a) {
                 entityDisplayName: entityDisplayName,
                 queryText: queryObject === null || queryObject === void 0 ? void 0 : queryObject.query
             });
-            items.push({
-                label: categoryLabel,
-                onClick: handleNavigateToPrimaryDashboard
-            });
+            if (urlState.currentTab !== InsightsTabs.INSIGHTS) {
+                items.push({
+                    label: categoryLabel,
+                    onClick: handleNavigateToPrimaryDashboard
+                });
+            }
             if (entityLabel) {
                 items.push({
                     label: entityLabel
@@ -8397,7 +8351,7 @@ var BreadCrumbsHeader = function (_a) {
         }
         return items;
     };
-    return (jsx(Box$1, { children: jsxs(Box$1, __assign({ display: 'flex', mb: 3, mt: 1 }, { children: [jsx(Box$1, __assign({ className: helperClasses.ybBreadcrumbWrapper }, { children: isDrilldownView && (jsx(YBBreadcrumb, { size: "small", separator: "/", maxLabelWidth: 600, items: getBreadcrumbItems(), dataTestId: "GenericHeader-Breadcrumb" })) })), jsx(Box$1, __assign({ ml: 2, style: { marginTop: '-2px' } }, { children: !showDetails && (jsx(YBButton, __assign({ size: "small", variant: "secondary", onClick: function () { return onShowDetails(true); }, dataTestId: "BreadCrumbsAndMetadataHeader-ShowDetails", startIcon: jsx("img", { src: MaximizeIcon, alt: "Maximize Icon" }) }, { children: 'Show Details' }))) }))] })) }));
+    return (jsx(Box$1, { children: jsxs(Box$1, { display: 'flex', mb: 3, mt: 1, children: [jsx(Box$1, { className: helperClasses.ybBreadcrumbWrapper, children: isDrilldownView && (jsx(YBBreadcrumb, { size: "small", separator: "/", maxLabelWidth: 600, items: getBreadcrumbItems(), dataTestId: "GenericHeader-Breadcrumb" })) }), jsx(Box$1, { ml: 2, style: { marginTop: '-2px' }, children: !showDetails && (jsx(YBButton, { size: "small", variant: "secondary", onClick: function () { return onShowDetails(true); }, dataTestId: "BreadCrumbsAndMetadataHeader-ShowDetails", startIcon: jsx("img", { src: MaximizeIcon, alt: "Maximize Icon" }), children: 'Show Details' })) })] }) }));
 };
 
 var img$e = "data:image/svg+xml,%3csvg width='1' height='16' viewBox='0 0 1 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0.5' y1='2.18557e-08' x2='0.499999' y2='16' stroke='%23B7C3CB'/%3e%3c/svg%3e";
@@ -8458,7 +8412,7 @@ var GenericHeader = function (_a) {
             setAsyncZoneToNodesMap(asyncZoneMapping);
         }
     }, [region, cluster]);
-    return (jsxs(Box$1, __assign({ className: clsx(helperClasses.flexColumn) }, { children: [jsx(Box$1, { children: jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: "center" }, { children: [showMetricAggregator && (jsx(Box$1, { children: jsx(ClusterRegionSelector, { selectedItem: clusterRegionItem, onClusterRegionSelected: onClusterRegionSelected, primaryClusterToRegionMap: primaryClusterMapping, asyncClusterToRegionMap: asyncClusterMapping }) })), showMetricAggregator && (jsx(Box$1, { children: jsx(ZoneNodeSelector, { selectedItem: zoneNodeItem, onZoneNodeSelected: onZoneNodeSelected, primaryZoneToNodesMap: primaryZoneToNodesMap, asyncZoneToNodesMap: asyncZoneToNodesMap }) }))] })) }), showSplitSelector && (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", className: helperClasses.metricSplitSelectorBox }, { children: [jsx("img", { src: TreeIcon, alt: "Tree Icon" }), jsx(Box$1, __assign({ display: "flex", flexDirection: "row" }, { children: jsx(MetricSplitSelector, { onSplitTypeSelected: onSplitTypeSelected, metricSplitSelectors: !isDrilldownView ? metricSplitSelectors : otherSplitSelectors, anomalyData: anomalyData }) })), metricMeasure !== MetricMeasure.OVERALL && (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row" }, { children: [jsx("img", { alt: "Divider", src: DividerIcon, className: helperClasses.dividerStyle }), jsx(OutlierSelector, { outlierType: outlierType, metricOutlierSelectors: metricOutlierSelectors, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, selectedNumNodes: numNodes, showNumNodesInput: false, showNumNodesSelector: true, metricMeasure: metricMeasure })] })))] })))] })));
+    return (jsxs(Box$1, { className: clsx(helperClasses.flexColumn), children: [jsx(Box$1, { children: jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: "center", children: [showMetricAggregator && (jsx(Box$1, { children: jsx(ClusterRegionSelector, { selectedItem: clusterRegionItem, onClusterRegionSelected: onClusterRegionSelected, primaryClusterToRegionMap: primaryClusterMapping, asyncClusterToRegionMap: asyncClusterMapping }) })), showMetricAggregator && (jsx(Box$1, { children: jsx(ZoneNodeSelector, { selectedItem: zoneNodeItem, onZoneNodeSelected: onZoneNodeSelected, primaryZoneToNodesMap: primaryZoneToNodesMap, asyncZoneToNodesMap: asyncZoneToNodesMap }) }))] }) }), showSplitSelector && (jsxs(Box$1, { display: "flex", flexDirection: "row", className: helperClasses.metricSplitSelectorBox, children: [jsx("img", { src: TreeIcon, alt: "Tree Icon" }), jsx(Box$1, { display: "flex", flexDirection: "row", children: jsx(MetricSplitSelector, { onSplitTypeSelected: onSplitTypeSelected, metricSplitSelectors: !isDrilldownView ? metricSplitSelectors : otherSplitSelectors, anomalyData: anomalyData }) }), metricMeasure !== MetricMeasure.OVERALL && (jsxs(Box$1, { display: "flex", flexDirection: "row", children: [jsx("img", { alt: "Divider", src: DividerIcon, className: helperClasses.dividerStyle }), jsx(OutlierSelector, { outlierType: outlierType, metricOutlierSelectors: metricOutlierSelectors, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, selectedNumNodes: numNodes, showNumNodesInput: false, showNumNodesSelector: true, metricMeasure: metricMeasure })] }))] }))] }));
 };
 
 function getDefaultExportFromCjs (x) {
@@ -12608,34 +12562,31 @@ var DateSelectorHeader = function (_a) {
             if (tab === InsightsTabs.METRICS) {
                 return 'Advanced Metrics';
             }
-            else if (tab === InsightsTabs.INSIGHTS) {
-                return 'Advanced Insights';
-            }
         }
         if (tab === InsightsTabs.CLUSTER_LOAD && clusterLoadSubTab) {
             return clusterLoadSubTab;
         }
         return tab;
     };
-    return (jsx(Box, { children: jsxs(Box, __assign({ display: "flex", flexDirection: "row", alignItems: "center", mt: isDrilldownView ? 2 : 0 }, { children: [appName === AppName.YBM &&
+    return (jsx(Box, { children: jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", mt: isDrilldownView ? 2 : 0, children: [appName === AppName.YBM &&
                     currentTab &&
                     (currentTab === InsightsTabs.CLUSTER_LOAD ||
                         currentTab === InsightsTabs.METRICS ||
-                        currentTab === InsightsTabs.INSIGHTS) && (jsx(Typography, __assign({ variant: "h5" }, { children: jsx("span", __assign({ className: clsx(helperClasses.breadCrumbText) }, { children: getViewTitle(currentTab) })) }))), jsxs(Box, __assign({ display: "flex", ml: 'auto', alignItems: 'flex-end' }, { children: [filterDuration === TIME_FILTER_VALUES.CUSTOM && (jsxs(Fragment, { children: [jsx(Box, __assign({ mt: 0.5, mr: 2 }, { children: jsx(YBDatePicker, { className: helperClasses.dateTimePicker, format: YBDatePickerDisplayFormat, value: previousDateTime, onChange: onStartDateChange, calendar: {
+                        currentTab === InsightsTabs.INSIGHTS) && (jsx(Typography, { variant: "h5", children: jsx("span", { className: clsx(helperClasses.breadCrumbText), children: getViewTitle(currentTab) }) })), jsxs(Box, { display: "flex", ml: 'auto', alignItems: 'flex-end', children: [filterDuration === TIME_FILTER_VALUES.CUSTOM && (jsxs(Fragment, { children: [jsx(Box, { mt: 0.5, mr: 2, children: jsx(YBDatePicker, { className: helperClasses.dateTimePicker, format: YBDatePickerDisplayFormat, value: previousDateTime, onChange: onStartDateChange, calendar: {
                                             showTimeSelector: true
                                         }, validation: {
                                             maxDate: currentDateTime
-                                        } }) })), jsx(Box, __assign({ mt: 0.5, mr: 2 }, { children: jsx(YBDatePicker, { className: helperClasses.dateTimePicker, format: YBDatePickerDisplayFormat, value: currentDateTime, defaultDateTimeValue: currentDateTime, onChange: onEndDateChange, errorMsg: datetimeError, calendar: {
+                                        } }) }), jsx(Box, { mt: 0.5, mr: 2, children: jsx(YBDatePicker, { className: helperClasses.dateTimePicker, format: YBDatePickerDisplayFormat, value: currentDateTime, defaultDateTimeValue: currentDateTime, onChange: onEndDateChange, errorMsg: datetimeError, calendar: {
                                             showTimeSelector: true
                                         }, validation: {
                                             minDate: previousDateTime
-                                        } }) }))] })), jsx(YBSelect, __assign({ className: clsx(helperClasses.ybSelectBox, helperClasses.ybOverrideMuiInput), dataTestId: "GenericHeaderTimeFilterSelect", value: filterDuration }, { children: ANOMALY_FILTER_DURATION_OPTIONS.map(function (duration) { return (jsx(MenuItem, __assign({ value: duration.value, onClick: function () {
+                                        } }) })] })), jsx(YBSelect, { className: clsx(helperClasses.ybSelectBox, helperClasses.ybOverrideMuiInput), dataTestId: "GenericHeaderTimeFilterSelect", value: filterDuration, children: ANOMALY_FILTER_DURATION_OPTIONS.map(function (duration) { return (jsx(MenuItem, { value: duration.value, onClick: function () {
                                     onSelectedFilterDuration(duration.value);
                                 }, className: clsx(helperClasses.regularText), disabled: appName === AppName.YBM &&
                                     isTopKMetricsView &&
                                     duration.value !== TIME_FILTER_VALUES.ONE_HOUR &&
                                     duration.value !== TIME_FILTER_VALUES.SIX_HOURS &&
-                                    metricMeasure === MetricMeasure.OUTLIER_TABLES }, { children: duration.label }), "duration-".concat(duration.label))); }) })), currentTab !== InsightsTabs.METRICS && (jsx(YBButton, __assign({ style: { marginLeft: '8px' }, variant: 'secondary', dataTestId: "GenericHeader-RefreshButton", startIcon: jsx("img", { src: RefreshIcon, alt: "Refresh Icon" }), size: 'medium', onClick: function () { return onRefresh(); } }, { children: 'Refresh' })))] }))] })) }));
+                                    metricMeasure === MetricMeasure.OUTLIER_TABLES, children: duration.label }, "duration-".concat(duration.label))); }) }), currentTab !== InsightsTabs.METRICS && (jsx(YBButton, { style: { marginLeft: '8px' }, variant: 'secondary', dataTestId: "GenericHeader-RefreshButton", startIcon: jsx("img", { src: RefreshIcon, alt: "Refresh Icon" }), size: 'medium', onClick: function () { return onRefresh(); }, children: 'Refresh' }))] })] }) }));
 };
 
 var Browser = (function () {
@@ -27408,55 +27359,55 @@ registerShape('bezierCurve', BezierCurve$1);
 registerShape('arc', Arc$1);
 
 var graphic = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    updateProps: updateProps$1,
-    initProps: initProps,
-    removeElement: removeElement,
-    removeElementWithFadeOut: removeElementWithFadeOut,
-    isElementRemoved: isElementRemoved,
-    extendShape: extendShape,
-    extendPath: extendPath,
-    registerShape: registerShape,
-    getShapeClass: getShapeClass,
-    makePath: makePath,
-    makeImage: makeImage,
-    mergePath: mergePath,
-    resizePath: resizePath,
-    subPixelOptimizeLine: subPixelOptimizeLine,
-    subPixelOptimizeRect: subPixelOptimizeRect,
-    subPixelOptimize: subPixelOptimize,
-    getTransform: getTransform$1,
-    applyTransform: applyTransform,
-    transformDirection: transformDirection,
-    groupTransition: groupTransition,
-    clipPointsByRect: clipPointsByRect,
-    clipRectByRect: clipRectByRect,
-    createIcon: createIcon,
-    linePolygonIntersect: linePolygonIntersect,
-    lineLineIntersect: lineLineIntersect,
-    setTooltipConfig: setTooltipConfig,
-    traverseElements: traverseElements,
-    Group: Group$3,
-    Image: ZRImage$1,
-    Text: ZRText$1,
-    Circle: Circle$1,
-    Ellipse: Ellipse$1,
-    Sector: Sector$1,
-    Ring: Ring$1,
-    Polygon: Polygon$1,
-    Polyline: Polyline$1,
-    Rect: Rect$2,
-    Line: Line$1,
-    BezierCurve: BezierCurve$1,
-    Arc: Arc$1,
-    IncrementalDisplayable: IncrementalDisplayable$1,
-    CompoundPath: CompoundPath$1,
-    LinearGradient: LinearGradient$1,
-    RadialGradient: RadialGradient$1,
-    BoundingRect: BoundingRect$1,
-    OrientedBoundingRect: OrientedBoundingRect$1,
-    Point: Point$1,
-    Path: Path$1
+	__proto__: null,
+	updateProps: updateProps$1,
+	initProps: initProps,
+	removeElement: removeElement,
+	removeElementWithFadeOut: removeElementWithFadeOut,
+	isElementRemoved: isElementRemoved,
+	extendShape: extendShape,
+	extendPath: extendPath,
+	registerShape: registerShape,
+	getShapeClass: getShapeClass,
+	makePath: makePath,
+	makeImage: makeImage,
+	mergePath: mergePath,
+	resizePath: resizePath,
+	subPixelOptimizeLine: subPixelOptimizeLine,
+	subPixelOptimizeRect: subPixelOptimizeRect,
+	subPixelOptimize: subPixelOptimize,
+	getTransform: getTransform$1,
+	applyTransform: applyTransform,
+	transformDirection: transformDirection,
+	groupTransition: groupTransition,
+	clipPointsByRect: clipPointsByRect,
+	clipRectByRect: clipRectByRect,
+	createIcon: createIcon,
+	linePolygonIntersect: linePolygonIntersect,
+	lineLineIntersect: lineLineIntersect,
+	setTooltipConfig: setTooltipConfig,
+	traverseElements: traverseElements,
+	Group: Group$3,
+	Image: ZRImage$1,
+	Text: ZRText$1,
+	Circle: Circle$1,
+	Ellipse: Ellipse$1,
+	Sector: Sector$1,
+	Ring: Ring$1,
+	Polygon: Polygon$1,
+	Polyline: Polyline$1,
+	Rect: Rect$2,
+	Line: Line$1,
+	BezierCurve: BezierCurve$1,
+	Arc: Arc$1,
+	IncrementalDisplayable: IncrementalDisplayable$1,
+	CompoundPath: CompoundPath$1,
+	LinearGradient: LinearGradient$1,
+	RadialGradient: RadialGradient$1,
+	BoundingRect: BoundingRect$1,
+	OrientedBoundingRect: OrientedBoundingRect$1,
+	Point: Point$1,
+	Path: Path$1
 });
 
 var EMPTY_OBJ = {};
@@ -71734,7 +71685,7 @@ var GraphView = React__default.memo(function (_a) {
             // Creates the tooltip when hovering over the chart
             tooltip: {
                 trigger: 'axis',
-                confine: true,
+                confine: true, // Ensures tooltip stays within chart area
                 axisPointer: {
                     // Type 'cross' creates a vertical line across the chart
                     // Type 'shadow' creates a shaded area
@@ -71796,15 +71747,15 @@ var GraphView = React__default.memo(function (_a) {
             },
             xAxis: {
                 type: 'time',
-                boundaryGap: false,
-                splitNumber: 6,
+                boundaryGap: false, // line chart => no gap
+                splitNumber: 6, // try to keep ~5 ticks
                 axisLabel: {
-                    color: '#6D7C88',
+                    color: '#6D7C88', // Use a dark color for better contrast
                     textStyle: {
-                        fontFamily: METRIC_FONT,
+                        fontFamily: METRIC_FONT, // or your preferred font
                         fontSize: 11.5 // set desired font size
                     },
-                    interval: 'auto',
+                    interval: 'auto', // skip labels if needed
                     formatter: function (value) {
                         var date = new Date(value);
                         var diffDays = getDiffDays(dateTimeRange.startDateTime, dateTimeRange.endDateTime);
@@ -71834,9 +71785,9 @@ var GraphView = React__default.memo(function (_a) {
             yAxis: {
                 type: 'value',
                 axisLabel: {
-                    color: '#6D7C88',
+                    color: '#6D7C88', // Use a dark color for better contrast
                     textStyle: {
-                        fontFamily: METRIC_FONT,
+                        fontFamily: METRIC_FONT, // or your preferred font
                         fontSize: 11.5 // set desired font size
                     },
                     // Sometimes the y-axis values can be large, so we format them to not show decimal places
@@ -71867,7 +71818,7 @@ var GraphView = React__default.memo(function (_a) {
                 show: false // Hide toolbox UI but keep brush functionality
             },
             brush: {
-                toolbox: ['rect', 'polygon'],
+                toolbox: ['rect', 'polygon'], // enable rectangular selection brush (box select)
                 xAxisIndex: 0,
                 yAxisIndex: 0,
                 brushType: 'rect',
@@ -72132,43 +72083,43 @@ var GraphView = React__default.memo(function (_a) {
             chartInstanceRef.current.setOption(newOption, true);
         }
     };
-    return (jsxs(Box$1, __assign({ id: metricKey, onClick: function (e) { return e.stopPropagation(); }, className: classes.metricPanel }, { children: [jsxs("span", __assign({ className: classes.groupByContainer }, { children: [((_b = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _b === void 0 ? void 0 : _b.type) === ASH && !isRecommendationGraph && (jsx(Box$1, __assign({ mr: 0.5 }, { children: jsx(YBLabel, { children: 'Show' }) }))), ((_c = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _c === void 0 ? void 0 : _c.type) === ASH &&
+    return (jsxs(Box$1, { id: metricKey, onClick: function (e) { return e.stopPropagation(); }, className: classes.metricPanel, children: [jsxs("span", { className: classes.groupByContainer, children: [((_b = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _b === void 0 ? void 0 : _b.type) === ASH && !isRecommendationGraph && (jsx(Box$1, { mr: 0.5, children: jsx(YBLabel, { children: 'Show' }) })), ((_c = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _c === void 0 ? void 0 : _c.type) === ASH &&
                         (metricMeasure === MetricMeasure.OUTLIER ||
                             metricMeasure === MetricMeasure.OUTLIER_TABLES ||
                             metricMeasure === MetricMeasure.OUTLIER_DB ||
                             isHistoricalQueryView) &&
-                        isNonEmptyArray(groupByOperations) && (jsx(Box$1, __assign({ ml: 1, mr: 1 }, { children: jsx(YBSelect, __assign({ value: selectedGroupByOperation, className: classes.overrideMuiInput, menuProps: {
+                        isNonEmptyArray(groupByOperations) && (jsx(Box$1, { ml: 1, mr: 1, children: jsx(YBSelect, { value: selectedGroupByOperation, className: classes.overrideMuiInput, menuProps: {
                                 PaperProps: {
                                     style: {
                                         minHeight: '50px',
                                         maxHeight: '250px'
                                     }
                                 }
-                            }, dataTestId: "GraphView-GroupBySelect" }, { children: groupByOperations === null || groupByOperations === void 0 ? void 0 : groupByOperations.map(function (groupByOperation, operationIdx) {
+                            }, dataTestId: "GraphView-GroupBySelect", children: groupByOperations === null || groupByOperations === void 0 ? void 0 : groupByOperations.map(function (groupByOperation, operationIdx) {
                                 var _a;
-                                return (jsx(MenuItem$1, __assign({ value: groupByOperation, onClick: function (event) {
+                                return (jsx(MenuItem$1, { value: groupByOperation, onClick: function (event) {
                                         loadDataByGroupByOperation(groupByOperation);
                                         event.stopPropagation();
-                                    } }, { children: (_a = GROUP_BY_OPERATIONS_LABELS[groupByOperation]) !== null && _a !== void 0 ? _a : groupByOperation }), operationIdx));
-                            }) })) }))), isNonEmptyArray(metricOperationsDisplayed) &&
-                        (((_d = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _d === void 0 ? void 0 : _d.type) === ASH || (metricOperationsDisplayed === null || metricOperationsDisplayed === void 0 ? void 0 : metricOperationsDisplayed.length) > 1) && (jsx(Box$1, __assign({ mr: 2 }, { children: jsx(YBSelect, __assign({ value: selectedMetricOperation, className: classes.overrideMuiInput, dataTestId: "GraphView-MetricOperationSelect", menuProps: {
+                                    }, children: (_a = GROUP_BY_OPERATIONS_LABELS[groupByOperation]) !== null && _a !== void 0 ? _a : groupByOperation }, operationIdx));
+                            }) }) })), isNonEmptyArray(metricOperationsDisplayed) &&
+                        (((_d = metricData === null || metricData === void 0 ? void 0 : metricData.layout) === null || _d === void 0 ? void 0 : _d.type) === ASH || (metricOperationsDisplayed === null || metricOperationsDisplayed === void 0 ? void 0 : metricOperationsDisplayed.length) > 1) && (jsx(Box$1, { mr: 2, children: jsx(YBSelect, { value: selectedMetricOperation, className: classes.overrideMuiInput, dataTestId: "GraphView-MetricOperationSelect", menuProps: {
                                 PaperProps: {
                                     style: {
                                         minHeight: '50px',
                                         maxHeight: '250px'
                                     }
                                 }
-                            } }, { children: metricOperationsDisplayed === null || metricOperationsDisplayed === void 0 ? void 0 : metricOperationsDisplayed.map(function (operation, idx) { return (jsx(MenuItem$1, __assign({ value: operation, onClick: function (event) {
+                            }, children: metricOperationsDisplayed === null || metricOperationsDisplayed === void 0 ? void 0 : metricOperationsDisplayed.map(function (operation, idx) { return (jsx(MenuItem$1, { value: operation, onClick: function (event) {
                                     loadDataByMetricOperation(operation);
                                     event.stopPropagation();
-                                } }, { children: operation }), "".concat(operation, "-").concat(idx))); }) })) })))] })), jsx("div", { ref: chartRef, id: chartId, style: {
+                                }, children: operation }, "".concat(operation, "-").concat(idx))); }) }) }))] }), jsx("div", { ref: chartRef, id: chartId, style: {
                     overflow: 'hidden',
                     position: 'relative',
                     zIndex: 1,
                     minHeight: appName === AppName.WEB ? DEFAULT_HEIGHT : DEFAULT_HEIGHT_YBM,
-                    width: '100%',
+                    width: '100%', // fill the grid cell exactly
                     minWidth: 0 // prevent overflow inside the cell
-                } })] })));
+                } })] }));
 });
 
 var axios$3 = {exports: {}};
@@ -77261,9 +77212,9 @@ var AnomalyRCAGraphs = function (_a) {
     });
     var fetchAnomalyGraphsErrorMessage = (_d = (_c = (_b = fetchAnomalyGraphs === null || fetchAnomalyGraphs === void 0 ? void 0 : fetchAnomalyGraphs.error) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error;
     var renderGraphs = function (graphResponseData, uniqueOperations, groupByOperations, graphType, index, graphTitle) {
-        return (jsx(Box$1, __assign({ mr: 8 }, { children: jsx(GraphView, { metricData: graphResponseData, metricKey: graphResponseData.name, graphTitle: graphTitle, containerWidth: null, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, operations: uniqueOperations, groupByOperations: groupByOperations, registerChartInstance: function (instance) {
+        return (jsx(Box$1, { mr: 8, children: jsx(GraphView, { metricData: graphResponseData, metricKey: graphResponseData.name, graphTitle: graphTitle, containerWidth: null, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, operations: uniqueOperations, groupByOperations: groupByOperations, registerChartInstance: function (instance) {
                     return registerChartInstance(instance, index);
-                }, isRecommendationGraph: true, appName: appName, graphType: graphType, timezone: timezone, onSelectAshLabel: onSelectAshLabel, onEChartsDateSelect: onEChartsDateSelect }, "".concat(metricMeasure, "-").concat(graphResponseData.name)) })));
+                }, isRecommendationGraph: true, appName: appName, graphType: graphType, timezone: timezone, onSelectAshLabel: onSelectAshLabel, onEChartsDateSelect: onEChartsDateSelect }, "".concat(metricMeasure, "-").concat(graphResponseData.name)) }));
     };
     var filteredRecommendationMetrics = formattedAnomalyRca === null || formattedAnomalyRca === void 0 ? void 0 : formattedAnomalyRca.filter(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 0; });
     // Reset chart instances on metricMeasure change
@@ -77283,21 +77234,21 @@ var AnomalyRCAGraphs = function (_a) {
             disconnect(chartInstancesRef.current);
         };
     }, [fetchAnomalyGraphs.isSuccess, RCAGraphResponseData, selectedTab]);
-    return (jsx(Box$1, { children: jsxs(Box$1, { children: [fetchAnomalyGraphs.isLoading && (jsx(Box$1, __assign({ mt: 2, className: classes.loadingBox }, { children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) }))), fetchAnomalyGraphs.isError && (jsxs(Box$1, __assign({ mt: 4 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
+    return (jsx(Box$1, { children: jsxs(Box$1, { children: [fetchAnomalyGraphs.isLoading && (jsx(Box$1, { mt: 2, className: classes.loadingBox, children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) })), fetchAnomalyGraphs.isError && (jsxs(Box$1, { mt: 4, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
                                 ? fetchAnomalyGraphsErrorMessage
                                 : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
                                 ? fetchAnomalyGraphsErrorMessage
-                                : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR }))] }))), fetchAnomalyGraphs.isSuccess && (jsx(Box$1, { children: isNonEmptyArray(RCAGraphResponseData) &&
-                        isNonEmptyArray(filteredRecommendationMetrics) && (jsxs(Box$1, { children: [jsx(YBTabs, __assign({ pill: true, value: selectedTab, onChange: handleTabChange }, { children: filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, index) { return (jsx(YBStyledTab$4, { value: index, label: item.cause, className: classes.causeTabButton }, index)); }) })), filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, recIndex) {
+                                : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR }))] })), fetchAnomalyGraphs.isSuccess && (jsx(Box$1, { children: isNonEmptyArray(RCAGraphResponseData) &&
+                        isNonEmptyArray(filteredRecommendationMetrics) && (jsxs(Box$1, { children: [jsx(YBTabs, { pill: true, value: selectedTab, onChange: handleTabChange, children: filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, index) { return (jsx(YBStyledTab$4, { value: index, label: item.cause, className: classes.causeTabButton }, index)); }) }), filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, recIndex) {
                                 var _a, _b;
-                                return (jsx(Box$1, __assign({ role: "tabpanel", hidden: selectedTab !== recIndex, id: "tabpanel-".concat(recIndex), "aria-labelledby": "tab-".concat(recIndex), style: {
+                                return (jsx(Box$1, { role: "tabpanel", hidden: selectedTab !== recIndex, id: "tabpanel-".concat(recIndex), "aria-labelledby": "tab-".concat(recIndex), style: {
                                         border: '1px solid #E9EEF2',
                                         borderRadius: '8px',
                                         backgroundColor: '#FFFFFF',
                                         padding: '16px'
-                                    } }, { children: selectedTab === recIndex && (jsxs(Box$1, __assign({ mt: 2, display: 'flex', flexDirection: 'column' }, { children: [jsx("span", __assign({ className: classes.causeText }, { children: item.cause })), jsxs(Box$1, __assign({ mt: 1 }, { children: [jsx("img", { src: UnderIcon, alt: "path" }), jsx("span", __assign({ className: classes.descriptionText }, { children: item.description }))] })), jsx(Box$1, __assign({ mt: 2, className: ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 1
+                                    }, children: selectedTab === recIndex && (jsxs(Box$1, { mt: 2, display: 'flex', flexDirection: 'column', children: [jsx("span", { className: classes.causeText, children: item.cause }), jsxs(Box$1, { mt: 1, children: [jsx("img", { src: UnderIcon, alt: "path" }), jsx("span", { className: classes.descriptionText, children: item.description })] }), jsx(Box$1, { mt: 2, className: ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 1
                                                     ? clsx(classes.gridBox, classes.gridBoxDouble)
-                                                    : '' }, { children: (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.map(function (metricName, index) {
+                                                    : '', children: (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.map(function (metricName, index) {
                                                     var _a, _b, _c;
                                                     var metricData = RCAGraphResponseData === null || RCAGraphResponseData === void 0 ? void 0 : RCAGraphResponseData.find(function (data, graphIdx) {
                                                         return (graphIdx > 0 &&
@@ -77311,15 +77262,15 @@ var AnomalyRCAGraphs = function (_a) {
                                                     }
                                                     else {
                                                         var operations = getOperations(metricMeasure, metricData, GraphType.MULTI_SUPPORTING, shouldShowGroupbyOperations, amomalyGraphRequestParams);
-                                                        return (jsx(Box$1, __assign({ style: {
+                                                        return (jsx(Box$1, { style: {
                                                                 border: '1px solid #E9EEF2',
                                                                 borderRadius: '8px',
                                                                 marginRight: isOnlyReason ? '0px' : '16px'
-                                                            } }, { children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
+                                                            }, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
                                                                 ? GraphType.SINGLE_SUPPORTING
-                                                                : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) })));
+                                                                : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) }));
                                                     }
-                                                }) }))] }))) }), recIndex));
+                                                }) })] })) }, recIndex));
                             })] })) }))] }) }));
 };
 
@@ -77734,7 +77685,7 @@ var QueryEventsChart = function (_a) {
             },
             yAxis: {
                 type: 'category',
-                data: [''],
+                data: [''], // single row
                 show: false
             },
             series: series
@@ -77820,17 +77771,17 @@ var ColumnSelectorDrawer = function (_a) {
         sessionStorage.setItem(visibleStorageKey, JSON.stringify(visibleMetadataColumns));
         handleClose();
     };
-    return (jsx(YBModal, __assign({ open: true, isSidePanel: true, title: 'Add and Remove Columns', onClose: handleClose, onSubmit: handleSubmit(onSubmit), enableBackdropDismiss: true, titleSeparator: true, dialogContentProps: {
+    return (jsx(YBModal, { open: true, isSidePanel: true, title: 'Add and Remove Columns', onClose: handleClose, onSubmit: handleSubmit(onSubmit), enableBackdropDismiss: true, titleSeparator: true, dialogContentProps: {
             style: {
                 padding: 0
             }
-        }, submitLabel: 'Apply', submitTestId: "btnApplyMetricsSelection", cancelLabel: 'Cancel', cancelTestId: "btnCloseMetricsSelection" }, { children: jsx(Box$1, { children: jsx(Box$1, __assign({ className: classes.itemsContainer }, { children: columns.map(function (column) {
+        }, submitLabel: 'Apply', submitTestId: "btnApplyMetricsSelection", cancelLabel: 'Cancel', cancelTestId: "btnCloseMetricsSelection", children: jsx(Box$1, { children: jsx(Box$1, { className: classes.itemsContainer, children: columns.map(function (column) {
                     var isHidden = hiddenColumns.includes(column.name);
                     if (isHidden) {
                         return null;
                     }
-                    return (jsx(Box$1, __assign({ className: classes.item }, { children: jsx(YBCheckboxField, { name: column.name, label: column.label, control: control, dataTestId: column.name, className: classes.checkbox }) }), column.name));
-                }) })) }) })));
+                    return (jsx(Box$1, { className: classes.item, children: jsx(YBCheckboxField, { name: column.name, label: column.label, control: control, dataTestId: column.name, className: classes.checkbox }) }, column.name));
+                }) }) }) }));
 };
 
 var img$b = "data:image/svg+xml,%3csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath opacity='0.5' fill-rule='evenodd' clip-rule='evenodd' d='M1.16699 6.99984C1.16699 3.77818 3.77866 1.1665 7.00033 1.1665C8.54742 1.1665 10.0312 1.78109 11.1251 2.87505C12.2191 3.96901 12.8337 5.45274 12.8337 6.99984C12.8337 10.2215 10.222 12.8332 7.00033 12.8332C3.77866 12.8332 1.16699 10.2215 1.16699 6.99984ZM6.41699 4.6665C6.41699 4.34434 6.67816 4.08317 7.00033 4.08317C7.32249 4.08317 7.58366 4.34434 7.58366 4.6665C7.58366 4.98867 7.32249 5.24984 7.00033 5.24984C6.67816 5.24984 6.41699 4.98867 6.41699 4.6665ZM6.41699 6.4165C6.41699 6.09434 6.67816 5.83317 7.00033 5.83317C7.32249 5.83317 7.58366 6.09434 7.58366 6.4165V9.33317C7.58366 9.65534 7.32249 9.9165 7.00033 9.9165C6.67816 9.9165 6.41699 9.65534 6.41699 9.33317V6.4165Z' fill='%2367666C'/%3e%3c/svg%3e";
@@ -78104,7 +78055,7 @@ var QueryLevelTabletMetadata = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_LEVEL_TABLET_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TOTAL_EPS_RATIO })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_LEVEL_TABLET_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TOTAL_EPS_RATIO }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     customBodyRender: function (value) {
                         return Number.isFinite(Number(value))
@@ -78128,7 +78079,7 @@ var QueryLevelTabletMetadata = function (_a) {
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.EPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.EPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '0.0';
                     }
@@ -78159,7 +78110,7 @@ var QueryLevelTabletMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.EVENTS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.EVENTS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (jsx(QueryEventsChart, { data: value !== null && value !== void 0 ? value : [], maxEPS: maxEPS, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE })); }
                 }
             },
@@ -78170,7 +78121,7 @@ var QueryLevelTabletMetadata = function (_a) {
                     sort: false,
                     display: (_a = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(TABLETS_COLUMNS$1.DATABASE_NAME)) !== null && _a !== void 0 ? _a : false,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.DATABASE_NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.DATABASE_NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
@@ -78193,7 +78144,7 @@ var QueryLevelTabletMetadata = function (_a) {
                     sort: true,
                     display: true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TABLE_NAME_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TABLE_NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TABLE_NAME_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TABLE_NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -78216,7 +78167,7 @@ var QueryLevelTabletMetadata = function (_a) {
                     sort: false,
                     display: (_b = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(TABLETS_COLUMNS$1.SCHEMA_NAME)) !== null && _b !== void 0 ? _b : false,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.SCHEMA_NAME_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.SCHEMA_NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.SCHEMA_NAME_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.SCHEMA_NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -78239,7 +78190,7 @@ var QueryLevelTabletMetadata = function (_a) {
                     sort: false,
                     display: true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TABLET_ID_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TABLET_ID })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TABLET_ID_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.TABLET_ID }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -78256,16 +78207,16 @@ var QueryLevelTabletMetadata = function (_a) {
                         }
                         var maxLength = 20;
                         var displayText = value.length > maxLength ? "".concat(value.substring(0, maxLength), "...") : value;
-                        return (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: "center" }, { children: [jsx(YBTooltip, __assign({ title: value, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ component: "span", style: {
+                        return (jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: "center", children: [jsx(YBTooltip, { title: value, placement: "top", arrow: true, children: jsx(Box$1, { component: "span", style: {
                                             display: 'inline-block',
                                             whiteSpace: 'nowrap',
                                             overflow: 'hidden',
                                             maxWidth: '100%'
-                                        } }, { children: displayText })) })), jsx(YBTooltip, __assign({ title: copied ? 'Copied' : 'Copy', open: copied ? true : undefined }, { children: jsx("img", { src: CopyIcon, alt: "Copy Icon", style: { marginLeft: '4px', cursor: 'pointer' }, onClick: function () {
+                                        }, children: displayText }) }), jsx(YBTooltip, { title: copied ? 'Copied' : 'Copy', open: copied ? true : undefined, children: jsx("img", { src: CopyIcon, alt: "Copy Icon", style: { marginLeft: '4px', cursor: 'pointer' }, onClick: function () {
                                             navigator.clipboard.writeText(value);
                                             setCopied(true);
                                             setTimeout(function () { return setCopied(false); }, 2000);
-                                        } }) }))] })));
+                                        } }) })] }));
                     }
                 }
             },
@@ -78282,7 +78233,7 @@ var QueryLevelTabletMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.PARTITION_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: QUERY_LEVEL_TABLETS_METADATA_LABELS.PARTITION })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.PARTITION_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: QUERY_LEVEL_TABLETS_METADATA_LABELS.PARTITION }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -78300,27 +78251,27 @@ var QueryLevelTabletMetadata = function (_a) {
                     TABLETS_COLUMNS$1.EVENTS,
                     TABLETS_COLUMNS$1.TABLE_NAME,
                     TABLETS_COLUMNS$1.TABLET_ID
-                ], columns: columns, isTabletsMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, __assign({ className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder) }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerContainer }, { children: jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Tables and Tablets Accessed' })) })), jsxs(Box$1, __assign({ className: helperClasses.metadataContainer }, { children: [jsxs(Box$1, __assign({ className: helperClasses.loadFilterContainer }, { children: [jsx(YBInput, { dataTestId: "AccessedTablets-SearchInput", placeholder: 'Filter Table', className: helperClasses.ybSearchInput, onChange: function (e) {
+                ], columns: columns, isTabletsMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, { className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), children: [jsx(Box$1, { className: helperClasses.headerContainer, children: jsx(Typography$1, { variant: "h5", children: 'Tables and Tablets Accessed' }) }), jsxs(Box$1, { className: helperClasses.metadataContainer, children: [jsxs(Box$1, { className: helperClasses.loadFilterContainer, children: [jsx(YBInput, { dataTestId: "AccessedTablets-SearchInput", placeholder: 'Filter Table', className: helperClasses.ybSearchInput, onChange: function (e) {
                                             var value = e.target.value;
                                             setSearchInputValue(value);
                                             debouncedSearchHandlerRef.current(value);
                                         }, value: searchInputValue, inputProps: {
                                             'data-testid': 'AccessedTablets-SearchInput'
                                         }, InputProps: {
-                                            startAdornment: (jsx(InputAdornment, __assign({ position: "start" }, { children: jsx(SvgSearch, {}) }))),
-                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, __assign({ size: "small", onClick: function () {
+                                            startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SvgSearch, {}) })),
+                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: function () {
                                                         debouncedSearchHandlerRef.current.cancel();
                                                         setSearchInput('');
                                                         setSearchInputValue('');
                                                         setCurrentTablePage(0);
-                                                    }, "data-testid": "AccessedTablets-ClearButton" }, { children: jsx(Clear, { fontSize: "small" }) })) })))
-                                        } }), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "AccessedTablets-AddFieldsButton" }, { children: ADD_COLUMNS_BUTTON_TEXT }))] })), jsx(Box$1, { children: jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                                                    }, "data-testid": "AccessedTablets-ClearButton", children: jsx(Clear, { fontSize: "small" }) }) }))
+                                        } }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "AccessedTablets-AddFieldsButton", children: ADD_COLUMNS_BUTTON_TEXT })] }), jsx(Box$1, { children: jsxs(Box$1, { className: appName === AppName.YBM
                                         ? helperClasses.overrideMuiTableContainer
-                                        : helperClasses.overrideMuiTableContainerWeb }, { children: [isTabletsDataFetchError && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
+                                        : helperClasses.overrideMuiTableContainerWeb, children: [isTabletsDataFetchError && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
                                                         ? (_f = (_e = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error
                                                         : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_h = (_g = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.error)
                                                         ? (_k = (_j = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.error
-                                                        : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR }))] }))), jsx(YBTable, { id: 'AccessedTablets', className: helperClasses.overrideMuiTable, data: tabletsData !== null && tabletsData !== void 0 ? tabletsData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isTabletsDataFetchLoading, options: {
+                                                        : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR }))] })), jsx(YBTable, { id: 'AccessedTablets', className: helperClasses.overrideMuiTable, data: tabletsData !== null && tabletsData !== void 0 ? tabletsData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isTabletsDataFetchLoading, options: {
                                                 sort: true,
                                                 filter: true,
                                                 count: totalSize,
@@ -78351,7 +78302,7 @@ var QueryLevelTabletMetadata = function (_a) {
                                                 customFooter: customFooter,
                                                 manualSorting: true,
                                                 state: tableState
-                                            } }, "AccessedTablets-".concat(sortBy, "-").concat(sortDirection))] })) })] }))] }))] }));
+                                            } }, "AccessedTablets-".concat(sortBy, "-").concat(sortDirection))] }) })] })] })] }));
 };
 
 var YBStyledTab$3 = styled$1(YBTab)(function (_a) {
@@ -78502,11 +78453,11 @@ var SqlDrilldown = function (_a) {
         }
         setSqlDrilldownTab(newSqlDrilldownTab);
     };
-    return (jsxs(Fragment, { children: [jsxs(Box$1, __assign({ mt: 3 }, { children: [fetchHistoricalQueryGraphs.isLoading && (jsx(Box$1, __assign({ mt: 2, className: classes.loadingBox }, { children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) }))), fetchHistoricalQueryGraphs.isError && (jsxs(Box$1, __assign({ mt: 4 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchQueriesGraphsErrorMessage)
+    return (jsxs(Fragment, { children: [jsxs(Box$1, { mt: 3, children: [fetchHistoricalQueryGraphs.isLoading && (jsx(Box$1, { mt: 2, className: classes.loadingBox, children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) })), fetchHistoricalQueryGraphs.isError && (jsxs(Box$1, { mt: 4, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchQueriesGraphsErrorMessage)
                                     ? fetchQueriesGraphsErrorMessage
                                     : DEFAULT_ERROR_MESSAGES.QUERIES_GRAPHS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchQueriesGraphsErrorMessage)
                                     ? fetchQueriesGraphsErrorMessage
-                                    : DEFAULT_ERROR_MESSAGES.QUERIES_GRAPHS_FETCH_ERROR }))] }))), fetchHistoricalQueryGraphs.isSuccess && sqlTab === SqlTabs.QUERY_OVERVIEW && (jsxs(Box$1, { children: [jsx(Box$1, __assign({ className: clsx(classes.gridBox, classes.gridBoxSingle), mb: 5 }, { children: queryGraphData === null || queryGraphData === void 0 ? void 0 : queryGraphData.filter(function (data) { var _a; return (_a = data === null || data === void 0 ? void 0 : data.name) === null || _a === void 0 ? void 0 : _a.startsWith('active_session_history'); }).map(function (data, index) {
+                                    : DEFAULT_ERROR_MESSAGES.QUERIES_GRAPHS_FETCH_ERROR }))] })), fetchHistoricalQueryGraphs.isSuccess && sqlTab === SqlTabs.QUERY_OVERVIEW && (jsxs(Box$1, { children: [jsx(Box$1, { className: clsx(classes.gridBox, classes.gridBoxSingle), mb: 5, children: queryGraphData === null || queryGraphData === void 0 ? void 0 : queryGraphData.filter(function (data) { var _a; return (_a = data === null || data === void 0 ? void 0 : data.name) === null || _a === void 0 ? void 0 : _a.startsWith('active_session_history'); }).map(function (data, index) {
                                     var _a, _b;
                                     var operations = getOperations(metricMeasure, data, GraphType.SINGLE_SUPPORTING, true, historicalQueryRequestParams, true);
                                     var isAshGraph = (_a = data === null || data === void 0 ? void 0 : data.name) === null || _a === void 0 ? void 0 : _a.startsWith('active_session_history');
@@ -78527,30 +78478,30 @@ var SqlDrilldown = function (_a) {
                                             });
                                         }
                                     }
-                                    return (jsx(Box$1, __assign({ id: "HistoricalQueryView-ash-".concat(metricMeasure, "-").concat(index) }, { children: jsx(Box$1, __assign({ style: {
+                                    return (jsx(Box$1, { id: "HistoricalQueryView-ash-".concat(metricMeasure, "-").concat(index), children: jsx(Box$1, { style: {
                                                 border: '1px solid #E9EEF2',
                                                 borderRadius: '8px',
                                                 backgroundColor: '#FFFFFF'
-                                            } }, { children: jsx(GraphView, { metricData: data, metricKey: key, dateTimeRange: dateTimeRange, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL
+                                            }, children: jsx(GraphView, { metricData: data, metricKey: key, dateTimeRange: dateTimeRange, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL
                                                     ? []
                                                     : operations.uniqueOperations, registerChartInstance: function (instance) {
                                                     return registerChartInstance(instance, index);
-                                                }, graphType: GraphType.MULTI_SUPPORTING, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, queryData: universeQueryStatsData, onSelectAshLabel: onSelectAshLabel, isHistoricalQueryView: true, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricMeasure, "-").concat(key)) })) }), "HistoricalQueryView-ash-".concat(metricMeasure, "-").concat(index)));
-                                }) })), !anomalyData && (jsx(YBTabs, __assign({ pill: true, value: sqlDrilldownTab, onChange: handleSqlDrilldownTabChange }, { children: jsx(YBStyledTab$3, { value: SqlDrilldownTabs.PERFORMANCE_METRICS, label: SqlDrilldownTabs.PERFORMANCE_METRICS }) }))), !anomalyData && sqlDrilldownTab === SqlDrilldownTabs.PERFORMANCE_METRICS && (jsx(Box$1, __assign({ className: clsx(classes.gridBox, classes.gridBoxThree) }, { children: queryGraphData === null || queryGraphData === void 0 ? void 0 : queryGraphData.filter(function (data) { var _a; return !((_a = data === null || data === void 0 ? void 0 : data.name) === null || _a === void 0 ? void 0 : _a.startsWith('active_session_history')); }).map(function (data, index) {
+                                                }, graphType: GraphType.MULTI_SUPPORTING, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, queryData: universeQueryStatsData, onSelectAshLabel: onSelectAshLabel, isHistoricalQueryView: true, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricMeasure, "-").concat(key)) }) }, "HistoricalQueryView-ash-".concat(metricMeasure, "-").concat(index)));
+                                }) }), !anomalyData && (jsx(YBTabs, { pill: true, value: sqlDrilldownTab, onChange: handleSqlDrilldownTabChange, children: jsx(YBStyledTab$3, { value: SqlDrilldownTabs.PERFORMANCE_METRICS, label: SqlDrilldownTabs.PERFORMANCE_METRICS }) })), !anomalyData && sqlDrilldownTab === SqlDrilldownTabs.PERFORMANCE_METRICS && (jsx(Box$1, { className: clsx(classes.gridBox, classes.gridBoxThree), children: queryGraphData === null || queryGraphData === void 0 ? void 0 : queryGraphData.filter(function (data) { var _a; return !((_a = data === null || data === void 0 ? void 0 : data.name) === null || _a === void 0 ? void 0 : _a.startsWith('active_session_history')); }).map(function (data, index) {
                                     var operations = getOperations(metricMeasure, data, GraphType.SINGLE_SUPPORTING, true, historicalQueryRequestParams, true);
                                     var key = data.name;
-                                    return (jsx(Box$1, __assign({ id: "HistoricalQueryView-".concat(metricMeasure, "-").concat(index) }, { children: jsx(Box$1, __assign({ style: {
+                                    return (jsx(Box$1, { id: "HistoricalQueryView-".concat(metricMeasure, "-").concat(index), children: jsx(Box$1, { style: {
                                                 border: '1px solid #E9EEF2',
                                                 borderRadius: '8px',
                                                 backgroundColor: '#FFFFFF',
                                                 marginTop: '16px',
                                                 marginBottom: '16px'
-                                            } }, { children: jsx(GraphView, { metricData: data, metricKey: key, dateTimeRange: dateTimeRange, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL
+                                            }, children: jsx(GraphView, { metricData: data, metricKey: key, dateTimeRange: dateTimeRange, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL
                                                     ? []
                                                     : operations.uniqueOperations, registerChartInstance: function (instance) {
                                                     return registerChartInstance(instance, index);
-                                                }, graphType: GraphType.MULTI_SUPPORTING, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, queryData: universeQueryStatsData, onSelectAshLabel: onSelectAshLabel, isHistoricalQueryView: true, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricMeasure, "-").concat(key)) })) }), "HistoricalQueryView-".concat(metricMeasure, "-").concat(index)));
-                                }) })))] }))] })), jsx(Box$1, { children: jsx(QueryLevelTabletMetadata, { appName: appName, getClusterDetails: getClusterDetails, universeUuid: universeUuid, apiUrl: apiUrl, queryId: (_f = (_e = getSqlTabletsParams()) === null || _e === void 0 ? void 0 : _e.queryId) !== null && _f !== void 0 ? _f : null, dbId: (_h = (_g = getSqlTabletsParams()) === null || _g === void 0 ? void 0 : _g.dbId) !== null && _h !== void 0 ? _h : null, startTime: (_k = (_j = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _j === void 0 ? void 0 : _j.toISOString()) !== null && _k !== void 0 ? _k : null, endTime: (_m = (_l = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _l === void 0 ? void 0 : _l.toISOString()) !== null && _m !== void 0 ? _m : null }) }), anomalyData && (jsxs(Box$1, __assign({ mt: 2 }, { children: [jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Possible Causes' })), jsx(Box$1, __assign({ mt: 1 }, { children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: (_p = (_o = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _o === void 0 ? void 0 : _o.toISOString()) !== null && _p !== void 0 ? _p : null, endTime: (_r = (_q = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _q === void 0 ? void 0 : _q.toISOString()) !== null && _r !== void 0 ? _r : null, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) }))] })))] }));
+                                                }, graphType: GraphType.MULTI_SUPPORTING, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, queryData: universeQueryStatsData, onSelectAshLabel: onSelectAshLabel, isHistoricalQueryView: true, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricMeasure, "-").concat(key)) }) }, "HistoricalQueryView-".concat(metricMeasure, "-").concat(index)));
+                                }) }))] }))] }), jsx(Box$1, { children: jsx(QueryLevelTabletMetadata, { appName: appName, getClusterDetails: getClusterDetails, universeUuid: universeUuid, apiUrl: apiUrl, queryId: (_f = (_e = getSqlTabletsParams()) === null || _e === void 0 ? void 0 : _e.queryId) !== null && _f !== void 0 ? _f : null, dbId: (_h = (_g = getSqlTabletsParams()) === null || _g === void 0 ? void 0 : _g.dbId) !== null && _h !== void 0 ? _h : null, startTime: (_k = (_j = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _j === void 0 ? void 0 : _j.toISOString()) !== null && _k !== void 0 ? _k : null, endTime: (_m = (_l = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _l === void 0 ? void 0 : _l.toISOString()) !== null && _m !== void 0 ? _m : null }) }), anomalyData && (jsxs(Box$1, { mt: 2, children: [jsx(Typography$1, { variant: "h5", children: 'Possible Causes' }), jsx(Box$1, { mt: 1, children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: (_p = (_o = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _o === void 0 ? void 0 : _o.toISOString()) !== null && _p !== void 0 ? _p : null, endTime: (_r = (_q = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _q === void 0 ? void 0 : _q.toISOString()) !== null && _r !== void 0 ? _r : null, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) })] }))] }));
 };
 
 var DB_SELECTOR_OPTIONS = [
@@ -78591,7 +78542,7 @@ var DbLoadHeader = function (_a) {
             dataTestId: "DbLoadHeader-DbSelector-".concat(dbOption.value)
         }
     }); });
-    return (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: 'center' }, { children: [jsx(OutlierSelector, { outlierType: outlierType, metricOutlierSelectors: metricOutlierSelectors, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, selectedNumNodes: numNodes, showNumNodesInput: false, showNumNodesSelector: true }), jsx(Typography$1, __assign({ variant: "body2", style: { marginRight: '16px' } }, { children: isDbClusterLoadView ? 'databases' : 'nodes' })), jsxs(Box$1, __assign({ display: 'flex', flexDirection: "row", className: classes.dbSelectorBox }, { children: [jsx("img", { src: DividerIcon, alt: "Divider" }), jsx(YBButtonGroup, { divider: true, buttons: buttons, dataTestId: "DbLoadHeader-DbSelector", value: (_b = DB_SELECTOR_OPTIONS[active]) === null || _b === void 0 ? void 0 : _b.value })] }))] })));
+    return (jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: 'center', children: [jsx(OutlierSelector, { outlierType: outlierType, metricOutlierSelectors: metricOutlierSelectors, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, selectedNumNodes: numNodes, showNumNodesInput: false, showNumNodesSelector: true }), jsx(Typography$1, { variant: "body2", style: { marginRight: '16px' }, children: isDbClusterLoadView ? 'databases' : 'nodes' }), jsxs(Box$1, { display: 'flex', flexDirection: "row", className: classes.dbSelectorBox, children: [jsx("img", { src: DividerIcon, alt: "Divider" }), jsx(YBButtonGroup, { divider: true, buttons: buttons, dataTestId: "DbLoadHeader-DbSelector", value: (_b = DB_SELECTOR_OPTIONS[active]) === null || _b === void 0 ? void 0 : _b.value })] })] }));
 };
 
 var _path$1;
@@ -78756,7 +78707,7 @@ var QueriesMetadata = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_EPS_RATIO })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_EPS_RATIO }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
@@ -78780,7 +78731,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.EPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.EPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78815,13 +78766,13 @@ var QueriesMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.EVENTS_QUERY_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.EVENTS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.EVENTS_QUERY_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.EVENTS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
-                        return (jsx(Box$1, __assign({ onClick: function (event) {
+                        return (jsx(Box$1, { onClick: function (event) {
                                 event.stopPropagation();
                                 event.preventDefault();
                                 return false;
-                            } }, { children: jsx(QueryEventsChart, { data: value, maxEPS: maxEPS, groupByOperation: groupByOperation }) })));
+                            }, children: jsx(QueryEventsChart, { data: value, maxEPS: maxEPS, groupByOperation: groupByOperation }) }));
                     }
                 }
             },
@@ -78847,10 +78798,10 @@ var QueriesMetadata = function (_a) {
                             return false;
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.QUERY_TEXT_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.QUERY })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.QUERY_TEXT_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.QUERY }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value, tableMeta) {
                         var rowIndex = tableMeta.rowIndex;
-                        return (jsx(YBTooltip, __assign({ title: value, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ onClick: handleCodeBlockClick, className: codeBlockClasses.queryCellBox }, { children: jsx(YBCodeBlock, { lang: "sql", text: value, maxWidth: 350, showBorder: true, showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, preClassName: codeBlockClasses.preClassNameInTable, codeClassName: codeBlockClasses.codeClassNameInTable, containerClassName: codeBlockClasses.queryContainerCodeInTable }, "TableHelperQueries-".concat(name, "-").concat(rowIndex)) })) })));
+                        return (jsx(YBTooltip, { title: value, placement: "top", arrow: true, children: jsx(Box$1, { onClick: handleCodeBlockClick, className: codeBlockClasses.queryCellBox, children: jsx(YBCodeBlock, { lang: "sql", text: value, maxWidth: 350, showBorder: true, showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, preClassName: codeBlockClasses.preClassNameInTable, codeClassName: codeBlockClasses.codeClassNameInTable, containerClassName: codeBlockClasses.queryContainerCodeInTable }, "TableHelperQueries-".concat(name, "-").concat(rowIndex)) }) }));
                     }
                 }
             },
@@ -78867,7 +78818,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.NAMESPACE_NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.NAMESPACE_NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78886,7 +78837,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.FIRST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.FIRST_ACTIVE_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.FIRST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.FIRST_ACTIVE_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78905,7 +78856,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LAST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LAST_ACTIVE_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LAST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LAST_ACTIVE_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78924,7 +78875,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.AVG_LATENCY_TOOLTIP, arrow: true, placement: "top" }, { children: jsx(Box$1, __assign({ className: helperClasses.headerBox }, { children: jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.AVG_LATENCY })) })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.AVG_LATENCY_TOOLTIP, arrow: true, placement: "top", children: jsx(Box$1, { className: helperClasses.headerBox, children: jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.AVG_LATENCY }) }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78945,7 +78896,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LATENCY_P90_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P90 })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LATENCY_P90_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P90 }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78966,7 +78917,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LATENCY_P99_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P99 })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LATENCY_P99_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P99 }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -78995,7 +78946,7 @@ var QueriesMetadata = function (_a) {
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.QUERY_TYPE_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.QUERY_TYPE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.QUERY_TYPE_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.QUERY_TYPE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -79012,7 +78963,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -79031,7 +78982,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ROWS_AVG_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.ROWS_AVG })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ROWS_AVG_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.ROWS_AVG }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -79052,7 +79003,7 @@ var QueriesMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.RPS_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.RPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.RPS_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.RPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.queryLoadMetadataTableCell
                     }); },
@@ -79129,31 +79080,31 @@ var QueriesMetadata = function (_a) {
                     YSQL_COLUMNS$1.QUERY_ID,
                     YSQL_COLUMNS$1.UNIVERSE_ID,
                     YSQL_COLUMNS$1.QUERY
-                ], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, __assign({ mt: 1, mb: 2, className: isTabletLoadMetadata ? '' : helperClasses.dataBox }, { children: [jsxs(Box$1, __assign({ display: 'flex', flexDirection: 'column' }, { children: [jsx(Box$1, { mb: 2 }), jsxs(Box$1, __assign({ className: helperClasses.filterContainer }, { children: [jsxs(Box$1, __assign({ className: helperClasses.filterLeftContainer }, { children: [isTabletLoadMetadata && (jsxs(Fragment, { children: [jsx(SvgGroup, {}), jsx(YBLabel, __assign({ style: { marginLeft: '8px', marginRight: '8px' } }, { children: 'Group By' })), jsx(YBSelect, __assign({ dataTestId: "TabletLevelQueryMetadata-GroupBySelect", value: groupByOperation, className: clsx(classes.selectBox, classes.overrideMuiInput) }, { children: GROUP_BY_OPERATIONS === null || GROUP_BY_OPERATIONS === void 0 ? void 0 : GROUP_BY_OPERATIONS.map(function (groupByOperation, groupByIdx) {
-                                                            return (jsx(MenuItem$1, __assign({ value: groupByOperation, onClick: function (event) {
+                ], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, { mt: 1, mb: 2, className: isTabletLoadMetadata ? '' : helperClasses.dataBox, children: [jsxs(Box$1, { display: 'flex', flexDirection: 'column', children: [jsx(Box$1, { mb: 2 }), jsxs(Box$1, { className: helperClasses.filterContainer, children: [jsxs(Box$1, { className: helperClasses.filterLeftContainer, children: [isTabletLoadMetadata && (jsxs(Fragment, { children: [jsx(SvgGroup, {}), jsx(YBLabel, { style: { marginLeft: '8px', marginRight: '8px' }, children: 'Group By' }), jsx(YBSelect, { dataTestId: "TabletLevelQueryMetadata-GroupBySelect", value: groupByOperation, className: clsx(classes.selectBox, classes.overrideMuiInput), children: GROUP_BY_OPERATIONS === null || GROUP_BY_OPERATIONS === void 0 ? void 0 : GROUP_BY_OPERATIONS.map(function (groupByOperation, groupByIdx) {
+                                                            return (jsx(MenuItem$1, { value: groupByOperation, onClick: function (event) {
                                                                     onSetGroupByOperation === null || onSetGroupByOperation === void 0 ? void 0 : onSetGroupByOperation(groupByOperation);
                                                                     event.stopPropagation();
-                                                                } }, { children: GROUP_BY_OPERATIONS_LABELS[groupByOperation] }), "".concat(groupByOperation, "-").concat(groupByIdx)));
-                                                        }) }))] })), jsx(YBInput, { dataTestId: "DbLoadQueriesMetadata-SearchInput", placeholder: 'Filter Queries', className: helperClasses.ybSearchInput, onChange: function (e) {
+                                                                }, children: GROUP_BY_OPERATIONS_LABELS[groupByOperation] }, "".concat(groupByOperation, "-").concat(groupByIdx)));
+                                                        }) })] })), jsx(YBInput, { dataTestId: "DbLoadQueriesMetadata-SearchInput", placeholder: 'Filter Queries', className: helperClasses.ybSearchInput, onChange: function (e) {
                                                     var value = e.target.value;
                                                     setSearchInputValue(value);
                                                     debouncedSearchHandlerRef.current(value);
                                                 }, value: searchInputValue, inputProps: {
                                                     'data-testid': 'DbLoadQueriesMetadata-SearchInput'
                                                 }, InputProps: {
-                                                    startAdornment: (jsx(InputAdornment, __assign({ position: "start" }, { children: jsx(SvgSearch, {}) }))),
-                                                    endAdornment: !!searchInputValue && (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, __assign({ size: "small", onClick: function () {
+                                                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SvgSearch, {}) })),
+                                                    endAdornment: !!searchInputValue && (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: function () {
                                                                 debouncedSearchHandlerRef.current.cancel();
                                                                 setSearchInput('');
                                                                 setSearchInputValue('');
-                                                            }, "data-testid": "DbLoadQueriesMetadata-ClearButton" }, { children: jsx(Clear, { fontSize: "small" }) })) })))
-                                                } })] })), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "DbLoadQueriesMetadata-".concat(name, "-AddFieldsButton") }, { children: ADD_COLUMNS_BUTTON_TEXT }))] }))] })), jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                                                            }, "data-testid": "DbLoadQueriesMetadata-ClearButton", children: jsx(Clear, { fontSize: "small" }) }) }))
+                                                } })] }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "DbLoadQueriesMetadata-".concat(name, "-AddFieldsButton"), children: ADD_COLUMNS_BUTTON_TEXT })] })] }), jsxs(Box$1, { className: appName === AppName.YBM
                             ? helperClasses.overrideMuiTableContainer
-                            : helperClasses.overrideMuiTableContainerWeb }, { children: [isQueryDataFetchError && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_c = (_b = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error)
+                            : helperClasses.overrideMuiTableContainerWeb, children: [isQueryDataFetchError && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_c = (_b = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.error)
                                             ? (_e = (_d = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.error
                                             : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_g = (_f = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.error)
                                             ? (_j = (_h = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.error
-                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] }))), jsx(YBTable, { id: "DbLoadQueriesMetadata-".concat(name), className: helperClasses.overrideMuiTable, data: historicalQueryData !== null && historicalQueryData !== void 0 ? historicalQueryData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isQueryCallLoading, options: {
+                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] })), jsx(YBTable, { id: "DbLoadQueriesMetadata-".concat(name), className: helperClasses.overrideMuiTable, data: historicalQueryData !== null && historicalQueryData !== void 0 ? historicalQueryData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isQueryCallLoading, options: {
                                     sort: false,
                                     filter: true,
                                     count: (_k = historicalQueryData === null || historicalQueryData === void 0 ? void 0 : historicalQueryData.length) !== null && _k !== void 0 ? _k : PAGE_SIZE_LIMIT,
@@ -79186,7 +79137,7 @@ var QueriesMetadata = function (_a) {
                                     onSortingChange: handleColumnSortChange,
                                     manualSorting: true,
                                     state: tableState
-                                } }, "DbLoadQueriesMetadata-".concat(name))] }))] }))] }));
+                                } }, "DbLoadQueriesMetadata-".concat(name))] })] })] }));
 };
 
 var NODE_COLUMNS = {
@@ -79417,7 +79368,7 @@ var NodeLoadMetadata = function (_a) {
                     sort: true,
                     display: true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.NODE_NAME_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.NODE_NAME_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -79433,12 +79384,12 @@ var NodeLoadMetadata = function (_a) {
                             return '-';
                         var maxLength = 18;
                         var displayText = value.length > maxLength ? "...".concat(value.slice(-maxLength)) : value;
-                        return (jsx(YBTooltip, __assign({ title: value, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ component: "span", style: {
+                        return (jsx(YBTooltip, { title: value, placement: "top", arrow: true, children: jsx(Box$1, { component: "span", style: {
                                     display: 'inline-block',
                                     whiteSpace: 'nowrap',
                                     overflow: 'hidden',
                                     maxWidth: '100%'
-                                } }, { children: displayText })) })));
+                                }, children: displayText }) }));
                     }
                 }
             },
@@ -79449,7 +79400,7 @@ var NodeLoadMetadata = function (_a) {
                     sort: false,
                     display: (_a = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(NODE_COLUMNS.NODE_REGION_ZONE)) !== null && _a !== void 0 ? _a : true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.NODE_REGION_ZONE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.NODE_REGION_ZONE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.NODE_REGION_ZONE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.NODE_REGION_ZONE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -79481,7 +79432,7 @@ var NodeLoadMetadata = function (_a) {
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.CONNECTIONS_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.CONNECTIONS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.CONNECTIONS_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.CONNECTIONS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     customBodyRender: function (value) {
                         return Number(value)
@@ -79503,7 +79454,7 @@ var NodeLoadMetadata = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_NODE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.TOTAL_EPS_RATIO })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_NODE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.TOTAL_EPS_RATIO }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
@@ -79527,7 +79478,7 @@ var NodeLoadMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.EPS_NODE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.EPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.EPS_NODE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.EPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -79561,7 +79512,7 @@ var NodeLoadMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.EVENTS_NODE_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.EVENTS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.EVENTS_NODE_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.EVENTS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (jsx(QueryEventsChart, { data: value !== null && value !== void 0 ? value : [], maxEPS: maxEPS, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE })); }
                 }
             },
@@ -79577,7 +79528,7 @@ var NodeLoadMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.RPS_NODE_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: NODE_LOAD_METADATA_LABELS.RPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.RPS_NODE_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: NODE_LOAD_METADATA_LABELS.RPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -79596,31 +79547,31 @@ var NodeLoadMetadata = function (_a) {
                     NODE_COLUMNS.RPS,
                     NODE_COLUMNS.CONNECTIONS,
                     NODE_COLUMNS.NAME
-                ], columns: columns, isNodeLoadMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, __assign({ mt: 2, className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder) }, { children: [jsx(Box$1, __assign({ className: helperClasses.headerContainer }, { children: jsx(Typography$1, __assign({ variant: "h5" }, { children: "".concat(dbWaitEventType === ALL.toUpperCase()
+                ], columns: columns, isNodeLoadMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, { mt: 2, className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), children: [jsx(Box$1, { className: helperClasses.headerContainer, children: jsx(Typography$1, { variant: "h5", children: "".concat(dbWaitEventType === ALL.toUpperCase()
                                 ? ''
                                 : dbWaitEventType === CPU_TEXT
                                     ? CPU_TEXT
-                                    : IO_TEXT, " Load By Node") })) })), jsxs(Box$1, __assign({ className: helperClasses.metadataContainer }, { children: [jsxs(Box$1, __assign({ className: helperClasses.loadFilterContainer }, { children: [jsx(YBInput, { dataTestId: "NodeLoad-SearchInput", placeholder: 'Filter Table', className: helperClasses.ybSearchInput, onChange: function (e) {
+                                    : IO_TEXT, " Load By Node") }) }), jsxs(Box$1, { className: helperClasses.metadataContainer, children: [jsxs(Box$1, { className: helperClasses.loadFilterContainer, children: [jsx(YBInput, { dataTestId: "NodeLoad-SearchInput", placeholder: 'Filter Table', className: helperClasses.ybSearchInput, onChange: function (e) {
                                             var value = e.target.value;
                                             setSearchInputValue(value);
                                             debouncedSearchHandlerRef.current(value);
                                         }, value: searchInputValue, inputProps: {
                                             'data-testid': 'NodeLoad-SearchInput'
                                         }, InputProps: {
-                                            startAdornment: (jsx(InputAdornment, __assign({ position: "start" }, { children: jsx(SvgSearch, {}) }))),
-                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, __assign({ size: "small", onClick: function () {
+                                            startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SvgSearch, {}) })),
+                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: function () {
                                                         debouncedSearchHandlerRef.current.cancel();
                                                         setSearchInput('');
                                                         setSearchInputValue('');
                                                         setCurrentTablePage(0);
-                                                    }, "data-testid": "NodeLoad-ClearButton" }, { children: jsx(Clear, { fontSize: "small" }) })) })))
-                                        } }), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "NodeLoad-AddFieldsButton" }, { children: ADD_COLUMNS_BUTTON_TEXT }))] })), jsx(Box$1, { children: jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                                                    }, "data-testid": "NodeLoad-ClearButton", children: jsx(Clear, { fontSize: "small" }) }) }))
+                                        } }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "NodeLoad-AddFieldsButton", children: ADD_COLUMNS_BUTTON_TEXT })] }), jsx(Box$1, { children: jsxs(Box$1, { className: appName === AppName.YBM
                                         ? helperClasses.overrideMuiTableContainer
-                                        : helperClasses.overrideMuiTableContainerWeb }, { children: [isNodeLoadDataFetchError && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = nodeLoadDataError === null || nodeLoadDataError === void 0 ? void 0 : nodeLoadDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
+                                        : helperClasses.overrideMuiTableContainerWeb, children: [isNodeLoadDataFetchError && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = nodeLoadDataError === null || nodeLoadDataError === void 0 ? void 0 : nodeLoadDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
                                                         ? (_f = (_e = nodeLoadDataError === null || nodeLoadDataError === void 0 ? void 0 : nodeLoadDataError.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error
                                                         : DEFAULT_ERROR_MESSAGES.NODE_LOAD_DATA_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_h = (_g = nodeLoadDataError === null || nodeLoadDataError === void 0 ? void 0 : nodeLoadDataError.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.error)
                                                         ? (_k = (_j = nodeLoadDataError === null || nodeLoadDataError === void 0 ? void 0 : nodeLoadDataError.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.error
-                                                        : DEFAULT_ERROR_MESSAGES.NODE_LOAD_DATA_FETCH_ERROR }))] }))), isNodeLoadDataFetchSuccess && (jsx(YBTable, { id: 'NodeLoad', className: helperClasses.overrideMuiTable, data: nodeLoadData !== null && nodeLoadData !== void 0 ? nodeLoadData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isNodeLoadDataFetchLoading, options: {
+                                                        : DEFAULT_ERROR_MESSAGES.NODE_LOAD_DATA_FETCH_ERROR }))] })), isNodeLoadDataFetchSuccess && (jsx(YBTable, { id: 'NodeLoad', className: helperClasses.overrideMuiTable, data: nodeLoadData !== null && nodeLoadData !== void 0 ? nodeLoadData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isNodeLoadDataFetchLoading, options: {
                                                 enableExpanding: true,
                                                 renderDetailPanel: function (_a) {
                                                     var row = _a.row;
@@ -79662,7 +79613,7 @@ var NodeLoadMetadata = function (_a) {
                                                 customFooter: customFooter,
                                                 manualSorting: true,
                                                 state: tableState
-                                            } }, "NodeLoad-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] })) })] }))] }))] }));
+                                            } }, "NodeLoad-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] }) })] })] })] }));
 };
 
 var img$a = "data:image/svg+xml,%3csvg width='42' height='22' viewBox='0 0 42 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M41 1L25.2627 16.7373C24.4707 17.5293 24.0747 17.9253 23.618 18.0737C23.2163 18.2042 22.7837 18.2042 22.382 18.0737C21.9253 17.9253 21.5293 17.5293 20.7373 16.7373L15.2627 11.2627C14.4707 10.4707 14.0747 10.0747 13.618 9.92631C13.2163 9.7958 12.7837 9.7958 12.382 9.92631C11.9253 10.0747 11.5293 10.4707 10.7373 11.2627L1 21M41 1H27M41 1V15' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
@@ -79718,7 +79669,7 @@ var DOC_LINK = [
 var ASHBanner = function (_a) {
     var isAshSupported = _a.isAshSupported;
     var classes = useStyles$e();
-    return (jsxs(Box$1, __assign({ className: classes.messageBox }, { children: [jsx("img", { src: !isAshSupported ? ArrowLargeIcon : ArrowSmallIcon, alt: "Arrow" }), jsx("span", __assign({ className: classes.ashText }, { children: !isAshSupported ? UPGRADE_DB_FOR_ASH : ENABLE_ASH_MSG })), jsxs(Box$1, __assign({ display: "flex", flexDirection: 'row' }, { children: [jsx("img", { src: DocsIcon, alt: "Docs" }), jsx("a", __assign({ className: classes.ashLink, href: !isAshSupported ? DOC_LINK[0].link : DOC_LINK[1].link, target: "_blank", rel: "noreferrer" }, { children: !isAshSupported ? DOC_LINK[0].text : DOC_LINK[1].text }))] }))] })));
+    return (jsxs(Box$1, { className: classes.messageBox, children: [jsx("img", { src: !isAshSupported ? ArrowLargeIcon : ArrowSmallIcon, alt: "Arrow" }), jsx("span", { className: classes.ashText, children: !isAshSupported ? UPGRADE_DB_FOR_ASH : ENABLE_ASH_MSG }), jsxs(Box$1, { display: "flex", flexDirection: 'row', children: [jsx("img", { src: DocsIcon, alt: "Docs" }), jsx("a", { className: classes.ashLink, href: !isAshSupported ? DOC_LINK[0].link : DOC_LINK[1].link, target: "_blank", rel: "noreferrer", children: !isAshSupported ? DOC_LINK[0].text : DOC_LINK[1].text })] })] }));
 };
 
 var MAX_NAME_LENGTH = 30;
@@ -79847,15 +79798,15 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                 name: displayName,
                 type: 'line',
                 data: dataItem.x.map(function (x, j) { return [x, dataItem.y[j]]; }),
-                showLegend: false,
-                tooltip: { show: false },
+                showLegend: false, // Hide the outline series from the legend
+                tooltip: { show: false }, // This hides it from the tooltip
                 lineStyle: {
                     color: 'white',
                     width: 4,
                     type: 'solid'
                 },
-                silent: true,
-                symbol: 'none',
+                silent: true, // Don't trigger hover events on this series
+                symbol: 'none', // Remove the symbol/circle from the line
                 z: 1 // Set a low z-index for the background outline
             });
             // Add the main series on top
@@ -79875,7 +79826,7 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                 // Basically there is circle by default that echarts adds to line chart, but we add transparent circle
                 // If we set symbol to 'none', the hover effect doesn't work when user tries to get value of data point.
                 symbol: 'circle',
-                symbolSize: 6,
+                symbolSize: 6, // or your preferred size for easier hover
                 itemStyle: {
                     color: 'transparent' // hide the circle visually
                 },
@@ -79906,7 +79857,7 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                         : null
                     : chartType === ChartType.BAR
                         ? 'total'
-                        : null,
+                        : null, // Set stack for bar charts
                 data: dataItem.x.map(function (x, j) { return [x, dataItem.y[j]]; }),
                 showLegend: i < MAX_LEGENDS_SIZE,
                 lineStyle: {
@@ -79919,9 +79870,9 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                         ? 'transparent'
                         : NAME_COLOR_MAPPING[name] || COLORS[i % COLORS.length]
                 },
-                symbolSize: 6,
-                symbol: isDbClusterLoadView || isNodeClusterLoadView ? 'none' : 'circle',
-                z: 1,
+                symbolSize: 6, // or your preferred size for easier hover
+                symbol: isDbClusterLoadView || isNodeClusterLoadView ? 'none' : 'circle', // Remove the symbol/circle from the CPU Cores line
+                z: 1, // Default z-index for other series
                 emphasis: {
                     lineStyle: {
                         color: name === CPU_CORES
@@ -80064,9 +80015,9 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
         },
         legend: __assign(__assign({ type: 'scroll', orient: isDbClusterLoadView || isNodeClusterLoadView ? 'horizontal' : 'vertical', bottom: isDbClusterLoadView || isNodeClusterLoadView ? 4 : '10%' }, (!isDbClusterLoadView &&
             !isNodeClusterLoadView && {
-            left: '1%',
+            left: '1%', // Set legend to the left side
             top: '18%',
-            width: '250px',
+            width: '250px', // Set a fixed width for the legend
             height: '220px'
         })), { 
             // Controls the size (diameter) of the symbol (e.g., circle, square) used for each data point in the chart series
@@ -80102,7 +80053,7 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                         width: 24,
                         height: 0,
                         borderWidth: 1,
-                        borderColor: 'black',
+                        borderColor: 'black', // or your desired color for Queries
                         borderType: 'solid',
                         padding: [2, 4, 0, 0],
                         lineHeight: 14
@@ -80126,8 +80077,8 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
             } }),
         grid: {
             // left will ensure the chart starts from 270px (250px for legend + 20px for gap)
-            left: isDbClusterLoadView || isNodeClusterLoadView ? '3%' : '270px',
-            right: isDbClusterLoadView || isNodeClusterLoadView ? '4%' : '2%',
+            left: isDbClusterLoadView || isNodeClusterLoadView ? '3%' : '270px', // Adjust grid to make space for the 250px-wide legend + margin )
+            right: isDbClusterLoadView || isNodeClusterLoadView ? '4%' : '2%', // Ensure the chart stretches
             top: '22%',
             bottom: isDbClusterLoadView || isNodeClusterLoadView ? '20%' : '10%',
             containLabel: true
@@ -80135,9 +80086,9 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
         xAxis: {
             type: 'time',
             axisLabel: {
-                color: '#6D7C88',
+                color: '#6D7C88', // Use a dark color for better contrast
                 textStyle: {
-                    fontFamily: METRIC_FONT,
+                    fontFamily: METRIC_FONT, // or your preferred font
                     fontSize: 11.5 // set desired font size
                 },
                 formatter: function (value) {
@@ -80176,9 +80127,9 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
                 }
             },
             axisLabel: {
-                color: '#6D7C88',
+                color: '#6D7C88', // Use a dark color for better contrast
                 textStyle: {
-                    fontFamily: METRIC_FONT,
+                    fontFamily: METRIC_FONT, // or your preferred font
                     fontSize: 11.5 // set desired font size
                 },
                 precision: 0 // Enforce whole numbers for y-axis labels
@@ -80196,7 +80147,7 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
             // }
         },
         brush: {
-            toolbox: ['rect', 'polygon'],
+            toolbox: ['rect', 'polygon'], // enable rectangular selection brush (box select)
             xAxisIndex: 0,
             yAxisIndex: 0
         }
@@ -80556,18 +80507,18 @@ var PerfAdvisorClusterLoad = function (_a) {
             window.removeEventListener('resize', handleResize);
         };
     }, []);
-    return (jsxs(Fragment, { children: [!isDbClusterLoadView && !isNodeClusterLoadView && (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: "center", className: classes.groupByContainerYBM }, { children: [jsx("img", { src: TreeIcon, alt: "Tree Icon" }), jsx(Typography$1, __assign({ variant: "body2", className: classes.groupByText }, { children: 'Group by' })), jsx(YBSelect, __assign({ dataTestId: "PerfAdvisorClusterLoad-GroupBySelect", value: groupByOperation, className: clsx(classes.groupByOperationDropdown, classes.overrideDefaultMuiSelect, classes.overrideDefaultMuiFormControl) }, { children: GROUP_BY_OPERATIONS === null || GROUP_BY_OPERATIONS === void 0 ? void 0 : GROUP_BY_OPERATIONS.map(function (groupByOperation, groupByIdx) {
-                            return (jsx(MenuItem$1, __assign({ value: groupByOperation, onClick: function (event) {
+    return (jsxs(Fragment, { children: [!isDbClusterLoadView && !isNodeClusterLoadView && (jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: "center", className: classes.groupByContainerYBM, children: [jsx("img", { src: TreeIcon, alt: "Tree Icon" }), jsx(Typography$1, { variant: "body2", className: classes.groupByText, children: 'Group by' }), jsx(YBSelect, { dataTestId: "PerfAdvisorClusterLoad-GroupBySelect", value: groupByOperation, className: clsx(classes.groupByOperationDropdown, classes.overrideDefaultMuiSelect, classes.overrideDefaultMuiFormControl), children: GROUP_BY_OPERATIONS === null || GROUP_BY_OPERATIONS === void 0 ? void 0 : GROUP_BY_OPERATIONS.map(function (groupByOperation, groupByIdx) {
+                            return (jsx(MenuItem$1, { value: groupByOperation, onClick: function (event) {
                                     onSetGroupByOperation(groupByOperation);
                                     event.stopPropagation();
-                                } }, { children: GROUP_BY_OPERATIONS_LABELS[groupByOperation] }), "".concat(groupByOperation, "-").concat(groupByIdx)));
-                        }) }))] }))), jsx(Box$1, __assign({ mt: appName === AppName.WEB ? 2 : 0, className: clsx(appName === AppName.WEB ? undefined : classes.clusterLoadBoxYBM) }, { children: jsxs(Box$1, { children: [fetchClusterLoadGraph.isLoading && (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }))), fetchClusterLoadGraph.isError && (jsxs(Box$1, __assign({ mt: 3 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchClusterLoadGraphErrorMessage)
+                                }, children: GROUP_BY_OPERATIONS_LABELS[groupByOperation] }, "".concat(groupByOperation, "-").concat(groupByIdx)));
+                        }) })] })), jsx(Box$1, { mt: appName === AppName.WEB ? 2 : 0, className: clsx(appName === AppName.WEB ? undefined : classes.clusterLoadBoxYBM), children: jsxs(Box$1, { children: [fetchClusterLoadGraph.isLoading && (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })), fetchClusterLoadGraph.isError && (jsxs(Box$1, { mt: 3, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchClusterLoadGraphErrorMessage)
                                         ? fetchClusterLoadGraphErrorMessage
                                         : DEFAULT_ERROR_MESSAGES.CLUSTER_LOAD_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchClusterLoadGraphErrorMessage)
                                         ? fetchClusterLoadGraphErrorMessage
-                                        : DEFAULT_ERROR_MESSAGES.CLUSTER_LOAD_FETCH_ERROR }))] }))), jsxs(Box$1, { children: [fetchClusterLoadGraph.isSuccess && (jsxs(Box$1, __assign({ id: "".concat(metricKey, "-wrapper"), display: 'flex', flexDirection: 'row', className: clsx(appName === AppName.WEB ? classes.metricPanel : classes.metricPanelYBM), onClick: function (e) {
+                                        : DEFAULT_ERROR_MESSAGES.CLUSTER_LOAD_FETCH_ERROR }))] })), jsxs(Box$1, { children: [fetchClusterLoadGraph.isSuccess && (jsxs(Box$1, { id: "".concat(metricKey, "-wrapper"), display: 'flex', flexDirection: 'row', className: clsx(appName === AppName.WEB ? classes.metricPanel : classes.metricPanelYBM), onClick: function (e) {
                                         e.stopPropagation();
-                                    }, width: "100%" }, { children: [jsx("div", { ref: chartRef, id: metricKey, style: { flexGrow: 1, minWidth: 0 } }), isDbClusterLoadView && (jsx("div", __assign({ className: classes.groupByContainer }, { children: jsx(YBButtonGroup, { divider: true, value: chartType, buttons: chartTypeButtons, dataTestId: "PerfAdvisorClusterLoad-ChartTypeSelector" }) })))] }))), !isAshEnabled && (jsx(Box$1, __assign({ mt: 2, mb: 1.5 }, { children: jsx(ASHBanner, { isAshSupported: isAshSupported }) })))] })] }) }))] }));
+                                    }, width: "100%", children: [jsx("div", { ref: chartRef, id: metricKey, style: { flexGrow: 1, minWidth: 0 } }), isDbClusterLoadView && (jsx("div", { className: classes.groupByContainer, children: jsx(YBButtonGroup, { divider: true, value: chartType, buttons: chartTypeButtons, dataTestId: "PerfAdvisorClusterLoad-ChartTypeSelector" }) }))] })), !isAshEnabled && (jsx(Box$1, { mt: 2, mb: 1.5, children: jsx(ASHBanner, { isAshSupported: isAshSupported }) }))] })] }) })] }));
 };
 
 var NodeDrilldown = function (_a) {
@@ -80575,7 +80526,7 @@ var NodeDrilldown = function (_a) {
     var appName = _a.appName, dbWaitEventType = _a.dbWaitEventType, timezone = _a.timezone, apiUrl = _a.apiUrl, anomalyData = _a.anomalyData, metricMeasure = _a.metricMeasure, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, urlParams = _a.urlParams, dateTimeRange = _a.dateTimeRange, groupByOperation = _a.groupByOperation, onFilterBarData = _a.onFilterBarData, onChangeDbWaitEventType = _a.onChangeDbWaitEventType, getClusterDetails = _a.getClusterDetails, onOutlierTypeSelected = _a.onOutlierTypeSelected, onNumNodesChanged = _a.onNumNodesChanged, onEChartsDateSelect = _a.onEChartsDateSelect, onSetGroupByOperation = _a.onSetGroupByOperation, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
     // State variables
     var _p = getClusterDetails(), universeUuid = _p.universeUuid, numNodes = _p.numNodes, outlierType = _p.outlierType;
-    return (jsxs(Fragment, { children: [jsx(DbLoadHeader, { outlierType: outlierType, numNodes: numNodes, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onChangeDbWaitEventType: onChangeDbWaitEventType, waitEventType: dbWaitEventType, isDbClusterLoadView: false }), jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: false, isNodeClusterLoadView: true, startTime: (_c = (_b = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _b === void 0 ? void 0 : _b.toISOString()) !== null && _c !== void 0 ? _c : null, endTime: (_e = (_d = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _d === void 0 ? void 0 : _d.toISOString()) !== null && _e !== void 0 ? _e : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "node_drilldown_cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: true, isAshSupported: true, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), jsx(NodeLoadMetadata, { appName: appName, dbWaitEventType: dbWaitEventType, universeUuid: universeUuid, apiUrl: apiUrl, startTime: (_g = (_f = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _f === void 0 ? void 0 : _f.toISOString()) !== null && _g !== void 0 ? _g : null, endTime: (_j = (_h = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _h === void 0 ? void 0 : _h.toISOString()) !== null && _j !== void 0 ? _j : null, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl }), jsxs(Box$1, __assign({ mt: 2 }, { children: [jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Possible Causes' })), jsx(Box$1, __assign({ mt: 1 }, { children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: (_l = (_k = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _k === void 0 ? void 0 : _k.toISOString()) !== null && _l !== void 0 ? _l : null, endTime: (_o = (_m = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _m === void 0 ? void 0 : _m.toISOString()) !== null && _o !== void 0 ? _o : null, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) }))] }))] }));
+    return (jsxs(Fragment, { children: [jsx(DbLoadHeader, { outlierType: outlierType, numNodes: numNodes, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onChangeDbWaitEventType: onChangeDbWaitEventType, waitEventType: dbWaitEventType, isDbClusterLoadView: false }), jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: false, isNodeClusterLoadView: true, startTime: (_c = (_b = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _b === void 0 ? void 0 : _b.toISOString()) !== null && _c !== void 0 ? _c : null, endTime: (_e = (_d = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _d === void 0 ? void 0 : _d.toISOString()) !== null && _e !== void 0 ? _e : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "node_drilldown_cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: true, isAshSupported: true, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), jsx(NodeLoadMetadata, { appName: appName, dbWaitEventType: dbWaitEventType, universeUuid: universeUuid, apiUrl: apiUrl, startTime: (_g = (_f = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _f === void 0 ? void 0 : _f.toISOString()) !== null && _g !== void 0 ? _g : null, endTime: (_j = (_h = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _h === void 0 ? void 0 : _h.toISOString()) !== null && _j !== void 0 ? _j : null, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl }), jsxs(Box$1, { mt: 2, children: [jsx(Typography$1, { variant: "h5", children: 'Possible Causes' }), jsx(Box$1, { mt: 1, children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: (_l = (_k = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _k === void 0 ? void 0 : _k.toISOString()) !== null && _l !== void 0 ? _l : null, endTime: (_o = (_m = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _m === void 0 ? void 0 : _m.toISOString()) !== null && _o !== void 0 ? _o : null, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) })] })] }));
 };
 
 var PerfAdvisorGantChart = function (_a) {
@@ -80874,7 +80825,7 @@ var PerfAdvisorGantChart = function (_a) {
                 groups.push({
                     categoryLevel: 2,
                     id: secondLevelId,
-                    content: secondLevelName,
+                    content: secondLevelName, // No expand/collapse icon for background jobs level 2
                     parent: firstLevelCategory,
                     name: secondLevelName,
                     categoryCount: secondLevelData.totalCount || 0
@@ -80974,7 +80925,7 @@ var PerfAdvisorGantChart = function (_a) {
             var updatedGroups_1 = groups;
             if (showMoreOptions || isBackgroundJobs) {
                 var updatedGroups_2 = groups.map(function (group) {
-                    var _a, _b;
+                    var _a, _b, _c, _d;
                     // Check if the group has further descendants
                     var hasDescendants = ((_a = subCategoriesMap[group.id]) === null || _a === void 0 ? void 0 : _a.length) > 0;
                     // For background jobs, level 2 groups are not expandable
@@ -81064,11 +81015,11 @@ var PerfAdvisorGantChart = function (_a) {
                         : group.content;
                     var groupContent = '';
                     if (isLevel2BgJob) {
-                        var name_1 = group.name || '';
+                        var name_1 = (_c = group.name) !== null && _c !== void 0 ? _c : '';
                         groupContent = "<a title=\"".concat(name_1, "\">").concat(name_1, "</a>");
                     }
                     else if (hasDescendants) {
-                        var name_2 = group.name || '';
+                        var name_2 = (_d = group.name) !== null && _d !== void 0 ? _d : '';
                         var displayName = '';
                         if (name_2 && name_2.length > MAX_CHARS) {
                             displayName =
@@ -81304,10 +81255,10 @@ var PerfAdvisorGantChart = function (_a) {
                     }
                 }
                 if (clickedGroup === null || clickedGroup === void 0 ? void 0 : clickedGroup.uuid) {
-                    if (appName === AppName.YBM) {
+                    if (appName === AppName.YBM || appName === AppName.YBA) {
                         routeToSecondary(clickedGroup.uuid);
                     }
-                    else if (appName === AppName.WEB || appName === AppName.YBA) {
+                    else if (appName === AppName.WEB) {
                         handleRedirect(clickedGroup.uuid);
                     }
                 }
@@ -81419,9 +81370,9 @@ var PerfAdvisorGantChart = function (_a) {
             return el;
         }
     }
-    return (jsxs(Box$1, __assign({ id: name }, { children: [jsx("div", { ref: timelineRef, style: {
+    return (jsxs(Box$1, { id: name, children: [jsx("div", { ref: timelineRef, style: {
                     backgroundColor: '#FFFFFF'
-                } }, name), jsx("style", { children: "\n          .vis-foreground .vis-group {\n            border-bottom: none;\n          }\n          .vis-foreground .vis-group.custom-group-row-1 {\n            top: 8px;\n          }\n          .vis-foreground .vis-group.parent-category {\n             border-top: 1px solid #E0E0E0 !important; /* Or whatever you want */\n          }\n          .vis-labelset .vis-label {\n            border-right: 0px solid #ccc !important;\n            border-bottom: none;\n            border-top: none;\n          }\n          .vis-timeline {\n            background-color: #FFFFFF !important;\n            border: 0px solid #ccc !important;\n            visibility: visible !important;\n          }\n          .vis-panel.vis-top {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-bottom {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-left {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-inner a {\n            cursor: pointer;\n            letter-spacing: 0.3px;\n            text-decoration: none !important;\n            outline: none !important;\n            color: unset !important;\n            &:focus {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n            &:hover {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n          }\n          .vis-labelset .vis-label .vis-inner {\n            padding: 0px;\n          }\n          .vis-inner span {\n            padding: 2px 6px 2px 6px;\n            height: 20px;\n            width: fit-content;\n            font-size: 11.5px;\n            line-height: 16px;\n            font-family: Inter;\n            font-weight: 500;\n            border-radius: 4px;\n          }\n          .vis-item.vis-range .vis-item-content {\n            display: none;\n          }\n          .vis-item.vis-range {\n            top: 10px !important;\n            border-style: unset;\n            border-radius: 8px;\n          }\n          .vis-labelset.my-custom-labelset-rca {\n            width: 0px;\n          }\n          .vis-labelset {\n            width: 250px;\n          }\n          .vis-inner {\n            display: flex !important;\n            justify-content: space-between;\n            align-items: center;\n          }\n          .vis-time-axis .vis-grid.vis-vertical {\n            border-left: 1px dashed !important;\n            color: #D7DEE4;\n          }\n          .vis-time-axis .vis-grid.vis-horizontal {\n            display: none !important;\n          }\n          .vis-panel.vis-center {\n            border-left-style: dashed !important;\n            border-right-style: dashed !important;\n            border-top-color: #D7DEE4;\n            top: 1px !important;\n            margin-left: 8px;\n            left: 254px !important;\n          }\n          .vis-panel.vis-center.my-custom-center-panel-rca {\n            left: 0px !important;\n          }\n          .vis-time-axis .vis-grid.vis-major {\n            border-color: #e5e5e5 !important;\n          }\n          .custom-group-separator-left {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n            margin-top: 2px;\n          }\n            .custom-group-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n          }\n          .custom-group-separator-bottom {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .custom-group-separator-top {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .item-separator {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            margin-top: 2px;\n          }\n          .item-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n          }\n          .vis-label.custom-group-row-1 .vis-inner {\n            padding-top: 16px;\n            padding-bottom: 16px;\n          }\n          .vis-label.custom-group-row-2 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-foreground .vis-group.custom-group-row {\n            border-bottom: 1px solid #D7DEE4;\n            bottom: 3px;\n          }\n          .vis-label.custom-group-row .vis-inner .category-deeplink {\n            text-decoration: underline !important;\n          }\n          .vis-label.custom-group-row-2 .vis-inner .category-badge-2 {\n            margin-right: 40px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-badge-3 {\n            margin-right: 44px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-deeplink {\n            margin-left: 24px;\n            text-decoration: underline !important;\n          }\n          .vis-label.db-background .vis-inner .db-inner-background {\n            background-color: #E8E9FE !important;\n            color: #30307F !important;\n          }\n          .vis-label.node-background .vis-inner .node-inner-background {\n            background-color: #FFEEC8 !important;\n            color: #9D6C00 !important;\n          }\n          .vis-label.sql-background .vis-inner .sql-inner-background {\n            background-color: rgba(187, 66, 188, 0.15) !important;\n            color: #7D2777 !important;\n          }\n          .vis-label.app-background .vis-inner .app-inner-background {\n            background-color: #D7EFF4 !important;\n            color: #2B59C3 !important;\n          }\n          .vis-label.infra-background .vis-inner .infra-inner-background {\n            background-color: #c1ccec !important;\n            color: #507ce1 !important;\n          }\n          .vis-label.bg-jobs-background .vis-inner .bg-jobs-inner-background {\n            background-color: #E9EEF2 !important;\n            color: #4E5F6D !important;\n          }\n          .vis-time-axis .vis-text {\n            font-family: Inter;\n            font-size: 11px;\n            font-weight: 400;\n          }\n        " })] }), name));
+                } }, name), jsx("style", { children: "\n          .vis-foreground .vis-group {\n            border-bottom: none;\n          }\n          .vis-foreground .vis-group.custom-group-row-1 {\n            top: 8px;\n          }\n          .vis-foreground .vis-group.parent-category {\n             border-top: 1px solid #E0E0E0 !important; /* Or whatever you want */\n          }\n          .vis-labelset .vis-label {\n            border-right: 0px solid #ccc !important;\n            border-bottom: none;\n            border-top: none;\n          }\n          .vis-timeline {\n            background-color: #FFFFFF !important;\n            border: 0px solid #ccc !important;\n            visibility: visible !important;\n          }\n          .vis-panel.vis-top {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-bottom {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-left {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-inner a {\n            cursor: pointer;\n            letter-spacing: 0.3px;\n            text-decoration: none !important;\n            outline: none !important;\n            color: unset !important;\n            &:focus {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n            &:hover {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n          }\n          .vis-labelset .vis-label .vis-inner {\n            padding: 0px;\n          }\n          .vis-inner span {\n            padding: 2px 6px 2px 6px;\n            height: 20px;\n            width: fit-content;\n            font-size: 11.5px;\n            line-height: 16px;\n            font-family: Inter;\n            font-weight: 500;\n            border-radius: 4px;\n          }\n          .vis-item.vis-range .vis-item-content {\n            display: none;\n          }\n          .vis-item.vis-range {\n            top: 10px !important;\n            border-style: unset;\n            border-radius: 8px;\n          }\n          .vis-labelset.my-custom-labelset-rca {\n            width: 0px;\n          }\n          .vis-labelset {\n            width: 250px;\n          }\n          .vis-inner {\n            display: flex !important;\n            justify-content: space-between;\n            align-items: center;\n          }\n          .vis-time-axis .vis-grid.vis-vertical {\n            border-left: 1px dashed !important;\n            color: #D7DEE4;\n          }\n          .vis-time-axis .vis-grid.vis-horizontal {\n            display: none !important;\n          }\n          .vis-panel.vis-center {\n            border-left-style: dashed !important;\n            border-right-style: dashed !important;\n            border-top-color: #D7DEE4;\n            top: 1px !important;\n            margin-left: 8px;\n            left: 254px !important;\n          }\n          .vis-panel.vis-center.my-custom-center-panel-rca {\n            left: 0px !important;\n          }\n          .vis-time-axis .vis-grid.vis-major {\n            border-color: #e5e5e5 !important;\n          }\n          .custom-group-separator-left {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n            margin-top: 2px;\n          }\n            .custom-group-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n          }\n          .custom-group-separator-bottom {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .custom-group-separator-top {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .item-separator {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            margin-top: 2px;\n          }\n          .item-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n          }\n          .vis-label.custom-group-row-1 .vis-inner {\n            padding-top: 16px;\n            padding-bottom: 16px;\n          }\n          .vis-label.custom-group-row-2 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-foreground .vis-group.custom-group-row {\n            border-bottom: 1px solid #D7DEE4;\n            bottom: 3px;\n          }\n          .vis-label.custom-group-row .vis-inner .category-deeplink {\n            text-decoration: underline !important;\n          }\n          .vis-label.custom-group-row-2 .vis-inner .category-badge-2 {\n            margin-right: 40px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-badge-3 {\n            margin-right: 44px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-deeplink {\n            margin-left: 24px;\n            text-decoration: underline !important;\n          }\n          .vis-label.db-background .vis-inner .db-inner-background {\n            background-color: #E8E9FE !important;\n            color: #30307F !important;\n          }\n          .vis-label.node-background .vis-inner .node-inner-background {\n            background-color: #FFEEC8 !important;\n            color: #9D6C00 !important;\n          }\n          .vis-label.sql-background .vis-inner .sql-inner-background {\n            background-color: rgba(187, 66, 188, 0.15) !important;\n            color: #7D2777 !important;\n          }\n          .vis-label.app-background .vis-inner .app-inner-background {\n            background-color: #D7EFF4 !important;\n            color: #2B59C3 !important;\n          }\n          .vis-label.infra-background .vis-inner .infra-inner-background {\n            background-color: #c1ccec !important;\n            color: #507ce1 !important;\n          }\n          .vis-label.bg-jobs-background .vis-inner .bg-jobs-inner-background {\n            background-color: #E9EEF2 !important;\n            color: #4E5F6D !important;\n          }\n          .vis-time-axis .vis-text {\n            font-family: Inter;\n            font-size: 11px;\n            font-weight: 400;\n          }\n        " })] }, name));
 };
 
 var YBStyledTab$2 = styled$1(YBTab)(function (_a) {
@@ -81524,9 +81475,9 @@ var OtherDrilldown = function (_a) {
     });
     var fetchAnomalyGraphsErrorMessage = (_d = (_c = (_b = fetchAnomalyGraphs === null || fetchAnomalyGraphs === void 0 ? void 0 : fetchAnomalyGraphs.error) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error;
     var renderGraphs = function (graphResponseData, uniqueOperations, groupByOperations, graphType, index, graphTitle) {
-        return (jsx(Box$1, __assign({ mr: 8 }, { children: jsx(GraphView, { metricData: graphResponseData, metricKey: graphResponseData.name, graphTitle: graphTitle, containerWidth: null, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, operations: uniqueOperations, groupByOperations: groupByOperations, registerChartInstance: function (instance) {
+        return (jsx(Box$1, { mr: 8, children: jsx(GraphView, { metricData: graphResponseData, metricKey: graphResponseData.name, graphTitle: graphTitle, containerWidth: null, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, operations: uniqueOperations, groupByOperations: groupByOperations, registerChartInstance: function (instance) {
                     return registerChartInstance(instance, index);
-                }, appName: appName, graphType: graphType, timezone: timezone, queryData: universeQueryData, onSelectAshLabel: onSelectAshLabel, onEChartsDateSelect: onEChartsDateSelect }, "".concat(metricMeasure, "-").concat(graphResponseData.name)) })));
+                }, appName: appName, graphType: graphType, timezone: timezone, queryData: universeQueryData, onSelectAshLabel: onSelectAshLabel, onEChartsDateSelect: onEChartsDateSelect }, "".concat(metricMeasure, "-").concat(graphResponseData.name)) }));
     };
     var filteredRecommendationMetrics = formattedAnomalyRca === null || formattedAnomalyRca === void 0 ? void 0 : formattedAnomalyRca.filter(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 0; });
     // Reset chart instances on metricMeasure change
@@ -81546,11 +81497,11 @@ var OtherDrilldown = function (_a) {
             disconnect(chartInstancesRef.current);
         };
     }, [fetchAnomalyGraphs.isSuccess, RCAGraphResponseData, selectedTab]);
-    return (jsx(Box$1, __assign({ mt: 2 }, { children: jsxs(Fragment, { children: [fetchAnomalyGraphs.isLoading && (jsx(Box$1, __assign({ mt: 2, className: classes.loadingBox }, { children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) }))), fetchAnomalyGraphs.isError && (jsxs(Box$1, __assign({ mt: 4 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
+    return (jsx(Box$1, { mt: 2, children: jsxs(Fragment, { children: [fetchAnomalyGraphs.isLoading && (jsx(Box$1, { mt: 2, className: classes.loadingBox, children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) })), fetchAnomalyGraphs.isError && (jsxs(Box$1, { mt: 4, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
                                 ? fetchAnomalyGraphsErrorMessage
                                 : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchAnomalyGraphsErrorMessage)
                                 ? fetchAnomalyGraphsErrorMessage
-                                : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR }))] }))), fetchAnomalyGraphs.isSuccess && (jsxs(Box$1, { children: [isNonEmptyArray(RCAGraphResponseData) &&
+                                : DEFAULT_ERROR_MESSAGES.RCA_GRAPHS_FETCH_ERROR }))] })), fetchAnomalyGraphs.isSuccess && (jsxs(Box$1, { children: [isNonEmptyArray(RCAGraphResponseData) &&
                             isNonEmptyArray((_e = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _e === void 0 ? void 0 : _e.mainGraphs) &&
                             ((_f = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _f === void 0 ? void 0 : _f.mainGraphs.map(function (graph, mainGraphIdx) {
                                 var _a, _b, _c;
@@ -81562,27 +81513,27 @@ var OtherDrilldown = function (_a) {
                                 var operations = metricMeasure === MetricMeasure.OVERALL
                                     ? { uniqueOperations: [], groupByOperations: [] }
                                     : getOperations(metricMeasure, metricData, GraphType.MAIN_RCA, shouldShowGroupbyOperations, amomalyGraphRequestParams);
-                                return (jsxs(Box$1, __assign({ className: classes.mainGraphBox }, { children: [jsx(Box$1, __assign({ className: classes.mainGraphMetadataBox }, { children: jsxs(Box$1, __assign({ className: classes.anomalyMetadataOneBox }, { children: [jsx("span", __assign({ className: classes.headerTitle }, { children: ANOMALY_TAG })), jsx("span", __assign({ className: classes.metadataDetails }, { children: (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.title })), jsx("span", __assign({ className: clsx(classes.regularMetadata, ((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) === AnomalyCategory.SQL &&
-                                                            classes.restrictLines) }, { children: (_c = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.summary }))] })) })), jsx(Box$1, __assign({ className: classes.boxContainer }, { children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, GraphType.MAIN_RCA, mainGraphIdx + 10 // Using a arbitary index for main graph to avoid ECharts connect issues for legends syncing
-                                            ) }))] })));
-                            })), jsxs(Box$1, __assign({ mt: 2, mb: 1, className: classes.ghantChartContainer }, { children: [gantChartData.isLoading && (jsx(Box$1, __assign({ mt: 2, className: classes.loadingBox }, { children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) }))), gantChartData.isError && ((_h = (_g = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.status) !== 404 && (jsxs(Box$1, __assign({ mt: 2 }, { children: [(appName === AppName.WEB || appName === AppName.YBA) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_l = (_k = (_j = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _j === void 0 ? void 0 : _j.response) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.error)
+                                return (jsxs(Box$1, { className: classes.mainGraphBox, children: [jsx(Box$1, { className: classes.mainGraphMetadataBox, children: jsxs(Box$1, { className: classes.anomalyMetadataOneBox, children: [jsx("span", { className: classes.headerTitle, children: ANOMALY_TAG }), jsx("span", { className: classes.metadataDetails, children: (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.title }), jsx("span", { className: clsx(classes.regularMetadata, ((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) === AnomalyCategory.SQL &&
+                                                            classes.restrictLines), children: (_c = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.summary })] }) }), jsx(Box$1, { className: classes.boxContainer, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, GraphType.MAIN_RCA, mainGraphIdx + 10 // Using a arbitary index for main graph to avoid ECharts connect issues for legends syncing
+                                            ) })] }));
+                            })), jsxs(Box$1, { mt: 2, mb: 1, className: classes.ghantChartContainer, children: [gantChartData.isLoading && (jsx(Box$1, { mt: 2, className: classes.loadingBox, children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) })), gantChartData.isError && ((_h = (_g = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _g === void 0 ? void 0 : _g.response) === null || _h === void 0 ? void 0 : _h.status) !== 404 && (jsxs(Box$1, { mt: 2, children: [(appName === AppName.WEB || appName === AppName.YBA) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_l = (_k = (_j = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _j === void 0 ? void 0 : _j.response) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.error)
                                                 ? (_p = (_o = (_m = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _m === void 0 ? void 0 : _m.response) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.error
                                                 : DEFAULT_ERROR_MESSAGES.GANTCHART_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_s = (_r = (_q = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _q === void 0 ? void 0 : _q.response) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.error)
                                                 ? (_v = (_u = (_t = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _t === void 0 ? void 0 : _t.response) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.error
-                                                : DEFAULT_ERROR_MESSAGES.GANTCHART_FETCH_ERROR }))] }))), (gantChartData.isSuccess ||
+                                                : DEFAULT_ERROR_MESSAGES.GANTCHART_FETCH_ERROR }))] })), (gantChartData.isSuccess ||
                                     (gantChartData.isError && ((_x = (_w = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _w === void 0 ? void 0 : _w.response) === null || _x === void 0 ? void 0 : _x.status) === 404)) &&
-                                    (isNonEmptyObject(anomalyGantData) ? (jsx(Box$1, __assign({ className: classes.rcaGantChartBox }, { children: jsx(PerfAdvisorGantChart, { sourceData: gantChartData.isError && ((_z = (_y = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _y === void 0 ? void 0 : _y.response) === null || _z === void 0 ? void 0 : _z.status) === 404
+                                    (isNonEmptyObject(anomalyGantData) ? (jsx(Box$1, { className: classes.rcaGantChartBox, children: jsx(PerfAdvisorGantChart, { sourceData: gantChartData.isError && ((_z = (_y = gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.error) === null || _y === void 0 ? void 0 : _y.response) === null || _z === void 0 ? void 0 : _z.status) === 404
                                                 ? []
-                                                : [anomalyGantData], name: RCA_GANT_CHART, showMoreOptions: false, expandAll: true, startTime: (_0 = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _0 === void 0 ? void 0 : _0.toISOString(), endTime: (_1 = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _1 === void 0 ? void 0 : _1.toISOString(), onSelectedIssue: onSelectedIssue, appName: appName, showMultiline: false }, RCA_GANT_CHART) }))) : (jsxs(Box$1, __assign({ mt: 2 }, { children: [(appName === AppName.WEB || appName === AppName.YBA) && (jsx("span", { children: 'Failed to fetch anomaly data, please try again.' })), appName === AppName.YBM && (jsx(GenericFailure, { text: 'Failed to fetch anomaly data, please try again.' }))] }))))] })), isNonEmptyArray(RCAGraphResponseData) &&
-                            isNonEmptyArray(filteredRecommendationMetrics) && (jsxs(Box$1, __assign({ mt: 2 }, { children: [jsx(YBTabs, __assign({ pill: true, value: selectedTab, onChange: handleTabChange }, { children: filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, index) { return (jsx(YBStyledTab$2, { value: index, label: item.cause, className: classes.causeTabButton }, index)); }) })), filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, recIndex) {
+                                                : [anomalyGantData], name: RCA_GANT_CHART, showMoreOptions: false, expandAll: true, startTime: (_0 = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _0 === void 0 ? void 0 : _0.toISOString(), endTime: (_1 = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _1 === void 0 ? void 0 : _1.toISOString(), onSelectedIssue: onSelectedIssue, appName: appName, showMultiline: false }, RCA_GANT_CHART) })) : (jsxs(Box$1, { mt: 2, children: [(appName === AppName.WEB || appName === AppName.YBA) && (jsx("span", { children: 'Failed to fetch anomaly data, please try again.' })), appName === AppName.YBM && (jsx(GenericFailure, { text: 'Failed to fetch anomaly data, please try again.' }))] })))] }), isNonEmptyArray(RCAGraphResponseData) &&
+                            isNonEmptyArray(filteredRecommendationMetrics) && (jsxs(Box$1, { mt: 2, children: [jsx(YBTabs, { pill: true, value: selectedTab, onChange: handleTabChange, children: filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, index) { return (jsx(YBStyledTab$2, { value: index, label: item.cause, className: classes.causeTabButton }, index)); }) }), filteredRecommendationMetrics === null || filteredRecommendationMetrics === void 0 ? void 0 : filteredRecommendationMetrics.map(function (item, recIndex) {
                                     var _a, _b;
-                                    return (jsx(Box$1, __assign({ role: "tabpanel", hidden: selectedTab !== recIndex, id: "tabpanel-".concat(recIndex), "aria-labelledby": "tab-".concat(recIndex), style: {
+                                    return (jsx(Box$1, { role: "tabpanel", hidden: selectedTab !== recIndex, id: "tabpanel-".concat(recIndex), "aria-labelledby": "tab-".concat(recIndex), style: {
                                             border: '1px solid #E9EEF2',
                                             borderRadius: '8px',
                                             padding: '16px'
-                                        } }, { children: selectedTab === recIndex && (jsxs(Box$1, __assign({ mt: 2, display: 'flex', flexDirection: 'column' }, { children: [jsx("span", __assign({ className: classes.causeText }, { children: item.cause })), jsxs(Box$1, { children: [jsx("img", { src: UnderIcon, alt: "path" }), jsx("span", __assign({ className: classes.descriptionText }, { children: item.description }))] }), jsx(Box$1, __assign({ mt: 2, className: ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 1
+                                        }, children: selectedTab === recIndex && (jsxs(Box$1, { mt: 2, display: 'flex', flexDirection: 'column', children: [jsx("span", { className: classes.causeText, children: item.cause }), jsxs(Box$1, { children: [jsx("img", { src: UnderIcon, alt: "path" }), jsx("span", { className: classes.descriptionText, children: item.description })] }), jsx(Box$1, { mt: 2, className: ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) > 1
                                                         ? clsx(classes.gridBox, classes.gridBoxDouble)
-                                                        : '' }, { children: (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.map(function (metricName, index) {
+                                                        : '', children: (_b = item === null || item === void 0 ? void 0 : item.name) === null || _b === void 0 ? void 0 : _b.map(function (metricName, index) {
                                                         var _a, _b, _c;
                                                         var metricData = RCAGraphResponseData === null || RCAGraphResponseData === void 0 ? void 0 : RCAGraphResponseData.find(function (data, graphIdx) {
                                                             return (graphIdx > 0 &&
@@ -81596,16 +81547,16 @@ var OtherDrilldown = function (_a) {
                                                         }
                                                         else {
                                                             var operations = getOperations(metricMeasure, metricData, GraphType.MULTI_SUPPORTING, shouldShowGroupbyOperations, amomalyGraphRequestParams);
-                                                            return (jsx(Box$1, __assign({ style: {
+                                                            return (jsx(Box$1, { style: {
                                                                     border: '1px solid #E9EEF2',
                                                                     borderRadius: '8px',
                                                                     marginRight: isOnlyReason ? '0px' : '16px'
-                                                                } }, { children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
+                                                                }, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
                                                                     ? GraphType.SINGLE_SUPPORTING
-                                                                    : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) })));
+                                                                    : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) }));
                                                         }
-                                                    }) }))] }))) }), recIndex));
-                                })] })))] }))] }) })));
+                                                    }) })] })) }, recIndex));
+                                })] }))] }))] }) }));
 };
 
 var useStyles$c = makeStyles$1(function (theme) { return ({
@@ -81673,11 +81624,11 @@ var TabletLevelQueryMetadata = function (_a) {
     var onSetGroupByOperation = function (operation) {
         setGroupByOperation(operation);
     };
-    return (jsxs(Box$1, __assign({ className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), p: 2 }, { children: [jsx(Box$1, __assign({ className: classes.headerContainer }, { children: jsx(Typography$1, __assign({ variant: "h5" }, { children: isHotTablet ? 'Hot Tablet Queries' : 'Large Tablet Queries' })) })), jsxs(Box$1, __assign({ className: helperClasses.mainContainer, p: 2, mt: 2 }, { children: [jsxs(Box$1, __assign({ display: 'flex', flexDirection: 'column' }, { children: [jsx(YBLabel, { children: TABLET_ID_TAG }), jsx(Typography$1, __assign({ variant: "h5", style: { marginTop: '4px' } }, { children: tabletId }))] })), jsxs(Box$1, __assign({ className: classes.metadataContainer, mt: 3 }, { children: [jsxs(Box$1, __assign({ className: classes.metadataItem }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.WAIT_EVENT_TYPES }) })), jsx(Box$1, __assign({ className: classes.metadataValue, style: { minWidth: 0, maxWidth: '100%' } }, { children: jsx(QueryEventsChart, { data: events, maxEPS: 1, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE, isTabletAnomaly: true }) }))] })), jsxs(Box$1, __assign({ className: classes.metadataItem }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.TOTAL_LOAD }) })), jsx(Box$1, __assign({ className: classes.metadataValue }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: Number.isFinite(Number(totalEpsRatio))
+    return (jsxs(Box$1, { className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), p: 2, children: [jsx(Box$1, { className: classes.headerContainer, children: jsx(Typography$1, { variant: "h5", children: isHotTablet ? 'Hot Tablet Queries' : 'Large Tablet Queries' }) }), jsxs(Box$1, { className: helperClasses.mainContainer, p: 2, mt: 2, children: [jsxs(Box$1, { display: 'flex', flexDirection: 'column', children: [jsx(YBLabel, { children: TABLET_ID_TAG }), jsx(Typography$1, { variant: "h5", style: { marginTop: '4px' }, children: tabletId })] }), jsxs(Box$1, { className: classes.metadataContainer, mt: 3, children: [jsxs(Box$1, { className: classes.metadataItem, children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.WAIT_EVENT_TYPES }) }), jsx(Box$1, { className: classes.metadataValue, style: { minWidth: 0, maxWidth: '100%' }, children: jsx(QueryEventsChart, { data: events, maxEPS: 1, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE, isTabletAnomaly: true }) })] }), jsxs(Box$1, { className: classes.metadataItem, children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.TOTAL_LOAD }) }), jsx(Box$1, { className: classes.metadataValue, children: jsx(Typography$1, { variant: "body2", children: Number.isFinite(Number(totalEpsRatio))
                                                 ? "".concat((Number(totalEpsRatio) * 100).toLocaleString(undefined, {
                                                     maximumFractionDigits: 2
                                                 }), "%")
-                                                : '-' })) }))] })), jsxs(Box$1, __assign({ className: classes.metadataItem }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.AAS }) })), jsx(Box$1, __assign({ className: classes.metadataValue }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: Number(eps) ? Number(eps).toLocaleString() : '0.0' })) }))] })), jsxs(Box$1, __assign({ className: classes.metadataItem }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.SIZE }) })), jsx(Box$1, __assign({ className: classes.metadataValue }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: formatBytes(size) })) }))] })), jsxs(Box$1, __assign({ className: clsx(classes.metadataItem, classes.metadataItemWider) }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.TABLET_RANGE }) })), jsx(Box$1, __assign({ className: classes.metadataValue }, { children: isNonEmptyString(partition) ? (jsx(YBTooltip, __assign({ arrow: true, placement: "top", title: partition }, { children: jsx(Typography$1, __assign({ variant: "body2", className: classes.truncatedText }, { children: truncateText$1(partition, 25) })) }))) : (jsx(Typography$1, __assign({ variant: "body2" }, { children: "-" }))) }))] })), jsxs(Box$1, __assign({ className: clsx(classes.metadataItem, classes.metadataItemWider) }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.LEADER_NODE }) })), jsx(Box$1, __assign({ className: classes.metadataValue }, { children: !!leaderNode ? (jsx(YBTooltip, __assign({ title: leaderNode, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ className: classes.truncatedTagWrapper }, { children: jsx(YBTag, __assign({ variant: "light", size: 'medium' }, { children: jsx("span", __assign({ className: classes.truncatedTagContent }, { children: truncateText$1(leaderNode, 20) })) })) })) }))) : (jsx(Typography$1, __assign({ variant: "body2" }, { children: "-" }))) }))] })), jsxs(Box$1, __assign({ className: clsx(classes.metadataItem, classes.metadataItemWider) }, { children: [jsx(Box$1, __assign({ className: classes.metadataLabel }, { children: jsx(YBLabel, { children: METADATA_LABELS.FOLLOWER_NODES }) })), jsx(Box$1, __assign({ className: classes.metadataValue, flexWrap: "wrap" }, { children: !!followerNodes && (followerNodes === null || followerNodes === void 0 ? void 0 : followerNodes.length) > 0 ? (jsx(YBTooltip, __assign({ arrow: true, placement: "top", title: followerNodes.join(',\n') }, { children: jsxs(Box$1, __assign({ display: "flex", alignItems: "center", flexWrap: "wrap" }, { children: [jsx(Box$1, __assign({ className: classes.truncatedTagWrapper }, { children: jsx(YBTag, __assign({ variant: "light", size: 'medium' }, { children: jsx("span", __assign({ className: classes.truncatedTagContent }, { children: truncateText$1(followerNodes[0], 20) })) })) })), followerNodes.length >= 2 && (jsx(YBTag, __assign({ customSx: { marginLeft: '4px' }, variant: "light", size: 'medium' }, { children: jsx("span", { children: "+".concat(followerNodes.length - 1) }) })))] })) }))) : (jsx(Typography$1, __assign({ variant: "body2" }, { children: "-" }))) }))] }))] })), jsx(Box$1, { children: jsx(QueriesMetadata, { groupByOperation: groupByOperation, dbWaitEventType: ALL.toUpperCase(), universeUuid: universeUuid, name: tabletId, apiUrl: apiUrl, appName: appName, startTime: startTime, endTime: endTime, onSelectedQuery: onSelectedQuery, isDbLoadMetadata: false, isNodeLoadMetadata: false, isTabletLoadMetadata: true, onSetGroupByOperation: onSetGroupByOperation, onNavigateToUrl: onNavigateToUrl }) })] }))] })));
+                                                : '-' }) })] }), jsxs(Box$1, { className: classes.metadataItem, children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.AAS }) }), jsx(Box$1, { className: classes.metadataValue, children: jsx(Typography$1, { variant: "body2", children: Number(eps) ? Number(eps).toLocaleString() : '0.0' }) })] }), jsxs(Box$1, { className: classes.metadataItem, children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.SIZE }) }), jsx(Box$1, { className: classes.metadataValue, children: jsx(Typography$1, { variant: "body2", children: formatBytes(size) }) })] }), jsxs(Box$1, { className: clsx(classes.metadataItem, classes.metadataItemWider), children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.TABLET_RANGE }) }), jsx(Box$1, { className: classes.metadataValue, children: isNonEmptyString(partition) ? (jsx(YBTooltip, { arrow: true, placement: "top", title: partition, children: jsx(Typography$1, { variant: "body2", className: classes.truncatedText, children: truncateText$1(partition, 25) }) })) : (jsx(Typography$1, { variant: "body2", children: "-" })) })] }), jsxs(Box$1, { className: clsx(classes.metadataItem, classes.metadataItemWider), children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.LEADER_NODE }) }), jsx(Box$1, { className: classes.metadataValue, children: !!leaderNode ? (jsx(YBTooltip, { title: leaderNode, placement: "top", arrow: true, children: jsx(Box$1, { className: classes.truncatedTagWrapper, children: jsx(YBTag, { variant: "light", size: 'medium', children: jsx("span", { className: classes.truncatedTagContent, children: truncateText$1(leaderNode, 20) }) }) }) })) : (jsx(Typography$1, { variant: "body2", children: "-" })) })] }), jsxs(Box$1, { className: clsx(classes.metadataItem, classes.metadataItemWider), children: [jsx(Box$1, { className: classes.metadataLabel, children: jsx(YBLabel, { children: METADATA_LABELS.FOLLOWER_NODES }) }), jsx(Box$1, { className: classes.metadataValue, flexWrap: "wrap", children: !!followerNodes && (followerNodes === null || followerNodes === void 0 ? void 0 : followerNodes.length) > 0 ? (jsx(YBTooltip, { arrow: true, placement: "top", title: followerNodes.join(',\n'), children: jsxs(Box$1, { display: "flex", alignItems: "center", flexWrap: "wrap", children: [jsx(Box$1, { className: classes.truncatedTagWrapper, children: jsx(YBTag, { variant: "light", size: 'medium', children: jsx("span", { className: classes.truncatedTagContent, children: truncateText$1(followerNodes[0], 20) }) }) }), followerNodes.length >= 2 && (jsx(YBTag, { customSx: { marginLeft: '4px' }, variant: "light", size: 'medium', children: jsx("span", { children: "+".concat(followerNodes.length - 1) }) }))] }) })) : (jsx(Typography$1, { variant: "body2", children: "-" })) })] })] }), jsx(Box$1, { children: jsx(QueriesMetadata, { groupByOperation: groupByOperation, dbWaitEventType: ALL.toUpperCase(), universeUuid: universeUuid, name: tabletId, apiUrl: apiUrl, appName: appName, startTime: startTime, endTime: endTime, onSelectedQuery: onSelectedQuery, isDbLoadMetadata: false, isNodeLoadMetadata: false, isTabletLoadMetadata: true, onSetGroupByOperation: onSetGroupByOperation, onNavigateToUrl: onNavigateToUrl }) })] })] }));
 };
 
 var TOP_MARGIN = 10;
@@ -81756,7 +81707,7 @@ var SizeBarChart = function (_a) {
             },
             yAxis: {
                 type: 'category',
-                data: [''],
+                data: [''], // single row
                 show: false
             },
             series: series
@@ -81781,22 +81732,22 @@ var SizeBarChart = function (_a) {
     var sizeRatio = Math.min(size / maxSize, 1); // Cap at 1 for max size
     // Use a percentage width based on the ratio, with a minimum width to ensure visibility
     var containerWidthPercent = Math.max(sizeRatio * 100, 10); // At least 10% width
-    return (jsxs(Box$1, __assign({ display: "flex", flexDirection: "row", alignItems: "center", style: {
+    return (jsxs(Box$1, { display: "flex", flexDirection: "row", alignItems: "center", style: {
             width: '100%',
             height: "".concat(barHeight, "px")
-        } }, { children: [jsx("div", { className: "size-bar-chart-container", ref: chartRef, style: {
+        }, children: [jsx("div", { className: "size-bar-chart-container", ref: chartRef, style: {
                     height: "".concat(barHeight, "px"),
                     width: "".concat(containerWidthPercent, "%"),
-                    minWidth: '30px',
+                    minWidth: '30px', // Ensure minimum width for very small bars
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'flex-start'
-                } }), jsx(Box$1, __assign({ style: {
+                } }), jsx(Box$1, { style: {
                     marginLeft: '4px',
                     fontSize: '11.5px',
                     color: '#0B1117',
                     whiteSpace: 'nowrap'
-                } }, { children: formattedSize }))] })));
+                }, children: formattedSize })] }));
 };
 
 var _path;
@@ -82031,7 +81982,7 @@ var TabletMetadata = function (_a) {
                     sort: false,
                     display: true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TABLET_ID_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.TABLET_ID })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TABLET_ID_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.TABLET_ID }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -82044,7 +81995,7 @@ var TabletMetadata = function (_a) {
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        return (jsxs(Box$1, __assign({ display: "flex", flexDirection: 'row', alignItems: 'center' }, { children: [jsx("span", { children: isNonEmptyString(value) ? value : '-' }), !isHotTablet && value === (anomalyTabletData === null || anomalyTabletData === void 0 ? void 0 : anomalyTabletData.tabletId) && (jsx(SvgAlertCircle, { style: { marginLeft: '4px' } }))] })));
+                        return (jsxs(Box$1, { display: "flex", flexDirection: 'row', alignItems: 'center', children: [jsx("span", { children: isNonEmptyString(value) ? value : '-' }), !isHotTablet && value === (anomalyTabletData === null || anomalyTabletData === void 0 ? void 0 : anomalyTabletData.tabletId) && (jsx(SvgAlertCircle, { style: { marginLeft: '4px' } }))] }));
                     }
                 }
             },
@@ -82067,7 +82018,7 @@ var TabletMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.SIZE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.SIZE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.SIZE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.SIZE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         if (!isHotTablet) {
                             return jsx(SizeBarChart, { size: value, maxSize: tabletMaxSize });
@@ -82090,7 +82041,7 @@ var TabletMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.PARTITION_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.PARTITION })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.PARTITION_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.PARTITION }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -82106,7 +82057,7 @@ var TabletMetadata = function (_a) {
                     sort: false,
                     display: (_a = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(TABLETS_COLUMNS.LEADER_NODE)) !== null && _a !== void 0 ? _a : (isHotTablet ? false : true),
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LEADER_NODE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.LEADER_NODE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LEADER_NODE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.LEADER_NODE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -82119,7 +82070,7 @@ var TabletMetadata = function (_a) {
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        return (jsx(YBTag, __assign({ variant: "light", size: 'medium' }, { children: value })));
+                        return (jsx(YBTag, { variant: "light", size: 'medium', children: value }));
                     }
                 }
             },
@@ -82130,7 +82081,7 @@ var TabletMetadata = function (_a) {
                     sort: false,
                     display: (_b = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(TABLETS_COLUMNS.FOLLOWER_NODES)) !== null && _b !== void 0 ? _b : (isHotTablet ? false : true),
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.FOLLOWER_NODES_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.FOLLOWER_NODES })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.FOLLOWER_NODES_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.FOLLOWER_NODES }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -82144,7 +82095,7 @@ var TabletMetadata = function (_a) {
                     }); },
                     customBodyRender: function (value) {
                         var _a, _b, _c;
-                        return (jsxs(Fragment, { children: [jsx(YBTag, __assign({ variant: "light", size: 'medium' }, { children: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : '-' })), (value === null || value === void 0 ? void 0 : value.length) >= 2 && (jsx(YBTag, __assign({ customSx: { marginLeft: '4px' }, variant: "light", size: 'medium' }, { children: jsx(YBTooltip, __assign({ title: (_c = (_b = value === null || value === void 0 ? void 0 : value.slice(1)) === null || _b === void 0 ? void 0 : _b.join('\n')) !== null && _c !== void 0 ? _c : '', placement: "top", arrow: true }, { children: jsx("span", { children: "+".concat(value.length - 1) }) })) })))] }));
+                        return (jsxs(Fragment, { children: [jsx(YBTag, { variant: "light", size: 'medium', children: (_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : '-' }), (value === null || value === void 0 ? void 0 : value.length) >= 2 && (jsx(YBTag, { customSx: { marginLeft: '4px' }, variant: "light", size: 'medium', children: jsx(YBTooltip, { title: (_c = (_b = value === null || value === void 0 ? void 0 : value.slice(1)) === null || _b === void 0 ? void 0 : _b.join('\n')) !== null && _c !== void 0 ? _c : '', placement: "top", arrow: true, children: jsx("span", { children: "+".concat(value.length - 1) }) }) }))] }));
                     }
                 }
             },
@@ -82161,7 +82112,7 @@ var TabletMetadata = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_TABLET_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.TOTAL_EPS_RATIO })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_TABLET_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.TOTAL_EPS_RATIO }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
@@ -82185,7 +82136,7 @@ var TabletMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.EPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.EPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -82219,7 +82170,7 @@ var TabletMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.EVENTS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.EVENTS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (jsx(QueryEventsChart, { data: value !== null && value !== void 0 ? value : [], maxEPS: maxEPS, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE })); }
                 }
             },
@@ -82235,7 +82186,7 @@ var TabletMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.WAL_SIZE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.WAL_SIZE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.WAL_SIZE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.WAL_SIZE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -82256,7 +82207,7 @@ var TabletMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.SST_SIZE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.WAL_SIZE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.SST_SIZE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.WAL_SIZE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     setCellProps: function () { return ({
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
@@ -82272,7 +82223,7 @@ var TabletMetadata = function (_a) {
                     sort: false,
                     display: (_h = storedColumns === null || storedColumns === void 0 ? void 0 : storedColumns.includes(TABLETS_COLUMNS.DATABASE_TYPE)) !== null && _h !== void 0 ? _h : false,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.DATABASE_TYPE_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: TABLETS_METADATA_LABELS.DATABASE_TYPE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.DATABASE_TYPE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.DATABASE_TYPE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -82296,13 +82247,13 @@ var TabletMetadata = function (_a) {
                     // TABLETS_COLUMNS.LEADER_NODE,
                     // TABLETS_COLUMNS.FOLLOWER_NODES,
                     TABLETS_COLUMNS.PARTITION
-                ], columns: columns, isTabletsMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsx(Box$1, __assign({ className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), mt: 2, p: 2 }, { children: jsxs(Box$1, __assign({ style: { display: 'flex', flexDirection: 'column' } }, { children: [jsxs(Box$1, __assign({ className: helperClasses.loadFilterContainer, style: { alignItems: 'center' } }, { children: [jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Tablets' })), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "TabletMetadata-AddFieldsButton" }, { children: ADD_COLUMNS_BUTTON_TEXT }))] })), jsx(Box$1, { children: jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                ], columns: columns, isTabletsMetadataColumns: true, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsx(Box$1, { className: clsx(helperClasses.mainContainer, helperClasses.mainContainerBorder), mt: 2, p: 2, children: jsxs(Box$1, { style: { display: 'flex', flexDirection: 'column' }, children: [jsxs(Box$1, { className: helperClasses.loadFilterContainer, style: { alignItems: 'center' }, children: [jsx(Typography$1, { variant: "h5", children: 'Tablets' }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "TabletMetadata-AddFieldsButton", children: ADD_COLUMNS_BUTTON_TEXT })] }), jsx(Box$1, { children: jsxs(Box$1, { className: appName === AppName.YBM
                                     ? helperClasses.overrideMuiTableContainer
-                                    : helperClasses.overrideMuiTableContainerWeb }, { children: [isTabletsDataFetchError && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
+                                    : helperClasses.overrideMuiTableContainerWeb, children: [isTabletsDataFetchError && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
                                                     ? (_f = (_e = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error
                                                     : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_h = (_g = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.error)
                                                     ? (_k = (_j = tabletsDataError === null || tabletsDataError === void 0 ? void 0 : tabletsDataError.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.error
-                                                    : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR }))] }))), isTabletsDataFetchSuccess && (jsx(YBTable, { id: 'TabletMetadata', className: helperClasses.overrideMuiTable, data: tabletsData !== null && tabletsData !== void 0 ? tabletsData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isTabletsDataFetchLoading, options: {
+                                                    : DEFAULT_ERROR_MESSAGES.TABLETS_DATA_FETCH_ERROR }))] })), isTabletsDataFetchSuccess && (jsx(YBTable, { id: 'TabletMetadata', className: helperClasses.overrideMuiTable, data: tabletsData !== null && tabletsData !== void 0 ? tabletsData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isTabletsDataFetchLoading, options: {
                                             sort: true,
                                             filter: true,
                                             count: totalSize,
@@ -82333,7 +82284,7 @@ var TabletMetadata = function (_a) {
                                             customFooter: customFooter,
                                             manualSorting: true,
                                             state: tableState
-                                        } }, "TabletMetadata-".concat(sortBy, "-").concat(sortDirection)))] })) })] })) })), jsx(Box$1, __assign({ mt: 3 }, { children: anomalyTabletData && (jsx(TabletLevelQueryMetadata, { anomalyTabletData: anomalyTabletData, isHotTablet: isHotTablet, appName: appName, universeUuid: universeUuid, startTime: startTime, endTime: endTime, apiUrl: apiUrl, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) })), jsxs(Box$1, __assign({ mt: 2 }, { children: [jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Possible Causes' })), jsx(Box$1, __assign({ mt: 1 }, { children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: startTime, endTime: endTime, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) }))] }))] }));
+                                        } }, "TabletMetadata-".concat(sortBy, "-").concat(sortDirection)))] }) })] }) }), jsx(Box$1, { mt: 3, children: anomalyTabletData && (jsx(TabletLevelQueryMetadata, { anomalyTabletData: anomalyTabletData, isHotTablet: isHotTablet, appName: appName, universeUuid: universeUuid, startTime: startTime, endTime: endTime, apiUrl: apiUrl, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) }), jsxs(Box$1, { mt: 2, children: [jsx(Typography$1, { variant: "h5", children: 'Possible Causes' }), jsx(Box$1, { mt: 1, children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: startTime, endTime: endTime, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) })] })] }));
 };
 
 var TabletDrilldown = function (_a) {
@@ -82596,12 +82547,12 @@ var ProcessGraphData = React__default.memo(function (_a) {
         enabled: isHistoricalQueryView || (anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.category) === AnomalyCategory.SQL
     }), universeQueryStatsLoading = _4.isLoading, universeQueryStatsError = _4.isError;
     if (universeQueryStatsLoading) {
-        return (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })));
+        return (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }));
     }
     if (universeQueryStatsError &&
         isHistoricalQueryView &&
         (anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.category) === AnomalyCategory.SQL) {
-        return (jsxs(Box$1, __assign({ mt: 3 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR }))] })));
+        return (jsxs(Box$1, { mt: 3, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR }))] }));
     }
     var queryId = urlParams === null || urlParams === void 0 ? void 0 : urlParams.queryId;
     var selectedQueryId = isHistoricalQueryView ? queryId : queryId === null || queryId === void 0 ? void 0 : queryId[0];
@@ -82610,19 +82561,19 @@ var ProcessGraphData = React__default.memo(function (_a) {
     var queryObject = universeQueryStatsData === null || universeQueryStatsData === void 0 ? void 0 : universeQueryStatsData.find(function (data) {
         return data.queryId === selectedQueryId;
     });
-    return (jsxs(Box$1, __assign({ style: { height: '100vh', display: 'flex', flexDirection: 'column' } }, { children: [jsx(BreadCrumbsHeader, { appName: appName, queryObject: queryObject, 
+    return (jsxs(Box$1, { style: { height: '100vh', display: 'flex', flexDirection: 'column' }, children: [jsx(BreadCrumbsHeader, { appName: appName, queryObject: queryObject, 
                 // Refers to query view from Overall load queries not overall load ->anomalies -> sql ->query
                 isHistoricalQueryView: isHistoricalQueryView, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, onSelectedIssue: isNonEmptyObject(anomalyData) ? onSelectedIssue : undefined, onSelectedQuery: onSelectedQuery, showDetails: showDetails, onShowDetails: onShowDetails, onNavigateToUrl: onNavigateToUrl }), (((_c = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _c === void 0 ? void 0 : _c.category) === AnomalyCategory.SQL ||
-                isHistoricalQueryView) && (jsx(YBTabs, __assign({ value: sqlTab, onChange: handleSqlTabChange }, { children: jsx(YBStyledTab$1, { value: SqlTabs.QUERY_OVERVIEW, label: SqlTabs.QUERY_OVERVIEW }) }))), ((_d = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _d === void 0 ? void 0 : _d.category) === AnomalyCategory.DB &&
+                isHistoricalQueryView) && (jsx(YBTabs, { value: sqlTab, onChange: handleSqlTabChange, children: jsx(YBStyledTab$1, { value: SqlTabs.QUERY_OVERVIEW, label: SqlTabs.QUERY_OVERVIEW }) })), ((_d = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _d === void 0 ? void 0 : _d.category) === AnomalyCategory.DB &&
                 !isHistoricalQueryView &&
                 (((_e = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _e === void 0 ? void 0 : _e.type) === AnomalyType.HOT_TABLET ||
-                    ((_f = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _f === void 0 ? void 0 : _f.type) === AnomalyType.LARGE_TABLET) && (jsx(YBTabs, __assign({ value: tabletTab, onChange: handleTabletTabChange }, { children: jsx(YBStyledTab$1, { value: TabletTabs.TABLET_OVERVIEW, label: TabletTabs.TABLET_OVERVIEW }) }))), jsx(MetadataHeader, { universeData: universeData, queryObject: queryObject, isHistoricalQueryView: isHistoricalQueryView, universeQueryStatsData: universeQueryStatsData, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, showDetails: showDetails, onShowDetails: onShowDetails }), jsx(Box$1, __assign({ className: clsx(appName === AppName.WEB ? helperClasses.stickyHeader : helperClasses.stickyHeaderYBM) }, { children: jsx(DateSelectorHeader, { appName: appName, filterDuration: filterDuration, startDateTime: dateTimeRange.startDateTime, endDateTime: dateTimeRange.endDateTime, timezone: timezone, onSelectedFilterDuration: onSelectedFilterDuration, metricMeasure: metricMeasure, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh }) })), jsxs(Box$1, __assign({ style: {
+                    ((_f = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _f === void 0 ? void 0 : _f.type) === AnomalyType.LARGE_TABLET) && (jsx(YBTabs, { value: tabletTab, onChange: handleTabletTabChange, children: jsx(YBStyledTab$1, { value: TabletTabs.TABLET_OVERVIEW, label: TabletTabs.TABLET_OVERVIEW }) })), jsx(MetadataHeader, { universeData: universeData, queryObject: queryObject, isHistoricalQueryView: isHistoricalQueryView, universeQueryStatsData: universeQueryStatsData, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, showDetails: showDetails, onShowDetails: onShowDetails }), jsx(Box$1, { className: clsx(appName === AppName.WEB ? helperClasses.stickyHeader : helperClasses.stickyHeaderYBM), children: jsx(DateSelectorHeader, { appName: appName, filterDuration: filterDuration, startDateTime: dateTimeRange.startDateTime, endDateTime: dateTimeRange.endDateTime, timezone: timezone, onSelectedFilterDuration: onSelectedFilterDuration, metricMeasure: metricMeasure, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh }) }), jsxs(Box$1, { style: {
                     flex: 1,
                     overflow: 'auto'
-                } }, { children: [isHistoricalQueryView && (jsxs(Fragment, { children: [jsx(GenericHeader, { appName: appName, universeData: universeData, anomalyData: null, clusterRegionItem: clusterRegionItem, zoneNodeItem: zoneNodeItem, isPrimaryCluster: isPrimaryCluster, cluster: cluster, region: region, metricMeasure: metricMeasure, outlierType: outlierType, numNodes: numNodes, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged }), jsx(SqlDrilldown, { urlParams: urlParams, anomalyData: null, getClusterDetails: getClusterDetails, metricMeasure: metricMeasure, apiUrl: apiUrl, appName: appName, timezone: timezone, sqlTab: sqlTab, dateTimeRange: dateTimeRange, universeQueryStatsData: universeQueryStatsData, amomalyGraphRequestParams: null, formattedAnomalyRca: null, onEChartsDateSelect: onEChartsDateSelect })] })), isNonEmptyObject(anomalyGroupData) && !isHistoricalQueryView && (jsxs(Fragment, { children: [!(((_g = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _g === void 0 ? void 0 : _g.category) === AnomalyCategory.APP ||
+                }, children: [isHistoricalQueryView && (jsxs(Fragment, { children: [jsx(GenericHeader, { appName: appName, universeData: universeData, anomalyData: null, clusterRegionItem: clusterRegionItem, zoneNodeItem: zoneNodeItem, isPrimaryCluster: isPrimaryCluster, cluster: cluster, region: region, metricMeasure: metricMeasure, outlierType: outlierType, numNodes: numNodes, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged }), jsx(SqlDrilldown, { urlParams: urlParams, anomalyData: null, getClusterDetails: getClusterDetails, metricMeasure: metricMeasure, apiUrl: apiUrl, appName: appName, timezone: timezone, sqlTab: sqlTab, dateTimeRange: dateTimeRange, universeQueryStatsData: universeQueryStatsData, amomalyGraphRequestParams: null, formattedAnomalyRca: null, onEChartsDateSelect: onEChartsDateSelect })] })), isNonEmptyObject(anomalyGroupData) && !isHistoricalQueryView && (jsxs(Fragment, { children: [!(((_g = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _g === void 0 ? void 0 : _g.category) === AnomalyCategory.APP ||
                                 (((_h = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _h === void 0 ? void 0 : _h.category) === AnomalyCategory.NODE &&
                                     ((_j = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _j === void 0 ? void 0 : _j.type) !== AnomalyType.SLOW_DISKS)) && (jsx(GenericHeader, { appName: appName, universeData: universeData, anomalyData: anomalyGroupData, clusterRegionItem: clusterRegionItem, zoneNodeItem: zoneNodeItem, isPrimaryCluster: isPrimaryCluster, cluster: cluster, region: region, metricMeasure: metricMeasure, outlierType: outlierType, numNodes: numNodes, showSplitSelector: ((_k = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _k === void 0 ? void 0 : _k.type) !== AnomalyType.LARGE_TABLET &&
-                                    ((_l = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _l === void 0 ? void 0 : _l.type) !== AnomalyType.HOT_TABLET, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged })), jsx(AnomalyRouter, { metricMeasure: metricMeasure, appName: appName, dateTimeRange: dateTimeRange, timezone: timezone, universeQueryStatsData: universeQueryStatsData, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, apiUrl: apiUrl, anomalyData: anomalyGroupData, gantChartData: gantChartData, tabletTab: tabletTab, sqlTab: sqlTab, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, urlParams: urlParams, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onNavigateToUrl: onNavigateToUrl })] }))] }))] })));
+                                    ((_l = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _l === void 0 ? void 0 : _l.type) !== AnomalyType.HOT_TABLET, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged })), jsx(AnomalyRouter, { metricMeasure: metricMeasure, appName: appName, dateTimeRange: dateTimeRange, timezone: timezone, universeQueryStatsData: universeQueryStatsData, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, apiUrl: apiUrl, anomalyData: anomalyGroupData, gantChartData: gantChartData, tabletTab: tabletTab, sqlTab: sqlTab, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, urlParams: urlParams, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onNavigateToUrl: onNavigateToUrl })] }))] })] }));
 });
 
 var MetricsAnalysisEntry = function (_a) {
@@ -82666,16 +82617,16 @@ var MetricsAnalysisEntry = function (_a) {
         enabled: isNonEmptyString(troubleshootUuid)
     }), isLoading = _h.isLoading, isError = _h.isError, isIdle = _h.isIdle;
     if (isLoading) {
-        return (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })));
+        return (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }));
     }
     if (isError || universeDataFetchError || (isIdle && userSelectedAnomaly === undefined)) {
-        return (jsxs(Box$1, __assign({ mt: 3 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isError
+        return (jsxs(Box$1, { mt: 3, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isError
                         ? DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR
                         : DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isError
                         ? DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR
-                        : DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR }))] })));
+                        : DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR }))] }));
     }
-    return (jsx(YBThemeWrapper, __assign({ appName: appName }, { children: jsx(Box$1, __assign({ className: clsx(appName !== AppName.WEB && helperClasses.headerContainerYBM) }, { children: (universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data) && (jsx(ProcessGraphData, { apiUrl: apiUrl, troubleshootUuid: troubleshootUuid, anomalyData: userSelectedAnomaly, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, universeUuid: universeUuid, appName: appName, timezone: timezone, isHistoricalQueryView: isHistoricalQueryView, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, dbIdParam: dbIdParam, queryIdParam: queryIdParam, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) })) })));
+    return (jsx(YBThemeWrapper, { appName: appName, children: jsx(Box$1, { className: clsx(appName !== AppName.WEB && helperClasses.headerContainerYBM), children: (universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data) && (jsx(ProcessGraphData, { apiUrl: apiUrl, troubleshootUuid: troubleshootUuid, anomalyData: userSelectedAnomaly, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, universeUuid: universeUuid, appName: appName, timezone: timezone, isHistoricalQueryView: isHistoricalQueryView, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, dbIdParam: dbIdParam, queryIdParam: queryIdParam, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) }) }));
 };
 
 var YSQL_COLUMNS = {
@@ -82893,7 +82844,7 @@ var HistoricalQueryData = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_EPS_RATIO })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_EPS_RATIO_QUERY_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_EPS_RATIO }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     customBodyRender: function (value) {
                         return Number.isFinite(Number(value))
@@ -82914,7 +82865,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_QUERY_TOOLTIP, placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.EPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ACTIVE_SESSIONS_PER_SECOND_QUERY_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.EPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '0.0';
                     }
@@ -82946,7 +82897,7 @@ var HistoricalQueryData = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.EVENTS_QUERY_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.EVENTS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.EVENTS_QUERY_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.EVENTS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (jsx(QueryEventsChart, { data: value !== null && value !== void 0 ? value : [], maxEPS: maxEPS, groupByOperation: groupByOperation })); }
                 }
             },
@@ -82969,10 +82920,10 @@ var HistoricalQueryData = function (_a) {
                             return false;
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.QUERY_TEXT_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.QUERY })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.QUERY_TEXT_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.QUERY }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value, tableMeta) {
                         var rowIndex = tableMeta.rowIndex;
-                        return (jsx(YBTooltip, __assign({ title: value, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ onClick: handleCodeBlockClick, className: codeBlockClasses.queryCellBox }, { children: jsx(YBCodeBlock, { lang: "sql", text: value, maxWidth: 500, showBorder: true, showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, preClassName: codeBlockClasses.preClassNameInTable, codeClassName: codeBlockClasses.codeClassNameInTable, containerClassName: codeBlockClasses.queryContainerCodeInTable }, "TableHelperQueries-".concat(currentTablePage, "-").concat(rowIndex)) })) })));
+                        return (jsx(YBTooltip, { title: value, placement: "top", arrow: true, children: jsx(Box$1, { onClick: handleCodeBlockClick, className: codeBlockClasses.queryCellBox, children: jsx(YBCodeBlock, { lang: "sql", text: value, maxWidth: 500, showBorder: true, showCopyButton: true, singleLineEllipsis: true, enabledExpandCollapse: false, preClassName: codeBlockClasses.preClassNameInTable, codeClassName: codeBlockClasses.codeClassNameInTable, containerClassName: codeBlockClasses.queryContainerCodeInTable }, "TableHelperQueries-".concat(currentTablePage, "-").concat(rowIndex)) }) }));
                     }
                 }
             },
@@ -82989,7 +82940,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.NAMESPACE_NAME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.DATABASE_NAME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.NAMESPACE_NAME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -83005,7 +82956,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.FIRST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.FIRST_ACTIVE_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.FIRST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.FIRST_ACTIVE_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -83021,7 +82972,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LAST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LAST_ACTIVE_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LAST_ACTIVE_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LAST_ACTIVE_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -83037,7 +82988,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.AVG_LATENCY_TOOLTIP, arrow: true, placement: "top" }, { children: jsx(Box$1, __assign({ className: helperClasses.headerBox }, { children: jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.AVG_LATENCY })) })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.AVG_LATENCY_TOOLTIP, arrow: true, placement: "top", children: jsx(Box$1, { className: helperClasses.headerBox, children: jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.AVG_LATENCY }) }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -83055,7 +83006,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LATENCY_P90_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P90 })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LATENCY_P90_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P90 }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -83073,7 +83024,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.LATENCY_P99_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P99 })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.LATENCY_P99_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.LATENCY_P99 }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -83096,7 +83047,7 @@ var HistoricalQueryData = function (_a) {
                             return false;
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.QUERY_TYPE_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.QUERY_TYPE })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.QUERY_TYPE_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.QUERY_TYPE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -83113,7 +83064,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.TOTAL_TIME_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_TIME })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.TOTAL_TIME_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.TOTAL_TIME }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -83129,7 +83080,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.ROWS_AVG_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.ROWS_AVG })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.ROWS_AVG_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.ROWS_AVG }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -83147,7 +83098,7 @@ var HistoricalQueryData = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.RPS_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: HISTORICAL_QUERY_DATA_LABELS.RPS })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.RPS_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: HISTORICAL_QUERY_DATA_LABELS.RPS }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -83227,10 +83178,10 @@ var HistoricalQueryData = function (_a) {
                     YSQL_COLUMNS.QUERY_ID,
                     YSQL_COLUMNS.UNIVERSE_ID,
                     YSQL_COLUMNS.QUERY
-                ], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, __assign({ mt: 1, mb: 2, className: helperClasses.dataBox }, { children: [jsxs(Box$1, __assign({ display: 'flex', flexDirection: 'column' }, { children: [jsx(Box$1, __assign({ mb: 2 }, { children: jsx(Typography$1, __assign({ variant: "h5" }, { children: 'Queries' })) })), jsxs(Box$1, __assign({ className: helperClasses.filterContainer }, { children: [jsxs(Box$1, __assign({ className: helperClasses.filterLeftContainer }, { children: [jsxs(YBSelect, __assign({ label: "", value: database, dataTestId: "HistoricalQueryData-DatabaseSelect", className: helperClasses.ybOverrideMuiSelect, onChange: function (e) {
+                ], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal })), jsxs(Box$1, { mt: 1, mb: 2, className: helperClasses.dataBox, children: [jsxs(Box$1, { display: 'flex', flexDirection: 'column', children: [jsx(Box$1, { mb: 2, children: jsx(Typography$1, { variant: "h5", children: 'Queries' }) }), jsxs(Box$1, { className: helperClasses.filterContainer, children: [jsxs(Box$1, { className: helperClasses.filterLeftContainer, children: [jsxs(YBSelect, { label: "", value: database, dataTestId: "HistoricalQueryData-DatabaseSelect", className: helperClasses.ybOverrideMuiSelect, onChange: function (e) {
                                                     setCurrentTablePage(0);
                                                     setDatabase(e.target.value);
-                                                }, menuProps: { PaperProps: { style: { maxHeight: '300px' } } } }, { children: [jsx(MenuItem$1, __assign({ value: ALL, "data-testid": "HistoricalQueryData-".concat(ALL) }, { children: jsx("span", { children: MetricConsts.ALL_DATABASES }) }), ALL), databaseList.map(function (dbName) { return (jsx(MenuItem$1, __assign({ value: dbName, "data-testid": "HistoricalQueryData-".concat(dbName) }, { children: jsx("span", { children: dbName }) }), dbName)); })] })), jsx(YBSelect, __assign({ label: "", value: queryTypeFilter, dataTestId: "HistoricalQueryData-QueryTypeSelect", className: helperClasses.ybOverrideMuiSelect, onChange: function (e) {
+                                                }, menuProps: { PaperProps: { style: { maxHeight: '300px' } } }, children: [jsx(MenuItem$1, { value: ALL, "data-testid": "HistoricalQueryData-".concat(ALL), children: jsx("span", { children: MetricConsts.ALL_DATABASES }) }, ALL), databaseList.map(function (dbName) { return (jsx(MenuItem$1, { value: dbName, "data-testid": "HistoricalQueryData-".concat(dbName), children: jsx("span", { children: dbName }) }, dbName)); })] }), jsx(YBSelect, { label: "", value: queryTypeFilter, dataTestId: "HistoricalQueryData-QueryTypeSelect", className: helperClasses.ybOverrideMuiSelect, onChange: function (e) {
                                                     setCurrentTablePage(0);
                                                     if (e.target.value === QUERY_FILTER_OPTIONS.SHOW_ALL) {
                                                         setQueryType(null);
@@ -83245,30 +83196,30 @@ var HistoricalQueryData = function (_a) {
                                                         setQueryType(QueryType.BACKGROUND);
                                                     }
                                                     setQueryTypeFilter(e.target.value);
-                                                }, menuProps: { PaperProps: { style: { maxHeight: '300px' } } } }, { children: Object.entries(QUERY_FILTER_OPTIONS).map(function (_a) {
+                                                }, menuProps: { PaperProps: { style: { maxHeight: '300px' } } }, children: Object.entries(QUERY_FILTER_OPTIONS).map(function (_a) {
                                                     var key = _a[0], value = _a[1];
-                                                    return (jsx(MenuItem$1, __assign({ value: value, "data-testid": "HistoricalQueryData-".concat(value) }, { children: jsx("span", { children: value }) }), key));
-                                                }) })), jsx(YBInput, { dataTestId: "HistoricalQueryData-SearchInput", placeholder: 'Filter Queries', className: helperClasses.ybSearchInput, onChange: function (e) {
+                                                    return (jsx(MenuItem$1, { value: value, "data-testid": "HistoricalQueryData-".concat(value), children: jsx("span", { children: value }) }, key));
+                                                }) }), jsx(YBInput, { dataTestId: "HistoricalQueryData-SearchInput", placeholder: 'Filter Queries', className: helperClasses.ybSearchInput, onChange: function (e) {
                                                     var value = e.target.value;
                                                     setSearchInputValue(value);
                                                     debouncedSearchHandlerRef.current(value);
                                                 }, value: searchInputValue, inputProps: {
                                                     'data-testid': 'HistoricalQueryData-SearchInput'
                                                 }, InputProps: {
-                                                    startAdornment: (jsx(InputAdornment, __assign({ position: "start" }, { children: jsx(SvgSearch, {}) }))),
-                                                    endAdornment: !!searchInputValue && (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, __assign({ size: "small", onClick: function () {
+                                                    startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SvgSearch, {}) })),
+                                                    endAdornment: !!searchInputValue && (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: function () {
                                                                 debouncedSearchHandlerRef.current.cancel();
                                                                 setSearchInput('');
                                                                 setSearchInputValue('');
                                                                 setCurrentTablePage(0);
-                                                            }, "data-testid": "HistoricalQueryData-ClearButton" }, { children: jsx(Clear, { fontSize: "small" }) })) })))
-                                                } })] })), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "HistoricalQueryData-AddFieldsButton" }, { children: ADD_COLUMNS_BUTTON_TEXT }))] }))] })), jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                                                            }, "data-testid": "HistoricalQueryData-ClearButton", children: jsx(Clear, { fontSize: "small" }) }) }))
+                                                } })] }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, { style: { marginBottom: '2px' } }), onClick: openSelectionModal, dataTestId: "HistoricalQueryData-AddFieldsButton", children: ADD_COLUMNS_BUTTON_TEXT })] })] }), jsxs(Box$1, { className: appName === AppName.YBM
                             ? helperClasses.overrideMuiTableContainer
-                            : helperClasses.overrideMuiTableContainerWeb }, { children: [(isQueryDataFetchError || isDBFetchError) && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
+                            : helperClasses.overrideMuiTableContainerWeb, children: [(isQueryDataFetchError || isDBFetchError) && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
                                             ? (_f = (_e = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error
                                             : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_h = (_g = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.error)
                                             ? (_k = (_j = historicalQueryDataError === null || historicalQueryDataError === void 0 ? void 0 : historicalQueryDataError.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.error
-                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] }))), jsx(YBTable, { id: 'HistoricalQueryData', className: helperClasses.overrideMuiTable, data: historicalQueryData !== null && historicalQueryData !== void 0 ? historicalQueryData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isQueryCallLoading, options: {
+                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] })), jsx(YBTable, { id: 'HistoricalQueryData', className: helperClasses.overrideMuiTable, data: historicalQueryData !== null && historicalQueryData !== void 0 ? historicalQueryData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isQueryCallLoading, options: {
                                     sort: true,
                                     filter: true,
                                     count: totalSize,
@@ -83310,7 +83261,7 @@ var HistoricalQueryData = function (_a) {
                                     customFooter: customFooter,
                                     manualSorting: true,
                                     state: tableState
-                                } }, "HistoricalQueryData-".concat(sortBy, "-").concat(sortDirection))] }))] }))] }));
+                                } }, "HistoricalQueryData-".concat(sortBy, "-").concat(sortDirection))] })] })] }));
 };
 
 var useStyles$b = makeStyles$1(function (theme) { return ({
@@ -83458,21 +83409,21 @@ var MetricsSelectorDrawer = function (_a) {
         onSubmit(selectedMetrics);
         onClose();
     };
-    return (jsx(YBModal, __assign({ open: open, isSidePanel: true, title: 'Add and Remove Charts', onClose: onClose, enableBackdropDismiss: true, titleSeparator: true, dialogContentProps: {
+    return (jsx(YBModal, { open: open, isSidePanel: true, title: 'Add and Remove Charts', onClose: onClose, enableBackdropDismiss: true, titleSeparator: true, dialogContentProps: {
             style: {
                 padding: 0
             }
-        }, onSubmit: handleApply, submitLabel: 'Apply', submitTestId: "btnApplyMetricsSelection", cancelLabel: 'Cancel', cancelTestId: "btnCloseMetricsSelection" }, { children: jsxs(Box$1, { children: [jsx(Box$1, __assign({ className: classes.search }, { children: jsx(YBInput, { fullWidth: true, placeholder: 'Search', value: searchInput, InputProps: {
-                            startAdornment: (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(SvgSearch, {}) })))
+        }, onSubmit: handleApply, submitLabel: 'Apply', submitTestId: "btnApplyMetricsSelection", cancelLabel: 'Cancel', cancelTestId: "btnCloseMetricsSelection", children: jsxs(Box$1, { children: [jsx(Box$1, { className: classes.search, children: jsx(YBInput, { fullWidth: true, placeholder: 'Search', value: searchInput, InputProps: {
+                            startAdornment: (jsx(InputAdornment, { position: "end", children: jsx(SvgSearch, {}) }))
                         }, onChange: function (event) {
                             setSearchInput(event.target.value);
-                        }, dataTestId: "MetricsSelectionSearch", className: classes.searchInput }) })), noResult ? (jsx(Box$1, __assign({ textAlign: "center", mt: 3, "data-testid": "MetricsSelectionNoResult" }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: 'No results returned' })) }))) : (jsx(Box$1, __assign({ className: classes.container }, { children: filteredResources.map(function (filteredMetricResource) {
+                        }, dataTestId: "MetricsSelectionSearch", className: classes.searchInput }) }), noResult ? (jsx(Box$1, { textAlign: "center", mt: 3, "data-testid": "MetricsSelectionNoResult", children: jsx(Typography$1, { variant: "body2", children: 'No results returned' }) })) : (jsx(Box$1, { className: classes.container, children: filteredResources.map(function (filteredMetricResource) {
                         if (!filteredMetricResource.metrics.length)
                             return null;
                         var isExpanded = expandedGroups[filteredMetricResource.name] || !!searchInput;
-                        return (jsxs(Box$1, __assign({ className: classes.group }, { children: [jsxs(Box$1, __assign({ className: classes.groupHeader, onClick: function () { return toggleGroup(filteredMetricResource.name); } }, { children: [jsx(Box$1, __assign({ display: "flex", alignItems: "center" }, { children: jsx(Typography$1, __assign({ variant: "body1" }, { children: filteredMetricResource.title })) })), jsx(ExpandMoreIcon, { className: clsx(isExpanded && classes.iconRotate) })] })), jsx(Collapse, __assign({ in: isExpanded }, { children: jsx(Box$1, __assign({ className: classes.itemsContainer }, { children: filteredMetricResource.metrics.map(function (filteredMetric) { return (jsx(Box$1, __assign({ className: clsx(classes.item) }, { children: jsx(YBCheckbox, { name: "".concat(filteredMetricResource.name, ".").concat(filteredMetric), label: METRIC_NAMES[filteredMetric] ||
-                                                    filteredMetric, dataTestId: "MetricsSelectionCheckbox-".concat(filteredMetric), checked: !!selectedMetrics[filteredMetric], onChange: function () { return handleCheckboxChange(filteredMetric); }, className: classes.checkbox }) }), filteredMetric)); }) })) }))] }), filteredMetricResource.name));
-                    }) })))] }) })));
+                        return (jsxs(Box$1, { className: classes.group, children: [jsxs(Box$1, { className: classes.groupHeader, onClick: function () { return toggleGroup(filteredMetricResource.name); }, children: [jsx(Box$1, { display: "flex", alignItems: "center", children: jsx(Typography$1, { variant: "body1", children: filteredMetricResource.title }) }), jsx(ExpandMoreIcon, { className: clsx(isExpanded && classes.iconRotate) })] }), jsx(Collapse, { in: isExpanded, children: jsx(Box$1, { className: classes.itemsContainer, children: filteredMetricResource.metrics.map(function (filteredMetric) { return (jsx(Box$1, { className: clsx(classes.item), children: jsx(YBCheckbox, { name: "".concat(filteredMetricResource.name, ".").concat(filteredMetric), label: METRIC_NAMES[filteredMetric] ||
+                                                    filteredMetric, dataTestId: "MetricsSelectionCheckbox-".concat(filteredMetric), checked: !!selectedMetrics[filteredMetric], onChange: function () { return handleCheckboxChange(filteredMetric); }, className: classes.checkbox }) }, filteredMetric)); }) }) })] }, filteredMetricResource.name));
+                    }) }))] }) }));
 };
 
 var METRICS_TAB_URL_PARAM = 'metricsTab';
@@ -83620,9 +83571,9 @@ var TopKMetricsView = function (_a) {
             disconnect(chartInstancesRef.current);
         };
     }, [fetchMetricsData.isSuccess, metricsResponseData]);
-    return (jsxs(Box$1, __assign({ mt: 2, mb: 2, className: classes.metricsBox }, { children: [jsx(Box$1, __assign({ display: "flex", alignItems: "center" }, { children: jsxs(YBTabs, __assign({ value: metricsTab, onChange: handleTabChange, "aria-label": "metric tabs", indicatorColor: "primary", textColor: "primary", variant: "scrollable" // Makes tabs scrollable
+    return (jsxs(Box$1, { mt: 2, mb: 2, className: classes.metricsBox, children: [jsx(Box$1, { display: "flex", alignItems: "center", children: jsxs(YBTabs, { value: metricsTab, onChange: handleTabChange, "aria-label": "metric tabs", indicatorColor: "primary", textColor: "primary", variant: "scrollable" // Makes tabs scrollable
                     , scrollButtons: "auto" // Automatically shows scroll buttons when needed
-                    , className: classes.ybTabs }, { children: [(metricMeasure === MetricMeasure.OVERALL || metricMeasure === MetricMeasure.OUTLIER) &&
+                    , className: classes.ybTabs, children: [(metricMeasure === MetricMeasure.OVERALL || metricMeasure === MetricMeasure.OUTLIER) &&
                             METRIC_TABS.map(function (tab, index) {
                                 var _a;
                                 return (jsx(YBTab, { value: index, label: (_a = METRIC_RESOURCES_WITH_GRAPHS === null || METRIC_RESOURCES_WITH_GRAPHS === void 0 ? void 0 : METRIC_RESOURCES_WITH_GRAPHS.find(function (metric) { return tab === metric.name; })) === null || _a === void 0 ? void 0 : _a.title, className: classes.causeTabButton }, tab));
@@ -83634,29 +83585,29 @@ var TopKMetricsView = function (_a) {
                             METRIC_TABS_DATABASES.map(function (tab, index) {
                                 var _a;
                                 return (jsx(YBTab, { value: index, label: (_a = METRIC_DB_RESOURCES_WITH_GRAPHS === null || METRIC_DB_RESOURCES_WITH_GRAPHS === void 0 ? void 0 : METRIC_DB_RESOURCES_WITH_GRAPHS.find(function (metric) { return tab === metric.name; })) === null || _a === void 0 ? void 0 : _a.title, className: classes.causeTabButton }, tab));
-                            })] })) })), jsx(Box$1, __assign({ className: classes.secondRow }, { children: jsx(YBButton, __assign({ variant: 'ghost', startIcon: jsx(SvgPlus, {}), size: "medium", onClick: openSelectionModal, dataTestId: "GenericHeader-AddChartsButton" }, { children: 'Add and Remove Charts' })) })), fetchMetricsData.isLoading && (jsx(Box$1, __assign({ mt: 2, className: classes.loadingBox }, { children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) }))), fetchMetricsData.isError && (jsxs(Box$1, __assign({ mt: 4 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchMetricsGraphsErrorMessage)
+                            })] }) }), jsx(Box$1, { className: classes.secondRow, children: jsx(YBButton, { variant: 'ghost', startIcon: jsx(SvgPlus, {}), size: "medium", onClick: openSelectionModal, dataTestId: "GenericHeader-AddChartsButton", children: 'Add and Remove Charts' }) }), fetchMetricsData.isLoading && (jsx(Box$1, { mt: 2, className: classes.loadingBox, children: jsx(SvgLoading, { className: clsx(classes.icon, classes.inProgressIcon) }) })), fetchMetricsData.isError && (jsxs(Box$1, { mt: 4, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchMetricsGraphsErrorMessage)
                             ? fetchMetricsGraphsErrorMessage
                             : DEFAULT_ERROR_MESSAGES.METRICS_GRAPHS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchMetricsGraphsErrorMessage)
                             ? fetchMetricsGraphsErrorMessage
-                            : DEFAULT_ERROR_MESSAGES.METRICS_GRAPHS_FETCH_ERROR }))] }))), fetchMetricsData.isSuccess && (jsx(Box$1, __assign({ className: clsx(classes.gridBox, classes.gridBoxDouble) }, { children: metricsResponseData === null || metricsResponseData === void 0 ? void 0 : metricsResponseData.map(function (metricData, index) {
+                            : DEFAULT_ERROR_MESSAGES.METRICS_GRAPHS_FETCH_ERROR }))] })), fetchMetricsData.isSuccess && (jsx(Box$1, { className: clsx(classes.gridBox, classes.gridBoxDouble), children: metricsResponseData === null || metricsResponseData === void 0 ? void 0 : metricsResponseData.map(function (metricData, index) {
                     if (isNonEmptyString(metricData === null || metricData === void 0 ? void 0 : metricData.errorMessage)) {
                         return jsx(Box$1, {});
                     }
                     else {
                         var operations = getOperations(metricMeasure, metricData, GraphType.MULTI_SUPPORTING, true, [], true);
-                        return (jsx(Box$1, __assign({ style: {
+                        return (jsx(Box$1, { style: {
                                 border: '1px solid #E9EEF2',
                                 borderRadius: '8px'
-                            } }, { children: jsx(Box$1, { children: jsx(GraphView, { metricData: metricData, metricKey: metricData.name, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL ? [] : operations.uniqueOperations, registerChartInstance: function (instance) {
+                            }, children: jsx(Box$1, { children: jsx(GraphView, { metricData: metricData, metricKey: metricData.name, containerWidth: null, metricMeasure: metricMeasure, operations: metricMeasure === MetricMeasure.OVERALL ? [] : operations.uniqueOperations, registerChartInstance: function (instance) {
                                         return registerChartInstance(instance, index);
-                                    }, graphType: GraphType.MULTI_SUPPORTING, dateTimeRange: dateTimeRange, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, isHistoricalQueryView: false, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricData.name, "-").concat(metricMeasure)) }, "TopKMetricsView-".concat(index)) })));
+                                    }, graphType: GraphType.MULTI_SUPPORTING, dateTimeRange: dateTimeRange, groupByOperations: operations.groupByOperations, appName: appName, timezone: timezone, isHistoricalQueryView: false, onEChartsDateSelect: onEChartsDateSelect, showTitle: true }, "".concat(metricData.name, "-").concat(metricMeasure)) }, "TopKMetricsView-".concat(index)) }));
                     }
-                }) }))), isMetricsDrawerOpen && (jsx(MetricsSelectorDrawer, { onSubmit: handleFilterMetrics, metricResources: metricMeasure === MetricMeasure.OUTLIER_TABLES ||
+                }) })), isMetricsDrawerOpen && (jsx(MetricsSelectorDrawer, { onSubmit: handleFilterMetrics, metricResources: metricMeasure === MetricMeasure.OUTLIER_TABLES ||
                     metricMeasure === MetricMeasure.OUTLIER_DB
                     ? metricMeasure === MetricMeasure.OUTLIER_TABLES
                         ? METRIC_TABLES_RESOURCES_WITH_GRAPHS
                         : METRIC_DB_RESOURCES_WITH_GRAPHS
-                    : METRIC_RESOURCES_WITH_GRAPHS, open: isMetricsDrawerOpen, onClose: closeSelectionModal, selectedTabIndex: metricsTab, metricMeasure: metricMeasure }))] })));
+                    : METRIC_RESOURCES_WITH_GRAPHS, open: isMetricsDrawerOpen, onClose: closeSelectionModal, selectedTabIndex: metricsTab, metricMeasure: metricMeasure }))] }));
 };
 
 var ProcessTopKData = React__default.memo(function (_a) {
@@ -85096,16 +85047,16 @@ var DetectedAnomalies = function (_a) {
     var handleAccordionChange = function (_event, expanded) {
         setIsAccordionExpanded(expanded);
     };
-    return (jsxs(Accordion, __assign({ expanded: isAccordionExpanded, className: classes.accordion, onChange: handleAccordionChange }, { children: [jsx(AccordionSummary, __assign({ className: clsx(classes.accordionSummary, !isAccordionExpanded && classes.accordionSummaryCollapsed), expandIcon: jsx("img", { src: ArrowDownwardIcon, className: classes.expandIcon, alt: isAccordionExpanded ? 'Collapse' : 'Expand' }) }, { children: jsx(Typography$1, __assign({ variant: "body2", className: classes.headerTitle }, { children: currentTab === InsightsTabs.INSIGHTS ? 'Insights' : 'Detected Anomalies' })) })), jsxs(AccordionDetails, __assign({ className: classes.accordionDetails }, { children: [jsxs(Box$1, __assign({ className: classes.runDetectionButtonContainer }, { children: [jsx(YBButton, __assign({ variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx("img", { src: !expandAll ? ExpandIcon : CollapseIcon, alt: "Expand Icon" }), onClick: handleExpandAll, dataTestId: "expand-all-button" }, { children: jsx("span", __assign({ className: classes.expandAllButton }, { children: !expandAll ? 'Expand All' : 'Collapse All' })) })), jsx(YBButton, __assign({ variant: "primary", size: 'medium', dataTestId: "run-detection-button", onClick: function () {
+    return (jsxs(Accordion, { expanded: isAccordionExpanded, className: classes.accordion, onChange: handleAccordionChange, children: [jsx(AccordionSummary, { className: clsx(classes.accordionSummary, !isAccordionExpanded && classes.accordionSummaryCollapsed), expandIcon: jsx("img", { src: ArrowDownwardIcon, className: classes.expandIcon, alt: isAccordionExpanded ? 'Collapse' : 'Expand' }), children: jsx(Typography$1, { variant: "body2", className: classes.headerTitle, children: currentTab === InsightsTabs.INSIGHTS ? 'Insights' : 'Detected Anomalies' }) }), jsxs(AccordionDetails, { className: classes.accordionDetails, children: [jsxs(Box$1, { className: classes.runDetectionButtonContainer, children: [jsx(YBButton, { variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx("img", { src: !expandAll ? ExpandIcon : CollapseIcon, alt: "Expand Icon" }), onClick: handleExpandAll, dataTestId: "expand-all-button", children: jsx("span", { className: classes.expandAllButton, children: !expandAll ? 'Expand All' : 'Collapse All' }) }), jsx(YBButton, { variant: "primary", size: 'medium', dataTestId: "run-detection-button", onClick: function () {
                                     scheduleAnomalyDetectionStatus.mutate();
                                 }, disabled: anomalyDetectionStatus === AnomalyDetectionStatusText.SCHEDULED ||
                                     anomalyDetectionStatus === AnomalyDetectionStatusText.IN_PROGRESS, showSpinner: anomalyDetectionStatus === AnomalyDetectionStatusText.SCHEDULED ||
-                                    anomalyDetectionStatus === AnomalyDetectionStatusText.IN_PROGRESS, startIcon: jsx("img", { src: ScanIcon, alt: "Detection Icon" }) }, { children: 'Run Detection' }))] })), fetchAnomalyGroups.isLoading && (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }))), fetchAnomalyGroups.isError && (jsxs(Box$1, __assign({ mt: 2 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: anomalyGroupsFetchError && isNonEmptyString(anomalyGroupsFetchError)
+                                    anomalyDetectionStatus === AnomalyDetectionStatusText.IN_PROGRESS, startIcon: jsx("img", { src: ScanIcon, alt: "Detection Icon" }), children: 'Run Detection' })] }), fetchAnomalyGroups.isLoading && (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })), fetchAnomalyGroups.isError && (jsxs(Box$1, { mt: 2, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: anomalyGroupsFetchError && isNonEmptyString(anomalyGroupsFetchError)
                                     ? anomalyGroupsFetchError
                                     : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: anomalyGroupsFetchError && isNonEmptyString(anomalyGroupsFetchError)
                                     ? anomalyGroupsFetchError
-                                    : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR }))] }))), fetchAnomalyGroups.isSuccess &&
-                        (isNonEmptyObject(anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups.groups) ? (jsx(PerfAdvisorGantChart, { name: "gant-chart-insights", sourceData: anomalyGroups !== null && anomalyGroups !== void 0 ? anomalyGroups : [], expandAll: expandAll, showMoreOptions: true, onClickShowMoreAnomalies: onClickShowMoreAnomalies, startTime: (_b = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _b !== void 0 ? _b : null, endTime: (_c = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _c !== void 0 ? _c : null, onSelectedIssue: onSelectedIssue, appName: appName, currentTab: currentTab, isInsightsTab: currentTab === InsightsTabs.INSIGHTS, onNavigateToUrl: onNavigateToUrl }, "gant-chart-insights")) : (jsx(Box$1, __assign({ mt: 2 }, { children: 'No Anomalies were detected' }))))] }))] })));
+                                    : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR }))] })), fetchAnomalyGroups.isSuccess &&
+                        (isNonEmptyObject(anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups.groups) ? (jsx(PerfAdvisorGantChart, { name: "gant-chart-insights", sourceData: anomalyGroups !== null && anomalyGroups !== void 0 ? anomalyGroups : [], expandAll: expandAll, showMoreOptions: true, onClickShowMoreAnomalies: onClickShowMoreAnomalies, startTime: (_b = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _b !== void 0 ? _b : null, endTime: (_c = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _c !== void 0 ? _c : null, onSelectedIssue: onSelectedIssue, appName: appName, currentTab: currentTab, isInsightsTab: currentTab === InsightsTabs.INSIGHTS, onNavigateToUrl: onNavigateToUrl }, "gant-chart-insights")) : (jsx(Box$1, { mt: 2, children: 'No Anomalies were detected' })))] })] }));
 };
 
 var useStyles$9 = makeStyles$1(function (theme) { return ({
@@ -85360,7 +85311,7 @@ var DbLoadMetadata = function (_a) {
                     sort: true,
                     display: true,
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: 'Name of the database', placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: 'Database' })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: 'Name of the database', placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: 'Database' }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     setCellHeaderProps: function () { return ({
                         style: {
@@ -85400,7 +85351,7 @@ var DbLoadMetadata = function (_a) {
                         }
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: 'The ASH events per second (AAS) filtered for that database.', placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: '# of Connections' })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: 'The ASH events per second (AAS) filtered for that database.', placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: '# of Connections' }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     customBodyRender: function (value) {
                         return Number(value)
@@ -85434,7 +85385,7 @@ var DbLoadMetadata = function (_a) {
                             overflow: 'visible'
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: "Events" })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.WAIT_EVENT_TYPE_CHART_TOOLTIP, arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: "Events" }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return isNonEmptyArray(value) ? (jsx(QueryEventsChart, { data: value, maxEPS: maxEPS, groupByOperation: WaitEventClassification.WAIT_EVENT_TYPE })) : ('-');
                     }
@@ -85457,7 +85408,7 @@ var DbLoadMetadata = function (_a) {
                             return false;
                         }
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: "Type of database (SQL, CQL or System Level DB)", arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: "Type" })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: "Type of database (SQL, CQL or System Level DB)", arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: "Type" }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) { return (value ? value : '-'); }
                 }
             },
@@ -85474,7 +85425,7 @@ var DbLoadMetadata = function (_a) {
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     customHeadRender: function () {
-                        return (jsx(YBTooltip, __assign({ title: 'Rate of CPU active events divided by number of vCPUs', placement: "top", arrow: true }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: 'CPU %' })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) })));
+                        return (jsx(YBTooltip, { title: 'Rate of CPU active events divided by number of vCPUs', placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: 'CPU %' }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) }));
                     },
                     customBodyRender: function (value) {
                         return Number.isFinite(Number(value))
@@ -85495,7 +85446,7 @@ var DbLoadMetadata = function (_a) {
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
-                    customHeadRender: function () { return (jsx(YBTooltip, __assign({ title: "Sum of calls per second for queries executed in this database", arrow: true, placement: "top" }, { children: jsxs(Box$1, __assign({ className: helperClasses.headerBox }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: helperClasses.headerText }, { children: 'Calls/Sec' })), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] })) }))); },
+                    customHeadRender: function () { return (jsx(YBTooltip, { title: "Sum of calls per second for queries executed in this database", arrow: true, placement: "top", children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: 'Calls/Sec' }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
                         return Number(value) ? Number(value).toLocaleString() : '-';
                     }
@@ -85503,7 +85454,7 @@ var DbLoadMetadata = function (_a) {
             }
         ]);
     }, [dbLoadData, maxEPS]);
-    return (jsxs(Fragment, { children: [isDbLoadDataOptionsModalOpen && (jsx(ColumnSelectorDrawer, { appName: appName, hiddenColumns: [DB_METADATA_COLUMNS.UNIVERSE_ID], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal, isDbLoadMetadataColumns: true })), jsxs(Box$1, __assign({ mt: 3, p: 2, className: classes.dbLoadDataContainer }, { children: [jsx(Box$1, { children: jsx(Typography$1, __assign({ variant: "h5" }, { children: "".concat(dbWaitEventType === 'ALL' ? 'Events' : dbWaitEventType, " Load By Database") })) }), jsxs(Box$1, __assign({ className: helperClasses.filterContainer, mt: 2 }, { children: [jsxs(Box$1, __assign({ className: helperClasses.filterLeftContainer }, { children: [jsx(YBAutoComplete, { dataTestId: "DbLoadMetadata-DatabaseSelect", size: "medium", className: clsx(helperClasses.ybOverrideMuiSelect), onChange: function (e, option) {
+    return (jsxs(Fragment, { children: [isDbLoadDataOptionsModalOpen && (jsx(ColumnSelectorDrawer, { appName: appName, hiddenColumns: [DB_METADATA_COLUMNS.UNIVERSE_ID], columns: columns, onColumnVisibilityChange: handleColumnVisibilityChange, close: closeSelectionModal, isDbLoadMetadataColumns: true })), jsxs(Box$1, { mt: 3, p: 2, className: classes.dbLoadDataContainer, children: [jsx(Box$1, { children: jsx(Typography$1, { variant: "h5", children: "".concat(dbWaitEventType === 'ALL' ? 'Events' : dbWaitEventType, " Load By Database") }) }), jsxs(Box$1, { className: helperClasses.filterContainer, mt: 2, children: [jsxs(Box$1, { className: helperClasses.filterLeftContainer, children: [jsx(YBAutoComplete, { dataTestId: "DbLoadMetadata-DatabaseSelect", size: "medium", className: clsx(helperClasses.ybOverrideMuiSelect), onChange: function (e, option) {
                                             // Handle clear (X icon) - option will be null
                                             if (!option) {
                                                 setDatabase(ALL);
@@ -85539,20 +85490,20 @@ var DbLoadMetadata = function (_a) {
                                         }, value: searchInputValue, inputProps: {
                                             'data-testid': 'DbLoadMetadata-SearchInput'
                                         }, InputProps: {
-                                            startAdornment: (jsx(InputAdornment, __assign({ position: "start" }, { children: jsx(SvgSearch, {}) }))),
-                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, __assign({ position: "end" }, { children: jsx(IconButton, __assign({ size: "small", onClick: function () {
+                                            startAdornment: (jsx(InputAdornment, { position: "start", children: jsx(SvgSearch, {}) })),
+                                            endAdornment: !!searchInputValue && (jsx(InputAdornment, { position: "end", children: jsx(IconButton, { size: "small", onClick: function () {
                                                         debouncedSearchHandlerRef.current.cancel();
                                                         setSearchInput('');
                                                         setSearchInputValue('');
                                                         setCurrentTablePage(0);
-                                                    }, "data-testid": "DbLoadMetadata-ClearButton" }, { children: jsx(Clear, { fontSize: "small" }) })) })))
-                                        } })] })), jsx(YBButton, __assign({ size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, {}), onClick: openSelectionModal, dataTestId: "DbLoadMetadata-AddFieldsButton" }, { children: ADD_COLUMNS_BUTTON_TEXT }))] })), jsxs(Box$1, __assign({ className: appName === AppName.YBM
+                                                    }, "data-testid": "DbLoadMetadata-ClearButton", children: jsx(Clear, { fontSize: "small" }) }) }))
+                                        } })] }), jsx(YBButton, { size: 'medium', variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx(SvgPlus, {}), onClick: openSelectionModal, dataTestId: "DbLoadMetadata-AddFieldsButton", children: ADD_COLUMNS_BUTTON_TEXT })] }), jsxs(Box$1, { className: appName === AppName.YBM
                             ? helperClasses.overrideMuiTableContainer
-                            : helperClasses.overrideMuiTableContainerWeb }, { children: [(isDbLoadDataFetchError || isDBFetchError) && (jsxs(Box$1, __assign({ mt: 3, className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = dbLoadDataError === null || dbLoadDataError === void 0 ? void 0 : dbLoadDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
+                            : helperClasses.overrideMuiTableContainerWeb, children: [(isDbLoadDataFetchError || isDBFetchError) && (jsxs(Box$1, { mt: 3, className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString((_d = (_c = dbLoadDataError === null || dbLoadDataError === void 0 ? void 0 : dbLoadDataError.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error)
                                             ? (_f = (_e = dbLoadDataError === null || dbLoadDataError === void 0 ? void 0 : dbLoadDataError.response) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.error
                                             : DEFAULT_ERROR_MESSAGES.DB_STATS_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString((_h = (_g = dbLoadDataError === null || dbLoadDataError === void 0 ? void 0 : dbLoadDataError.response) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.error)
                                             ? (_k = (_j = dbLoadDataError === null || dbLoadDataError === void 0 ? void 0 : dbLoadDataError.response) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.error
-                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] }))), isDbLoadDataFetchSuccess && (jsx(YBTable, { id: 'DbLoadMetadata', className: helperClasses.overrideMuiTable, data: dbLoadData !== null && dbLoadData !== void 0 ? dbLoadData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isDbLoadDataFetching, options: {
+                                            : DEFAULT_ERROR_MESSAGES.HISTORICAL_QUERY_DATA_FETCH_ERROR }))] })), isDbLoadDataFetchSuccess && (jsx(YBTable, { id: 'DbLoadMetadata', className: helperClasses.overrideMuiTable, data: dbLoadData !== null && dbLoadData !== void 0 ? dbLoadData : [], columns: columns === null || columns === void 0 ? void 0 : columns.filter(function (column) { var _a; return (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display; }), isLoading: isDbLoadDataFetching, options: {
                                     enableExpanding: true,
                                     renderDetailPanel: function (_a) {
                                         var row = _a.row;
@@ -85589,7 +85540,7 @@ var DbLoadMetadata = function (_a) {
                                     customFooter: customFooter,
                                     manualSorting: true,
                                     state: tableState
-                                } }, "DbLoadMetadata-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] }))] }))] }));
+                                } }, "DbLoadMetadata-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] })] })] }));
 };
 
 var useStyles$8 = makeStyles$1(function (theme) { return ({
@@ -85692,12 +85643,12 @@ var BackgroundJobs = function (_a) {
     var totalBackgroundTasksCount = (backgroundTasks === null || backgroundTasks === void 0 ? void 0 : backgroundTasks.groups)
         ? Object.values(backgroundTasks.groups).reduce(function (total, categoryGroups) { return total + Object.keys(categoryGroups !== null && categoryGroups !== void 0 ? categoryGroups : {}).length; }, 0)
         : 0;
-    return (jsxs(Accordion, __assign({ expanded: isAccordionExpanded, className: classes.accordion, onChange: handleAccordionChange }, { children: [jsx(AccordionSummary, __assign({ className: clsx(classes.accordionSummary, !isAccordionExpanded && classes.accordionSummaryCollapsed), expandIcon: jsx("img", { src: ArrowDownwardIcon, className: classes.expandIcon, alt: isAccordionExpanded ? 'Collapse' : 'Expand' }) }, { children: jsxs(Box$1, __assign({ className: classes.headerTitleContainer }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: classes.headerTitle }, { children: "Background Jobs" })), !isAccordionExpanded && (jsx(Box$1, __assign({ className: classes.countTextContainer }, { children: jsx(Typography$1, __assign({ variant: "body2", className: classes.countText }, { children: totalBackgroundTasksCount })) })))] })) })), jsxs(AccordionDetails, __assign({ className: classes.accordionDetails }, { children: [jsx(Box$1, __assign({ className: classes.expandChartButtonContainer }, { children: jsx(YBButton, __assign({ onClick: handleExpandChart, dataTestId: "BackgroundJobs-ExpandAllBtn", variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx("img", { src: !expandChart ? ExpandIcon : CollapseIcon, alt: "Expand Icon" }) }, { children: !expandChart ? 'Expand All' : 'Collapse All' })) })), fetchBackgroundTasks.isLoading && (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }))), fetchBackgroundTasks.isError && (jsxs(Box$1, __assign({ mt: 2 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: backgroundTasksFetchError && isNonEmptyString(backgroundTasksFetchError)
+    return (jsxs(Accordion, { expanded: isAccordionExpanded, className: classes.accordion, onChange: handleAccordionChange, children: [jsx(AccordionSummary, { className: clsx(classes.accordionSummary, !isAccordionExpanded && classes.accordionSummaryCollapsed), expandIcon: jsx("img", { src: ArrowDownwardIcon, className: classes.expandIcon, alt: isAccordionExpanded ? 'Collapse' : 'Expand' }), children: jsxs(Box$1, { className: classes.headerTitleContainer, children: [jsx(Typography$1, { variant: "body2", className: classes.headerTitle, children: "Background Jobs" }), !isAccordionExpanded && (jsx(Box$1, { className: classes.countTextContainer, children: jsx(Typography$1, { variant: "body2", className: classes.countText, children: totalBackgroundTasksCount }) }))] }) }), jsxs(AccordionDetails, { className: classes.accordionDetails, children: [jsx(Box$1, { className: classes.expandChartButtonContainer, children: jsx(YBButton, { onClick: handleExpandChart, dataTestId: "BackgroundJobs-ExpandAllBtn", variant: appName === AppName.YBM ? 'ghost' : 'secondary', startIcon: jsx("img", { src: !expandChart ? ExpandIcon : CollapseIcon, alt: "Expand Icon" }), children: !expandChart ? 'Expand All' : 'Collapse All' }) }), fetchBackgroundTasks.isLoading && (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })), fetchBackgroundTasks.isError && (jsxs(Box$1, { mt: 2, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: backgroundTasksFetchError && isNonEmptyString(backgroundTasksFetchError)
                                     ? backgroundTasksFetchError
                                     : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: backgroundTasksFetchError && isNonEmptyString(backgroundTasksFetchError)
                                     ? backgroundTasksFetchError
-                                    : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR }))] }))), fetchBackgroundTasks.isSuccess &&
-                        (!!backgroundTasks && isNonEmptyObject(backgroundTasks) ? (jsx(PerfAdvisorGantChart, { appName: appName, endTime: endTime, isInsightsTab: false, startTime: startTime, currentTab: currentTab, expandAll: expandChart, isBackgroundJobs: true, sourceData: backgroundTasks, onSelectedIssue: onSelectedIssue, name: "gant-chart-background-jobs", onClickShowMoreAnomalies: onClickShowMoreAnomalies }, "gant-chart-background-jobs")) : (jsx(Box$1, __assign({ mt: 2 }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: "No Background Jobs detected" })) }))))] }))] })));
+                                    : DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR }))] })), fetchBackgroundTasks.isSuccess &&
+                        (!!backgroundTasks && isNonEmptyObject(backgroundTasks) ? (jsx(PerfAdvisorGantChart, { appName: appName, endTime: endTime, isInsightsTab: false, startTime: startTime, currentTab: currentTab, expandAll: expandChart, isBackgroundJobs: true, sourceData: backgroundTasks, onSelectedIssue: onSelectedIssue, name: "gant-chart-background-jobs", onClickShowMoreAnomalies: onClickShowMoreAnomalies }, "gant-chart-background-jobs")) : (jsx(Box$1, { mt: 2, children: jsx(Typography$1, { variant: "body2", children: "No Background Jobs detected" }) })))] })] }));
 };
 
 var img$1 = "data:image/svg+xml,%3csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.5 4.5C4.237 4.5 3.214 5.523 3.214 6.786V11.357L1 12.5L3.214 13.643V18.214C3.214 19.477 4.237 20.5 5.5 20.5' stroke='%230B1117' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M18.4995 4.47221C19.7625 4.47221 20.7855 5.49521 20.7855 6.75821V11.3292L22.9995 12.4722L20.7855 13.6152V18.1862C20.7855 19.4492 19.7625 20.4722 18.4995 20.4722' stroke='%230B1117' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3crect x='7' y='14.5' width='2' height='3' rx='0.5' fill='%230B1117'/%3e%3crect x='11' y='11.5' width='2' height='6' rx='0.5' fill='%230B1117'/%3e%3crect x='15' y='7.5' width='2' height='10' rx='0.5' fill='%230B1117'/%3e%3c/svg%3e";
@@ -85775,17 +85726,17 @@ var useStyles$7 = makeStyles$1(function (theme) { return ({
 }); });
 var PerfAdvisorTabs = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-    var startTime = _a.startTime, endTime = _a.endTime, universeUuid = _a.universeUuid, appName = _a.appName, timezone = _a.timezone, filterDuration = _a.filterDuration, apiUrl = _a.apiUrl, universeData = _a.universeData, isAshEnabled = _a.isAshEnabled, isAshSupported = _a.isAshSupported, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, notifyTabChange = _a.notifyTabChange, onStartDateChange = _a.onStartDateChange, onEndDateChange = _a.onEndDateChange, onRefresh = _a.onRefresh, onSelectedFilterDuration = _a.onSelectedFilterDuration, onNavigateToUrl = _a.onNavigateToUrl;
+    var startTime = _a.startTime, endTime = _a.endTime, universeUuid = _a.universeUuid, appName = _a.appName, timezone = _a.timezone, filterDuration = _a.filterDuration, apiUrl = _a.apiUrl, universeData = _a.universeData, isAshEnabled = _a.isAshEnabled, isAshSupported = _a.isAshSupported, showStandaloneAnomalies = _a.showStandaloneAnomalies, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, notifyTabChange = _a.notifyTabChange, onStartDateChange = _a.onStartDateChange, onEndDateChange = _a.onEndDateChange, onRefresh = _a.onRefresh, onSelectedFilterDuration = _a.onSelectedFilterDuration, onNavigateToUrl = _a.onNavigateToUrl;
     var classes = useStyles$7();
     var helperClasses = useHelperStyles();
-    var getCurrentTab = function () { return parseUrlState(appName).currentTab; };
+    var getCurrentTab = function () { return parseUrlState().currentTab; };
     // State variables
     var _q = useState([]), filteredLegends = _q[0], setFilteredLegends = _q[1];
     var _r = useState(null), anomalyGroups = _r[0], setAnomalyGroups = _r[1];
     var _s = useState(getCurrentTab()), currentTab = _s[0], setCurrentTab = _s[1];
     var _t = useState(Object.values(InsightsTabs)), filteredTabs = _t[0], setFilteredTabs = _t[1];
     var _u = useState(GROUP_BY_OPERATIONS[0]), groupByOperation = _u[0], setGroupByOperation = _u[1];
-    var _v = useState(ClusterLoadOverallTabs.ANOMALIES), clusterLoadOverallSubTab = _v[0], setClusterLoadOverallSubTab = _v[1];
+    var _v = useState(ClusterLoadOverallTabs.QUERIES), clusterLoadOverallSubTab = _v[0], setClusterLoadOverallSubTab = _v[1];
     var _w = useState(ClusterLoadSubTabs.OVERALL_LOAD), clusterLoadSubTab = _w[0], setClusterLoadSubTab = _w[1];
     // TODO: Check with Min if we need to print the time for anomalyDetectionStatusTime
     var _x = useState(AnomalyDetectionStatusText.EMPTY), anomalyDetectionStatus = _x[0]; _x[1];
@@ -85857,13 +85808,17 @@ var PerfAdvisorTabs = function (_a) {
         // Avoid unnecessary API calls when the component mounts if the tab is METRICS
         if ((currentTab === InsightsTabs.CLUSTER_LOAD &&
             clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES) ||
-            currentTab === InsightsTabs.INSIGHTS) {
+            currentTab === InsightsTabs.INSIGHTS ||
+            showStandaloneAnomalies) {
             fetchAnomalyGroups.refetch();
         }
     }, [startTime === null || startTime === void 0 ? void 0 : startTime.toISOString(), endTime === null || endTime === void 0 ? void 0 : endTime.toISOString(), currentTab, cluster, region, zone, node]);
     // Initialize state from URL on component mount
     useEffect(function () {
-        var urlState = parseUrlState(appName);
+        if (showStandaloneAnomalies) {
+            return;
+        }
+        var urlState = parseUrlState();
         setCurrentTab(urlState.currentTab);
         setClusterLoadSubTab(urlState.clusterLoadSubTab);
         setClusterLoadOverallSubTab(urlState.clusterLoadOverallSubTab);
@@ -85881,7 +85836,7 @@ var PerfAdvisorTabs = function (_a) {
             // Default fallback: redirect to ANOMALIES
             var urlParams = new URLSearchParams(window.location.search);
             var queryString = urlParams.toString();
-            var newPath = "".concat(window.location.pathname, "/").concat(URL_TAB_PATH.ANOMALIES).concat(queryString ? "?".concat(queryString) : '');
+            var newPath = "".concat(window.location.pathname, "/").concat(URL_TAB_PATH.QUERIES).concat(queryString ? "?".concat(queryString) : '');
             window.history.replaceState(null, '', newPath);
         }
     }, []);
@@ -85913,7 +85868,7 @@ var PerfAdvisorTabs = function (_a) {
     };
     // Sync URL when Cluster Load sub-tabs change
     useEffect(function () {
-        if (currentTab === InsightsTabs.CLUSTER_LOAD) {
+        if (currentTab === InsightsTabs.CLUSTER_LOAD && !showStandaloneAnomalies) {
             updateUrl(appName, currentTab, clusterLoadSubTab, clusterLoadOverallSubTab);
         }
     }, [clusterLoadOverallSubTab, clusterLoadSubTab, currentTab]);
@@ -85924,7 +85879,7 @@ var PerfAdvisorTabs = function (_a) {
             case InsightsTabs.INSIGHTS:
                 return jsx(Box$1, { mt: 0.5 });
             case InsightsTabs.CLUSTER_LOAD:
-                return (jsx(Box$1, __assign({ ml: appName === AppName.WEB ? 2 : 0 }, { children: jsx(Box$1, __assign({ display: "flex", alignItems: "center", className: classes.tabsContainer }, { children: jsx(YBTabs, __assign({ value: clusterLoadSubTab, className: classes.ybTabs, onChange: handleClusterLoadSubTabChange }, { children: Object.values(ClusterLoadSubTabs).map(function (tab, index) { return (jsx(YBStyledTab, { "data-testid": "".concat(tab, "ClusterLoadSubTab"), value: tab, label: tab }, index)); }) })) })) })));
+                return (jsx(Box$1, { ml: appName === AppName.WEB ? 2 : 0, children: jsx(Box$1, { display: "flex", alignItems: "center", className: classes.tabsContainer, children: jsx(YBTabs, { value: clusterLoadSubTab, className: classes.ybTabs, onChange: handleClusterLoadSubTabChange, children: Object.values(ClusterLoadSubTabs).map(function (tab, index) { return (jsx(YBStyledTab, { "data-testid": "".concat(tab, "ClusterLoadSubTab"), value: tab, label: tab }, index)); }) }) }) }));
             default:
                 return null;
         }
@@ -85994,16 +85949,25 @@ var PerfAdvisorTabs = function (_a) {
     var onQueryTypeSelected = function (selectedOption) {
         setQueryType(selectedOption);
     };
+    var renderHeaderComponent = function () {
+        return (jsxs(Box$1, { children: [jsx(Box$1, { mt: 2.5, mb: 2.5, children: jsx(DateSelectorHeader, { appName: appName, filterDuration: filterDuration, startDateTime: startTime, endDateTime: endTime, timezone: timezone, isDrilldownView: false, currentTab: currentTab, clusterLoadSubTab: currentTab === InsightsTabs.CLUSTER_LOAD ? clusterLoadSubTab : null, isClusterLoadView: currentTab === InsightsTabs.CLUSTER_LOAD, isTopKMetricsView: currentTab === InsightsTabs.METRICS, onSelectedFilterDuration: onSelectedFilterDuration, metricMeasure: metricMeasure, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh }) }), clusterLoadSubTab !== ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsx(Box$1, { mt: 2, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0, children: jsx(GenericHeader, { appName: appName, universeData: universeData, clusterRegionItem: clusterRegionItem, zoneNodeItem: zoneNodeItem, isPrimaryCluster: isPrimaryCluster, cluster: cluster, region: region, metricMeasure: metricMeasure, outlierType: outlierType, numNodes: numNodes, isDrilldownView: false, anomalyData: null, queryType: queryType, 
+                        // Do not show Overall and Outlier selectors in standalone anomalies view
+                        showSplitSelector: showStandaloneAnomalies ? false : showSplitSelector, showQueryTypeSelector: showQueryTypeSelector, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged, onQueryTypeSelected: onQueryTypeSelected }) }))] }));
+    };
+    if (showStandaloneAnomalies) {
+        return (jsxs(Box$1, { mt: 2, children: [renderHeaderComponent(), jsx(DetectedAnomalies, { apiUrl: apiUrl, appName: appName, endTime: endTime, startTime: startTime, currentTab: currentTab, universeUuid: universeUuid, anomalyGroups: anomalyGroups, onSelectedIssue: onSelectedIssue, fetchAnomalyGroups: fetchAnomalyGroups, anomalyGroupsFetchError: anomalyGroupsFetchError, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onNavigateToUrl: onNavigateToUrl })] }));
+    }
+    console.warn('appName', appName);
     var showSplitSelector = currentTab === InsightsTabs.METRICS;
     var showQueryTypeSelector = currentTab !== InsightsTabs.METRICS;
-    return (jsxs(Box$1, __assign({ className: clsx(appName === AppName.WEB ? classes.tabBox : undefined) }, { children: [appName === AppName.WEB && (jsx(Box$1, { children: jsxs(TabContext, __assign({ value: currentTab }, { children: [jsx(Box$1, __assign({ display: "flex", alignItems: "center", className: classes.tabsContainer }, { children: jsx(YBTabs, __assign({ value: currentTab, onChange: handleTabChange }, { children: filteredTabs.map(function (tab, index) { return (jsx(YBTab, { "data-testid": "".concat(tab, "Tab"), value: tab, label: tab, className: classes.tabButton }, index)); }) })) })), jsx(TabPanel, __assign({ className: helperClasses.tabPanelPrimary, value: InsightsTabs.METRICS }, { children: renderComponent(InsightsTabs.METRICS) })), jsx(TabPanel, __assign({ className: helperClasses.tabPanelPrimary, value: InsightsTabs.CLUSTER_LOAD }, { children: renderComponent(InsightsTabs.CLUSTER_LOAD) }))] })) })), (appName === AppName.YBM || appName === AppName.YBA) && jsx(Fragment, { children: renderComponent(currentTab) }), jsx(Box$1, __assign({ mt: 2.5, mb: 2.5 }, { children: jsx(DateSelectorHeader, { appName: appName, filterDuration: filterDuration, startDateTime: startTime, endDateTime: endTime, timezone: timezone, isDrilldownView: false, currentTab: currentTab, clusterLoadSubTab: currentTab === InsightsTabs.CLUSTER_LOAD ? clusterLoadSubTab : null, isClusterLoadView: currentTab === InsightsTabs.CLUSTER_LOAD, isTopKMetricsView: currentTab === InsightsTabs.METRICS, onSelectedFilterDuration: onSelectedFilterDuration, metricMeasure: metricMeasure, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh }) })), clusterLoadSubTab !== ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsx(Box$1, __assign({ mt: 2, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0 }, { children: jsx(GenericHeader, { appName: appName, universeData: universeData, clusterRegionItem: clusterRegionItem, zoneNodeItem: zoneNodeItem, isPrimaryCluster: isPrimaryCluster, cluster: cluster, region: region, metricMeasure: metricMeasure, outlierType: outlierType, numNodes: numNodes, isDrilldownView: false, anomalyData: null, queryType: queryType, showSplitSelector: showSplitSelector, showQueryTypeSelector: showQueryTypeSelector, onZoneNodeSelected: onZoneNodeSelected, onClusterRegionSelected: onClusterRegionSelected, onOutlierTypeSelected: onOutlierTypeSelected, onSplitTypeSelected: onSplitTypeSelected, onNumNodesChanged: onNumNodesChanged, onQueryTypeSelected: onQueryTypeSelected }) }))), currentTab === InsightsTabs.METRICS && (jsx(ProcessTopKData, { universeUuid: universeUuid, appName: appName, timezone: timezone, apiUrl: apiUrl, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails })), currentTab === InsightsTabs.CLUSTER_LOAD &&
-                clusterLoadSubTab === ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsxs(Box$1, __assign({ mt: 2, ml: appName === AppName.WEB ? 2 : 0 }, { children: [clusterLoadSubTab === ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsx(DbLoadHeader, { outlierType: outlierType, waitEventType: dbWaitEventType, numNodes: numNodes, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onChangeDbWaitEventType: onChangeDbWaitEventType })), jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: true, startTime: (_e = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _e !== void 0 ? _e : null, endTime: (_f = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _f !== void 0 ? _f : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: isAshEnabled, isAshSupported: isAshSupported, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), jsx(DbLoadMetadata, { appName: appName, universeUuid: universeUuid, apiUrl: apiUrl, dbWaitEventType: dbWaitEventType, startTime: (_g = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _g !== void 0 ? _g : null, endTime: (_h = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _h !== void 0 ? _h : null, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })] }))), currentTab === InsightsTabs.CLUSTER_LOAD &&
-                clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD && (jsxs(Box$1, __assign({ ml: appName === AppName.WEB ? 2 : 0 }, { children: [jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: false, startTime: (_j = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _j !== void 0 ? _j : null, endTime: (_k = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _k !== void 0 ? _k : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: isAshEnabled, isAshSupported: isAshSupported, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), jsx(Box$1, __assign({ display: "flex", alignItems: "center", className: classes.tabsContainer, mt: 5 }, { children: jsxs(YBTabs, __assign({ pill: true, value: clusterLoadOverallSubTab, onChange: handleClusterLoadOverallSubTabChange }, { children: [jsx(YBStyledTab, { icon: jsx("img", { src: AnomaliesIcon, alt: "Anomalies Icon", style: { marginRight: '8px' } }), value: ClusterLoadOverallTabs.ANOMALIES, label: ClusterLoadOverallTabs.ANOMALIES }), jsx(YBStyledTab, { icon: jsx("img", { src: QueriesIcon, alt: "Queries Icon", style: { marginRight: '8px' } }), value: ClusterLoadOverallTabs.QUERIES, label: ClusterLoadOverallTabs.QUERIES })] })) })), clusterLoadOverallSubTab === ClusterLoadOverallTabs.QUERIES && (jsx(Box$1, { children: jsx(HistoricalQueryData, { universeUuid: universeUuid, groupByOperation: groupByOperation, apiUrl: apiUrl, startTime: (_l = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _l !== void 0 ? _l : null, endTime: (_m = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _m !== void 0 ? _m : null, appName: appName, filteredLegends: filteredLegends, queryType: queryType, onSelectedQuery: onSelectedQuery, getClusterDetails: getClusterDetails, onNavigateToUrl: onNavigateToUrl }) })), clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES && (jsx(Box$1, __assign({ className: helperClasses.noteTextContainer }, { children: jsxs(Typography$1, __assign({ variant: "body2", className: helperClasses.noteText }, { children: [jsx(Typography$1, __assign({ variant: "body2", className: clsx(helperClasses.noteText, helperClasses.noteTextBold) }, { children: "Note!" })), "Only the time window filter applies to this view."] })) })))] }))), currentTab === InsightsTabs.CLUSTER_LOAD &&
+    return (jsxs(Box$1, { className: clsx(appName === AppName.WEB ? classes.tabBox : undefined), children: [appName === AppName.WEB && (jsx(Box$1, { children: jsxs(TabContext, { value: currentTab, children: [jsx(Box$1, { display: "flex", alignItems: "center", className: classes.tabsContainer, children: jsx(YBTabs, { value: currentTab, onChange: handleTabChange, children: filteredTabs.map(function (tab, index) { return (jsx(YBTab, { "data-testid": "".concat(tab, "Tab"), value: tab, label: tab, className: classes.tabButton }, index)); }) }) }), jsx(TabPanel, { className: helperClasses.tabPanelPrimary, value: InsightsTabs.METRICS, children: renderComponent(InsightsTabs.METRICS) }), jsx(TabPanel, { className: helperClasses.tabPanelPrimary, value: InsightsTabs.CLUSTER_LOAD, children: renderComponent(InsightsTabs.CLUSTER_LOAD) })] }) })), (appName === AppName.YBM || appName === AppName.YBA) && jsx(Fragment, { children: renderComponent(currentTab) }), renderHeaderComponent(), currentTab === InsightsTabs.METRICS && (jsx(ProcessTopKData, { universeUuid: universeUuid, appName: appName, timezone: timezone, apiUrl: apiUrl, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails })), currentTab === InsightsTabs.CLUSTER_LOAD &&
+                clusterLoadSubTab === ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsxs(Box$1, { mt: 2, ml: appName === AppName.WEB ? 2 : 0, children: [clusterLoadSubTab === ClusterLoadSubTabs.LOAD_BY_DATABASE && (jsx(DbLoadHeader, { outlierType: outlierType, waitEventType: dbWaitEventType, numNodes: numNodes, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onChangeDbWaitEventType: onChangeDbWaitEventType })), jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: true, startTime: (_e = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _e !== void 0 ? _e : null, endTime: (_f = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _f !== void 0 ? _f : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: isAshEnabled, isAshSupported: isAshSupported, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), jsx(DbLoadMetadata, { appName: appName, universeUuid: universeUuid, apiUrl: apiUrl, dbWaitEventType: dbWaitEventType, startTime: (_g = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _g !== void 0 ? _g : null, endTime: (_h = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _h !== void 0 ? _h : null, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })] })), currentTab === InsightsTabs.CLUSTER_LOAD &&
+                clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD && (jsxs(Box$1, { ml: appName === AppName.WEB ? 2 : 0, children: [jsx(PerfAdvisorClusterLoad, { dbWaitEventType: dbWaitEventType, isDbClusterLoadView: false, startTime: (_j = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _j !== void 0 ? _j : null, endTime: (_k = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _k !== void 0 ? _k : null, apiUrl: apiUrl, universeUuid: universeUuid, appName: appName, metricKey: "cluster_load", groupByOperation: groupByOperation, shouldAbbreviateTraceName: true, timezone: timezone, isAshEnabled: isAshEnabled, isAshSupported: isAshSupported, onFilterBarData: onFilterBarData, onSetGroupByOperation: onSetGroupByOperation, onEChartsDateSelect: onEChartsDateSelect, getClusterDetails: getClusterDetails }), appName === AppName.WEB && (jsx(Box$1, { display: "flex", alignItems: "center", className: classes.tabsContainer, mt: 5, children: jsxs(YBTabs, { pill: true, value: clusterLoadOverallSubTab, onChange: handleClusterLoadOverallSubTabChange, children: [jsx(YBStyledTab, { icon: jsx("img", { src: AnomaliesIcon, alt: "Anomalies Icon", style: { marginRight: '8px' } }), value: ClusterLoadOverallTabs.ANOMALIES, label: ClusterLoadOverallTabs.ANOMALIES }), jsx(YBStyledTab, { icon: jsx("img", { src: QueriesIcon, alt: "Queries Icon", style: { marginRight: '8px' } }), value: ClusterLoadOverallTabs.QUERIES, label: ClusterLoadOverallTabs.QUERIES })] }) })), clusterLoadOverallSubTab === ClusterLoadOverallTabs.QUERIES && (jsx(Box$1, { children: jsx(HistoricalQueryData, { universeUuid: universeUuid, groupByOperation: groupByOperation, apiUrl: apiUrl, startTime: (_l = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _l !== void 0 ? _l : null, endTime: (_m = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _m !== void 0 ? _m : null, appName: appName, filteredLegends: filteredLegends, queryType: queryType, onSelectedQuery: onSelectedQuery, getClusterDetails: getClusterDetails, onNavigateToUrl: onNavigateToUrl }) })), clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES && (jsx(Box$1, { className: helperClasses.noteTextContainer, children: jsxs(Typography$1, { variant: "body2", className: helperClasses.noteText, children: [jsx(Typography$1, { variant: "body2", className: clsx(helperClasses.noteText, helperClasses.noteTextBold), children: "Note!" }), "Only the time window filter applies to this view."] }) }))] })), currentTab === InsightsTabs.CLUSTER_LOAD &&
                 clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD &&
-                clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES && (jsx(Box$1, __assign({ mt: 2, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0 }, { children: jsx(BackgroundJobs, { apiUrl: apiUrl, appName: appName, currentTab: currentTab, universeUuid: universeUuid, onSelectedIssue: onSelectedIssue, endTime: (_o = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _o !== void 0 ? _o : null, startTime: (_p = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _p !== void 0 ? _p : null, onClickShowMoreAnomalies: onClickShowMoreAnomalies }) }))), (currentTab === InsightsTabs.INSIGHTS ||
+                clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES && (jsx(Box$1, { mt: 2, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0, children: jsx(BackgroundJobs, { apiUrl: apiUrl, appName: appName, currentTab: currentTab, universeUuid: universeUuid, onSelectedIssue: onSelectedIssue, endTime: (_o = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _o !== void 0 ? _o : null, startTime: (_p = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _p !== void 0 ? _p : null, onClickShowMoreAnomalies: onClickShowMoreAnomalies }) })), (currentTab === InsightsTabs.INSIGHTS ||
                 (currentTab === InsightsTabs.CLUSTER_LOAD &&
                     clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD &&
-                    clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES)) && (jsx(Box$1, __assign({ mt: 2, mb: appName === AppName.WEB ? 4 : 0, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0 }, { children: jsx(DetectedAnomalies, { apiUrl: apiUrl, appName: appName, endTime: endTime, startTime: startTime, currentTab: currentTab, universeUuid: universeUuid, anomalyGroups: anomalyGroups, onSelectedIssue: onSelectedIssue, fetchAnomalyGroups: fetchAnomalyGroups, anomalyGroupsFetchError: anomalyGroupsFetchError, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onNavigateToUrl: onNavigateToUrl }) })))] })));
+                    clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES)) && (jsx(Box$1, { mt: 2, mb: appName === AppName.WEB ? 4 : 0, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0, children: jsx(DetectedAnomalies, { apiUrl: apiUrl, appName: appName, endTime: endTime, startTime: startTime, currentTab: currentTab, universeUuid: universeUuid, anomalyGroups: anomalyGroups, onSelectedIssue: onSelectedIssue, fetchAnomalyGroups: fetchAnomalyGroups, anomalyGroupsFetchError: anomalyGroupsFetchError, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onNavigateToUrl: onNavigateToUrl }) }))] }));
 };
 
 /**
@@ -92295,26 +92259,26 @@ var ShowMoreAnomalies = function (_a) {
         }
     });
     var anomalyGroupsFetchError = (_d = (_c = (_b = fetchAnomalyGroupsByType === null || fetchAnomalyGroupsByType === void 0 ? void 0 : fetchAnomalyGroupsByType.error) === null || _b === void 0 ? void 0 : _b.response) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.error;
-    return (jsxs(Box$1, __assign({ className: classes.tabBox }, { children: [jsxs(Breadcrumbs, __assign({ className: helperClasses.breadCrumb, separator: jsx(Typography$1, __assign({ variant: "body2" }, { children: "/" })), "aria-label": "breadcrumb", "data-testid": "PrimaryDashboardBreadcrumb" }, { children: [jsx(Link$1, __assign({ className: helperClasses.breadcrumbColor, component: Link, variant: "h5", onClick: function () {
+    return (jsxs(Box$1, { className: classes.tabBox, children: [jsxs(Breadcrumbs, { className: helperClasses.breadCrumb, separator: jsx(Typography$1, { variant: "body2", children: "/" }), "aria-label": "breadcrumb", "data-testid": "PrimaryDashboardBreadcrumb", children: [jsx(Link$1, { className: helperClasses.breadcrumbColor, component: Link, variant: "h5", onClick: function () {
                             onClickShowMoreAnomalies(null);
                             window.history.pushState({}, '', window.location.href);
-                        }, to: "#" }, { children: jsx("span", __assign({ className: helperClasses.breadCrumbText }, { children: selectedTab === InsightsTabs.CLUSTER_LOAD ? 'Anomalies' : 'Insights' })) })), jsx(Typography$1, __assign({ variant: "h5" }, { children: jsx("span", __assign({ className: clsx(helperClasses.breadCrumbText, helperClasses.anomalyCategoryText) }, { children: "".concat((_f = (_e = anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups[0]) === null || _e === void 0 ? void 0 : _e.lastInstance) === null || _f === void 0 ? void 0 : _f.title) ||
-                                "".concat(ANOMALY_TYPE_TO_NAME_MAP[showMoreAnomalyCategory]) })) }))] })), jsxs(Box$1, __assign({ mt: 3 }, { children: [fetchAnomalyGroupsByType.isLoading && (jsx(Box$1, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })), fetchAnomalyGroupsByType.isError && (jsxs(Box$1, __assign({ mt: 3 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(anomalyGroupsFetchError)
+                        }, to: "#", children: jsx("span", { className: helperClasses.breadCrumbText, children: selectedTab === InsightsTabs.CLUSTER_LOAD ? 'Anomalies' : 'Insights' }) }), jsx(Typography$1, { variant: "h5", children: jsx("span", { className: clsx(helperClasses.breadCrumbText, helperClasses.anomalyCategoryText), children: "".concat((_f = (_e = anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups[0]) === null || _e === void 0 ? void 0 : _e.lastInstance) === null || _f === void 0 ? void 0 : _f.title) ||
+                                "".concat(ANOMALY_TYPE_TO_NAME_MAP[showMoreAnomalyCategory]) }) })] }), jsxs(Box$1, { mt: 3, children: [fetchAnomalyGroupsByType.isLoading && (jsx(Box$1, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })), fetchAnomalyGroupsByType.isError && (jsxs(Box$1, { mt: 3, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(anomalyGroupsFetchError)
                                     ? anomalyGroupsFetchError
                                     : DEFAULT_ERROR_MESSAGES.SHOW_MORE_ANOMALIES_FETCH_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(anomalyGroupsFetchError)
                                     ? anomalyGroupsFetchError
-                                    : DEFAULT_ERROR_MESSAGES.SHOW_MORE_ANOMALIES_FETCH_ERROR }))] }))), fetchAnomalyGroupsByType.isSuccess &&
-                        (isNonEmptyArray(anomalyGroups) ? (jsxs(Box$1, { children: [jsxs(Box$1, __assign({ display: "flex", alignItems: "center", mb: 2, style: { marginLeft: '12px' }, onClick: function () {
+                                    : DEFAULT_ERROR_MESSAGES.SHOW_MORE_ANOMALIES_FETCH_ERROR }))] })), fetchAnomalyGroupsByType.isSuccess &&
+                        (isNonEmptyArray(anomalyGroups) ? (jsxs(Box$1, { children: [jsxs(Box$1, { display: "flex", alignItems: "center", mb: 2, style: { marginLeft: '12px' }, onClick: function () {
                                         if (isNonEmptyArray(anomalyGroups)) {
                                             var names = anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups.map(function (group) { var _a; return (_a = group.lastInstance) === null || _a === void 0 ? void 0 : _a.entityDisplayName; }).filter(Boolean).join('\n');
                                             navigator.clipboard.writeText(names);
                                         }
-                                    } }, { children: [jsx(FileCopy, { style: { cursor: 'pointer', height: 16, width: 16 } }), jsx(Typography$1, __assign({ variant: "body2", style: { marginLeft: 8, textDecoration: 'underline', cursor: 'pointer' } }, { children: "Copy all entities" }))] })), jsx(PerfAdvisorGantChart, { name: 'gant-chart-show-more-anomalies', sourceData: anomalyGroups !== null && anomalyGroups !== void 0 ? anomalyGroups : [], showMoreOptions: false, expandAll: true, startTime: startTime, endTime: endTime, onSelectedIssue: onSelectedIssue, appName: appName, viewAllAnomalies: true }, "gant-chart-show-more-anomalies")] })) : (jsx(Box$1, { children: 'No Anomalies were detected' })))] }))] })));
+                                    }, children: [jsx(FileCopy, { style: { cursor: 'pointer', height: 16, width: 16 } }), jsx(Typography$1, { variant: "body2", style: { marginLeft: 8, textDecoration: 'underline', cursor: 'pointer' }, children: "Copy all entities" })] }), jsx(PerfAdvisorGantChart, { name: 'gant-chart-show-more-anomalies', sourceData: anomalyGroups !== null && anomalyGroups !== void 0 ? anomalyGroups : [], showMoreOptions: false, expandAll: true, startTime: startTime, endTime: endTime, onSelectedIssue: onSelectedIssue, appName: appName, viewAllAnomalies: true }, "gant-chart-show-more-anomalies")] })) : (jsx(Box$1, { children: 'No Anomalies were detected' })))] })] }));
 };
 
 var PerfAdvisorEntry = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    var timezone = _a.timezone, universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
+    var timezone = _a.timezone, universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, _m = _a.showStandaloneAnomalies, showStandaloneAnomalies = _m === void 0 ? false : _m, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
     var helperClasses = useHelperStyles();
     var searchParams = new URLSearchParams(window.location.search);
     var end = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('endTime');
@@ -92333,13 +92297,13 @@ var PerfAdvisorEntry = function (_a) {
     var durationParam = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('duration');
     // If its Anomaly view, then set the default filter duration to custom as anomaly has graphStartTime and graphEndTime
     // If its not Anomaly view, then set the value passed in query parameter, if thats empty then set default filter duration to 1 day
-    var _m = useState(durationParam !== null && durationParam !== void 0 ? durationParam : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _m[0], setFilterDuration = _m[1];
-    var _o = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _o[0], setDateTimeRange = _o[1];
+    var _o = useState(durationParam !== null && durationParam !== void 0 ? durationParam : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _o[0], setFilterDuration = _o[1];
+    var _p = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _p[0], setDateTimeRange = _p[1];
     useEffect(function () {
         localStorage.setItem('appName', appName);
     }, []);
-    var _p = useState(null), showMoreAnomalyCategory = _p[0], setShowMoreAnomalyCategory = _p[1];
-    var _q = useState(InsightsTabs.CLUSTER_LOAD), selectedTab = _q[0], setSelectedTab = _q[1];
+    var _q = useState(null), showMoreAnomalyCategory = _q[0], setShowMoreAnomalyCategory = _q[1];
+    var _r = useState(InsightsTabs.CLUSTER_LOAD), selectedTab = _r[0], setSelectedTab = _r[1];
     var universeDataFetch = useQuery(QUERY_KEY.fetchUniverseById, function () {
         return PerfAdvisorAPI.fetchUniverseById(universeUuid, apiUrl);
     });
@@ -92431,9 +92395,10 @@ var PerfAdvisorEntry = function (_a) {
         urlParams.set('endTime', (_a = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _a === void 0 ? void 0 : _a.toISOString());
         window.history.pushState({}, '', "".concat(window.location.pathname, "?").concat(urlParams.toString()));
     };
-    return (jsx(YBThemeWrapper, __assign({ appName: appName }, { children: jsxs(Box$1, { children: [universeTPStatusFetch.isLoading ||
-                    (universeDataFetch.isLoading && (jsx(Box$1, __assign({ mt: 2, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })))), universeTPStatusFetch.isError ||
-                    (universeDataFetch.isError && (jsxs(Box$1, __assign({ mt: 2 }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: universeTPStatusFetch.isError
+    console.warn('universeTPStatusFetch', universeTPStatusFetch);
+    return (jsx(YBThemeWrapper, { appName: appName, children: jsxs(Box$1, { children: [universeTPStatusFetch.isLoading ||
+                    (universeDataFetch.isLoading && (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }))), universeTPStatusFetch.isError ||
+                    (universeDataFetch.isError && (jsxs(Box$1, { mt: 2, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: universeTPStatusFetch.isError
                                     ? isNonEmptyString(universeTPStatusFetchError)
                                         ? universeTPStatusFetchError
                                         : DEFAULT_ERROR_MESSAGES.UNIVERSE_PA_STATUS_ERROR
@@ -92445,7 +92410,7 @@ var PerfAdvisorEntry = function (_a) {
                                         : DEFAULT_ERROR_MESSAGES.UNIVERSE_PA_STATUS_ERROR
                                     : isNonEmptyString(universeDataFetchError)
                                         ? universeDataFetchError
-                                        : DEFAULT_ERROR_MESSAGES.UNIVERSE_DETAILS_ERROR }))] })))), universeDataFetch.isSuccess && (jsx(Fragment, { children: jsxs(Box$1, { children: [!showMoreAnomalyCategory && (jsx(Box$1, { children: jsx(PerfAdvisorTabs, { startTime: dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime, endTime: dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime, filterDuration: filterDuration, universeUuid: universeUuid, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, appName: appName, timezone: timezone, isAshEnabled: !!isAshEnabled, isAshSupported: !!isAshSupported, apiUrl: apiUrl, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, notifyTabChange: notifyTabChange, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh, onSelectedFilterDuration: onSelectedFilterDuration, onNavigateToUrl: onNavigateToUrl }) })), isNonEmptyString(showMoreAnomalyCategory) && (jsx(ShowMoreAnomalies, { onClickShowMoreAnomalies: onClickShowMoreAnomalies, selectedTab: selectedTab, showMoreAnomalyCategory: showMoreAnomalyCategory, startTime: (_k = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _k === void 0 ? void 0 : _k.toISOString(), endTime: (_l = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _l === void 0 ? void 0 : _l.toISOString(), universeUuid: universeUuid, appName: appName, apiUrl: apiUrl, onSelectedIssue: onSelectedIssue }))] }) }))] }) })));
+                                        : DEFAULT_ERROR_MESSAGES.UNIVERSE_DETAILS_ERROR }))] }))), universeDataFetch.isSuccess && (jsx(Fragment, { children: jsxs(Box$1, { children: [!showMoreAnomalyCategory && (jsx(Box$1, { children: jsx(PerfAdvisorTabs, { startTime: dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime, endTime: dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime, filterDuration: filterDuration, universeUuid: universeUuid, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, appName: appName, timezone: timezone, isAshEnabled: !!isAshEnabled, isAshSupported: !!isAshSupported, apiUrl: apiUrl, showStandaloneAnomalies: showStandaloneAnomalies, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, notifyTabChange: notifyTabChange, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh, onSelectedFilterDuration: onSelectedFilterDuration, onNavigateToUrl: onNavigateToUrl }) })), isNonEmptyString(showMoreAnomalyCategory) && (jsx(ShowMoreAnomalies, { onClickShowMoreAnomalies: onClickShowMoreAnomalies, selectedTab: selectedTab, showMoreAnomalyCategory: showMoreAnomalyCategory, startTime: (_k = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _k === void 0 ? void 0 : _k.toISOString(), endTime: (_l = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _l === void 0 ? void 0 : _l.toISOString(), universeUuid: universeUuid, appName: appName, apiUrl: apiUrl, onSelectedIssue: onSelectedIssue }))] }) }))] }) }));
 };
 
 var useStyles$5 = makeStyles(function (theme) { return ({
@@ -92478,10 +92443,10 @@ var RemoveUniverseMetadata = function (_a) {
             return [2 /*return*/];
         });
     }); };
-    return (jsx(YBModal, __assign({ open: open, onClose: onClose, title: 'Remove Universe', onSubmit: handleSubmit, cancelLabel: 'Cancel', submitLabel: 'Remove', size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
+    return (jsx(YBModal, { open: open, onClose: onClose, title: 'Remove Universe', onSubmit: handleSubmit, cancelLabel: 'Cancel', submitLabel: 'Remove', size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
             className: helperClasses.root,
             dividers: true
-        } }, { children: jsx(Box$1, __assign({ mt: 2 }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: "Are you sure you want to remove the universe ".concat(data.id, " from Perf Advisor service ?") })) })) })));
+        }, children: jsx(Box$1, { mt: 2, children: jsx(Typography$1, { variant: "body2", children: "Are you sure you want to disable the universe ".concat(data.name, " from Performance Monitoring service ?") }) }) }));
 };
 
 var AppStatus;
@@ -92540,7 +92505,7 @@ var UniverseListMetadata = function (_a) {
     var _e = useState(''), searchInput = _e[0], setSearchInput = _e[1];
     var _f = useState(0), currentTablePage = _f[0], setCurrentTablePage = _f[1];
     var _g = useState(null), selectedMetadata = _g[0], setSelectedMetadata = _g[1];
-    var _h = useState(metadata), metadataWithUniverseDetails = _h[0], setMetadataWithUniverseDetails = _h[1];
+    var _h = useState(null), metadataWithUniverseDetails = _h[0], setMetadataWithUniverseDetails = _h[1];
     var onDeleteMetadataDialogClose = function () {
         setShowDeleteMetadataDialog(false);
     };
@@ -92549,100 +92514,108 @@ var UniverseListMetadata = function (_a) {
         setShowDeleteMetadataDialog(true);
     };
     useEffect(function () {
-        var mergeData = metadata.map(function (metadata) {
+        var mergeData = metadata === null || metadata === void 0 ? void 0 : metadata.map(function (matchedMetadata) {
             var _a;
-            var selectedUniverse = universeList.find(
+            var selectedUniverse = universeList === null || universeList === void 0 ? void 0 : universeList.find(
             // TODO: Request Aleks to send customer UUID in universe_details API inside TS service
-            function (universe) { return metadata.id === universe.universeUUID; });
-            metadata.name = (_a = selectedUniverse === null || selectedUniverse === void 0 ? void 0 : selectedUniverse.name) !== null && _a !== void 0 ? _a : '';
-            metadata.lastSyncError = selectedUniverse === null || selectedUniverse === void 0 ? void 0 : selectedUniverse.lastSyncError;
-            return metadata;
+            function (universe) { return matchedMetadata.id === universe.universeUUID; });
+            matchedMetadata.name = (_a = selectedUniverse === null || selectedUniverse === void 0 ? void 0 : selectedUniverse.name) !== null && _a !== void 0 ? _a : '';
+            matchedMetadata.lastSyncError = selectedUniverse === null || selectedUniverse === void 0 ? void 0 : selectedUniverse.lastSyncError;
+            matchedMetadata.status = !!(selectedUniverse === null || selectedUniverse === void 0 ? void 0 : selectedUniverse.lastSyncStatus);
+            matchedMetadata.actions = 'Unregister';
+            return matchedMetadata;
         });
-        setMetadataWithUniverseDetails(mergeData);
+        setMetadataWithUniverseDetails(mergeData !== null && mergeData !== void 0 ? mergeData : []);
     }, [universeList, metadata]);
     useEffect(function () {
-        setColumns([
-            {
-                name: 'id',
-                label: 'Universe UUID',
-                options: {
-                    sort: true,
-                    display: true
-                }
-            },
-            {
-                name: 'name',
-                label: 'Universe Name',
-                options: {
-                    sort: true,
-                    display: true,
-                    setCellHeaderProps: function () { return ({
-                        style: { width: '160px' },
-                        className: clsx(helperClasses.tableHeaderCell)
-                    }); },
-                    customBodyRender: function (name, tableMeta) {
-                        var rowIndex = tableMeta.rowIndex;
-                        var rowData = metadataWithUniverseDetails[rowIndex];
-                        var universeUuid = rowData === null || rowData === void 0 ? void 0 : rowData.id;
-                        return (jsx("a", __assign({ href: "/universes/".concat(universeUuid, "/perfAdvisor?tab=").concat(URL_TAB_PATH.ANOMALIES) }, { children: name })));
+        if (metadataWithUniverseDetails) {
+            setColumns([
+                {
+                    name: 'id',
+                    label: 'Universe UUID',
+                    options: {
+                        sort: true,
+                        display: true
                     }
-                }
-            },
-            {
-                name: 'dataMountPoints',
-                label: 'Data Mount Points',
-                options: {
-                    sort: false,
-                    display: true,
-                    setCellHeaderProps: function () { return ({
-                        style: { width: '120px' },
-                        className: clsx(helperClasses.tableHeaderCell)
-                    }); }
-                }
-            },
-            {
-                name: 'otherMountPoints',
-                label: 'Other Mount Points',
-                options: {
-                    sort: false,
-                    display: true
-                }
-            },
-            {
-                name: 'lastSyncError',
-                label: 'Status',
-                options: {
-                    sort: false,
-                    display: true,
-                    setCellHeaderProps: function () { return ({
-                        style: { width: '120px' },
-                        className: clsx(helperClasses.tableHeaderCell)
-                    }); },
-                    customBodyRender: function (syncStatus) {
-                        return (jsx(Fragment, { children: syncStatus ? (jsxs(Box$1, __assign({ className: classes.flexColumn }, { children: [jsx(Box$1, __assign({ className: clsx(classes.tagRed, classes.statusBox) }, { children: jsx("span", __assign({ className: clsx(classes.tagTextRed, classes.statusText) }, { children: AppStatus.INACTIVE })) })), jsx(Tooltip, __assign({ title: syncStatus, arrow: true, placement: "top", className: classes.tooltip }, { children: jsx("img", { src: InfoMessageIcon, alt: "info" }) }))] }))) : (jsx(Box$1, __assign({ className: clsx(classes.tagGreen, classes.statusBox) }, { children: jsx("span", __assign({ className: clsx(classes.tagTextGreen, classes.statusText) }, { children: AppStatus.ACTIVE })) }))) }));
+                },
+                {
+                    name: 'name',
+                    label: 'Universe Name',
+                    options: {
+                        sort: true,
+                        display: true,
+                        setCellHeaderProps: function () { return ({
+                            style: { width: '160px' },
+                            className: clsx(helperClasses.tableHeaderCell)
+                        }); },
+                        customBodyRender: function (name, tableMeta) {
+                            var rowIndex = tableMeta.rowIndex;
+                            var rowData = metadataWithUniverseDetails[rowIndex];
+                            var universeUuid = rowData === null || rowData === void 0 ? void 0 : rowData.id;
+                            return (jsx("a", { href: "/universes/".concat(universeUuid), children: name }));
+                        }
                     }
-                }
-            },
-            {
-                name: '',
-                label: 'Actions',
-                options: {
-                    sort: false,
-                    display: true,
-                    setCellHeaderProps: function () { return ({
-                        style: { width: '180px' },
-                        className: clsx(helperClasses.tableHeaderCell)
-                    }); },
-                    customBodyRender: function (_value, tableMeta) {
-                        var rowIndex = tableMeta.rowIndex;
-                        return (jsx(Box$1, { children: jsx(YBButton, __assign({ size: "medium", variant: "ghost", dataTestId: "UniverseListMetadata-unregisterButton", onClick: function () { return onDeleteMetadataButtonClick(metadataWithUniverseDetails[rowIndex]); } }, { children: 'Unregister' })) }));
+                },
+                {
+                    name: 'dataMountPoints',
+                    label: 'Data Mount Points',
+                    options: {
+                        sort: false,
+                        display: true,
+                        setCellHeaderProps: function () { return ({
+                            style: { width: '120px' },
+                            className: clsx(helperClasses.tableHeaderCell)
+                        }); }
+                    }
+                },
+                {
+                    name: 'otherMountPoints',
+                    label: 'Other Mount Points',
+                    options: {
+                        sort: false,
+                        display: true
+                    }
+                },
+                {
+                    name: 'status',
+                    label: 'Status',
+                    options: {
+                        sort: false,
+                        display: true,
+                        setCellHeaderProps: function () { return ({
+                            style: { width: '120px' },
+                            className: clsx(helperClasses.tableHeaderCell)
+                        }); },
+                        customBodyRender: function (name, tableMeta) {
+                            var rowIndex = tableMeta.rowIndex;
+                            var rowData = metadataWithUniverseDetails[rowIndex];
+                            var rowStatus = rowData === null || rowData === void 0 ? void 0 : rowData.status;
+                            var rowLastSyncError = rowData === null || rowData === void 0 ? void 0 : rowData.lastSyncError;
+                            return (jsx(Fragment, { children: rowStatus ? (jsx(Box$1, { className: clsx(classes.tagGreen, classes.statusBox), children: jsx("span", { className: clsx(classes.tagTextGreen, classes.statusText), children: AppStatus.ACTIVE }) })) : (jsxs(Box$1, { className: classes.flexColumn, children: [jsx(Box$1, { className: clsx(classes.tagRed, classes.statusBox), children: jsx("span", { className: clsx(classes.tagTextRed, classes.statusText), children: AppStatus.INACTIVE }) }), jsx(Tooltip, { title: rowLastSyncError, arrow: true, placement: "top", className: classes.tooltip, children: jsx("img", { src: InfoMessageIcon, alt: "info" }) })] })) }));
+                        }
+                    }
+                },
+                {
+                    name: 'actions',
+                    label: 'Actions',
+                    options: {
+                        sort: false,
+                        display: true,
+                        setCellHeaderProps: function () { return ({
+                            style: { width: '180px' },
+                            className: clsx(helperClasses.tableHeaderCell)
+                        }); },
+                        customBodyRender: function (_value, tableMeta) {
+                            var rowIndex = tableMeta.rowIndex;
+                            return (jsx(Box$1, { children: jsx(YBButton, { size: "medium", variant: "ghost", dataTestId: "UniverseListMetadata-unregisterButton", onClick: function () { return onDeleteMetadataButtonClick(metadataWithUniverseDetails[rowIndex]); }, children: 'Unregister' }) }));
+                        }
                     }
                 }
-            }
-        ]);
+            ]);
+        }
     }, [metadataWithUniverseDetails]);
-    return (jsxs(Box$1, __assign({ mt: 2, className: classes.overrideMuiTableContainer }, { children: [isNonEmptyArray(metadataWithUniverseDetails) && isNonEmptyArray(columns) && (jsx(Box$1, __assign({ mt: 2 }, { children: jsx(YBTable, { title: 'Universe Metadata', className: helperClasses.overrideMuiTable, dataTestId: "UniverseListMetadata-Table", data: metadataWithUniverseDetails, columns: columns, options: {
-                        filter: true,
+    return (jsxs(Box$1, { mt: 2, className: classes.overrideMuiTableContainer, children: [isNonEmptyArray(metadataWithUniverseDetails) && isNonEmptyArray(columns) && (jsx(Box$1, { mt: 2, children: jsx(YBTable, { title: 'Universe Metadata', className: helperClasses.overrideMuiTable, dataTestId: "UniverseListMetadata-Table", data: metadataWithUniverseDetails, columns: columns, options: {
+                        // filter: true,
                         search: true,
                         selectableRowsOnClick: false,
                         rowHover: true,
@@ -92662,7 +92635,7 @@ var UniverseListMetadata = function (_a) {
                             }
                         },
                         onGlobalFilterChange: setSearchInput
-                    } }) }))), showDeleteMetadataDialog && selectedMetadata && (jsx(RemoveUniverseMetadata, { onActionPerformed: onActionPerformed, open: showDeleteMetadataDialog, onClose: onDeleteMetadataDialogClose, data: selectedMetadata, apiUrl: apiUrl }))] })));
+                    } }) })), showDeleteMetadataDialog && selectedMetadata && (jsx(RemoveUniverseMetadata, { onActionPerformed: onActionPerformed, open: showDeleteMetadataDialog, onClose: onDeleteMetadataDialogClose, data: selectedMetadata, apiUrl: apiUrl }))] }));
 };
 
 var useStyles$3 = makeStyles(function (theme) { return ({
@@ -92703,7 +92676,7 @@ var ConfigureUniverseMetadata = function (_a) {
         isFetchUniverseLoading ||
         (isFetchMetadataIdle && metadata === undefined) ||
         (isFetchUniverseIdle && universeList === undefined)) {
-        return (jsx(Box$1, __assign({ mt: 4, className: helperClasses.loadingBox }, { children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) })));
+        return (jsx(Box$1, { mt: 4, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }));
     }
     var onActionPerformed = function () {
         var getLatestMetadata = function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -92724,11 +92697,11 @@ var ConfigureUniverseMetadata = function (_a) {
         }); };
         getLatestMetadata();
     };
-    return (jsx(YBPanelItem, { body: jsxs(Box$1, __assign({ ml: 1, mr: 1, mt: 1, className: classes.flexColumn }, { children: [jsx(YBButton, __assign({ variant: "secondary", size: "medium", onClick: function () {
+    return (jsx(YBPanelItem, { body: jsxs(Box$1, { ml: 1, mr: 1, mt: 1, className: classes.flexColumn, children: [jsx(YBButton, { variant: "secondary", size: "medium", onClick: function () {
                         onActionPerformed();
-                    }, className: classes.refreshButton, dataTestId: "ConfigureUniverseMetadata-refreshButton" }, { children: 'Refresh' })), isNonEmptyString(apiUrl) && metadata.length > 0 ? (jsx(Fragment, { children: jsx(Box$1, __assign({ mt: 2 }, { children: jsx(UniverseListMetadata, { apiUrl: apiUrl, customerUuid: customerUuid, metadata: metadata, universeList: universeList, onActionPerformed: onActionPerformed }) })) })) : (jsx(Box$1, __assign({ className: classes.noUniverses }, { children: isNonEmptyString(apiUrl)
-                        ? 'Currently, there are no universes attached to Perf Advisor service'
-                        : 'Customer is not registered with Perf Advisor service. Please register and then enable Perf Advisor for universes.' })))] })) }));
+                    }, className: classes.refreshButton, dataTestId: "ConfigureUniverseMetadata-RefreshButton", children: 'Refresh' }), isNonEmptyString(apiUrl) && metadata.length > 0 ? (jsx(Fragment, { children: jsx(Box$1, { mt: 2, children: jsx(UniverseListMetadata, { apiUrl: apiUrl, customerUuid: customerUuid, metadata: metadata, universeList: universeList, onActionPerformed: onActionPerformed }) }) })) : (jsx(Box$1, { className: classes.noUniverses, children: isNonEmptyString(apiUrl)
+                        ? 'Currently, there are no universes attached to Performance Monitoring service'
+                        : 'Customer is not registered with Performance Monitoring service. Please register and then enable Performance Monitoring for universes.' }))] }) }));
 };
 
 var useStyles$2 = makeStyles$1(function (theme) { return ({
@@ -92761,10 +92734,10 @@ var ResetRuntimeConfig = function (_a) {
             return [2 /*return*/];
         });
     }); };
-    return (jsx(YBModal, __assign({ open: open, onClose: onClose, title: 'Reset Runtime Configuration', onSubmit: handleSubmit, cancelLabel: 'Cancel', submitLabel: 'Reset', overrideHeight: "250px", size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
+    return (jsx(YBModal, { open: open, onClose: onClose, title: 'Reset Runtime Configuration', onSubmit: handleSubmit, cancelLabel: 'Cancel', submitLabel: 'Reset', overrideHeight: "250px", size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
             className: helperClasses.root,
             dividers: true
-        } }, { children: jsx(Box$1, __assign({ mt: 2 }, { children: jsx(Typography$1, __assign({ variant: "body2" }, { children: "Are you sure you want to reset the runtime configuration for the following key ".concat(data.path, " ?") })) })) })));
+        }, children: jsx(Box$1, { mt: 2, children: jsx(Typography$1, { variant: "body2", children: "Are you sure you want to reset the runtime configuration for the following key ".concat(data.path, " ?") }) }) }));
 };
 
 var useStyles$1 = makeStyles$1(function (theme) { return ({
@@ -92807,10 +92780,10 @@ var UpdateRuntimeConfig = function (_a) {
         payload.configValue = formValues.configValue;
         updateRuntimeConfigKey.mutate(payload);
     });
-    return (jsx(YBModal, __assign({ open: open, onClose: onClose, title: 'Update Runtime Configuration', onSubmit: handleFormSubmit, cancelLabel: 'Cancel', submitLabel: 'Update', size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
+    return (jsx(YBModal, { open: open, onClose: onClose, title: 'Update Runtime Configuration', onSubmit: handleFormSubmit, cancelLabel: 'Cancel', submitLabel: 'Update', size: "sm", titleSeparator: true, enableBackdropDismiss: true, dialogContentProps: {
             className: helperClasses.root,
             dividers: true
-        } }, { children: jsx(FormProvider, __assign({}, formMethods, { children: jsxs(Box$1, __assign({ mt: 2 }, { children: [jsx(YBLabel, { children: 'Config Key ' }), jsx(Typography$1, __assign({ variant: "body2" }, { children: data.path })), jsxs(Box$1, __assign({ mt: 1 }, { children: [jsx(YBLabel, { children: 'Config Value ' }), (data === null || data === void 0 ? void 0 : data.type) !== RuntimeConfigType.BOOL && (jsx(YBInputField, { style: { marginTop: '8px' }, name: 'configValue', control: control, fullWidth: true, dataTestId: "UpdateRuntimeConfig-ConfigValue" })), (data === null || data === void 0 ? void 0 : data.type) === RuntimeConfigType.BOOL && (jsx(YBToggleField, { name: 'configValue', control: control, dataTestId: "UpdateRuntimeConfig-ConfigValue" }))] }))] })) })) })));
+        }, children: jsx(FormProvider, __assign({}, formMethods, { children: jsxs(Box$1, { mt: 2, children: [jsx(YBLabel, { children: 'Config Key ' }), jsx(Typography$1, { variant: "body2", children: data.path }), jsxs(Box$1, { mt: 1, children: [jsx(YBLabel, { children: 'Config Value ' }), (data === null || data === void 0 ? void 0 : data.type) !== RuntimeConfigType.BOOL && (jsx(YBInputField, { style: { marginTop: '8px' }, name: 'configValue', control: control, fullWidth: true, dataTestId: "UpdateRuntimeConfig-ConfigValue" })), (data === null || data === void 0 ? void 0 : data.type) === RuntimeConfigType.BOOL && (jsx(YBToggleField, { name: 'configValue', control: control, dataTestId: "UpdateRuntimeConfig-ConfigValue" }))] })] }) })) }));
 };
 
 var useStyles = makeStyles$1(function (theme) { return ({
@@ -92901,7 +92874,7 @@ var RuntimeConfigs = function (_a) {
                 }); },
                 customBodyRender: function (_value, tableMeta) {
                     var rowIndex = tableMeta.rowIndex;
-                    return (jsxs(Box$1, { children: [jsx("span", { children: runtimeConfigs[rowIndex].path }), jsx(YBTooltip, __assign({ title: runtimeConfigs[rowIndex].description, placement: "top", arrow: true }, { children: jsx(Box$1, __assign({ className: classes.tooltip, display: "inline-block" }, { children: jsx("img", { src: InfoMessageIcon, alt: "info" }) })) }))] }));
+                    return (jsxs(Box$1, { children: [jsx("span", { children: runtimeConfigs[rowIndex].path }), jsx(YBTooltip, { title: runtimeConfigs[rowIndex].description, placement: "top", arrow: true, children: jsx(Box$1, { className: classes.tooltip, display: "inline-block", children: jsx("img", { src: InfoMessageIcon, alt: "info" }) }) })] }));
                 }
             }
         },
@@ -92931,7 +92904,7 @@ var RuntimeConfigs = function (_a) {
                 }); },
                 customBodyRender: function (_value, tableMeta) {
                     var rowIndex = tableMeta.rowIndex;
-                    return (jsx(Box$1, { children: jsx("span", __assign({ className: runtimeConfigs[rowIndex].overriden ? classes.textColor : '' }, { children: runtimeConfigs[rowIndex].value })) }));
+                    return (jsx(Box$1, { children: jsx("span", { className: runtimeConfigs[rowIndex].overriden ? classes.textColor : '', children: runtimeConfigs[rowIndex].value }) }));
                 }
             }
         },
@@ -92948,19 +92921,19 @@ var RuntimeConfigs = function (_a) {
                 }); },
                 customBodyRender: function (_value, tableMeta) {
                     var rowIndex = tableMeta.rowIndex;
-                    return (jsxs(Fragment, { children: [jsx(YBButton, __assign({ size: "medium", variant: "ghost", dataTestId: "RuntimeConfigs-UpdateRuntimeConfigButton", onClick: function () { return onUpdateRuntimeConfigButtonClick(runtimeConfigs[rowIndex]); } }, { children: 'Update' })), jsx(YBButton, __assign({ size: "medium", variant: "ghost", dataTestId: "RuntimeConfigs-ResetRuntimeConfigButton", onClick: function () { return onResetRuntimeConfigButtonCLick(runtimeConfigs[rowIndex]); } }, { children: 'Reset' }))] }));
+                    return (jsxs(Fragment, { children: [jsx(YBButton, { size: "medium", variant: "ghost", dataTestId: "RuntimeConfigs-UpdateRuntimeConfigButton", onClick: function () { return onUpdateRuntimeConfigButtonClick(runtimeConfigs[rowIndex]); }, children: 'Update' }), jsx(YBButton, { size: "medium", variant: "ghost", dataTestId: "RuntimeConfigs-ResetRuntimeConfigButton", onClick: function () { return onResetRuntimeConfigButtonCLick(runtimeConfigs[rowIndex]); }, children: 'Reset' })] }));
                 }
             }
         }
     ];
-    return (jsx(YBThemeWrapper, __assign({ appName: appName }, { children: jsxs(Box$1, __assign({ mt: 2, ml: 4, mr: 4, className: classes.overrideMuiTableContainer }, { children: [jsx(Typography$1, __assign({ variant: "h4" }, { children: 'Global Runtime Configurations' })), (isFetchRuntimeConfigsError || (isFetchRuntimeConfigsIdle && runtimeConfigs === null)) && (jsxs(Box$1, __assign({ className: helperClasses.recommendation }, { children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchRuntimeConfigsErrorMessage)
+    return (jsx(YBThemeWrapper, { appName: appName, children: jsxs(Box$1, { mt: 2, ml: 4, mr: 4, className: classes.overrideMuiTableContainer, children: [jsx(Typography$1, { variant: "h4", children: 'Global Runtime Configurations' }), (isFetchRuntimeConfigsError || (isFetchRuntimeConfigsIdle && runtimeConfigs === null)) && (jsxs(Box$1, { className: helperClasses.recommendation, children: [(appName === AppName.YBA || appName === AppName.WEB) && (jsx(YBErrorIndicator, { customErrorMessage: isNonEmptyString(fetchRuntimeConfigsErrorMessage)
                                 ? fetchRuntimeConfigsErrorMessage
                                 : DEFAULT_ERROR_MESSAGES.RUNTIME_CONFIGS_ERROR })), appName === AppName.YBM && (jsx(GenericFailure, { text: isNonEmptyString(fetchRuntimeConfigsErrorMessage)
                                 ? fetchRuntimeConfigsErrorMessage
-                                : DEFAULT_ERROR_MESSAGES.RUNTIME_CONFIGS_ERROR }))] }))), jsx(Box$1, __assign({ display: "flex", alignSelf: 'center', mt: 2 }, { children: jsx(YBInput, { placeholder: 'Search', className: classes.searchBox, onChange: function (e) {
+                                : DEFAULT_ERROR_MESSAGES.RUNTIME_CONFIGS_ERROR }))] })), jsx(Box$1, { display: "flex", alignSelf: 'center', mt: 2, children: jsx(YBInput, { placeholder: 'Search', className: classes.searchBox, onChange: function (e) {
                             setSearchInput(e.target.value);
                             setCurrentTablePage(0);
-                        }, value: searchInput, dataTestId: "RuntimeConfigs-SearchInput" }) })), jsx(Box$1, __assign({ mt: 2, mb: 4, pb: 2 }, { children: jsx(YBTable, { title: 'Runtime Configuration Variables', className: classes.overrideMuiTable, data: (runtimeConfigs !== null && runtimeConfigs !== void 0 ? runtimeConfigs : []), columns: columns, dataTestId: "RuntimeConfigs-Table", isLoading: isFetchRuntimeConfigsLoading, options: {
+                        }, value: searchInput, dataTestId: "RuntimeConfigs-SearchInput" }) }), jsx(Box$1, { mt: 2, mb: 4, pb: 2, children: jsx(YBTable, { title: 'Runtime Configuration Variables', className: classes.overrideMuiTable, data: (runtimeConfigs !== null && runtimeConfigs !== void 0 ? runtimeConfigs : []), columns: columns, dataTestId: "RuntimeConfigs-Table", isLoading: isFetchRuntimeConfigsLoading, options: {
                             filter: true,
                             search: true,
                             selectableRowsOnClick: false,
@@ -92985,7 +92958,7 @@ var RuntimeConfigs = function (_a) {
                                 showProgressBars: isFetchRuntimeConfigsLoading
                             },
                             onGlobalFilterChange: setSearchInput
-                        } }) })), showUpdateMetadataDialog && selectedRuntimeConfigData && (jsx(UpdateRuntimeConfig, { open: showUpdateMetadataDialog, data: selectedRuntimeConfigData, apiUrl: apiUrl, onActionPerformed: onActionPerformed, onClose: onUpdateRuntimeConfigDialogClose, toast: toast })), showDeleteMetadataDialog && selectedRuntimeConfigData && (jsx(ResetRuntimeConfig, { open: showDeleteMetadataDialog, data: selectedRuntimeConfigData, apiUrl: apiUrl, onActionPerformed: onActionPerformed, onClose: onResetRuntimeConfigDialogClose, toast: toast }))] })) })));
+                        } }) }), showUpdateMetadataDialog && selectedRuntimeConfigData && (jsx(UpdateRuntimeConfig, { open: showUpdateMetadataDialog, data: selectedRuntimeConfigData, apiUrl: apiUrl, onActionPerformed: onActionPerformed, onClose: onUpdateRuntimeConfigDialogClose, toast: toast })), showDeleteMetadataDialog && selectedRuntimeConfigData && (jsx(ResetRuntimeConfig, { open: showDeleteMetadataDialog, data: selectedRuntimeConfigData, apiUrl: apiUrl, onActionPerformed: onActionPerformed, onClose: onResetRuntimeConfigDialogClose, toast: toast }))] }) }));
 };
 
 export { ACTIVE_SESSION_HISOTRY_EPS_CLIENT_NODE, ACTIVE_SESSION_HISTORY_EPS_GLOBAL, ACTIVE_SESSION_HISTORY_QUERY_EVENTS, ADD_COLUMNS_BUTTON_TEXT, ALL, ALL_REGIONS, ALL_ZONES$1 as ALL_ZONES, ANOMALY_CATEGORY_LIST, ANOMALY_FILTER_DURATION_OPTIONS, ANOMALY_TAG, ANOMALY_TYPE_TO_NAME_MAP, ASH, Aggregation, AnomalyCategory, AnomalyDetectionStatusText, AnomalyType, AnomalyTypeFilter, AppName, BACKGROUND_QUERY_REQUEST_GRAPHS, BackgroundJobCategory, CATALOG_READ_REQUEST_GRAPH, CATEGORY_HEADER_DATA_MAP, COLORS, CORES, CPU_CORES, CPU_COUNT, CPU_TEXT, CQL_QUERY_REQUEST_GRAPHS, ChartType, ClusterLoadOverallTabs, ClusterLoadSubTabs, ClusterRegionSelector, ConfigureUniverseMetadata, DB_CAPS_TAG, DB_TAG, DB_TYPE_TAG, DB_WAIT_EVENT_TYPE_MAPPING, DEFAULT_ERROR_MESSAGES, DEFAULT_RECORDS_PER_PAGE, ELLIPSIS, GLOBAL_RUNTIME_CONFIG, GROUP_BY_OPERATIONS, GROUP_BY_OPERATIONS_LABELS, GraphType, GroupEventsParam, HISTORICAL_QUERY_DATA_LABELS, IN_DEVELOPMENT_MODE, IO_TEXT, InsightsTabs, MAX_OUTLIER_NUM_NODES, METRICS_OUTLIER_DATABASES_STORAGE_KEY, METRICS_OUTLIER_TABLES_STORAGE_KEY, METRICS_SESSION_STORAGE_KEY, METRIC_DB_RESOURCES_WITH_GRAPHS, METRIC_FONT, METRIC_MEASURE_TEXT, METRIC_NAMES, METRIC_RESOURCES_WITH_GRAPHS, METRIC_TABLES_RESOURCES_WITH_GRAPHS, METRIC_TABS, METRIC_TABS_DATABASES, METRIC_TABS_TABLES, MIN_OUTLIER_NUM_NODES, MORE, MetricConsts, MetricMeasure, MetricOrigin, MetricSplitSelector, MetricsAnalysisEntry, NAME_COLOR_MAPPING, NodeState, OutlierSelector, PerfAdvisorAPI, PerfAdvisorEntry, PrimaryDashboardViewTabs, QUERIES, QUERY_DETAILS, QUERY_KEY, QUERY_TAG, QUERY_TYPE_TAG, QueryType, QueryTypeMode, RCA_GANT_CHART, REACT_APP_API_URL, REGION_TAG, REGION_ZONE_TAG, RUNTIME_CONFIG_KEYS, RuntimeConfigType, RuntimeConfigs, SQL_QUERY_REQUEST_GRAPHS, SortDirection, SplitMode, SplitType, SqlDrilldownTabs, SqlTabs, TABLET_ID_TAG, TABLET_TAG, TABLE_REQUEST_GRAPHS, TABLE_TAG, TIME_FILTER_LABEL, TIME_FILTER_VALUES, TOOLTIP_TEXT, TPFeatureFlags, TYPE$1 as TYPE, TabletTabs, TransformedBackgroundTasksCategory, URL_TAB_PATH, USER_TAG, VIEW_MORE, VISIBLE_DB_LOAD_METADATA_COLUMNS, VISIBLE_NODE_LOAD_METADATA_COLUMNS, VISIBLE_QUERY_METADATA_COLUMNS, VISIBLE_TABLETS_METADATA_COLUMNS, VISIBLE_TABLET_DRILLDOWN_METADATA_COLUMNS, WaitEventClassification, YBCheckboxField, YBErrorIndicator, YBInfinitePagination, YBInputField, YBPanelItem, YBThemeWrapper, YBToggleField, YSQL_COLUMNS$1 as YSQL_COLUMNS, ZONE_TAG, ZoneNodeSelector, filterDurations, getCustomFooterComponent, getRowCellComponent, isDefinedNotNull, isEmptyArray, isEmptyObject$1 as isEmptyObject, isEmptyString, isNonEmptyArray, isNonEmptyObject, isNonEmptyString, isNullOrEmpty, isValidObject, isYAxisGreaterThanThousand, metricOutlierSelectors, metricSplitSelectors, otherSplitSelectors, queryTypeSelectors, removeNullProperties, useCodeBlockStyles };