@yugabytedb/perf-advisor-ui 1.0.95 → 1.0.96

package/dist/esm/index.js

@@ -1,11 +1,10 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default, { useCallback, useEffect, Fragment as Fragment$1, useState, useRef, useMemo, createElement as createElement$1, useLayoutEffect, useReducer, isValidElement, cloneElement } from 'react';
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from 'react-query';
-import { makeStyles as makeStyles$1, Box as Box$1, Grid as Grid$2, MenuItem as MenuItem$1, TableRow, TableCell, Typography as Typography$1, Divider, InputAdornment, IconButton, styled as styled$1, Accordion, AccordionSummary, AccordionDetails, alpha, Collapse, Breadcrumbs, Link as Link$1, Tooltip } from '@material-ui/core';
-import { YBInput, YBSelect, YBPagination, YBToggle, YBButtonGroup, YBCheckbox, yba, YBThemeProvider, coreTheme, YBTooltip, YBButton, YBCodeBlock, YBBreadcrumb, mui, YBDatePicker, YBLabel, YBModal, GenericFailure, YBTable, YBTab, YBTabs, YBTag, YBAutoComplete } from '@yugabyte-ui-library/core';
+import { useMutation, useInfiniteQuery, useQuery, useQueryClient } from 'react-query';
+import { makeStyles as makeStyles$1, Box as Box$1, Grid as Grid$2, MenuItem as MenuItem$1, TableRow, TableCell, Typography as Typography$1, Divider, styled as styled$1, InputAdornment, IconButton, alpha, Collapse, Accordion, AccordionSummary, AccordionDetails, Breadcrumbs, Link as Link$1, Tooltip } from '@material-ui/core';
+import { YBInput, YBSelect, YBPagination, YBToggle, YBButtonGroup, YBCheckbox, yba, YBThemeProvider, coreTheme, YBTooltip, YBButton, YBCodeBlock, YBBreadcrumb, mui, YBDatePicker, YBLabel, YBTab, GenericFailure, YBTabs, YBModal, YBTable, YBTag, YBAutoComplete } from '@yugabyte-ui-library/core';
 import { makeStyles } from '@material-ui/core/styles';
-import { Clear, FileCopy } from '@material-ui/icons';
 import require$$1$2 from 'http';
 import require$$2 from 'https';
 import require$$0$2 from 'url';
@@ -15,6 +14,7 @@ import require$$1 from 'tty';
 import require$$1$1 from 'util';
 import require$$0$1 from 'os';
 import require$$8 from 'zlib';
+import { Clear, FileCopy } from '@material-ui/icons';
 import { Timeline } from 'vis-timeline/standalone';
 import 'vis-timeline/styles/vis-timeline-graph2d.css?inline';
 import { TabContext, TabPanel } from '@material-ui/lab';
@@ -270,7 +270,7 @@ var useCodeBlockStyles = makeStyles(function (theme) {
     });
 });
 
-var useStyles$q = makeStyles$1({
+var useStyles$p = makeStyles$1({
     errorContainer: {
         textAlign: 'center',
         fontSize: '16px',
@@ -287,7 +287,7 @@ var useStyles$q = makeStyles$1({
 });
 var YBErrorIndicator = function (_a) {
     var type = _a.type, uuid = _a.uuid, customErrorMessage = _a.customErrorMessage;
-    var classes = useStyles$q();
+    var classes = useStyles$p();
     var errorDisplayMessage = jsx("span", {});
     var errorRecoveryMessage = jsx("span", {});
     if (type === 'universe') {
@@ -2401,7 +2401,7 @@ var YBInputField = function (props) {
     return (jsx(YBInput, __assign({}, fieldProps, ybInputProps, { inputRef: ref, error: !!fieldState.error, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : ybInputProps.helperText })));
 };
 
-var useStyles$p = makeStyles$1(function (theme) { return ({
+var useStyles$o = makeStyles$1(function (theme) { return ({
     root: {
         display: 'flex',
         justifyContent: 'flex-end',
@@ -2429,7 +2429,7 @@ var useStyles$p = makeStyles$1(function (theme) { return ({
 }); });
 var YBInfinitePagination = function (_a) {
     var dataPrefetchFn = _a.dataPrefetchFn, page = _a.page, onPageChange = _a.onPageChange, onPageSizeChange = _a.onPageSizeChange, hasMoreData = _a.hasMoreData, total = _a.total, _b = _a.rowsPerPageOptions, rowsPerPageOptions = _b === void 0 ? [10, 20, 50] : _b, rowsPerPage = _a.rowsPerPage, showRecordsPerPage = _a.showRecordsPerPage, _c = _a.recordsPerPageCaption, recordsPerPageCaption = _c === void 0 ? '' : _c;
-    var classes = useStyles$p();
+    var classes = useStyles$o();
     var totalPages = Math.ceil(total / (rowsPerPage !== null && rowsPerPage !== void 0 ? rowsPerPage : rowsPerPageOptions[0]));
     var handleOnPageSelect = useCallback(function (newPage) {
         // If on last page, prefetch additional pages when available
@@ -2455,7 +2455,7 @@ var YBInfinitePagination = function (_a) {
                         }, 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$o = makeStyles$1(function (theme) { return ({
+var useStyles$n = makeStyles$1(function (theme) { return ({
     header: {
         minHeight: '42px',
         marginBottom: '25px'
@@ -2481,7 +2481,7 @@ var useStyles$o = makeStyles$1(function (theme) { return ({
 }); });
 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$o();
+    var classes = useStyles$n();
     var panelBodyClassName = clsx(classes.body, noBackground && classes.transparentBody, bodyClassName);
     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] })) })] }));
 };
@@ -3938,12 +3938,10 @@ var useHelperStyles = makeStyles(function (theme) { return ({
         position: 'sticky',
         top: 0,
         zIndex: 1100,
-        backgroundColor: 'transparent',
-        paddingBottom: theme.spacing(2)
+        backgroundColor: 'transparent'
     },
     stickyHeaderYBM: {
-        backgroundColor: 'transparent',
-        paddingBottom: theme.spacing(2)
+        backgroundColor: 'transparent'
     },
     infoIcon: {
         color: '#97A5B0',
@@ -4055,12 +4053,6 @@ var useHelperStyles = makeStyles(function (theme) { return ({
     tabletNodeLoadMetadataTableCell: {
         padding: '4px 10px'
     },
-    ellipsisText: {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        width: '100%'
-    },
     queryLoadMetadataTableCell: {
         padding: '12px 10px'
     },
@@ -4070,9 +4062,6 @@ var useHelperStyles = makeStyles(function (theme) { return ({
     metricSplitSelectorBox: {
         gap: theme.spacing(2),
         marginTop: theme.spacing(2)
-    },
-    tabsContainer: {
-        marginBottom: theme.spacing(3)
     }
 }); });
 
@@ -4272,7 +4261,7 @@ var NUM_NODES_SELECTOR_OPTIONS = [
     { value: 5, label: '5' },
     { value: 10, label: '10' }
 ];
-var useStyles$n = makeStyles(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     icon: {
         marginRight: theme.spacing(1)
     },
@@ -4291,7 +4280,7 @@ var useStyles$n = makeStyles(function (theme) { return ({
 var OutlierSelector = function (_a) {
     var _b;
     var metricOutlierSelectors = _a.metricOutlierSelectors, selectedNumNodes = _a.selectedNumNodes, outlierType = _a.outlierType, onOutlierTypeSelected = _a.onOutlierTypeSelected, onNumNodesChanged = _a.onNumNodesChanged, metricMeasure = _a.metricMeasure, _c = _a.showNumNodesInput, showNumNodesInput = _c === void 0 ? true : _c, _d = _a.showNumNodesSelector, showNumNodesSelector = _d === void 0 ? false : _d;
-    var classes = useStyles$n();
+    var classes = useStyles$m();
     var defaultActiveIndex = outlierType === SplitMode.TOP ? 0 : 1;
     var _e = useState(defaultActiveIndex), active = _e[0], setActive = _e[1];
     var buttons = metricOutlierSelectors.map(function (outlierSelector, idx) { return ({
@@ -4577,10 +4566,10 @@ function isYAxisGreaterThanThousand(dataArray) {
     return false;
 }
 
-var img$k = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.0911 7.70567H3V4.60325C3 4.31623 2.82388 4 2.37381 4C1.92374 4 1.74762 4.31623 1.74762 4.60325V8.78291H13.0911L10.8545 11.0805C10.6362 11.2909 10.6362 11.6319 10.8545 11.8422C11.0729 12.0526 11.4269 12.0526 11.6452 11.8422L14.8362 8.62515C15.0546 8.41481 15.0546 8.07377 14.8362 7.86343L11.6452 4.60325C11.4269 4.39291 11.0729 4.39291 10.8545 4.60325C10.6362 4.81359 10.6362 5.15463 10.8545 5.36497L13.0911 7.70567Z' fill='%23232329' fill-opacity='0.4'/%3e%3c/svg%3e";
-var TreeIcon = img$k;
+var img$h = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13.0911 7.70567H3V4.60325C3 4.31623 2.82388 4 2.37381 4C1.92374 4 1.74762 4.31623 1.74762 4.60325V8.78291H13.0911L10.8545 11.0805C10.6362 11.2909 10.6362 11.6319 10.8545 11.8422C11.0729 12.0526 11.4269 12.0526 11.6452 11.8422L14.8362 8.62515C15.0546 8.41481 15.0546 8.07377 14.8362 7.86343L11.6452 4.60325C11.4269 4.39291 11.0729 4.39291 10.8545 4.60325C10.6362 4.81359 10.6362 5.15463 10.8545 5.36497L13.0911 7.70567Z' fill='%23232329' fill-opacity='0.4'/%3e%3c/svg%3e";
+var TreeIcon = img$h;
 
-var useStyles$m = makeStyles(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     selectBox: {
         minWidth: '300px'
     },
@@ -4614,7 +4603,7 @@ var useStyles$m = makeStyles(function (theme) { return ({
 var ALL_ZONES = 'All Zones and Nodes';
 var ZoneNodeSelector = function (_a) {
     var selectedItem = _a.selectedItem, primaryZoneToNodesMap = _a.primaryZoneToNodesMap, asyncZoneToNodesMap = _a.asyncZoneToNodesMap, onZoneNodeSelected = _a.onZoneNodeSelected;
-    var classes = useStyles$m();
+    var classes = useStyles$l();
     var renderZoneAndNodeItems = function (primaryZoneToNodesMap, asyncZoneToNodesMap) {
         var renderedItems = [];
         renderedItems.push(jsx(MenuItem$1, { value: ALL_ZONES, onClick: function (e) {
@@ -4677,7 +4666,7 @@ var ZoneNodeSelector = function (_a) {
     return (jsx(YBSelect, { className: clsx(classes.selectBox, classes.overrideMuiInput), dataTestId: "YBZoneNodeSelector-Zone", value: selectedItem, children: renderZoneAndNodeItems(primaryZoneToNodesMap, asyncZoneToNodesMap) }));
 };
 
-var useStyles$l = makeStyles(function (theme) { return ({
+var useStyles$k = makeStyles(function (theme) { return ({
     selectBox: {
         minWidth: '300px'
     },
@@ -4707,7 +4696,7 @@ var useStyles$l = makeStyles(function (theme) { return ({
 }); });
 var ClusterRegionSelector = function (_a) {
     var selectedItem = _a.selectedItem, primaryClusterToRegionMap = _a.primaryClusterToRegionMap, asyncClusterToRegionMap = _a.asyncClusterToRegionMap, onClusterRegionSelected = _a.onClusterRegionSelected;
-    var classes = useStyles$l();
+    var classes = useStyles$k();
     var renderClusterAndRegionItems = function (primaryClusterToRegionMap, asyncClusterToRegionMap) {
         var renderedItems = [];
         renderedItems.push(jsx(MenuItem$1, { value: ALL_REGIONS, onClick: function (e) {
@@ -8242,32 +8231,9 @@ var getTelemetryPayload = function (appName, key, startTime, endTime, universeUu
     ];
     return payload;
 };
-/**
- * Processes anomaly group data to extract possible cause information
- * @param anomalyGroupData - The anomaly group data (can be null)
- * @returns Processed data containing observation and possible causes
- */
-var getAnomalyPossibleCauseData = function (anomalyGroupData) {
-    var _a, _b, _c, _d, _e;
-    var data = {
-        observation: (_b = (_a = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _a === void 0 ? void 0 : _a.description) !== null && _b !== void 0 ? _b : '',
-        possibleCauses: (_e = (_d = (_c = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _c === void 0 ? void 0 : _c.rcaGuidelines) === null || _d === void 0 ? void 0 : _d.map(function (rcaGuideline) {
-            var _a, _b, _c, _d;
-            return {
-                possibleCause: (_a = rcaGuideline.possibleCause) !== null && _a !== void 0 ? _a : '',
-                possibleCauseDescription: (_b = rcaGuideline.possibleCauseDescription) !== null && _b !== void 0 ? _b : '',
-                troubleshootingRecommendations: (_d = (_c = rcaGuideline.troubleshootingRecommendations) === null || _c === void 0 ? void 0 : _c.map(function (troubleshootingRecommendation) {
-                    var _a;
-                    return (_a = troubleshootingRecommendation === null || troubleshootingRecommendation === void 0 ? void 0 : troubleshootingRecommendation.recommendation) !== null && _a !== void 0 ? _a : '';
-                })) !== null && _d !== void 0 ? _d : []
-            };
-        })) !== null && _e !== void 0 ? _e : []
-    };
-    return data;
-};
 
-var img$j = "data:image/svg+xml,%3csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.11094 3.11172V3.88945H1.94434C1.30004 3.88945 0.777735 4.41176 0.777735 5.05605V12.0557C0.777735 12.7 1.30004 13.2223 1.94434 13.2223H7.38848C8.03278 13.2223 8.55508 12.7 8.55508 12.0557V10.8891H9.33282V12.0557C9.33282 13.1295 8.46231 14 7.38848 14H1.94434C0.870509 14 0 13.1295 0 12.0557V5.05605C0 3.98223 0.870509 3.11172 1.94434 3.11172H3.11094ZM9.33333 0.778528H5.05579C4.4115 0.778528 3.88919 1.30083 3.88919 1.94513V8.94474C3.88919 9.58904 4.4115 10.1113 5.05579 10.1113H10.4999C11.1442 10.1113 11.6665 9.58904 11.6665 8.94474V3.11173H9.7222C9.50744 3.11173 9.33333 2.93763 9.33333 2.72286V0.778528ZM12.4436 2.74461V8.94473C12.4436 10.0186 11.5731 10.8891 10.4993 10.8891H5.05514C3.98132 10.8891 3.11081 10.0186 3.11081 8.94473V1.94512C3.11081 0.871289 3.98132 0.000779584 5.05514 0.000779584H9.69979C9.80303 -0.00576853 9.9105 0.0286532 9.99652 0.114676L12.3297 2.44788C12.4157 2.5339 12.4502 2.64137 12.4436 2.74461ZM10.1108 2.33401H11.1163L10.1108 1.32848V2.33401ZM5.83301 7.77813C5.61824 7.77813 5.44414 7.60403 5.44414 7.38926C5.44414 7.1745 5.61824 7.0004 5.83301 7.0004H7.38848C7.60324 7.0004 7.77734 7.1745 7.77734 7.38926C7.77734 7.60403 7.60324 7.77813 7.38848 7.77813H5.83301ZM5.83301 6.22267C5.61824 6.22267 5.44414 6.04857 5.44414 5.8338C5.44414 5.61904 5.61824 5.44494 5.83301 5.44494H9.72168C9.93645 5.44494 10.1105 5.61904 10.1105 5.8338C10.1105 6.04857 9.93645 6.22267 9.72168 6.22267H5.83301ZM5.83301 4.66718C5.61824 4.66718 5.44414 4.49308 5.44414 4.27832C5.44414 4.06355 5.61824 3.88945 5.83301 3.88945H9.72168C9.93645 3.88945 10.1105 4.06355 10.1105 4.27832C10.1105 4.49308 9.93645 4.66718 9.72168 4.66718H5.83301Z' fill='%232B59C3'/%3e%3c/svg%3e";
-var CopyIcon = img$j;
+var img$g = "data:image/svg+xml,%3csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.11094 3.11172V3.88945H1.94434C1.30004 3.88945 0.777735 4.41176 0.777735 5.05605V12.0557C0.777735 12.7 1.30004 13.2223 1.94434 13.2223H7.38848C8.03278 13.2223 8.55508 12.7 8.55508 12.0557V10.8891H9.33282V12.0557C9.33282 13.1295 8.46231 14 7.38848 14H1.94434C0.870509 14 0 13.1295 0 12.0557V5.05605C0 3.98223 0.870509 3.11172 1.94434 3.11172H3.11094ZM9.33333 0.778528H5.05579C4.4115 0.778528 3.88919 1.30083 3.88919 1.94513V8.94474C3.88919 9.58904 4.4115 10.1113 5.05579 10.1113H10.4999C11.1442 10.1113 11.6665 9.58904 11.6665 8.94474V3.11173H9.7222C9.50744 3.11173 9.33333 2.93763 9.33333 2.72286V0.778528ZM12.4436 2.74461V8.94473C12.4436 10.0186 11.5731 10.8891 10.4993 10.8891H5.05514C3.98132 10.8891 3.11081 10.0186 3.11081 8.94473V1.94512C3.11081 0.871289 3.98132 0.000779584 5.05514 0.000779584H9.69979C9.80303 -0.00576853 9.9105 0.0286532 9.99652 0.114676L12.3297 2.44788C12.4157 2.5339 12.4502 2.64137 12.4436 2.74461ZM10.1108 2.33401H11.1163L10.1108 1.32848V2.33401ZM5.83301 7.77813C5.61824 7.77813 5.44414 7.60403 5.44414 7.38926C5.44414 7.1745 5.61824 7.0004 5.83301 7.0004H7.38848C7.60324 7.0004 7.77734 7.1745 7.77734 7.38926C7.77734 7.60403 7.60324 7.77813 7.38848 7.77813H5.83301ZM5.83301 6.22267C5.61824 6.22267 5.44414 6.04857 5.44414 5.8338C5.44414 5.61904 5.61824 5.44494 5.83301 5.44494H9.72168C9.93645 5.44494 10.1105 5.61904 10.1105 5.8338C10.1105 6.04857 9.93645 6.22267 9.72168 6.22267H5.83301ZM5.83301 4.66718C5.61824 4.66718 5.44414 4.49308 5.44414 4.27832C5.44414 4.06355 5.61824 3.88945 5.83301 3.88945H9.72168C9.93645 3.88945 10.1105 4.06355 10.1105 4.27832C10.1105 4.49308 9.93645 4.66718 9.72168 4.66718H5.83301Z' fill='%232B59C3'/%3e%3c/svg%3e";
+var CopyIcon = img$g;
 
 var MetadataHeader = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
@@ -8295,7 +8261,7 @@ var MetadataHeader = function (_a) {
             e.stopPropagation();
         }
     };
-    return (jsx(Box$1, { children: isDrilldownView && showDetails && (jsx(Box$1, { className: clsx(helperClasses.headerMetadataBox, helperClasses.boxContainer, helperClasses.flexColumn), 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 ||
+    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);
@@ -8321,8 +8287,8 @@ var MetadataHeader = function (_a) {
                                         }, 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$i = "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";
-var MaximizeIcon = img$i;
+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";
+var MaximizeIcon = img$f;
 
 var BreadCrumbsHeader = function (_a) {
     var _b, _c;
@@ -8416,10 +8382,10 @@ var BreadCrumbsHeader = function (_a) {
     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$h = "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";
-var DividerIcon = img$h;
+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";
+var DividerIcon = img$e;
 
-var useStyles$k = makeStyles$1(function () { return ({
+var useStyles$j = makeStyles$1(function () { return ({
     groupByOperationDropdown: { borderRadius: '8px' },
     overrideDefaultMuiFormControl: {
         flexDirection: 'row',
@@ -8441,7 +8407,7 @@ var GenericHeader = function (_a) {
     region = _a.region, metricMeasure = _a.metricMeasure, outlierType = _a.outlierType, numNodes = _a.numNodes, _b = _a.isDrilldownView, isDrilldownView = _b === void 0 ? true : _b, onZoneNodeSelected = _a.onZoneNodeSelected, onClusterRegionSelected = _a.onClusterRegionSelected, onOutlierTypeSelected = _a.onOutlierTypeSelected, onSplitTypeSelected = _a.onSplitTypeSelected; _a.onQueryTypeSelected; var onNumNodesChanged = _a.onNumNodesChanged, _c = _a.showMetricAggregator, showMetricAggregator = _c === void 0 ? true : _c; _a.showQueryTypeSelector; var _e = _a.showSplitSelector, showSplitSelector = _e === void 0 ? true : _e;
     var _f = formatData(universeData), primaryZoneMapping = _f.primaryZoneMapping, asyncZoneMapping = _f.asyncZoneMapping, primaryClusterMapping = _f.primaryClusterMapping, asyncClusterMapping = _f.asyncClusterMapping;
     var helperClasses = useHelperStyles();
-    useStyles$k();
+    useStyles$j();
     // State variables
     var _g = useState(primaryZoneMapping), primaryZoneToNodesMap = _g[0], setPrimaryZoneToNodesMap = _g[1];
     var _h = useState(asyncZoneMapping), asyncZoneToNodesMap = _h[0], setAsyncZoneToNodesMap = _h[1];
@@ -12585,8 +12551,8 @@ var getDiffDays = function (startDateTime, endDateTime) {
     return diffDays;
 };
 
-var img$g = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.5199 19.5097C14.5199 19.841 14.2513 20.1097 13.9199 20.1097H9.99993C7.43733 20.1097 5.35993 18.0323 5.35993 15.4697V5.93966L3.41993 7.84966C3.18035 8.04677 2.83002 8.02873 2.61196 7.80807C2.39389 7.5874 2.38 7.23688 2.57993 6.99966L5.51993 4.06966C5.63251 3.95669 5.78544 3.89319 5.94493 3.89319C6.10442 3.89319 6.25735 3.95669 6.36993 4.06966L9.29993 6.99966C9.53465 7.23438 9.53465 7.61494 9.29993 7.84966C9.06521 8.08438 8.68465 8.08438 8.44993 7.84966L6.53993 5.93966V15.4797C6.54257 16.3937 6.90891 17.2692 7.55808 17.9127C8.20725 18.5563 9.08585 18.915 9.99993 18.9097H13.9499C14.2695 18.9257 14.5203 19.1897 14.5199 19.5097ZM20.9949 15.9732C20.8354 15.9732 20.6825 16.0367 20.5699 16.1497L18.6499 18.0697V8.52966C18.6499 7.29732 18.1597 6.1156 17.2874 5.24514C16.415 4.37469 15.2323 3.887 13.9999 3.88966H10.0799C9.74856 3.88966 9.47993 4.15829 9.47993 4.48966C9.47993 4.82103 9.74856 5.08966 10.0799 5.08966H13.9999C15.8998 5.08966 17.4399 6.6298 17.4399 8.52966V18.0697L15.5199 16.1497C15.3681 15.9978 15.1468 15.9385 14.9394 15.9941C14.732 16.0497 14.5699 16.2117 14.5144 16.4191C14.4588 16.6265 14.5181 16.8478 14.6699 16.9997L17.6099 19.9397C17.7225 20.0526 17.8754 20.1161 18.0349 20.1161C18.1944 20.1161 18.3473 20.0526 18.4599 19.9397L21.4199 16.9997C21.5329 16.8871 21.5964 16.7341 21.5964 16.5747C21.5964 16.4152 21.5329 16.2622 21.4199 16.1497C21.3073 16.0367 21.1544 15.9732 20.9949 15.9732Z' fill='%232B59C3'/%3e%3c/svg%3e";
-var RefreshIcon = img$g;
+var img$d = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.5199 19.5097C14.5199 19.841 14.2513 20.1097 13.9199 20.1097H9.99993C7.43733 20.1097 5.35993 18.0323 5.35993 15.4697V5.93966L3.41993 7.84966C3.18035 8.04677 2.83002 8.02873 2.61196 7.80807C2.39389 7.5874 2.38 7.23688 2.57993 6.99966L5.51993 4.06966C5.63251 3.95669 5.78544 3.89319 5.94493 3.89319C6.10442 3.89319 6.25735 3.95669 6.36993 4.06966L9.29993 6.99966C9.53465 7.23438 9.53465 7.61494 9.29993 7.84966C9.06521 8.08438 8.68465 8.08438 8.44993 7.84966L6.53993 5.93966V15.4797C6.54257 16.3937 6.90891 17.2692 7.55808 17.9127C8.20725 18.5563 9.08585 18.915 9.99993 18.9097H13.9499C14.2695 18.9257 14.5203 19.1897 14.5199 19.5097ZM20.9949 15.9732C20.8354 15.9732 20.6825 16.0367 20.5699 16.1497L18.6499 18.0697V8.52966C18.6499 7.29732 18.1597 6.1156 17.2874 5.24514C16.415 4.37469 15.2323 3.887 13.9999 3.88966H10.0799C9.74856 3.88966 9.47993 4.15829 9.47993 4.48966C9.47993 4.82103 9.74856 5.08966 10.0799 5.08966H13.9999C15.8998 5.08966 17.4399 6.6298 17.4399 8.52966V18.0697L15.5199 16.1497C15.3681 15.9978 15.1468 15.9385 14.9394 15.9941C14.732 16.0497 14.5699 16.2117 14.5144 16.4191C14.4588 16.6265 14.5181 16.8478 14.6699 16.9997L17.6099 19.9397C17.7225 20.0526 17.8754 20.1161 18.0349 20.1161C18.1944 20.1161 18.3473 20.0526 18.4599 19.9397L21.4199 16.9997C21.5329 16.8871 21.5964 16.7341 21.5964 16.5747C21.5964 16.4152 21.5329 16.2622 21.4199 16.1497C21.3073 16.0367 21.1544 15.9732 20.9949 15.9732Z' fill='%232B59C3'/%3e%3c/svg%3e";
+var RefreshIcon = img$d;
 
 var Box = mui.Box, MenuItem = mui.MenuItem, Typography = mui.Typography;
 var YBDatePickerDisplayFormat = 'dd/MM/yyyy, hh:mm a';
@@ -71503,7 +71469,7 @@ var IDEAL_CHART_WIDTH = 500;
 var MIN_GRAPH_WIDTH = 490;
 var MAX_GRAPH_WIDTH = (window === null || window === void 0 ? void 0 : window.outerWidth) > 1728 ? 550 : 470;
 var MAX_GRAPH_WIDTH_YBM = (window === null || window === void 0 ? void 0 : window.outerWidth) > 1728 ? 680 : 590;
-var useStyles$j = makeStyles$1(function () { return ({
+var useStyles$i = makeStyles$1(function () { return ({
     metricPanel: {
         position: 'relative'
     },
@@ -71528,7 +71494,7 @@ var useStyles$j = makeStyles$1(function () { return ({
 var GraphView = React__default.memo(function (_a) {
     var _b, _c, _d;
     var metricData = _a.metricData, appName = _a.appName, metricKey = _a.metricKey, metricMeasure = _a.metricMeasure, operations = _a.operations, groupByOperations = _a.groupByOperations; _a.height; var _e = _a.isRecommendationGraph, isRecommendationGraph = _e === void 0 ? false : _e, timezone = _a.timezone, graphTitle = _a.graphTitle, graphType = _a.graphType, queryData = _a.queryData, dateTimeRange = _a.dateTimeRange, isHistoricalQueryView = _a.isHistoricalQueryView, _f = _a.showTitle, showTitle = _f === void 0 ? true : _f, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectAshLabel = _a.onSelectAshLabel, registerChartInstance = _a.registerChartInstance;
-    var classes = useStyles$j();
+    var classes = useStyles$i();
     var metricOperationsDisplayed = operations;
     var chartId = "".concat(CHART_ID_PREFIX).concat(metricKey);
     // State variables
@@ -72187,982 +72153,472 @@ var GraphView = React__default.memo(function (_a) {
                 } })] }));
 });
 
-/** `Object#toString` result references. */
-var symbolTag = '[object Symbol]';
+var axios$3 = {exports: {}};
+
+var bind$2 = function bind(fn, thisArg) {
+  return function wrap() {
+    var args = new Array(arguments.length);
+    for (var i = 0; i < args.length; i++) {
+      args[i] = arguments[i];
+    }
+    return fn.apply(thisArg, args);
+  };
+};
+
+var bind$1 = bind$2;
+
+// utils is a library of generic helper functions non-specific to axios
+
+var toString = Object.prototype.toString;
 
 /**
- * Checks if `value` is classified as a `Symbol` primitive or object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
- * @example
- *
- * _.isSymbol(Symbol.iterator);
- * // => true
+ * Determine if a value is an Array
  *
- * _.isSymbol('abc');
- * // => false
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Array, otherwise false
  */
-function isSymbol(value) {
-  return typeof value == 'symbol' ||
-    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+function isArray(val) {
+  return toString.call(val) === '[object Array]';
 }
 
-/** Used to match a single whitespace character. */
-var reWhitespace = /\s/;
-
 /**
- * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
- * character of `string`.
+ * Determine if a value is undefined
  *
- * @private
- * @param {string} string The string to inspect.
- * @returns {number} Returns the index of the last non-whitespace character.
+ * @param {Object} val The value to test
+ * @returns {boolean} True if the value is undefined, otherwise false
  */
-function trimmedEndIndex(string) {
-  var index = string.length;
-
-  while (index-- && reWhitespace.test(string.charAt(index))) {}
-  return index;
+function isUndefined(val) {
+  return typeof val === 'undefined';
 }
 
-/** Used to match leading whitespace. */
-var reTrimStart = /^\s+/;
-
 /**
- * The base implementation of `_.trim`.
+ * Determine if a value is a Buffer
  *
- * @private
- * @param {string} string The string to trim.
- * @returns {string} Returns the trimmed string.
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Buffer, otherwise false
  */
-function baseTrim(string) {
-  return string
-    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
-    : string;
+function isBuffer(val) {
+  return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)
+    && typeof val.constructor.isBuffer === 'function' && val.constructor.isBuffer(val);
 }
 
-/** Used as references for various `Number` constants. */
-var NAN = 0 / 0;
-
-/** Used to detect bad signed hexadecimal string values. */
-var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-/** Used to detect binary string values. */
-var reIsBinary = /^0b[01]+$/i;
-
-/** Used to detect octal string values. */
-var reIsOctal = /^0o[0-7]+$/i;
+/**
+ * Determine if a value is an ArrayBuffer
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an ArrayBuffer, otherwise false
+ */
+function isArrayBuffer(val) {
+  return toString.call(val) === '[object ArrayBuffer]';
+}
 
-/** Built-in method references without a dependency on `root`. */
-var freeParseInt = parseInt;
+/**
+ * Determine if a value is a FormData
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an FormData, otherwise false
+ */
+function isFormData(val) {
+  return (typeof FormData !== 'undefined') && (val instanceof FormData);
+}
 
 /**
- * Converts `value` to a number.
+ * Determine if a value is a view on an ArrayBuffer
  *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to process.
- * @returns {number} Returns the number.
- * @example
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
+ */
+function isArrayBufferView(val) {
+  var result;
+  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
+    result = ArrayBuffer.isView(val);
+  } else {
+    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
+  }
+  return result;
+}
+
+/**
+ * Determine if a value is a String
  *
- * _.toNumber(3.2);
- * // => 3.2
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a String, otherwise false
+ */
+function isString(val) {
+  return typeof val === 'string';
+}
+
+/**
+ * Determine if a value is a Number
  *
- * _.toNumber(Number.MIN_VALUE);
- * // => 5e-324
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Number, otherwise false
+ */
+function isNumber(val) {
+  return typeof val === 'number';
+}
+
+/**
+ * Determine if a value is an Object
  *
- * _.toNumber(Infinity);
- * // => Infinity
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is an Object, otherwise false
+ */
+function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+
+/**
+ * Determine if a value is a plain Object
  *
- * _.toNumber('3.2');
- * // => 3.2
+ * @param {Object} val The value to test
+ * @return {boolean} True if value is a plain Object, otherwise false
  */
-function toNumber(value) {
-  if (typeof value == 'number') {
-    return value;
-  }
-  if (isSymbol(value)) {
-    return NAN;
-  }
-  if (isObject$5(value)) {
-    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-    value = isObject$5(other) ? (other + '') : other;
-  }
-  if (typeof value != 'string') {
-    return value === 0 ? value : +value;
+function isPlainObject(val) {
+  if (toString.call(val) !== '[object Object]') {
+    return false;
   }
-  value = baseTrim(value);
-  var isBinary = reIsBinary.test(value);
-  return (isBinary || reIsOctal.test(value))
-    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-    : (reIsBadHex.test(value) ? NAN : +value);
+
+  var prototype = Object.getPrototypeOf(val);
+  return prototype === null || prototype === Object.prototype;
 }
 
 /**
- * Gets the timestamp of the number of milliseconds that have elapsed since
- * the Unix epoch (1 January 1970 00:00:00 UTC).
+ * Determine if a value is a Date
  *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Date
- * @returns {number} Returns the timestamp.
- * @example
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Date, otherwise false
+ */
+function isDate$1(val) {
+  return toString.call(val) === '[object Date]';
+}
+
+/**
+ * Determine if a value is a File
  *
- * _.defer(function(stamp) {
- *   console.log(_.now() - stamp);
- * }, _.now());
- * // => Logs the number of milliseconds it took for the deferred invocation.
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a File, otherwise false
  */
-var now = function() {
-  return root$1.Date.now();
-};
+function isFile(val) {
+  return toString.call(val) === '[object File]';
+}
 
-var now$1 = now;
+/**
+ * Determine if a value is a Blob
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Blob, otherwise false
+ */
+function isBlob(val) {
+  return toString.call(val) === '[object Blob]';
+}
 
-/** Error message constants. */
-var FUNC_ERROR_TEXT = 'Expected a function';
+/**
+ * Determine if a value is a Function
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Function, otherwise false
+ */
+function isFunction(val) {
+  return toString.call(val) === '[object Function]';
+}
 
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeMax = Math.max,
-    nativeMin = Math.min;
+/**
+ * Determine if a value is a Stream
+ *
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a Stream, otherwise false
+ */
+function isStream(val) {
+  return isObject(val) && isFunction(val.pipe);
+}
 
 /**
- * Creates a debounced function that delays invoking `func` until after `wait`
- * milliseconds have elapsed since the last time the debounced function was
- * invoked. The debounced function comes with a `cancel` method to cancel
- * delayed `func` invocations and a `flush` method to immediately invoke them.
- * Provide `options` to indicate whether `func` should be invoked on the
- * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
- * with the last arguments provided to the debounced function. Subsequent
- * calls to the debounced function return the result of the last `func`
- * invocation.
+ * Determine if a value is a URLSearchParams object
  *
- * **Note:** If `leading` and `trailing` options are `true`, `func` is
- * invoked on the trailing edge of the timeout only if the debounced function
- * is invoked more than once during the `wait` timeout.
+ * @param {Object} val The value to test
+ * @returns {boolean} True if value is a URLSearchParams object, otherwise false
+ */
+function isURLSearchParams(val) {
+  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
+}
+
+/**
+ * Trim excess whitespace off the beginning and end of a string
  *
- * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
- * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ * @param {String} str The String to trim
+ * @returns {String} The String freed of excess whitespace
+ */
+function trim(str) {
+  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
+}
+
+/**
+ * Determine if we're running in a standard browser environment
  *
- * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
- * for details over the differences between `_.debounce` and `_.throttle`.
+ * This allows axios to run in a web worker, and react-native.
+ * Both environments support XMLHttpRequest, but not fully standard globals.
  *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Function
- * @param {Function} func The function to debounce.
- * @param {number} [wait=0] The number of milliseconds to delay.
- * @param {Object} [options={}] The options object.
- * @param {boolean} [options.leading=false]
- *  Specify invoking on the leading edge of the timeout.
- * @param {number} [options.maxWait]
- *  The maximum time `func` is allowed to be delayed before it's invoked.
- * @param {boolean} [options.trailing=true]
- *  Specify invoking on the trailing edge of the timeout.
- * @returns {Function} Returns the new debounced function.
- * @example
+ * web workers:
+ *  typeof window -> undefined
+ *  typeof document -> undefined
  *
- * // Avoid costly calculations while the window size is in flux.
- * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ * react-native:
+ *  navigator.product -> 'ReactNative'
+ * nativescript
+ *  navigator.product -> 'NativeScript' or 'NS'
+ */
+function isStandardBrowserEnv() {
+  if (typeof navigator !== 'undefined' && (navigator.product === 'ReactNative' ||
+                                           navigator.product === 'NativeScript' ||
+                                           navigator.product === 'NS')) {
+    return false;
+  }
+  return (
+    typeof window !== 'undefined' &&
+    typeof document !== 'undefined'
+  );
+}
+
+/**
+ * Iterate over an Array or an Object invoking a function for each item.
  *
- * // Invoke `sendMail` when clicked, debouncing subsequent calls.
- * jQuery(element).on('click', _.debounce(sendMail, 300, {
- *   'leading': true,
- *   'trailing': false
- * }));
+ * If `obj` is an Array callback will be called passing
+ * the value, index, and complete array for each item.
  *
- * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
- * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
- * var source = new EventSource('/stream');
- * jQuery(source).on('message', debounced);
+ * If 'obj' is an Object callback will be called passing
+ * the value, key, and complete object for each property.
  *
- * // Cancel the trailing debounced invocation.
- * jQuery(window).on('popstate', debounced.cancel);
+ * @param {Object|Array} obj The object to iterate
+ * @param {Function} fn The callback to invoke for each item
  */
-function debounce(func, wait, options) {
-  var lastArgs,
-      lastThis,
-      maxWait,
-      result,
-      timerId,
-      lastCallTime,
-      lastInvokeTime = 0,
-      leading = false,
-      maxing = false,
-      trailing = true;
-
-  if (typeof func != 'function') {
-    throw new TypeError(FUNC_ERROR_TEXT);
-  }
-  wait = toNumber(wait) || 0;
-  if (isObject$5(options)) {
-    leading = !!options.leading;
-    maxing = 'maxWait' in options;
-    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = 'trailing' in options ? !!options.trailing : trailing;
-  }
-
-  function invokeFunc(time) {
-    var args = lastArgs,
-        thisArg = lastThis;
-
-    lastArgs = lastThis = undefined;
-    lastInvokeTime = time;
-    result = func.apply(thisArg, args);
-    return result;
-  }
-
-  function leadingEdge(time) {
-    // Reset any `maxWait` timer.
-    lastInvokeTime = time;
-    // Start the timer for the trailing edge.
-    timerId = setTimeout(timerExpired, wait);
-    // Invoke the leading edge.
-    return leading ? invokeFunc(time) : result;
-  }
-
-  function remainingWait(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime,
-        timeWaiting = wait - timeSinceLastCall;
-
-    return maxing
-      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-      : timeWaiting;
+function forEach(obj, fn) {
+  // Don't bother if no value provided
+  if (obj === null || typeof obj === 'undefined') {
+    return;
   }
 
-  function shouldInvoke(time) {
-    var timeSinceLastCall = time - lastCallTime,
-        timeSinceLastInvoke = time - lastInvokeTime;
-
-    // Either this is the first call, activity has stopped and we're at the
-    // trailing edge, the system time has gone backwards and we're treating
-    // it as the trailing edge, or we've hit the `maxWait` limit.
-    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  // Force an array if not already something iterable
+  if (typeof obj !== 'object') {
+    /*eslint no-param-reassign:0*/
+    obj = [obj];
   }
 
-  function timerExpired() {
-    var time = now$1();
-    if (shouldInvoke(time)) {
-      return trailingEdge(time);
+  if (isArray(obj)) {
+    // Iterate over array values
+    for (var i = 0, l = obj.length; i < l; i++) {
+      fn.call(null, obj[i], i, obj);
+    }
+  } else {
+    // Iterate over object keys
+    for (var key in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key)) {
+        fn.call(null, obj[key], key, obj);
+      }
     }
-    // Restart the timer.
-    timerId = setTimeout(timerExpired, remainingWait(time));
   }
+}
 
-  function trailingEdge(time) {
-    timerId = undefined;
-
-    // Only invoke if we have `lastArgs` which means `func` has been
-    // debounced at least once.
-    if (trailing && lastArgs) {
-      return invokeFunc(time);
+/**
+ * Accepts varargs expecting each argument to be an object, then
+ * immutably merges the properties of each object and returns result.
+ *
+ * When multiple objects contain the same key the later object in
+ * the arguments list will take precedence.
+ *
+ * Example:
+ *
+ * ```js
+ * var result = merge({foo: 123}, {foo: 456});
+ * console.log(result.foo); // outputs 456
+ * ```
+ *
+ * @param {Object} obj1 Object to merge
+ * @returns {Object} Result of all merge properties
+ */
+function merge(/* obj1, obj2, obj3, ... */) {
+  var result = {};
+  function assignValue(val, key) {
+    if (isPlainObject(result[key]) && isPlainObject(val)) {
+      result[key] = merge(result[key], val);
+    } else if (isPlainObject(val)) {
+      result[key] = merge({}, val);
+    } else if (isArray(val)) {
+      result[key] = val.slice();
+    } else {
+      result[key] = val;
     }
-    lastArgs = lastThis = undefined;
-    return result;
   }
 
-  function cancel() {
-    if (timerId !== undefined) {
-      clearTimeout(timerId);
-    }
-    lastInvokeTime = 0;
-    lastArgs = lastCallTime = lastThis = timerId = undefined;
-  }
-
-  function flush() {
-    return timerId === undefined ? result : trailingEdge(now$1());
-  }
-
-  function debounced() {
-    var time = now$1(),
-        isInvoking = shouldInvoke(time);
-
-    lastArgs = arguments;
-    lastThis = this;
-    lastCallTime = time;
-
-    if (isInvoking) {
-      if (timerId === undefined) {
-        return leadingEdge(lastCallTime);
-      }
-      if (maxing) {
-        // Handle invocations in a tight loop.
-        clearTimeout(timerId);
-        timerId = setTimeout(timerExpired, wait);
-        return invokeFunc(lastCallTime);
-      }
-    }
-    if (timerId === undefined) {
-      timerId = setTimeout(timerExpired, wait);
-    }
-    return result;
+  for (var i = 0, l = arguments.length; i < l; i++) {
+    forEach(arguments[i], assignValue);
   }
-  debounced.cancel = cancel;
-  debounced.flush = flush;
-  return debounced;
+  return result;
 }
 
-var TOP_MARGIN$1 = 10;
-var BOTTOM_MARGIN$1 = 10;
-var EMPTY_CATEGORY_NAME = 'EMPTY_EVENT';
-var QueryEventsChart = function (_a) {
-    var data = _a.data, maxEPS = _a.maxEPS, groupByOperation = _a.groupByOperation, _b = _a.isTabletAnomaly, isTabletAnomaly = _b === void 0 ? false : _b;
-    var chartRef = useRef(null);
-    var barHeight = 40;
-    useEffect(function () {
-        if (!chartRef.current)
-            return;
-        var chartInstance = init(chartRef.current);
-        var categories = data.map(function (entry) {
-            return groupByOperation === WaitEventClassification.WAIT_EVENT
-                ? entry.waitEvent
-                : entry.waitEventType;
-        });
-        // Calculate total used EPS
-        var totalUsed = data.reduce(function (sum, entry) { return sum + entry.eps; }, 0);
-        var emptySpace = Math.max(0, maxEPS - totalUsed);
-        var series = [];
-        // Add series for each category first (these will be on the left)
-        categories.forEach(function (category, index) {
-            var _a;
-            series.push({
-                name: category,
-                type: 'bar',
-                stack: 'total',
-                label: { show: false },
-                data: [data[index].eps],
-                itemStyle: {
-                    color: (_a = NAME_COLOR_MAPPING[category]) !== null && _a !== void 0 ? _a : COLORS[index]
-                }
-            });
-        });
-        // Add empty space series last (this will appear on the right after all colored segments)
-        if (emptySpace > 0) {
-            series.push({
-                name: EMPTY_CATEGORY_NAME,
-                type: 'bar',
-                stack: 'total',
-                label: { show: false },
-                data: [emptySpace],
-                itemStyle: {
-                    color: NAME_COLOR_MAPPING[EMPTY_CATEGORY_NAME]
-                },
-                silent: true,
-                tooltip: { show: false }
-            });
-        }
-        var option = {
-            animation: false,
-            grid: {
-                left: 0,
-                right: 0,
-                top: TOP_MARGIN$1,
-                bottom: BOTTOM_MARGIN$1,
-                containLabel: false
-            },
-            tooltip: {
-                trigger: 'item',
-                confine: false,
-                extraCssText: 'letter-spacing:0.5px; border:1px solid #D7DEE4; border-radius:8px; z-index:10000 !important;',
-                formatter: function (params) {
-                    var left = getLegendKey(params.color, params.seriesName);
-                    var right = getLegendValue(Number(params.value).toFixed(3));
-                    var rows = "<div style=\"\n                            display:grid;\n                            grid-template-columns: 1fr auto; /* left grows, right fits */\n                            column-gap:24px;                  /* \u2190 24px between columns */\n                            align-items:center;\n                            margin-bottom:6px;\n                          \">\n                            ".concat(left).concat(right, "\n                          </div>");
-                    return "<div style=\"letter-spacing:0.5px;\">".concat(rows, "</div>");
-                    // Mimic Plotly's 'x+name' behavior
-                    // return `${params.marker} ${params.seriesName}: ${params.value}`;
-                },
-                // backgroundColor: 'rgba(50, 50, 50, 0.8)',
-                textStyle: {
-                    fontSize: 11.5,
-                    color: '#0B1117',
-                    fontWeight: 400
-                }
-            },
-            xAxis: {
-                type: 'value',
-                show: false,
-                min: 0,
-                max: maxEPS
-            },
-            yAxis: {
-                type: 'category',
-                data: [''], // single row
-                show: false
-            },
-            series: series
-        };
-        chartInstance.setOption(option);
-        // Resize handling
-        var resizeObserver = new ResizeObserver(function () {
-            chartInstance.resize();
-        });
-        resizeObserver.observe(chartRef.current);
-        return function () {
-            resizeObserver.disconnect();
-            chartInstance.dispose();
-        };
-    }, [data, groupByOperation, maxEPS]);
-    return (jsx("div", { className: "query-events-chart-container", ref: chartRef, style: {
-            height: "".concat(barHeight, "px"),
-            width: isTabletAnomaly ? '75%' : '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
-        } }));
-};
-
-var useStyles$i = makeStyles$1(function (theme) { return ({
-    itemsContainer: {
-        padding: theme.spacing(1, 0)
-    },
-    item: {
-        paddingLeft: theme.spacing(2),
-        '& label': {
-            height: '36px'
-        }
-    },
-    checkbox: {
-        '& .yb-MuiSvgIcon-root': {
-            width: '20px',
-            height: '20px'
-        }
-    }
-}); });
-var ColumnSelectorDrawer = function (_a) {
-    var _b;
-    _a.appName; var columns = _a.columns, hiddenColumns = _a.hiddenColumns, _c = _a.isDbLoadMetadataColumns, isDbLoadMetadataColumns = _c === void 0 ? false : _c, _d = _a.isTabletsMetadataColumns, isTabletsMetadataColumns = _d === void 0 ? false : _d, _e = _a.isNodeLoadMetadataColumns, isNodeLoadMetadataColumns = _e === void 0 ? false : _e, onColumnVisibilityChange = _a.onColumnVisibilityChange, close = _a.close;
-    var classes = useStyles$i();
-    var visibleStorageKey = VISIBLE_QUERY_METADATA_COLUMNS;
-    if (isTabletsMetadataColumns) {
-        visibleStorageKey = VISIBLE_TABLETS_METADATA_COLUMNS;
-    }
-    else if (isDbLoadMetadataColumns) {
-        visibleStorageKey = VISIBLE_DB_LOAD_METADATA_COLUMNS;
-    }
-    else if (isNodeLoadMetadataColumns) {
-        visibleStorageKey = VISIBLE_NODE_LOAD_METADATA_COLUMNS;
-    }
-    // Retrieve VISIBLE_QUERY_METADATA_COLUMNS from session storage if it exists
-    var storedVisibleColumns = JSON.parse((_b = sessionStorage.getItem(visibleStorageKey)) !== null && _b !== void 0 ? _b : '[]');
-    var defaultValues = columns.reduce(function (acc, column) {
-        var _a;
-        acc[column.name] =
-            storedVisibleColumns.length > 0
-                ? storedVisibleColumns.includes(column.name)
-                : (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display;
-        return acc;
-    }, {});
-    var _f = useForm({ defaultValues: defaultValues }), control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset;
-    useEffect(function () {
-        reset(defaultValues);
-    }, [columns, reset]);
-    var handleClose = function () {
-        close();
-    };
-    var onSubmit = function (data) {
-        var visibleMetadataColumns = [];
-        Object.keys(data).forEach(function (key) {
-            var isVisible = data[key];
-            var columnName = key;
-            onColumnVisibilityChange(columnName, isVisible);
-            if (isVisible) {
-                visibleMetadataColumns.push(columnName);
-            }
-        });
-        sessionStorage.setItem(visibleStorageKey, JSON.stringify(visibleMetadataColumns));
-        handleClose();
-    };
-    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, { className: classes.itemsContainer, children: columns.map(function (column) {
-                    var isHidden = hiddenColumns.includes(column.name);
-                    if (isHidden) {
-                        return null;
-                    }
-                    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 axios$3 = {exports: {}};
-
-var bind$2 = function bind(fn, thisArg) {
-  return function wrap() {
-    var args = new Array(arguments.length);
-    for (var i = 0; i < args.length; i++) {
-      args[i] = arguments[i];
-    }
-    return fn.apply(thisArg, args);
-  };
-};
-
-var bind$1 = bind$2;
-
-// utils is a library of generic helper functions non-specific to axios
-
-var toString = Object.prototype.toString;
-
 /**
- * Determine if a value is an Array
+ * Extends object a by mutably adding to it the properties of object b.
  *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an Array, otherwise false
+ * @param {Object} a The object to be extended
+ * @param {Object} b The object to copy properties from
+ * @param {Object} thisArg The object to bind function to
+ * @return {Object} The resulting value of object a
  */
-function isArray(val) {
-  return toString.call(val) === '[object Array]';
+function extend(a, b, thisArg) {
+  forEach(b, function assignValue(val, key) {
+    if (thisArg && typeof val === 'function') {
+      a[key] = bind$1(val, thisArg);
+    } else {
+      a[key] = val;
+    }
+  });
+  return a;
 }
 
 /**
- * Determine if a value is undefined
+ * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
  *
- * @param {Object} val The value to test
- * @returns {boolean} True if the value is undefined, otherwise false
+ * @param {string} content with BOM
+ * @return {string} content value without BOM
  */
-function isUndefined(val) {
-  return typeof val === 'undefined';
+function stripBOM(content) {
+  if (content.charCodeAt(0) === 0xFEFF) {
+    content = content.slice(1);
+  }
+  return content;
 }
 
-/**
- * Determine if a value is a Buffer
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Buffer, otherwise false
- */
-function isBuffer(val) {
-  return val !== null && !isUndefined(val) && val.constructor !== null && !isUndefined(val.constructor)
-    && typeof val.constructor.isBuffer === 'function' && val.constructor.isBuffer(val);
-}
+var utils$9 = {
+  isArray: isArray,
+  isArrayBuffer: isArrayBuffer,
+  isBuffer: isBuffer,
+  isFormData: isFormData,
+  isArrayBufferView: isArrayBufferView,
+  isString: isString,
+  isNumber: isNumber,
+  isObject: isObject,
+  isPlainObject: isPlainObject,
+  isUndefined: isUndefined,
+  isDate: isDate$1,
+  isFile: isFile,
+  isBlob: isBlob,
+  isFunction: isFunction,
+  isStream: isStream,
+  isURLSearchParams: isURLSearchParams,
+  isStandardBrowserEnv: isStandardBrowserEnv,
+  forEach: forEach,
+  merge: merge,
+  extend: extend,
+  trim: trim,
+  stripBOM: stripBOM
+};
 
-/**
- * Determine if a value is an ArrayBuffer
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an ArrayBuffer, otherwise false
- */
-function isArrayBuffer(val) {
-  return toString.call(val) === '[object ArrayBuffer]';
-}
+var utils$8 = utils$9;
 
-/**
- * Determine if a value is a FormData
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an FormData, otherwise false
- */
-function isFormData(val) {
-  return (typeof FormData !== 'undefined') && (val instanceof FormData);
+function encode$1(val) {
+  return encodeURIComponent(val).
+    replace(/%3A/gi, ':').
+    replace(/%24/g, '$').
+    replace(/%2C/gi, ',').
+    replace(/%20/g, '+').
+    replace(/%5B/gi, '[').
+    replace(/%5D/gi, ']');
 }
 
 /**
- * Determine if a value is a view on an ArrayBuffer
+ * Build a URL by appending params to the end
  *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a view on an ArrayBuffer, otherwise false
+ * @param {string} url The base of the url (e.g., http://www.google.com)
+ * @param {object} [params] The params to be appended
+ * @returns {string} The formatted url
  */
-function isArrayBufferView(val) {
-  var result;
-  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
-    result = ArrayBuffer.isView(val);
-  } else {
-    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
+var buildURL$1 = function buildURL(url, params, paramsSerializer) {
+  /*eslint no-param-reassign:0*/
+  if (!params) {
+    return url;
   }
-  return result;
-}
 
-/**
- * Determine if a value is a String
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a String, otherwise false
- */
-function isString(val) {
-  return typeof val === 'string';
-}
+  var serializedParams;
+  if (paramsSerializer) {
+    serializedParams = paramsSerializer(params);
+  } else if (utils$8.isURLSearchParams(params)) {
+    serializedParams = params.toString();
+  } else {
+    var parts = [];
 
-/**
- * Determine if a value is a Number
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Number, otherwise false
- */
-function isNumber(val) {
-  return typeof val === 'number';
-}
+    utils$8.forEach(params, function serialize(val, key) {
+      if (val === null || typeof val === 'undefined') {
+        return;
+      }
 
-/**
- * Determine if a value is an Object
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is an Object, otherwise false
- */
-function isObject(val) {
-  return val !== null && typeof val === 'object';
-}
+      if (utils$8.isArray(val)) {
+        key = key + '[]';
+      } else {
+        val = [val];
+      }
 
-/**
- * Determine if a value is a plain Object
- *
- * @param {Object} val The value to test
- * @return {boolean} True if value is a plain Object, otherwise false
- */
-function isPlainObject(val) {
-  if (toString.call(val) !== '[object Object]') {
-    return false;
+      utils$8.forEach(val, function parseValue(v) {
+        if (utils$8.isDate(v)) {
+          v = v.toISOString();
+        } else if (utils$8.isObject(v)) {
+          v = JSON.stringify(v);
+        }
+        parts.push(encode$1(key) + '=' + encode$1(v));
+      });
+    });
+
+    serializedParams = parts.join('&');
   }
 
-  var prototype = Object.getPrototypeOf(val);
-  return prototype === null || prototype === Object.prototype;
-}
+  if (serializedParams) {
+    var hashmarkIndex = url.indexOf('#');
+    if (hashmarkIndex !== -1) {
+      url = url.slice(0, hashmarkIndex);
+    }
 
-/**
- * Determine if a value is a Date
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Date, otherwise false
- */
-function isDate$1(val) {
-  return toString.call(val) === '[object Date]';
-}
+    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
+  }
 
-/**
- * Determine if a value is a File
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a File, otherwise false
- */
-function isFile(val) {
-  return toString.call(val) === '[object File]';
-}
+  return url;
+};
 
-/**
- * Determine if a value is a Blob
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Blob, otherwise false
- */
-function isBlob(val) {
-  return toString.call(val) === '[object Blob]';
-}
+var utils$7 = utils$9;
 
-/**
- * Determine if a value is a Function
- *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Function, otherwise false
- */
-function isFunction(val) {
-  return toString.call(val) === '[object Function]';
+function InterceptorManager$1() {
+  this.handlers = [];
 }
 
 /**
- * Determine if a value is a Stream
+ * Add a new interceptor to the stack
  *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a Stream, otherwise false
- */
-function isStream(val) {
-  return isObject(val) && isFunction(val.pipe);
-}
-
-/**
- * Determine if a value is a URLSearchParams object
+ * @param {Function} fulfilled The function to handle `then` for a `Promise`
+ * @param {Function} rejected The function to handle `reject` for a `Promise`
  *
- * @param {Object} val The value to test
- * @returns {boolean} True if value is a URLSearchParams object, otherwise false
+ * @return {Number} An ID used to remove interceptor later
  */
-function isURLSearchParams(val) {
-  return typeof URLSearchParams !== 'undefined' && val instanceof URLSearchParams;
-}
+InterceptorManager$1.prototype.use = function use(fulfilled, rejected, options) {
+  this.handlers.push({
+    fulfilled: fulfilled,
+    rejected: rejected,
+    synchronous: options ? options.synchronous : false,
+    runWhen: options ? options.runWhen : null
+  });
+  return this.handlers.length - 1;
+};
 
 /**
- * Trim excess whitespace off the beginning and end of a string
+ * Remove an interceptor from the stack
  *
- * @param {String} str The String to trim
- * @returns {String} The String freed of excess whitespace
+ * @param {Number} id The ID that was returned by `use`
  */
-function trim(str) {
-  return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g, '');
-}
+InterceptorManager$1.prototype.eject = function eject(id) {
+  if (this.handlers[id]) {
+    this.handlers[id] = null;
+  }
+};
 
 /**
- * Determine if we're running in a standard browser environment
- *
- * This allows axios to run in a web worker, and react-native.
- * Both environments support XMLHttpRequest, but not fully standard globals.
- *
- * web workers:
- *  typeof window -> undefined
- *  typeof document -> undefined
- *
- * react-native:
- *  navigator.product -> 'ReactNative'
- * nativescript
- *  navigator.product -> 'NativeScript' or 'NS'
- */
-function isStandardBrowserEnv() {
-  if (typeof navigator !== 'undefined' && (navigator.product === 'ReactNative' ||
-                                           navigator.product === 'NativeScript' ||
-                                           navigator.product === 'NS')) {
-    return false;
-  }
-  return (
-    typeof window !== 'undefined' &&
-    typeof document !== 'undefined'
-  );
-}
-
-/**
- * Iterate over an Array or an Object invoking a function for each item.
- *
- * If `obj` is an Array callback will be called passing
- * the value, index, and complete array for each item.
- *
- * If 'obj' is an Object callback will be called passing
- * the value, key, and complete object for each property.
- *
- * @param {Object|Array} obj The object to iterate
- * @param {Function} fn The callback to invoke for each item
- */
-function forEach(obj, fn) {
-  // Don't bother if no value provided
-  if (obj === null || typeof obj === 'undefined') {
-    return;
-  }
-
-  // Force an array if not already something iterable
-  if (typeof obj !== 'object') {
-    /*eslint no-param-reassign:0*/
-    obj = [obj];
-  }
-
-  if (isArray(obj)) {
-    // Iterate over array values
-    for (var i = 0, l = obj.length; i < l; i++) {
-      fn.call(null, obj[i], i, obj);
-    }
-  } else {
-    // Iterate over object keys
-    for (var key in obj) {
-      if (Object.prototype.hasOwnProperty.call(obj, key)) {
-        fn.call(null, obj[key], key, obj);
-      }
-    }
-  }
-}
-
-/**
- * Accepts varargs expecting each argument to be an object, then
- * immutably merges the properties of each object and returns result.
- *
- * When multiple objects contain the same key the later object in
- * the arguments list will take precedence.
- *
- * Example:
- *
- * ```js
- * var result = merge({foo: 123}, {foo: 456});
- * console.log(result.foo); // outputs 456
- * ```
- *
- * @param {Object} obj1 Object to merge
- * @returns {Object} Result of all merge properties
- */
-function merge(/* obj1, obj2, obj3, ... */) {
-  var result = {};
-  function assignValue(val, key) {
-    if (isPlainObject(result[key]) && isPlainObject(val)) {
-      result[key] = merge(result[key], val);
-    } else if (isPlainObject(val)) {
-      result[key] = merge({}, val);
-    } else if (isArray(val)) {
-      result[key] = val.slice();
-    } else {
-      result[key] = val;
-    }
-  }
-
-  for (var i = 0, l = arguments.length; i < l; i++) {
-    forEach(arguments[i], assignValue);
-  }
-  return result;
-}
-
-/**
- * Extends object a by mutably adding to it the properties of object b.
- *
- * @param {Object} a The object to be extended
- * @param {Object} b The object to copy properties from
- * @param {Object} thisArg The object to bind function to
- * @return {Object} The resulting value of object a
- */
-function extend(a, b, thisArg) {
-  forEach(b, function assignValue(val, key) {
-    if (thisArg && typeof val === 'function') {
-      a[key] = bind$1(val, thisArg);
-    } else {
-      a[key] = val;
-    }
-  });
-  return a;
-}
-
-/**
- * Remove byte order marker. This catches EF BB BF (the UTF-8 BOM)
- *
- * @param {string} content with BOM
- * @return {string} content value without BOM
- */
-function stripBOM(content) {
-  if (content.charCodeAt(0) === 0xFEFF) {
-    content = content.slice(1);
-  }
-  return content;
-}
-
-var utils$9 = {
-  isArray: isArray,
-  isArrayBuffer: isArrayBuffer,
-  isBuffer: isBuffer,
-  isFormData: isFormData,
-  isArrayBufferView: isArrayBufferView,
-  isString: isString,
-  isNumber: isNumber,
-  isObject: isObject,
-  isPlainObject: isPlainObject,
-  isUndefined: isUndefined,
-  isDate: isDate$1,
-  isFile: isFile,
-  isBlob: isBlob,
-  isFunction: isFunction,
-  isStream: isStream,
-  isURLSearchParams: isURLSearchParams,
-  isStandardBrowserEnv: isStandardBrowserEnv,
-  forEach: forEach,
-  merge: merge,
-  extend: extend,
-  trim: trim,
-  stripBOM: stripBOM
-};
-
-var utils$8 = utils$9;
-
-function encode$1(val) {
-  return encodeURIComponent(val).
-    replace(/%3A/gi, ':').
-    replace(/%24/g, '$').
-    replace(/%2C/gi, ',').
-    replace(/%20/g, '+').
-    replace(/%5B/gi, '[').
-    replace(/%5D/gi, ']');
-}
-
-/**
- * Build a URL by appending params to the end
- *
- * @param {string} url The base of the url (e.g., http://www.google.com)
- * @param {object} [params] The params to be appended
- * @returns {string} The formatted url
- */
-var buildURL$1 = function buildURL(url, params, paramsSerializer) {
-  /*eslint no-param-reassign:0*/
-  if (!params) {
-    return url;
-  }
-
-  var serializedParams;
-  if (paramsSerializer) {
-    serializedParams = paramsSerializer(params);
-  } else if (utils$8.isURLSearchParams(params)) {
-    serializedParams = params.toString();
-  } else {
-    var parts = [];
-
-    utils$8.forEach(params, function serialize(val, key) {
-      if (val === null || typeof val === 'undefined') {
-        return;
-      }
-
-      if (utils$8.isArray(val)) {
-        key = key + '[]';
-      } else {
-        val = [val];
-      }
-
-      utils$8.forEach(val, function parseValue(v) {
-        if (utils$8.isDate(v)) {
-          v = v.toISOString();
-        } else if (utils$8.isObject(v)) {
-          v = JSON.stringify(v);
-        }
-        parts.push(encode$1(key) + '=' + encode$1(v));
-      });
-    });
-
-    serializedParams = parts.join('&');
-  }
-
-  if (serializedParams) {
-    var hashmarkIndex = url.indexOf('#');
-    if (hashmarkIndex !== -1) {
-      url = url.slice(0, hashmarkIndex);
-    }
-
-    url += (url.indexOf('?') === -1 ? '?' : '&') + serializedParams;
-  }
-
-  return url;
-};
-
-var utils$7 = utils$9;
-
-function InterceptorManager$1() {
-  this.handlers = [];
-}
-
-/**
- * Add a new interceptor to the stack
- *
- * @param {Function} fulfilled The function to handle `then` for a `Promise`
- * @param {Function} rejected The function to handle `reject` for a `Promise`
- *
- * @return {Number} An ID used to remove interceptor later
- */
-InterceptorManager$1.prototype.use = function use(fulfilled, rejected, options) {
-  this.handlers.push({
-    fulfilled: fulfilled,
-    rejected: rejected,
-    synchronous: options ? options.synchronous : false,
-    runWhen: options ? options.runWhen : null
-  });
-  return this.handlers.length - 1;
-};
-
-/**
- * Remove an interceptor from the stack
- *
- * @param {Number} id The ID that was returned by `use`
- */
-InterceptorManager$1.prototype.eject = function eject(id) {
-  if (this.handlers[id]) {
-    this.handlers[id] = null;
-  }
-};
-
-/**
- * Iterate over all the registered interceptors
+ * Iterate over all the registered interceptors
  *
  * This method is particularly useful for skipping over any
  * interceptors that may have become `null` calling `eject`.
@@ -77432,93 +76888,930 @@ var ApiService = /** @class */ (function () {
                 : "/runtime_config_entry/".concat(scopeUuid, "/").concat(configKey);
             return axiosInstance.delete(requestUrl).then(function (resp) { return resp.data; });
         };
-        this.fetchBackgroundTasks = function (universeUuid, startTime, endTime, limit, apiUrl) {
-            var requestURL = isNonEmptyString(apiUrl)
-                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/background_tasks")
-                : "/universe/".concat(universeUuid, "/background_tasks");
-            var params = {};
-            if (startTime) {
-                params.startTime = startTime;
-            }
-            if (endTime) {
-                params.endTime = endTime;
-            }
-            if (limit !== null) {
-                params.limit = limit;
-            }
-            return axiosInstance
-                .get(requestURL, {
-                params: params
-            })
-                .then(function (res) { return res.data; });
+        this.fetchBackgroundTasks = function (universeUuid, startTime, endTime, limit, apiUrl) {
+            var requestURL = isNonEmptyString(apiUrl)
+                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/background_tasks")
+                : "/universe/".concat(universeUuid, "/background_tasks");
+            var params = {};
+            if (startTime) {
+                params.startTime = startTime;
+            }
+            if (endTime) {
+                params.endTime = endTime;
+            }
+            if (limit !== null) {
+                params.limit = limit;
+            }
+            return axiosInstance
+                .get(requestURL, {
+                params: params
+            })
+                .then(function (res) { return res.data; });
+        };
+        // New Anomaly APIs
+        this.fetchAnomalyGroups = function (universeUuid, startTime, endTime, anomalyType, getClusterDetails, apiUrl) {
+            if (anomalyType === void 0) { anomalyType = ''; }
+            var _a = getClusterDetails(), cluster = _a.cluster, region = _a.region, zone = _a.zone, node = _a.node;
+            var params = new URLSearchParams();
+            if (startTime) {
+                params.append('startTime', startTime);
+            }
+            if (endTime) {
+                params.append('endTime', endTime);
+            }
+            if (startTime === null && endTime === null) {
+                return {};
+            }
+            if (isNonEmptyString(anomalyType)) {
+                params.append('anomalyType', anomalyType);
+            }
+            if (isNonEmptyString(cluster) && cluster !== ALL) {
+                params.append('clusterUuids', cluster);
+            }
+            if (isNonEmptyString(region) && region !== ALL) {
+                params.append('regionCodes', region);
+            }
+            if (isNonEmptyString(zone) && zone !== ALL) {
+                params.append('azCodes', zone);
+            }
+            if (isNonEmptyString(node) && node !== ALL) {
+                params.append('instanceNames', node);
+            }
+            var requestUrl = isNonEmptyString(apiUrl)
+                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups/by_type?").concat(params.toString())
+                : "/universe/".concat(universeUuid, "/anomaly_groups/by_type?").concat(params.toString());
+            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
+        };
+        this.fetchAnomalyGroupsByType = function (universeUuid, startTime, endTime, anomalyType, apiUrl) {
+            var requestUrl = isNonEmptyString(apiUrl)
+                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups?startTime=").concat(startTime, "&endTime=").concat(endTime, "&type=").concat(anomalyType)
+                : "/universe/".concat(universeUuid, "/anomaly_groups?startTime=").concat(startTime, "&endTime=").concat(endTime, "&type=").concat(anomalyType);
+            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
+        };
+        this.fetchAnomalyGroupById = function (universeUuid, anomalyGroupId, startTime, endTime, apiUrl) {
+            if (startTime === null && endTime === null) {
+                return {};
+            }
+            var requestUrl = isNonEmptyString(apiUrl)
+                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups/").concat(anomalyGroupId, "?startTime=").concat(startTime, "&endTime=").concat(endTime)
+                : "/universe/".concat(universeUuid, "/anomaly_groups/").concat(anomalyGroupId, "?startTime=").concat(startTime, "&endTime=").concat(endTime);
+            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
+        };
+        // Send telemetry events on successful click events
+        this.sendTelemetryEvent = function (universeUuid, payload, apiUrl) {
+            var requestUrl = isNonEmptyString(apiUrl)
+                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/ui_events")
+                : "/universe/".concat(universeUuid, "/ui_events");
+            return axiosInstance.post(requestUrl, payload).then(function (resp) { return resp.data; });
+        };
+    }
+    return ApiService;
+}());
+var PerfAdvisorAPI = new ApiService();
+
+var _circle, _circle2, _circle3, _circle4, _circle5, _circle6, _circle7, _circle8, _circle9;
+function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
+const SvgLoading = props => /*#__PURE__*/React$1.createElement("svg", _extends$i({
+  xmlns: "http://www.w3.org/2000/svg",
+  style: {
+    display: "block",
+    shapeRendering: "auto",
+    backgroundPosition: "initial initial",
+    backgroundRepeat: "initial initial"
+  },
+  width: 24,
+  height: 24,
+  viewBox: "30 30 40 40",
+  preserveAspectRatio: "xMidYMid"
+}, props), _circle || (_circle = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 65,
+  cy: 50,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-1.8140589569160996s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-1.8140589569160996s"
+}))), _circle2 || (_circle2 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 61.491,
+  cy: 59.642,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-1.5873015873015872s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-1.5873015873015872s"
+}))), _circle3 || (_circle3 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 52.605,
+  cy: 64.772,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-1.3605442176870748s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-1.3605442176870748s"
+}))), _circle4 || (_circle4 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 42.5,
+  cy: 62.99,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-1.1337868480725624s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-1.1337868480725624s"
+}))), _circle5 || (_circle5 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 35.905,
+  cy: 55.13,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-0.9070294784580498s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-0.9070294784580498s"
+}))), _circle6 || (_circle6 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 35.905,
+  cy: 44.87,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-0.6802721088435374s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-0.6802721088435374s"
+}))), _circle7 || (_circle7 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 42.5,
+  cy: 37.01,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-0.4535147392290249s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-0.4535147392290249s"
+}))), _circle8 || (_circle8 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 52.605,
+  cy: 35.228,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "-0.22675736961451246s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "-0.22675736961451246s"
+}))), _circle9 || (_circle9 = /*#__PURE__*/React$1.createElement("circle", {
+  cx: 61.491,
+  cy: 40.358,
+  fill: "#bfcded",
+  r: 3
+}, /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "r",
+  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
+  dur: "2.0408163265306123s",
+  repeatCount: "indefinite",
+  begin: "0s"
+}), /*#__PURE__*/React$1.createElement("animate", {
+  attributeName: "fill",
+  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
+  repeatCount: "indefinite",
+  dur: "2.0408163265306123s",
+  begin: "0s"
+}))));
+
+var img$c = "data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.0911 3.70567H2V0.60325C2 0.316226 1.82388 0 1.37381 0C0.923736 0 0.74762 0.316226 0.74762 0.60325V4.78291H12.0911L9.85455 7.08053C9.63621 7.29087 9.63621 7.6319 9.85455 7.84224C10.0729 8.05259 10.4269 8.05259 10.6452 7.84224L13.8362 4.62515C14.0546 4.41481 14.0546 4.07377 13.8362 3.86343L10.6452 0.603249C10.4269 0.392907 10.0729 0.392907 9.85455 0.603249C9.63621 0.813592 9.63621 1.15463 9.85455 1.36497L12.0911 3.70567Z' fill='%2397A5B0'/%3e%3c/svg%3e";
+var UnderIcon = img$c;
+
+var YBStyledTab$4 = styled$1(YBTab)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacing(0.5, 1),
+        '& .yb-MuiTab-iconWrapper': {
+            marginTop: theme.spacing(0.5)
+        }
+    });
+});
+var AnomalyRCAGraphs = function (_a) {
+    var _b, _c, _d;
+    var appName = _a.appName, timezone = _a.timezone, startTime = _a.startTime, endTime = _a.endTime, dateTimeRange = _a.dateTimeRange, metricMeasure = _a.metricMeasure, anomalyData = _a.anomalyData, getClusterDetails = _a.getClusterDetails, apiUrl = _a.apiUrl, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, urlParams = _a.urlParams, onEChartsDateSelect = _a.onEChartsDateSelect;
+    // Ref to store chart instances
+    var chartInstancesRef = useRef([]);
+    var classes = useHelperStyles();
+    var _e = useState(0), selectedTab = _e[0], setSelectedTab = _e[1];
+    var _f = useState(null), RCAGraphResponseData = _f[0], setRCAGraphResponseData = _f[1];
+    var _g = useState(amomalyGraphRequestParams), graphRequestParams = _g[0], setGraphRequestParams = _g[1];
+    var _h = getClusterDetails(), universeUuid = _h.universeUuid, cluster = _h.cluster, region = _h.region, zone = _h.zone, node = _h.node, numNodes = _h.numNodes, outlierType = _h.outlierType;
+    // Check previous props
+    var previousMetricMeasure = usePrevious(metricMeasure);
+    var handleTabChange = function (event, newValue) {
+        var scrollY = window.scrollY; // Save scroll position
+        setSelectedTab(newValue);
+        setTimeout(function () { return window.scrollTo(0, scrollY); }, 0); // Restore after re-render
+    };
+    var onSelectAshLabel = function (groupByLabel, metricData, isAdvancedView) {
+        var _a, _b;
+        var groupBy = WaitEventClassification.WAIT_EVENT_COMPONENT;
+        if (groupByLabel === 'Class') {
+            groupBy = WaitEventClassification.WAIT_EVENT_CLASS;
+        }
+        else if (groupByLabel === 'Type') {
+            groupBy = WaitEventClassification.WAIT_EVENT_TYPE;
+        }
+        else if (groupByLabel === 'Event') {
+            groupBy = WaitEventClassification.WAIT_EVENT;
+        }
+        else if (groupByLabel === 'Query') {
+            groupBy = WaitEventClassification.QUERY_ID;
+        }
+        else if (groupByLabel === 'Client IP') {
+            groupBy = WaitEventClassification.CLIENT_NODE_IP;
+        }
+        if (((_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.category) &&
+            ((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) !== AnomalyCategory.DB) {
+            var graphParamsCopy = JSON.parse(JSON.stringify(graphRequestParams));
+            var ashGraph_1 = graphParamsCopy === null || graphParamsCopy === void 0 ? void 0 : graphParamsCopy.find(function (queryParams, idx) {
+                return idx > 0 && queryParams.name === (metricData === null || metricData === void 0 ? void 0 : metricData.name);
+            });
+            if (ashGraph_1) {
+                ashGraph_1.groupBy = [groupBy];
+            }
+            graphParamsCopy.map(function (obj, paramsIdx) {
+                if (paramsIdx > 0 && obj.name === (metricData === null || metricData === void 0 ? void 0 : metricData.name)) {
+                    return ashGraph_1;
+                }
+                return obj;
+            });
+            setGraphRequestParams(graphParamsCopy);
+            fetchAnomalyGraphs.mutate(graphParamsCopy);
+        }
+    };
+    useEffect(function () {
+        var _a;
+        if (previousMetricMeasure && previousMetricMeasure !== metricMeasure) {
+            setRCAGraphResponseData(null);
+        }
+        var graphParamsCopy = JSON.parse(JSON.stringify(graphRequestParams));
+        var clusterDetails = getClusterDetails();
+        var payload = getQueryParams(false, false, 0, clusterDetails, graphParamsCopy, __assign(__assign({}, urlParams), { type: (_a = urlParams.type) !== null && _a !== void 0 ? _a : null }));
+        var actualQueryParams = payload !== null && payload !== void 0 ? payload : graphRequestParams;
+        setGraphRequestParams(actualQueryParams);
+        fetchAnomalyGraphs.mutate(actualQueryParams);
+    }, [metricMeasure, startTime, endTime, region, cluster, zone, node, outlierType, numNodes]);
+    var fetchAnomalyGraphs = useMutation({
+        // @ts-ignore
+        mutationKey: ['fetchAnomalyGraphs'],
+        mutationFn: function (params) {
+            return PerfAdvisorAPI.fetchGraphs(universeUuid, params, apiUrl, 'fetchAnomalyGraphs');
+        },
+        onSuccess: function (data) {
+            setRCAGraphResponseData(data);
+        },
+        onError: function (error) {
+            console.error('Failed to fetch RCA graphs', error);
+        }
+    });
+    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, { 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)) }));
+    };
+    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
+    useEffect(function () {
+        chartInstancesRef.current = [];
+    }, [metricMeasure]);
+    // Callback to register chart instance from each child
+    var registerChartInstance = function (instance, index) {
+        chartInstancesRef.current[index] = instance;
+    };
+    // Connect axis pointer after charts are registered
+    useEffect(function () {
+        if (fetchAnomalyGraphs.isSuccess && RCAGraphResponseData && RCAGraphResponseData.length > 0) {
+            connect(chartInstancesRef.current);
+        }
+        return function () {
+            disconnect(chartInstancesRef.current);
+        };
+    }, [fetchAnomalyGraphs.isSuccess, RCAGraphResponseData, selectedTab]);
+    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, { 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, { 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, { 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) {
+                                                    var _a, _b, _c;
+                                                    var metricData = RCAGraphResponseData === null || RCAGraphResponseData === void 0 ? void 0 : RCAGraphResponseData.find(function (data, graphIdx) {
+                                                        return (graphIdx > 0 &&
+                                                            (data === null || data === void 0 ? void 0 : data.name) === metricName &&
+                                                            item.index.includes(graphIdx));
+                                                    });
+                                                    var isOnlyReason = ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) === 1;
+                                                    var shouldShowGroupbyOperations = (_b = item.groupByControl) === null || _b === void 0 ? void 0 : _b[0];
+                                                    if (isNonEmptyString((_c = metricData === null || metricData === void 0 ? void 0 : metricData.errorMessage) !== null && _c !== void 0 ? _c : '')) {
+                                                        return jsx(Box$1, {});
+                                                    }
+                                                    else {
+                                                        var operations = getOperations(metricMeasure, metricData, GraphType.MULTI_SUPPORTING, shouldShowGroupbyOperations, amomalyGraphRequestParams);
+                                                        return (jsx(Box$1, { style: {
+                                                                border: '1px solid #E9EEF2',
+                                                                borderRadius: '8px',
+                                                                marginRight: isOnlyReason ? '0px' : '16px'
+                                                            }, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
+                                                                ? GraphType.SINGLE_SUPPORTING
+                                                                : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) }));
+                                                    }
+                                                }) })] })) }, recIndex));
+                            })] })) }))] }) }));
+};
+
+/** `Object#toString` result references. */
+var symbolTag = '[object Symbol]';
+
+/**
+ * Checks if `value` is classified as a `Symbol` primitive or object.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+ * @example
+ *
+ * _.isSymbol(Symbol.iterator);
+ * // => true
+ *
+ * _.isSymbol('abc');
+ * // => false
+ */
+function isSymbol(value) {
+  return typeof value == 'symbol' ||
+    (isObjectLike(value) && baseGetTag(value) == symbolTag);
+}
+
+/** Used to match a single whitespace character. */
+var reWhitespace = /\s/;
+
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+function trimmedEndIndex(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+  return index;
+}
+
+/** Used to match leading whitespace. */
+var reTrimStart = /^\s+/;
+
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+function baseTrim(string) {
+  return string
+    ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+    : string;
+}
+
+/** Used as references for various `Number` constants. */
+var NAN = 0 / 0;
+
+/** Used to detect bad signed hexadecimal string values. */
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+/** Used to detect binary string values. */
+var reIsBinary = /^0b[01]+$/i;
+
+/** Used to detect octal string values. */
+var reIsOctal = /^0o[0-7]+$/i;
+
+/** Built-in method references without a dependency on `root`. */
+var freeParseInt = parseInt;
+
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+function toNumber(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+  if (isSymbol(value)) {
+    return NAN;
+  }
+  if (isObject$5(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$5(other) ? (other + '') : other;
+  }
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return (isBinary || reIsOctal.test(value))
+    ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+    : (reIsBadHex.test(value) ? NAN : +value);
+}
+
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+var now = function() {
+  return root$1.Date.now();
+};
+
+var now$1 = now;
+
+/** Error message constants. */
+var FUNC_ERROR_TEXT = 'Expected a function';
+
+/* Built-in method references for those with the same name as other `lodash` methods. */
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+function debounce(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+  wait = toNumber(wait) || 0;
+  if (isObject$5(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time;
+    // Start the timer for the trailing edge.
+    timerId = setTimeout(timerExpired, wait);
+    // Invoke the leading edge.
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+
+    return maxing
+      ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+      : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+    // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+    return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+      (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+  }
+
+  function timerExpired() {
+    var time = now$1();
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    }
+    // Restart the timer.
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined;
+
+    // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now$1());
+  }
+
+  function debounced() {
+    var time = now$1(),
+        isInvoking = shouldInvoke(time);
+
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+    return result;
+  }
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var TOP_MARGIN$1 = 10;
+var BOTTOM_MARGIN$1 = 10;
+var EMPTY_CATEGORY_NAME = 'EMPTY_EVENT';
+var QueryEventsChart = function (_a) {
+    var data = _a.data, maxEPS = _a.maxEPS, groupByOperation = _a.groupByOperation, _b = _a.isTabletAnomaly, isTabletAnomaly = _b === void 0 ? false : _b;
+    var chartRef = useRef(null);
+    var barHeight = 40;
+    useEffect(function () {
+        if (!chartRef.current)
+            return;
+        var chartInstance = init(chartRef.current);
+        var categories = data.map(function (entry) {
+            return groupByOperation === WaitEventClassification.WAIT_EVENT
+                ? entry.waitEvent
+                : entry.waitEventType;
+        });
+        // Calculate total used EPS
+        var totalUsed = data.reduce(function (sum, entry) { return sum + entry.eps; }, 0);
+        var emptySpace = Math.max(0, maxEPS - totalUsed);
+        var series = [];
+        // Add series for each category first (these will be on the left)
+        categories.forEach(function (category, index) {
+            var _a;
+            series.push({
+                name: category,
+                type: 'bar',
+                stack: 'total',
+                label: { show: false },
+                data: [data[index].eps],
+                itemStyle: {
+                    color: (_a = NAME_COLOR_MAPPING[category]) !== null && _a !== void 0 ? _a : COLORS[index]
+                }
+            });
+        });
+        // Add empty space series last (this will appear on the right after all colored segments)
+        if (emptySpace > 0) {
+            series.push({
+                name: EMPTY_CATEGORY_NAME,
+                type: 'bar',
+                stack: 'total',
+                label: { show: false },
+                data: [emptySpace],
+                itemStyle: {
+                    color: NAME_COLOR_MAPPING[EMPTY_CATEGORY_NAME]
+                },
+                silent: true,
+                tooltip: { show: false }
+            });
+        }
+        var option = {
+            animation: false,
+            grid: {
+                left: 0,
+                right: 0,
+                top: TOP_MARGIN$1,
+                bottom: BOTTOM_MARGIN$1,
+                containLabel: false
+            },
+            tooltip: {
+                trigger: 'item',
+                confine: false,
+                extraCssText: 'letter-spacing:0.5px; border:1px solid #D7DEE4; border-radius:8px; z-index:10000 !important;',
+                formatter: function (params) {
+                    var left = getLegendKey(params.color, params.seriesName);
+                    var right = getLegendValue(Number(params.value).toFixed(3));
+                    var rows = "<div style=\"\n                            display:grid;\n                            grid-template-columns: 1fr auto; /* left grows, right fits */\n                            column-gap:24px;                  /* \u2190 24px between columns */\n                            align-items:center;\n                            margin-bottom:6px;\n                          \">\n                            ".concat(left).concat(right, "\n                          </div>");
+                    return "<div style=\"letter-spacing:0.5px;\">".concat(rows, "</div>");
+                    // Mimic Plotly's 'x+name' behavior
+                    // return `${params.marker} ${params.seriesName}: ${params.value}`;
+                },
+                // backgroundColor: 'rgba(50, 50, 50, 0.8)',
+                textStyle: {
+                    fontSize: 11.5,
+                    color: '#0B1117',
+                    fontWeight: 400
+                }
+            },
+            xAxis: {
+                type: 'value',
+                show: false,
+                min: 0,
+                max: maxEPS
+            },
+            yAxis: {
+                type: 'category',
+                data: [''], // single row
+                show: false
+            },
+            series: series
+        };
+        chartInstance.setOption(option);
+        // Resize handling
+        var resizeObserver = new ResizeObserver(function () {
+            chartInstance.resize();
+        });
+        resizeObserver.observe(chartRef.current);
+        return function () {
+            resizeObserver.disconnect();
+            chartInstance.dispose();
         };
-        // New Anomaly APIs
-        this.fetchAnomalyGroups = function (universeUuid, startTime, endTime, anomalyType, getClusterDetails, apiUrl) {
-            if (anomalyType === void 0) { anomalyType = ''; }
-            var _a = getClusterDetails(), cluster = _a.cluster, region = _a.region, zone = _a.zone, node = _a.node;
-            var params = new URLSearchParams();
-            if (startTime) {
-                params.append('startTime', startTime);
-            }
-            if (endTime) {
-                params.append('endTime', endTime);
-            }
-            if (startTime === null && endTime === null) {
-                return {};
-            }
-            if (isNonEmptyString(anomalyType)) {
-                params.append('anomalyType', anomalyType);
-            }
-            if (isNonEmptyString(cluster) && cluster !== ALL) {
-                params.append('clusterUuids', cluster);
-            }
-            if (isNonEmptyString(region) && region !== ALL) {
-                params.append('regionCodes', region);
-            }
-            if (isNonEmptyString(zone) && zone !== ALL) {
-                params.append('azCodes', zone);
-            }
-            if (isNonEmptyString(node) && node !== ALL) {
-                params.append('instanceNames', node);
+    }, [data, groupByOperation, maxEPS]);
+    return (jsx("div", { className: "query-events-chart-container", ref: chartRef, style: {
+            height: "".concat(barHeight, "px"),
+            width: isTabletAnomaly ? '75%' : '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        } }));
+};
+
+var useStyles$h = makeStyles$1(function (theme) { return ({
+    itemsContainer: {
+        padding: theme.spacing(1, 0)
+    },
+    item: {
+        paddingLeft: theme.spacing(2),
+        '& label': {
+            height: '36px'
+        }
+    },
+    checkbox: {
+        '& .yb-MuiSvgIcon-root': {
+            width: '20px',
+            height: '20px'
+        }
+    }
+}); });
+var ColumnSelectorDrawer = function (_a) {
+    var _b;
+    _a.appName; var columns = _a.columns, hiddenColumns = _a.hiddenColumns, _c = _a.isDbLoadMetadataColumns, isDbLoadMetadataColumns = _c === void 0 ? false : _c, _d = _a.isTabletsMetadataColumns, isTabletsMetadataColumns = _d === void 0 ? false : _d, _e = _a.isNodeLoadMetadataColumns, isNodeLoadMetadataColumns = _e === void 0 ? false : _e, onColumnVisibilityChange = _a.onColumnVisibilityChange, close = _a.close;
+    var classes = useStyles$h();
+    var visibleStorageKey = VISIBLE_QUERY_METADATA_COLUMNS;
+    if (isTabletsMetadataColumns) {
+        visibleStorageKey = VISIBLE_TABLETS_METADATA_COLUMNS;
+    }
+    else if (isDbLoadMetadataColumns) {
+        visibleStorageKey = VISIBLE_DB_LOAD_METADATA_COLUMNS;
+    }
+    else if (isNodeLoadMetadataColumns) {
+        visibleStorageKey = VISIBLE_NODE_LOAD_METADATA_COLUMNS;
+    }
+    // Retrieve VISIBLE_QUERY_METADATA_COLUMNS from session storage if it exists
+    var storedVisibleColumns = JSON.parse((_b = sessionStorage.getItem(visibleStorageKey)) !== null && _b !== void 0 ? _b : '[]');
+    var defaultValues = columns.reduce(function (acc, column) {
+        var _a;
+        acc[column.name] =
+            storedVisibleColumns.length > 0
+                ? storedVisibleColumns.includes(column.name)
+                : (_a = column === null || column === void 0 ? void 0 : column.options) === null || _a === void 0 ? void 0 : _a.display;
+        return acc;
+    }, {});
+    var _f = useForm({ defaultValues: defaultValues }), control = _f.control, handleSubmit = _f.handleSubmit, reset = _f.reset;
+    useEffect(function () {
+        reset(defaultValues);
+    }, [columns, reset]);
+    var handleClose = function () {
+        close();
+    };
+    var onSubmit = function (data) {
+        var visibleMetadataColumns = [];
+        Object.keys(data).forEach(function (key) {
+            var isVisible = data[key];
+            var columnName = key;
+            onColumnVisibilityChange(columnName, isVisible);
+            if (isVisible) {
+                visibleMetadataColumns.push(columnName);
             }
-            var requestUrl = isNonEmptyString(apiUrl)
-                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups/by_type?").concat(params.toString())
-                : "/universe/".concat(universeUuid, "/anomaly_groups/by_type?").concat(params.toString());
-            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
-        };
-        this.fetchAnomalyGroupsByType = function (universeUuid, startTime, endTime, anomalyType, apiUrl) {
-            var requestUrl = isNonEmptyString(apiUrl)
-                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups?startTime=").concat(startTime, "&endTime=").concat(endTime, "&type=").concat(anomalyType)
-                : "/universe/".concat(universeUuid, "/anomaly_groups?startTime=").concat(startTime, "&endTime=").concat(endTime, "&type=").concat(anomalyType);
-            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
-        };
-        this.fetchAnomalyGroupById = function (universeUuid, anomalyGroupId, startTime, endTime, apiUrl) {
-            if (startTime === null && endTime === null) {
-                return {};
+        });
+        sessionStorage.setItem(visibleStorageKey, JSON.stringify(visibleMetadataColumns));
+        handleClose();
+    };
+    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
             }
-            var requestUrl = isNonEmptyString(apiUrl)
-                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/anomaly_groups/").concat(anomalyGroupId, "?startTime=").concat(startTime, "&endTime=").concat(endTime)
-                : "/universe/".concat(universeUuid, "/anomaly_groups/").concat(anomalyGroupId, "?startTime=").concat(startTime, "&endTime=").concat(endTime);
-            return axiosInstance.get(requestUrl).then(function (res) { return res.data; });
-        };
-        // Send telemetry events on successful click events
-        this.sendTelemetryEvent = function (universeUuid, payload, apiUrl) {
-            var requestUrl = isNonEmptyString(apiUrl)
-                ? "".concat(apiUrl, "/universe/").concat(universeUuid, "/ui_events")
-                : "/universe/".concat(universeUuid, "/ui_events");
-            return axiosInstance.post(requestUrl, payload).then(function (resp) { return resp.data; });
-        };
-    }
-    return ApiService;
-}());
-var PerfAdvisorAPI = new ApiService();
+        }, 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, { className: classes.item, children: jsx(YBCheckboxField, { name: column.name, label: column.label, control: control, dataTestId: column.name, className: classes.checkbox }) }, column.name));
+                }) }) }) }));
+};
 
-var img$f = "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";
-var InfoMessageIcon = img$f;
+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";
+var InfoMessageIcon = img$b;
 
 var _g$1;
-function _extends$i() { return _extends$i = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$i.apply(null, arguments); }
-const SvgPlus = props => /*#__PURE__*/React$1.createElement("svg", _extends$i({
+function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
+const SvgPlus = props => /*#__PURE__*/React$1.createElement("svg", _extends$h({
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24
@@ -77533,8 +77826,8 @@ const SvgPlus = props => /*#__PURE__*/React$1.createElement("svg", _extends$i({
 }))));
 
 var _g;
-function _extends$h() { return _extends$h = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$h.apply(null, arguments); }
-const SvgSearch = props => /*#__PURE__*/React$1.createElement("svg", _extends$h({
+function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
+const SvgSearch = props => /*#__PURE__*/React$1.createElement("svg", _extends$g({
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24
@@ -78034,176 +78327,7 @@ var QueryLevelTabletMetadata = function (_a) {
                                             } }, "AccessedTablets-".concat(sortBy, "-").concat(sortDirection))] }) })] })] })] }));
 };
 
-var _circle, _circle2, _circle3, _circle4, _circle5, _circle6, _circle7, _circle8, _circle9;
-function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
-const SvgLoading = props => /*#__PURE__*/React$1.createElement("svg", _extends$g({
-  xmlns: "http://www.w3.org/2000/svg",
-  style: {
-    display: "block",
-    shapeRendering: "auto",
-    backgroundPosition: "initial initial",
-    backgroundRepeat: "initial initial"
-  },
-  width: 24,
-  height: 24,
-  viewBox: "30 30 40 40",
-  preserveAspectRatio: "xMidYMid"
-}, props), _circle || (_circle = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 65,
-  cy: 50,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-1.8140589569160996s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-1.8140589569160996s"
-}))), _circle2 || (_circle2 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 61.491,
-  cy: 59.642,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-1.5873015873015872s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-1.5873015873015872s"
-}))), _circle3 || (_circle3 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 52.605,
-  cy: 64.772,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-1.3605442176870748s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-1.3605442176870748s"
-}))), _circle4 || (_circle4 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 42.5,
-  cy: 62.99,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-1.1337868480725624s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-1.1337868480725624s"
-}))), _circle5 || (_circle5 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 35.905,
-  cy: 55.13,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-0.9070294784580498s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-0.9070294784580498s"
-}))), _circle6 || (_circle6 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 35.905,
-  cy: 44.87,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-0.6802721088435374s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-0.6802721088435374s"
-}))), _circle7 || (_circle7 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 42.5,
-  cy: 37.01,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-0.4535147392290249s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-0.4535147392290249s"
-}))), _circle8 || (_circle8 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 52.605,
-  cy: 35.228,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "-0.22675736961451246s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "-0.22675736961451246s"
-}))), _circle9 || (_circle9 = /*#__PURE__*/React$1.createElement("circle", {
-  cx: 61.491,
-  cy: 40.358,
-  fill: "#bfcded",
-  r: 3
-}, /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "r",
-  values: "1.7999999999999998;1.7999999999999998;3;1.7999999999999998;1.7999999999999998",
-  dur: "2.0408163265306123s",
-  repeatCount: "indefinite",
-  begin: "0s"
-}), /*#__PURE__*/React$1.createElement("animate", {
-  attributeName: "fill",
-  values: "#bfcded;#bfcded;#2b59c3;#bfcded;#bfcded",
-  repeatCount: "indefinite",
-  dur: "2.0408163265306123s",
-  begin: "0s"
-}))));
-
-var YBStyledTab$2 = styled$1(YBTab)(function (_a) {
+var YBStyledTab$3 = styled$1(YBTab)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
@@ -78216,15 +78340,15 @@ var YBStyledTab$2 = styled$1(YBTab)(function (_a) {
     });
 });
 var SqlDrilldown = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    var metricMeasure = _a.metricMeasure, anomalyData = _a.anomalyData, apiUrl = _a.apiUrl, universeQueryStatsData = _a.universeQueryStatsData, appName = _a.appName, sqlTab = _a.sqlTab, timezone = _a.timezone, urlParams = _a.urlParams, dateTimeRange = _a.dateTimeRange, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var metricMeasure = _a.metricMeasure, anomalyData = _a.anomalyData, apiUrl = _a.apiUrl, universeQueryStatsData = _a.universeQueryStatsData, appName = _a.appName, sqlTab = _a.sqlTab, timezone = _a.timezone, urlParams = _a.urlParams, dateTimeRange = _a.dateTimeRange, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect;
     var classes = useHelperStyles();
     // Ref to store chart instances
     var chartInstancesRef = useRef([]);
-    var _o = useState(null), queryGraphData = _o[0], setQueryGraphData = _o[1];
-    var _p = useState([]), historicalQueryRequestParams = _p[0], setHistoricalQueryRequestParams = _p[1];
-    var _q = useState(SqlDrilldownTabs.PERFORMANCE_METRICS), sqlDrilldownTab = _q[0], setSqlDrilldownTab = _q[1];
-    var _r = getClusterDetails(), universeUuid = _r.universeUuid, cluster = _r.cluster, region = _r.region, zone = _r.zone, node = _r.node, numNodes = _r.numNodes, outlierType = _r.outlierType;
+    var _s = useState(null), queryGraphData = _s[0], setQueryGraphData = _s[1];
+    var _t = useState([]), historicalQueryRequestParams = _t[0], setHistoricalQueryRequestParams = _t[1];
+    var _u = useState(SqlDrilldownTabs.PERFORMANCE_METRICS), sqlDrilldownTab = _u[0], setSqlDrilldownTab = _u[1];
+    var _v = getClusterDetails(), universeUuid = _v.universeUuid, cluster = _v.cluster, region = _v.region, zone = _v.zone, node = _v.node, numNodes = _v.numNodes, outlierType = _v.outlierType;
     var onSelectAshLabel = function (groupByLabel, metricData, isHistoricalQueryView) {
         if (isHistoricalQueryView === void 0) { isHistoricalQueryView = false; }
         var groupBy = WaitEventClassification.WAIT_EVENT_COMPONENT;
@@ -78385,7 +78509,7 @@ var SqlDrilldown = function (_a) {
                                                     : 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, { pill: true, value: sqlDrilldownTab, onChange: handleSqlDrilldownTabChange, children: jsx(YBStyledTab$2, { 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) {
+                                }) }), !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, { id: "HistoricalQueryView-".concat(metricMeasure, "-").concat(index), children: jsx(Box$1, { style: {
@@ -78399,7 +78523,7 @@ var SqlDrilldown = function (_a) {
                                                     : 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 }) })] }));
+                                }) }))] }))] }), 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 = [
@@ -78407,7 +78531,7 @@ var DB_SELECTOR_OPTIONS = [
     { value: IO_TEXT, label: IO_TEXT },
     { value: CPU_TEXT, label: CPU_TEXT }
 ];
-var useStyles$h = makeStyles(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     dbSelectorBox: {
         gap: theme.spacing(2)
     }
@@ -78415,7 +78539,7 @@ var useStyles$h = makeStyles(function (theme) { return ({
 var DbLoadHeader = function (_a) {
     var _b;
     var outlierType = _a.outlierType, numNodes = _a.numNodes, waitEventType = _a.waitEventType, _c = _a.isDbClusterLoadView, isDbClusterLoadView = _c === void 0 ? true : _c, onChangeDbWaitEventType = _a.onChangeDbWaitEventType, onOutlierTypeSelected = _a.onOutlierTypeSelected, onNumNodesChanged = _a.onNumNodesChanged;
-    var classes = useStyles$h();
+    var classes = useStyles$g();
     var _d = useState(0), active = _d[0], setActive = _d[1];
     var getDefaultActiveIndex = function () {
         if (waitEventType === DB_WAIT_EVENT_TYPE_MAPPING.CPU.toUpperCase()) {
@@ -78457,7 +78581,7 @@ const SvgGroup = props => /*#__PURE__*/React$1.createElement("svg", _extends$f({
   strokeLinejoin: "round"
 })));
 
-var useStyles$g = makeStyles$1(function () { return ({
+var useStyles$f = makeStyles$1(function () { return ({
     selectBox: {
         width: '168px'
     },
@@ -78474,7 +78598,7 @@ var QueriesMetadata = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var dbWaitEventType = _a.dbWaitEventType, name = _a.name, apiUrl = _a.apiUrl, appName = _a.appName, startTime = _a.startTime, endTime = _a.endTime, universeUuid = _a.universeUuid, _l = _a.groupByOperation, groupByOperation = _l === void 0 ? WaitEventClassification.WAIT_EVENT_TYPE : _l, _m = _a.isDbLoadMetadata, isDbLoadMetadata = _m === void 0 ? false : _m, _o = _a.isNodeLoadMetadata, isNodeLoadMetadata = _o === void 0 ? false : _o, _p = _a.isTabletLoadMetadata, isTabletLoadMetadata = _p === void 0 ? false : _p, onSelectedQuery = _a.onSelectedQuery, onSetGroupByOperation = _a.onSetGroupByOperation, onNavigateToUrl = _a.onNavigateToUrl;
     var helperClasses = useHelperStyles();
-    var classes = useStyles$g();
+    var classes = useStyles$f();
     var codeBlockClasses = useCodeBlockStyles();
     var debouncedSearchHandlerRef = useRef(
     // Use debounce from lodash-es to debounce the search input not material-ui/core as it does not havwe cancel method
@@ -79531,16 +79655,16 @@ var NodeLoadMetadata = function (_a) {
                                             } }, "NodeLoad-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] }) })] })] })] }));
 };
 
-var img$e = "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";
-var ArrowLargeIcon = img$e;
+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";
+var ArrowLargeIcon = img$a;
 
-var img$d = "data:image/svg+xml,%3csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.5 1L12.6314 8.86863C12.2354 9.26465 12.0373 9.46265 11.809 9.53684C11.6082 9.6021 11.3918 9.6021 11.191 9.53684C10.9627 9.46265 10.7646 9.26465 10.3686 8.86863L7.63137 6.13137C7.23535 5.73535 7.03735 5.53735 6.80902 5.46316C6.60817 5.3979 6.39183 5.3979 6.19098 5.46316C5.96265 5.53735 5.76465 5.73535 5.36863 6.13137L0.5 11M20.5 1H13.5M20.5 1V8' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-var ArrowSmallIcon = img$d;
+var img$9 = "data:image/svg+xml,%3csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.5 1L12.6314 8.86863C12.2354 9.26465 12.0373 9.46265 11.809 9.53684C11.6082 9.6021 11.3918 9.6021 11.191 9.53684C10.9627 9.46265 10.7646 9.26465 10.3686 8.86863L7.63137 6.13137C7.23535 5.73535 7.03735 5.53735 6.80902 5.46316C6.60817 5.3979 6.39183 5.3979 6.19098 5.46316C5.96265 5.53735 5.76465 5.73535 5.36863 6.13137L0.5 11M20.5 1H13.5M20.5 1V8' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var ArrowSmallIcon = img$9;
 
-var img$c = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.8002 13.7616H4.48019C3.95091 13.7616 3.52019 13.3308 3.52019 12.8016C3.52019 12.2723 3.95091 11.8416 4.48019 11.8416H12.1602C12.3368 11.8416 12.4802 11.6982 12.4802 11.5216V3.20156C12.4802 2.319 11.7621 1.60156 10.8802 1.60156H4.48019C3.59827 1.60156 2.88019 2.319 2.88019 3.20156V12.8016C2.88019 13.6841 3.59827 14.4016 4.48019 14.4016H12.8002C12.9768 14.4016 13.1202 14.2582 13.1202 14.0816C13.1202 13.9049 12.9768 13.7616 12.8002 13.7616ZM3.52019 3.20156C3.52019 2.67228 3.95091 2.24156 4.48019 2.24156H10.8802C11.4095 2.24156 11.8402 2.67228 11.8402 3.20156V11.2016H4.48019C4.12051 11.2016 3.78771 11.3212 3.52019 11.5222V3.20156Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 6.08203H5.76006C5.58342 6.08203 5.44006 6.22539 5.44006 6.40203C5.44006 6.57867 5.58342 6.72203 5.76006 6.72203H9.60006C9.7767 6.72203 9.92006 6.57867 9.92006 6.40203C9.92006 6.22539 9.7767 6.08203 9.60006 6.08203Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 7.85938H5.76006C5.58342 7.85938 5.44006 8.00274 5.44006 8.17938C5.44006 8.35602 5.58342 8.49938 5.76006 8.49938H9.60006C9.7767 8.49938 9.92006 8.35602 9.92006 8.17938C9.92006 8.00274 9.7767 7.85938 9.60006 7.85938Z' fill='%232B59C3'/%3e%3cpath d='M9.6 4.30469H5.76C5.58336 4.30469 5.44 4.44805 5.44 4.62469C5.44 4.80133 5.58336 4.94469 5.76 4.94469H9.6C9.77664 4.94469 9.92 4.80133 9.92 4.62469C9.92 4.44805 9.77664 4.30469 9.6 4.30469Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 7.85938H5.76006C5.58342 7.85938 5.44006 8.00274 5.44006 8.17938C5.44006 8.35602 5.58342 8.49938 5.76006 8.49938H9.60006C9.7767 8.49938 9.92006 8.35602 9.92006 8.17938C9.92006 8.00274 9.7767 7.85938 9.60006 7.85938Z' fill='%232B59C3'/%3e%3c/svg%3e";
-var DocsIcon = img$c;
+var img$8 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.8002 13.7616H4.48019C3.95091 13.7616 3.52019 13.3308 3.52019 12.8016C3.52019 12.2723 3.95091 11.8416 4.48019 11.8416H12.1602C12.3368 11.8416 12.4802 11.6982 12.4802 11.5216V3.20156C12.4802 2.319 11.7621 1.60156 10.8802 1.60156H4.48019C3.59827 1.60156 2.88019 2.319 2.88019 3.20156V12.8016C2.88019 13.6841 3.59827 14.4016 4.48019 14.4016H12.8002C12.9768 14.4016 13.1202 14.2582 13.1202 14.0816C13.1202 13.9049 12.9768 13.7616 12.8002 13.7616ZM3.52019 3.20156C3.52019 2.67228 3.95091 2.24156 4.48019 2.24156H10.8802C11.4095 2.24156 11.8402 2.67228 11.8402 3.20156V11.2016H4.48019C4.12051 11.2016 3.78771 11.3212 3.52019 11.5222V3.20156Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 6.08203H5.76006C5.58342 6.08203 5.44006 6.22539 5.44006 6.40203C5.44006 6.57867 5.58342 6.72203 5.76006 6.72203H9.60006C9.7767 6.72203 9.92006 6.57867 9.92006 6.40203C9.92006 6.22539 9.7767 6.08203 9.60006 6.08203Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 7.85938H5.76006C5.58342 7.85938 5.44006 8.00274 5.44006 8.17938C5.44006 8.35602 5.58342 8.49938 5.76006 8.49938H9.60006C9.7767 8.49938 9.92006 8.35602 9.92006 8.17938C9.92006 8.00274 9.7767 7.85938 9.60006 7.85938Z' fill='%232B59C3'/%3e%3cpath d='M9.6 4.30469H5.76C5.58336 4.30469 5.44 4.44805 5.44 4.62469C5.44 4.80133 5.58336 4.94469 5.76 4.94469H9.6C9.77664 4.94469 9.92 4.80133 9.92 4.62469C9.92 4.44805 9.77664 4.30469 9.6 4.30469Z' fill='%232B59C3'/%3e%3cpath d='M9.60006 7.85938H5.76006C5.58342 7.85938 5.44006 8.00274 5.44006 8.17938C5.44006 8.35602 5.58342 8.49938 5.76006 8.49938H9.60006C9.7767 8.49938 9.92006 8.35602 9.92006 8.17938C9.92006 8.00274 9.7767 7.85938 9.60006 7.85938Z' fill='%232B59C3'/%3e%3c/svg%3e";
+var DocsIcon = img$8;
 
-var useStyles$f = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles$1(function (theme) { return ({
     messageBox: {
         width: '100%',
         height: '228px',
@@ -79583,7 +79707,7 @@ var DOC_LINK = [
 ];
 var ASHBanner = function (_a) {
     var isAshSupported = _a.isAshSupported;
-    var classes = useStyles$f();
+    var classes = useStyles$e();
     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 })] })] }));
 };
 
@@ -80070,11 +80194,11 @@ var generateEChartsOptions = function (overallMetrics, dbWaitEventType, isDbClus
     return options;
 };
 
-var img$b = "data:image/svg+xml,%3csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.599976 6.43334V14.6M5.93331 0.600006V14.6M11.2666 6.43334V14.6M16.6 0.600006V14.6' stroke='%232B59C3' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-var BarIcon = img$b;
+var img$7 = "data:image/svg+xml,%3csvg width='18' height='16' viewBox='0 0 18 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M0.599976 6.43334V14.6M5.93331 0.600006V14.6M11.2666 6.43334V14.6M16.6 0.600006V14.6' stroke='%232B59C3' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var BarIcon = img$7;
 
-var img$a = "data:image/svg+xml,%3csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M19.6 10.6L13.8724 4.62478C13.6553 4.39833 13.5468 4.28511 13.4159 4.22658C13.3003 4.17493 13.1729 4.15363 13.0464 4.16477C12.903 4.1774 12.7621 4.2489 12.4804 4.3919L7.7196 6.80811C7.43784 6.95111 7.29696 7.02261 7.15357 7.03524C7.027 7.04639 6.89966 7.02508 6.78409 6.97343C6.65315 6.91491 6.54462 6.80168 6.32755 6.57523L0.599976 0.600006' stroke='%230B1117' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
-var LineIcon = img$a;
+var img$6 = "data:image/svg+xml,%3csvg width='21' height='12' viewBox='0 0 21 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M19.6 10.6L13.8724 4.62478C13.6553 4.39833 13.5468 4.28511 13.4159 4.22658C13.3003 4.17493 13.1729 4.15363 13.0464 4.16477C12.903 4.1774 12.7621 4.2489 12.4804 4.3919L7.7196 6.80811C7.43784 6.95111 7.29696 7.02261 7.15357 7.03524C7.027 7.04639 6.89966 7.02508 6.78409 6.97343C6.65315 6.91491 6.54462 6.80168 6.32755 6.57523L0.599976 0.600006' stroke='%230B1117' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
+var LineIcon = img$6;
 
 use([
     install$3,
@@ -80088,7 +80212,7 @@ use([
     install$b
 ]);
 // ... (other useStyles and component setup remains the same)
-var useStyles$e = makeStyles(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     metricPanel: {
         position: 'relative',
         // overflow: 'hidden',
@@ -80170,7 +80294,7 @@ var CHART_TYPE_SELECTOR_OPTIONS = [
 var PerfAdvisorClusterLoad = function (_a) {
     var _b, _c, _d;
     var startTime = _a.startTime, endTime = _a.endTime, appName = _a.appName, metricKey = _a.metricKey, shouldAbbreviateTraceName = _a.shouldAbbreviateTraceName, groupByOperation = _a.groupByOperation, timezone = _a.timezone, universeUuid = _a.universeUuid, isAshEnabled = _a.isAshEnabled, isAshSupported = _a.isAshSupported, apiUrl = _a.apiUrl, dbWaitEventType = _a.dbWaitEventType, _e = _a.isDbClusterLoadView, isDbClusterLoadView = _e === void 0 ? false : _e, _f = _a.isNodeClusterLoadView, isNodeClusterLoadView = _f === void 0 ? false : _f, onEChartsDateSelect = _a.onEChartsDateSelect, onSetGroupByOperation = _a.onSetGroupByOperation, onFilterBarData = _a.onFilterBarData, getClusterDetails = _a.getClusterDetails;
-    var classes = useStyles$e();
+    var classes = useStyles$d();
     var helperClasses = useHelperStyles();
     // Use a ref to store the ECharts instance
     var chartInstance = useRef(null);
@@ -80437,11 +80561,11 @@ var PerfAdvisorClusterLoad = function (_a) {
 };
 
 var NodeDrilldown = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j;
-    var appName = _a.appName, dbWaitEventType = _a.dbWaitEventType, timezone = _a.timezone, apiUrl = _a.apiUrl, 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;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    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 _k = getClusterDetails(), universeUuid = _k.universeUuid, numNodes = _k.numNodes, outlierType = _k.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 })] }));
+    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, { 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) {
@@ -81302,19 +81426,37 @@ var PerfAdvisorGantChart = function (_a) {
                 } }, 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) {
+    var theme = _a.theme;
+    return ({
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacing(0.5, 1),
+        '& .yb-MuiTab-iconWrapper': {
+            marginTop: theme.spacing(0.5)
+        }
+    });
+});
 var OtherDrilldown = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
-    var metricMeasure = _a.metricMeasure, appName = _a.appName, timezone = _a.timezone, universeQueryData = _a.universeQueryData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, anomalyData = _a.anomalyData, gantChartData = _a.gantChartData, dateTimeRange = _a.dateTimeRange, urlParams = _a.urlParams, apiUrl = _a.apiUrl, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue;
+    var metricMeasure = _a.metricMeasure, appName = _a.appName, timezone = _a.timezone, universeQueryData = _a.universeQueryData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, anomalyData = _a.anomalyData, gantChartData = _a.gantChartData, dateTimeRange = _a.dateTimeRange, urlParams = _a.urlParams, apiUrl = _a.apiUrl, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue;
     // Ref to store chart instances
     var chartInstancesRef = useRef([]);
     var classes = useHelperStyles();
-    var _2 = useState(0), selectedTab = _2[0]; _2[1];
-    var _3 = useState(anomalyData), anomalyGantData = _3[0], setAnomalyGantData = _3[1];
-    var _4 = useState(null), RCAGraphResponseData = _4[0], setRCAGraphResponseData = _4[1];
-    var _5 = useState(amomalyGraphRequestParams), graphRequestParams = _5[0], setGraphRequestParams = _5[1];
-    var _6 = getClusterDetails(), universeUuid = _6.universeUuid, cluster = _6.cluster, region = _6.region, zone = _6.zone, node = _6.node, numNodes = _6.numNodes, outlierType = _6.outlierType;
+    var _2 = useState(false); _2[0]; _2[1];
+    var _3 = useState(0), selectedTab = _3[0], setSelectedTab = _3[1];
+    var _4 = useState(anomalyData), anomalyGantData = _4[0], setAnomalyGantData = _4[1];
+    var _5 = useState(null), RCAGraphResponseData = _5[0], setRCAGraphResponseData = _5[1];
+    var _6 = useState(amomalyGraphRequestParams), graphRequestParams = _6[0], setGraphRequestParams = _6[1];
+    var _7 = getClusterDetails(), universeUuid = _7.universeUuid, cluster = _7.cluster, region = _7.region, zone = _7.zone, node = _7.node, numNodes = _7.numNodes, outlierType = _7.outlierType;
     // Check previous props
     var previousMetricMeasure = usePrevious(metricMeasure);
+    var handleTabChange = function (event, newValue) {
+        var scrollY = window.scrollY; // Save scroll position
+        setSelectedTab(newValue);
+        setTimeout(function () { return window.scrollTo(0, scrollY); }, 0); // Restore after re-render
+    };
     var onSelectAshLabel = function (groupByLabel, metricData, isAdvancedView) {
         var _a, _b;
         var groupBy = WaitEventClassification.WAIT_EVENT_COMPONENT;
@@ -81388,6 +81530,7 @@ var OtherDrilldown = function (_a) {
                     return registerChartInstance(instance, index);
                 }, 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
     useEffect(function () {
         chartInstancesRef.current = [];
@@ -81432,10 +81575,42 @@ var OtherDrilldown = function (_a) {
                                     (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, { className: classes.rcaGantChartBox, children: jsx(PerfAdvisorGantChart, { universeUuid: universeUuid, apiUrl: apiUrl, 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, { 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.' }))] })))] })] }))] }) }));
+                                                : [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, { 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, { 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) {
+                                                        var _a, _b, _c;
+                                                        var metricData = RCAGraphResponseData === null || RCAGraphResponseData === void 0 ? void 0 : RCAGraphResponseData.find(function (data, graphIdx) {
+                                                            return (graphIdx > 0 &&
+                                                                (data === null || data === void 0 ? void 0 : data.name) === metricName &&
+                                                                item.index.includes(graphIdx));
+                                                        });
+                                                        var isOnlyReason = ((_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.length) === 1;
+                                                        var shouldShowGroupbyOperations = (_b = item.groupByControl) === null || _b === void 0 ? void 0 : _b[0];
+                                                        if (isNonEmptyString((_c = metricData === null || metricData === void 0 ? void 0 : metricData.errorMessage) !== null && _c !== void 0 ? _c : '')) {
+                                                            return jsx(Box$1, {});
+                                                        }
+                                                        else {
+                                                            var operations = getOperations(metricMeasure, metricData, GraphType.MULTI_SUPPORTING, shouldShowGroupbyOperations, amomalyGraphRequestParams);
+                                                            return (jsx(Box$1, { style: {
+                                                                    border: '1px solid #E9EEF2',
+                                                                    borderRadius: '8px',
+                                                                    marginRight: isOnlyReason ? '0px' : '16px'
+                                                                }, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, isOnlyReason
+                                                                    ? GraphType.SINGLE_SUPPORTING
+                                                                    : GraphType.MULTI_SUPPORTING, recIndex + index, item.title) }));
+                                                        }
+                                                    }) })] })) }, recIndex));
+                                })] }))] }))] }) }));
 };
 
-var useStyles$d = makeStyles$1(function (theme) { return ({
+var useStyles$c = makeStyles$1(function (theme) { return ({
     headerContainer: {
         height: '24px'
     },
@@ -81494,7 +81669,7 @@ var METADATA_LABELS = {
 var TabletLevelQueryMetadata = function (_a) {
     var anomalyTabletData = _a.anomalyTabletData, isHotTablet = _a.isHotTablet, universeUuid = _a.universeUuid, apiUrl = _a.apiUrl, appName = _a.appName, startTime = _a.startTime, endTime = _a.endTime, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
     var helperClasses = useHelperStyles();
-    var classes = useStyles$d();
+    var classes = useStyles$c();
     var _b = useState(WaitEventClassification.WAIT_EVENT_TYPE), groupByOperation = _b[0], setGroupByOperation = _b[1];
     var eps = anomalyTabletData.eps, events = anomalyTabletData.events, leaderNode = anomalyTabletData.leaderNode, followerNodes = anomalyTabletData.followerNodes, size = anomalyTabletData.size, totalEpsRatio = anomalyTabletData.totalEpsRatio, partition = anomalyTabletData.partition, tabletId = anomalyTabletData.tabletId;
     var onSetGroupByOperation = function (operation) {
@@ -81668,7 +81843,7 @@ var TABLETS_METADATA_LABELS = {
 };
 var TabletMetadata = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    var universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, startTime = _a.startTime, endTime = _a.endTime, getClusterDetails = _a.getClusterDetails, tableName = _a.tableName, dbName = _a.dbName, tabletId = _a.tabletId, isHotTablet = _a.isHotTablet, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
+    var universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, startTime = _a.startTime, endTime = _a.endTime, dateTimeRange = _a.dateTimeRange, getClusterDetails = _a.getClusterDetails, timezone = _a.timezone, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, metricMeasure = _a.metricMeasure, urlParams = _a.urlParams, tableName = _a.tableName, dbName = _a.dbName, tabletId = _a.tabletId, isHotTablet = _a.isHotTablet, anomalyData = _a.anomalyData, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl, onEChartsDateSelect = _a.onEChartsDateSelect;
     var helperClasses = useHelperStyles();
     var _l = useState([]), columns = _l[0], setColumns = _l[1];
     var _m = useState(false), isTabletsMetadataOptionsModalOpen = _m[0], setIsTabletsMetadataOptionsModalOpen = _m[1];
@@ -81919,11 +82094,10 @@ var TabletMetadata = function (_a) {
                     }); },
                     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: clsx(helperClasses.tabletNodeLoadMetadataTableCell, helperClasses.ellipsisText)
+                        className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        var displayValue = isNonEmptyString(value) ? value : '-';
-                        return (jsx(YBTooltip, { title: isNonEmptyString(value) ? value : '', placement: "top", arrow: true, children: jsx(Box$1, { className: helperClasses.ellipsisText, children: displayValue }) }));
+                        return isNonEmptyString(value) ? value : '-';
                     }
                 }
             },
@@ -81939,18 +82113,15 @@ var TabletMetadata = function (_a) {
                     setCellHeaderProps: function () { return ({
                         style: {
                             minWidth: '10%',
-                            maxWidth: '15%'
+                            maxWidth: '20%'
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     setCellProps: function () { return ({
-                        className: clsx(helperClasses.tabletNodeLoadMetadataTableCell, helperClasses.ellipsisText)
+                        className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        if (!isNonEmptyString(value)) {
-                            return '-';
-                        }
-                        return (jsx(YBTooltip, { title: value, placement: "top", arrow: true, children: jsx(Box$1, { className: helperClasses.ellipsisText, children: jsx(YBTag, { variant: "light", size: 'medium', children: value }) }) }));
+                        return (jsx(YBTag, { variant: "light", size: 'medium', children: value }));
                     }
                 }
             },
@@ -81966,22 +82137,16 @@ var TabletMetadata = function (_a) {
                     setCellHeaderProps: function () { return ({
                         style: {
                             minWidth: '10%',
-                            maxWidth: '15%'
+                            maxWidth: '20%'
                         },
                         className: clsx(helperClasses.tableHeaderCell, appName === AppName.WEB && helperClasses.tableBorder)
                     }); },
                     setCellProps: function () { return ({
-                        className: clsx(helperClasses.tabletNodeLoadMetadataTableCell, helperClasses.ellipsisText)
+                        className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        var _a;
-                        var firstNode = value === null || value === void 0 ? void 0 : value[0];
-                        var hasData = Array.isArray(value) && value.length > 0 && isNonEmptyString(firstNode);
-                        var allNodes = (_a = value === null || value === void 0 ? void 0 : value.join(', ')) !== null && _a !== void 0 ? _a : '';
-                        if (!hasData) {
-                            return '-';
-                        }
-                        return (jsx(YBTooltip, { title: allNodes, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.ellipsisText, display: "flex", alignItems: "center", style: { gap: '4px' }, children: [jsx(YBTag, { variant: "light", size: 'medium', children: firstNode }), (value === null || value === void 0 ? void 0 : value.length) >= 2 && (jsx(YBTag, { customSx: { marginLeft: '4px' }, variant: "light", size: 'medium', children: jsx("span", { children: "+".concat(value.length - 1) }) }))] }) }));
+                        var _a, _b, _c;
+                        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) }) }) }))] }));
                     }
                 }
             },
@@ -82170,22 +82335,22 @@ var TabletMetadata = function (_a) {
                                             customFooter: customFooter,
                                             manualSorting: true,
                                             state: tableState
-                                        } }, "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 })) })] }));
+                                        } }, "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) {
-    var appName = _a.appName, getClusterDetails = _a.getClusterDetails, apiUrl = _a.apiUrl, tabletTab = _a.tabletTab, startTime = _a.startTime, endTime = _a.endTime, isHotTablet = _a.isHotTablet, anomalyData = _a.anomalyData, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
+    var appName = _a.appName, metricMeasure = _a.metricMeasure, timezone = _a.timezone, getClusterDetails = _a.getClusterDetails, apiUrl = _a.apiUrl, urlParams = _a.urlParams, tabletTab = _a.tabletTab, dateTimeRange = _a.dateTimeRange, startTime = _a.startTime, endTime = _a.endTime, isHotTablet = _a.isHotTablet, anomalyData = _a.anomalyData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl, onEChartsDateSelect = _a.onEChartsDateSelect;
     var _b = getSqlAnomalyGroupParams(anomalyData), tableName = _b.tableName, dbName = _b.dbName, tabletId = _b.tabletId;
     var universeUuid = getClusterDetails().universeUuid;
-    return (jsx(Fragment, { children: tabletTab === TabletTabs.TABLET_OVERVIEW && (jsx(TabletMetadata, { appName: appName, getClusterDetails: getClusterDetails, universeUuid: universeUuid, apiUrl: apiUrl, startTime: startTime, endTime: endTime, tableName: tableName !== null && tableName !== void 0 ? tableName : null, dbName: dbName !== null && dbName !== void 0 ? dbName : null, tabletId: tabletId !== null && tabletId !== void 0 ? tabletId : null, isHotTablet: isHotTablet, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) }));
+    return (jsx(Fragment, { children: tabletTab === TabletTabs.TABLET_OVERVIEW && (jsx(TabletMetadata, { appName: appName, timezone: timezone, urlParams: urlParams, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, getClusterDetails: getClusterDetails, universeUuid: universeUuid, apiUrl: apiUrl, dateTimeRange: dateTimeRange, startTime: startTime, endTime: endTime, tableName: tableName !== null && tableName !== void 0 ? tableName : null, dbName: dbName !== null && dbName !== void 0 ? dbName : null, tabletId: tabletId !== null && tabletId !== void 0 ? tabletId : null, isHotTablet: isHotTablet, anomalyData: anomalyData, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl, onEChartsDateSelect: onEChartsDateSelect })) }));
 };
 
 var AnomalyRouter = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-    var metricMeasure = _a.metricMeasure, appName = _a.appName, timezone = _a.timezone, universeQueryStatsData = _a.universeQueryStatsData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams; _a.formattedAnomalyRca; var anomalyData = _a.anomalyData, gantChartData = _a.gantChartData, dateTimeRange = _a.dateTimeRange, urlParams = _a.urlParams, apiUrl = _a.apiUrl, sqlTab = _a.sqlTab, tabletTab = _a.tabletTab, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onOutlierTypeSelected = _a.onOutlierTypeSelected, onNumNodesChanged = _a.onNumNodesChanged, onNavigateToUrl = _a.onNavigateToUrl;
-    var _t = useState([]); _t[0]; var setFilteredLegends = _t[1];
-    var _u = useState(ALL.toUpperCase()), dbWaitEventType = _u[0], setDbWaitEventType = _u[1];
-    var _v = useState(GROUP_BY_OPERATIONS[0]), groupByOperation = _v[0], setGroupByOperation = _v[1];
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var metricMeasure = _a.metricMeasure, appName = _a.appName, timezone = _a.timezone, universeQueryStatsData = _a.universeQueryStatsData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, formattedAnomalyRca = _a.formattedAnomalyRca, anomalyData = _a.anomalyData, gantChartData = _a.gantChartData, dateTimeRange = _a.dateTimeRange, urlParams = _a.urlParams, apiUrl = _a.apiUrl, sqlTab = _a.sqlTab, tabletTab = _a.tabletTab, getClusterDetails = _a.getClusterDetails, onEChartsDateSelect = _a.onEChartsDateSelect, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onOutlierTypeSelected = _a.onOutlierTypeSelected, onNumNodesChanged = _a.onNumNodesChanged, onNavigateToUrl = _a.onNavigateToUrl;
+    var _v = useState([]); _v[0]; var setFilteredLegends = _v[1];
+    var _w = useState(ALL.toUpperCase()), dbWaitEventType = _w[0], setDbWaitEventType = _w[1];
+    var _x = useState(GROUP_BY_OPERATIONS[0]), groupByOperation = _x[0], setGroupByOperation = _x[1];
     var onFilterBarData = function (data) {
         setFilteredLegends(data);
     };
@@ -82202,234 +82367,15 @@ var AnomalyRouter = function (_a) {
             onChangeDbWaitEventType(DB_WAIT_EVENT_TYPE_MAPPING.CPU.toUpperCase());
         }
     }, [anomalyData]);
-    return (jsxs(Box$1, { children: [((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) === AnomalyCategory.SQL && (jsx(SqlDrilldown, { metricMeasure: metricMeasure, apiUrl: apiUrl, anomalyData: anomalyData, universeQueryStatsData: universeQueryStatsData, appName: appName, timezone: timezone, urlParams: urlParams, dateTimeRange: dateTimeRange, sqlTab: sqlTab, getClusterDetails: getClusterDetails, onEChartsDateSelect: onEChartsDateSelect })), ((_c = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.category) === AnomalyCategory.NODE &&
-                ((_d = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _d === void 0 ? void 0 : _d.type) !== AnomalyType.SLOW_DISKS && (jsx(NodeDrilldown, { appName: appName, dateTimeRange: dateTimeRange, groupByOperation: groupByOperation, onSetGroupByOperation: onSetGroupByOperation, onFilterBarData: onFilterBarData, onChangeDbWaitEventType: onChangeDbWaitEventType, dbWaitEventType: dbWaitEventType, timezone: timezone, apiUrl: apiUrl, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onEChartsDateSelect: onEChartsDateSelect, onNavigateToUrl: onNavigateToUrl })), ((_e = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _e === void 0 ? void 0 : _e.category) === AnomalyCategory.APP && (jsx(NodeDrilldown, { appName: appName, dateTimeRange: dateTimeRange, groupByOperation: groupByOperation, onSetGroupByOperation: onSetGroupByOperation, onFilterBarData: onFilterBarData, onChangeDbWaitEventType: onChangeDbWaitEventType, dbWaitEventType: dbWaitEventType, timezone: timezone, apiUrl: apiUrl, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onEChartsDateSelect: onEChartsDateSelect, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })), ((_f = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _f === void 0 ? void 0 : _f.category) === AnomalyCategory.DB &&
+    return (jsxs(Box$1, { children: [((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) === AnomalyCategory.SQL && (jsx(SqlDrilldown, { metricMeasure: metricMeasure, apiUrl: apiUrl, anomalyData: anomalyData, universeQueryStatsData: universeQueryStatsData, appName: appName, timezone: timezone, urlParams: urlParams, dateTimeRange: dateTimeRange, sqlTab: sqlTab, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, getClusterDetails: getClusterDetails, onEChartsDateSelect: onEChartsDateSelect })), ((_c = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.category) === AnomalyCategory.NODE &&
+                ((_d = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _d === void 0 ? void 0 : _d.type) !== AnomalyType.SLOW_DISKS && (jsx(NodeDrilldown, { appName: appName, dateTimeRange: dateTimeRange, groupByOperation: groupByOperation, onSetGroupByOperation: onSetGroupByOperation, onFilterBarData: onFilterBarData, onChangeDbWaitEventType: onChangeDbWaitEventType, dbWaitEventType: dbWaitEventType, timezone: timezone, apiUrl: apiUrl, anomalyData: anomalyData, urlParams: urlParams, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onEChartsDateSelect: onEChartsDateSelect, onNavigateToUrl: onNavigateToUrl })), ((_e = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _e === void 0 ? void 0 : _e.category) === AnomalyCategory.APP && (jsx(NodeDrilldown, { appName: appName, dateTimeRange: dateTimeRange, groupByOperation: groupByOperation, onSetGroupByOperation: onSetGroupByOperation, onFilterBarData: onFilterBarData, onChangeDbWaitEventType: onChangeDbWaitEventType, dbWaitEventType: dbWaitEventType, timezone: timezone, apiUrl: apiUrl, anomalyData: anomalyData, urlParams: urlParams, metricMeasure: metricMeasure, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, getClusterDetails: getClusterDetails, onOutlierTypeSelected: onOutlierTypeSelected, onNumNodesChanged: onNumNodesChanged, onEChartsDateSelect: onEChartsDateSelect, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })), ((_f = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _f === void 0 ? void 0 : _f.category) === AnomalyCategory.DB &&
                 (((_g = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _g === void 0 ? void 0 : _g.type) === AnomalyType.HOT_TABLET ||
-                    ((_h = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _h === void 0 ? void 0 : _h.type) === AnomalyType.LARGE_TABLET) && (jsx(TabletDrilldown, { appName: appName, getClusterDetails: getClusterDetails, apiUrl: apiUrl, 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: anomalyData, isHotTablet: ((_o = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _o === void 0 ? void 0 : _o.type) === AnomalyType.HOT_TABLET, tabletTab: tabletTab, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })), ((((_p = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _p === void 0 ? void 0 : _p.category) === AnomalyCategory.DB &&
-                ((_q = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _q === void 0 ? void 0 : _q.type) === AnomalyType.RANGE_SHARDING) ||
-                (((_r = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _r === void 0 ? void 0 : _r.category) === AnomalyCategory.NODE &&
-                    ((_s = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _s === void 0 ? void 0 : _s.type) === AnomalyType.SLOW_DISKS)) && (jsx(OtherDrilldown, { metricMeasure: metricMeasure, appName: appName, dateTimeRange: dateTimeRange, timezone: timezone, universeQueryData: universeQueryStatsData, amomalyGraphRequestParams: amomalyGraphRequestParams, apiUrl: apiUrl, anomalyData: anomalyData, gantChartData: gantChartData, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, urlParams: urlParams, getClusterDetails: getClusterDetails }))] }));
-};
-
-var img$9 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.04222 3.39755C8.5722 2.86774 9.43119 2.86788 9.96117 3.39755L10.6409 4.07724C10.8483 4.28467 10.9651 4.56608 10.9651 4.85947C10.965 5.09301 10.8918 5.32043 10.7551 5.50888L10.6682 5.6124C10.6215 5.66128 10.6106 5.68877 10.6106 5.71689C10.6107 5.74468 10.6213 5.77136 10.6409 5.79111L14.2473 9.39755C14.3143 9.46457 14.4055 9.50202 14.5002 9.50204H17.219C17.5787 9.50222 17.9236 9.64524 18.178 9.89951L18.6067 10.3282C19.1365 10.8582 19.1364 11.7172 18.6067 12.2472L15.7092 15.1451L20.8533 20.2892L20.9112 20.3585C21.0462 20.5533 21.0269 20.8227 20.8533 20.9963C20.658 21.1916 20.3415 21.1916 20.1462 20.9963L15.0021 15.8522L12.1047 18.7501C11.5748 19.2798 10.7158 19.2795 10.1858 18.7501L9.75707 18.3214C9.50259 18.067 9.35968 17.7213 9.35961 17.3614V14.6436C9.35959 14.5491 9.3211 14.4587 9.25414 14.3917L5.64867 10.7852C5.62848 10.765 5.60147 10.7541 5.57347 10.754C5.55115 10.754 5.52901 10.7605 5.51097 10.7735L5.46898 10.8116C5.29093 10.9919 5.00934 11.1085 4.71605 11.1085C4.42276 11.1084 4.14119 10.9917 3.93383 10.7843L3.25414 10.1046C2.72453 9.57462 2.72459 8.71556 3.25414 8.18564L8.04222 3.39755ZM14.6385 14.8018L11.3977 18.0431C11.2584 18.1823 11.0322 18.182 10.8928 18.0431L10.4641 17.6143C10.3971 17.5474 10.3596 17.456 10.3596 17.3614V14.6436C10.3595 14.2837 10.2156 13.9381 9.96117 13.6837L6.3557 10.0782C6.14858 9.87077 5.8676 9.75437 5.57445 9.754C5.34083 9.75376 5.11349 9.82744 4.89379 9.98837L4.79125 10.0772C4.77137 10.0971 4.74416 10.1085 4.71605 10.1085C4.68803 10.1084 4.66072 10.0971 4.64086 10.0772L3.96117 9.39755C3.82206 9.25815 3.82213 9.03202 3.96117 8.89267L8.74925 4.10458C8.88866 3.96522 9.11471 3.9654 9.25414 4.10458L9.93382 4.78427C9.95371 4.80415 9.96507 4.83135 9.96507 4.85947C9.96507 4.86628 9.96446 4.87306 9.96395 4.87881C9.96278 4.89191 9.96209 4.89972 9.96996 4.89072L9.93382 4.93466C9.72659 5.14205 9.61058 5.42369 9.61058 5.71689C9.61069 6.00993 9.72675 6.29091 9.93382 6.49814L13.5403 10.1046C13.7947 10.3591 14.1403 10.502 14.5002 10.502H17.219C17.3134 10.5022 17.4041 10.5398 17.4709 10.6065L17.8996 11.0352C18.039 11.1747 18.0389 11.4007 17.8996 11.5401L14.6587 14.7815C14.6553 14.7848 14.6519 14.7881 14.6485 14.7915C14.6451 14.7949 14.6417 14.7983 14.6385 14.8018Z' fill='%234E5F6D'/%3e%3c/svg%3e";
-var PinIcon = img$9;
-
-var img$8 = "data:image/svg+xml,%3csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.85355 5.85355C9.67999 6.02712 9.41056 6.0464 9.21569 5.91141L9.14645 5.85355L5.3535 2.06061C5.17994 1.8871 4.91059 1.86783 4.71578 2.00273L4.64655 2.06055L0.853554 5.85355C0.658292 6.04881 0.341708 6.04881 0.146446 5.85355C-0.0271206 5.67999 -0.0464048 5.41056 0.0885916 5.21569L0.146446 5.14645L3.9395 1.35339C4.48864 0.804418 5.35748 0.770107 5.94663 1.2505L6.06055 1.35345L9.85355 5.14645C10.0488 5.34171 10.0488 5.65829 9.85355 5.85355Z' fill='%236D7C88'/%3e%3c/svg%3e";
-var DownArrowIcon = img$8;
-
-var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e %3cg fill='none' fill-rule='evenodd'%3e %3cpolygon points='0 0 24 0 24 24 0 24'/%3e %3cpath fill='currentColor' d='M12.1740578%2c5.12506556 C15.4820453%2c5.18375443 18.1495789%2c7.85128805 18.2082961%2c11.1610977 C18.2387133%2c13.436696 16.9612465%2c15.5280468 14.9227532%2c16.5398856 L15.083%2c16.456 L15.0833333%2c18.0416667 C15.0833333%2c18.9136952 14.4136208%2c19.629304 13.560473%2c19.7022157 L13.4166667%2c19.7083333 L12.583%2c19.708 L12.5833333%2c21.1666667 C12.5833333%2c21.3967853 12.3967853%2c21.5833333 12.1666667%2c21.5833333 C11.9621168%2c21.5833333 11.791993%2c21.4359374 11.7567131%2c21.241563 L11.75%2c21.1666667 L11.75%2c19.708 L10.9166667%2c19.7083333 C10.0446381%2c19.7083333 9.32902931%2c19.0386208 9.25611766%2c18.185473 L9.25%2c18.0416667 L9.24975408%2c16.4569822 C7.30629027%2c15.4174 6.09677609%2c13.3784975 6.12506133%2c11.1628514 C6.18184747%2c7.85346767 8.84992176%2c5.1838123 12.1592713%2c5.12506556 L12.1592713%2c5.12506556 Z M14.25%2c16.583 L10.083%2c16.583 L10.0833333%2c18.0416667 C10.0833333%2c18.4665011 10.4012377%2c18.817085 10.8121351%2c18.8685072 L10.9166667%2c18.875 L13.4166667%2c18.875 C13.8415011%2c18.875 14.192085%2c18.5570957 14.2435072%2c18.1461982 L14.25%2c18.0416667 L14.25%2c16.583 Z M12.166%2c5.95766667 L11.9494155%2c5.9669341 C9.19374361%2c6.13087928 7.00606527%2c8.39184555 6.95829939%2c11.1753181 C6.93335801%2c13.1293036 8.03072034%2c14.9246063 9.7810898%2c15.7934494 L9.705%2c15.753 L9.707%2c15.753 L9.699%2c15.7496667 L11.75%2c15.749 L11.75%2c13.214 L9.99703884%2c11.4612945 C9.83432039%2c11.298576 9.83432039%2c11.0347573 9.99703884%2c10.8720388 C10.1394175%2c10.7296602 10.359201%2c10.7118629 10.5209309%2c10.8186468 L10.5862945%2c10.8720388 L12.167%2c12.4526667 L13.7470388%2c10.8720388 C13.9097573%2c10.7093204 14.173576%2c10.7093204 14.3362945%2c10.8720388 C14.4786731%2c11.0144175 14.4964705%2c11.234201 14.3896865%2c11.3959309 L14.3362945%2c11.4612945 L12.583%2c13.214 L12.583%2c15.749 L14.634%2c15.7496667 L14.7592441%2c15.6847261 C16.321701%2c14.8178192 17.3148422%2c13.192006 17.3728347%2c11.4076497 L17.3728347%2c11.4076497 L17.3750656%2c11.1740578 C17.3243367%2c8.3147327 15.0186006%2c6.00899667 12.166%2c5.95766667 L12.166%2c5.95766667 Z M4.66666667%2c10.75 C4.89678531%2c10.75 5.08333333%2c10.936548 5.08333333%2c11.1666667 C5.08333333%2c11.3712166 4.93593737%2c11.5413403 4.74156303%2c11.5766203 L4.66666667%2c11.5833333 L3.41666667%2c11.5833333 C3.18654802%2c11.5833333 3%2c11.3967853 3%2c11.1666667 C3%2c10.9621168 3.14739597%2c10.791993 3.34177031%2c10.7567131 L3.41666667%2c10.75 L4.66666667%2c10.75 Z M20.9166667%2c10.75 C21.1467853%2c10.75 21.3333333%2c10.936548 21.3333333%2c11.1666667 C21.3333333%2c11.3712166 21.1859374%2c11.5413403 20.991563%2c11.5766203 L20.9166667%2c11.5833333 L19.6666667%2c11.5833333 C19.436548%2c11.5833333 19.25%2c11.3967853 19.25%2c11.1666667 C19.25%2c10.9621168 19.397396%2c10.791993 19.5917703%2c10.7567131 L19.6666667%2c10.75 L20.9166667%2c10.75 Z M5.51394895%2c4.56414648 L5.5803637%2c4.6162251 L6.49703037%2c5.49705843 C6.66295966%2c5.6565014 6.66821787%2c5.92026774 6.5087749%2c6.08619703 C6.3692623%2c6.23138517 6.14987713%2c6.2535595 5.98605105%2c6.15002018 L5.9196363%2c6.09794157 L5.00296963%2c5.21710823 C4.83704034%2c5.05766526 4.83178213%2c4.79389893 4.9912251%2c4.62796963 C5.1307377%2c4.4827815 5.35012287%2c4.46060717 5.51394895%2c4.56414648 Z M19.3421082%2c4.62796963 C19.4816208%2c4.77315777 19.4950341%2c4.99325238 19.3850479%2c5.15282181 L19.3303637%2c5.21710823 L18.413697%2c6.09794157 C18.2477677%2c6.25738453 17.9840014%2c6.25212633 17.8245584%2c6.08619703 C17.6850458%2c5.9410089 17.6716326%2c5.72091428 17.7816188%2c5.56134486 L17.836303%2c5.49705843 L18.7529696%2c4.6162251 C18.9188989%2c4.45678213 19.1826653%2c4.46204034 19.3421082%2c4.62796963 Z M12.1666667%2c2 C12.3712166%2c2 12.5413403%2c2.14739597 12.5766203%2c2.34177031 L12.5833333%2c2.41666667 L12.5833333%2c3.66666667 C12.5833333%2c3.89678531 12.3967853%2c4.08333333 12.1666667%2c4.08333333 C11.9621168%2c4.08333333 11.791993%2c3.93593737 11.7567131%2c3.74156303 L11.75%2c3.66666667 L11.75%2c2.41666667 C11.75%2c2.18654802 11.936548%2c2 12.1666667%2c2 Z'/%3e %3c/g%3e%3c/svg%3e";
-var LightBulbIcon = img$7;
-
-var img$6 = "data:image/svg+xml,%3csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.2925 0.825396L6.75926 6.1142C6.36016 6.57981 5.63984 6.57981 5.24074 6.1142L0.707482 0.825396C0.42948 0.501059 0.659934 0 1.08711 0L10.9129 0C11.3401 0 11.5705 0.501059 11.2925 0.825396Z' fill='black'/%3e%3c/svg%3e";
-var ArrowDownwardIcon = img$6;
-
-var img$5 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle opacity='0.5' cx='12' cy='12' r='10.1' stroke='url(%23paint0_linear_3694_1224)' stroke-opacity='0.8' stroke-width='1.8'/%3e%3ccircle cx='12' cy='12.0002' r='1.81818' fill='%23ED36C7'/%3e%3ccircle cx='11.9995' cy='12.0003' r='5.36364' transform='rotate(-60 11.9995 12.0003)' stroke='url(%23paint1_linear_3694_1224)' stroke-width='2'/%3e%3cdefs%3e%3clinearGradient id='paint0_linear_3694_1224' x1='28.5' y1='7.50001' x2='22.2274' y2='27.7706' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0.0416667' stop-color='%23ED35EC'/%3e%3cstop offset='0.387036' stop-color='%23ED35C5'/%3e%3cstop offset='0.757473' stop-color='%237879F1'/%3e%3cstop offset='1' stop-color='%235E60F0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear_3694_1224' x1='17.9974' y1='23.3442' x2='5.01117' y2='22.7595' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0.0416667' stop-color='%23ED35EC'/%3e%3cstop offset='0.387036' stop-color='%23ED35C5'/%3e%3cstop offset='0.757473' stop-color='%237879F1'/%3e%3cstop offset='1' stop-color='%235E60F0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
-var InsightIndicatorIcon = img$5;
-
-var useStyles$c = makeStyles$1(function (theme) { return ({
-    accordion: {
-        borderRadius: theme.spacing(1),
-        marginBottom: theme.spacing(3),
-        backgroundColor: theme.palette.common.white,
-        border: "1px solid #CBCCFB",
-        boxShadow: 'none',
-        '&:before': {
-            display: 'none'
-        },
-        '&:not(.Mui-expanded)': {
-            boxShadow: '0px 4px 8px 0px #4F4FA414'
-        },
-        '&.Mui-expanded': {
-            margin: theme.spacing(3, 0, 3, 0)
-        }
-    },
-    accordionSummary: {
-        padding: theme.spacing(2),
-        height: '64px',
-        '& .MuiAccordionSummary-content': {
-            margin: 0,
-            alignItems: 'center',
-            '&.Mui-expanded': {
-                margin: 0
-            }
-        }
-    },
-    headerTitleContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-        gap: theme.spacing(1)
-    },
-    headerTitle: {
-        fontWeight: 600,
-        fontSize: '15px',
-        lineHeight: '20px'
-    },
-    accordionDetails: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: theme.spacing(0, 2, 2, 2)
-    },
-    expandIcon: {
-        padding: theme.spacing(0, 0.8)
-    },
-    itemContainer: {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: theme.spacing(1),
-        margin: theme.spacing(2.2, 1, 2.2, 1)
-    },
-    possibleCauseContainer: {
-        marginBottom: theme.spacing(2)
-    },
-    treeIconContainer: {
-        display: 'flex',
-        width: '20px',
-        height: '20px'
-    },
-    itemContentContainer: {
-        flex: 1,
-        minWidth: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(1)
-    },
-    itemTitle: {
-        fontWeight: 600,
-        fontSize: '13px',
-        lineHeight: '16px'
-    },
-    itemDescriptionContainer: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(1)
-    },
-    itemDescription: {
-        fontWeight: 400,
-        fontSize: '13px',
-        lineHeight: '20px',
-        color: theme.palette.grey[700]
-    },
-    itemTabsContainer: {
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    itemTabsHeaderContainer: {
-        display: 'flex',
-        flexDirection: 'row'
-    },
-    tabListContainer: {
-        width: '100%',
-        display: 'flex',
-        gap: theme.spacing(4),
-        flexDirection: 'column',
-        padding: theme.spacing(2),
-        backgroundColor: '#FBFCFD',
-        borderRadius: theme.spacing(1),
-        border: "1px solid ".concat(theme.palette.grey[200])
-    },
-    tabListItem: {
-        display: 'flex',
-        flexDirection: 'row',
-        gap: theme.spacing(1)
-    },
-    tabListItemIconContainer: {
-        display: 'flex',
-        width: '20px',
-        height: '20px',
-        flexShrink: 0,
-        '& img': {
-            color: theme.palette.grey[700]
-        }
-    },
-    tabListItemContentContainer: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.spacing(0.5)
-    },
-    tabListItemTitle: {
-        fontWeight: 600,
-        fontSize: '13px',
-        lineHeight: '16px',
-        color: theme.palette.grey[800]
-    },
-    tabListItemDesc: {
-        fontWeight: 400,
-        fontSize: '13px',
-        lineHeight: '20px',
-        color: theme.palette.grey[700]
-    },
-    itemTabsContentContainer: {
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column'
-    },
-    itemFooterContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        paddingRight: theme.spacing(1)
-    },
-    collapseSectionButton: {
-        '& .yb-MuiButton-endIcon': {
-            marginLeft: theme.spacing(1.2),
-            color: theme.palette.primary[600]
-        }
-    },
-    chip: {
-        alignItems: 'center',
-        whiteSpace: 'nowrap',
-        display: 'inline-flex',
-        padding: theme.spacing(0.5, 0.75),
-        borderRadius: theme.spacing(0.75),
-        border: "1px solid ".concat(theme.palette.grey[300])
-    },
-    chipText: {
-        fontWeight: 400,
-        lineHeight: '16px',
-        fontSize: '11.5px'
-    },
-    headerChipsContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row',
-        gap: theme.spacing(1),
-        marginLeft: theme.spacing(2)
-    }
-}); });
-var Chip = function (_a) {
-    var label = _a.label;
-    var classes = useStyles$c();
-    return (jsx(Box$1, { className: classes.chip, children: jsx(Typography$1, { variant: "body2", className: classes.chipText, children: label }) }));
-};
-var AnomalyPossibleCause = function (_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var anomalyGroupData = _a.anomalyGroupData, _h = _a.accordianExpanded, accordianExpanded = _h === void 0 ? false : _h;
-    var classes = useStyles$c();
-    var _j = useState(accordianExpanded), isAccordionExpanded = _j[0], setIsAccordionExpanded = _j[1];
-    var _k = useState(0), selectedTabIndex = _k[0], setSelectedTabIndex = _k[1];
-    var handleAccordionChange = function (_event, expanded) {
-        setIsAccordionExpanded(expanded);
-    };
-    var handleTabChange = function (_event, newValue) {
-        setSelectedTabIndex(newValue);
-    };
-    var data = getAnomalyPossibleCauseData(anomalyGroupData);
-    var selectedPossibleCause = (_b = data === null || data === void 0 ? void 0 : data.possibleCauses) === null || _b === void 0 ? void 0 : _b[selectedTabIndex];
-    var handleCollapseSection = function () {
-        setIsAccordionExpanded(!isAccordionExpanded);
-    };
-    // Show max 3 chips, then show "+X" for remaining
-    var MAX_CHIPS = 3;
-    var possibleCauses = (data === null || data === void 0 ? void 0 : data.possibleCauses) || [];
-    var visibleChips = possibleCauses.slice(0, MAX_CHIPS);
-    var remainingCount = Math.max(0, possibleCauses.length - MAX_CHIPS);
-    return (jsxs(Accordion, { className: classes.accordion, expanded: isAccordionExpanded, onChange: handleAccordionChange, children: [jsx(AccordionSummary, { className: classes.accordionSummary, expandIcon: jsx("img", { src: ArrowDownwardIcon, className: classes.expandIcon, alt: isAccordionExpanded ? 'Collapse' : 'Expand' }), children: jsxs(Box$1, { className: classes.headerTitleContainer, children: [jsx("img", { src: InsightIndicatorIcon, alt: "Insight Indicator" }), jsx(Typography$1, { variant: "body2", className: classes.headerTitle, children: "Anomaly Possible Cause" }), !isAccordionExpanded && (possibleCauses === null || possibleCauses === void 0 ? void 0 : possibleCauses.length) > 0 && (jsxs(Box$1, { className: classes.headerChipsContainer, children: [visibleChips === null || visibleChips === void 0 ? void 0 : visibleChips.map(function (possibleCause, index) { return (jsx(Chip, { label: possibleCause === null || possibleCause === void 0 ? void 0 : possibleCause.possibleCause }, index)); }), remainingCount > 0 && jsx(Chip, { label: "+".concat(remainingCount) })] }))] }) }), jsxs(AccordionDetails, { className: classes.accordionDetails, children: [jsxs(Box$1, { className: classes.itemContainer, children: [jsx(Box$1, { className: classes.treeIconContainer, children: jsx("img", { src: TreeIcon, alt: "Tree Icon" }) }), jsxs(Box$1, { className: classes.itemContentContainer, children: [jsx(Typography$1, { variant: "body2", className: classes.itemTitle, children: "Observation" }), jsx(Box$1, { className: classes.itemDescriptionContainer, children: jsx(Typography$1, { variant: "body2", className: classes.itemDescription, children: data === null || data === void 0 ? void 0 : data.observation }) })] })] }), jsxs(Box$1, { className: clsx(classes.itemContainer, classes.possibleCauseContainer), children: [jsx(Box$1, { className: classes.treeIconContainer, children: jsx("img", { src: TreeIcon, alt: "Tree Icon" }) }), jsxs(Box$1, { className: classes.itemContentContainer, children: [jsx(Typography$1, { variant: "body2", className: classes.itemTitle, children: "Possible Cause" }), jsx(Box$1, { className: classes.itemDescriptionContainer, children: !!(data === null || data === void 0 ? void 0 : data.possibleCauses) && ((_c = data === null || data === void 0 ? void 0 : data.possibleCauses) === null || _c === void 0 ? void 0 : _c.length) > 0 && (jsxs(Box$1, { className: classes.itemTabsContainer, children: [jsx(Box$1, { className: classes.itemTabsHeaderContainer, children: jsx(YBTabs, { pill: true, value: selectedTabIndex, onChange: handleTabChange, children: (_d = data === null || data === void 0 ? void 0 : data.possibleCauses) === null || _d === void 0 ? void 0 : _d.map(function (possibleCause, tabIndex) { return (jsx(YBTab, { value: tabIndex, label: possibleCause === null || possibleCause === void 0 ? void 0 : possibleCause.possibleCause }, tabIndex)); }) }) }), jsx(Box$1, { className: classes.itemTabsContentContainer, children: !!selectedPossibleCause && (jsxs(Box$1, { className: classes.tabListContainer, children: [!!(selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.possibleCauseDescription) && (jsxs(Box$1, { className: classes.tabListItem, children: [jsx(Box$1, { className: classes.tabListItemIconContainer, children: jsx("img", { src: PinIcon, alt: "description icon" }) }), jsxs(Box$1, { className: classes.tabListItemContentContainer, children: [jsx(Typography$1, { variant: "body2", className: classes.tabListItemTitle, children: "Description" }), jsx(Typography$1, { variant: "body2", className: classes.tabListItemDesc, children: selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.possibleCauseDescription })] })] })), !!(selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.troubleshootingRecommendations) &&
-                                                                ((_e = selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.troubleshootingRecommendations) === null || _e === void 0 ? void 0 : _e.length) > 0 &&
-                                                                ((_f = selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.troubleshootingRecommendations) === null || _f === void 0 ? void 0 : _f[0]) && (jsxs(Box$1, { className: classes.tabListItem, children: [jsx(Box$1, { className: classes.tabListItemIconContainer, children: jsx("img", { src: LightBulbIcon, alt: "recommendation icon" }) }), jsxs(Box$1, { className: classes.tabListItemContentContainer, children: [jsx(Typography$1, { variant: "body2", className: classes.tabListItemTitle, children: "Recommendation" }), jsx(Typography$1, { variant: "body2", className: classes.tabListItemDesc, children: (_g = selectedPossibleCause === null || selectedPossibleCause === void 0 ? void 0 : selectedPossibleCause.troubleshootingRecommendations) === null || _g === void 0 ? void 0 : _g[0] })] })] }))] })) })] })) })] })] }), jsx(Box$1, { className: classes.itemFooterContainer, children: jsx(YBButton, { size: "medium", variant: "ghost", onClick: handleCollapseSection, className: classes.collapseSectionButton, dataTestId: "AnomalyPossibleCause-CollapseSectionButton", endIcon: jsx("img", { src: DownArrowIcon, alt: "Collapse Icon" }), children: "Collapse Section" }) })] })] }));
+                    ((_h = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _h === void 0 ? void 0 : _h.type) === AnomalyType.LARGE_TABLET) && (jsx(TabletDrilldown, { appName: appName, metricMeasure: metricMeasure, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, timezone: timezone, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, 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: anomalyData, isHotTablet: ((_o = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _o === void 0 ? void 0 : _o.type) === AnomalyType.HOT_TABLET, tabletTab: tabletTab, urlParams: urlParams, onEChartsDateSelect: onEChartsDateSelect, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })), ((((_p = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _p === void 0 ? void 0 : _p.category) === AnomalyCategory.DB &&
+                (((_q = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _q === void 0 ? void 0 : _q.type) === AnomalyType.UNUSED_INDEX ||
+                    ((_r = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _r === void 0 ? void 0 : _r.type) === AnomalyType.REDUNDANT_INDEX ||
+                    ((_s = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _s === void 0 ? void 0 : _s.type) === AnomalyType.RANGE_SHARDING)) ||
+                (((_t = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _t === void 0 ? void 0 : _t.category) === AnomalyCategory.NODE &&
+                    ((_u = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _u === void 0 ? void 0 : _u.type) === AnomalyType.SLOW_DISKS)) && (jsx(OtherDrilldown, { metricMeasure: metricMeasure, appName: appName, dateTimeRange: dateTimeRange, timezone: timezone, universeQueryData: universeQueryStatsData, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, apiUrl: apiUrl, anomalyData: anomalyData, gantChartData: gantChartData, onEChartsDateSelect: onEChartsDateSelect, onSelectedIssue: onSelectedIssue, urlParams: urlParams, getClusterDetails: getClusterDetails }))] }));
 };
 
 var YBStyledTab$1 = styled$1(YBTab)(function (_a) {
@@ -82445,7 +82391,7 @@ var YBStyledTab$1 = styled$1(YBTab)(function (_a) {
     });
 });
 var ProcessGraphData = React__default.memo(function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var universeUuid = _a.universeUuid, universeData = _a.universeData, anomalyData = _a.anomalyData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, appName = _a.appName, timezone = _a.timezone, formattedAnomalyRca = _a.formattedAnomalyRca, apiUrl = _a.apiUrl, dbIdParam = _a.dbIdParam, isHistoricalQueryView = _a.isHistoricalQueryView, troubleshootUuid = _a.troubleshootUuid, queryIdParam = _a.queryIdParam, showStandaloneAnomalies = _a.showStandaloneAnomalies, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
     var helperClasses = useHelperStyles();
     // Get default values to be populated on page
@@ -82476,25 +82422,25 @@ var ProcessGraphData = React__default.memo(function (_a) {
         previousDate.setDate(previousDate.getDate() - 1);
     }
     // State variables
-    var _p = useState(true), showDetails = _p[0], setShowDetails = _p[1];
-    var _q = useState(ALL_REGIONS), clusterRegionItem = _q[0], setClusterRegionItem = _q[1];
-    var _r = useState(ALL_ZONES$1), zoneNodeItem = _r[0], setZoneNodeItem = _r[1];
-    var _s = useState(true), isPrimaryCluster = _s[0], setIsPrimaryCluster = _s[1];
-    var _t = useState(ALL), cluster = _t[0], setCluster = _t[1];
-    var _u = useState(ALL), region = _u[0], setRegion = _u[1];
-    var _v = useState(ALL), zone = _v[0], setZone = _v[1];
-    var _w = useState(ALL), node = _w[0], setNode = _w[1];
-    var _x = useState(anomalyMetricMeasure), metricMeasure = _x[0], setMetricMeasure = _x[1];
-    var _y = useState(anomalyOutlierType), outlierType = _y[0], setOutlierType = _y[1];
-    var _z = useState(TabletTabs.TABLET_OVERVIEW), tabletTab = _z[0], setTabletTab = _z[1];
-    var _0 = useState(SqlTabs.QUERY_OVERVIEW), sqlTab = _0[0], setSqlTab = _0[1];
+    var _m = useState(true), showDetails = _m[0], setShowDetails = _m[1];
+    var _o = useState(ALL_REGIONS), clusterRegionItem = _o[0], setClusterRegionItem = _o[1];
+    var _p = useState(ALL_ZONES$1), zoneNodeItem = _p[0], setZoneNodeItem = _p[1];
+    var _q = useState(true), isPrimaryCluster = _q[0], setIsPrimaryCluster = _q[1];
+    var _r = useState(ALL), cluster = _r[0], setCluster = _r[1];
+    var _s = useState(ALL), region = _s[0], setRegion = _s[1];
+    var _t = useState(ALL), zone = _t[0], setZone = _t[1];
+    var _u = useState(ALL), node = _u[0], setNode = _u[1];
+    var _v = useState(anomalyMetricMeasure), metricMeasure = _v[0], setMetricMeasure = _v[1];
+    var _w = useState(anomalyOutlierType), outlierType = _w[0], setOutlierType = _w[1];
+    var _x = useState(TabletTabs.TABLET_OVERVIEW), tabletTab = _x[0], setTabletTab = _x[1];
+    var _y = useState(SqlTabs.QUERY_OVERVIEW), sqlTab = _y[0], setSqlTab = _y[1];
     // 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 _1 = useState((_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.duration) !== null && _b !== void 0 ? _b : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _1[0], setFilterDuration = _1[1];
-    var _2 = useState(anomalyOutlierNumNodes), numNodes = _2[0], setNumNodes = _2[1];
-    var _3 = useState(null), universeQueryStatsData = _3[0], setUniverseQueryStatsData = _3[1];
-    var _4 = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _4[0], setDateTimeRange = _4[1];
-    var _5 = useState(null), anomalyGroupData = _5[0], setAnomalyGroupData = _5[1];
+    var _z = useState((_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.duration) !== null && _b !== void 0 ? _b : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _z[0], setFilterDuration = _z[1];
+    var _0 = useState(anomalyOutlierNumNodes), numNodes = _0[0], setNumNodes = _0[1];
+    var _1 = useState(null), universeQueryStatsData = _1[0], setUniverseQueryStatsData = _1[1];
+    var _2 = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _2[0], setDateTimeRange = _2[1];
+    var _3 = useState(null), anomalyGroupData = _3[0], setAnomalyGroupData = _3[1];
     var gantChartData = useQuery([
         QUERY_KEY.fetchAnomalyGroupsById,
         universeUuid,
@@ -82535,8 +82481,6 @@ var ProcessGraphData = React__default.memo(function (_a) {
             formattedEndDate: formattedEndDate
         };
     };
-    var isIndexAnomaly = ((_c = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _c === void 0 ? void 0 : _c.type) === AnomalyType.UNUSED_INDEX ||
-        ((_d = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _d === void 0 ? void 0 : _d.type) === AnomalyType.REDUNDANT_INDEX;
     var setDuration = function () {
         if (filterDuration !== TIME_FILTER_VALUES.CUSTOM) {
             var _a = getDateRange(filterDuration, today), formattedStartDate = _a.formattedStartDate, formattedEndDate = _a.formattedEndDate;
@@ -82636,7 +82580,7 @@ var ProcessGraphData = React__default.memo(function (_a) {
         }
         setTabletTab(newSubTab);
     };
-    var _6 = useQuery([QUERY_KEY.fetchQueryStats, universeUuid], function () {
+    var _4 = useQuery([QUERY_KEY.fetchQueryStats, universeUuid], function () {
         return PerfAdvisorAPI.fetchQueryStats(universeUuid, {
             // If we are navigating to queries drilldown via queries view, we will retireve DBID from URL
             // else if we are navigating via anomaly SQL view, we will retrieve it from anomalyData
@@ -82654,7 +82598,7 @@ var ProcessGraphData = React__default.memo(function (_a) {
             console.error('Failed to fetch query stats', error);
         },
         enabled: isHistoricalQueryView || (anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.category) === AnomalyCategory.SQL
-    }), universeQueryStatsLoading = _6.isLoading, universeQueryStatsError = _6.isError;
+    }), universeQueryStatsLoading = _4.isLoading, universeQueryStatsError = _4.isError;
     if (universeQueryStatsLoading) {
         return (jsx(Box$1, { mt: 2, className: helperClasses.loadingBox, children: jsx(SvgLoading, { className: clsx(helperClasses.icon, helperClasses.inProgressIcon) }) }));
     }
@@ -82672,18 +82616,17 @@ var ProcessGraphData = React__default.memo(function (_a) {
     });
     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, showStandaloneAnomalies: showStandaloneAnomalies, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, onSelectedIssue: isNonEmptyObject(anomalyData) ? onSelectedIssue : undefined, onSelectedQuery: onSelectedQuery, showDetails: showDetails, onShowDetails: onShowDetails, onNavigateToUrl: onNavigateToUrl }), (((_e = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _e === void 0 ? void 0 : _e.category) === AnomalyCategory.SQL ||
-                isHistoricalQueryView) && (jsx(YBTabs, { value: sqlTab, onChange: handleSqlTabChange, className: helperClasses.tabsContainer, children: jsx(YBStyledTab$1, { value: SqlTabs.QUERY_OVERVIEW, label: SqlTabs.QUERY_OVERVIEW }) })), ((_f = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _f === void 0 ? void 0 : _f.category) === AnomalyCategory.DB &&
+                isHistoricalQueryView: isHistoricalQueryView, showStandaloneAnomalies: showStandaloneAnomalies, 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, { 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 &&
-                (((_g = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _g === void 0 ? void 0 : _g.type) === AnomalyType.HOT_TABLET ||
-                    ((_h = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _h === void 0 ? void 0 : _h.type) === AnomalyType.LARGE_TABLET) && (jsx(YBTabs, { value: tabletTab, onChange: handleTabletTabChange, className: helperClasses.tabsContainer, children: jsx(YBStyledTab$1, { value: TabletTabs.TABLET_OVERVIEW, label: TabletTabs.TABLET_OVERVIEW }) })), !!anomalyGroupData && !isHistoricalQueryView && (jsx(AnomalyPossibleCause, { accordianExpanded: isIndexAnomaly, anomalyGroupData: anomalyGroupData })), jsx(MetadataHeader, { universeData: universeData, queryObject: queryObject, isHistoricalQueryView: isHistoricalQueryView, universeQueryStatsData: universeQueryStatsData, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, showDetails: showDetails, onShowDetails: onShowDetails }), !isIndexAnomaly && (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, showStandaloneAnomalies: showStandaloneAnomalies, onStartDateChange: onStartDateChange, onEndDateChange: onEndDateChange, onRefresh: onRefresh }) })), jsxs(Box$1, { style: {
+                (((_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, { 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, showStandaloneAnomalies: showStandaloneAnomalies, 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, onEChartsDateSelect: onEChartsDateSelect })] })), isNonEmptyObject(anomalyGroupData) && !isHistoricalQueryView && (jsxs(Fragment, { children: [!(((_j = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _j === void 0 ? void 0 : _j.category) === AnomalyCategory.APP ||
-                                isIndexAnomaly ||
-                                (((_k = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _k === void 0 ? void 0 : _k.category) === AnomalyCategory.NODE &&
-                                    ((_l = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _l === void 0 ? void 0 : _l.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: ((_m = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _m === void 0 ? void 0 : _m.type) !== AnomalyType.LARGE_TABLET &&
-                                    ((_o = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _o === void 0 ? void 0 : _o.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 })] }))] })] }));
+                }, 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 })] }))] })] }));
 });
 
 var MetricsAnalysisEntry = function (_a) {
@@ -83818,6 +83761,123 @@ var ProcessTopKData = React__default.memo(function (_a) {
             }, urlParams: urlParams, filterTrigger: filterTrigger, onEChartsDateSelect: onEChartsDateSelect, openSelectionModal: openSelectionModal, closeSelectionModal: closeSelectionModal, getClusterDetails: getClusterDetails, handleFilterMetrics: handleFilterMetrics }) }));
 });
 
+var img$5 = "data:image/svg+xml,%3csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 0.5C7 0.223857 7.22386 -3.39906e-07 7.5 -3.27835e-07C7.77614 -3.15765e-07 8 0.223857 8 0.5L8 11.2929ZM14.5 15C14.7761 15 15 15.2239 15 15.5C15 15.7761 14.7761 16 14.5 16L0.499999 16C0.223857 16 -6.89597e-07 15.7761 -6.77527e-07 15.5C-6.65456e-07 15.2239 0.223857 15 0.499999 15L14.5 15Z' fill='%232B59C3'/%3e%3c/svg%3e";
+var ExpandIcon = img$5;
+
+var img$4 = "data:image/svg+xml,%3csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4.70711L3.85355 7.85355C3.65829 8.04882 3.34171 8.04882 3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645L7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L11.8536 7.14645C12.0488 7.34171 12.0488 7.65829 11.8536 7.85355C11.6583 8.04882 11.3417 8.04882 11.1464 7.85355L8 4.70711L8 15.5C8 15.7761 7.77614 16 7.5 16C7.22386 16 7 15.7761 7 15.5L7 4.70711ZM0.5 1C0.223858 1 1.81543e-07 0.776142 1.84836e-07 0.5C1.88129e-07 0.223858 0.223858 2.66948e-09 0.5 5.96244e-09L14.5 1.72911e-07C14.7761 1.76204e-07 15 0.223858 15 0.5C15 0.776142 14.7761 1 14.5 1L0.5 1Z' fill='%232B59C3'/%3e%3c/svg%3e";
+var CollapseIcon = img$4;
+
+var img$3 = "data:image/svg+xml,%3csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.2925 0.825396L6.75926 6.1142C6.36016 6.57981 5.63984 6.57981 5.24074 6.1142L0.707482 0.825396C0.42948 0.501059 0.659934 0 1.08711 0L10.9129 0C11.3401 0 11.5705 0.501059 11.2925 0.825396Z' fill='black'/%3e%3c/svg%3e";
+var ArrowDownwardIcon = img$3;
+
+var useStyles$a = makeStyles$1(function (theme) { return ({
+    accordion: {
+        borderRadius: theme.spacing(1),
+        backgroundColor: theme.palette.common.white,
+        border: "1px solid ".concat(theme.palette.grey[200]),
+        boxShadow: 'none',
+        '&:before': {
+            display: 'none'
+        },
+        '&.Mui-expanded': {
+            margin: theme.spacing(2, 0, 0, 0)
+        }
+    },
+    accordionSummary: {
+        padding: theme.spacing(1.5, 2, 1, 2),
+        minHeight: 'auto',
+        '&.Mui-expanded': {
+            minHeight: 'auto'
+        },
+        '& .MuiAccordionSummary-content': {
+            margin: 0,
+            '&.Mui-expanded': {
+                margin: 0
+            }
+        }
+    },
+    accordionSummaryCollapsed: {
+        padding: theme.spacing(1.5, 2, 1.5, 2)
+    },
+    headerTitle: {
+        fontWeight: 600,
+        fontSize: '13px',
+        lineHeight: '16px'
+    },
+    accordionDetails: {
+        padding: theme.spacing(0, 2, 2, 2),
+        flexDirection: 'column'
+    },
+    expandIcon: {
+        padding: theme.spacing(0, 0.8)
+    },
+    expandChartButtonContainer: {
+        marginBottom: theme.spacing(1),
+        alignSelf: 'flex-end'
+    },
+    countText: {
+        fontWeight: 500,
+        fontSize: '11.5px',
+        lineHeight: '16px',
+        color: theme.palette.grey[700]
+    },
+    countTextContainer: {
+        height: '20px',
+        width: '20px',
+        borderRadius: '4px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginLeft: theme.spacing(1),
+        backgroundColor: theme.palette.grey[200]
+    },
+    headerTitleContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row'
+    }
+}); });
+var BackgroundJobs = function (_a) {
+    var _b, _c, _d;
+    var apiUrl = _a.apiUrl, endTime = _a.endTime, appName = _a.appName, startTime = _a.startTime, currentTab = _a.currentTab, universeUuid = _a.universeUuid, onSelectedIssue = _a.onSelectedIssue, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies;
+    var classes = useStyles$a();
+    var helperClasses = useHelperStyles();
+    var _e = useState(false), expandChart = _e[0], setExpandChart = _e[1];
+    var _f = useState(true), isAccordionExpanded = _f[0], setIsAccordionExpanded = _f[1];
+    var _g = useState(null), backgroundTasks = _g[0], setBackgroundTasks = _g[1];
+    var hasInitializedRef = useRef(false);
+    var fetchBackgroundTasks = useQuery([QUERY_KEY.fetchBackgroundTasks, universeUuid, startTime, endTime], function () { return PerfAdvisorAPI.fetchBackgroundTasks(universeUuid, startTime, endTime, null, apiUrl); }, {
+        onSuccess: function (data) {
+            var transformedData = transformBackgroundTasks(data);
+            setBackgroundTasks(transformedData);
+        }
+    });
+    var backgroundTasksFetchError = (_d = (_c = (_b = fetchBackgroundTasks === null || fetchBackgroundTasks === void 0 ? void 0 : fetchBackgroundTasks.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;
+    useEffect(function () {
+        if (backgroundTasks !== null && !hasInitializedRef.current) {
+            var hasTasks = (backgroundTasks === null || backgroundTasks === void 0 ? void 0 : backgroundTasks.groups) &&
+                Object.values(backgroundTasks.groups).some(function (categoryGroups) { return Object.keys(categoryGroups !== null && categoryGroups !== void 0 ? categoryGroups : {}).length > 0; });
+            setIsAccordionExpanded(hasTasks);
+            hasInitializedRef.current = true;
+        }
+    }, [backgroundTasks]);
+    var handleExpandChart = function () {
+        setExpandChart(!expandChart);
+    };
+    var handleAccordionChange = function (_event, expanded) {
+        setIsAccordionExpanded(expanded);
+    };
+    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, { 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, { universeUuid: universeUuid, apiUrl: apiUrl, 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" }) })))] })] }));
+};
+
 function _extends$d() {
   _extends$d = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -85065,16 +85125,10 @@ eventManager.on(2
   }
 });
 
-var img$4 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_436_182000)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 7.5C4 7.77614 3.77614 8 3.5 8C3.22386 8 3 7.77614 3 7.5V5.5C3 4.11929 4.11929 3 5.5 3H7.5C7.77614 3 8 3.22386 8 3.5C8 3.77614 7.77614 4 7.5 4H5.5C4.67157 4 4 4.67157 4 5.5V7.5ZM16.5 4C16.2239 4 16 3.77614 16 3.5C16 3.22386 16.2239 3 16.5 3H18.5C19.8807 3 21 4.11929 21 5.5V7.5C21 7.77614 20.7761 8 20.5 8C20.2239 8 20 7.77614 20 7.5V5.5C20 4.67157 19.3284 4 18.5 4H16.5ZM20 16.5C20 16.2239 20.2239 16 20.5 16C20.7761 16 21 16.2239 21 16.5V18.5C21 19.8807 19.8807 21 18.5 21H16.5C16.2239 21 16 20.7761 16 20.5C16 20.2239 16.2239 20 16.5 20H18.5C19.3284 20 20 19.3284 20 18.5V16.5ZM7.5 20C7.77614 20 8 20.2239 8 20.5C8 20.7761 7.77614 21 7.5 21H5.5C4.11929 21 3 19.8807 3 18.5V16.5C3 16.2239 3.22386 16 3.5 16C3.77614 16 4 16.2239 4 16.5V18.5C4 19.3284 4.67157 20 5.5 20H7.5Z' fill='white'/%3e%3cpath d='M12 7L12 9' stroke='white' stroke-linecap='round'/%3e%3cpath d='M12 15L12 17' stroke='white' stroke-linecap='round'/%3e%3cpath d='M7 12L9 12' stroke='white' stroke-linecap='round'/%3e%3cpath d='M15 12L17 12' stroke='white' stroke-linecap='round'/%3e%3ccircle cx='12' cy='12' r='3.5' stroke='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_436_182000'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-var ScanIcon = img$4;
-
-var img$3 = "data:image/svg+xml,%3csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 11.2929L11.1464 8.14645C11.3417 7.95118 11.6583 7.95118 11.8536 8.14645C12.0488 8.34171 12.0488 8.65829 11.8536 8.85355L7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L3.14645 8.85355C2.95118 8.65829 2.95118 8.34171 3.14645 8.14645C3.34171 7.95118 3.65829 7.95118 3.85355 8.14645L7 11.2929L7 0.5C7 0.223857 7.22386 -3.39906e-07 7.5 -3.27835e-07C7.77614 -3.15765e-07 8 0.223857 8 0.5L8 11.2929ZM14.5 15C14.7761 15 15 15.2239 15 15.5C15 15.7761 14.7761 16 14.5 16L0.499999 16C0.223857 16 -6.89597e-07 15.7761 -6.77527e-07 15.5C-6.65456e-07 15.2239 0.223857 15 0.499999 15L14.5 15Z' fill='%232B59C3'/%3e%3c/svg%3e";
-var ExpandIcon = img$3;
+var img$2 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_436_182000)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 7.5C4 7.77614 3.77614 8 3.5 8C3.22386 8 3 7.77614 3 7.5V5.5C3 4.11929 4.11929 3 5.5 3H7.5C7.77614 3 8 3.22386 8 3.5C8 3.77614 7.77614 4 7.5 4H5.5C4.67157 4 4 4.67157 4 5.5V7.5ZM16.5 4C16.2239 4 16 3.77614 16 3.5C16 3.22386 16.2239 3 16.5 3H18.5C19.8807 3 21 4.11929 21 5.5V7.5C21 7.77614 20.7761 8 20.5 8C20.2239 8 20 7.77614 20 7.5V5.5C20 4.67157 19.3284 4 18.5 4H16.5ZM20 16.5C20 16.2239 20.2239 16 20.5 16C20.7761 16 21 16.2239 21 16.5V18.5C21 19.8807 19.8807 21 18.5 21H16.5C16.2239 21 16 20.7761 16 20.5C16 20.2239 16.2239 20 16.5 20H18.5C19.3284 20 20 19.3284 20 18.5V16.5ZM7.5 20C7.77614 20 8 20.2239 8 20.5C8 20.7761 7.77614 21 7.5 21H5.5C4.11929 21 3 19.8807 3 18.5V16.5C3 16.2239 3.22386 16 3.5 16C3.77614 16 4 16.2239 4 16.5V18.5C4 19.3284 4.67157 20 5.5 20H7.5Z' fill='white'/%3e%3cpath d='M12 7L12 9' stroke='white' stroke-linecap='round'/%3e%3cpath d='M12 15L12 17' stroke='white' stroke-linecap='round'/%3e%3cpath d='M7 12L9 12' stroke='white' stroke-linecap='round'/%3e%3cpath d='M15 12L17 12' stroke='white' stroke-linecap='round'/%3e%3ccircle cx='12' cy='12' r='3.5' stroke='white'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_436_182000'%3e%3crect width='24' height='24' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+var ScanIcon = img$2;
 
-var img$2 = "data:image/svg+xml,%3csvg width='15' height='16' viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4.70711L3.85355 7.85355C3.65829 8.04882 3.34171 8.04882 3.14645 7.85355C2.95118 7.65829 2.95118 7.34171 3.14645 7.14645L7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L11.8536 7.14645C12.0488 7.34171 12.0488 7.65829 11.8536 7.85355C11.6583 8.04882 11.3417 8.04882 11.1464 7.85355L8 4.70711L8 15.5C8 15.7761 7.77614 16 7.5 16C7.22386 16 7 15.7761 7 15.5L7 4.70711ZM0.5 1C0.223858 1 1.81543e-07 0.776142 1.84836e-07 0.5C1.88129e-07 0.223858 0.223858 2.66948e-09 0.5 5.96244e-09L14.5 1.72911e-07C14.7761 1.76204e-07 15 0.223858 15 0.5C15 0.776142 14.7761 1 14.5 1L0.5 1Z' fill='%232B59C3'/%3e%3c/svg%3e";
-var CollapseIcon = img$2;
-
-var useStyles$a = makeStyles$1(function (theme) { return ({
+var useStyles$9 = makeStyles$1(function (theme) { return ({
     accordion: {
         borderRadius: theme.spacing(1),
         backgroundColor: theme.palette.common.white,
@@ -85131,7 +85185,7 @@ var useStyles$a = makeStyles$1(function (theme) { return ({
 var DetectedAnomalies = function (_a) {
     var _b, _c;
     var apiUrl = _a.apiUrl, appName = _a.appName, endTime = _a.endTime, currentTab = _a.currentTab, startTime = _a.startTime, universeUuid = _a.universeUuid, anomalyGroups = _a.anomalyGroups, onSelectedIssue = _a.onSelectedIssue, fetchAnomalyGroups = _a.fetchAnomalyGroups, anomalyGroupsFetchError = _a.anomalyGroupsFetchError, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies, onNavigateToUrl = _a.onNavigateToUrl;
-    var classes = useStyles$a();
+    var classes = useStyles$9();
     var helperClasses = useHelperStyles();
     var _d = useState(false), expandAll = _d[0], setExpandAll = _d[1];
     var _e = useState(true), isAccordionExpanded = _e[0], setIsAccordionExpanded = _e[1];
@@ -85176,7 +85230,7 @@ var DetectedAnomalies = function (_a) {
                         (isNonEmptyObject(anomalyGroups === null || anomalyGroups === void 0 ? void 0 : anomalyGroups.groups) ? (jsx(PerfAdvisorGantChart, { universeUuid: universeUuid, apiUrl: apiUrl, 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 ({
+var useStyles$8 = makeStyles$1(function (theme) { return ({
     dbLoadDataContainer: {
         border: '1px solid #E9EEF2',
         borderRadius: '8px',
@@ -85198,7 +85252,7 @@ var DB_METADATA_COLUMNS = {
 var DbLoadMetadata = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var dbWaitEventType = _a.dbWaitEventType, universeUuid = _a.universeUuid, apiUrl = _a.apiUrl, appName = _a.appName, startTime = _a.startTime, endTime = _a.endTime, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
-    var classes = useStyles$9();
+    var classes = useStyles$8();
     var helperClasses = useHelperStyles();
     // State Variables
     var _l = useState([]), databaseList = _l[0], setDatabaseList = _l[1];
@@ -85660,114 +85714,6 @@ var DbLoadMetadata = function (_a) {
                                 } }, "DbLoadMetadata-".concat(dbWaitEventType, "-").concat(sortBy, "-").concat(sortDirection)))] })] })] }));
 };
 
-var useStyles$8 = makeStyles$1(function (theme) { return ({
-    accordion: {
-        borderRadius: theme.spacing(1),
-        backgroundColor: theme.palette.common.white,
-        border: "1px solid ".concat(theme.palette.grey[200]),
-        boxShadow: 'none',
-        '&:before': {
-            display: 'none'
-        },
-        '&.Mui-expanded': {
-            margin: theme.spacing(2, 0, 0, 0)
-        }
-    },
-    accordionSummary: {
-        padding: theme.spacing(1.5, 2, 1, 2),
-        minHeight: 'auto',
-        '&.Mui-expanded': {
-            minHeight: 'auto'
-        },
-        '& .MuiAccordionSummary-content': {
-            margin: 0,
-            '&.Mui-expanded': {
-                margin: 0
-            }
-        }
-    },
-    accordionSummaryCollapsed: {
-        padding: theme.spacing(1.5, 2, 1.5, 2)
-    },
-    headerTitle: {
-        fontWeight: 600,
-        fontSize: '13px',
-        lineHeight: '16px'
-    },
-    accordionDetails: {
-        padding: theme.spacing(0, 2, 2, 2),
-        flexDirection: 'column'
-    },
-    expandIcon: {
-        padding: theme.spacing(0, 0.8)
-    },
-    expandChartButtonContainer: {
-        marginBottom: theme.spacing(1),
-        alignSelf: 'flex-end'
-    },
-    countText: {
-        fontWeight: 500,
-        fontSize: '11.5px',
-        lineHeight: '16px',
-        color: theme.palette.grey[700]
-    },
-    countTextContainer: {
-        height: '20px',
-        width: '20px',
-        borderRadius: '4px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginLeft: theme.spacing(1),
-        backgroundColor: theme.palette.grey[200]
-    },
-    headerTitleContainer: {
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'row'
-    }
-}); });
-var BackgroundJobs = function (_a) {
-    var _b, _c, _d;
-    var apiUrl = _a.apiUrl, endTime = _a.endTime, appName = _a.appName, startTime = _a.startTime, currentTab = _a.currentTab, universeUuid = _a.universeUuid, onSelectedIssue = _a.onSelectedIssue, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies;
-    var classes = useStyles$8();
-    var helperClasses = useHelperStyles();
-    var _e = useState(false), expandChart = _e[0], setExpandChart = _e[1];
-    var _f = useState(true), isAccordionExpanded = _f[0], setIsAccordionExpanded = _f[1];
-    var _g = useState(null), backgroundTasks = _g[0], setBackgroundTasks = _g[1];
-    var hasInitializedRef = useRef(false);
-    var fetchBackgroundTasks = useQuery([QUERY_KEY.fetchBackgroundTasks, universeUuid, startTime, endTime], function () { return PerfAdvisorAPI.fetchBackgroundTasks(universeUuid, startTime, endTime, null, apiUrl); }, {
-        onSuccess: function (data) {
-            var transformedData = transformBackgroundTasks(data);
-            setBackgroundTasks(transformedData);
-        }
-    });
-    var backgroundTasksFetchError = (_d = (_c = (_b = fetchBackgroundTasks === null || fetchBackgroundTasks === void 0 ? void 0 : fetchBackgroundTasks.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;
-    useEffect(function () {
-        if (backgroundTasks !== null && !hasInitializedRef.current) {
-            var hasTasks = (backgroundTasks === null || backgroundTasks === void 0 ? void 0 : backgroundTasks.groups) &&
-                Object.values(backgroundTasks.groups).some(function (categoryGroups) { return Object.keys(categoryGroups !== null && categoryGroups !== void 0 ? categoryGroups : {}).length > 0; });
-            setIsAccordionExpanded(hasTasks);
-            hasInitializedRef.current = true;
-        }
-    }, [backgroundTasks]);
-    var handleExpandChart = function () {
-        setExpandChart(!expandChart);
-    };
-    var handleAccordionChange = function (_event, expanded) {
-        setIsAccordionExpanded(expanded);
-    };
-    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, { 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, { universeUuid: universeUuid, apiUrl: apiUrl, 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";
 var QueriesIcon = img$1;
 
@@ -85843,7 +85789,7 @@ 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, 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 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, runtimeConfigs = _a.runtimeConfigs, 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().currentTab; };
@@ -85999,7 +85945,13 @@ var PerfAdvisorTabs = function (_a) {
             case InsightsTabs.INSIGHTS:
                 return jsx(Box$1, { mt: 0.5 });
             case InsightsTabs.CLUSTER_LOAD:
-                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)); }) }) }) }));
+                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) {
+                                if (!(runtimeConfigs === null || runtimeConfigs === void 0 ? void 0 : runtimeConfigs.showDbLoadView) &&
+                                    tab === ClusterLoadSubTabs.LOAD_BY_DATABASE) {
+                                    return null;
+                                }
+                                return (jsx(YBStyledTab, { "data-testid": "".concat(tab, "ClusterLoadSubTab"), value: tab, label: tab }, index));
+                            }) }) }) }));
             default:
                 return null;
         }
@@ -86081,7 +86033,8 @@ var PerfAdvisorTabs = function (_a) {
     var showQueryTypeSelector = currentTab !== InsightsTabs.METRICS;
     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 })] }) })), 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 })] }) })), !!(runtimeConfigs === null || runtimeConfigs === void 0 ? void 0 : runtimeConfigs.showBgTasksView) &&
+                        currentTab === InsightsTabs.CLUSTER_LOAD &&
                         clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD &&
                         clusterLoadOverallSubTab === ClusterLoadOverallTabs.QUERIES && (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: (_l = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _l !== void 0 ? _l : null, startTime: (_m = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _m !== void 0 ? _m : null, onClickShowMoreAnomalies: onClickShowMoreAnomalies }) })), clusterLoadOverallSubTab === ClusterLoadOverallTabs.QUERIES && (jsx(Box$1, { mt: 2, children: jsx(HistoricalQueryData, { universeUuid: universeUuid, groupByOperation: groupByOperation, apiUrl: apiUrl, startTime: (_o = startTime === null || startTime === void 0 ? void 0 : startTime.toISOString()) !== null && _o !== void 0 ? _o : null, endTime: (_p = endTime === null || endTime === void 0 ? void 0 : endTime.toISOString()) !== null && _p !== void 0 ? _p : 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.INSIGHTS ||
                 (currentTab === InsightsTabs.CLUSTER_LOAD &&
@@ -92397,7 +92350,7 @@ var ShowMoreAnomalies = function (_a) {
 
 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, _m = _a.showStandaloneAnomalies, showStandaloneAnomalies = _m === void 0 ? false : _m, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
+    var timezone = _a.timezone, universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, runtimeConfigs = _a.runtimeConfigs, _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');
@@ -92528,7 +92481,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, 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 }))] }) }))] }) }));
+                                        : 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, runtimeConfigs: runtimeConfigs, 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 ({