chore: additional performance fix

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -86,6 +86,7 @@ interface QuerySearchProps {
 	signalSource?: string;
 	hardcodedAttributeKeys?: QueryKeyDataSuggestionsProps[];
 	onRun?: (query: string) => void;
+	showFilterSuggestionsWithoutMetric?: boolean;
 }
 
 function QuerySearch({
@@ -96,6 +97,7 @@ function QuerySearch({
 	onRun,
 	signalSource,
 	hardcodedAttributeKeys,
+	showFilterSuggestionsWithoutMetric,
 }: QuerySearchProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const [valueSuggestions, setValueSuggestions] = useState<any[]>([]);
@@ -252,7 +254,8 @@ function QuerySearch({
 		async (searchText?: string): Promise<void> => {
 			if (
 				dataSource === DataSource.METRICS &&
-				!queryData.aggregateAttribute?.key
+				!queryData.aggregateAttribute?.key &&
+				!showFilterSuggestionsWithoutMetric
 			) {
 				setKeySuggestions([]);
 				return;
@@ -301,6 +304,7 @@ function QuerySearch({
 			queryData.aggregateAttribute?.key,
 			signalSource,
 			hardcodedAttributeKeys,
+			showFilterSuggestionsWithoutMetric,
 		],
 	);
 
@@ -1562,6 +1566,7 @@ QuerySearch.defaultProps = {
 	hardcodedAttributeKeys: undefined,
 	placeholder:
 		"Enter your filter query (e.g., http.status_code >= 500 AND service.name = 'frontend')",
+	showFilterSuggestionsWithoutMetric: false,
 };
 
 export default QuerySearch;

frontend/src/container/MetricsExplorer/Summary/MetricNameSearch.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useSearchParams } from 'react-router-dom-v5-compat';
 import {
 	Button,
 	Empty,
@@ -10,22 +9,24 @@ import {
 	Popover,
 	Spin,
 } from 'antd';
+import { Filter } from 'api/v5/v5';
+import {
+	convertExpressionToFilters,
+	convertFiltersToExpression,
+} from 'components/QueryBuilderV2/utils';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useGetMetricsListFilterValues } from 'hooks/metricsExplorer/useGetMetricsListFilterValues';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
 import { Search } from 'lucide-react';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
-
-import { SUMMARY_FILTERS_KEY } from './constants';
 
 function MetricNameSearch({
-	queryFilters,
+	queryFilterExpression,
+	onFilterChange,
 }: {
-	queryFilters: TagFilter;
+	queryFilterExpression: Filter;
+	onFilterChange: (value: string) => void;
 }): JSX.Element {
-	const [searchParams, setSearchParams] = useSearchParams();
-
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 	const [searchString, setSearchString] = useState<string>('');
 	const [debouncedSearchString, setDebouncedSearchString] = useState<string>('');
@@ -67,9 +68,12 @@ function MetricNameSearch({
 
 	const handleSelect = useCallback(
 		(selectedMetricName: string): void => {
+			const queryFilters = convertExpressionToFilters(
+				queryFilterExpression?.expression,
+			);
 			const newFilters = {
 				items: [
-					...queryFilters.items,
+					...queryFilters,
 					{
 						id: 'metric_name',
 						op: 'CONTAINS',
@@ -83,13 +87,11 @@ function MetricNameSearch({
 				],
 				op: 'and',
 			};
-			setSearchParams({
-				...Object.fromEntries(searchParams.entries()),
-				[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
-			});
+			const newFilterExpression = convertFiltersToExpression(newFilters);
+			onFilterChange(newFilterExpression.expression);
 			setIsPopoverOpen(false);
 		},
-		[queryFilters.items, setSearchParams, searchParams],
+		[queryFilterExpression, onFilterChange],
 	);
 
 	const metricNameFilterValues = useMemo(

frontend/src/container/MetricsExplorer/Summary/MetricTypeSearch.tsx

@@ -1,23 +1,19 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom-v5-compat';
 import { Button, Menu, Popover, Tooltip } from 'antd';
-import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
+import { convertFiltersToExpression } from 'components/QueryBuilderV2/utils';
 import { Search } from 'lucide-react';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import {
-	METRIC_TYPE_LABEL_MAP,
-	METRIC_TYPE_VALUES_MAP,
-	SUMMARY_FILTERS_KEY,
-} from './constants';
+import { METRIC_TYPE_LABEL_MAP_V2 } from './constants';
 
 function MetricTypeSearch({
 	queryFilters,
+	onFilterChange,
 }: {
 	queryFilters: TagFilter;
+	onFilterChange: (expression: string) => void;
 }): JSX.Element {
-	const [searchParams, setSearchParams] = useSearchParams();
-
 	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const menuItems = useMemo(
@@ -26,9 +22,9 @@ function MetricTypeSearch({
 				key: 'all',
 				value: 'All',
 			},
-			...Object.keys(METRIC_TYPE_LABEL_MAP).map((key) => ({
-				key: METRIC_TYPE_VALUES_MAP[key as MetricType],
-				value: METRIC_TYPE_LABEL_MAP[key as MetricType],
+			...Object.keys(METRIC_TYPE_LABEL_MAP_V2).map((key) => ({
+				key: METRIC_TYPE_LABEL_MAP_V2[key as MetrictypesTypeDTO],
+				value: METRIC_TYPE_LABEL_MAP_V2[key as MetrictypesTypeDTO],
 			})),
 		],
 		[],
@@ -36,16 +32,17 @@ function MetricTypeSearch({
 
 	const handleSelect = useCallback(
 		(selectedMetricType: string): void => {
+			let newFilters;
 			if (selectedMetricType !== 'all') {
-				const newFilters = {
+				newFilters = {
 					items: [
 						...queryFilters.items,
 						{
-							id: 'metric_type',
+							id: 'ttype',
 							op: '=',
 							key: {
-								id: 'metric_type',
-								key: 'metric_type',
+								id: 'type',
+								key: 'type',
 								type: 'tag',
 							},
 							value: selectedMetricType,
@@ -53,23 +50,17 @@ function MetricTypeSearch({
 					],
 					op: 'AND',
 				};
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
-				});
 			} else {
-				const newFilters = {
-					items: queryFilters.items.filter((item) => item.id !== 'metric_type'),
+				newFilters = {
+					items: queryFilters.items.filter((item) => item.id !== 'type'),
 					op: 'AND',
 				};
-				setSearchParams({
-					...Object.fromEntries(searchParams.entries()),
-					[SUMMARY_FILTERS_KEY]: JSON.stringify(newFilters),
-				});
 			}
+			const newFilterExpression = convertFiltersToExpression(newFilters);
+			onFilterChange(newFilterExpression.expression);
 			setIsPopoverOpen(false);
 		},
-		[queryFilters.items, setSearchParams, searchParams],
+		[queryFilters.items, onFilterChange],
 	);
 
 	const menu = (

frontend/src/container/MetricsExplorer/Summary/MetricsSearch.tsx

@@ -1,27 +1,59 @@
-import { Tooltip } from 'antd';
-import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { useEffect, useState } from 'react';
+import { Button, Tooltip } from 'antd';
+import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
-import { HardHat, Info } from 'lucide-react';
+import { Info, Play } from 'lucide-react';
+import { DataSource } from 'types/common/queryBuilder';
 
 import { MetricsSearchProps } from './types';
 
 function MetricsSearch({ query, onChange }: MetricsSearchProps): JSX.Element {
+	const [currentExpression, setCurrentExpression] = useState<string>(
+		query?.filter?.expression || '',
+	);
+
+	useEffect(() => {
+		const expression = query?.filter?.expression || '';
+		setCurrentExpression(expression);
+	}, [query?.filter?.expression]);
+
+	const handleOnChange = (expression: string): void => {
+		setCurrentExpression(expression);
+	};
+
+	const handleStageAndRunQuery = (): void => onChange(currentExpression);
+
 	return (
 		<div className="metrics-search-container">
-			<div className="qb-search-container">
+			<div data-testid="qb-search-container" className="qb-search-container">
 				<Tooltip
 					title="Use filters to refine metrics based on attributes. Example: service_name=api - Shows all metrics associated with the API service"
 					placement="right"
 				>
 					<Info size={16} />
 				</Tooltip>
-				<QueryBuilderSearch
-					query={query}
-					onChange={onChange}
-					suffixIcon={<HardHat size={16} />}
-					isMetricsExplorer
+				<QuerySearch
+					onChange={handleOnChange}
+					dataSource={DataSource.METRICS}
+					queryData={{
+						...query,
+						filter: {
+							...query?.filter,
+							expression: currentExpression,
+						},
+					}}
+					onRun={handleOnChange}
+					showFilterSuggestionsWithoutMetric
 				/>
 			</div>
+			<Button
+				type="primary"
+				onClick={handleStageAndRunQuery}
+				className="stage-run-query"
+				icon={<Play size={14} />}
+			>
+				Stage & Run Query
+			</Button>
 			<div className="metrics-search-options">
 				<DateTimeSelectionV2
 					showAutoRefresh={false}

frontend/src/container/MetricsExplorer/Summary/MetricsTable.tsx

@@ -24,7 +24,8 @@ function MetricsTable({
 	setOrderBy,
 	totalCount,
 	openMetricDetails,
-	queryFilters,
+	queryFilterExpression,
+	onFilterChange,
 }: MetricsTableProps): JSX.Element {
 	const handleTableChange: TableProps<MetricsListItemRowData>['onChange'] = useCallback(
 		(
@@ -36,13 +37,17 @@ function MetricsTable({
 		): void => {
 			if ('field' in sorter && sorter.order) {
 				setOrderBy({
-					columnName: sorter.field as string,
-					order: sorter.order === 'ascend' ? 'asc' : 'desc',
+					key: {
+						name: sorter.field as string,
+					},
+					direction: sorter.order === 'ascend' ? 'asc' : 'desc',
 				});
 			} else {
 				setOrderBy({
-					columnName: 'samples',
-					order: 'desc',
+					key: {
+						name: 'samples',
+					},
+					direction: 'desc',
 				});
 			}
 		},
@@ -51,19 +56,17 @@ function MetricsTable({
 
 	return (
 		<div className="metrics-table-container">
-			{!isError && !isLoading && (
-				<div className="metrics-table-title" data-testid="metrics-table-title">
-					<Typography.Title level={4} className="metrics-table-title">
-						List View
-					</Typography.Title>
-					<Tooltip
-						title="The table displays all metrics in the selected time range. Each row represents a unique metric, and its metric name, and metadata like description, type, unit, and samples/timeseries cardinality observed in the selected time range."
-						placement="right"
-					>
-						<Info size={16} />
-					</Tooltip>
-				</div>
-			)}
+			<div className="metrics-table-title" data-testid="metrics-table-title">
+				<Typography.Title level={4} className="metrics-table-title">
+					List View
+				</Typography.Title>
+				<Tooltip
+					title="The table displays all metrics in the selected time range. Each row represents a unique metric, and its metric name, and metadata like description, type, unit, and samples/timeseries cardinality observed in the selected time range."
+					placement="right"
+				>
+					<Info size={16} />
+				</Tooltip>
+			</div>
 			<Table
 				loading={{
 					spinning: isLoading,
@@ -75,7 +78,7 @@ function MetricsTable({
 					),
 				}}
 				dataSource={data}
-				columns={getMetricsTableColumns(queryFilters)}
+				columns={getMetricsTableColumns(queryFilterExpression, onFilterChange)}
 				locale={{
 					emptyText: isLoading ? null : (
 						<div

frontend/src/container/MetricsExplorer/Summary/MetricsTreemap.tsx

@@ -3,6 +3,7 @@ import { useWindowSize } from 'react-use';
 import { Group } from '@visx/group';
 import { Treemap } from '@visx/hierarchy';
 import { Empty, Select, Skeleton, Tooltip, Typography } from 'antd';
+import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
 import { stratify, treemapBinary } from 'd3-hierarchy';
 import { Info } from 'lucide-react';
 
@@ -12,7 +13,7 @@ import {
 	TREEMAP_SQUARE_PADDING,
 	TREEMAP_VIEW_OPTIONS,
 } from './constants';
-import { MetricsTreemapProps, TreemapTile, TreemapViewType } from './types';
+import { MetricsTreemapProps, TreemapTile } from './types';
 import {
 	getTreemapTileStyle,
 	getTreemapTileTextStyle,
@@ -40,9 +41,9 @@ function MetricsTreemap({
 
 	const treemapData = useMemo(() => {
 		const extracedTreemapData =
-			(viewType === TreemapViewType.TIMESERIES
-				? data?.data?.[TreemapViewType.TIMESERIES]
-				: data?.data?.[TreemapViewType.SAMPLES]) || [];
+			(viewType === MetricsexplorertypesTreemapModeDTO.timeseries
+				? data?.timeseries
+				: data?.samples) || [];
 		return transformTreemapData(extracedTreemapData, viewType);
 	}, [data, viewType]);
 
@@ -54,62 +55,36 @@ function MetricsTreemap({
 	const xMax = treemapWidth - TREEMAP_MARGINS.LEFT - TREEMAP_MARGINS.RIGHT;
 	const yMax = TREEMAP_HEIGHT - TREEMAP_MARGINS.TOP - TREEMAP_MARGINS.BOTTOM;
 
-	if (isLoading) {
-		return (
-			<div data-testid="metrics-treemap-loading-state">
-				<Skeleton
-					style={{ width: treemapWidth, height: TREEMAP_HEIGHT + 55 }}
-					active
-				/>
-			</div>
-		);
-	}
-
-	if (
-		!data ||
-		!data.data ||
-		(data?.status === 'success' && !data?.data?.[viewType])
-	) {
-		return (
-			<Empty
-				description="No metrics found"
-				data-testid="metrics-treemap-empty-state"
-				style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
-			/>
-		);
-	}
-
-	if (data?.status === 'error' || isError) {
-		return (
-			<Empty
-				description="Error fetching metrics. If the problem persists, please contact support."
-				data-testid="metrics-treemap-error-state"
-				style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
-			/>
-		);
-	}
-
-	return (
-		<div
-			className="metrics-treemap-container"
-			data-testid="metrics-treemap-container"
-		>
-			<div className="metrics-treemap-title">
-				<div className="metrics-treemap-title-left">
-					<Typography.Title level={4}>Proportion View</Typography.Title>
-					<Tooltip
-						title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
-						placement="right"
-					>
-						<Info size={16} />
-					</Tooltip>
+	const treemapContent = useMemo(() => {
+		if (isLoading) {
+			return (
+				<div data-testid="metrics-treemap-loading-state">
+					<Skeleton style={{ width: treemapWidth, height: TREEMAP_HEIGHT }} active />
 				</div>
-				<Select
-					options={TREEMAP_VIEW_OPTIONS}
-					value={viewType}
-					onChange={setHeatmapView}
+			);
+		}
+
+		if (isError) {
+			return (
+				<Empty
+					description="Error fetching metrics. If the problem persists, please contact support."
+					data-testid="metrics-treemap-error-state"
+					style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
 				/>
-			</div>
+			);
+		}
+
+		if (!data || !data?.[viewType]?.length) {
+			return (
+				<Empty
+					description="No metrics found"
+					data-testid="metrics-treemap-empty-state"
+					style={{ width: treemapWidth, height: TREEMAP_HEIGHT, paddingTop: 30 }}
+				/>
+			);
+		}
+
+		return (
 			<svg
 				width={treemapWidth}
 				height={TREEMAP_HEIGHT}
@@ -174,6 +149,42 @@ function MetricsTreemap({
 					)}
 				</Treemap>
 			</svg>
+		);
+	}, [
+		data,
+		isError,
+		isLoading,
+		openMetricDetails,
+		transformedTreemapData,
+		treemapWidth,
+		viewType,
+		xMax,
+		yMax,
+	]);
+
+	return (
+		<div
+			className="metrics-treemap-container"
+			data-testid="metrics-treemap-container"
+		>
+			<div className="metrics-treemap-title">
+				<div className="metrics-treemap-title-left">
+					<Typography.Title level={4}>Proportion View</Typography.Title>
+					<Tooltip
+						title="The treemap displays the proportion of samples/timeseries in the selected time range. Each tile represents a unique metric, and its size indicates the percentage of samples/timeseries it contributes to the total."
+						placement="right"
+					>
+						<Info size={16} />
+					</Tooltip>
+				</div>
+				<Select
+					options={TREEMAP_VIEW_OPTIONS}
+					value={viewType}
+					onChange={setHeatmapView}
+					disabled={isLoading}
+				/>
+			</div>
+			{treemapContent}
 		</div>
 	);
 }

frontend/src/container/MetricsExplorer/Summary/Summary.styles.scss

@@ -38,6 +38,7 @@
 	.metrics-search-container {
 		display: flex;
 		gap: 16px;
+		align-items: center;
 
 		.metrics-search-options {
 			display: flex;

frontend/src/container/MetricsExplorer/Summary/Summary.tsx

@@ -4,11 +4,23 @@ import { useSelector } from 'react-redux';
 import { useSearchParams } from 'react-router-dom-v5-compat';
 import * as Sentry from '@sentry/react';
 import logEvent from 'api/common/logEvent';
-import { initialQueriesMap } from 'constants/queryBuilder';
+import {
+	useGetMetricsStats,
+	useGetMetricsTreemap,
+} from 'api/generated/services/metrics';
+import {
+	MetricsexplorertypesStatsRequestDTO,
+	MetricsexplorertypesTreemapModeDTO,
+	MetricsexplorertypesTreemapRequestDTO,
+	Querybuildertypesv5OrderByDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
+	convertExpressionToFilters,
+	convertFiltersToExpression,
+} from 'components/QueryBuilderV2/utils';
 import { usePageSize } from 'container/InfraMonitoringK8s/utils';
 import NoLogs from 'container/NoLogs/NoLogs';
-import { useGetMetricsList } from 'hooks/metricsExplorer/useGetMetricsList';
-import { useGetMetricsTreeMap } from 'hooks/metricsExplorer/useGetMetricsTreeMap';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import { AppState } from 'store/reducers';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
@@ -23,32 +35,38 @@ import {
 	IS_INSPECT_MODAL_OPEN_KEY,
 	IS_METRIC_DETAILS_OPEN_KEY,
 	SELECTED_METRIC_NAME_KEY,
-	SUMMARY_FILTERS_KEY,
 } from './constants';
 import MetricsSearch from './MetricsSearch';
 import MetricsTable from './MetricsTable';
 import MetricsTreemap from './MetricsTreemap';
-import { OrderByPayload, TreemapViewType } from './types';
-import {
-	convertNanoToMilliseconds,
-	formatDataForMetricsTable,
-	getMetricsListQuery,
-} from './utils';
+import { convertNanoToMilliseconds, formatDataForMetricsTable } from './utils';
 
 import './Summary.styles.scss';
 
-const DEFAULT_ORDER_BY: OrderByPayload = {
-	columnName: 'samples',
-	order: 'desc',
+const DEFAULT_ORDER_BY: Querybuildertypesv5OrderByDTO = {
+	key: {
+		name: 'samples',
+	},
+	direction: 'desc',
 };
 
 function Summary(): JSX.Element {
 	const { pageSize, setPageSize } = usePageSize('metricsExplorer');
 	const [currentPage, setCurrentPage] = useState(1);
-	const [orderBy, setOrderBy] = useState<OrderByPayload>(DEFAULT_ORDER_BY);
-	const [heatmapView, setHeatmapView] = useState<TreemapViewType>(
-		TreemapViewType.TIMESERIES,
+	const [orderBy, setOrderBy] = useState<Querybuildertypesv5OrderByDTO>(
+		DEFAULT_ORDER_BY,
 	);
+	const [
+		heatmapView,
+		setHeatmapView,
+	] = useState<MetricsexplorertypesTreemapModeDTO>(
+		MetricsexplorertypesTreemapModeDTO.timeseries,
+	);
+
+	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
+	const query = useMemo(() => currentQuery?.builder?.queryData[0], [
+		currentQuery,
+	]);
 
 	const [searchParams, setSearchParams] = useSearchParams();
 	const [isMetricDetailsOpen, setIsMetricDetailsOpen] = useState(
@@ -65,17 +83,6 @@ function Summary(): JSX.Element {
 		(state) => state.globalTime,
 	);
 
-	const queryFilters: TagFilter = useMemo(() => {
-		const encodedFilters = searchParams.get(SUMMARY_FILTERS_KEY);
-		if (encodedFilters) {
-			return JSON.parse(encodedFilters);
-		}
-		return {
-			items: [],
-			op: 'AND',
-		};
-	}, [searchParams]);
-
 	useEffect(() => {
 		logEvent(MetricsExplorerEvents.TabChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -87,105 +94,112 @@ function Summary(): JSX.Element {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	// This is used to avoid the filters from being serialized with the id
-	const queryFiltersWithoutId = useMemo(() => {
-		const filtersWithoutId = {
-			...queryFilters,
-			items: queryFilters.items.map(({ id: _id, ...rest }) => rest),
-		};
-		return JSON.stringify(filtersWithoutId);
-	}, [queryFilters]);
+	const queryFilterExpression = useMemo(() => {
+		const filters = query?.filters || { items: [], op: 'AND' };
+		return convertFiltersToExpression(filters);
+	}, [query?.filters]);
 
-	const metricsListQuery = useMemo(() => {
-		const baseQuery = getMetricsListQuery();
+	const metricsListQuery: MetricsexplorertypesStatsRequestDTO = useMemo(() => {
 		return {
-			...baseQuery,
-			limit: pageSize,
-			offset: (currentPage - 1) * pageSize,
-			filters: queryFilters,
 			start: convertNanoToMilliseconds(minTime),
 			end: convertNanoToMilliseconds(maxTime),
+			limit: pageSize,
+			offset: (currentPage - 1) * pageSize,
 			orderBy,
+			filter: {
+				expression: queryFilterExpression.expression,
+			},
 		};
-	}, [queryFilters, minTime, maxTime, orderBy, pageSize, currentPage]);
+	}, [
+		minTime,
+		maxTime,
+		orderBy,
+		pageSize,
+		currentPage,
+		queryFilterExpression.expression,
+	]);
 
-	const metricsTreemapQuery = useMemo(
+	const metricsTreemapQuery: MetricsexplorertypesTreemapRequestDTO = useMemo(
 		() => ({
 			limit: 100,
-			filters: queryFilters,
 			treemap: heatmapView,
 			start: convertNanoToMilliseconds(minTime),
 			end: convertNanoToMilliseconds(maxTime),
+			mode: heatmapView,
+			filter: {
+				expression: queryFilterExpression.expression,
+			},
 		}),
-		[queryFilters, heatmapView, minTime, maxTime],
+		[heatmapView, minTime, maxTime, queryFilterExpression.expression],
 	);
 
 	const {
 		data: metricsData,
-		isLoading: isMetricsLoading,
-		isFetching: isMetricsFetching,
-		isError: isMetricsError,
-	} = useGetMetricsList(metricsListQuery, {
-		enabled: !!metricsListQuery && !isInspectModalOpen,
-		queryKey: [
-			'metricsList',
-			queryFiltersWithoutId,
-			orderBy,
-			pageSize,
-			currentPage,
-			minTime,
-			maxTime,
-		],
-	});
+		mutate: getMetricsStats,
+		isLoading: isGetMetricsStatsLoading,
+		isError: isGetMetricsStatsError,
+	} = useGetMetricsStats();
 
 	const isListViewError = useMemo(
-		() => isMetricsError || !!(metricsData && metricsData.statusCode !== 200),
-		[isMetricsError, metricsData],
+		() => isGetMetricsStatsError || metricsData?.status !== 200,
+		[isGetMetricsStatsError, metricsData],
 	);
 
 	const {
 		data: treeMapData,
-		isLoading: isTreeMapLoading,
-		isFetching: isTreeMapFetching,
-		isError: isTreeMapError,
-	} = useGetMetricsTreeMap(metricsTreemapQuery, {
-		enabled: !!metricsTreemapQuery && !isInspectModalOpen,
-		queryKey: [
-			'metricsTreemap',
-			queryFiltersWithoutId,
-			heatmapView,
-			minTime,
-			maxTime,
-		],
-	});
+		mutate: getMetricsTreemap,
+		isLoading: isGetMetricsTreemapLoading,
+		isError: isGetMetricsTreemapError,
+	} = useGetMetricsTreemap();
+
+	useEffect(() => {
+		getMetricsStats({
+			data: metricsListQuery,
+		});
+		getMetricsTreemap({
+			data: metricsTreemapQuery,
+		});
+	}, [
+		metricsTreemapQuery,
+		metricsListQuery,
+		getMetricsTreemap,
+		getMetricsStats,
+	]);
 
 	const isProportionViewError = useMemo(
-		() => isTreeMapError || treeMapData?.statusCode !== 200,
-		[isTreeMapError, treeMapData],
+		() => isGetMetricsTreemapError || treeMapData?.status !== 200,
+		[isGetMetricsTreemapError, treeMapData],
 	);
 
 	const handleFilterChange = useCallback(
-		(value: TagFilter) => {
-			setSearchParams({
-				...Object.fromEntries(searchParams.entries()),
-				[SUMMARY_FILTERS_KEY]: JSON.stringify(value),
+		(expression: string) => {
+			const newFilters: TagFilter = {
+				items: convertExpressionToFilters(expression),
+				op: 'AND',
+			};
+			redirectWithQueryBuilderData({
+				...currentQuery,
+				builder: {
+					...currentQuery.builder,
+					queryData: [
+						{
+							...currentQuery.builder.queryData[0],
+							filters: newFilters,
+							filter: {
+								expression,
+							},
+						},
+					],
+				},
 			});
 			setCurrentPage(1);
-			if (value.items.length > 0) {
+			if (expression) {
 				logEvent(MetricsExplorerEvents.FilterApplied, {
 					[MetricsExplorerEventKeys.Tab]: 'summary',
 				});
 			}
 		},
-		[setSearchParams, searchParams],
-	);
-
-	const searchQuery = useMemo(
-		() => ({
-			...initialQueriesMap.metrics.builder.queryData[0],
-			filters: queryFilters,
-		}),
-		[queryFilters],
+		[currentQuery, redirectWithQueryBuilderData],
 	);
 
 	const onPaginationChange = (page: number, pageSize: number): void => {
@@ -202,7 +216,7 @@ function Summary(): JSX.Element {
 	};
 
 	const formattedMetricsData = useMemo(
-		() => formatDataForMetricsTable(metricsData?.payload?.data?.metrics || []),
+		() => formatDataForMetricsTable(metricsData?.data?.data?.metrics || []),
 		[metricsData],
 	);
 
@@ -254,7 +268,9 @@ function Summary(): JSX.Element {
 		});
 	};
 
-	const handleSetHeatmapView = (view: TreemapViewType): void => {
+	const handleSetHeatmapView = (
+		view: MetricsexplorertypesTreemapModeDTO,
+	): void => {
 		setHeatmapView(view);
 		logEvent(MetricsExplorerEvents.TreemapViewChanged, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
@@ -262,63 +278,71 @@ function Summary(): JSX.Element {
 		});
 	};
 
-	const handleSetOrderBy = (orderBy: OrderByPayload): void => {
+	const handleSetOrderBy = (orderBy: Querybuildertypesv5OrderByDTO): void => {
 		setOrderBy(orderBy);
 		logEvent(MetricsExplorerEvents.OrderByApplied, {
 			[MetricsExplorerEventKeys.Tab]: 'summary',
-			[MetricsExplorerEventKeys.ColumnName]: orderBy.columnName,
-			[MetricsExplorerEventKeys.Order]: orderBy.order,
+			[MetricsExplorerEventKeys.ColumnName]: orderBy.key?.name,
+			[MetricsExplorerEventKeys.Order]: orderBy.direction,
 		});
 	};
 
 	const isMetricsListDataEmpty = useMemo(
-		() =>
-			formattedMetricsData.length === 0 && !isMetricsLoading && !isMetricsFetching,
-		[formattedMetricsData, isMetricsLoading, isMetricsFetching],
+		() => formattedMetricsData.length === 0 && !isGetMetricsStatsLoading,
+		[formattedMetricsData, isGetMetricsStatsLoading],
 	);
 
 	const isMetricsTreeMapDataEmpty = useMemo(
 		() =>
-			!treeMapData?.payload?.data[heatmapView]?.length &&
-			!isTreeMapLoading &&
-			!isTreeMapFetching,
+			!treeMapData?.data?.data?.[heatmapView]?.length &&
+			!isGetMetricsTreemapLoading,
+		[treeMapData?.data?.data, heatmapView, isGetMetricsTreemapLoading],
+	);
+
+	const showFullScreenLoading = useMemo(
+		() =>
+			(isGetMetricsStatsLoading || isGetMetricsTreemapLoading) &&
+			formattedMetricsData.length === 0 &&
+			!treeMapData?.data?.data?.[heatmapView]?.length,
 		[
-			treeMapData?.payload?.data,
+			isGetMetricsStatsLoading,
+			isGetMetricsTreemapLoading,
+			formattedMetricsData,
+			treeMapData,
 			heatmapView,
-			isTreeMapLoading,
-			isTreeMapFetching,
 		],
 	);
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
 			<div className="metrics-explorer-summary-tab">
-				<MetricsSearch query={searchQuery} onChange={handleFilterChange} />
-				{isMetricsLoading || isTreeMapLoading ? (
+				<MetricsSearch query={query} onChange={handleFilterChange} />
+				{showFullScreenLoading ? (
 					<MetricsLoading />
 				) : isMetricsListDataEmpty && isMetricsTreeMapDataEmpty ? (
 					<NoLogs dataSource={DataSource.METRICS} />
 				) : (
 					<>
 						<MetricsTreemap
-							data={treeMapData?.payload}
-							isLoading={isTreeMapLoading || isTreeMapFetching}
+							data={treeMapData?.data?.data}
+							isLoading={isGetMetricsTreemapLoading}
 							isError={isProportionViewError}
 							viewType={heatmapView}
 							openMetricDetails={openMetricDetails}
 							setHeatmapView={handleSetHeatmapView}
 						/>
 						<MetricsTable
-							isLoading={isMetricsLoading || isMetricsFetching}
+							isLoading={isGetMetricsStatsLoading}
 							isError={isListViewError}
 							data={formattedMetricsData}
 							pageSize={pageSize}
 							currentPage={currentPage}
 							onPaginationChange={onPaginationChange}
 							setOrderBy={handleSetOrderBy}
-							totalCount={metricsData?.payload?.data?.total || 0}
+							totalCount={metricsData?.data?.data?.total || 0}
 							openMetricDetails={openMetricDetails}
-							queryFilters={queryFilters}
+							queryFilterExpression={queryFilterExpression}
+							onFilterChange={handleFilterChange}
 						/>
 					</>
 				)}

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTable.test.tsx

@@ -1,10 +1,10 @@
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
+import { Filter } from 'api/v5/v5';
 import * as useGetMetricsListFilterValues from 'hooks/metricsExplorer/useGetMetricsListFilterValues';
 import * as useQueryBuilderOperationsHooks from 'hooks/queryBuilder/useQueryBuilderOperations';
 import store from 'store';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import MetricsTable from '../MetricsTable';
 import { MetricsListItemRowData } from '../types';
@@ -30,9 +30,8 @@ const mockData: MetricsListItemRowData[] = [
 	},
 ];
 
-const mockQueryFilters: TagFilter = {
-	items: [],
-	op: 'AND',
+const mockQueryFilterExpression: Filter = {
+	expression: '',
 };
 
 jest.mock('react-router-dom-v5-compat', () => {
@@ -82,7 +81,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -106,8 +106,9 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
 						isLoading
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -130,7 +131,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -158,7 +160,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -187,7 +190,8 @@ describe('MetricsTable', () => {
 						setOrderBy={jest.fn()}
 						totalCount={2}
 						openMetricDetails={mockOpenMetricDetails}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -212,7 +216,8 @@ describe('MetricsTable', () => {
 						setOrderBy={mockSetOrderBy}
 						totalCount={2}
 						openMetricDetails={jest.fn()}
-						queryFilters={mockQueryFilters}
+						queryFilterExpression={mockQueryFilterExpression}
+						onFilterChange={jest.fn()}
 					/>
 				</Provider>
 			</MemoryRouter>,
@@ -222,8 +227,10 @@ describe('MetricsTable', () => {
 		fireEvent.click(samplesHeader);
 
 		expect(mockSetOrderBy).toHaveBeenCalledWith({
-			columnName: 'samples',
-			order: 'asc',
+			key: {
+				name: 'samples',
+			},
+			direction: 'asc',
 		});
 	});
 });

frontend/src/container/MetricsExplorer/Summary/__tests__/MetricsTreemap.test.tsx

@@ -1,10 +1,10 @@
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
+import { MetricsexplorertypesTreemapModeDTO } from 'api/generated/services/sigNoz.schemas';
 import store from 'store';
 
 import MetricsTreemap from '../MetricsTreemap';
-import { TreemapViewType } from '../types';
 
 jest.mock('d3-hierarchy', () => ({
 	stratify: jest.fn().mockReturnValue({
@@ -27,14 +27,14 @@ jest.mock('react-use', () => ({
 
 const mockData = [
 	{
-		metric_name: 'Metric 1',
+		metricName: 'Metric 1',
 		percentage: 0.5,
-		total_value: 15,
+		totalValue: 15,
 	},
 	{
-		metric_name: 'Metric 2',
+		metricName: 'Metric 2',
 		percentage: 0.6,
-		total_value: 10,
+		totalValue: 10,
 	},
 ];
 
@@ -47,14 +47,11 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError={false}
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -72,14 +69,11 @@ describe('MetricsTreemap', () => {
 						isLoading
 						isError={false}
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -99,14 +93,11 @@ describe('MetricsTreemap', () => {
 						isLoading={false}
 						isError
 						data={{
-							status: 'success',
-							data: {
-								timeseries: [mockData[0]],
-								samples: [mockData[1]],
-							},
+							timeseries: [mockData[0]],
+							samples: [mockData[1]],
 						}}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>
@@ -130,7 +121,7 @@ describe('MetricsTreemap', () => {
 						isError={false}
 						data={null}
 						openMetricDetails={jest.fn()}
-						viewType={TreemapViewType.SAMPLES}
+						viewType={MetricsexplorertypesTreemapModeDTO.samples}
 						setHeatmapView={jest.fn()}
 					/>
 				</Provider>

frontend/src/container/MetricsExplorer/Summary/__tests__/utils.test.tsx

@@ -1,8 +1,9 @@
 import { Color } from '@signozhq/design-tokens';
 import { render } from '@testing-library/react';
+import { MetrictypesTypeDTO } from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
+import { Filter } from 'api/v5/v5';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { TreemapViewType } from '../types';
 import {
@@ -11,52 +12,76 @@ import {
 	MetricTypeRenderer,
 } from '../utils';
 
-describe('metricsTableColumns', () => {
-	const mockQueryFilters: TagFilter = {
-		items: [],
-		op: 'AND',
-	};
+const mockQueryExpression: Filter = {
+	expression: '',
+};
+const mockOnChange = jest.fn();
 
+describe('metricsTableColumns', () => {
 	it('should have correct column definitions', () => {
-		expect(getMetricsTableColumns(mockQueryFilters)).toHaveLength(6);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange),
+		).toHaveLength(6);
 
 		// Metric Name column
-		expect(getMetricsTableColumns(mockQueryFilters)[0].dataIndex).toBe(
-			'metric_name',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[0].width).toBe(400);
-		expect(getMetricsTableColumns(mockQueryFilters)[0].sorter).toBe(false);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].dataIndex,
+		).toBe('metric_name');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].width,
+		).toBe(400);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[0].sorter,
+		).toBe(false);
 
 		// Description column
-		expect(getMetricsTableColumns(mockQueryFilters)[1].dataIndex).toBe(
-			'description',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[1].width).toBe(400);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].dataIndex,
+		).toBe('description');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[1].width,
+		).toBe(400);
 
 		// Type column
-		expect(getMetricsTableColumns(mockQueryFilters)[2].dataIndex).toBe(
-			'metric_type',
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[2].width).toBe(150);
-		expect(getMetricsTableColumns(mockQueryFilters)[2].sorter).toBe(false);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].dataIndex,
+		).toBe('metric_type');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].width,
+		).toBe(150);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[2].sorter,
+		).toBe(false);
 
 		// Unit column
-		expect(getMetricsTableColumns(mockQueryFilters)[3].dataIndex).toBe('unit');
-		expect(getMetricsTableColumns(mockQueryFilters)[3].width).toBe(150);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].dataIndex,
+		).toBe('unit');
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[3].width,
+		).toBe(150);
 
 		// Samples column
-		expect(getMetricsTableColumns(mockQueryFilters)[4].dataIndex).toBe(
-			TreemapViewType.SAMPLES,
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[4].width).toBe(150);
-		expect(getMetricsTableColumns(mockQueryFilters)[4].sorter).toBe(true);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].dataIndex,
+		).toBe(TreemapViewType.SAMPLES);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].width,
+		).toBe(150);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[4].sorter,
+		).toBe(true);
 
 		// Time Series column
-		expect(getMetricsTableColumns(mockQueryFilters)[5].dataIndex).toBe(
-			TreemapViewType.TIMESERIES,
-		);
-		expect(getMetricsTableColumns(mockQueryFilters)[5].width).toBe(150);
-		expect(getMetricsTableColumns(mockQueryFilters)[5].sorter).toBe(true);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].dataIndex,
+		).toBe(TreemapViewType.TIMESERIES);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].width,
+		).toBe(150);
+		expect(
+			getMetricsTableColumns(mockQueryExpression, mockOnChange)[5].sorter,
+		).toBe(true);
 	});
 
 	describe('MetricTypeRenderer', () => {
@@ -111,12 +136,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should format metrics data correctly', () => {
 		const mockData = [
 			{
-				metric_name: 'test_metric',
+				metricName: 'test_metric',
 				description: 'Test description',
-				type: MetricType.GAUGE,
+				type: MetrictypesTypeDTO.gauge,
 				unit: 'bytes',
-				[TreemapViewType.SAMPLES]: 1000,
-				[TreemapViewType.TIMESERIES]: 2000,
+				samples: 1000,
+				timeseries: 2000,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];
@@ -163,12 +188,12 @@ describe('formatDataForMetricsTable', () => {
 	it('should handle empty/null values', () => {
 		const mockData = [
 			{
-				metric_name: '',
+				metricName: '',
 				description: '',
-				type: MetricType.GAUGE,
+				type: MetrictypesTypeDTO.gauge,
 				unit: '',
-				[TreemapViewType.SAMPLES]: 0,
-				[TreemapViewType.TIMESERIES]: 0,
+				samples: 0,
+				timeseries: 0,
 				lastReceived: '2023-01-01T00:00:00Z',
 			},
 		];

frontend/src/container/MetricsExplorer/Summary/constants.ts

@@ -1,15 +1,17 @@
+import {
+	MetricsexplorertypesTreemapModeDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
 import { MetricType } from 'api/metricsExplorer/getMetricsList';
 
-import { TreemapViewType } from './types';
-
 export const METRICS_TABLE_PAGE_SIZE = 10;
 
 export const TREEMAP_VIEW_OPTIONS: {
-	value: TreemapViewType;
+	value: MetricsexplorertypesTreemapModeDTO;
 	label: string;
 }[] = [
-	{ value: TreemapViewType.TIMESERIES, label: 'Time Series' },
-	{ value: TreemapViewType.SAMPLES, label: 'Samples' },
+	{ value: MetricsexplorertypesTreemapModeDTO.timeseries, label: 'Time Series' },
+	{ value: MetricsexplorertypesTreemapModeDTO.samples, label: 'Samples' },
 ];
 
 export const TREEMAP_HEIGHT = 200;
@@ -17,6 +19,7 @@ export const TREEMAP_SQUARE_PADDING = 5;
 
 export const TREEMAP_MARGINS = { TOP: 10, LEFT: 10, RIGHT: 10, BOTTOM: 10 };
 
+// TODO: Remove this once API migration is complete
 export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
@@ -25,6 +28,14 @@ export const METRIC_TYPE_LABEL_MAP = {
 	[MetricType.EXPONENTIAL_HISTOGRAM]: 'Exp. Histogram',
 };
 
+export const METRIC_TYPE_LABEL_MAP_V2 = {
+	[MetrictypesTypeDTO.sum]: 'Sum',
+	[MetrictypesTypeDTO.gauge]: 'Gauge',
+	[MetrictypesTypeDTO.histogram]: 'Histogram',
+	[MetrictypesTypeDTO.summary]: 'Summary',
+	[MetrictypesTypeDTO.exponentialhistogram]: 'Exp. Histogram',
+};
+
 export const METRIC_TYPE_VALUES_MAP = {
 	[MetricType.SUM]: 'Sum',
 	[MetricType.GAUGE]: 'Gauge',
@@ -36,4 +47,3 @@ export const METRIC_TYPE_VALUES_MAP = {
 export const IS_METRIC_DETAILS_OPEN_KEY = 'isMetricDetailsOpen';
 export const IS_INSPECT_MODAL_OPEN_KEY = 'isInspectModalOpen';
 export const SELECTED_METRIC_NAME_KEY = 'selectedMetricName';
-export const SUMMARY_FILTERS_KEY = 'summaryFilters';

frontend/src/container/MetricsExplorer/Summary/types.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-import { MetricsTreeMapResponse } from 'api/metricsExplorer/getMetricsTreeMap';
 import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
+	MetricsexplorertypesTreemapModeDTO,
+	MetricsexplorertypesTreemapResponseDTO,
+	Querybuildertypesv5OrderByDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { Filter } from 'api/v5/v5';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface MetricsTableProps {
 	isLoading: boolean;
@@ -12,24 +14,25 @@ export interface MetricsTableProps {
 	pageSize: number;
 	currentPage: number;
 	onPaginationChange: (page: number, pageSize: number) => void;
-	setOrderBy: (orderBy: OrderByPayload) => void;
+	setOrderBy: (orderBy: Querybuildertypesv5OrderByDTO) => void;
 	totalCount: number;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	queryFilters: TagFilter;
+	queryFilterExpression: Filter;
+	onFilterChange: (expression: string) => void;
 }
 
 export interface MetricsSearchProps {
 	query: IBuilderQuery;
-	onChange: (value: TagFilter) => void;
+	onChange: (expression: string) => void;
 }
 
 export interface MetricsTreemapProps {
-	data: MetricsTreeMapResponse | null | undefined;
+	data: MetricsexplorertypesTreemapResponseDTO | null | undefined;
 	isLoading: boolean;
 	isError: boolean;
-	viewType: TreemapViewType;
+	viewType: MetricsexplorertypesTreemapModeDTO;
 	openMetricDetails: (metricName: string, view: 'list' | 'treemap') => void;
-	setHeatmapView: (value: TreemapViewType) => void;
+	setHeatmapView: (value: MetricsexplorertypesTreemapModeDTO) => void;
 }
 
 export interface OrderByPayload {

frontend/src/container/MetricsExplorer/Summary/utils.tsx

@@ -3,14 +3,16 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip, Typography } from 'antd';
 import { ColumnType } from 'antd/es/table';
 import {
-	MetricsListItemData,
+	MetricsexplorertypesStatDTO,
+	MetricsexplorertypesTreemapEntryDTO,
+	MetricsexplorertypesTreemapModeDTO,
+	MetrictypesTypeDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import {
 	MetricsListPayload,
 	MetricType,
 } from 'api/metricsExplorer/getMetricsList';
-import {
-	SamplesData,
-	TimeseriesData,
-} from 'api/metricsExplorer/getMetricsTreeMap';
+import { Filter } from 'api/v5/v5';
 import { getUniversalNameFromMetricUnit } from 'components/YAxisUnitSelector/utils';
 import {
 	BarChart,
@@ -19,21 +21,23 @@ import {
 	Diff,
 	Gauge,
 } from 'lucide-react';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { METRIC_TYPE_LABEL_MAP } from './constants';
+import { METRIC_TYPE_LABEL_MAP, METRIC_TYPE_LABEL_MAP_V2 } from './constants';
 import MetricNameSearch from './MetricNameSearch';
-import MetricTypeSearch from './MetricTypeSearch';
-import { MetricsListItemRowData, TreemapTile, TreemapViewType } from './types';
+import { MetricsListItemRowData, TreemapTile } from './types';
 
 export const getMetricsTableColumns = (
-	queryFilters: TagFilter,
+	queryFilterExpression: Filter,
+	onFilterChange: (expression: string) => void,
 ): ColumnType<MetricsListItemRowData>[] => [
 	{
 		title: (
 			<div className="metric-name-column-header">
 				<span className="metric-name-column-header-text">METRIC</span>
-				<MetricNameSearch queryFilters={queryFilters} />
+				<MetricNameSearch
+					queryFilterExpression={queryFilterExpression}
+					onFilterChange={onFilterChange}
+				/>
 			</div>
 		),
 		dataIndex: 'metric_name',
@@ -55,7 +59,11 @@ export const getMetricsTableColumns = (
 		title: (
 			<div className="metric-type-column-header">
 				<span className="metric-type-column-header-text">TYPE</span>
-				<MetricTypeSearch queryFilters={queryFilters} />
+				{/* TODO: @amlannandy: Re-enable once API supports metric type filtering */}
+				{/* <MetricTypeSearch
+					queryFilters={queryFilters}
+					onFilterChange={onFilterChange}
+				/> */}
 			</div>
 		),
 		dataIndex: 'metric_type',
@@ -69,13 +77,13 @@ export const getMetricsTableColumns = (
 	},
 	{
 		title: 'SAMPLES',
-		dataIndex: TreemapViewType.SAMPLES,
+		dataIndex: MetricsexplorertypesTreemapModeDTO.samples,
 		width: 150,
 		sorter: true,
 	},
 	{
 		title: 'TIME SERIES',
-		dataIndex: TreemapViewType.TIMESERIES,
+		dataIndex: MetricsexplorertypesTreemapModeDTO.timeseries,
 		width: 150,
 		sorter: true,
 	},
@@ -143,6 +151,60 @@ export function MetricTypeRenderer({
 	);
 }
 
+export function MetricTypeRendererV2({
+	type,
+}: {
+	type: MetrictypesTypeDTO;
+}): JSX.Element {
+	const [icon, color] = useMemo(() => {
+		switch (type) {
+			case MetrictypesTypeDTO.sum:
+				return [
+					<Diff key={type} size={12} color={Color.BG_ROBIN_500} />,
+					Color.BG_ROBIN_500,
+				];
+			case MetrictypesTypeDTO.gauge:
+				return [
+					<Gauge key={type} size={12} color={Color.BG_SAKURA_500} />,
+					Color.BG_SAKURA_500,
+				];
+			case MetrictypesTypeDTO.histogram:
+				return [
+					<BarChart2 key={type} size={12} color={Color.BG_SIENNA_500} />,
+					Color.BG_SIENNA_500,
+				];
+			case MetrictypesTypeDTO.summary:
+				return [
+					<BarChartHorizontal key={type} size={12} color={Color.BG_FOREST_500} />,
+					Color.BG_FOREST_500,
+				];
+			case MetrictypesTypeDTO.exponentialhistogram:
+				return [
+					<BarChart key={type} size={12} color={Color.BG_AQUA_500} />,
+					Color.BG_AQUA_500,
+				];
+			default:
+				return [null, ''];
+		}
+	}, [type]);
+
+	return (
+		<div
+			className="metric-type-renderer"
+			style={{
+				backgroundColor: `${color}33`,
+				border: `1px solid ${color}`,
+				color,
+			}}
+		>
+			{icon}
+			<Typography.Text style={{ color, fontSize: 12 }}>
+				{METRIC_TYPE_LABEL_MAP_V2[type]}
+			</Typography.Text>
+		</div>
+	);
+}
+
 function ValidateRowValueWrapper({
 	value,
 	children,
@@ -182,13 +244,13 @@ export const formatNumberIntoHumanReadableFormat = (
 };
 
 export const formatDataForMetricsTable = (
-	data: MetricsListItemData[],
+	data: MetricsexplorertypesStatDTO[],
 ): MetricsListItemRowData[] =>
 	data.map((metric) => ({
-		key: metric.metric_name,
+		key: metric.metricName,
 		metric_name: (
-			<ValidateRowValueWrapper value={metric.metric_name}>
-				<Tooltip title={metric.metric_name}>{metric.metric_name}</Tooltip>
+			<ValidateRowValueWrapper value={metric.metricName}>
+				<Tooltip title={metric.metricName}>{metric.metricName}</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 		description: (
@@ -198,39 +260,54 @@ export const formatDataForMetricsTable = (
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		metric_type: <MetricTypeRenderer type={metric.type} />,
+		metric_type: <MetricTypeRendererV2 type={metric.type} />,
 		unit: (
 			<ValidateRowValueWrapper value={getUniversalNameFromMetricUnit(metric.unit)}>
 				{getUniversalNameFromMetricUnit(metric.unit)}
 			</ValidateRowValueWrapper>
 		),
-		[TreemapViewType.SAMPLES]: (
-			<ValidateRowValueWrapper value={metric[TreemapViewType.SAMPLES]}>
-				<Tooltip title={metric[TreemapViewType.SAMPLES].toLocaleString()}>
-					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.SAMPLES])}
+		[MetricsexplorertypesTreemapModeDTO.samples]: (
+			<ValidateRowValueWrapper
+				value={metric[MetricsexplorertypesTreemapModeDTO.samples]}
+			>
+				<Tooltip
+					title={metric[MetricsexplorertypesTreemapModeDTO.samples].toLocaleString()}
+				>
+					{formatNumberIntoHumanReadableFormat(
+						metric[MetricsexplorertypesTreemapModeDTO.samples],
+					)}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
-		[TreemapViewType.TIMESERIES]: (
-			<ValidateRowValueWrapper value={metric[TreemapViewType.TIMESERIES]}>
-				<Tooltip title={metric[TreemapViewType.TIMESERIES].toLocaleString()}>
-					{formatNumberIntoHumanReadableFormat(metric[TreemapViewType.TIMESERIES])}
+		[MetricsexplorertypesTreemapModeDTO.timeseries]: (
+			<ValidateRowValueWrapper
+				value={metric[MetricsexplorertypesTreemapModeDTO.timeseries]}
+			>
+				<Tooltip
+					title={metric[
+						MetricsexplorertypesTreemapModeDTO.timeseries
+					].toLocaleString()}
+				>
+					{formatNumberIntoHumanReadableFormat(
+						metric[MetricsexplorertypesTreemapModeDTO.timeseries],
+					)}
 				</Tooltip>
 			</ValidateRowValueWrapper>
 		),
 	}));
 
 export const transformTreemapData = (
-	data: TimeseriesData[] | SamplesData[],
-	viewType: TreemapViewType,
+	data: MetricsexplorertypesTreemapEntryDTO[],
+	viewType: MetricsexplorertypesTreemapModeDTO,
 ): TreemapTile[] => {
-	const totalSize = (data as (TimeseriesData | SamplesData)[]).reduce(
-		(acc: number, item: TimeseriesData | SamplesData) => acc + item.percentage,
+	const totalSize = data.reduce(
+		(acc: number, item: MetricsexplorertypesTreemapEntryDTO) =>
+			acc + item.percentage,
 		0,
 	);
 
 	const children = data.map((item) => ({
-		id: item.metric_name,
+		id: item.metricName,
 		size: totalSize > 0 ? Number((item.percentage / totalSize).toFixed(2)) : 0,
 		displayValue: Number(item.percentage).toFixed(2),
 		parent: viewType,