chore: variable name update:

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -359,7 +359,8 @@ function CustomTimePickerPopoverContent({
 						<Clock
 							color={Color.BG_ROBIN_400}
 							className="timezone-container__clock-icon"
-							size={14}
+							height={12}
+							width={12}
 						/>
 
 						<span className="timezone__name">{timezone.name}</span>

frontend/src/components/NewSelect/styles.scss

@@ -109,16 +109,6 @@ $custom-border-color: #2c3044;
 		color: color-mix(in srgb, var(--l2-foreground) 45%, transparent);
 	}
 
-	.ant-select-clear {
-		background-color: var(--l2-background);
-		color: var(--l2-foreground);
-		font-size: 12px;
-
-		&:hover {
-			color: var(--l1-foreground);
-		}
-	}
-
 	// Customize tags in multiselect (dark mode by default)
 	.ant-select-selection-item {
 		background-color: var(--l1-border);
@@ -402,9 +392,7 @@ $custom-border-color: #2c3044;
 // Custom dropdown styles for multi-select
 .custom-multiselect-dropdown {
 	padding: 8px 0 0 0;
-	// Tall enough to hold the react-virtuoso list (<=300px) + header/footer
-	// so only the list scrolls (avoids a second scrollbar on this container).
-	max-height: 410px;
+	max-height: 350px;
 	overflow-y: auto;
 	overflow-x: hidden;
 	scrollbar-width: thin;
@@ -495,12 +483,8 @@ $custom-border-color: #2c3044;
 		.option-checkbox {
 			width: 100%;
 
-			// @signozhq/ui Checkbox renders children inside a <label> that is
-			// content-sized by default. Make it fill the row (min-width: 0 lets it
-			// shrink) so the option text below can truncate instead of overflowing.
-			> label {
-				flex: 1 1 auto;
-				min-width: 0;
+			> span:not(.ant-checkbox) {
+				width: 100%;
 			}
 
 			.all-option-text {
@@ -517,12 +501,7 @@ $custom-border-color: #2c3044;
 				width: 100%;
 
 				.option-label-text {
-					flex: 1 1 auto;
-					min-width: 0;
 					margin-bottom: 0;
-					overflow: hidden;
-					white-space: nowrap;
-					text-overflow: ellipsis;
 				}
 
 				.option-badge {
@@ -535,30 +514,26 @@ $custom-border-color: #2c3044;
 				}
 			}
 
-			// Size the buttons to the row's resting content height (20px) and fully
-			// override antd's default 32px Button box, so revealing them on hover
-			// never changes the row height.
-			.only-btn,
+			.only-btn {
+				display: none;
+			}
 			.toggle-btn {
 				display: none;
-				align-items: center;
-				justify-content: center;
-				height: 18px;
-				min-height: 0;
-				padding: 0 6px;
-				font-size: 12px;
-				line-height: 1;
-				border: none;
-				box-shadow: none;
+			}
 
-				&:hover {
-					background-color: unset;
-				}
+			.only-btn:hover {
+				background-color: unset;
+			}
+			.toggle-btn:hover {
+				background-color: unset;
 			}
 
 			.option-content:hover {
 				.only-btn {
 					display: flex;
+					align-items: center;
+					justify-content: center;
+					height: 21px;
 				}
 				.toggle-btn {
 					display: none;
@@ -573,6 +548,9 @@ $custom-border-color: #2c3044;
 		.option-checkbox:hover {
 			.toggle-btn {
 				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 21px;
 			}
 			.option-badge {
 				display: none;

frontend/src/container/AlertHistory/Statistics/StatsCard/StatsCard.styles.scss

@@ -67,8 +67,8 @@
 	gap: 4px;
 
 	&--success {
-		background: color-mix(in srgb, var(--text-forest-500) 10%, transparent);
-		color: var(--text-forest-400);
+		background: color-mix(in srgb, var(--success-background) 10%, transparent);
+		color: var(--success-foreground);
 	}
 
 	&--error {

frontend/src/container/CreateAlertV2/NotificationSettings/styles.scss

@@ -153,7 +153,6 @@
 				font-size: 10px;
 				color: var(--l2-foreground);
 				margin-top: 4px;
-				display: block;
 			}
 		}
 

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -47,10 +47,18 @@
 		}
 
 		.ant-tabs-tab-active {
-			.overview-btn,
-			.variables-btn,
+			.overview-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
+			.variables-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
 			.public-dashboard-btn {
-				color: var(--primary-background);
+				border-radius: 2px 0px 0px 2px;
 				background: var(--l1-border);
 			}
 		}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -127,15 +127,6 @@
 					align-items: center;
 					justify-content: center;
 					gap: 4px;
-
-					.sidenav-beta-tag {
-						margin-left: 4px;
-					}
-
-					div {
-						display: flex;
-						align-items: center;
-					}
 				}
 
 				.variable-type-btn + .variable-type-btn {
@@ -186,7 +177,6 @@
 
 		.multiple-values-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {
@@ -203,7 +193,6 @@
 
 		.all-option-section {
 			justify-content: space-between;
-			align-items: flex-start;
 			margin-bottom: 0;
 
 			.typography-variables {

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -518,6 +518,7 @@ function VariableItem({
 										size={14}
 										style={{
 											color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+											marginTop: 1,
 										}}
 									/>
 								}
@@ -613,6 +614,7 @@ function VariableItem({
 												size={14}
 												style={{
 													color: isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500,
+													marginTop: 1,
 												}}
 											/>
 										}

frontend/src/container/FormAlertRules/QuerySection.styles.scss

@@ -19,7 +19,6 @@
 		}
 		.ant-btn-default {
 			border-color: transparent;
-			box-shadow: none;
 		}
 	}
 	.ant-tabs-tab-active {

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -72,20 +72,8 @@
 	.alert-rule-scope {
 		margin-bottom: 12px;
 
-		// `.createForm label` styles field labels (font-weight 500, 14px,
-		// 6px bottom padding). Those bleed into the @signozhq/ui RadioGroup
-		// option labels, making them bold and vertically misaligned with the
-		// radio control. Reset them back to plain option-text styling.
-		label {
-			padding: 0;
-			font-weight: 400;
-			line-height: normal;
-		}
-
-		// Loosen the design-system default (grid gap 0.5rem) between options.
-		.silence-alerts-radio-group {
-			margin-top: 8px;
-			gap: 12px;
+		.ant-radio-wrapper {
+			color: var(--l1-foreground);
 		}
 	}
 
@@ -156,7 +144,10 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-			margin-top: 12px;
+
+			.ant-btn {
+				margin-top: 8px;
+			}
 		}
 
 		.schedule-created-at {

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -54,7 +54,8 @@ import {
 } from './PlannedDowntimeutils';
 
 import './PlannedDowntime.styles.scss';
-import { RadioGroupItem, RadioGroup } from '@signozhq/ui/radio-group';
+import { RadioGroupItem } from '@signozhq/ui/radio-group';
+import { RadioGroup } from '@signozhq/ui/radio-group';
 
 dayjs.locale('en');
 dayjs.extend(utc);
@@ -470,7 +471,7 @@ export function PlannedDowntimeForm(
 						initialValue="specific"
 						className="alert-rule-scope"
 					>
-						<RadioGroup className="silence-alerts-radio-group">
+						<RadioGroup>
 							<RadioGroupItem value="all">All alert rules</RadioGroupItem>
 							<RadioGroupItem value="specific">Specific alert rules</RadioGroupItem>
 						</RadioGroup>

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -233,10 +233,8 @@
 			background: var(--l1-background);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			padding: 0px;
-			gap: 0;
-			margin: 4px;
 
-			.qb-tag-text {
+			.ant-typography {
 				color: var(--l1-foreground);
 				font-family: Inter;
 				font-size: 14px !important;
@@ -246,7 +244,7 @@
 				padding: 2px 6px;
 			}
 
-			> button {
+			.close-icon {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -261,26 +259,26 @@
 			&.resource {
 				border: 1px solid color-mix(in srgb, var(--bg-aqua-400) 13%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-aqua-400);
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 				}
 			}
 			&.tag {
 				border: 1px solid color-mix(in srgb, var(--bg-sienna-400) 20%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-sienna-400);
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 				}
 			}
@@ -288,13 +286,13 @@
 			&.scope {
 				border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
 
-				.qb-tag-text {
+				.ant-typography {
 					color: var(--bg-robin-400);
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 					font-size: 14px;
 				}
 
-				> button {
+				.close-icon {
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 				}
 			}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -966,7 +966,6 @@ function QueryBuilderSearchV2(
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
-							className="qb-tag-text"
 							$isInNin={isInNin}
 							$isEnabled={!!searchValue}
 							onClick={(): void => {

frontend/src/container/RoutingPolicies/styles.scss

@@ -35,7 +35,10 @@
 			display: flex;
 			align-items: center;
 			gap: 8px;
-			margin-top: 12px;
+
+			.ant-btn {
+				margin-top: 8px;
+			}
 		}
 
 		.routing-policies-table {

frontend/src/container/TopNav/AutoRefreshV2/AutoRefreshV2.styles.scss

@@ -8,7 +8,7 @@
 			139deg,
 			color-mix(in srgb, var(--card) 80%, transparent) 0%,
 			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
-		) !important;
+		);
 		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 		backdrop-filter: blur(20px);
 		padding: 0;
@@ -34,9 +34,9 @@
 }
 
 .refresh-interval-text {
-	padding: 12px 14px 8px 14px !important;
+	padding: 12px 14px 8px 14px;
 	color: var(--muted-foreground);
-	font-size: 13px;
+	font-size: 11px;
 	font-style: normal;
 	font-weight: 500;
 	line-height: 18px; /* 163.636% */

frontend/src/pages/MetricsExplorer/MetricsExplorerPage.styles.scss

@@ -9,7 +9,7 @@
 	}
 
 	.ant-tabs-nav {
-		padding-left: 16px;
+		padding: 0 8px;
 		margin-bottom: 0px;
 
 		&::before {

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.module.scss

@@ -119,7 +119,6 @@
 	gap: 12px;
 	margin-bottom: 14px;
 	align-items: center;
-	background: var(--l3-background);
 }
 
 .searchInput {
@@ -127,13 +126,16 @@
 	padding: 6px 8px;
 	background: var(--l3-background);
 
-	height: 18px;
-	margin-inline-end: 6px;
+	:global(.ant-input-prefix) {
+		height: 18px;
+		margin-inline-end: 6px;
 
-	svg {
-		opacity: 0.4;
+		svg {
+			opacity: 0.4;
+		}
 	}
 
+	&,
 	input {
 		font-size: 14px;
 		line-height: 18px;

pkg/modules/metricsexplorer/implmetricsexplorer/module.go

@@ -219,19 +219,7 @@ func (m *module) GetStats(ctx context.Context, orgID valuer.UUID, req *metricsex
 		return nil, err
 	}
 
-	filterWhereClause, err := m.buildFilterClause(ctx, req.Filter, req.Start, req.End)
-	if err != nil {
-		return nil, err
-	}
-
-	// Single query to get stats with samples, timeseries counts in required sorting order
-	metricStats, total, err := m.fetchMetricsStatsWithSamples(
-		ctx,
-		req,
-		filterWhereClause,
-		false,
-		req.OrderBy,
-	)
+	metricStats, total, err := m.fetchMetricsStatsWithSamples(ctx, req, false)
 	if err != nil {
 		return nil, err
 	}
@@ -974,15 +962,23 @@ func (m *module) buildFilterClause(ctx context.Context, filter *qbtypes.Filter,
 func (m *module) fetchMetricsStatsWithSamples(
 	ctx context.Context,
 	req *metricsexplorertypes.StatsRequest,
-	filterWhereClause *sqlbuilder.WhereClause,
 	normalized bool,
-	orderBy *qbtypes.OrderBy,
 ) ([]metricsexplorertypes.Stat, uint64, error) {
 	ctx = m.withMetricsExplorerContext(ctx, "fetchMetricsStatsWithSamples")
 
+	hasFilter := req.Filter != nil && strings.TrimSpace(req.Filter.Expression) != ""
+	var filterWhereClause *sqlbuilder.WhereClause
+	if hasFilter {
+		var err error
+		filterWhereClause, err = m.buildFilterClause(ctx, req.Filter, req.Start, req.End)
+		if err != nil {
+			return nil, 0, err
+		}
+	}
+
 	start, end, distributedTsTable, localTsTable := telemetrymetrics.WhichTSTableToUse(uint64(req.Start), uint64(req.End), nil)
-	samplesTable, _ := telemetrymetrics.WhichSamplesTableToUse(uint64(req.Start), uint64(req.End), metrictypes.UnspecifiedType, metrictypes.TimeAggregationUnspecified, nil)
-	countExp := telemetrymetrics.CountExpressionForSamplesTable(samplesTable)
+	distributedSamplesTable, _ := telemetrymetrics.WhichSamplesTableToUse(uint64(req.Start), uint64(req.End), metrictypes.UnspecifiedType, metrictypes.TimeAggregationUnspecified, nil)
+	countExp := telemetrymetrics.CountExpressionForSamplesTable(distributedSamplesTable)
 
 	// Timeseries counts per metric
 	tsSB := sqlbuilder.NewSelectBuilder()
@@ -1005,7 +1001,7 @@ func (m *module) fetchMetricsStatsWithSamples(
 		"metric_name",
 		fmt.Sprintf("%s AS samples", countExp),
 	)
-	samplesSB.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, samplesTable))
+	samplesSB.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, distributedSamplesTable))
 	samplesSB.Where(samplesSB.Between("unix_milli", req.Start, req.End))
 	samplesSB.Where("NOT startsWith(metric_name, 'signoz')")
 
@@ -1013,6 +1009,8 @@ func (m *module) fetchMetricsStatsWithSamples(
 		sqlbuilder.CTEQuery("__time_series_counts").As(tsSB),
 	}
 
+	// Narrow samples scan. With filter: fingerprint IN (per-fingerprint label preds can't fold to metric_name).
+	// No filter (fast path): metric_name IN — aligns with samples table's leading sort key, orders of magnitude cheaper.
 	if filterWhereClause != nil {
 		fingerprintSB := sqlbuilder.NewSelectBuilder()
 		fingerprintSB.Select("fingerprint")
@@ -1025,6 +1023,15 @@ func (m *module) fetchMetricsStatsWithSamples(
 
 		ctes = append(ctes, sqlbuilder.CTEQuery("__filtered_fingerprints").As(fingerprintSB))
 		samplesSB.Where("fingerprint IN (SELECT fingerprint FROM __filtered_fingerprints)")
+	} else {
+		metricNamesSB := sqlbuilder.NewSelectBuilder()
+		metricNamesSB.Select("DISTINCT metric_name")
+		metricNamesSB.From(fmt.Sprintf("%s.%s", telemetrymetrics.DBName, localTsTable))
+		metricNamesSB.Where(metricNamesSB.Between("unix_milli", start, end))
+		metricNamesSB.Where("NOT startsWith(metric_name, 'signoz')")
+		metricNamesSB.Where(metricNamesSB.E("__normalized", normalized))
+
+		samplesSB.Where(fmt.Sprintf("metric_name IN (%s)", samplesSB.Var(metricNamesSB)))
 	}
 	samplesSB.GroupBy("metric_name")
 
@@ -1041,7 +1048,7 @@ func (m *module) fetchMetricsStatsWithSamples(
 	finalSB.JoinWithOption(sqlbuilder.FullOuterJoin, "__sample_counts s", "ts.metric_name = s.metric_name")
 	finalSB.Where("(COALESCE(ts.timeseries, 0) > 0 OR COALESCE(s.samples, 0) > 0)")
 
-	orderByColumn, orderDirection, err := getStatsOrderByColumn(orderBy)
+	orderByColumn, orderDirection, err := getStatsOrderByColumn(req.OrderBy)
 	if err != nil {
 		return nil, 0, err
 	}