Merge branch 'main' into nv/6204

* fix: added fix for tooltip not rendering in fullscreen mode

* chore: added test for tooltip parent behaviour

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/TooltipPlugin.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { getFocusedSeriesAtPosition } from 'lib/uPlotLib/plugins/onClickPlugin';
@@ -44,12 +44,14 @@ export default function TooltipPlugin({
 	canPinTooltip = false,
 }: TooltipPluginProps): JSX.Element | null {
 	const containerRef = useRef<HTMLDivElement>(null);
-	const portalRoot = useRef<HTMLElement>(document.body);
 	const rafId = useRef<number | null>(null);
 	const dismissTimeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const layoutRef = useRef<TooltipLayoutInfo>();
 	const renderRef = useRef(render);
 	renderRef.current = render;
+	const [portalRoot, setPortalRoot] = useState<HTMLElement>(
+		(document.fullscreenElement as HTMLElement) ?? document.body,
+	);
 
 	// React-managed snapshot of what should be rendered. The controller
 	// owns the interaction state and calls `updateState` when a visible
@@ -389,6 +391,19 @@ export default function TooltipPlugin({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [config]);
 
+	const resolvePortalRoot = useCallback((): void => {
+		setPortalRoot((document.fullscreenElement as HTMLElement) ?? document.body);
+	}, []);
+
+	useLayoutEffect((): (() => void) => {
+		resolvePortalRoot();
+		document.addEventListener('fullscreenchange', resolvePortalRoot);
+
+		return (): void => {
+			document.removeEventListener('fullscreenchange', resolvePortalRoot);
+		};
+	}, [resolvePortalRoot]);
+
 	useLayoutEffect((): void => {
 		if (!hasPlot || !layoutRef.current) {
 			return;
@@ -449,6 +464,6 @@ export default function TooltipPlugin({
 		>
 			{tooltipBody}
 		</div>,
-		portalRoot.current,
+		portalRoot,
 	);
 }

frontend/src/lib/uPlotV2/plugins/__tests__/TooltipPlugin.test.ts

@@ -188,6 +188,58 @@ describe('TooltipPlugin', () => {
 			expect(container).not.toBeNull();
 			expect(container.parentElement).toBe(document.body);
 		});
+
+		it('moves tooltip portal root to fullscreen element and back on exit', async () => {
+			const config = createConfigMock();
+			let mockedFullscreenElement: Element | null = null;
+			const originalFullscreenElementDescriptor = Object.getOwnPropertyDescriptor(
+				Document.prototype,
+				'fullscreenElement',
+			);
+			Object.defineProperty(Document.prototype, 'fullscreenElement', {
+				configurable: true,
+				get: () => mockedFullscreenElement,
+			});
+
+			renderAndActivateHover(config);
+
+			const container = document.querySelector(
+				'.tooltip-plugin-container',
+			) as HTMLElement;
+			expect(container.parentElement).toBe(document.body);
+
+			const fullscreenRoot = document.createElement('div');
+			document.body.appendChild(fullscreenRoot);
+
+			act(() => {
+				mockedFullscreenElement = fullscreenRoot;
+				document.dispatchEvent(new Event('fullscreenchange'));
+			});
+
+			await waitFor(() => {
+				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
+				expect(updatedContainer.parentElement).toBe(fullscreenRoot);
+			});
+
+			act(() => {
+				mockedFullscreenElement = null;
+				document.dispatchEvent(new Event('fullscreenchange'));
+			});
+
+			await waitFor(() => {
+				const updatedContainer = screen.getByTestId('tooltip-plugin-container');
+				expect(updatedContainer.parentElement).toBe(document.body);
+			});
+
+			if (originalFullscreenElementDescriptor) {
+				Object.defineProperty(
+					Document.prototype,
+					'fullscreenElement',
+					originalFullscreenElementDescriptor,
+				);
+			}
+			fullscreenRoot.remove();
+		});
 	});
 
 	// ---- Pin behaviour ----------------------------------------------------------

pkg/querier/postprocess.go

@@ -185,22 +185,6 @@ func postProcessMetricQuery(
 	query qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation],
 	req *qbtypes.QueryRangeRequest,
 ) *qbtypes.Result {
-
-	config := query.Aggregations[0]
-	spaceAggOrderBy := fmt.Sprintf("%s(%s)", config.SpaceAggregation.StringValue(), config.MetricName)
-	timeAggOrderBy := fmt.Sprintf("%s(%s)", config.TimeAggregation.StringValue(), config.MetricName)
-	timeSpaceAggOrderBy := fmt.Sprintf("%s(%s(%s))", config.SpaceAggregation.StringValue(), config.TimeAggregation.StringValue(), config.MetricName)
-
-	for idx := range query.Order {
-		if query.Order[idx].Key.Name == spaceAggOrderBy ||
-			query.Order[idx].Key.Name == timeAggOrderBy ||
-			query.Order[idx].Key.Name == timeSpaceAggOrderBy {
-			query.Order[idx].Key.Name = qbtypes.DefaultOrderByKey
-		}
-	}
-
-	result = q.applySeriesLimit(result, query.Limit, query.Order)
-
 	if len(query.Functions) > 0 {
 		step := query.StepInterval.Duration.Milliseconds()
 		functions := q.prepareFillZeroArgsWithStep(query.Functions, req, step)

pkg/querybuilder/fallback_expr.go

@@ -132,6 +132,14 @@ func GroupByKeys(keys []qbtypes.GroupByKey) []string {
 	return k
 }
 
+func OrderByKeys(keys []qbtypes.OrderBy) []string {
+	k := []string{}
+	for _, key := range keys {
+		k = append(k, "`"+key.Key.Name+"`")
+	}
+	return k
+}
+
 func FormatValueForContains(value any) string {
 	if value == nil {
 		return ""

pkg/telemetrymetrics/statement_builder.go

@@ -27,6 +27,10 @@ const (
 	OthersMultiTemporality = `IF(LOWER(temporality) LIKE LOWER('delta'), %s, %s) AS per_series_value`
 )
 
+const (
+	FINAL_VALUE_VARNAME = "value"
+)
+
 type MetricQueryStatementBuilder struct {
 	logger        *slog.Logger
 	metadataStore telemetrytypes.MetadataStore
@@ -238,7 +242,7 @@ func (b *MetricQueryStatementBuilder) buildTemporalAggDeltaFastPath(
 		aggCol = fmt.Sprintf("quantilesDDMerge(0.01, %f)(sketch)[1]", query.Aggregations[0].SpaceAggregation.Percentile())
 	}
 
-	sb.SelectMore(fmt.Sprintf("%s AS value", aggCol))
+	sb.SelectMore(fmt.Sprintf("%s AS %s", aggCol, FINAL_VALUE_VARNAME))
 
 	tbl := WhichSamplesTableToUse(start, end, query.Aggregations[0].Type, query.Aggregations[0].TimeAggregation, query.Aggregations[0].TableHints)
 	sb.From(fmt.Sprintf("%s.%s AS points", DBName, tbl))
@@ -526,7 +530,7 @@ func (b *MetricQueryStatementBuilder) buildSpatialAggregationCTE(
 	for _, g := range query.GroupBy {
 		sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
 	}
-	sb.SelectMore(fmt.Sprintf("%s(per_series_value) AS value", query.Aggregations[0].SpaceAggregation.StringValue()))
+	sb.SelectMore(fmt.Sprintf("%s(per_series_value) AS %s", query.Aggregations[0].SpaceAggregation.StringValue(), FINAL_VALUE_VARNAME))
 	sb.From("__temporal_aggregation_cte")
 	sb.Where(sb.EQ("isNaN(per_series_value)", 0))
 	if query.Aggregations[0].ValueFilter != nil {
@@ -563,8 +567,10 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 			sb.SelectMore(fmt.Sprintf("`%s`", g.TelemetryFieldKey.Name))
 		}
 		sb.SelectMore(fmt.Sprintf(
-			"histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(value), %.3f) AS value",
+			"histogramQuantile(arrayMap(x -> toFloat64(x), groupArray(le)), groupArray(%s), %.3f) AS %s",
+			FINAL_VALUE_VARNAME,
 			quantile,
+			FINAL_VALUE_VARNAME,
 		))
 		sb.From("__spatial_aggregation_cte")
 		sb.GroupBy(querybuilder.GroupByKeys(query.GroupBy)...)
@@ -607,11 +613,30 @@ func (b *MetricQueryStatementBuilder) BuildFinalSelect(
 			sb.Where(rewrittenExpr)
 		}
 	}
-	sb.OrderBy(querybuilder.GroupByKeys(query.GroupBy)...)
+	if len(query.Order) > 0 {
+		config := query.Aggregations[0]
+		spaceAggOrderBy := fmt.Sprintf("%s(%s)", config.SpaceAggregation.StringValue(), config.MetricName)
+		timeAggOrderBy := fmt.Sprintf("%s(%s)", config.TimeAggregation.StringValue(), config.MetricName)
+		timeSpaceAggOrderBy := fmt.Sprintf("%s(%s(%s))", config.SpaceAggregation.StringValue(), config.TimeAggregation.StringValue(), config.MetricName)
+
+		for idx := range query.Order {
+			if query.Order[idx].Key.Name == spaceAggOrderBy ||
+				query.Order[idx].Key.Name == timeAggOrderBy ||
+				query.Order[idx].Key.Name == timeSpaceAggOrderBy {
+				query.Order[idx].Key.Name = FINAL_VALUE_VARNAME
+			}
+		}
+		sb.OrderBy(querybuilder.OrderByKeys(query.Order)...)
+	} else {
+		sb.OrderBy(querybuilder.GroupByKeys(query.GroupBy)...)
+	}
 	sb.OrderBy("ts")
 	if metricType == metrictypes.HistogramType && spaceAgg == metrictypes.SpaceAggregationCount && query.Aggregations[0].ComparisonSpaceAggregationParam == nil {
 		sb.OrderBy("toFloat64(le)")
 	}
+	if query.Limit > 0 {
+		sb.Limit(query.Limit)
+	}
 
 	q, a := sb.BuildWithFlavor(sqlbuilder.ClickHouse)
 	return &qbtypes.Statement{Query: combined + q, Args: append(args, a...)}, nil