@yugabytedb/perf-advisor-ui 1.0.97 → 1.0.99

package/dist/esm/index.js

@@ -2655,7 +2655,7 @@ var RuntimeConfigType;
 })(RuntimeConfigType || (RuntimeConfigType = {}));
 var TransformedBackgroundTasksCategory;
 (function (TransformedBackgroundTasksCategory) {
-    TransformedBackgroundTasksCategory["RUNNING_BACKGROUND_JOBS"] = "Running Background Jobs";
+    TransformedBackgroundTasksCategory["ALL_BACKGROUND_JOBS"] = "All Background Jobs";
 })(TransformedBackgroundTasksCategory || (TransformedBackgroundTasksCategory = {}));
 var InsightsTabs;
 (function (InsightsTabs) {
@@ -3386,7 +3386,7 @@ var NAME_COLOR_MAPPING = {
     SQL: '#BB42BC',
     APP: '#2FB3FF',
     INFRA: '#507CE1',
-    BACKGROUND_JOBS: '#D7DEE4',
+    BACKGROUND_JOBS: '#97A5B0',
     // Source of data: https://github.com/yugabyte/yugabyte-db/blob/4f304d5aabe5b992b4d04e59f1e6096fa35233d9/docs/content/stable/explore/observability/active-session-history.md?plain=1#L121
     // YSQL Wait event types
     TableRead: '#966919', // Network or RPCWait
@@ -7076,7 +7076,6 @@ function cleanEscapedString(input) {
   return matched[1].replace(doubleQuoteRegExp, "'");
 }
 
-var index = 0;
 var formatData = function (data, appName) {
     var formattedData = (data === null || data === void 0 ? void 0 : data.universeDetails)
         ? formatUniverseDetails(data)
@@ -7304,6 +7303,22 @@ function getReadOnlyCluster(clusters) {
     }
     return null;
 }
+var getAnomalyMainGraphRequestParams = function (anomalyData) {
+    var _a;
+    var mainGraphRequest = (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.mainGraphs.map(function (graph) {
+        var _a, _b, _c;
+        var request = {};
+        request.name = graph.name;
+        request.filters = graph.filters;
+        request.start = (_a = anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.graphStartTime;
+        request.end = (_b = anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.graphEndTime;
+        request.settings = (_c = anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.defaultSettings;
+        request.aggregatedLineSettings = graph.aggregatedLineSettings;
+        request.groupBy = graph.groupBy;
+        return request;
+    });
+    return mainGraphRequest;
+};
 var getGraphRequestParams = function (anomalyData) {
     var _a;
     var mainGraphRequest = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.mainGraphs.map(function (graph) {
@@ -7339,58 +7354,17 @@ var getGraphRequestParams = function (anomalyData) {
     var requestParamsList = __spreadArray(__spreadArray([], mainGraphRequest, true), supportingGraphRequest, true);
     return requestParamsList;
 };
-var formatAnomalyRca = function (anomalyData) {
-    var _a, _b;
-    index = 0;
-    if (!anomalyData) {
-        return [];
-    }
-    var mainGraphsLength = (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.mainGraphs) === null || _a === void 0 ? void 0 : _a.length;
-    var formattedAnomalyRca = (_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.rcaGuidelines) === null || _b === void 0 ? void 0 : _b.map(function (rca, rcaIndex) {
-        var _a;
-        var params = {
-            cause: '',
-            name: [],
-            // Determines if we need to show groupByOperations for individual graphs
-            groupByControl: [],
-            description: '',
-            index: [],
-            rcaRecommendation: '',
-            title: undefined
+var formatAnomalyMainGraphs = function (anomalyData) {
+    var _a;
+    var mainGraphs = (_a = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _a === void 0 ? void 0 : _a.mainGraphs;
+    var formattedMainGraphs = mainGraphs === null || mainGraphs === void 0 ? void 0 : mainGraphs.map(function (graph, index) {
+        return {
+            name: graph.name,
+            index: index + 1,
+            groupByControl: graph.groupByControl
         };
-        params.name = [];
-        params.groupByControl = [];
-        params.cause = rca.possibleCause;
-        params.description = rca.possibleCauseDescription;
-        return (_a = rca.troubleshootingRecommendations) === null || _a === void 0 ? void 0 : _a.map(function (recommendation) {
-            var _a;
-            if (!recommendation.supportingGraphs) {
-                return params;
-            }
-            return (_a = recommendation.supportingGraphs) === null || _a === void 0 ? void 0 : _a.map(function (graph) {
-                params.name.push(graph.name);
-                params.rcaRecommendation = recommendation.recommendation;
-                if (mainGraphsLength === 1) {
-                    params.index.push(incrementIndex());
-                }
-                else if (mainGraphsLength > 1) {
-                    params.index.push(incrementIndex() + mainGraphsLength - 1);
-                }
-                params.title = graph.displayName;
-                // For each graph, we need to determine if we need to show groupByOperations
-                params.groupByControl.push(graph.groupByControl);
-                return params;
-            });
-        });
     });
-    var flattenedAnomalyRca = formattedAnomalyRca === null || formattedAnomalyRca === void 0 ? void 0 : formattedAnomalyRca.flat(2);
-    var flattenedAnomalyRcaSet = new Set(flattenedAnomalyRca);
-    var formattedData = Array.from(flattenedAnomalyRcaSet);
-    return formattedData;
-};
-var incrementIndex = function () {
-    index = index + 1;
-    return index;
+    return formattedMainGraphs;
 };
 var getAshOperations = function (metricData, graphPayload, isAdvancedView) {
     var _a, _b, _c, _d, _e, _f;
@@ -8231,11 +8205,23 @@ var navigateToDrilldownView = function (appName, anomalyData, onSelectedIssue, o
         window.location.href = drilldownViewUrl;
     }
 };
-var transformBackgroundTasks = function (response) {
+var transformBackgroundTasks = function (response, options) {
     var _a;
+    var _b = options !== null && options !== void 0 ? options : {}, appName = _b.appName, backgroundTasksMappingFunc = _b.backgroundTasksMappingFunc;
+    var shouldMapYBM = appName === AppName.YBM && typeof backgroundTasksMappingFunc === 'function';
+    var modifiedGroups = response.groups;
+    if (shouldMapYBM) {
+        var mapped = {};
+        for (var _i = 0, _c = Object.entries(response.groups); _i < _c.length; _i++) {
+            var _d = _c[_i], enumKey = _d[0], group = _d[1];
+            var displayName = backgroundTasksMappingFunc(enumKey);
+            mapped[displayName] = __assign(__assign({}, group), { title: displayName });
+        }
+        modifiedGroups = mapped;
+    }
     return {
         groups: (_a = {},
-            _a[TransformedBackgroundTasksCategory.RUNNING_BACKGROUND_JOBS] = response.groups,
+            _a[TransformedBackgroundTasksCategory.ALL_BACKGROUND_JOBS] = modifiedGroups,
             _a)
     };
 };
@@ -71680,6 +71666,7 @@ var GraphView = React__default.memo(function (_a) {
         }
         var unit = (_e = (_d = (_c = (_b = metric.layout) === null || _b === void 0 ? void 0 : _b.yaxis) === null || _c === void 0 ? void 0 : _c.ticksuffix) === null || _d === void 0 ? void 0 : _d.replace(/(&nbsp;|\s)+/g, '')) !== null && _e !== void 0 ? _e : null;
         var yAxisMaxValue = 0;
+        var isQueryView = ((_f = metric === null || metric === void 0 ? void 0 : metric.layout) === null || _f === void 0 ? void 0 : _f.type) === ASH && isHistoricalQueryView;
         // Data processing
         var series = metric.data.map(function (dataItem, i) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -71732,9 +71719,7 @@ var GraphView = React__default.memo(function (_a) {
             }
             var dataPoints = dataItem.x.map(function (xVal, j) { return [xVal, dataItem.y[j]]; });
             var seriesData = ((_j = metric === null || metric === void 0 ? void 0 : metric.layout) === null || _j === void 0 ? void 0 : _j.type) === ASH ? dataPoints : dataPoints;
-            return __assign(__assign({ name: name, fullname: fullname, 
-                // type: metric?.layout?.type === ASH ? 'bar' : 'line',
-                type: 'line', data: seriesData, color: (_k = NAME_COLOR_MAPPING[name]) !== null && _k !== void 0 ? _k : COLORS[i % COLORS.length] }, (dataItem['name'] === MetricConsts.NODE_AVERAGE
+            return __assign(__assign({ name: name, fullname: fullname, type: isQueryView ? 'bar' : 'line', data: seriesData, color: (_k = NAME_COLOR_MAPPING[name]) !== null && _k !== void 0 ? _k : COLORS[i % COLORS.length] }, (dataItem['name'] === MetricConsts.NODE_AVERAGE
                 ? { lineStyle: { type: 'dashed' } }
                 : {})), { tooltip: {
                     formatter: function (params) {
@@ -71746,11 +71731,10 @@ var GraphView = React__default.memo(function (_a) {
                     }
                 }, 
                 // Set stack for bar charts
-                // stack: metric?.layout?.type === ASH ? 'total' : undefined,
-                stack: undefined, smooth: false, showSymbol: false });
+                stack: isQueryView ? 'total' : undefined, smooth: false, showSymbol: false });
         });
         // Unit conversion logic
-        if (isNonEmptyObject((_f = metric.layout) === null || _f === void 0 ? void 0 : _f.yaxis) &&
+        if (isNonEmptyObject((_g = metric.layout) === null || _g === void 0 ? void 0 : _g.yaxis) &&
             unit === 'µs' &&
             isNonEmptyArray(metric.data) &&
             isYAxisGreaterThanThousand(metric.data)) {
@@ -71773,7 +71757,7 @@ var GraphView = React__default.memo(function (_a) {
         var buffer = 1.5; // 20% buffer
         yAxisMaxValue = globalMaxY * buffer;
         // If you want to keep your ASH logic:
-        if (((_g = metric === null || metric === void 0 ? void 0 : metric.layout) === null || _g === void 0 ? void 0 : _g.type) === ASH) {
+        if (((_h = metric === null || metric === void 0 ? void 0 : metric.layout) === null || _h === void 0 ? void 0 : _h.type) === ASH) {
             yAxisMaxValue = globalMaxY * 4.5;
         }
         // Minimum yAxis max to avoid zero/flat axis
@@ -71781,7 +71765,7 @@ var GraphView = React__default.memo(function (_a) {
             yAxisMaxValue = 1.01;
         // Title formatting
         var fullTitle = appName !== AppName.YBA && unit ? "".concat(titleText, " (").concat(unit, ")") : titleText;
-        if (((_h = metric === null || metric === void 0 ? void 0 : metric.layout) === null || _h === void 0 ? void 0 : _h.type) === ASH && isHistoricalQueryView) {
+        if (isQueryView) {
             fullTitle = 'Cluster Load for Selected Query';
         }
         // ECharts option object
@@ -78089,7 +78073,7 @@ var QueryLevelTabletMetadata = function (_a) {
                                             } }, "AccessedTablets-".concat(sortBy, "-").concat(sortDirection))] }) })] })] })] }));
 };
 
-var YBStyledTab$2 = styled$1(YBTab)(function (_a) {
+var YBStyledTab$1 = styled$1(YBTab)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
@@ -78277,7 +78261,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: (_f = (fetchHistoricalQueryGraphs.isLoading
+                                }) }), jsx(YBTabs, { pill: true, value: sqlDrilldownTab, onChange: handleSqlDrilldownTabChange, children: jsx(YBStyledTab$1, { value: SqlDrilldownTabs.PERFORMANCE_METRICS, label: SqlDrilldownTabs.PERFORMANCE_METRICS }) }), sqlDrilldownTab === SqlDrilldownTabs.PERFORMANCE_METRICS && (jsx(Box$1, { className: clsx(classes.gridBox, classes.gridBoxThree), children: (_f = (fetchHistoricalQueryGraphs.isLoading
                                     ? [
                                         { name: 'query_latency' },
                                         { name: 'query_rows' },
@@ -80712,7 +80696,7 @@ var PerfAdvisorGantChart = function (_a) {
                 });
             });
         };
-        // Process top-level category (Running Background Tasks)
+        // Process top-level category (All Background Tasks)
         for (var _i = 0, _a = Object.entries(sourceData === null || sourceData === void 0 ? void 0 : sourceData.groups); _i < _a.length; _i++) {
             var _b = _a[_i], firstLevelCategory = _b[0], firstLevelData = _b[1];
             _loop_4(firstLevelCategory, firstLevelData);
@@ -80767,7 +80751,24 @@ var PerfAdvisorGantChart = function (_a) {
             };
             var updatedGroups_1 = groups;
             if (showMoreOptions || isBackgroundJobs) {
-                var updatedGroups_2 = groups.map(function (group) {
+                // Identify which groups are the last child in their parent section
+                var lastChildMap_1 = new Map();
+                var groupedByParent_1 = new Map();
+                groups.forEach(function (group) {
+                    if (group.parent) {
+                        if (!groupedByParent_1.has(group.parent)) {
+                            groupedByParent_1.set(group.parent, []);
+                        }
+                        groupedByParent_1.get(group.parent).push(group);
+                    }
+                });
+                groupedByParent_1.forEach(function (children) {
+                    if (children.length > 0) {
+                        var lastChild = children[children.length - 1];
+                        lastChildMap_1.set(lastChild.id, true);
+                    }
+                });
+                var updatedGroups_2 = groups.map(function (group, index) {
                     var _a, _b, _c, _d;
                     // Check if the group has further descendants
                     var hasDescendants = ((_a = subCategoriesMap[group.id]) === null || _a === void 0 ? void 0 : _a.length) > 0;
@@ -80805,13 +80806,14 @@ var PerfAdvisorGantChart = function (_a) {
                         nestingMarginLeft = 44;
                     }
                     var marginLeft = "margin-left: ".concat(nestingMarginLeft, "px;");
-                    // Add border-left for category level 3 if it has no descendants
-                    var borderLeft = !hasDescendants && group.categoryLevel === 3
-                        ? 'border-left: 2px solid #E9EEF2; height: 100%;'
-                        : '';
-                    var categoryClass = "".concat(marginLeft).concat(borderLeft).concat(colorStyle).concat(fontStyle);
+                    var extraPadding = isLevel2BgJob ? 'padding-left: 24px;' : '';
+                    var categoryClass = "".concat(marginLeft).concat(extraPadding).concat(colorStyle).concat(fontStyle);
                     var backgroundClass = '';
                     var groupOneCategoryName = '';
+                    // Add a class to indicate if this item should have a left border
+                    // Border will be handled via CSS with ::before pseudo-element to control height
+                    var shouldHaveBorder = (!hasDescendants && group.categoryLevel === 3) || isLevel2BgJob;
+                    var isLastInSection = lastChildMap_1.get(group.id) === true;
                     if (rootParent) {
                         switch (rootParent) {
                             case AnomalyCategory.DB:
@@ -80834,9 +80836,9 @@ var PerfAdvisorGantChart = function (_a) {
                                 backgroundClass = 'infra-background';
                                 groupOneCategoryName = 'Infrastructure';
                                 break;
-                            case TransformedBackgroundTasksCategory.RUNNING_BACKGROUND_JOBS:
+                            case TransformedBackgroundTasksCategory.ALL_BACKGROUND_JOBS:
                                 backgroundClass = 'bg-jobs-background';
-                                groupOneCategoryName = 'Running Background Jobs';
+                                groupOneCategoryName = 'All Background Jobs';
                                 break;
                         }
                     }
@@ -80859,7 +80861,13 @@ var PerfAdvisorGantChart = function (_a) {
                     var groupContent = '';
                     if (isLevel2BgJob) {
                         var name_1 = (_c = group.name) !== null && _c !== void 0 ? _c : '';
-                        groupContent = "<a title=\"".concat(name_1, "\">").concat(name_1, "</a>");
+                        // Note: Classes added in HTML get stripped by vis-timeline, so we add them via JavaScript
+                        var nameElement = "<a title=\"".concat(name_1, "\">").concat(name_1, "</a>");
+                        // Count badge element (right side)
+                        var countBadgeElement = group.categoryCount
+                            ? "<span>".concat(group.categoryCount, "</span>")
+                            : '';
+                        groupContent = "".concat(nameElement).concat(countBadgeElement);
                     }
                     else if (hasDescendants) {
                         var name_2 = (_d = group.name) !== null && _d !== void 0 ? _d : '';
@@ -80884,7 +80892,12 @@ var PerfAdvisorGantChart = function (_a) {
                             : '';
                         groupContent = "<a title=\"".concat(group.content, "\">").concat(icon).concat(displayContent, "</a>").concat(countBadge);
                     }
-                    return __assign(__assign({}, group), { content: groupContent, className: [rowClass, backgroundClass].filter(Boolean).join(' '), 
+                    // Determine border class: last item in section gets different class for bottom spacing
+                    var borderClass = '';
+                    if (shouldHaveBorder) {
+                        borderClass = isLastInSection ? 'has-left-border-last' : 'has-left-border';
+                    }
+                    return __assign(__assign({}, group), { content: groupContent, className: [rowClass, backgroundClass, borderClass].filter(Boolean).join(' '), 
                         // Have added border-right, border-top, border-bottom to .vis-labelset .vis-label, otherwise the below border-left does not work
                         style: categoryClass, visible: group.parent ? expandedCategories[group.parent] : true });
                 });
@@ -80939,7 +80952,7 @@ var PerfAdvisorGantChart = function (_a) {
                             case AnomalyCategory.INFRA:
                                 itemColor = NAME_COLOR_MAPPING[AnomalyCategory.INFRA]; // Yellow for APP and its descendants
                                 break;
-                            case BackgroundJobCategory.BACKGROUND_JOBS:
+                            case TransformedBackgroundTasksCategory.ALL_BACKGROUND_JOBS:
                                 itemColor = NAME_COLOR_MAPPING[BackgroundJobCategory.BACKGROUND_JOBS];
                                 break;
                         }
@@ -81052,8 +81065,21 @@ var PerfAdvisorGantChart = function (_a) {
                     appClass.forEach(function (el) { return el.classList.add('app-inner-background'); });
                     var infraClass = document.querySelectorAll('.vis-label.infra-background .vis-inner span');
                     infraClass.forEach(function (el) { return el.classList.add('infra-inner-background'); });
-                    var bgJobsClass = document.querySelectorAll('.vis-label.bg-jobs-background .vis-inner span');
-                    bgJobsClass.forEach(function (el) { return el.classList.add('bg-jobs-inner-background'); });
+                    var bgJobsRowsLevel1 = document.querySelectorAll('.vis-label.bg-jobs-background.custom-group-row-1 .vis-inner');
+                    bgJobsRowsLevel1.forEach(function (innerEl) {
+                        var span = innerEl.querySelector('span');
+                        if (span)
+                            span.classList.add('bg-job-count-styled');
+                    });
+                    var bgJobsRowsLevel2 = document.querySelectorAll('.vis-label.bg-jobs-background.custom-group-row-2 .vis-inner');
+                    bgJobsRowsLevel2.forEach(function (innerEl) {
+                        var anchor = innerEl.querySelector('a');
+                        var span = innerEl.querySelector('span');
+                        if (anchor)
+                            anchor.classList.add('bg-job-name-styled');
+                        if (span)
+                            span.classList.add('bg-job-count-styled');
+                    });
                     if ((showMoreOptions || isBackgroundJobs) && !isInsightsTab) {
                         insertCustomGroupSeparators(); // Second call
                     }
@@ -81159,10 +81185,9 @@ var PerfAdvisorGantChart = function (_a) {
     ]);
     // Function to insert custom group separators on left, right, top and bottom side of the chart
     function insertCustomGroupSeparators() {
-        var _a, _b, _c, _d, _e, _f;
-        // Remove all existing separators
+        var _a, _b, _c, _d;
         document
-            .querySelectorAll('.custom-group-separator-left, .custom-group-separator-right, .custom-group-separator-top, .custom-group-separator-bottom')
+            .querySelectorAll('.custom-group-separator-left, .custom-group-separator-right, .custom-group-separator-bottom')
             .forEach(function (el) { return el.remove(); });
         var group1Labels = Array.from(document.querySelectorAll('.vis-labelset .vis-label.custom-group-row-1'));
         group1Labels.forEach(function (labelEl, idx) {
@@ -81183,25 +81208,18 @@ var PerfAdvisorGantChart = function (_a) {
                 fgContainer.appendChild(barSep);
             }
         });
-        // Step 3: Insert top separator (above first label)
-        var firstLabel = group1Labels[0];
-        if (!((_a = firstLabel.previousElementSibling) === null || _a === void 0 ? void 0 : _a.classList.contains('custom-group-separator-top'))) {
-            var firstTopLine = document.createElement('div');
-            firstTopLine.className = 'custom-group-separator-top';
-            (_b = firstLabel.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(firstTopLine, firstLabel);
-        }
         var lastLabel = group1Labels[group1Labels.length - 1];
         var insertAfterEl = getTrueBottomInsertPoint(lastLabel);
         // Only insert if not already present
-        if (!((_c = insertAfterEl === null || insertAfterEl === void 0 ? void 0 : insertAfterEl.previousElementSibling) === null || _c === void 0 ? void 0 : _c.classList.contains('custom-group-separator-bottom')) &&
-            !((_d = lastLabel.nextElementSibling) === null || _d === void 0 ? void 0 : _d.classList.contains('custom-group-separator-bottom'))) {
+        if (!((_a = insertAfterEl === null || insertAfterEl === void 0 ? void 0 : insertAfterEl.previousElementSibling) === null || _a === void 0 ? void 0 : _a.classList.contains('custom-group-separator-bottom')) &&
+            !((_b = lastLabel.nextElementSibling) === null || _b === void 0 ? void 0 : _b.classList.contains('custom-group-separator-bottom'))) {
             var lastBottomLine = document.createElement('div');
             lastBottomLine.className = 'custom-group-separator-bottom';
             if (insertAfterEl) {
-                (_e = lastLabel.parentNode) === null || _e === void 0 ? void 0 : _e.insertBefore(lastBottomLine, insertAfterEl);
+                (_c = lastLabel.parentNode) === null || _c === void 0 ? void 0 : _c.insertBefore(lastBottomLine, insertAfterEl);
             }
             else {
-                (_f = lastLabel.parentNode) === null || _f === void 0 ? void 0 : _f.appendChild(lastBottomLine);
+                (_d = lastLabel.parentNode) === null || _d === void 0 ? void 0 : _d.appendChild(lastBottomLine);
             }
         }
         // Find the real last top-level label (skip over its children)
@@ -81223,7 +81241,7 @@ var PerfAdvisorGantChart = function (_a) {
     }
     return (jsxs(Box$1, { id: name, children: [jsx("div", { ref: timelineRef, style: {
                     backgroundColor: '#FFFFFF'
-                } }, name), jsx("style", { children: "\n          .vis-foreground .vis-group {\n            border-bottom: none;\n          }\n          .vis-foreground .vis-group.custom-group-row-1 {\n            top: 8px;\n          }\n          .vis-foreground .vis-group.parent-category {\n             border-top: 1px solid #E0E0E0 !important; /* Or whatever you want */\n          }\n          .vis-labelset .vis-label {\n            border-right: 0px solid #ccc !important;\n            border-bottom: none;\n            border-top: none;\n          }\n          .vis-timeline {\n            background-color: #FFFFFF !important;\n            border: 0px solid #ccc !important;\n            visibility: visible !important;\n          }\n          .vis-panel.vis-top {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-bottom {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-panel.vis-left {\n            border-left-style: none !important;\n            border-right-style: none !important;\n            border: 0px solid #ccc !important;\n          }\n          .vis-inner a {\n            cursor: pointer;\n            letter-spacing: 0.3px;\n            text-decoration: none !important;\n            outline: none !important;\n            color: unset !important;\n            &:focus {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n            &:hover {\n              box-shadow: inset 0px 0px 4px rgb(247, 249, 251, 0.8) !important;\n            }\n          }\n          .vis-labelset .vis-label .vis-inner {\n            padding: 0px;\n          }\n          .vis-inner span {\n            padding: 2px 6px 2px 6px;\n            height: 20px;\n            width: fit-content;\n            font-size: 11.5px;\n            line-height: 16px;\n            font-family: Inter;\n            font-weight: 500;\n            border-radius: 4px;\n          }\n          .vis-item.vis-range .vis-item-content {\n            display: none;\n          }\n          .vis-item.vis-range {\n            top: 10px !important;\n            border-style: unset;\n            border-radius: 8px;\n          }\n          .vis-labelset.my-custom-labelset-rca {\n            width: 0px;\n          }\n          .vis-labelset {\n            width: 250px;\n          }\n          .vis-inner {\n            display: flex !important;\n            justify-content: space-between;\n            align-items: center;\n          }\n          .vis-time-axis .vis-grid.vis-vertical {\n            border-left: 1px dashed !important;\n            color: #D7DEE4;\n          }\n          .vis-time-axis .vis-grid.vis-horizontal {\n            display: none !important;\n          }\n          .vis-panel.vis-center {\n            border-left-style: dashed !important;\n            border-right-style: dashed !important;\n            border-top-color: #D7DEE4;\n            top: 1px !important;\n            margin-left: 8px;\n            left: 254px !important;\n          }\n          .vis-panel.vis-center.my-custom-center-panel-rca {\n            left: 0px !important;\n          }\n          .vis-time-axis .vis-grid.vis-major {\n            border-color: #e5e5e5 !important;\n          }\n          .custom-group-separator-left {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n            margin-top: 2px;\n          }\n            .custom-group-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            position: absolute;\n            width: 100%;\n          }\n          .custom-group-separator-bottom {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .custom-group-separator-top {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            content: '';\n          }\n          .item-separator {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n            margin-top: 2px;\n          }\n          .item-separator-right {\n            height: 1px;\n            background-color: #D7DEE4;\n            margin: 0 0 0 0;\n            display: block;\n            width: 100%;\n          }\n          .vis-label.custom-group-row-1 .vis-inner {\n            padding-top: 16px;\n            padding-bottom: 16px;\n          }\n          .vis-label.custom-group-row-2 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-label.custom-group-row .vis-inner {\n            padding-top: 8px;\n            padding-bottom: 8px;\n          }\n          .vis-foreground .vis-group.custom-group-row {\n            border-bottom: 1px solid #D7DEE4;\n            bottom: 3px;\n          }\n          .vis-label.custom-group-row .vis-inner .category-deeplink {\n            text-decoration: underline !important;\n          }\n          .vis-label.custom-group-row-2 .vis-inner .category-badge-2 {\n            margin-right: 40px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-badge-3 {\n            margin-right: 44px;\n          }\n          .vis-label.custom-group-row-3 .vis-inner .category-deeplink {\n            margin-left: 24px;\n            text-decoration: underline !important;\n          }\n          .vis-label.db-background .vis-inner .db-inner-background {\n            background-color: #E8E9FE !important;\n            color: #30307F !important;\n          }\n          .vis-label.node-background .vis-inner .node-inner-background {\n            background-color: #FFEEC8 !important;\n            color: #9D6C00 !important;\n          }\n          .vis-label.sql-background .vis-inner .sql-inner-background {\n            background-color: rgba(187, 66, 188, 0.15) !important;\n            color: #7D2777 !important;\n          }\n          .vis-label.app-background .vis-inner .app-inner-background {\n            background-color: #D7EFF4 !important;\n            color: #2B59C3 !important;\n          }\n          .vis-label.infra-background .vis-inner .infra-inner-background {\n            background-color: #c1ccec !important;\n            color: #507ce1 !important;\n          }\n          .vis-label.bg-jobs-background .vis-inner .bg-jobs-inner-background {\n            background-color: #E9EEF2 !important;\n            color: #4E5F6D !important;\n          }\n          .vis-time-axis .vis-text {\n            font-family: Inter;\n            font-size: 11px;\n            font-weight: 400;\n          }\n        " })] }, name));
+                } }, name), jsx("style", { children: "\n          .vis-foreground .vis-group {\n            border-bottom: none;\n          }\n          .vis-foreground .vis-group.custom-group-row-1 {\n            top: 8px;\n          }\n          .vis-foreground .vis-group.parent-category {\n             border-top: 1px solid #E0E0E0 !important; /* Or whatever you want */\n          }\n          .vis-labelset {\n            /* Performance optimizations for smoother repaints */\n            transform: translateZ(0);\n            backface-visibility: hidden;\n          }\n          .vis-labelset .vis-label {\n            border-right: 0px solid #ccc !important;\n            border-bottom: none;\n            border-top: none;\n            /* Disable transitions to prevent visual shift */\n            transition: none !important;\n            animation: none !important;\n            /* Performance hint */\n            contain: layout style;\n          }\n          .vis-labelset .vis-label.has-left-border {\n            position: relative;\n          }\n          .vis-labelset .vis-label.has-left-border::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            bottom: 0;\n            width: 2px;\n            background-color: #E9EEF2;\n          }\n          .vis-labelset .vis-label.has-left-border-last {\n            position: relative;\n          }\n          .vis-labelset .vis-label.has-left-border-last::before {\n            content: '';\n            position: absolute;\n            left: 0;\n            top: 0;\n            bottom: 8px;\n            width: 2px;\n            background-color: #E9EEF2;\n          }\n          .vis-timeline {\n            background-color: #FFFFFF !important;\n            border: 0px solid #ccc !important;\n            visibility: visible !important;\n            /* Performance hints for smoother DOM updates */\n            will-change: contents;\n            contain: layout style paint;\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-label.bg-jobs-background.custom-group-row-2 .vis-inner span:not(.bg-job-count) {\n            padding: 0 !important;\n            height: auto !important;\n            width: auto !important;\n            border-radius: 0 !important;\n            background: none !important;\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          .vis-labelset .vis-label.custom-group-row-1:first-of-type {\n            border-top: 1px solid #D7DEE4 !important;\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          .vis-label.bg-jobs-background .vis-inner span.bg-job-count.bg-jobs-inner-background {\n            background-color: #E9EEF2 !important;\n            color: #4E5F6D !important;\n            border-radius: 4px !important;\n            display: inline-flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            min-width: 20px !important;\n            height: 20px !important;\n            padding: 0 4px !important;\n          }\n          .vis-time-axis .vis-text {\n            font-family: Inter;\n            font-size: 11px;\n            font-weight: 400;\n          }\n          \n          /* Background Jobs Level 2 - Name styling (JavaScript-added class) */\n          .vis-labelset .vis-label.bg-jobs-background.custom-group-row-2 .vis-inner a.bg-job-name-styled,\n          .vis-label.bg-jobs-background.custom-group-row-2 .vis-inner a.bg-job-name-styled {\n            overflow: hidden !important;\n            text-overflow: ellipsis !important;\n            white-space: nowrap !important;\n            flex: 1 1 auto !important;\n            min-width: 0 !important;\n            max-width: calc(100% - 44px) !important;\n            display: block !important;\n            text-decoration: none !important;\n            width: auto !important;\n            margin-right: 24px !important;\n          }\n          \n          /* Background Jobs Level 1 & 2 - Count badge styling (JavaScript-added class) */\n          .vis-labelset .vis-label.bg-jobs-background.custom-group-row-1 .vis-inner span.bg-job-count-styled,\n          .vis-label.bg-jobs-background.custom-group-row-1 .vis-inner span.bg-job-count-styled,\n          .vis-labelset .vis-label.bg-jobs-background.custom-group-row-2 .vis-inner span.bg-job-count-styled,\n          .vis-label.bg-jobs-background.custom-group-row-2 .vis-inner span.bg-job-count-styled {\n            display: inline-flex !important;\n            align-items: center !important;\n            justify-content: center !important;\n            min-width: 20px !important;\n            height: 20px !important;\n            width: auto !important;\n            background-color: #E9EEF2 !important;\n            border-radius: 4px !important;\n            color: #4E5F6D !important;\n            font-size: 11.5px !important;\n            font-weight: 500 !important;\n            line-height: 20px !important;\n            padding: 0 4px !important;\n            box-sizing: border-box !important;\n            flex-shrink: 0 !important;\n            flex-grow: 0 !important;\n          }\n        " })] }, name));
 };
 
 var OtherDrilldown = function (_a) {
@@ -81437,7 +81455,7 @@ var BOTTOM_MARGIN = 10;
 var SIZE_BAR_COLOR = '#8DABF0'; // Default gray color
 var MAX_SIZE_BAR_COLOR = '#F9ACAC'; // Slightly red color for max size
 var SizeBarChart = function (_a) {
-    var size = _a.size, maxSize = _a.maxSize;
+    var size = _a.size, maxSize = _a.maxSize, isHotTablet = _a.isHotTablet;
     var chartRef = useRef(null);
     var barHeight = 40;
     useEffect(function () {
@@ -81456,7 +81474,7 @@ var SizeBarChart = function (_a) {
                 label: { show: false },
                 data: [size],
                 itemStyle: {
-                    color: isMaxSize ? MAX_SIZE_BAR_COLOR : SIZE_BAR_COLOR
+                    color: isMaxSize && !isHotTablet ? MAX_SIZE_BAR_COLOR : SIZE_BAR_COLOR
                 }
             }
         ];
@@ -81669,7 +81687,14 @@ var TabletMetadata = function (_a) {
                 ((_f = (_e = (_d = data === null || data === void 0 ? void 0 : data.pages) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.entities)) {
                 if (isHotTablet && sortBy === TABLETS_COLUMNS.EPS) {
                     setMaxEPS((_l = (_k = (_j = (_h = (_g = data === null || data === void 0 ? void 0 : data.pages) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j.entities[0]) === null || _k === void 0 ? void 0 : _k.eps) !== null && _l !== void 0 ? _l : 1);
-                    setAnomalyTabletData((_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.pages) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.entities[0]);
+                    var tabletEntities = (_p = (_o = (_m = data === null || data === void 0 ? void 0 : data.pages) === null || _m === void 0 ? void 0 : _m[0]) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.entities;
+                    var tabletEntity = tabletEntities.find(function (entity) { return entity.tabletId === tabletId; });
+                    if (!tabletEntity) {
+                        tabletEntity = tabletEntities[0];
+                    }
+                    var maxSize = tabletEntities.reduce(function (max, entity) { return Math.max(max, entity.size); }, 0);
+                    setTabletMaxSize(maxSize);
+                    setAnomalyTabletData(tabletEntity);
                 }
                 else if (!isHotTablet && sortBy === TABLETS_COLUMNS.SIZE) {
                     setTabletMaxSize((_u = (_t = (_s = (_r = (_q = data === null || data === void 0 ? void 0 : data.pages) === null || _q === void 0 ? void 0 : _q[0]) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.entities[0]) === null || _t === void 0 ? void 0 : _t.size) !== null && _u !== void 0 ? _u : 1);
@@ -81796,7 +81821,7 @@ var TabletMetadata = function (_a) {
                         className: helperClasses.tabletNodeLoadMetadataTableCell
                     }); },
                     customBodyRender: function (value) {
-                        return (jsxs(Box$1, { display: "flex", flexDirection: 'row', alignItems: 'center', children: [jsx("span", { children: isNonEmptyString(value) ? value : '-' }), !isHotTablet && value === (anomalyTabletData === null || anomalyTabletData === void 0 ? void 0 : anomalyTabletData.tabletId) && (jsx(SvgAlertCircle, { style: { marginLeft: '4px' } }))] }));
+                        return (jsxs(Box$1, { display: "flex", flexDirection: 'row', alignItems: 'center', children: [jsx("span", { children: isNonEmptyString(value) ? value : '-' }), value === (anomalyTabletData === null || anomalyTabletData === void 0 ? void 0 : anomalyTabletData.tabletId) && (jsx(SvgAlertCircle, { style: { marginLeft: '4px' } }))] }));
                     }
                 }
             },
@@ -81821,11 +81846,7 @@ var TabletMetadata = function (_a) {
                     }); },
                     customHeadRender: function () { return (jsx(YBTooltip, { title: TOOLTIP_TEXT.SIZE_TOOLTIP, placement: "top", arrow: true, children: jsxs(Box$1, { className: helperClasses.headerBox, children: [jsx(Typography$1, { variant: "body2", className: helperClasses.headerText, children: TABLETS_METADATA_LABELS.SIZE }), jsx("img", { src: InfoMessageIcon, alt: "info", className: helperClasses.infoIcon })] }) })); },
                     customBodyRender: function (value) {
-                        if (!isHotTablet) {
-                            return jsx(SizeBarChart, { size: value, maxSize: tabletMaxSize });
-                        }
-                        var formattedSize = formatBytes(value);
-                        return isNonEmptyString(formattedSize) ? formattedSize : '-';
+                        return jsx(SizeBarChart, { size: value, maxSize: tabletMaxSize, isHotTablet: isHotTablet });
                     }
                 }
             },
@@ -82105,12 +82126,156 @@ var TabletDrilldown = function (_a) {
     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 })) }));
 };
 
+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, formattedMainGraphs = _a.formattedMainGraphs, urlParams = _a.urlParams, onEChartsDateSelect = _a.onEChartsDateSelect;
+    // Ref to store chart instances
+    var chartInstancesRef = useRef([]);
+    var classes = useHelperStyles();
+    var _e = useState(0), selectedTab = _e[0]; _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 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, loading: fetchAnomalyGraphs.isLoading, 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)) }));
+    };
+    // const filteredRecommendationMetrics = formattedAnomalyRca?.filter(
+    //   (item: FormattedAnomalyRca) => item?.name?.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.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 }))] })), jsx(Box$1, { children: isNonEmptyArray(formattedMainGraphs) && (jsx(Box$1, { style: {
+                            border: '1px solid #E9EEF2',
+                            borderRadius: '8px',
+                            backgroundColor: '#FFFFFF',
+                            padding: '16px'
+                        }, children: jsx(Box$1, { className: (formattedMainGraphs === null || formattedMainGraphs === void 0 ? void 0 : formattedMainGraphs.length) > 1
+                                ? clsx(classes.gridBox, classes.gridBoxDouble)
+                                : '', children: formattedMainGraphs === null || formattedMainGraphs === void 0 ? void 0 : formattedMainGraphs.map(function (item) {
+                                var _a;
+                                var metricData = RCAGraphResponseData === null || RCAGraphResponseData === void 0 ? void 0 : RCAGraphResponseData.find(function (data) { return data.name === item.name; });
+                                var title = metricData === null || metricData === void 0 ? void 0 : metricData.layout.title;
+                                var shouldShowGroupbyOperations = item.groupByControl;
+                                var operations = metricData
+                                    ? getOperations(metricMeasure, metricData, GraphType.MAIN_RCA, shouldShowGroupbyOperations, amomalyGraphRequestParams)
+                                    : { uniqueOperations: [], groupByOperations: [] };
+                                // Skip rendering if there's an error message
+                                if (isNonEmptyString((_a = metricData === null || metricData === void 0 ? void 0 : metricData.errorMessage) !== null && _a !== void 0 ? _a : '') || !metricData) {
+                                    return jsx(Box$1, {}, "error-".concat(item.index));
+                                }
+                                return (jsx(Box$1, { id: "main-graph-".concat(item.index), style: {
+                                        border: (formattedMainGraphs === null || formattedMainGraphs === void 0 ? void 0 : formattedMainGraphs.length) > 1 ? '1px solid #E9EEF2' : 'none',
+                                        borderRadius: (formattedMainGraphs === null || formattedMainGraphs === void 0 ? void 0 : formattedMainGraphs.length) > 1 ? '8px' : 'none'
+                                    }, children: renderGraphs(metricData, operations.uniqueOperations, operations.groupByOperations, GraphType.MAIN_RCA, item.index, title) }, "graph-".concat(item.index)));
+                            }) }) })) })] }) }));
+};
+
 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, _v, _w;
+    var metricMeasure = _a.metricMeasure, appName = _a.appName, timezone = _a.timezone, universeQueryStatsData = _a.universeQueryStatsData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, 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 _x = useState([]); _x[0]; var setFilteredLegends = _x[1];
+    var _y = useState(ALL.toUpperCase()), dbWaitEventType = _y[0], setDbWaitEventType = _y[1];
+    var _z = useState(GROUP_BY_OPERATIONS[0]), groupByOperation = _z[0], setGroupByOperation = _z[1];
+    var formattedMainGraphs = formatAnomalyMainGraphs(anomalyData);
+    var anomalyMainGraphRequestParams = getAnomalyMainGraphRequestParams(anomalyData);
     var onFilterBarData = function (data) {
         setFilteredLegends(data);
     };
@@ -82127,13 +82292,16 @@ 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 &&
-                (((_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 &&
+    var isNodeAnomalyWithoutSlowDisks = ((_b = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _b === void 0 ? void 0 : _b.category) === AnomalyCategory.NODE &&
+        ((_c = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _c === void 0 ? void 0 : _c.type) !== AnomalyType.SLOW_DISKS;
+    var isAppAnomaly = ((_d = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _d === void 0 ? void 0 : _d.category) === AnomalyCategory.APP;
+    var isTabletAnomaly = ((_e = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _e === void 0 ? void 0 : _e.category) === AnomalyCategory.DB &&
+        (((_f = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _f === void 0 ? void 0 : _f.type) === AnomalyType.HOT_TABLET ||
+            ((_g = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _g === void 0 ? void 0 : _g.type) === AnomalyType.LARGE_TABLET);
+    return (jsxs(Box$1, { children: [((_h = anomalyData === null || anomalyData === void 0 ? void 0 : anomalyData.lastInstance) === null || _h === void 0 ? void 0 : _h.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 })), isNodeAnomalyWithoutSlowDisks && (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 })), isAppAnomaly && (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 })), isTabletAnomaly && (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 }))] }));
+                    ((_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 })), (isNodeAnomalyWithoutSlowDisks || isAppAnomaly || isTabletAnomaly) && (jsxs(Box$1, { mt: 2, children: [jsx(Typography$1, { variant: "h5", children: 'Observed Anomaly' }), jsx(Box$1, { mt: 1, children: jsx(AnomalyRCAGraphs, { appName: appName, timezone: timezone, startTime: (_u = (_t = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.startDateTime) === null || _t === void 0 ? void 0 : _t.toISOString()) !== null && _u !== void 0 ? _u : null, endTime: (_w = (_v = dateTimeRange === null || dateTimeRange === void 0 ? void 0 : dateTimeRange.endDateTime) === null || _v === void 0 ? void 0 : _v.toISOString()) !== null && _w !== void 0 ? _w : null, anomalyData: anomalyData, getClusterDetails: getClusterDetails, apiUrl: apiUrl, dateTimeRange: dateTimeRange, metricMeasure: metricMeasure, formattedMainGraphs: formattedMainGraphs, amomalyGraphRequestParams: anomalyMainGraphRequestParams, onEChartsDateSelect: onEChartsDateSelect, urlParams: urlParams }) })] }))] }));
 };
 
 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";
@@ -82357,7 +82525,7 @@ var AnomalyPossibleCause = function (_a) {
                                                                 ((_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" }) })] })] }));
 };
 
-var YBStyledTab$1 = styled$1(YBTab)(function (_a) {
+styled$1(YBTab)(function (_a) {
     var theme = _a.theme;
     return ({
         display: 'flex',
@@ -82370,8 +82538,8 @@ 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;
-    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 _b, _c, _d, _e, _f, _g, _h, _j;
+    var universeUuid = _a.universeUuid, universeData = _a.universeData, anomalyData = _a.anomalyData, amomalyGraphRequestParams = _a.amomalyGraphRequestParams, appName = _a.appName, timezone = _a.timezone, 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
     var anomalyMetricMeasure = getAnomalyMetricMeasure(anomalyData);
@@ -82401,25 +82569,25 @@ var ProcessGraphData = React__default.memo(function (_a) {
         previousDate.setDate(previousDate.getDate() - 1);
     }
     // State variables
-    var _l = useState(true), showDetails = _l[0], setShowDetails = _l[1];
-    var _m = useState(ALL_REGIONS), clusterRegionItem = _m[0], setClusterRegionItem = _m[1];
-    var _o = useState(ALL_ZONES$1), zoneNodeItem = _o[0], setZoneNodeItem = _o[1];
-    var _p = useState(true), isPrimaryCluster = _p[0], setIsPrimaryCluster = _p[1];
-    var _q = useState(ALL), cluster = _q[0], setCluster = _q[1];
-    var _r = useState(ALL), region = _r[0], setRegion = _r[1];
-    var _s = useState(ALL), zone = _s[0], setZone = _s[1];
-    var _t = useState(ALL), node = _t[0], setNode = _t[1];
-    var _u = useState(anomalyMetricMeasure), metricMeasure = _u[0], setMetricMeasure = _u[1];
-    var _v = useState(anomalyOutlierType), outlierType = _v[0], setOutlierType = _v[1];
-    var _w = useState(TabletTabs.TABLET_OVERVIEW), tabletTab = _w[0]; _w[1];
-    var _x = useState(SqlTabs.QUERY_OVERVIEW), sqlTab = _x[0], setSqlTab = _x[1];
+    var _k = useState(true), showDetails = _k[0], setShowDetails = _k[1];
+    var _l = useState(ALL_REGIONS), clusterRegionItem = _l[0], setClusterRegionItem = _l[1];
+    var _m = useState(ALL_ZONES$1), zoneNodeItem = _m[0], setZoneNodeItem = _m[1];
+    var _o = useState(true), isPrimaryCluster = _o[0], setIsPrimaryCluster = _o[1];
+    var _p = useState(ALL), cluster = _p[0], setCluster = _p[1];
+    var _q = useState(ALL), region = _q[0], setRegion = _q[1];
+    var _r = useState(ALL), zone = _r[0], setZone = _r[1];
+    var _s = useState(ALL), node = _s[0], setNode = _s[1];
+    var _t = useState(anomalyMetricMeasure), metricMeasure = _t[0], setMetricMeasure = _t[1];
+    var _u = useState(anomalyOutlierType), outlierType = _u[0], setOutlierType = _u[1];
+    var _v = useState(TabletTabs.TABLET_OVERVIEW), tabletTab = _v[0]; _v[1];
+    var _w = useState(SqlTabs.QUERY_OVERVIEW), sqlTab = _w[0]; _w[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 _y = useState((_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.duration) !== null && _b !== void 0 ? _b : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _y[0], setFilterDuration = _y[1];
-    var _z = useState(anomalyOutlierNumNodes), numNodes = _z[0], setNumNodes = _z[1];
-    var _0 = useState(null), universeQueryStatsData = _0[0], setUniverseQueryStatsData = _0[1];
-    var _1 = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _1[0], setDateTimeRange = _1[1];
-    var _2 = useState(null), anomalyGroupData = _2[0], setAnomalyGroupData = _2[1];
+    var _x = useState((_b = urlParams === null || urlParams === void 0 ? void 0 : urlParams.duration) !== null && _b !== void 0 ? _b : ANOMALY_FILTER_DURATION_OPTIONS[0].value), filterDuration = _x[0], setFilterDuration = _x[1];
+    var _y = useState(anomalyOutlierNumNodes), numNodes = _y[0], setNumNodes = _y[1];
+    var _z = useState(null), universeQueryStatsData = _z[0], setUniverseQueryStatsData = _z[1];
+    var _0 = useState(function () { return initializeDateTimeRange(filterDuration, today, previousDate); }), dateTimeRange = _0[0], setDateTimeRange = _0[1];
+    var _1 = useState(null), anomalyGroupData = _1[0], setAnomalyGroupData = _1[1];
     var gantChartData = useQuery([
         QUERY_KEY.fetchAnomalyGroupsById,
         universeUuid,
@@ -82549,13 +82717,7 @@ var ProcessGraphData = React__default.memo(function (_a) {
             }
         }
     };
-    var handleSqlTabChange = function (_event, newSubTab) {
-        if (newSubTab === sqlTab) {
-            return;
-        }
-        setSqlTab(newSubTab);
-    };
-    var _3 = useQuery([QUERY_KEY.fetchQueryStats, universeUuid], function () {
+    var _2 = 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
@@ -82573,8 +82735,8 @@ 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 = _3.isLoading, universeQueryStatsError = _3.isError;
-    if (universeQueryStatsLoading) {
+    }), universeQueryStatsLoading = _2.isLoading, universeQueryStatsError = _2.isError;
+    if (universeQueryStatsLoading || ((gantChartData === null || gantChartData === void 0 ? void 0 : gantChartData.isLoading) && !isHistoricalQueryView)) {
         return (jsx(Box$1, { mt: 2, children: jsx(LinearProgress, {}) }));
     }
     if (universeQueryStatsError &&
@@ -82591,12 +82753,11 @@ var ProcessGraphData = React__default.memo(function (_a) {
     });
     return (jsxs(Box$1, { style: { 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 }) })), !!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: helperClasses.stickyHeader, 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, { 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: [!(((_f = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _f === void 0 ? void 0 : _f.category) === AnomalyCategory.APP ||
+                isHistoricalQueryView: isHistoricalQueryView, showStandaloneAnomalies: showStandaloneAnomalies, anomalyData: isNonEmptyObject(anomalyGroupData) ? anomalyGroupData : null, onSelectedIssue: isNonEmptyObject(anomalyData) ? onSelectedIssue : undefined, onSelectedQuery: onSelectedQuery, showDetails: showDetails, onShowDetails: onShowDetails, onNavigateToUrl: onNavigateToUrl }), !!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: helperClasses.stickyHeader, 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, { 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: [!(((_e = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _e === void 0 ? void 0 : _e.category) === AnomalyCategory.APP ||
                                 isIndexAnomaly ||
-                                (((_g = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _g === void 0 ? void 0 : _g.category) === AnomalyCategory.NODE &&
-                                    ((_h = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _h === void 0 ? void 0 : _h.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: ((_j = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _j === void 0 ? void 0 : _j.type) !== AnomalyType.LARGE_TABLET &&
-                                    ((_k = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _k === void 0 ? void 0 : _k.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 })] }))] })] }));
+                                (((_f = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _f === void 0 ? void 0 : _f.category) === AnomalyCategory.NODE &&
+                                    ((_g = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _g === void 0 ? void 0 : _g.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: ((_h = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _h === void 0 ? void 0 : _h.type) !== AnomalyType.LARGE_TABLET &&
+                                    ((_j = anomalyGroupData === null || anomalyGroupData === void 0 ? void 0 : anomalyGroupData.lastInstance) === null || _j === void 0 ? void 0 : _j.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, 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) {
@@ -82605,7 +82766,6 @@ var MetricsAnalysisEntry = function (_a) {
     var helperClasses = useHelperStyles();
     var _f = useState(null), userSelectedAnomaly = _f[0], setUserSelectedAnomaly = _f[1];
     var _g = useState(null), amomalyGraphRequestParams = _g[0], setAmomalyGraphRequestParams = _g[1];
-    var _h = useState(null), formattedAnomalyRca = _h[0], setFormattedAnomalyRca = _h[1];
     var urlParams = new URLSearchParams(window.location.search);
     var urlPath = window.location.pathname;
     var queryIdParam = null;
@@ -82628,17 +82788,16 @@ var MetricsAnalysisEntry = function (_a) {
         return PerfAdvisorAPI.fetchUniverseById(universeUuid, apiUrl);
     });
     var universeDataFetchError = (_d = (_c = (_b = universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.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 _j = useQuery([QUERY_KEY.fetchAnomalies, universeUuid], function () { return PerfAdvisorAPI.fetchAnomaliesById(universeUuid, troubleshootUuid, apiUrl); }, {
+    var _h = useQuery([QUERY_KEY.fetchAnomalies, universeUuid], function () { return PerfAdvisorAPI.fetchAnomaliesById(universeUuid, troubleshootUuid, apiUrl); }, {
         onSuccess: function (anomalyData) {
             setUserSelectedAnomaly(anomalyData);
             setAmomalyGraphRequestParams(getGraphRequestParams(anomalyData));
-            setFormattedAnomalyRca(formatAnomalyRca(anomalyData));
         },
         onError: function (error) {
             console.error('Failed to fetch Anomalies', error);
         },
         enabled: isNonEmptyString(troubleshootUuid)
-    }), isLoading = _j.isLoading, isError = _j.isError, isIdle = _j.isIdle;
+    }), isLoading = _h.isLoading, isError = _h.isError, isIdle = _h.isIdle;
     if (isLoading) {
         return (jsx(Box$1, { mt: 2, children: jsx(LinearProgress, {}) }));
     }
@@ -82649,7 +82808,7 @@ var MetricsAnalysisEntry = function (_a) {
                         ? DEFAULT_ERROR_MESSAGES.ANOMALIES_FETCH_ERROR
                         : DEFAULT_ERROR_MESSAGES.QUERY_STATS_FETCH_ERROR }))] }));
     }
-    return (jsx(YBThemeWrapper, { appName: appName, children: jsx(Box$1, { className: clsx(appName !== AppName.WEB && helperClasses.headerContainerYBM), children: (universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data) && (jsx(ProcessGraphData, { apiUrl: apiUrl, troubleshootUuid: troubleshootUuid, anomalyData: userSelectedAnomaly, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, universeUuid: universeUuid, appName: appName, timezone: timezone, isHistoricalQueryView: isHistoricalQueryView, amomalyGraphRequestParams: amomalyGraphRequestParams, formattedAnomalyRca: formattedAnomalyRca, dbIdParam: dbIdParam, queryIdParam: queryIdParam, showStandaloneAnomalies: showStandaloneAnomalies, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) }) }));
+    return (jsx(YBThemeWrapper, { appName: appName, children: jsx(Box$1, { className: clsx(appName !== AppName.WEB && helperClasses.headerContainerYBM), children: (universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data) && (jsx(ProcessGraphData, { apiUrl: apiUrl, troubleshootUuid: troubleshootUuid, anomalyData: userSelectedAnomaly, universeData: universeDataFetch === null || universeDataFetch === void 0 ? void 0 : universeDataFetch.data, universeUuid: universeUuid, appName: appName, timezone: timezone, isHistoricalQueryView: isHistoricalQueryView, amomalyGraphRequestParams: amomalyGraphRequestParams, dbIdParam: dbIdParam, queryIdParam: queryIdParam, showStandaloneAnomalies: showStandaloneAnomalies, onSelectedIssue: onSelectedIssue, onSelectedQuery: onSelectedQuery, onNavigateToUrl: onNavigateToUrl })) }) }));
 };
 
 var YSQL_COLUMNS = {
@@ -84002,7 +84161,7 @@ var useStyles$a = makeStyles$1(function (theme) { return ({
 }); });
 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 apiUrl = _a.apiUrl, endTime = _a.endTime, appName = _a.appName, startTime = _a.startTime, currentTab = _a.currentTab, universeUuid = _a.universeUuid, onSelectedIssue = _a.onSelectedIssue, onClickShowMoreAnomalies = _a.onClickShowMoreAnomalies, backgroundTasksMappingFunc = _a.backgroundTasksMappingFunc;
     var classes = useStyles$a();
     var helperClasses = useHelperStyles();
     var _e = useState(false), expandChart = _e[0], setExpandChart = _e[1];
@@ -84011,7 +84170,10 @@ var BackgroundJobs = function (_a) {
     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);
+            var transformedData = transformBackgroundTasks(data, {
+                appName: appName,
+                backgroundTasksMappingFunc: backgroundTasksMappingFunc
+            });
             setBackgroundTasks(transformedData);
         }
     });
@@ -85300,9 +85462,7 @@ var useStyles$9 = makeStyles$1(function (theme) { return ({
         '&:before': {
             display: 'none'
         },
-        '&.Mui-expanded': {
-            margin: theme.spacing(2, 0, 0, 0)
-        }
+        margin: "".concat(theme.spacing(2), "px 0 0 0")
     },
     accordionSummary: {
         padding: theme.spacing(1.5, 2, 1, 2),
@@ -85952,7 +86112,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, 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 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, backgroundTasksMappingFunc = _a.backgroundTasksMappingFunc;
     var classes = useStyles$7();
     var helperClasses = useHelperStyles();
     var getCurrentTab = function () { return parseUrlState().currentTab; };
@@ -86199,7 +86359,7 @@ var PerfAdvisorTabs = function (_a) {
                 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, 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 ||
+                        clusterLoadOverallSubTab === ClusterLoadOverallTabs.QUERIES && (jsx(Box$1, { mt: 2, 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, backgroundTasksMappingFunc: backgroundTasksMappingFunc }) })), 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 &&
                     clusterLoadSubTab === ClusterLoadSubTabs.OVERALL_LOAD &&
                     clusterLoadOverallSubTab === ClusterLoadOverallTabs.ANOMALIES)) && (jsx(Box$1, { mt: 2, mb: appName === AppName.WEB ? 4 : 0, ml: appName === AppName.WEB && currentTab === InsightsTabs.CLUSTER_LOAD ? 2 : 0, children: jsx(DetectedAnomalies, { apiUrl: apiUrl, appName: appName, endTime: endTime, startTime: startTime, currentTab: currentTab, universeUuid: universeUuid, anomalyGroups: anomalyGroups, onSelectedIssue: onSelectedIssue, fetchAnomalyGroups: fetchAnomalyGroups, anomalyGroupsFetchError: anomalyGroupsFetchError, onClickShowMoreAnomalies: onClickShowMoreAnomalies, onNavigateToUrl: onNavigateToUrl }) }))] }));
@@ -92513,7 +92673,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.runtimeConfigs, runtimeConfigs = _m === void 0 ? { showDbLoadView: true, showBgTasksView: true } : _m, _o = _a.showStandaloneAnomalies, showStandaloneAnomalies = _o === void 0 ? false : _o, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl;
+    var timezone = _a.timezone, universeUuid = _a.universeUuid, appName = _a.appName, apiUrl = _a.apiUrl, _m = _a.runtimeConfigs, runtimeConfigs = _m === void 0 ? { showDbLoadView: true, showBgTasksView: true } : _m, _o = _a.showStandaloneAnomalies, showStandaloneAnomalies = _o === void 0 ? false : _o, onSelectedIssue = _a.onSelectedIssue, onSelectedQuery = _a.onSelectedQuery, onNavigateToUrl = _a.onNavigateToUrl, backgroundTasksMappingFunc = _a.backgroundTasksMappingFunc;
     var helperClasses = useHelperStyles();
     var searchParams = new URLSearchParams(window.location.search);
     var end = searchParams === null || searchParams === void 0 ? void 0 : searchParams.get('endTime');
@@ -92644,7 +92804,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, 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 }))] }) }))] }) }));
+                                        : 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, backgroundTasksMappingFunc: backgroundTasksMappingFunc }) })), 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 ({