chore: remove last min trim logic in uplotScaleBuilder (#12627)

<!--A few plain bullets saying what changed and why, for a reviewer
skimming it - not a wall of text, not a restatement of the diff, not
generated boilerplate.-->
#### Description

- `UPlotScaleBuilder` was overriding the x-axis max with `endTime - 1
minute`, rounded down to the minute — behaviour carried over from the
legacy `getXAxisScale`.
- On short time windows the trimmed max lands at or before the min, so
the scale range is empty/inverted and the chart draws no data.
- Removes the trim so the requested `min`/`max` pass through as-is and
the scale always matches the selected time range.
- Updates the scale builder tests, including a case for a sub-minute
window.

<!--Reference issues using `Closes #issue-number` to enable automatic
closure on merge. -->
#### Issues closed by this PR
Closes -
https://github.com/orgs/SigNoz/projects/39/views/20?pane=issue&itemId=231774376&issue=SigNoz%7Cengineering-pod%7C5902

<!--If applicable, include screenshots or screen recordings that clearly
show the behavior before the change and the result after the change. -->
#### Screenshots / Screen Recordings

Before - 



https://github.com/user-attachments/assets/11ca2fa4-9a07-42eb-9d8d-3a42daf4cfe1


Now - 




https://github.com/user-attachments/assets/0114fccd-a6ef-4717-8d1c-aa3faf820da7





#### Additional Information

- Only the uPlotV2 path changes

---------

Co-authored-by: Gaurav Tewari <tewarig@users.noreply.github.com>

docs/api/openapi.yml

@@ -8024,13 +8024,6 @@ components:
       - schemaVersion
       - spec
       type: object
-    ServiceaccounttypesDeprecatedPostableServiceAccountRole:
-      properties:
-        id:
-          type: string
-      required:
-      - id
-      type: object
     ServiceaccounttypesGettableFactorAPIKey:
       properties:
         createdAt:
@@ -13262,117 +13255,6 @@ paths:
       summary: Gets service account roles
       tags:
       - serviceaccount
-    post:
-      deprecated: true
-      description: This endpoint assigns a role to a service account
-      operationId: CreateServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/ServiceaccounttypesDeprecatedPostableServiceAccountRole'
-      responses:
-        "201":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/TypesIdentifiable'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: Created
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:attach
-        - role:attach
-      - tokenizer:
-        - serviceaccount:attach
-        - role:attach
-      summary: Create service account role
-      tags:
-      - serviceaccount
-  /api/v1/service_accounts/{id}/roles/{rid}:
-    delete:
-      deprecated: true
-      description: This endpoint revokes a role from service account
-      operationId: DeleteServiceAccountRoleDeprecated
-      parameters:
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: rid
-        required: true
-        schema:
-          type: string
-      responses:
-        "204":
-          description: No Content
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - serviceaccount:detach
-        - role:detach
-      - tokenizer:
-        - serviceaccount:detach
-        - role:detach
-      summary: Delete service account role
-      tags:
-      - serviceaccount
   /api/v1/service_accounts/me:
     get:
       deprecated: false
@@ -14376,9 +14258,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:list
       - tokenizer:
-        - ADMIN
+        - auth-domain:list
       summary: List all auth domains
       tags:
       - authdomains
@@ -14438,9 +14320,13 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
       - tokenizer:
-        - ADMIN
+        - auth-domain:create
+        - auth-domain:attach
+        - role:attach
       summary: Create auth domain
       tags:
       - authdomains
@@ -14484,9 +14370,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:delete
       - tokenizer:
-        - ADMIN
+        - auth-domain:delete
       summary: Delete auth domain
       tags:
       - authdomains
@@ -14541,9 +14427,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:read
       - tokenizer:
-        - ADMIN
+        - auth-domain:read
       summary: Get auth domain by ID
       tags:
       - authdomains
@@ -14597,9 +14483,17 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
       - tokenizer:
-        - ADMIN
+        - auth-domain:update
+        - auth-domain:attach
+        - auth-domain:detach
+        - role:attach
+        - role:detach
       summary: Update auth domain
       tags:
       - authdomains

frontend/__mocks__/uplotMock.ts

@@ -2,8 +2,6 @@
 
 // Mock for uplot library used in tests
 export interface MockUPlotInstance {
-	/** Consumers read `root.parentElement` to detect a re-mounted container. */
-	root: HTMLDivElement;
 	setData: jest.Mock;
 	setSize: jest.Mock;
 	destroy: jest.Mock;
@@ -19,20 +17,13 @@ export interface MockUPlotPaths {
 }
 
 // Create mock instance methods
-const createMockUPlotInstance = (target?: HTMLElement): MockUPlotInstance => {
-	const root = document.createElement('div');
-	// Real uPlot mounts its root inside the target; without it a re-render reads
-	// `root.parentElement` off undefined and throws.
-	target?.appendChild(root);
-	return {
-		root,
-		setData: jest.fn(),
-		setSize: jest.fn(),
-		destroy: jest.fn(),
-		redraw: jest.fn(),
-		setSeries: jest.fn(),
-	};
-};
+const createMockUPlotInstance = (): MockUPlotInstance => ({
+	setData: jest.fn(),
+	setSize: jest.fn(),
+	destroy: jest.fn(),
+	redraw: jest.fn(),
+	setSeries: jest.fn(),
+});
 
 // Path builder: (self, seriesIdx, idx0, idx1) => paths or null
 const createMockPathBuilder = (name: string): jest.Mock =>
@@ -62,16 +53,14 @@ const mockTzDate = jest.fn(
 function MockUPlot(
 	_options: unknown,
 	_data: unknown,
-	target: HTMLElement,
+	_target: HTMLElement,
 ): MockUPlotInstance {
-	return createMockUPlotInstance(target);
+	return createMockUPlotInstance();
 }
 
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-// Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
-MockUPlot.pxRatio = 1;
 
 // Export the constructor as default
 export default MockUPlot;

frontend/src/api/generated/services/serviceaccount/index.ts

@@ -22,10 +22,7 @@ import type {
 	CreateServiceAccountKey201,
 	CreateServiceAccountKeyPathParameters,
 	CreateServiceAccountRole201,
-	CreateServiceAccountRoleDeprecated201,
-	CreateServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountPathParameters,
-	DeleteServiceAccountRoleDeprecatedPathParameters,
 	DeleteServiceAccountRolePathParameters,
 	GetMyServiceAccount200,
 	GetServiceAccount200,
@@ -39,7 +36,6 @@ import type {
 	ListServiceAccounts200,
 	RenderErrorResponseDTO,
 	RevokeServiceAccountKeyPathParameters,
-	ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
 	ServiceaccounttypesPostableFactorAPIKeyDTO,
 	ServiceaccounttypesPostableServiceAccountDTO,
 	ServiceaccounttypesPostableServiceAccountRoleDTO,
@@ -1253,194 +1249,6 @@ export const invalidateGetServiceAccountRoles = async (
 	return queryClient;
 };
 
-/**
- * This endpoint assigns a role to a service account
- * @deprecated
- * @summary Create service account role
- */
-export const createServiceAccountRoleDeprecated = (
-	{ id }: CreateServiceAccountRoleDeprecatedPathParameters,
-	serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<CreateServiceAccountRoleDeprecated201>({
-		url: `/api/v1/service_accounts/${id}/roles`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: serviceaccounttypesDeprecatedPostableServiceAccountRoleDTO,
-		signal,
-	});
-};
-
-export const getCreateServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['createServiceAccountRoleDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return createServiceAccountRoleDeprecated(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type CreateServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>
->;
-export type CreateServiceAccountRoleDeprecatedMutationBody =
-	| BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>
-	| undefined;
-export type CreateServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Create service account role
- */
-export const useCreateServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-		TError,
-		{
-			pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-			data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof createServiceAccountRoleDeprecated>>,
-	TError,
-	{
-		pathParams: CreateServiceAccountRoleDeprecatedPathParameters;
-		data?: BodyType<ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO>;
-	},
-	TContext
-> => {
-	return useMutation(
-		getCreateServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
-/**
- * This endpoint revokes a role from service account
- * @deprecated
- * @summary Delete service account role
- */
-export const deleteServiceAccountRoleDeprecated = (
-	{ id, rid }: DeleteServiceAccountRoleDeprecatedPathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<void>({
-		url: `/api/v1/service_accounts/${id}/roles/${rid}`,
-		method: 'DELETE',
-		signal,
-	});
-};
-
-export const getDeleteServiceAccountRoleDeprecatedMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	const mutationKey = ['deleteServiceAccountRoleDeprecated'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters }
-	> = (props) => {
-		const { pathParams } = props ?? {};
-
-		return deleteServiceAccountRoleDeprecated(pathParams);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type DeleteServiceAccountRoleDeprecatedMutationResult = NonNullable<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>
->;
-
-export type DeleteServiceAccountRoleDeprecatedMutationError =
-	ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @deprecated
- * @summary Delete service account role
- */
-export const useDeleteServiceAccountRoleDeprecated = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-		TError,
-		{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof deleteServiceAccountRoleDeprecated>>,
-	TError,
-	{ pathParams: DeleteServiceAccountRoleDeprecatedPathParameters },
-	TContext
-> => {
-	return useMutation(
-		getDeleteServiceAccountRoleDeprecatedMutationOptions(options),
-	);
-};
 /**
  * This endpoint gets my service account
  * @summary Gets my service account

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -9092,13 +9092,6 @@ export interface SavedviewtypesUpdatableSavedViewDTO {
 	spec: SavedviewtypesSavedViewSpecDTO;
 }
 
-export interface ServiceaccounttypesDeprecatedPostableServiceAccountRoleDTO {
-	/**
-	 * @type string
-	 */
-	id: string;
-}
-
 export interface ServiceaccounttypesGettableFactorAPIKeyDTO {
 	/**
 	 * @type string
@@ -11020,21 +11013,6 @@ export type GetServiceAccountRoles200 = {
 	status: string;
 };
 
-export type CreateServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-};
-export type CreateServiceAccountRoleDeprecated201 = {
-	data: TypesIdentifiableDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
-export type DeleteServiceAccountRoleDeprecatedPathParameters = {
-	id: string;
-	rid: string;
-};
 export type GetMyServiceAccount200 = {
 	data: ServiceaccounttypesServiceAccountWithRolesDTO;
 	/**

frontend/src/assets/Logos/azure.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0078D4" d="M22.379 23.343a1.62 1.62 0 0 0 1.536-2.14v.002L17.35 1.76A1.62 1.62 0 0 0 15.816.657H8.184A1.62 1.62 0 0 0 6.65 1.76L.086 21.204a1.62 1.62 0 0 0 1.536 2.139h4.741a1.62 1.62 0 0 0 1.535-1.103l.977-2.892 4.947 3.675c.28.208.618.32.966.32m-3.084-12.531 3.624 10.739a.54.54 0 0 1-.51.713v-.001h-.03a.54.54 0 0 1-.322-.106l-9.287-6.9h4.853m6.313 7.006c.116-.326.13-.694.007-1.058L9.79 1.76a1.722 1.722 0 0 0-.007-.02h6.034a.54.54 0 0 1 .512.366l6.562 19.445a.54.54 0 0 1-.338.684"/>
+</svg>

frontend/src/assets/Logos/dify.svg

@@ -0,0 +1,5 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<title>Dify</title>
+	<path d="M7.043 6.487c1.635 0 2.241-1.003 2.241-2.243S8.681 2 7.044 2C5.405 2 4.801 3.003 4.801 4.244c0 1.24.604 2.243 2.241 2.243z" fill="#03F" />
+	<path d="M14.883 6.97v1.443h-3.679v3.203h3.68v8.012H8.801V8.41h-8v3.203h4.48v8.012H0v3.203h24v-3.203h-5.6v-8.012H24V8.41h-5.6V5.206H24V2.003h-4.161a4.97 4.97 0 00-4.961 4.967h.005z" fill="#03F" />
+</svg>

frontend/src/assets/Logos/from-log-file.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill-rule:evenodd;clip-rule:evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 115.28 122.88"><path d="M25.38 57h64.88V37.34H69.59c-2.17 0-5.19-1.17-6.62-2.6s-2.3-4.01-2.3-6.17V7.64H8.15c-.18 0-.32.09-.41.18-.15.1-.19.23-.19.42v106.45c0 .14.09.32.18.41.09.14.28.18.41.18h81.51c.18 0 .17-.09.27-.18.14-.09.33-.28.33-.41v-11.16H25.38c-4.14 0-7.56-3.4-7.56-7.56V64.55c0-4.15 3.4-7.55 7.56-7.55m4.11 11.38h7.43v18.15h11.63v5.92H29.49zm20.4 12.05c0-3.93 1.09-6.99 3.28-9.17 2.19-2.19 5.24-3.28 9.15-3.28 4.01 0 7.09 1.08 9.26 3.22 2.17 2.15 3.25 5.16 3.25 9.04 0 2.81-.47 5.11-1.42 6.91q-1.425 2.7-4.11 4.2t-6.69 1.5c-2.71 0-4.96-.43-6.74-1.29-1.78-.87-3.22-2.23-4.32-4.11-1.11-1.87-1.66-4.21-1.66-7.02m7.42.01c0 2.43.45 4.17 1.36 5.23s2.14 1.59 3.7 1.59c1.6 0 2.84-.52 3.71-1.56.88-1.04 1.32-2.9 1.32-5.6 0-2.26-.46-3.92-1.37-4.96-.92-1.05-2.16-1.57-3.73-1.57-1.5 0-2.71.53-3.62 1.59-.91 1.08-1.37 2.83-1.37 5.28m33.11 3.3v-5.01h11.49v10.23c-2.2 1.5-4.15 2.53-5.83 3.07-1.69.54-3.7.81-6.02.81-2.86 0-5.19-.49-6.99-1.46s-3.19-2.42-4.18-4.35c-.99-1.92-1.48-4.13-1.48-6.63 0-2.63.54-4.91 1.62-6.85s2.67-3.41 4.76-4.42c1.63-.78 3.83-1.17 6.58-1.17 2.66 0 4.64.24 5.96.72s2.41 1.23 3.28 2.24 1.52 2.3 1.96 3.85l-7.16 1.29c-.3-.91-.8-1.61-1.5-2.09-.71-.49-1.6-.73-2.7-.73-1.62 0-2.92.57-3.89 1.7s-1.45 2.92-1.45 5.37c0 2.6.49 4.46 1.47 5.57.97 1.11 2.34 1.68 4.09 1.68q1.245 0 2.37-.36c.75-.24 1.61-.65 2.59-1.22v-2.25h-4.97zM97.79 57h9.93c4.16 0 7.56 3.41 7.56 7.56v31.42c0 4.15-3.41 7.56-7.56 7.56h-9.93v13.55c0 1.61-.65 3.04-1.7 4.1a5.74 5.74 0 0 1-4.1 1.7H5.81a5.74 5.74 0 0 1-4.1-1.7 5.74 5.74 0 0 1-1.7-4.1V5.85c0-1.61.65-3.04 1.7-4.1a5.8 5.8 0 0 1 4.1-1.7h58.72c.13-.05.27-.05.41-.05.64 0 1.29.28 1.75.69h.09c.09.05.14.09.23.18L97 31.23c.51.51.88 1.2.88 1.98 0 .23-.05.41-.09.65zM67.52 27.97V8.94l21.43 21.7H70.19c-.74 0-1.38-.32-1.89-.78-.46-.46-.78-1.15-.78-1.89" style="fill:#D1D5DB;fill-rule:evenodd;clip-rule:evenodd"/></svg>

frontend/src/assets/Logos/github-copilot.svg

@@ -0,0 +1,3 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#9CA3AF" d="M23.922 16.997C23.061 18.492 18.063 22.02 12 22.02 5.937 22.02.939 18.492.078 16.997A.641.641 0 0 1 0 16.741v-2.869a.883.883 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.098 10.098 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952C7.255 2.937 9.248 1.98 11.978 1.98c2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.841.841 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256Zm-11.75-5.992h-.344a4.359 4.359 0 0 1-.355.508c-.77.947-1.918 1.492-3.508 1.492-1.725 0-2.989-.359-3.782-1.259a2.137 2.137 0 0 1-.085-.104L4 11.746v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.359 4.359 0 0 1-.355-.508Zm2.328 3.25c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm-5 0c.549 0 1 .451 1 1v2c0 .549-.451 1-1 1-.549 0-1-.451-1-1v-2c0-.549.451-1 1-1Zm3.313-6.185c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"/>
+</svg>

frontend/src/assets/Logos/kong.svg

@@ -0,0 +1,24 @@
+<svg viewBox="0 0 44.8 40" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="kong-a" x1="38.204" x2="8.732" y1="18.417" y2="48.543" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-b" x1="38.107" x2="8.635" y1="18.322" y2="48.448" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-c" x1="29.439" x2="-0.033" y1="9.842" y2="39.968" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+		<linearGradient id="kong-d" x1="30.291" x2="0.819" y1="10.676" y2="40.801" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#11A06B" />
+			<stop offset="1" stop-color="#286FEB" />
+		</linearGradient>
+	</defs>
+	<path d="m14.7 32.9-1.1 1.4 2.5 3.9-.3 1.8h10.6l.7-1.8-4.2-5.3z" fill="url(#kong-a)" />
+	<path d="M20.5 9.4 16.7 16l18.6 22-.5 2h8.5l1.5-7.1L24.9 9.4z" fill="url(#kong-b)" />
+	<path d="m23 4.4-1.8 3.3h4.5l7.7 9.2 4.6-3.8v-2.4l-1.6-2.2 1.2-1.2L28.4 0z" fill="url(#kong-c)" />
+	<path d="M9.1 22.9H6.6L0 31.3V40h7.1l1.3-1.6 5.5-7.1h7.9l2.4-3.7-8.6-10.2z" fill="url(#kong-d)" />
+</svg>

frontend/src/assets/Logos/neon.svg

@@ -0,0 +1,3 @@
+<svg fill="none" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+	<path d="M63 0.018v63.535L38.418 42.25v21.303H0V0l63 .018ZM7.723 55.839h22.972V25.323l24.583 21.725V7.729L7.723 7.716v48.123Z" fill="#37C38F" />
+</svg>

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.styles.scss

@@ -1,5 +0,0 @@
-.client-side-qb-search {
-	.ant-select-selection-search {
-		width: max-content !important;
-	}
-}

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -1,661 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-
-import {
-	KeyboardEvent,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
-import {
-	OPERATORS,
-	QUERY_BUILDER_OPERATORS_BY_TYPES,
-	QUERY_BUILDER_SEARCH_VALUES,
-} from 'constants/queryBuilder';
-import { CustomTagProps } from 'container/QueryBuilder/filters/QueryBuilderSearch';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
-import { PLACEHOLDER } from 'container/QueryBuilder/filters/QueryBuilderSearch/constant';
-import { TypographyText } from 'container/QueryBuilder/filters/QueryBuilderSearch/style';
-import {
-	checkCommaInValue,
-	getOperatorFromValue,
-	getOperatorValue,
-	getTagToken,
-	isInNInOperator,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import {
-	DropdownState,
-	ITag,
-	Option,
-} from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
-import Suggestions from 'container/QueryBuilder/filters/QueryBuilderSearchV2/Suggestions';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
-import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
-import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { popupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import './ClientSideQBSearch.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
-
-export interface AttributeKey {
-	key: string;
-}
-
-export interface AttributeValuesMap {
-	[key: string]: AttributeValue;
-}
-
-interface ClientSideQBSearchProps {
-	filters: TagFilter;
-	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
-	placeholder?: string;
-	className?: string;
-	suffixIcon?: React.ReactNode;
-	attributeValuesMap?: AttributeValuesMap;
-	attributeKeys: AttributeKey[];
-}
-
-interface AttributeValue {
-	stringAttributeValues: string[] | [];
-	numberAttributeValues: number[] | [];
-	boolAttributeValues: boolean[] | [];
-}
-
-function ClientSideQBSearch(
-	props: ClientSideQBSearchProps,
-): React.ReactElement {
-	const {
-		onChange,
-		placeholder,
-		className,
-		suffixIcon,
-		whereClauseConfig,
-		attributeValuesMap,
-		attributeKeys,
-		filters,
-	} = props;
-
-	const isDarkMode = useIsDarkMode();
-
-	const selectRef = useRef<BaseSelectRef>(null);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-
-	// create the tags from the initial query here, this should only be computed on the first load as post that tags and query will be always in sync.
-	const [tags, setTags] = useState<ITag[]>(filters.items as ITag[]);
-
-	// this will maintain the current state of in process filter item
-	const [currentFilterItem, setCurrentFilterItem] = useState<ITag | undefined>();
-
-	const [currentState, setCurrentState] = useState<DropdownState>(
-		DropdownState.ATTRIBUTE_KEY,
-	);
-
-	// to maintain the current running state until the tokenization happens for the tag
-	const [searchValue, setSearchValue] = useState<string>('');
-
-	const [dropdownOptions, setDropdownOptions] = useState<Option[]>([]);
-
-	const attributeValues = useMemo(() => {
-		if (currentFilterItem?.key?.key) {
-			return attributeValuesMap?.[currentFilterItem.key.key];
-		}
-		return {
-			stringAttributeValues: [],
-			numberAttributeValues: [],
-			boolAttributeValues: [],
-		};
-	}, [attributeValuesMap, currentFilterItem?.key?.key]);
-
-	const handleDropdownSelect = useCallback(
-		(value: string) => {
-			let parsedValue: BaseAutocompleteData | string;
-
-			try {
-				parsedValue = JSON.parse(value);
-			} catch {
-				parsedValue = value;
-			}
-			if (currentState === DropdownState.ATTRIBUTE_KEY) {
-				setCurrentFilterItem((prev) => ({
-					...prev,
-					key: parsedValue as BaseAutocompleteData,
-					op: '',
-					value: '',
-				}));
-				setCurrentState(DropdownState.OPERATOR);
-				setSearchValue((parsedValue as BaseAutocompleteData)?.key);
-			} else if (currentState === DropdownState.OPERATOR) {
-				if (value === OPERATORS.EXISTS || value === OPERATORS.NOT_EXISTS) {
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: value,
-							value: '',
-						} as ITag,
-					]);
-					setCurrentFilterItem(undefined);
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-				} else {
-					setCurrentFilterItem((prev) => ({
-						key: prev?.key as BaseAutocompleteData,
-						op: value as string,
-						value: '',
-					}));
-					setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-					setSearchValue(`${currentFilterItem?.key?.key} ${value}`);
-				}
-			} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-				const operatorType =
-					operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-				const isMulti = operatorType === QUERY_BUILDER_SEARCH_VALUES.MULTIPLY;
-
-				if (isMulti) {
-					const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-					// this condition takes care of adding the IN/NIN multi values when pressed enter on an already existing value.
-					// not the best interaction but in sync with what we have today!
-					if (tagValue.includes(String(value))) {
-						setSearchValue('');
-						setCurrentState(DropdownState.ATTRIBUTE_KEY);
-						setCurrentFilterItem(undefined);
-						setTags((prev) => [
-							...prev,
-							{
-								key: currentFilterItem?.key,
-								op: currentFilterItem?.op,
-								value: tagValue,
-							} as ITag,
-						]);
-						return;
-					}
-					// this is for adding subsequent comma seperated values
-					const newSearch = [...tagValue];
-					newSearch[newSearch.length === 0 ? 0 : newSearch.length - 1] = value;
-					const newSearchValue = newSearch.join(',');
-					setSearchValue(`${tagKey} ${tagOperator} ${newSearchValue},`);
-				} else {
-					setSearchValue('');
-					setCurrentState(DropdownState.ATTRIBUTE_KEY);
-					setCurrentFilterItem(undefined);
-					setTags((prev) => [
-						...prev,
-						{
-							key: currentFilterItem?.key,
-							op: currentFilterItem?.op,
-							value,
-						} as ITag,
-					]);
-				}
-			}
-		},
-		[currentFilterItem?.key, currentFilterItem?.op, currentState, searchValue],
-	);
-
-	const handleSearch = useCallback((value: string) => {
-		setSearchValue(value);
-	}, []);
-
-	const onInputKeyDownHandler = useCallback(
-		(event: KeyboardEvent<Element>): void => {
-			if (event.key === 'Backspace' && !searchValue) {
-				event.stopPropagation();
-				setTags((prev) => prev.slice(0, -1));
-			}
-		},
-		[searchValue],
-	);
-
-	const handleOnBlur = useCallback((): void => {
-		if (searchValue) {
-			const operatorType =
-				operatorTypeMapper[currentFilterItem?.op || ''] || 'NOT_VALID';
-			// if key is added and operator is not present then convert to body CONTAINS key
-			if (
-				currentFilterItem?.key &&
-				isEmpty(currentFilterItem?.op) &&
-				whereClauseConfig?.customKey === 'body' &&
-				whereClauseConfig?.customOp === OPERATORS.CONTAINS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: {
-							key: 'body',
-							dataType: DataTypes.String,
-							type: '',
-							id: 'body--string----true',
-						},
-						op: OPERATORS.CONTAINS,
-						value: currentFilterItem?.key?.key,
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				currentFilterItem?.op === OPERATORS.EXISTS ||
-				currentFilterItem?.op === OPERATORS.NOT_EXISTS
-			) {
-				// is exists and not exists operator is present then convert directly to tag! no need of value here
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: currentFilterItem?.op,
-						value: '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else if (
-				// if the current state is in sync with the kind of operator used then convert into a tag
-				validationMapper[operatorType]?.(
-					isArray(currentFilterItem?.value)
-						? currentFilterItem?.value.length || 0
-						: 1,
-				)
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key as BaseAutocompleteData,
-						op: currentFilterItem?.op as string,
-						value: currentFilterItem?.value || '',
-					},
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			}
-		}
-	}, [
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		currentFilterItem?.value,
-		searchValue,
-		whereClauseConfig?.customKey,
-		whereClauseConfig?.customOp,
-	]);
-
-	// this useEffect takes care of tokenisation based on the search state
-	useEffect(() => {
-		// if there is no search value reset to the default state
-		if (!searchValue) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		}
-
-		// split the current search value based on delimiters
-		const { tagKey, tagOperator, tagValue } = getTagToken(searchValue);
-
-		if (
-			// Case 1 - if key is defined but the search text doesn't match with the set key,
-			// can happen when user selects from dropdown and then deletes a few characters
-			currentFilterItem?.key &&
-			currentFilterItem?.key?.key !== tagKey.split(' ')[0]
-		) {
-			setCurrentFilterItem(undefined);
-			setCurrentState(DropdownState.ATTRIBUTE_KEY);
-		} else if (tagOperator && isEmpty(currentFilterItem?.op)) {
-			// Case 2 -> key is set and now typing for the operator
-			if (
-				tagOperator === OPERATORS.EXISTS ||
-				tagOperator === OPERATORS.NOT_EXISTS
-			) {
-				setTags((prev) => [
-					...prev,
-					{
-						key: currentFilterItem?.key,
-						op: tagOperator,
-						value: '',
-					} as ITag,
-				]);
-				setCurrentFilterItem(undefined);
-				setSearchValue('');
-				setCurrentState(DropdownState.ATTRIBUTE_KEY);
-			} else {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: tagOperator,
-					value: '',
-				}));
-
-				setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			}
-		} else if (
-			// Case 3 -> selected operator from dropdown and then erased a part of it
-			!isEmpty(currentFilterItem?.op) &&
-			tagOperator !== currentFilterItem?.op
-		) {
-			setCurrentFilterItem((prev) => ({
-				key: prev?.key as BaseAutocompleteData,
-				op: '',
-				value: '',
-			}));
-			setCurrentState(DropdownState.OPERATOR);
-		} else if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			// Case 4 -> the final value state where we set the current filter values and the tokenisation happens on either
-			// dropdown click or blur event
-			const currentValue = {
-				key: currentFilterItem?.key as BaseAutocompleteData,
-				op: currentFilterItem?.op as string,
-				value: tagValue,
-			};
-			if (!isEqual(currentValue, currentFilterItem)) {
-				setCurrentFilterItem((prev) => ({
-					key: prev?.key as BaseAutocompleteData,
-					op: prev?.op as string,
-					value: tagValue,
-				}));
-			}
-		}
-	}, [
-		currentFilterItem,
-		currentFilterItem?.key,
-		currentFilterItem?.op,
-		searchValue,
-		currentState,
-	]);
-
-	// the useEffect takes care of setting the dropdown values correctly on change of the current state
-	useEffect(() => {
-		if (currentState === DropdownState.ATTRIBUTE_KEY) {
-			const filteredAttributeKeys = attributeKeys.filter((key) =>
-				key.key.startsWith(searchValue),
-			);
-			setDropdownOptions(
-				filteredAttributeKeys?.map(
-					(key) =>
-						({
-							label: key.key,
-							value: key,
-						}) as Option,
-				) || [],
-			);
-		}
-		if (currentState === DropdownState.OPERATOR) {
-			const keyOperator = searchValue.split(' ');
-			const partialOperator = keyOperator?.[1];
-			const strippedKey = keyOperator?.[0];
-
-			let operatorOptions;
-			if (currentFilterItem?.key?.dataType) {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES[
-					currentFilterItem.key
-						.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-				].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			} else if (strippedKey.endsWith('[*]') && strippedKey.startsWith('body.')) {
-				operatorOptions = [OPERATORS.HAS, OPERATORS.NHAS].map((operator) => ({
-					label: operator,
-					value: operator,
-				}));
-				setDropdownOptions(operatorOptions);
-			} else {
-				operatorOptions = QUERY_BUILDER_OPERATORS_BY_TYPES.universal.map(
-					(operator) => ({
-						label: operator,
-						value: operator,
-					}),
-				);
-
-				if (partialOperator) {
-					operatorOptions = operatorOptions.filter((op) =>
-						op.label.startsWith(partialOperator.toLocaleUpperCase()),
-					);
-				}
-				setDropdownOptions(operatorOptions);
-			}
-		}
-
-		if (currentState === DropdownState.ATTRIBUTE_VALUE) {
-			const values: Array<string | number | boolean> = [];
-			const { tagValue } = getTagToken(searchValue);
-			if (isArray(tagValue)) {
-				if (!isEmpty(tagValue[tagValue.length - 1])) {
-					values.push(tagValue[tagValue.length - 1]);
-				}
-			} else if (!isEmpty(tagValue)) {
-				values.push(tagValue);
-			}
-
-			const currentAttributeValues =
-				attributeValues?.stringAttributeValues ||
-				attributeValues?.numberAttributeValues ||
-				attributeValues?.boolAttributeValues ||
-				[];
-
-			values.push(...currentAttributeValues);
-
-			if (attributeValuesMap) {
-				setDropdownOptions(
-					values.map(
-						(val) =>
-							({
-								label: checkCommaInValue(String(val)),
-								value: val,
-							}) as Option,
-					),
-				);
-			} else {
-				// If attributeValuesMap is not provided, don't set dropdown options
-				setDropdownOptions([]);
-			}
-		}
-	}, [
-		attributeValues,
-		currentFilterItem?.key?.dataType,
-		currentState,
-		attributeKeys,
-		searchValue,
-		attributeValuesMap,
-	]);
-
-	useEffect(() => {
-		const filterTags: IBuilderQuery['filters'] = {
-			op: 'AND',
-			items: [],
-		};
-		tags.forEach((tag) => {
-			const computedTagValue =
-				tag.value &&
-				Array.isArray(tag.value) &&
-				tag.value[tag.value.length - 1] === ''
-					? tag.value?.slice(0, -1)
-					: (tag.value ?? '');
-			filterTags.items.push({
-				id: tag.id || uuid().slice(0, 8),
-				key: tag.key,
-				op: getOperatorValue(tag.op),
-				value: computedTagValue,
-			});
-		});
-
-		if (!isEqual(filters, filterTags)) {
-			onChange(filterTags);
-			setTags(
-				filterTags.items.map((tag) => ({
-					...tag,
-					op: getOperatorFromValue(tag.op),
-				})) as ITag[],
-			);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [tags]);
-
-	const queryTags = useMemo(
-		() => tags.map((tag) => `${tag.key.key} ${tag.op} ${tag.value}`),
-		[tags],
-	);
-
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): React.ReactElement => {
-		const { tagOperator } = getTagToken(value);
-		const isInNin = isInNInOperator(tagOperator);
-		const chipValue = isInNin
-			? value?.trim()?.replace(/,\s*$/, '')
-			: value?.trim();
-
-		const indexInQueryTags = queryTags.findIndex((qTag) => isEqual(qTag, value));
-		const tagDetails = tags[indexInQueryTags];
-
-		const onCloseHandler = (): void => {
-			onClose();
-			setSearchValue('');
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const tagEditHandler = (value: string): void => {
-			setCurrentFilterItem(tagDetails);
-			setSearchValue(value);
-			setCurrentState(DropdownState.ATTRIBUTE_VALUE);
-			setTags((prev) => prev.filter((t) => !isEqual(t, tagDetails)));
-		};
-
-		const isDisabled = !!searchValue;
-
-		return (
-			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
-					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
-				>
-					<Tooltip title={chipValue}>
-						<TypographyText
-							$isInNin={isInNin}
-							$isEnabled={!!searchValue}
-							$disabled={isDisabled}
-							onClick={(): void => {
-								if (!isDisabled) {
-									tagEditHandler(value);
-								}
-							}}
-						>
-							{chipValue}
-						</TypographyText>
-					</Tooltip>
-				</Badge>
-			</span>
-		);
-	};
-
-	const suffixIconContent = useMemo(() => {
-		if (suffixIcon) {
-			return suffixIcon;
-		}
-		return isOpen ? (
-			<ChevronUp
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		) : (
-			<ChevronDown
-				size={14}
-				color={isDarkMode ? Color.TEXT_VANILLA_100 : Color.TEXT_INK_100}
-			/>
-		);
-	}, [isDarkMode, isOpen, suffixIcon]);
-
-	return (
-		<div className="query-builder-search-v2 ">
-			<Select
-				ref={selectRef}
-				getPopupContainer={popupContainer}
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				transitionName=""
-				choiceTransitionName=""
-				filterOption={false}
-				open={isOpen}
-				suffixIcon={suffixIconContent}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={placeholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={className}
-				rootClassName="query-builder-search client-side-qb-search"
-				disabled={!attributeKeys.length}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onSelect={handleDropdownSelect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={null}
-				showAction={['focus']}
-				onBlur={handleOnBlur}
-			>
-				{dropdownOptions.map((option) => {
-					let val = option.value;
-					try {
-						if (isObject(option.value)) {
-							val = JSON.stringify(option.value);
-						} else {
-							val = option.value;
-						}
-					} catch {
-						val = option.value;
-					}
-					return (
-						<Select.Option key={isObject(val) ? `select-option` : val} value={val}>
-							<Suggestions
-								label={option.label}
-								value={option.value}
-								option={currentState}
-								searchValue={searchValue}
-							/>
-						</Select.Option>
-					);
-				})}
-			</Select>
-		</div>
-	);
-}
-
-ClientSideQBSearch.defaultProps = {
-	placeholder: PLACEHOLDER,
-	className: '',
-	suffixIcon: null,
-	whereClauseConfig: {},
-	attributeValuesMap: {},
-};
-
-export default ClientSideQBSearch;

frontend/src/components/QueryBuilderV2/utils.ts

@@ -8,7 +8,7 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import FilterQueryLexer from 'parser/FilterQueryLexer';
 import FilterQueryParser, {
 	AndExpressionContext,

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/checkboxFilterQuery.ts

@@ -5,7 +5,7 @@ import {
 	QuickFiltersSource,
 } from 'components/QuickFilters/types';
 import { OPERATORS } from 'constants/antlrQueryConstants';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { cloneDeep, isArray } from 'lodash-es';
 import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';

frontend/src/components/TanStackTableView/__tests__/useRecoverFromEmptyPage.test.ts

@@ -0,0 +1,280 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useRecoverFromEmptyPage,
+	UseRecoverFromEmptyPageParams,
+} from '../useRecoverFromEmptyPage';
+
+const REPLACE = { history: 'replace' };
+
+function renderRecovery(
+	overrides: Partial<UseRecoverFromEmptyPageParams> = {},
+): { setPage: jest.Mock; rerender: (next?: unknown) => void } {
+	const setPage = jest.fn();
+	const props: UseRecoverFromEmptyPageParams = {
+		page: 1,
+		pageSize: 10,
+		rowCount: 10,
+		total: 100,
+		isFetching: false,
+		setPage,
+		...overrides,
+	};
+
+	const { rerender } = renderHook(
+		(next: UseRecoverFromEmptyPageParams) => useRecoverFromEmptyPage(next),
+		{ initialProps: props },
+	);
+
+	return {
+		setPage,
+		rerender: (next?: unknown): void =>
+			rerender({ ...props, ...(next as Partial<UseRecoverFromEmptyPageParams>) }),
+	};
+}
+
+describe('useRecoverFromEmptyPage', () => {
+	it('leaves the page alone while it still holds rows', () => {
+		const { setPage } = renderRecovery({ page: 3, rowCount: 10 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('leaves the page alone on page 1 with no rows at all', () => {
+		const { setPage } = renderRecovery({ page: 1, rowCount: 0, total: 0 });
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('jumps to the last page that holds data when the page is out of range', () => {
+		const { setPage } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+	});
+
+	it('replaces the history entry so the back button does not return to the empty page', () => {
+		const { setPage } = renderRecovery({ page: 4, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when the total is unknown', () => {
+		const { setPage } = renderRecovery({ page: 5, rowCount: 0, total: 0 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('steps back one page when the total claims the page should have data', () => {
+		// total says 100 rows exist, yet page 5 came back empty — step back rather
+		// than stall on a page the query cannot actually serve.
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(4, REPLACE);
+	});
+
+	it('clamps a page below the first one', () => {
+		const { setPage } = renderRecovery({ page: 0, rowCount: 10 });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('falls back to page 1 when pageSize is zero', () => {
+		const { setPage } = renderRecovery({
+			page: 5,
+			pageSize: 0,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('waits for the request to settle before moving the user', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 10,
+			isFetching: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+
+		rerender({ page: 3, rowCount: 0, total: 10, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one even when the query failed', () => {
+		// A negative offset is what made the request fail (400 "offset cannot be
+		// negative"), so retrying the same page loops forever — clamp regardless.
+		const { setPage } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('clamps a page below the first one while the query is still in flight', () => {
+		const { setPage } = renderRecovery({
+			page: -2,
+			rowCount: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(1, REPLACE);
+	});
+
+	it('keeps the page when the query failed so a retry lands where the user was', () => {
+		const { setPage } = renderRecovery({
+			page: 3,
+			rowCount: 0,
+			total: 0,
+			isDisabled: true,
+		});
+
+		expect(setPage).not.toHaveBeenCalled();
+	});
+
+	it('clamps a page below the first one exactly once while the request settles', () => {
+		// The clamp runs ahead of both gates, so a request settling underneath an
+		// uncorrected page must not re-issue the same history rewrite.
+		const { setPage, rerender } = renderRecovery({
+			page: 0,
+			rowCount: 0,
+			total: 0,
+			isFetching: true,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		rerender({ page: 0, rowCount: 0, total: 0, isFetching: false });
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('stops correcting once the corrected page comes back with rows', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 7,
+			pageSize: 10,
+			rowCount: 0,
+			total: 25,
+		});
+
+		expect(setPage).toHaveBeenCalledWith(3, REPLACE);
+
+		// The correction lands: the query refetches, then resolves with the rows page 3 holds.
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 25, isFetching: true });
+		rerender({
+			page: 3,
+			pageSize: 10,
+			rowCount: 5,
+			total: 25,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('does not correct again while the same page is still being observed', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+
+		// A refetch cycle that leaves the page untouched — the correction is already in flight.
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: true,
+		});
+		rerender({
+			page: 5,
+			pageSize: 10,
+			rowCount: 0,
+			total: 100,
+			isFetching: false,
+		});
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+
+	it('gives up on step-backs and jumps to page 1 when the total keeps lying', () => {
+		// `total` claims 400 rows exist, but every page comes back empty. Walking back one
+		// page at a time would cost a request per hop, so bail out to page 1 instead.
+		const { setPage, rerender } = renderRecovery({
+			page: 40,
+			pageSize: 10,
+			rowCount: 0,
+			total: 400,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 39, REPLACE);
+
+		rerender({ page: 39, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 38, REPLACE);
+
+		rerender({ page: 38, pageSize: 10, rowCount: 0, total: 400 });
+
+		expect(setPage).toHaveBeenNthCalledWith(3, 1, REPLACE);
+		expect(setPage).toHaveBeenCalledTimes(3);
+	});
+
+	it('corrects again when the user returns to a page that is still empty', () => {
+		const { setPage, rerender } = renderRecovery({
+			page: 3,
+			pageSize: 10,
+			rowCount: 0,
+			total: 10,
+		});
+
+		expect(setPage).toHaveBeenNthCalledWith(1, 1, REPLACE);
+
+		rerender({ page: 1, pageSize: 10, rowCount: 10, total: 10 });
+		rerender({ page: 3, pageSize: 10, rowCount: 0, total: 10 });
+
+		expect(setPage).toHaveBeenNthCalledWith(2, 1, REPLACE);
+	});
+
+	it('does not re-run the correction when setPage is a fresh function each render', () => {
+		// The hook reads setPage through a ref, so an inline arrow must not turn the
+		// ungated `page < 1` clamp into a per-render history rewrite.
+		const setPage = jest.fn();
+		const { rerender } = renderHook(
+			() =>
+				useRecoverFromEmptyPage({
+					page: 0,
+					pageSize: 10,
+					rowCount: 0,
+					total: 0,
+					isFetching: false,
+					setPage: (nextPage, options): void => setPage(nextPage, options),
+				}),
+			{ initialProps: undefined },
+		);
+
+		rerender(undefined);
+		rerender(undefined);
+
+		expect(setPage).toHaveBeenCalledTimes(1);
+	});
+});

frontend/src/components/TanStackTableView/__tests__/useStableTotalCount.test.ts

@@ -0,0 +1,91 @@
+import { renderHook } from '@testing-library/react';
+
+import {
+	useStableTotalCount,
+	UseStableTotalCountParams,
+} from '../useStableTotalCount';
+
+function renderStableTotalCount(initial: UseStableTotalCountParams): {
+	result: { current: number };
+	rerender: (next: UseStableTotalCountParams) => void;
+} {
+	const { result, rerender } = renderHook(
+		(params: UseStableTotalCountParams) => useStableTotalCount(params),
+		{ initialProps: initial },
+	);
+
+	return { result, rerender };
+}
+
+describe('useStableTotalCount', () => {
+	it('reports the total once the load settles', () => {
+		const { result } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(100);
+	});
+
+	it('keeps the last count while the same list refetches', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'pods' });
+
+		expect(result.current).toBe(100);
+	});
+
+	it('forgets the count when the list changes', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+
+		expect(result.current).toBe(0);
+	});
+
+	it('reports the new list total once it arrives', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		rerender({ total: 0, isLoading: true, resetKey: 'nodes' });
+		rerender({ total: 25, isLoading: false, resetKey: 'nodes' });
+
+		expect(result.current).toBe(25);
+	});
+
+	it('reports zero for a list that is genuinely empty', () => {
+		const { result } = renderStableTotalCount({
+			total: 0,
+			isLoading: false,
+			resetKey: 'pods',
+		});
+
+		expect(result.current).toBe(0);
+	});
+
+	it('holds nothing back when no reset key is given', () => {
+		const { result, rerender } = renderStableTotalCount({
+			total: 100,
+			isLoading: false,
+			resetKey: undefined,
+		});
+
+		// Without a key there is no context to compare, so the cache behaves as it
+		// always did: it survives the refetch.
+		rerender({ total: 0, isLoading: true, resetKey: undefined });
+
+		expect(result.current).toBe(100);
+	});
+});

frontend/src/components/TanStackTableView/index.tsx

@@ -9,6 +9,7 @@ export * from './useCalculatedPageSize';
 export * from './useColumnState';
 export * from './useColumnStore';
 export * from './usePreferredPageSize.store';
+export * from './useRecoverFromEmptyPage';
 export * from './useTableParams';
 
 /**
@@ -285,6 +286,51 @@ export * from './useTableParams';
  *
  * **Pagination shows "Auto" option** when `calculatedPageSize` is passed, allowing users
  * to reset to auto-calculated size.
+ *
+ * **`setPage` accepts history options**: `setPage(page, { history: 'replace' })` rewrites the
+ * current history entry instead of pushing a new one. Use `replace` for corrections the user
+ * did not ask for — otherwise the back button walks straight back into the state that was just
+ * corrected. Only applies when the page is synced to the URL; local (non-URL) pages ignore it.
+ *
+ * @example useRecoverFromEmptyPage — send the user back to a page that has data
+ *
+ * When rows disappear underneath the current page (filters narrowed, time range moved, items
+ * deleted), the user is stranded on an empty page they cannot leave by scrolling. This hook
+ * watches the fetched result and corrects the page with `history: 'replace'`, so the back
+ * button does not return to the empty page.
+ *
+ * Correction rules:
+ * - `page < 1` → jump to page 1, even while fetching or disabled. Such a page usually maps to a
+ *   negative offset the API rejects (400 `offset cannot be negative`), so the response can never
+ *   confirm the page is empty — deferring to it would strand the user on a permanent error.
+ * - Page is empty and not page 1 → go to `min(ceil(total / pageSize), page - 1)`. When `total`
+ *   is trustworthy that lands on the last page holding data; when `total` is unknown or zero it
+ *   lands on page 1; and when `total` claims this page should have had rows it steps back a
+ *   single page. Repeated step-backs give up and jump to page 1 after the second one, so a
+ *   badly inflated `total` cannot walk the user down one request at a time.
+ * - Page has rows, or the user is already on page 1 → do nothing (an empty page 1 means there
+ *   is genuinely nothing to show).
+ *
+ * Pass `isFetching` so the hook waits for the request to settle, and `isDisabled` so a failed
+ * request is not mistaken for an empty page. Neither gate suppresses the `page < 1` clamp.
+ *
+ * ```tsx
+ * import { useRecoverFromEmptyPage, useTableParams } from 'components/TanStackTableView';
+ *
+ * const { page, limit, setPage } = useTableParams(QUERY_PARAMS, { page: 1, limit: 20 });
+ * const { data, isLoading, isFetching, isError } = useListQuery({ page, limit });
+ *
+ * useRecoverFromEmptyPage({
+ *   page,
+ *   pageSize: limit,
+ *   rowCount: data?.rows.length ?? 0,
+ *   total: data?.total ?? 0,
+ *   isFetching: isLoading || isFetching,
+ *   // Skip correction on errors — no rows there means "request failed", not "page is empty".
+ *   isDisabled: isError,
+ *   setPage,
+ * });
+ * ```
  */
 const TanStackTable = Object.assign(TanStackTableBase, {
 	Text: TanStackTableText,

frontend/src/components/TanStackTableView/useRecoverFromEmptyPage.ts

@@ -0,0 +1,107 @@
+import { useEffect, useRef } from 'react';
+
+import { SetPageOptions } from './useTableParams';
+
+const FIRST_PAGE = 1;
+const REPLACE_HISTORY: SetPageOptions = { history: 'replace' };
+
+/**
+ * How many single-page step-backs to attempt before giving up and going to page 1.
+ *
+ * A step-back only happens when `total` claims the current page should hold data but the
+ * response came back empty. Each hop costs a request, so an inflated `total` on a high page
+ * number would otherwise walk the user down one page at a time behind a spinner.
+ */
+const MAX_STEP_BACKS = 2;
+
+type Correction = {
+	from: number;
+	to: number;
+};
+
+export type UseRecoverFromEmptyPageParams = {
+	page: number;
+	pageSize: number;
+	rowCount: number;
+	total: number;
+	isFetching: boolean;
+	isDisabled?: boolean;
+	setPage: (page: number, options?: SetPageOptions) => void;
+};
+
+export function useRecoverFromEmptyPage({
+	page,
+	pageSize,
+	rowCount,
+	total,
+	isFetching,
+	isDisabled = false,
+	setPage,
+}: UseRecoverFromEmptyPageParams): void {
+	const setPageRef = useRef(setPage);
+	const lastCorrectionRef = useRef<Correction | null>(null);
+	const stepBacksRef = useRef(0);
+
+	useEffect(() => {
+		setPageRef.current = setPage;
+	});
+
+	useEffect(() => {
+		if (lastCorrectionRef.current && lastCorrectionRef.current.from !== page) {
+			lastCorrectionRef.current = null;
+		}
+
+		const correctTo = (nextPage: number): boolean => {
+			if (lastCorrectionRef.current?.to === nextPage) {
+				return false;
+			}
+
+			lastCorrectionRef.current = { from: page, to: nextPage };
+			setPageRef.current(nextPage, REPLACE_HISTORY);
+			return true;
+		};
+
+		// A page below the first one is invalid on its own terms — it usually maps to a
+		// negative offset the API rejects outright, so waiting for a response that will
+		// never arrive (or trusting a failed one) would strand the user for good.
+		if (page < FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			void correctTo(FIRST_PAGE);
+			return;
+		}
+
+		if (isFetching || isDisabled) {
+			return;
+		}
+
+		// The page has data, or there is genuinely nothing to show anywhere.
+		if (rowCount > 0 || page === FIRST_PAGE) {
+			stepBacksRef.current = 0;
+			return;
+		}
+
+		const currentPage = Math.floor(page);
+		const lastPageWithData =
+			pageSize > 0 && total > 0 ? Math.ceil(total / pageSize) : FIRST_PAGE;
+		const nextPage = Math.max(
+			FIRST_PAGE,
+			Math.min(lastPageWithData, currentPage - 1),
+		);
+
+		// `total` disagrees with the response: it says this page should have rows, so the
+		// only safe move is one page back. Cap how often that repeats — every hop is a
+		// request, and a badly inflated `total` would otherwise crawl down from page 40.
+		const isStepBack = nextPage === currentPage - 1;
+
+		if (isStepBack && stepBacksRef.current >= MAX_STEP_BACKS) {
+			if (correctTo(FIRST_PAGE)) {
+				stepBacksRef.current = 0;
+			}
+			return;
+		}
+
+		if (correctTo(nextPage) && isStepBack) {
+			stepBacksRef.current += 1;
+		}
+	}, [isFetching, isDisabled, page, pageSize, rowCount, total]);
+}

frontend/src/components/TanStackTableView/useStableTotalCount.ts

@@ -0,0 +1,35 @@
+import { useRef } from 'react';
+
+export type UseStableTotalCountParams = {
+	total: number | undefined;
+	isLoading: boolean;
+	/**
+	 * Identifies the list being counted. When it changes, the cached count is
+	 * dropped so the previous list's page count cannot outlive it.
+	 */
+	resetKey: string | undefined;
+};
+
+/**
+ * Holds on to the last non-zero total so the pagination does not flash while the
+ * same list refetches, and forgets it as soon as `resetKey` moves to another list.
+ */
+export function useStableTotalCount({
+	total,
+	isLoading,
+	resetKey,
+}: UseStableTotalCountParams): number {
+	const prevTotalRef = useRef(total || 0);
+	const prevResetKeyRef = useRef(resetKey);
+
+	if (prevResetKeyRef.current !== resetKey) {
+		prevResetKeyRef.current = resetKey;
+		prevTotalRef.current = 0;
+	}
+
+	if (total && total > 0) {
+		prevTotalRef.current = total;
+	}
+
+	return isLoading ? prevTotalRef.current : total || 0;
+}

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -29,12 +29,16 @@ type Defaults = {
 	cleanupOnUnmount?: boolean;
 };
 
+export type SetPageOptions = {
+	history?: 'push' | 'replace';
+};
+
 export type TableParamsResult = {
 	page: number;
 	limit: number;
 	orderBy: SortState | null;
 	expanded: ExpandedState;
-	setPage: (p: number) => void;
+	setPage: (p: number, options?: SetPageOptions) => void;
 	setLimit: (l: number) => void;
 	setOrderBy: (s: SortState | null) => void;
 	setExpanded: (updaterOrValue: Updater<ExpandedState>) => void;
@@ -249,6 +253,17 @@ export function useTableParams(
 		[],
 	);
 
+	const setUrlPageWithOptions = useCallback(
+		(page: number, options?: SetPageOptions): void => {
+			void setUrlPage(page, options);
+		},
+		[setUrlPage],
+	);
+
+	const setLocalPageValue = useCallback((page: number): void => {
+		setLocalPage(page);
+	}, []);
+
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
 	const prevOrderByRef = useRef<string | null>(null);
 
@@ -303,7 +318,7 @@ export function useTableParams(
 		limit: useUrlForLimit ? urlLimit : localLimit,
 		orderBy: (useUrlForOrderBy ? urlOrderBy : localOrderBy) as SortState | null,
 		expanded: useUrlForExpanded ? urlExpanded : localExpanded,
-		setPage: useUrlForPage ? setUrlPage : setLocalPage,
+		setPage: useUrlForPage ? setUrlPageWithOptions : setLocalPageValue,
 		setLimit: useUrlForLimit ? setUrlLimit : setLocalLimitWithPersist,
 		setOrderBy: useUrlForOrderBy ? setUrlOrderBy : setLocalOrderBy,
 		setExpanded: useUrlForExpanded ? setUrlExpanded : handleSetLocalExpanded,

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -38,9 +38,6 @@ export default function ChartWrapper({
 	customTooltip,
 	pinnedTooltipElement,
 	tooltipPortalRoot,
-	customLegend,
-	legendLabels,
-	contentFooter,
 	'data-testid': testId,
 }: ChartProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -50,10 +47,6 @@ export default function ChartWrapper({
 			if (!showLegend) {
 				return null;
 			}
-			// Charts whose legend does not list uPlot series supply their own.
-			if (customLegend) {
-				return customLegend(averageLegendWidth);
-			}
 			return (
 				<UPlotLegend
 					config={config}
@@ -62,7 +55,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position, showLegend, customLegend],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -93,8 +86,6 @@ export default function ChartWrapper({
 				containerHeight={containerHeight}
 				legendConfig={legendConfig}
 				legendComponent={legendComponent}
-				seriesLabels={legendLabels}
-				contentFooter={contentFooter}
 				layoutChildren={layoutChildren}
 			>
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/Heatmap.tsx

@@ -1,311 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
-import ColorBar from 'lib/uPlotV2/components/ColorBar/ColorBar';
-import Legend from 'lib/uPlotV2/components/Legend/Legend';
-import HeatmapTooltip from 'lib/uPlotV2/components/Tooltip/HeatmapTooltip';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import {
-	createHeatmapColorResolver,
-	DEFAULT_HEATMAP_COLORS,
-	resolveCountDomain,
-	resolveExtremeColor,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-import type { LegendItem } from 'lib/uPlotV2/config/types';
-import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	resolveGroupPeaks,
-	resolveHeatmapGrid,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/grid';
-import {
-	HeatmapAxisScale,
-	HeatmapCell,
-	HeatmapColorMode,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-import { HeatmapChartProps } from './types';
-import { useHeatmapGroupLegend } from './useHeatmapGroupLegend';
-import { buildHeatmapConfig, prepareHeatmapChartData } from './utils';
-
-/** Vertical space the colour bar takes out of the container. */
-const COLOR_BAR_HEIGHT = 28;
-
-/**
- * Columns are time slices, rows are bucket ranges, cell colour is the observation
- * count — so a distribution can be watched changing shape instead of collapsing to
- * percentile lines. Drawn on canvas (see `createHeatmapHooks`): a 40 × 240 grid is
- * ~9,600 cells, far past what per-cell DOM carries.
- */
-export default function Heatmap(props: HeatmapChartProps): JSX.Element {
-	const {
-		id,
-		buckets,
-		step,
-		series,
-		width,
-		height,
-		isDarkMode,
-		axisScale = HeatmapAxisScale.Log,
-		yAxisUnit,
-		decimalPrecision,
-		timezone,
-		showVisualMap = true,
-		showLegend = true,
-		legendPosition = LegendPosition.BOTTOM,
-		dimOnHover = true,
-		showTooltip = true,
-		canPinTooltip = false,
-		pinKey,
-		seriesColor,
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-		onCellClick,
-		renderTooltipFooter,
-		tooltipPortalRoot,
-		layoutChildren,
-		'data-testid': testId,
-	} = props;
-
-	const [hoveredCell, setHoveredCell] = useState<HeatmapCell | null>(null);
-	const hoveredCellRef = useRef<HeatmapCell | null>(null);
-	const onCellClickRef = useRef(onCellClick);
-	onCellClickRef.current = onCellClick;
-
-	const groups = useMemo(() => series.map((entry) => entry.label), [series]);
-
-	// One series has nothing to choose between.
-	const hasGroupLegend = showLegend && groups.length > 1;
-
-	const colors = useMemo(
-		() => ({ ...DEFAULT_HEATMAP_COLORS, ...props.colors }),
-		[props.colors],
-	);
-
-	// The opacity fill no longer follows a group colour: with several groups enabled
-	// at once there is no single one to follow.
-	const resolvedSeriesColor = seriesColor ?? DEFAULT_HEATMAP_COLORS.fill;
-
-	// Opacity mode keeps the solid fill; a partially transparent marker is hard to
-	// read against the panel.
-	const extremeColor = resolveExtremeColor({
-		options: colors,
-		isDarkMode,
-		seriesColor: resolvedSeriesColor,
-	});
-
-	const {
-		visibleGroups,
-		focusedSeriesIndex,
-		onLegendClick,
-		onLegendMouseMove,
-		onLegendMouseLeave,
-	} = useHeatmapGroupLegend({ groups });
-
-	const grid = useMemo(
-		() => resolveHeatmapGrid({ buckets, step, series, visibleGroups }),
-		[buckets, step, series, visibleGroups],
-	);
-
-	const yAxis = useMemo(
-		() => resolveHeatmapYAxis(grid.bounds, axisScale),
-		[grid.bounds, axisScale],
-	);
-
-	const hasGrid = yAxis.rows.length > 0 && grid.timestamps.length > 0;
-
-	const data = useMemo(
-		() =>
-			hasGrid
-				? prepareHeatmapChartData(grid, yAxis.rows.length)
-				: ([[]] as unknown as ReturnType<typeof prepareHeatmapChartData>),
-		[grid, yAxis.rows.length, hasGrid],
-	);
-
-	const colorResolver = useMemo(
-		() =>
-			createHeatmapColorResolver({
-				options: colors,
-				domain: resolveCountDomain(colors, grid.counts),
-				isDarkMode,
-				seriesColor: resolvedSeriesColor,
-			}),
-		[colors, grid.counts, isDarkMode, resolvedSeriesColor],
-	);
-
-	// Stable: the renderer captures it at config-build time, so a new identity would
-	// recreate the plot on every hover.
-	const handleHoverChange = useCallback((cell: HeatmapCell | null): void => {
-		hoveredCellRef.current = cell;
-		setHoveredCell(cell);
-	}, []);
-
-	const config = useMemo(
-		() =>
-			buildHeatmapConfig({
-				id,
-				grid,
-				yAxis,
-				colors,
-				isDarkMode,
-				seriesColor: resolvedSeriesColor,
-				dimOnHover,
-				onHoverChange: handleHoverChange,
-				yAxisUnit,
-				decimalPrecision,
-				timezone,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			id,
-			grid,
-			yAxis,
-			colors,
-			isDarkMode,
-			resolvedSeriesColor,
-			dimOnHover,
-			handleHoverChange,
-			yAxisUnit,
-			decimalPrecision,
-			timezone,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-		],
-	);
-
-	// Each marker takes the ramp colour for where that group's densest cell falls on
-	// the colour bar, so a swatch reads against the same scale as the grid.
-	const groupPeaks = useMemo(() => resolveGroupPeaks(series), [series]);
-	const isPaletteMode = colors.mode === HeatmapColorMode.Palette;
-
-	const legendItems = useMemo<LegendItem[]>(
-		() =>
-			groups.map((group, index) => ({
-				// +1 mirrors uPlot's 1-based data series, so the shared legend's index
-				// handling is identical across charts.
-				seriesIndex: index + 1,
-				label: group,
-				color: isPaletteMode
-					? (colorResolver.colorFor(groupPeaks.get(group) ?? 0) ?? extremeColor)
-					: extremeColor,
-				show: visibleGroups.includes(group),
-			})),
-		[
-			groups,
-			visibleGroups,
-			isPaletteMode,
-			colorResolver,
-			groupPeaks,
-			extremeColor,
-		],
-	);
-
-	const renderTooltip = useCallback(
-		(args: TooltipRenderArgs): React.ReactNode => (
-			<HeatmapTooltip
-				{...args}
-				id={id}
-				yAxis={yAxis}
-				step={grid.step}
-				series={series}
-				visibleGroups={visibleGroups}
-				groupColor={extremeColor}
-				yAxisUnit={yAxisUnit}
-				decimalPrecision={decimalPrecision}
-				timezone={timezone}
-				canPinTooltip={canPinTooltip}
-				renderTooltipFooter={renderTooltipFooter}
-			/>
-		),
-		[
-			id,
-			yAxis,
-			grid.step,
-			series,
-			visibleGroups,
-			extremeColor,
-			yAxisUnit,
-			decimalPrecision,
-			timezone,
-			canPinTooltip,
-			renderTooltipFooter,
-		],
-	);
-
-	const handleClick = useCallback((clickData: ChartClickData): void => {
-		if (hoveredCellRef.current) {
-			onCellClickRef.current?.(hoveredCellRef.current, clickData);
-		}
-	}, []);
-
-	const groupLegend = useCallback(
-		(averageLegendWidth: number): React.ReactNode => (
-			<Legend
-				items={legendItems}
-				position={legendPosition}
-				averageLegendWidth={averageLegendWidth}
-				focusedSeriesIndex={focusedSeriesIndex}
-				onClick={onLegendClick}
-				onMouseMove={onLegendMouseMove}
-				onMouseLeave={onLegendMouseLeave}
-			/>
-		),
-		[
-			legendItems,
-			legendPosition,
-			focusedSeriesIndex,
-			onLegendClick,
-			onLegendMouseMove,
-			onLegendMouseLeave,
-		],
-	);
-
-	const visualMap = useMemo(() => {
-		if (!showVisualMap || !hasGrid) {
-			return null;
-		}
-		return (
-			<ColorBar
-				label="count"
-				ramp={colorResolver.ramp}
-				minLabel={colorResolver.domain.min.toLocaleString()}
-				maxLabel={colorResolver.domain.max.toLocaleString()}
-				markerPosition={colorResolver.positionOf(hoveredCell?.count ?? null)}
-			/>
-		);
-	}, [showVisualMap, hasGrid, colorResolver, hoveredCell]);
-
-	return (
-		<ChartWrapper
-			config={config}
-			data={data}
-			width={width}
-			height={
-				showVisualMap && hasGrid ? Math.max(0, height - COLOR_BAR_HEIGHT) : height
-			}
-			legendConfig={{ position: legendPosition }}
-			showLegend={hasGroupLegend}
-			customLegend={groupLegend}
-			legendLabels={groups}
-			showTooltip={showTooltip}
-			canPinTooltip={canPinTooltip}
-			pinKey={pinKey}
-			onClick={onCellClick ? handleClick : undefined}
-			yAxisUnit={yAxisUnit}
-			decimalPrecision={decimalPrecision}
-			timezone={timezone}
-			customTooltip={renderTooltip}
-			renderTooltipFooter={renderTooltipFooter}
-			tooltipPortalRoot={tooltipPortalRoot}
-			contentFooter={visualMap}
-			layoutChildren={layoutChildren}
-			data-testid={testId}
-		/>
-	);
-}

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/__tests__/Heatmap.test.tsx

@@ -1,252 +0,0 @@
-import type React from 'react';
-import userEvent from '@testing-library/user-event';
-import type { LegendItem } from 'lib/uPlotV2/config/types';
-import { render, screen } from 'tests/test-utils';
-import {
-	createHeatmapColorResolver,
-	DEFAULT_HEATMAP_COLORS,
-	resolveCountDomain,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-import { resolveHeatmapGrid } from 'lib/uPlotV2/plugins/HeatmapPlugin/grid';
-import {
-	HeatmapColorMode,
-	HeatmapSeries,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-
-import Heatmap from '../Heatmap';
-
-// The shared Legend virtualises its items; render them all so they are queryable.
-jest.mock('react-virtuoso', () => ({
-	VirtuosoGrid: ({
-		data,
-		itemContent,
-	}: {
-		data: LegendItem[];
-		itemContent: (index: number, item: LegendItem) => React.ReactNode;
-	}): JSX.Element => (
-		<div>
-			{data.map((item, index) => (
-				<div key={item.seriesIndex}>{itemContent(index, item)}</div>
-			))}
-		</div>
-	),
-}));
-
-const BUCKETS = [128, 256, 1024];
-const STEP = 60;
-
-/** Two groups whose counts sum to a peak of 1,204 in the combined view. */
-const SERIES: HeatmapSeries[] = [
-	{
-		label: 'service.name=cart',
-		points: [
-			{ timestamp: 1000, counts: [1, 4, 7, 10] },
-			{ timestamp: 1060, counts: [2, null, 8, 11] },
-			{ timestamp: 1120, counts: [3, 6, 9, 1200] },
-		],
-	},
-	{
-		label: 'service.name=checkout',
-		points: [{ timestamp: 1120, counts: [0, 0, 0, 4] }],
-	},
-];
-
-function renderHeatmap(
-	props: Partial<React.ComponentProps<typeof Heatmap>> = {},
-): ReturnType<typeof render> {
-	return render(
-		<Heatmap
-			id="panel-1"
-			buckets={BUCKETS}
-			step={STEP}
-			series={SERIES}
-			width={800}
-			height={400}
-			isDarkMode
-			data-testid="heatmap"
-			{...props}
-		/>,
-	);
-}
-
-describe('Heatmap', () => {
-	it('renders the plot container', () => {
-		renderHeatmap();
-
-		expect(screen.getByTestId('heatmap')).toBeInTheDocument();
-	});
-
-	it('shows the colour bar with the resolved count domain', () => {
-		renderHeatmap();
-
-		expect(screen.getByTestId('color-bar')).toBeInTheDocument();
-		expect(screen.getByText('0')).toBeInTheDocument();
-		expect(screen.getByText('1,204')).toBeInTheDocument();
-	});
-
-	it('puts the colour bar against the plot, with the legend after it', () => {
-		renderHeatmap();
-
-		const bar = screen.getByTestId('color-bar');
-		const legend = screen.getByText('service.name=cart').closest('.legend-item');
-		// The bar is the scale key for the grid, so it reads before the controls.
-		expect(
-			bar.compareDocumentPosition(legend as Node) &
-				Node.DOCUMENT_POSITION_FOLLOWING,
-		).toBeTruthy();
-	});
-
-	it('keeps the colour bar inside the chart column, not below the legend', () => {
-		renderHeatmap();
-
-		expect(
-			screen.getByTestId('color-bar').closest('.chart-layout__content'),
-		).not.toBeNull();
-	});
-
-	it('hides the colour bar when the visual map is off', () => {
-		renderHeatmap({ showVisualMap: false });
-
-		expect(screen.queryByTestId('color-bar')).not.toBeInTheDocument();
-	});
-
-	it('labels the colour bar with an explicit clamp instead of the data range', () => {
-		renderHeatmap({ colors: { minCount: 5, maxCount: 500 } });
-
-		expect(screen.getByText('5')).toBeInTheDocument();
-		expect(screen.getByText('500')).toBeInTheDocument();
-	});
-
-	it('falls back to the no-data state when the metric has no buckets', () => {
-		renderHeatmap({ buckets: [] });
-
-		expect(screen.getByText('No Data')).toBeInTheDocument();
-		expect(screen.queryByTestId('color-bar')).not.toBeInTheDocument();
-	});
-
-	it('falls back to the no-data state when no columns came back', () => {
-		renderHeatmap({ series: [] });
-
-		expect(screen.getByText('No Data')).toBeInTheDocument();
-	});
-});
-
-describe('Heatmap group legend', () => {
-	const CART = 'service.name=cart';
-	const CHECKOUT = 'service.name=checkout';
-
-	function legendItem(label: string): HTMLElement {
-		const item = screen.getByText(label).closest('.legend-item');
-		if (!item) {
-			throw new Error(`no legend item for ${label}`);
-		}
-		return item as HTMLElement;
-	}
-
-	function marker(label: string): HTMLElement {
-		const element = legendItem(label).querySelector<HTMLElement>(
-			'[data-is-legend-marker]',
-		);
-		if (!element) {
-			throw new Error(`no marker for ${label}`);
-		}
-		return element;
-	}
-
-	it('lists the groups, with no combined-view entry', () => {
-		renderHeatmap();
-
-		expect(screen.getByText(CART)).toBeInTheDocument();
-		expect(screen.getByText(CHECKOUT)).toBeInTheDocument();
-		expect(screen.queryByText(/all groups/i)).not.toBeInTheDocument();
-	});
-
-	it('enables every group to begin with', () => {
-		renderHeatmap();
-
-		expect(legendItem(CART)).not.toHaveClass('legend-item-off');
-		expect(legendItem(CHECKOUT)).not.toHaveClass('legend-item-off');
-	});
-
-	it('isolates a group when its label is clicked', async () => {
-		renderHeatmap();
-
-		await userEvent.click(screen.getByText(CART));
-
-		expect(legendItem(CART)).not.toHaveClass('legend-item-off');
-		expect(legendItem(CHECKOUT)).toHaveClass('legend-item-off');
-	});
-
-	it('restores every group when the isolated label is clicked again', async () => {
-		renderHeatmap();
-
-		await userEvent.click(screen.getByText(CART));
-		await userEvent.click(screen.getByText(CART));
-
-		expect(legendItem(CHECKOUT)).not.toHaveClass('legend-item-off');
-	});
-
-	it('excludes just one group when its marker is clicked', async () => {
-		renderHeatmap();
-
-		await userEvent.click(marker(CHECKOUT));
-
-		expect(legendItem(CHECKOUT)).toHaveClass('legend-item-off');
-		expect(legendItem(CART)).not.toHaveClass('legend-item-off');
-	});
-
-	/** The ramp the cells and colour bar are drawn from, for the default options. */
-	function activeRamp(): string[] {
-		const grid = resolveHeatmapGrid({
-			buckets: BUCKETS,
-			step: STEP,
-			series: SERIES,
-		});
-		return createHeatmapColorResolver({
-			options: DEFAULT_HEATMAP_COLORS,
-			domain: resolveCountDomain(DEFAULT_HEATMAP_COLORS, grid.counts),
-			isDarkMode: true,
-			seriesColor: DEFAULT_HEATMAP_COLORS.fill,
-		}).ramp.map((color) => color.toLowerCase());
-	}
-
-	it('places each marker where its group sits on the colour bar', () => {
-		renderHeatmap();
-		const ramp = activeRamp();
-
-		// cart peaks at 1200, checkout at 4, so cart sits further along the ramp.
-		// The DOM lowercases hex; the ramp is built uppercase.
-		const cart = ramp.indexOf(marker(CART).style.borderColor.toLowerCase());
-		const checkout = ramp.indexOf(
-			marker(CHECKOUT).style.borderColor.toLowerCase(),
-		);
-
-		expect(cart).toBeGreaterThan(-1);
-		expect(checkout).toBeGreaterThan(-1);
-		expect(cart).toBeGreaterThan(checkout);
-	});
-
-	it('gives every marker the solid fill in opacity mode', () => {
-		renderHeatmap({
-			colors: { mode: HeatmapColorMode.Opacity, fill: '#e5484d' },
-		});
-
-		// A partially transparent marker is hard to read against the panel.
-		expect(marker(CART).style.borderColor).toBe(
-			marker(CHECKOUT).style.borderColor,
-		);
-		expect(marker(CART).style.borderColor).not.toBe('');
-	});
-
-	it('hides the legend when there is only one group to choose from', () => {
-		renderHeatmap({ series: [SERIES[0]] });
-
-		expect(screen.queryByText(CART)).not.toBeInTheDocument();
-	});
-
-	it('hides the legend when asked', () => {
-		renderHeatmap({ showLegend: false });
-
-		expect(screen.queryByText(CART)).not.toBeInTheDocument();
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/__tests__/useHeatmapGroupLegend.test.ts

@@ -1,147 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import type { MouseEvent } from 'react';
-
-import { useHeatmapGroupLegend } from '../useHeatmapGroupLegend';
-
-const GROUPS = ['cart', 'checkout', 'payments'];
-
-/** Mimics a click on an item's label, as the shared Legend renders it. */
-function labelClick(seriesIndex: number): MouseEvent<HTMLDivElement> {
-	const wrapper = document.createElement('div');
-	wrapper.setAttribute('data-legend-item-id', String(seriesIndex));
-	const label = document.createElement('span');
-	wrapper.appendChild(label);
-	return { target: label } as unknown as MouseEvent<HTMLDivElement>;
-}
-
-/** Mimics a click on the item's marker circle. */
-function markerClick(seriesIndex: number): MouseEvent<HTMLDivElement> {
-	const wrapper = document.createElement('div');
-	wrapper.setAttribute('data-legend-item-id', String(seriesIndex));
-	const marker = document.createElement('div');
-	marker.dataset.isLegendMarker = 'true';
-	wrapper.appendChild(marker);
-	return { target: marker } as unknown as MouseEvent<HTMLDivElement>;
-}
-
-function render(
-	groups: string[] = GROUPS,
-): ReturnType<
-	typeof renderHook<ReturnType<typeof useHeatmapGroupLegend>, unknown>
-> {
-	return renderHook(() => useHeatmapGroupLegend({ groups }));
-}
-
-describe('useHeatmapGroupLegend', () => {
-	it('enables every group to begin with', () => {
-		const { result } = render();
-
-		expect(result.current.visibleGroups).toStrictEqual(GROUPS);
-	});
-
-	it('isolates a group when its label is clicked', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(labelClick(2)));
-
-		expect(result.current.visibleGroups).toStrictEqual(['checkout']);
-	});
-
-	it('restores every group when the isolated label is clicked again', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(labelClick(2)));
-		act(() => result.current.onLegendClick(labelClick(2)));
-
-		expect(result.current.visibleGroups).toStrictEqual(GROUPS);
-	});
-
-	it('moves the isolation when a different label is clicked', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(labelClick(1)));
-		act(() => result.current.onLegendClick(labelClick(3)));
-
-		expect(result.current.visibleGroups).toStrictEqual(['payments']);
-	});
-
-	it('excludes just one group when its marker is clicked', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(markerClick(2)));
-
-		expect(result.current.visibleGroups).toStrictEqual(['cart', 'payments']);
-	});
-
-	it('re-includes a group when its marker is clicked again', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(markerClick(2)));
-		act(() => result.current.onLegendClick(markerClick(2)));
-
-		expect(result.current.visibleGroups).toStrictEqual(GROUPS);
-	});
-
-	it('excludes more than one group', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(markerClick(1)));
-		act(() => result.current.onLegendClick(markerClick(3)));
-
-		expect(result.current.visibleGroups).toStrictEqual(['checkout']);
-	});
-
-	it('drops the isolation when a marker is clicked, so the label can isolate again', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendClick(labelClick(1)));
-		// Re-including cart by marker leaves it enabled but no longer isolated.
-		act(() => result.current.onLegendClick(markerClick(2)));
-		act(() => result.current.onLegendClick(labelClick(1)));
-
-		expect(result.current.visibleGroups).toStrictEqual(['cart']);
-	});
-
-	it('allows every group to be excluded, as the other legends do', () => {
-		const { result } = render();
-
-		GROUPS.forEach((_, index) =>
-			act(() => result.current.onLegendClick(markerClick(index + 1))),
-		);
-
-		expect(result.current.visibleGroups).toStrictEqual([]);
-	});
-
-	it('ignores clicks that miss an entry', () => {
-		const { result } = render();
-		const stray = {
-			target: document.createElement('div'),
-		} as unknown as MouseEvent<HTMLDivElement>;
-
-		act(() => result.current.onLegendClick(stray));
-
-		expect(result.current.visibleGroups).toStrictEqual(GROUPS);
-	});
-
-	it('forgets a hidden group that left the result', () => {
-		const { result, rerender } = renderHook(
-			({ groups }) => useHeatmapGroupLegend({ groups }),
-			{ initialProps: { groups: GROUPS } },
-		);
-
-		act(() => result.current.onLegendClick(markerClick(3)));
-		rerender({ groups: ['cart', 'checkout'] });
-
-		expect(result.current.visibleGroups).toStrictEqual(['cart', 'checkout']);
-	});
-
-	it('tracks the hovered entry for the legend"s focus highlight', () => {
-		const { result } = render();
-
-		act(() => result.current.onLegendMouseMove(labelClick(2)));
-		expect(result.current.focusedSeriesIndex).toBe(2);
-
-		act(() => result.current.onLegendMouseLeave());
-		expect(result.current.focusedSeriesIndex).toBeNull();
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/__tests__/utils.test.ts

@@ -1,195 +0,0 @@
-import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import { DEFAULT_HEATMAP_COLORS } from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-import {
-	HeatmapAxisScale,
-	HeatmapGrid,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import type uPlot from 'uplot';
-
-import { buildHeatmapConfig, prepareHeatmapChartData } from '../utils';
-
-const GRID: HeatmapGrid = {
-	bounds: [128, 256, 1024],
-	timestamps: [1000, 1060, 1120],
-	step: 60,
-	counts: [
-		[1, 2, 3],
-		[4, null, 6],
-		[7, 8, 9],
-		[0, 0, 0],
-	],
-};
-
-const Y_AXIS = resolveHeatmapYAxis(GRID.bounds, HeatmapAxisScale.Log);
-
-/** Tall enough that no tick needs thinning. */
-const TALL_PLOT = { bbox: { height: 1000 } } as uPlot;
-
-function readSplits(
-	config: ReturnType<typeof buildHeatmapConfig>,
-	plot: uPlot,
-): number[] {
-	const [, yAxisConfig] = config.getConfig().axes ?? [];
-	return (yAxisConfig.splits as (self: uPlot) => number[])(plot);
-}
-
-function readLabels(
-	config: ReturnType<typeof buildHeatmapConfig>,
-	splits: number[],
-): string[] {
-	const [, yAxisConfig] = config.getConfig().axes ?? [];
-	return (yAxisConfig.values as (u: uPlot, splits: number[]) => string[])(
-		{} as uPlot,
-		splits,
-	);
-}
-
-function readRange(scale?: uPlot.Scale): [number, number] {
-	const range = scale?.range as (
-		u: uPlot,
-		min: number,
-		max: number,
-	) => [number, number];
-	return range({} as uPlot, 0, 0);
-}
-
-function buildConfig(
-	overrides: Partial<Parameters<typeof buildHeatmapConfig>[0]> = {},
-): ReturnType<typeof buildHeatmapConfig> {
-	return buildHeatmapConfig({
-		id: 'panel-1',
-		grid: GRID,
-		yAxis: Y_AXIS,
-		colors: DEFAULT_HEATMAP_COLORS,
-		isDarkMode: true,
-		seriesColor: '#4e74f8',
-		...overrides,
-	});
-}
-
-describe('prepareHeatmapChartData', () => {
-	it('puts timestamps first and one series per bucket row', () => {
-		const data = prepareHeatmapChartData(GRID, Y_AXIS.rows.length);
-
-		expect(data).toHaveLength(Y_AXIS.rows.length + 1);
-		expect(data[0]).toStrictEqual(GRID.timestamps);
-		expect(data[1]).toStrictEqual([1, 2, 3]);
-	});
-
-	it('preserves null cells rather than zeroing them', () => {
-		const data = prepareHeatmapChartData(GRID, Y_AXIS.rows.length);
-
-		expect(data[2]).toStrictEqual([4, null, 6]);
-	});
-
-	it('pads short rows so every uPlot data array is the same length', () => {
-		const data = prepareHeatmapChartData(
-			{ ...GRID, counts: [[1]] },
-			Y_AXIS.rows.length,
-		);
-
-		expect(data[1]).toStrictEqual([1, null, null]);
-	});
-
-	it('pads missing rows up to the resolved row count', () => {
-		const data = prepareHeatmapChartData({ ...GRID, counts: [] }, 2);
-
-		expect(data).toHaveLength(3);
-		expect(data[2]).toStrictEqual([null, null, null]);
-	});
-});
-
-describe('buildHeatmapConfig', () => {
-	it('registers one series per bucket row, plus uPlot"s timestamp series', () => {
-		const config = buildHeatmapConfig({
-			id: 'panel-1',
-			grid: GRID,
-			yAxis: Y_AXIS,
-			colors: DEFAULT_HEATMAP_COLORS,
-			isDarkMode: true,
-			seriesColor: '#4e74f8',
-		}).getConfig();
-
-		expect(config.series).toHaveLength(Y_AXIS.rows.length + 1);
-	});
-
-	it('draws no paths or points per series — the renderer paints the cells', () => {
-		const [, firstRow] = buildConfig().getConfig().series ?? [];
-
-		expect((firstRow as uPlot.Series).paths?.({} as uPlot, 1, 0, 1)).toBeNull();
-		expect((firstRow as uPlot.Series).points?.show).toBe(false);
-	});
-
-	it('labels series by bucket range, including the open-ended rows', () => {
-		const labels = (buildConfig().getConfig().series ?? [])
-			.slice(1)
-			.map((series) => series.label);
-
-		expect(labels[0]).toContain('≤');
-		expect(labels[labels.length - 1]).toContain('>');
-	});
-
-	it('spans the x scale to the end of the last column, not its start', () => {
-		const { x } = buildConfig().getConfig().scales ?? {};
-
-		expect(readRange(x)).toStrictEqual([1000, 1180]);
-	});
-
-	it('prefers the query window over the grid extent', () => {
-		const { x } =
-			buildConfig({ minTimeScale: 900, maxTimeScale: 1500 }).getConfig().scales ??
-			{};
-
-		expect(readRange(x)).toStrictEqual([900, 1500]);
-	});
-
-	it('pins the y scale to the bucket axis instead of auto-ranging on counts', () => {
-		const { y } = buildConfig().getConfig().scales ?? {};
-
-		expect(y?.auto).toBe(false);
-		expect(readRange(y)).toStrictEqual([Y_AXIS.min, Y_AXIS.max]);
-	});
-
-	it('puts a y tick on every bucket boundary plus the overflow row"s upper edge', () => {
-		const splits = readSplits(buildConfig(), TALL_PLOT);
-
-		expect(splits).toStrictEqual([...Y_AXIS.splits, Y_AXIS.overflowSplit]);
-	});
-
-	it('labels the overflow edge as infinite and the rest by bucket value', () => {
-		const config = buildConfig();
-		const labels = readLabels(config, readSplits(config, TALL_PLOT));
-
-		expect(labels[0]).toBe('128');
-		expect(labels[labels.length - 1]).toBe('∞');
-	});
-
-	it('thins the tick set when the panel is too short to label every boundary', () => {
-		const config = buildConfig();
-		const splits = readSplits(config, { bbox: { height: 40 } } as uPlot);
-
-		expect(splits.length).toBeLessThan(Y_AXIS.splits.length + 1);
-		// The infinite edge is the one label that must never be dropped.
-		expect(readLabels(config, splits).at(-1)).toBe('∞');
-	});
-
-	it('disables uPlot cursor focus and points, which cannot read a colour axis', () => {
-		const config = buildConfig().getConfig();
-
-		expect(config.cursor?.focus?.prox).toBe(-1);
-		expect(config.cursor?.points?.show).toBe(false);
-	});
-
-	it('keeps focus alpha at 1 so focusing a row does not force a full redraw', () => {
-		expect(buildConfig().getConfig().focus?.alpha).toBe(1);
-	});
-
-	it('registers the renderer hooks', () => {
-		const { hooks } = buildConfig().getConfig();
-
-		expect(hooks?.init).toHaveLength(1);
-		expect(hooks?.draw).toHaveLength(1);
-		expect(hooks?.setCursor).toHaveLength(1);
-		expect(hooks?.destroy).toHaveLength(1);
-	});
-});

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/types.ts

@@ -1,67 +0,0 @@
-import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import type { PrecisionOption } from 'components/Graph/types';
-import type {
-	IRenderTooltipFooterArgs,
-	LegendPosition,
-} from 'lib/uPlotV2/components/types';
-import type {
-	HeatmapAxisScale,
-	HeatmapCell,
-	HeatmapColorOptions,
-	HeatmapSeries,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-/**
- * Data arrives as the query response carries it — bucket bounds plus one series per
- * group — and the chart pivots and sums it, so no caller has to get the transpose
- * or the combined view right. It builds its own `UPlotConfigBuilder` too, since the
- * y axis *is* the bucket axis and `buckets` fully determines it.
- *
- * `buckets`, `series` and `colors` must be referentially stable: a new identity
- * rebuilds the config, which recreates the plot.
- */
-export interface HeatmapChartProps {
-	id: string;
-	/** Ascending. N boundaries describe N+1 rows. */
-	buckets: number[];
-	/** The *effective* step the server used (`meta.stepIntervals[queryName]`), not
-	 *  the requested one. Cannot be inferred: the last column has no successor. */
-	step: number;
-	/** One entry per group; a query without grouping yields one series. */
-	series: HeatmapSeries[];
-	width: number;
-	height: number;
-	isDarkMode: boolean;
-	/** Overrides on top of `DEFAULT_HEATMAP_COLORS`. */
-	colors?: Partial<HeatmapColorOptions>;
-	/** Default log. */
-	axisScale?: HeatmapAxisScale;
-	/** Unit of the bucket boundaries; counts are always plain numbers. */
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	timezone?: Timezone;
-	/** Colour bar below the grid. Default true. */
-	showVisualMap?: boolean;
-	/** Default true; hidden anyway when there is only one group. Every group starts
-	 *  enabled — the label isolates one, the marker excludes one. */
-	showLegend?: boolean;
-	legendPosition?: LegendPosition;
-	/** Default true. */
-	dimOnHover?: boolean;
-	showTooltip?: boolean;
-	canPinTooltip?: boolean;
-	pinKey?: string;
-	/** Overrides the opacity-mode fill, which otherwise follows the selected
-	 *  group's legend colour so the grid matches the swatch that was clicked. */
-	seriesColor?: string;
-	/** Query window, in seconds. Falls back to the data's own extent. */
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	onDragSelect?: (startTime: number, endTime: number) => void;
-	onCellClick?: (cell: HeatmapCell, clickData: ChartClickData) => void;
-	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
-	tooltipPortalRoot?: HTMLElement | null;
-	layoutChildren?: React.ReactNode;
-	'data-testid'?: string;
-}

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/useHeatmapGroupLegend.ts

@@ -1,100 +0,0 @@
-import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
-
-export interface UseHeatmapGroupLegendResult {
-	/** Groups currently enabled. The grid sums exactly these. */
-	visibleGroups: string[];
-	focusedSeriesIndex: number | null;
-	onLegendClick: (event: MouseEvent<HTMLDivElement>) => void;
-	onLegendMouseMove: (event: MouseEvent<HTMLDivElement>) => void;
-	onLegendMouseLeave: () => void;
-}
-
-/** The shared Legend tags each item and delegates interaction to the container. */
-function getLegendIndex(event: MouseEvent<HTMLDivElement>): number | null {
-	const element = (event.target as HTMLElement | null)?.closest<HTMLElement>(
-		'[data-legend-item-id]',
-	);
-	const id = element?.dataset.legendItemId;
-	return id === undefined ? null : Number(id);
-}
-
-function isMarkerClick(event: MouseEvent<HTMLDivElement>): boolean {
-	return Boolean((event.target as HTMLElement).dataset.isLegendMarker);
-}
-
-/**
- * Group visibility for the heatmap legend, matching every other legend in the
- * product: the label isolates a group, the marker excludes one, and everything is
- * enabled to begin with. Counts are additive, so whatever is enabled is summed
- * client-side and needs no extra request.
- *
- * Visibility only. Marker colour is resolved by the caller, which owns the colour
- * ramp — and that ramp depends on which groups this hook has enabled.
- */
-export function useHeatmapGroupLegend({
-	groups,
-}: {
-	groups: string[];
-}): UseHeatmapGroupLegendResult {
-	const [hidden, setHidden] = useState<Set<string>>(() => new Set());
-	const [focusedSeriesIndex, setFocusedSeriesIndex] = useState<number | null>(
-		null,
-	);
-	const isolatedRef = useRef<string | null>(null);
-
-	const visibleGroups = useMemo(
-		() => groups.filter((group) => !hidden.has(group)),
-		[groups, hidden],
-	);
-
-	const onLegendClick = useCallback(
-		(event: MouseEvent<HTMLDivElement>): void => {
-			const index = getLegendIndex(event);
-			const group = index === null ? undefined : groups[index - 1];
-			if (group === undefined) {
-				return;
-			}
-
-			if (isMarkerClick(event)) {
-				isolatedRef.current = null;
-				setHidden((previous) => {
-					const next = new Set(previous);
-					if (next.has(group)) {
-						next.delete(group);
-					} else {
-						next.add(group);
-					}
-					return next;
-				});
-				return;
-			}
-
-			// Label click isolates; clicking the isolated group again restores all.
-			const isReset = isolatedRef.current === group;
-			isolatedRef.current = isReset ? null : group;
-			setHidden(
-				isReset ? new Set() : new Set(groups.filter((entry) => entry !== group)),
-			);
-		},
-		[groups],
-	);
-
-	const onLegendMouseMove = useCallback(
-		(event: MouseEvent<HTMLDivElement>): void => {
-			setFocusedSeriesIndex(getLegendIndex(event));
-		},
-		[],
-	);
-
-	const onLegendMouseLeave = useCallback((): void => {
-		setFocusedSeriesIndex(null);
-	}, []);
-
-	return {
-		visibleGroups,
-		focusedSeriesIndex,
-		onLegendClick,
-		onLegendMouseMove,
-		onLegendMouseLeave,
-	};
-}

frontend/src/container/DashboardContainer/visualization/charts/Heatmap/utils.ts

@@ -1,193 +0,0 @@
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { uPlotXAxisValuesFormat } from 'lib/uPlotLib/utils/constants';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import {
-	decimateAxisSplits,
-	formatRowLabel,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	createHeatmapHooks,
-	HeatmapRenderOptions,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/heatmapPlugin';
-import { HeatmapGrid } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import uPlot from 'uplot';
-
-/** Minimum gap between y tick labels, in CSS pixels. */
-const MIN_Y_TICK_GAP_PX = 18;
-
-/** Label for the edge above the overflow row. */
-const OVERFLOW_AXIS_LABEL = '∞';
-
-/**
- * Flattens the grid into `[timestamps, ...rows]`, one series per bucket row so
- * `setData` handles refetches. The series draw nothing; the renderer paints cells.
- *
- * Rows are padded to `rowCount` — which can differ from `bounds.length + 1` when
- * the response carried duplicate boundaries — since uPlot requires equal lengths.
- */
-export function prepareHeatmapChartData(
-	grid: HeatmapGrid,
-	rowCount: number,
-): uPlot.AlignedData {
-	const columnCount = grid.timestamps.length;
-	const rows = Array.from({ length: rowCount }, (_, row) => {
-		const counts = grid.counts[row] ?? [];
-		return Array.from({ length: columnCount }, (_, column) =>
-			counts[column] === undefined ? null : counts[column],
-		);
-	});
-
-	return [grid.timestamps, ...rows] as unknown as uPlot.AlignedData;
-}
-
-export interface BuildHeatmapConfigArgs extends Omit<
-	HeatmapRenderOptions,
-	'step'
-> {
-	id: string;
-	grid: HeatmapGrid;
-	/** Unit of the bucket boundaries; counts are never formatted with it. */
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-	timezone?: Timezone;
-	/** Query window, in seconds. Falls back to the grid's own extent. */
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	onDragSelect?: (startTime: number, endTime: number) => void;
-}
-
-export function buildHeatmapConfig({
-	id,
-	grid,
-	yAxis,
-	colors,
-	isDarkMode,
-	seriesColor,
-	dimOnHover,
-	onHoverChange,
-	yAxisUnit,
-	decimalPrecision,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	onDragSelect,
-}: BuildHeatmapConfigArgs): UPlotConfigBuilder {
-	const tzDate = timezone
-		? (timestamp: number): Date =>
-				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
-		: undefined;
-
-	const builder = new UPlotConfigBuilder({ id, onDragSelect, tzDate });
-
-	// uPlot's focus picks the series closest in value space, meaningless when the
-	// value is a colour; the renderer focuses the hovered row itself. alpha 1 keeps
-	// that call off uPlot's full-redraw path.
-	builder.setFocus({ alpha: 1 });
-	builder.setCursor({ focus: { prox: -1 }, points: { show: false } });
-
-	const formatBucketValue = (value: number): string =>
-		getToolTipValue(String(value), yAxisUnit, decimalPrecision);
-
-	const lastTimestamp = grid.timestamps[grid.timestamps.length - 1] ?? 0;
-	const xRange: [number, number] = [
-		minTimeScale ?? grid.timestamps[0] ?? 0,
-		maxTimeScale ?? lastTimestamp + grid.step,
-	];
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		range: (): [number, number] => xRange,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		auto: false,
-		range: (): [number, number] => [yAxis.min, yAxis.max],
-	});
-
-	builder.addAxis({
-		scaleKey: 'x',
-		side: 2,
-		isDarkMode,
-		values: uPlotXAxisValuesFormat as uPlot.Axis.Values,
-	});
-
-	// Ticks sit on row edges, so the overflow row is the band between the last
-	// boundary and `∞`. A centre label would sit half a row from the boundary tick
-	// and collide with it.
-	const overflowRow = yAxis.rows[yAxis.rows.length - 1];
-	const hasOverflowTick =
-		yAxis.overflowSplit !== null && overflowRow?.isOverflow === true;
-	const axisSplits = hasOverflowTick
-		? [...yAxis.splits, yAxis.overflowSplit as number]
-		: yAxis.splits;
-
-	// From the boundaries themselves, not by inverting the transform:
-	// 10 ** Math.log10(128) is 127.999…, which formats as "127.99".
-	const splitLabels = new Map<number, string>();
-	yAxis.splits.forEach((split, index) => {
-		splitLabels.set(split, formatBucketValue(yAxis.rows[index].upper));
-	});
-	if (hasOverflowTick) {
-		splitLabels.set(yAxis.overflowSplit as number, OVERFLOW_AXIS_LABEL);
-	}
-
-	builder.addAxis({
-		scaleKey: 'y',
-		side: 3,
-		isDarkMode,
-		yAxisUnit,
-		decimalPrecision,
-		// Thinned to whatever fits: a histogram can carry more boundaries than the
-		// panel has room to label.
-		splits: (self): number[] =>
-			decimateAxisSplits({
-				splits: axisSplits,
-				min: yAxis.min,
-				max: yAxis.max,
-				plotHeight: self.bbox.height / uPlot.pxRatio,
-				minGapPx: MIN_Y_TICK_GAP_PX,
-			}),
-		values: (_, splits): string[] =>
-			splits.map(
-				(split) =>
-					splitLabels.get(split) ?? formatBucketValue(yAxis.toBucketValue(split)),
-			),
-	});
-
-	yAxis.rows.forEach((row) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			// Nothing is stroked per series; the draw hook paints the grid.
-			drawStyle: DrawStyle.Line,
-			pathBuilder: (): null => null,
-			showPoints: false,
-			spanGaps: false,
-			label: formatRowLabel(row, formatBucketValue),
-			colorMapping: {},
-			isDarkMode,
-		});
-	});
-
-	const hooks = createHeatmapHooks({
-		yAxis,
-		step: grid.step,
-		colors,
-		isDarkMode,
-		seriesColor,
-		dimOnHover,
-		onHoverChange,
-	});
-
-	// Order matters — see the HeatmapHooks doc comment.
-	builder.addHook('init', hooks.init);
-	builder.addHook('draw', hooks.draw);
-	builder.addHook('setCursor', hooks.setCursor);
-	builder.addHook('destroy', hooks.destroy);
-
-	return builder;
-}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -31,13 +31,6 @@ interface BaseChartProps {
 	renderTooltipFooter?: (args: IRenderTooltipFooterArgs) => React.ReactNode;
 	customTooltip?: (props: TooltipRenderArgs) => React.ReactNode;
 	tooltipPortalRoot?: HTMLElement | null;
-	/** Replaces the config-driven legend, for charts whose legend lists something
-	 *  other than uPlot series — heatmap groups, where the series are bucket rows. */
-	customLegend?: (averageLegendWidth: number) => React.ReactNode;
-	/** Measured against for the chart/legend split. Pair with `customLegend`. */
-	legendLabels?: string[];
-	/** Rendered under the plot but above the legend, inside the chart column. */
-	contentFooter?: React.ReactNode;
 	'data-testid'?: string;
 }
 interface UPlotBasedChartProps {

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -16,31 +16,20 @@ export interface ChartLayoutProps {
 		averageLegendWidth: number;
 	}) => React.ReactNode;
 	layoutChildren?: React.ReactNode;
-	/**
-	 * Rendered directly under the plot, inside the chart column — so it stays next to
-	 * the axis with the legend below it, and beside a RIGHT legend rather than under
-	 * it. `layoutChildren` sits below everything instead.
-	 */
-	contentFooter?: React.ReactNode;
 	containerWidth: number;
 	containerHeight: number;
 	legendConfig: LegendConfig;
 	config: UPlotConfigBuilder;
-	/** Defaults to the chart's series labels. Pass them when the legend lists
-	 *  something else, or the split is measured against the wrong text. */
-	seriesLabels?: string[];
 }
 export default function ChartLayout({
 	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
-	contentFooter,
 	containerWidth,
 	containerHeight,
 	legendConfig,
 	config,
-	seriesLabels,
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
@@ -53,20 +42,19 @@ export default function ChartLayout({
 					averageLegendWidth: MAX_LEGEND_WIDTH,
 				};
 			}
-			const resolvedLabels =
-				seriesLabels ??
-				Object.values(config.getLegendItems())
-					.map((item) => item.label)
-					.filter((label): label is string => label !== undefined);
+			const legendItemsMap = config.getLegendItems();
+			const seriesLabels = Object.values(legendItemsMap)
+				.map((item) => item.label)
+				.filter((label): label is string => label !== undefined);
 			return calculateChartDimensions({
 				containerWidth,
 				containerHeight,
 				legendConfig,
-				seriesLabels: resolvedLabels,
+				seriesLabels,
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig, showLegend, seriesLabels],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -84,7 +72,6 @@ export default function ChartLayout({
 						chartHeight: chartDimensions.height,
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
-					{contentFooter}
 				</div>
 				{showLegend && (
 					<div

frontend/src/container/ExplorerOrderBy/index.tsx

@@ -2,7 +2,7 @@ import { memo, useMemo } from 'react';
 import { Select, Spin } from 'antd';
 import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
-import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/config';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { StringOperators } from 'types/common/queryBuilder';

frontend/src/container/InfraMonitoringK8sV2/Base/K8sBaseList.tsx

@@ -7,6 +7,7 @@ import TanStackTable, {
 	TableColumnDef,
 	useCalculatedPageSize,
 	useHiddenColumnIds,
+	useRecoverFromEmptyPage,
 	useTableParams,
 } from 'components/TanStackTableView';
 import { InfraMonitoringEvents } from 'constants/events';
@@ -136,6 +137,7 @@ export function K8sBaseList<
 		page: currentPage,
 		limit: currentPageSize,
 		setLimit,
+		setPage,
 	} = useTableParams(
 		{
 			page: INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
@@ -243,6 +245,16 @@ export function K8sBaseList<
 	const totalCount = data?.total || 0;
 	const hasFilters = !!expression?.trim();
 
+	useRecoverFromEmptyPage({
+		page: currentPage,
+		pageSize: currentPageSize,
+		rowCount: pageData.length,
+		total: totalCount,
+		isFetching: isLoading || isFetching,
+		isDisabled: isError || Boolean(data?.error),
+		setPage,
+	});
+
 	const getGroupKeyFn = useCallback(
 		(item: T) => getGroupedByMeta(item, groupBy),
 		[groupBy],

frontend/src/container/InfraMonitoringK8sV2/Base/__tests__/K8sBaseList.test.tsx

@@ -591,12 +591,14 @@ describe('K8sBaseList', () => {
 	});
 
 	describe('with empty data', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
 		const fetchListDataMock = jest.fn<
 			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
 			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
 		>();
 
 		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
 			fetchListDataMock.mockClear();
 			fetchListDataMock.mockResolvedValue({
 				data: [],
@@ -605,6 +607,7 @@ describe('K8sBaseList', () => {
 			});
 
 			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
 				entity: InfraMonitoringEntity.PODS,
 				eventCategory: InfraMonitoringEvents.Pod,
 				fetchListData: fetchListDataMock,
@@ -625,6 +628,177 @@ describe('K8sBaseList', () => {
 				expect(fetchListDataMock).toHaveBeenCalled();
 			});
 		});
+
+		it('should not rewrite the page when already on the first page', async () => {
+			await waitFor(() => {
+				expect(fetchListDataMock).toHaveBeenCalled();
+			});
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toHaveLength(0);
+		});
+	});
+
+	describe('with a page beyond the end of the list', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		// 25 rows exist, so pages 1-3 serve data and page 7 of 10 comes back empty.
+		const rows: TestItem[] = Array.from({ length: 25 }, (_, index) => ({
+			id: `pod-${index + 1}`,
+		}));
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// Offset-aware on purpose: a mock that answers empty for every offset would let
+			// the assertions pass against a page the recovery has already moved on from.
+			fetchListDataMock.mockImplementation(async ({ offset = 0, limit = 10 }) => ({
+				data: rows.slice(offset, offset + limit),
+				total: rows.length,
+				error: null,
+			}));
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '7', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should send the user back to the last page holding data', async () => {
+			// The rows of page 3 on screen are what proves the recovery settled there,
+			// rather than passing through on its way somewhere else.
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageUpdates = onUrlUpdateMock.mock.calls
+				.map((call) => call[0].searchParams.get('page'))
+				.filter(Boolean);
+
+			expect(pageUpdates).toStrictEqual(['3']);
+		});
+
+		it('should correct the page in a single hop', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			// Only the original out-of-range page and the corrected one are requested.
+			expect(
+				fetchListDataMock.mock.calls.map((call) => call[0].offset),
+			).toStrictEqual([60, 20]);
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await expect(screen.findByText('pod-21')).resolves.toBeInTheDocument();
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === '3',
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+	});
+
+	describe('with a page below the first one', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+		const fetchListDataMock = jest.fn<
+			ReturnType<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>,
+			Parameters<NonNullable<K8sBaseListProps<TestItem>['fetchListData']>>
+		>();
+
+		beforeEach(() => {
+			onUrlUpdateMock.mockClear();
+			fetchListDataMock.mockClear();
+			// page=0 turns into offset=-10, which the API rejects outright — the list
+			// can only recover by clamping the page, never by reading the response.
+			fetchListDataMock.mockImplementation(async ({ offset = 0 }) => {
+				if (offset < 0) {
+					throw new APIError({
+						httpStatusCode: 400,
+						error: {
+							code: 'invalid_input',
+							message: 'offset cannot be negative',
+							url: '',
+							errors: [],
+						},
+					});
+				}
+
+				return { data: [{ id: 'pod-1' }], total: 1, error: null };
+			});
+
+			renderComponent<TestItem>({
+				onUrlUpdate: onUrlUpdateMock,
+				entity: InfraMonitoringEntity.PODS,
+				eventCategory: InfraMonitoringEvents.Pod,
+				fetchListData: fetchListDataMock,
+				queryParams: { page: '0', pageSize: '10' },
+				tableColumns: createTestColumns(),
+				getRowKey: (row): string => row.id,
+				getItemKey: (row): string => row.id,
+			});
+		});
+
+		it('should reject the request that carried the negative offset', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === -10),
+				).toBe(true);
+			});
+
+			await expect(
+				fetchListDataMock.mock.results[0].value as Promise<unknown>,
+			).rejects.toThrow('offset cannot be negative');
+		});
+
+		it('should clamp the page to the first one even though the request failed', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			// Page 1 is the default, so the correction drops the param rather than
+			// writing `page=1`.
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection).toBeDefined();
+			expect(pageCorrection?.[0].queryString).toBe('?pageSize=10');
+		});
+
+		it('should replace the history entry instead of pushing the correction', async () => {
+			await waitFor(() => {
+				expect(onUrlUpdateMock).toHaveBeenCalled();
+			});
+
+			const pageCorrection = onUrlUpdateMock.mock.calls.find(
+				(call) => call[0].searchParams.get('page') === null,
+			);
+
+			expect(pageCorrection?.[0].options.history).toBe('replace');
+		});
+
+		it('should refetch with a non-negative offset after clamping', async () => {
+			await waitFor(() => {
+				expect(
+					fetchListDataMock.mock.calls.some((call) => call[0].offset === 0),
+				).toBe(true);
+			});
+
+			await waitFor(() => {
+				expect(screen.getByText('pod-1')).toBeInTheDocument();
+			});
+		});
 	});
 
 	describe('with error response', () => {

frontend/src/container/InfraMonitoringK8sV2/InfraMonitoringK8s.tsx

@@ -47,6 +47,7 @@ import {
 	useInfraMonitoringCategory,
 	useInfraMonitoringGroupBy,
 	useInfraMonitoringOrderBy,
+	useInfraMonitoringPageListing,
 	useInfraMonitoringSelectedItemParams,
 } from './hooks';
 
@@ -67,6 +68,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 	const [, setGroupBy] = useInfraMonitoringGroupBy();
 	const [, setOrderBy] = useInfraMonitoringOrderBy();
 	const [, setSelectedItemParams] = useInfraMonitoringSelectedItemParams();
+	const [, setCurrentPage] = useInfraMonitoringPageListing();
 
 	const compositeQuery = useGetCompositeQueryParam();
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
@@ -218,6 +220,7 @@ export default function InfraMonitoringK8s(): JSX.Element {
 			void setSelectedCategory(key as string);
 			void setOrderBy(null);
 			void setGroupBy(null);
+			void setCurrentPage(null);
 			setSelectedItemParams(null);
 			redirectWithQueryBuilderData({
 				...currentQuery,

frontend/src/container/InfraMonitoringK8sV2/__tests__/InfraMonitoringK8s.test.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+// eslint-disable-next-line no-restricted-imports
+import { Provider } from 'react-redux';
+import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter as MemoryRouterV5 } from 'react-router-dom-v5-compat';
+import { TooltipProvider } from '@signozhq/ui/tooltip';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { NuqsTestingAdapter, UrlUpdateEvent } from 'nuqs/adapters/testing';
+import { AppProvider } from 'providers/App/App';
+import { QueryBuilderProvider } from 'providers/QueryBuilder';
+import TimezoneProvider from 'providers/Timezone';
+import store from 'store';
+
+import { K8sCategories } from '../constants';
+import InfraMonitoringK8s from '../InfraMonitoringK8s';
+
+// Quick filters fire their own field APIs and are irrelevant to pagination.
+jest.mock('components/QuickFilters/QuickFilters', () => ({
+	__esModule: true,
+	default: (): JSX.Element => <div data-testid="quick-filters" />,
+}));
+
+// The list owns its own page recovery; stubbing it keeps the page param under the
+// sole control of the category handler being tested here.
+jest.mock('../Base/K8sDynamicList', () => ({
+	__esModule: true,
+	K8sDynamicList: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+	default: (): JSX.Element => <div data-testid="k8s-dynamic-list" />,
+}));
+
+// Analytics only; jsdom lacks the Performance navigation entries it reads.
+jest.mock('lib/navigation', () => ({
+	getNavigationReferrer: (): string => 'direct',
+}));
+
+function renderPage(
+	queryParams: Record<string, string>,
+	onUrlUpdate: jest.Mock<void, [UrlUpdateEvent]>,
+): void {
+	const queryClient = new QueryClient({
+		defaultOptions: { queries: { retry: false } },
+	});
+
+	render(
+		<MemoryRouter>
+			<MemoryRouterV5>
+				<TimezoneProvider>
+					<QueryClientProvider client={queryClient}>
+						<AppProvider>
+							<Provider store={store}>
+								<NuqsTestingAdapter
+									searchParams={queryParams}
+									onUrlUpdate={onUrlUpdate}
+								>
+									<TooltipProvider>
+										<QueryBuilderProvider>
+											<InfraMonitoringK8s />
+										</QueryBuilderProvider>
+									</TooltipProvider>
+								</NuqsTestingAdapter>
+							</Provider>
+						</AppProvider>
+					</QueryClientProvider>
+				</TimezoneProvider>
+			</MemoryRouterV5>
+		</MemoryRouter>,
+	);
+}
+
+describe('InfraMonitoringK8s', () => {
+	describe('when the category changes from a page other than the first', () => {
+		const onUrlUpdateMock = jest.fn<void, [UrlUpdateEvent]>();
+
+		beforeEach(async () => {
+			onUrlUpdateMock.mockClear();
+
+			renderPage(
+				{ category: K8sCategories.PODS, page: '3', pageSize: '10' },
+				onUrlUpdateMock,
+			);
+
+			await screen.findByTestId(`category-${K8sCategories.NODES}`);
+		});
+
+		it('should drop the page so the new category starts at the first one', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			// Page 3 of pods says nothing about nodes — keeping it asks the new entity
+			// for an offset it may not have. The param is cleared rather than set to 1,
+			// since an absent page already means the first one.
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch).toBeDefined();
+				expect(categorySwitch?.[0].searchParams.get('page')).toBeNull();
+			});
+		});
+
+		it('should keep the page size, which is not category specific', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.NODES}`));
+
+			await waitFor(() => {
+				const categorySwitch = onUrlUpdateMock.mock.calls.find(
+					(call) => call[0].searchParams.get('category') === K8sCategories.NODES,
+				);
+
+				expect(categorySwitch?.[0].searchParams.get('pageSize')).toBe('10');
+			});
+		});
+
+		it('should leave the page alone when the same category is clicked again', async () => {
+			fireEvent.click(screen.getByTestId(`category-${K8sCategories.PODS}`));
+
+			await waitFor(() => {
+				expect(screen.getByTestId('k8s-dynamic-list')).toBeInTheDocument();
+			});
+
+			const droppedPage = onUrlUpdateMock.mock.calls.some(
+				(call) => !call[0].searchParams.has('page'),
+			);
+
+			expect(droppedPage).toBe(false);
+		});
+	});
+});

frontend/src/container/InfraMonitoringK8sV2/hooks.ts

@@ -34,6 +34,9 @@ export const useInfraMonitoringPageListing = (): UseQueryStateReturn<
 > =>
 	useQueryState(
 		INFRA_MONITORING_K8S_PARAMS_KEYS.PAGE,
+		// do not use .withDefault here, this can cause bugs when
+		// two hooks of nuqs define default twice, this is also
+		// defined at useTableParams
 		parseAsInteger.withOptions(defaultNuqsOptions),
 	);
 

frontend/src/container/LogDetailedView/logAttributeActions.utils.ts

@@ -10,7 +10,7 @@ import {
 	RESTRICTED_SELECTED_FIELDS,
 } from 'container/LogsFilters/config';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';
 import {
 	BaseAutocompleteData,

frontend/src/container/MetricsExplorer/Inspect/__tests__/QueryBuilder.test.tsx

@@ -42,7 +42,7 @@ jest.mock('hooks/useDebounce', () => ({
 }));
 
 jest.mock(
-	'container/QueryBuilder/filters/QueryBuilderSearch/OptionRenderer',
+	'container/QueryBuilder/filters/OptionRenderer/OptionRenderer',
 	() => ({
 		__esModule: true,
 		default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,

frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts

@@ -21,6 +21,7 @@ import azureMysqlUrl from '@/assets/Logos/azure-mysql.svg';
 import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+import azureUrl from '@/assets/Logos/azure.svg';
 import basetenUrl from '@/assets/Logos/baseten.svg';
 import cassandraUrl from '@/assets/Logos/cassandra.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
@@ -28,6 +29,7 @@ import certManagerUrl from '@/assets/Logos/cert-manager.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
 import clickhouseUrl from '@/assets/Logos/clickhouse.svg';
 import cloudflareUrl from '@/assets/Logos/cloudflare.svg';
+import cloudnativePgUrl from '@/assets/Logos/cloudnative-pg.svg';
 import cloudwatchLogsUrl from '@/assets/Logos/cloudwatch-logs.svg';
 import cohereUrl from '@/assets/Logos/cohere.svg';
 import confluentKafkaUrl from '@/assets/Logos/confluent-kafka.svg';
@@ -39,6 +41,7 @@ import datadogUrl from '@/assets/Logos/datadog.svg';
 import dbosUrl from '@/assets/Logos/dbos.svg';
 import deepseekUrl from '@/assets/Logos/deepseek.svg';
 import denoUrl from '@/assets/Logos/deno.svg';
+import difyUrl from '@/assets/Logos/dify.svg';
 import dockerUrl from '@/assets/Logos/docker.svg';
 import documentLoadUrl from '@/assets/Logos/document-load.svg';
 import dotnetUrl from '@/assets/Logos/dotnet.svg';
@@ -70,6 +73,8 @@ import gcpCloudStorageUrl from '@/assets/Logos/gcp-cloud-storage.svg';
 import gcpComputeEngineUrl from '@/assets/Logos/gcp-compute-engine.svg';
 import gcpGkeUrl from '@/assets/Logos/gcp-gke.svg';
 import gcpVpcUrl from '@/assets/Logos/gcp-vpc.svg';
+import gcpUrl from '@/assets/Logos/gcp.svg';
+import githubCopilotUrl from '@/assets/Logos/github-copilot.svg';
 import githubUrl from '@/assets/Logos/github.svg';
 import goUrl from '@/assets/Logos/go.svg';
 import googleAdkUrl from '@/assets/Logos/google-adk.svg';
@@ -96,6 +101,8 @@ import javascriptUrl from '@/assets/Logos/javascript.svg';
 import jbossUrl from '@/assets/Logos/jboss.svg';
 import jenkinsUrl from '@/assets/Logos/jenkins.svg';
 import kafkaUrl from '@/assets/Logos/kafka.svg';
+import kedaUrl from '@/assets/Logos/keda.svg';
+import kongUrl from '@/assets/Logos/kong.svg';
 import kubernetesUrl from '@/assets/Logos/kubernetes.svg';
 import lambdaUrl from '@/assets/Logos/lambda.svg';
 import langchainUrl from '@/assets/Logos/langchain.svg';
@@ -114,6 +121,7 @@ import microsoftSqlServerUrl from '@/assets/Logos/microsoft-sql-server.svg';
 import mistralUrl from '@/assets/Logos/mistral.svg';
 import mongoUrl from '@/assets/Logos/mongo.svg';
 import n8nUrl from '@/assets/Logos/n8n.svg';
+import neonUrl from '@/assets/Logos/neon.svg';
 import newrelicUrl from '@/assets/Logos/newrelic.svg';
 import nextjsUrl from '@/assets/Logos/nextjs.svg';
 import nginxUrl from '@/assets/Logos/nginx.svg';
@@ -2859,6 +2867,25 @@ const onboardingConfigWithLinks = [
 					label: 'Traces',
 					imgUrl: lambdaUrl,
 					link: '/docs/aws-monitoring/lambda/lambda-traces/',
+					question: {
+						desc: 'Which runtime does your Lambda function use?',
+						helpText:
+							'Python, Node.js, Java, and Ruby use the OpenTelemetry auto-instrumentation layer. Go has no layer, so you add the SDK to your code.',
+						options: [
+							{
+								key: 'aws-lambda-traces-auto',
+								label: 'Python, Node.js, Java, Ruby',
+								imgUrl: lambdaUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces/',
+							},
+							{
+								key: 'aws-lambda-traces-golang',
+								label: 'Go',
+								imgUrl: goUrl,
+								link: '/docs/aws-monitoring/lambda/lambda-traces-golang/',
+							},
+						],
+					},
 				},
 				{
 					key: 'aws-lambda-metrics',
@@ -5510,8 +5537,10 @@ const onboardingConfigWithLinks = [
 		module: 'metrics',
 		relatedSearchKeywords: [
 			'integrations',
+			'logs',
 			'metrics',
 			'supabase',
+			'supabase logs',
 			'supabase metrics',
 			'supabase monitoring',
 			'supabase observability',
@@ -5545,43 +5574,23 @@ const onboardingConfigWithLinks = [
 		label: 'Traefik',
 		imgUrl: opentelemetryUrl,
 		tags: ['infrastructure monitoring'],
-		module: 'infrastructure',
+		module: 'apm',
 		relatedSearchKeywords: [
 			'infrastructure',
 			'traefik',
-			'traefik access logs',
-			'traefik logs',
 			'traefik metrics',
 			'traefik monitoring',
 			'traefik observability',
 			'traefik tracing',
 		],
 		link: '/docs/tutorial/traefik-observability/',
-		question: {
-			desc: 'Which Traefik signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'traefik-metrics-traces',
-					label: 'Metrics & Traces',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/tutorial/traefik-observability/',
-				},
-				{
-					key: 'traefik-logs',
-					label: 'Access Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-traefik/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'mongodb-atlas',
 		label: 'MongoDB (Atlas)',
 		imgUrl: mongoUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'atlas',
 			'atlas metrics',
@@ -5600,36 +5609,15 @@ const onboardingConfigWithLinks = [
 		label: 'MySQL',
 		imgUrl: opentelemetryUrl,
 		tags: ['database'],
-		module: 'database',
+		module: 'metrics',
 		relatedSearchKeywords: [
 			'database',
 			'mysql',
-			'mysql error log',
-			'mysql logs',
 			'mysql metrics',
 			'mysql monitoring',
 			'mysql observability',
-			'mysql slow query log',
 		],
 		link: '/docs/metrics-management/mysql-metrics/',
-		question: {
-			desc: 'Which MySQL signals do you want to send to SigNoz?',
-			type: 'select',
-			options: [
-				{
-					key: 'mysql-metrics',
-					label: 'Metrics',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/metrics-management/mysql-metrics/',
-				},
-				{
-					key: 'mysql-logs',
-					label: 'Logs',
-					imgUrl: opentelemetryUrl,
-					link: '/docs/integrations/opentelemetry-mysql/',
-				},
-			],
-		},
 	},
 	{
 		dataSource: 'jmx',
@@ -6992,5 +6980,514 @@ const onboardingConfigWithLinks = [
 		id: 'dspy',
 		link: '/docs/dspy-observability/',
 	},
+	{
+		dataSource: 'grok-build',
+		label: 'Grok Build',
+		imgUrl: grokUrl,
+		tags: ['LLM Monitoring'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'coding agent',
+			'grok build',
+			'grok build events',
+			'grok build logs',
+			'grok build metrics',
+			'grok build monitoring',
+			'grok build observability',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'monitoring',
+			'observability',
+			'otel grok build integration',
+			'terminal coding agent',
+			'token usage',
+			'xai',
+		],
+		id: 'grok-build',
+		link: '/docs/grok-build-observability/',
+	},
+	{
+		dataSource: 'neon',
+		label: 'Neon',
+		imgUrl: neonUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'database',
+			'neon',
+			'neon database',
+			'neon db',
+			'neon logs',
+			'neon metrics',
+			'neon monitoring',
+			'neon observability',
+			'neondb',
+			'opentelemetry neon',
+			'postgres',
+			'postgresql',
+			'serverless postgres',
+		],
+		id: 'neon',
+		link: '/docs/integrations/opentelemetry-neondb/',
+	},
+	{
+		dataSource: 'dify',
+		label: 'Dify',
+		imgUrl: difyUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai agent',
+			'dify',
+			'dify monitoring',
+			'dify observability',
+			'dify traces',
+			'llm',
+			'llm monitoring',
+			'metrics',
+			'no code ai',
+			'observability',
+			'opentelemetry dify',
+			'traces',
+		],
+		id: 'dify',
+		link: '/docs/dify-observability/',
+	},
+	{
+		dataSource: 'firecrawl',
+		label: 'Firecrawl',
+		imgUrl: llmMonitoringUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'crawl',
+			'firecrawl',
+			'firecrawl metrics',
+			'firecrawl monitoring',
+			'firecrawl observability',
+			'firecrawl traces',
+			'llm',
+			'llm monitoring',
+			'opentelemetry firecrawl',
+			'scrape',
+			'traces',
+			'web scraping',
+		],
+		id: 'firecrawl',
+		link: '/docs/firecrawl-monitoring/',
+	},
+	{
+		dataSource: 'keda',
+		label: 'KEDA',
+		imgUrl: kedaUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'autoscaling',
+			'event driven autoscaling',
+			'keda',
+			'keda metrics',
+			'keda monitoring',
+			'kubernetes',
+			'kubernetes autoscaling',
+			'metrics',
+			'opentelemetry keda',
+			'scaled jobs',
+			'scaled objects',
+		],
+		id: 'keda',
+		link: '/docs/metrics-management/keda-metrics/',
+	},
+	{
+		dataSource: 'opentelemetry-collector-metrics',
+		label: 'OpenTelemetry Collector Metrics',
+		imgUrl: opentelemetryUrl,
+		tags: ['infrastructure monitoring', 'metrics'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'collector health',
+			'collector internal metrics',
+			'collector metrics',
+			'metrics',
+			'opentelemetry',
+			'opentelemetry collector',
+			'otel collector',
+			'otelcol metrics',
+			'pipeline health',
+		],
+		id: 'opentelemetry-collector-metrics',
+		link: '/docs/metrics-management/opentelemetry-collector-metrics/',
+	},
+	{
+		dataSource: 'cloudnative-pg',
+		label: 'CloudNativePG',
+		imgUrl: cloudnativePgUrl,
+		tags: ['database'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud native postgres',
+			'cloudnativepg',
+			'cnpg',
+			'cnpg metrics',
+			'database',
+			'kubernetes postgres',
+			'metrics',
+			'opentelemetry cloudnativepg',
+			'postgres',
+			'postgresql',
+		],
+		id: 'cloudnative-pg',
+		link: '/docs/metrics-management/opentelemetry-cloudnative-pg/',
+	},
+	{
+		dataSource: 'kong-gateway',
+		label: 'Kong Gateway',
+		imgUrl: kongUrl,
+		tags: ['infrastructure monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'api gateway',
+			'kong',
+			'kong gateway',
+			'kong logs',
+			'kong metrics',
+			'kong monitoring',
+			'kong observability',
+			'kong traces',
+			'opentelemetry kong',
+			'proxy',
+			'traces',
+		],
+		id: 'kong-gateway',
+		link: '/docs/integrations/kong-gateway/',
+	},
+	{
+		dataSource: 'github-copilot',
+		label: 'GitHub Copilot',
+		imgUrl: githubCopilotUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'coding agent',
+			'copilot',
+			'copilot chat',
+			'github copilot',
+			'github copilot metrics',
+			'github copilot monitoring',
+			'github copilot observability',
+			'github copilot traces',
+			'llm',
+			'llm monitoring',
+			'monitoring',
+			'observability',
+			'otel github copilot integration',
+			'traces',
+			'tracing',
+			'vs code',
+		],
+		id: 'github-copilot',
+		link: '/docs/github-copilot-monitoring/',
+	},
+	{
+		dataSource: 'serilog',
+		label: 'Serilog',
+		imgUrl: dotnetUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'.net',
+			'asp.net',
+			'c#',
+			'csharp',
+			'dotnet',
+			'dotnet logs',
+			'logging',
+			'logs',
+			'monitoring',
+			'observability',
+			'otel serilog integration',
+			'serilog',
+			'serilog logs',
+			'serilog sink',
+			'structured logging',
+		],
+		id: 'serilog',
+		link: '/docs/logs-management/send-logs/serilog-to-signoz/',
+	},
+	{
+		dataSource: 'gcp-integration',
+		label: 'GCP Integration',
+		imgUrl: gcpUrl,
+		tags: ['GCP'],
+		module: 'metrics',
+		relatedSearchKeywords: [
+			'cloud monitoring metrics',
+			'connect gcp account',
+			'gcp',
+			'gcp integration',
+			'gcp manual setup',
+			'gcp metrics',
+			'gcp monitoring',
+			'gcp observability',
+			'gcp service account',
+			'google cloud',
+			'google cloud integration',
+			'metrics',
+			'monitoring',
+			'observability',
+			'opentelemetry collector gcp',
+		],
+		id: 'gcp-integration',
+		link: '/docs/integrations/gcp/gcp-integration/',
+	},
+	{
+		dataSource: 'azure-cosmos-db',
+		label: 'Azure Cosmos DB',
+		imgUrl: azureUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cosmos db',
+			'azure integration',
+			'cosmos db',
+			'cosmosdb',
+			'database',
+			'metrics',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+			'request units',
+		],
+		id: 'azure-cosmos-db',
+		link: '/integrations/azure?service=cosmosdb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-mongodb',
+		label: 'Azure MongoDB vCore',
+		imgUrl: mongoUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure mongodb',
+			'azure mongodb vcore',
+			'database',
+			'metrics',
+			'mongodb',
+			'mongodb vcore',
+			'monitoring',
+			'nosql',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-mongodb',
+		link: '/integrations/azure?service=mongodb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-postgresql-flexible-server',
+		label: 'Azure PostgreSQL Flexible Server',
+		imgUrl: postgresqlUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure postgresql',
+			'azure postgresql flexible server',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'postgres',
+			'postgresql',
+			'postgresql flexible server',
+		],
+		id: 'azure-postgresql-flexible-server',
+		link: '/integrations/azure?service=postgresqlflexibleserver',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cache-redis',
+		label: 'Azure Cache for Redis',
+		imgUrl: redisUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure cache for redis',
+			'azure integration',
+			'azure redis',
+			'cache',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'redis',
+		],
+		id: 'azure-cache-redis',
+		link: '/integrations/azure?service=redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-sql-managed-instance',
+		label: 'Azure SQL Managed Instance',
+		imgUrl: azureSqlDatabaseMetricsUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'azure',
+			'azure integration',
+			'azure sql',
+			'azure sql managed instance',
+			'database',
+			'managed instance',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+			'sql server',
+		],
+		id: 'azure-sql-managed-instance',
+		link: '/integrations/azure?service=sqldatabasemi',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'azure-cassandra-db',
+		label: 'Azure Managed Instance for Apache Cassandra',
+		imgUrl: cassandraUrl,
+		tags: ['Azure'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'apache cassandra',
+			'azure',
+			'azure cassandra',
+			'azure integration',
+			'azure managed instance for apache cassandra',
+			'cassandra',
+			'database',
+			'metrics',
+			'monitoring',
+			'observability',
+			'one click azure',
+		],
+		id: 'azure-cassandra-db',
+		link: '/integrations/azure?service=cassandradb',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-cloud-sql-postgresql',
+		label: 'GCP Cloud SQL for PostgreSQL',
+		imgUrl: gcpCloudSqlUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cloud sql',
+			'cloud sql for postgresql',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'metrics',
+			'monitoring',
+			'observability',
+			'postgres',
+			'postgresql',
+		],
+		id: 'gcp-cloud-sql-postgresql',
+		link: '/integrations/gcp?service=cloudsql_postgres',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'gcp-memorystore-redis',
+		label: 'GCP Memorystore for Redis',
+		imgUrl: redisUrl,
+		tags: ['GCP'],
+		module: 'dashboards',
+		relatedSearchKeywords: [
+			'cache',
+			'database',
+			'gcp',
+			'gcp integration',
+			'google cloud',
+			'memorystore',
+			'memorystore for redis',
+			'metrics',
+			'monitoring',
+			'observability',
+			'redis',
+		],
+		id: 'gcp-memorystore-redis',
+		link: '/integrations/gcp?service=memorystore_redis',
+		internalRedirect: true,
+	},
+	{
+		dataSource: 'supabase-logs',
+		label: 'Supabase Logs',
+		imgUrl: supabaseUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'postgres',
+			'postgresql',
+			'send supabase logs',
+			'supabase',
+			'supabase log drains',
+			'supabase logs',
+			'supabase observability',
+		],
+		id: 'supabase-logs',
+		link: '/docs/logs-management/send-logs/supabase-logs/',
+	},
+	{
+		dataSource: 'traefik-logs',
+		label: 'Traefik Access Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'access logs',
+			'logging',
+			'logs',
+			'opentelemetry traefik',
+			'proxy',
+			'reverse proxy',
+			'traefik',
+			'traefik access logs',
+			'traefik logs',
+		],
+		id: 'traefik-logs',
+		link: '/docs/integrations/opentelemetry-traefik/',
+	},
+	{
+		dataSource: 'mysql-logs',
+		label: 'MySQL Logs',
+		imgUrl: opentelemetryUrl,
+		tags: ['logs'],
+		module: 'logs',
+		relatedSearchKeywords: [
+			'database',
+			'logging',
+			'logs',
+			'mysql',
+			'mysql error log',
+			'mysql general query log',
+			'mysql logs',
+			'mysql slow query log',
+			'opentelemetry mysql',
+		],
+		id: 'mysql-logs',
+		link: '/docs/integrations/opentelemetry-mysql/',
+	},
 ];
 export default onboardingConfigWithLinks;

frontend/src/container/QueryBuilder/QueryBuilder.interfaces.ts

@@ -1,11 +1,15 @@
 import { ReactNode } from 'react';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
 
 import { OrderByFilterProps } from './filters/OrderByFilter/OrderByFilter.interfaces';
 
+export type WhereClauseConfig = {
+	customKey: string;
+	customOp: string;
+};
+
 type FilterConfigs = {
 	[Key in keyof Omit<IBuilderQuery, 'filters'>]: {
 		isHidden: boolean;

frontend/src/container/QueryBuilder/filters/AggregateEveryFilter/index.tsx

@@ -1,45 +0,0 @@
-import { useMemo } from 'react';
-import { InputNumber, InputNumberProps } from 'antd';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { selectStyle } from '../QueryBuilderSearch/config';
-
-function AggregateEveryFilter({
-	onChange,
-	query,
-	disabled,
-}: AggregateEveryFilterProps): JSX.Element {
-	const isMetricsDataSource = useMemo(
-		() => query.dataSource === DataSource.METRICS,
-		[query.dataSource],
-	);
-
-	const onChangeHandler: InputNumberProps<number>['onChange'] = (event) => {
-		if (event && event >= 0) {
-			onChange(event);
-		}
-	};
-
-	const isDisabled =
-		(isMetricsDataSource && !query.aggregateAttribute?.key) || disabled;
-
-	return (
-		<InputNumber
-			placeholder="Enter in seconds"
-			disabled={isDisabled}
-			style={selectStyle}
-			value={query?.stepInterval}
-			onChange={onChangeHandler}
-			min={0}
-		/>
-	);
-}
-
-interface AggregateEveryFilterProps {
-	onChange: (values: number) => void;
-	query: IBuilderQuery;
-	disabled: boolean;
-}
-
-export default AggregateEveryFilter;

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

@@ -24,8 +24,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { ExtendedSelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 
-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';
 // ** Types
 import { AgregatorFilterProps } from './AggregatorFilter.intefaces';
 

frontend/src/container/QueryBuilder/filters/Formula/Limit/Limit.tsx

@@ -1,6 +1,6 @@
 import { InputNumber } from 'antd';
 
-import { selectStyle } from '../../QueryBuilderSearch/config';
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
 import { handleKeyDownLimitFilter } from '../../utils';
 import { LimitFilterProps } from './types';
 

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/OrderByFilter.tsx

@@ -4,7 +4,7 @@ import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { MetricAggregateOperator } from 'types/common/queryBuilder';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 
-import { selectStyle } from '../../QueryBuilderSearch/config';
+import { selectStyle } from '../../QueryBuilderSearchV2/config';
 import { OrderByProps } from './types';
 import { useOrderByFormulaFilter } from './useOrderByFormulaFilter';
 

frontend/src/container/QueryBuilder/filters/Formula/OrderBy/useOrderByFormulaFilter.tsx

@@ -16,7 +16,7 @@ import {
 	mapLabelValuePairs,
 	orderByValueDelimiter,
 } from '../../OrderByFilter/utils';
-import { getRemoveOrderFromValue } from '../../QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from '../../QueryBuilderSearchV2/utils';
 import { getUniqueOrderByValues, getValidOrderByResult } from '../../utils';
 import { IOrderByFormulaFilterProps } from './types';
 import { transformToOrderByStringValuesByFormula } from './utils';

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

@@ -23,8 +23,8 @@ import { DataSource } from 'types/common/queryBuilder';
 import { SelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 
-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';
 import { GroupByFilterProps } from './GroupByFilter.interfaces';
 
 export const GroupByFilter = memo(function GroupByFilter({

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

@@ -1,31 +0,0 @@
-import { InputNumber } from 'antd';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { selectStyle } from '../QueryBuilderSearch/config';
-import { handleKeyDownLimitFilter } from '../utils';
-
-function LimitFilter({ onChange, query }: LimitFilterProps): JSX.Element {
-	const isMetricsDataSource = query.dataSource === DataSource.METRICS;
-
-	const isDisabled = isMetricsDataSource && !query.aggregateAttribute?.key;
-
-	return (
-		<InputNumber
-			min={1}
-			type="number"
-			value={query.limit}
-			style={selectStyle}
-			disabled={isDisabled}
-			onChange={onChange}
-			onKeyDown={handleKeyDownLimitFilter}
-		/>
-	);
-}
-
-interface LimitFilterProps {
-	onChange: (values: number | null) => void;
-	query: IBuilderQuery;
-}
-
-export default LimitFilter;

frontend/src/container/QueryBuilder/filters/MetricNameSelector/MetricNameSelector.test.tsx

@@ -31,7 +31,7 @@ jest.mock('hooks/useDebounce', () => ({
 	default: <T,>(value: T): T => value,
 }));
 
-jest.mock('../QueryBuilderSearch/OptionRenderer', () => ({
+jest.mock('../OptionRenderer/OptionRenderer', () => ({
 	__esModule: true,
 	default: ({ value }: { value: string }): JSX.Element => <span>{value}</span>,
 }));

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

@@ -16,8 +16,8 @@ import { MetricAggregation } from 'types/api/v5/queryRange';
 import { ExtendedSelectOption } from 'types/common/select';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 
-import { selectStyle } from '../QueryBuilderSearch/config';
-import OptionRenderer from '../QueryBuilderSearch/OptionRenderer';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
+import OptionRenderer from '../OptionRenderer/OptionRenderer';
 
 import './MetricNameSelector.styles.scss';
 

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

@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { Select } from 'antd';
 
 // ** Types
-import { selectStyle } from '../QueryBuilderSearch/config';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
 import { OperatorsSelectProps } from './OperatorsSelect.interfaces';
 
 export const OperatorsSelect = memo(function OperatorsSelect({

frontend/src/container/QueryBuilder/filters/OptionRenderer/style.ts

@@ -0,0 +1,22 @@
+import { Badge } from '@signozhq/ui/badge';
+import styled from 'styled-components';
+
+export const TagContainer = styled(Badge).attrs({
+	color: 'secondary',
+	variant: 'outline',
+})`
+	&&& {
+		display: flex;
+		font-weight: 300;
+		font-size: 0.6rem;
+	}
+`;
+
+export const TagLabel = styled.span`
+	font-weight: 400;
+`;
+
+export const TagValue = styled.span`
+	text-transform: capitalize;
+	font-weight: 400;
+`;

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

@@ -5,7 +5,7 @@ import { DataSource, MetricAggregateOperator } from 'types/common/queryBuilder';
 import { getParsedAggregationOptionsForOrderBy } from 'utils/aggregationConverter';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 
-import { selectStyle } from '../QueryBuilderSearch/config';
+import { selectStyle } from '../QueryBuilderSearchV2/config';
 import { OrderByFilterProps } from './OrderByFilter.interfaces';
 import { useOrderByFilter } from './useOrderByFilter';
 

frontend/src/container/QueryBuilder/filters/OrderByFilter/useOrderByFilter.ts

@@ -7,7 +7,7 @@ import { parse } from 'papaparse';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { OrderByPayload } from 'types/api/queryBuilder/queryBuilderData';
 
-import { getRemoveOrderFromValue } from '../QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from '../QueryBuilderSearchV2/utils';
 import { getUniqueOrderByValues, getValidOrderByResult } from '../utils';
 import { ORDERBY_FILTERS } from './config';
 import { SIGNOZ_VALUE } from './constants';

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/OptionRendererForLogs.tsx

@@ -1,70 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { Tooltip } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import { Zap } from '@signozhq/icons';
-
-import { getOptionType } from './utils';
-
-import './QueryBuilderSearch.styles.scss';
-
-function OptionRendererForLogs({
-	label,
-	value,
-	dataType,
-	isIndexed,
-	setDynamicPlaceholder,
-}: OptionRendererProps): JSX.Element {
-	const optionType = getOptionType(label);
-
-	return (
-		<span
-			className="option"
-			onMouseEnter={(): void => setDynamicPlaceholder(value)}
-			onFocus={(): void => setDynamicPlaceholder(value)}
-		>
-			{optionType ? (
-				<Tooltip title={value} placement="topLeft">
-					<div className="logs-options-select">
-						<section className="left-section">
-							{isIndexed ? (
-								<Zap size={12} fill={Color.BG_AMBER_500} />
-							) : (
-								<div className="dot" />
-							)}
-							<Typography.Text className="text value" truncate={1}>
-								{value}
-							</Typography.Text>
-						</section>
-						<section className="right-section">
-							<div className="text tags data-type-tag">{dataType}</div>
-							<div className={cx('text tags option-type-tag', optionType)}>
-								<div className="dot" />
-								{optionType}
-							</div>
-						</section>
-					</div>
-				</Tooltip>
-			) : (
-				<Tooltip title={label} placement="topLeft">
-					<div className="without-option-type">
-						<div className="dot" />
-						<Typography.Text className="text" truncate={1}>
-							{label}
-						</Typography.Text>
-					</div>
-				</Tooltip>
-			)}
-		</span>
-	);
-}
-
-interface OptionRendererProps {
-	label: string;
-	value: string;
-	dataType: string;
-	isIndexed: boolean;
-	setDynamicPlaceholder: React.Dispatch<React.SetStateAction<string>>;
-}
-
-export default OptionRendererForLogs;

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

@@ -1,298 +0,0 @@
-.query-builder-search-container {
-	position: relative;
-	display: flex;
-	align-items: center;
-	gap: 12px;
-}
-
-.logs-popup {
-	&.hide-scroll {
-		.rc-virtual-list-holder {
-			height: 100px;
-		}
-	}
-}
-
-.logs-explorer-popup {
-	padding: 0px;
-	.ant-select-item-group {
-		padding: 12px 14px 8px 14px;
-		color: var(--muted-foreground);
-		font-family: Inter;
-		font-size: 11px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 18px; /* 163.636% */
-		letter-spacing: 0.88px;
-		text-transform: uppercase;
-	}
-
-	.show-all-filter-props {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 13px;
-		width: 100%;
-		cursor: pointer;
-
-		.content {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 100%;
-
-			.left-section {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-
-				.text {
-					color: var(--l2-foreground);
-					font-family: Inter;
-					font-size: 14px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-				}
-
-				.text:hover {
-					color: var(--l1-foreground);
-				}
-			}
-			.right-section {
-				display: flex;
-				align-items: center;
-				gap: 4px;
-				.keyboard-shortcut-slash {
-					width: 16px;
-					height: 16px;
-					flex-shrink: 0;
-					border-radius: 2.286px;
-					border-top: 1.143px solid var(--l1-border);
-					border-right: 1.143px solid var(--l1-border);
-					border-bottom: 2.286px solid var(--l1-border);
-					border-left: 1.143px solid var(--l1-border);
-					background: var(--l2-background);
-				}
-			}
-		}
-	}
-
-	.show-all-filter-props:hover {
-		background: color-mix(
-			in srgb,
-			var(--l1-foreground) 4%,
-			transparent
-		) !important;
-	}
-
-	.example-queries {
-		cursor: default;
-		.heading {
-			padding: 12px 14px 8px 14px;
-			color: var(--muted-foreground);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-
-		.query-container {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-			padding: 0px 12px 12px 12px;
-			cursor: pointer;
-
-			.example-query {
-				display: flex;
-				padding: 4px 8px;
-				justify-content: center;
-				align-items: center;
-				gap: 10px;
-				border-radius: 2px;
-				background: var(--l3-background);
-				color: var(--l2-foreground);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: -0.07px;
-				width: fit-content;
-			}
-
-			.example-query:hover {
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.ant-select-item-option-grouped {
-		padding-inline-start: 0px;
-		padding: 7px 13px;
-	}
-
-	.keyboard-shortcuts {
-		display: flex;
-		align-items: center;
-		border-radius: 0px 0px 4px 4px;
-		border: 1px solid var(--l1-border);
-		background: var(--l2-background);
-		padding: 11px 16px;
-		cursor: default;
-
-		.icons {
-			width: 16px;
-			height: 16px;
-			flex-shrink: 0;
-			border-radius: 2.286px;
-			border-top: 1.143px solid var(--l3-background);
-			border-right: 1.143px solid var(--l3-background);
-			border-bottom: 2.286px solid var(--l3-background);
-			border-left: 1.143px solid var(--l3-background);
-			background: var(--l2-background);
-		}
-
-		.keyboard-text {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.navigate {
-			display: flex;
-			align-items: center;
-			padding-right: 12px;
-			gap: 4px;
-			border-right: 1px solid var(--l1-border);
-		}
-
-		.update-query {
-			display: flex;
-			align-items: center;
-			margin-left: 12px;
-			gap: 4px;
-		}
-	}
-
-	.without-option-type {
-		display: flex;
-		gap: 8px;
-		align-items: center;
-		.dot {
-			height: 5px;
-			width: 5px;
-			border-radius: 50%;
-			background-color: var(--l3-background);
-		}
-	}
-
-	.logs-options-select {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-
-		.text {
-			color: var(--l2-foreground);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: -0.07px;
-		}
-
-		.tags {
-			display: flex;
-			height: 20px;
-			padding: 4px 8px;
-			justify-content: center;
-			align-items: center;
-			gap: 4px;
-			border-radius: 20px;
-		}
-
-		.dot {
-			height: 5px;
-			width: 5px;
-			border-radius: 50%;
-			flex-shrink: 0;
-		}
-
-		.left-section {
-			display: flex;
-			align-items: center;
-			gap: 8px;
-			width: 90%;
-
-			.dot {
-				background-color: var(--l3-background);
-			}
-
-			.value {
-				width: 100%;
-			}
-		}
-
-		.right-section {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-
-			.data-type-tag {
-				background: color-mix(in srgb, var(--l1-foreground) 8%, transparent);
-			}
-
-			.option-type-tag {
-				display: flex;
-				gap: 4px;
-				align-items: center;
-				padding: 0px 6px;
-				text-transform: capitalize;
-			}
-
-			.tag {
-				border-radius: 50px;
-				background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
-				color: var(--bg-sienna-400);
-
-				.dot {
-					background-color: var(--bg-sienna-400);
-				}
-			}
-
-			.resource {
-				border-radius: 50px;
-				background: color-mix(in srgb, var(--bg-sakura-400) 10%, transparent);
-				color: var(--bg-sakura-400);
-
-				.dot {
-					background-color: var(--bg-sakura-400);
-				}
-			}
-		}
-	}
-
-	.ant-select-item-option-active {
-		.logs-options-select {
-			.left-section {
-				.value {
-					color: var(--l1-foreground);
-				}
-			}
-		}
-	}
-}
-
-.span-scope-selector {
-	width: 160px;
-}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -1,558 +0,0 @@
-import {
-	KeyboardEvent,
-	ReactElement,
-	ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { useLocation } from 'react-router-dom';
-import { Button, Select, Spin, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Typography } from '@signozhq/ui/typography';
-import cx from 'classnames';
-import {
-	INFRA_LONG_TO_SHORT_OPERATOR_MAP,
-	OPERATORS,
-} from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
-import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import { getDataTypes } from 'container/LogDetailedView/utils';
-import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import {
-	useAutoComplete,
-	WhereClauseConfig,
-} from 'hooks/queryBuilder/useAutoComplete';
-import { useFetchKeysAndValues } from 'hooks/queryBuilder/useFetchKeysAndValues';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { isEqual, isUndefined } from 'lodash-es';
-import {
-	ArrowDown,
-	ArrowUp,
-	ChevronDown,
-	ChevronUp,
-	Command,
-	CornerDownLeft,
-	Filter,
-	Slash,
-} from '@signozhq/icons';
-import type { BaseSelectRef } from 'rc-select';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
-import { useSelectPopupContainer } from 'utils/selectPopupContainer';
-import { v4 as uuid } from 'uuid';
-
-import { selectStyle } from './config';
-import { PLACEHOLDER } from './constant';
-import ExampleQueriesRendererForLogs from './ExampleQueriesRendererForLogs';
-import OptionRenderer from './OptionRenderer';
-import OptionRendererForLogs from './OptionRendererForLogs';
-import { StyledCheckOutlined, TypographyText } from './style';
-import {
-	convertExampleQueriesToOptions,
-	getOperatorValue,
-	getRemovePrefixFromKey,
-	getTagToken,
-	isExistsNotExistsOperator,
-	isInNInOperator,
-} from './utils';
-
-import './QueryBuilderSearch.styles.scss';
-
-function getOperatorValueForContext(
-	op: string,
-	isInfraMonitoring?: boolean,
-): string {
-	const mappedOp =
-		isInfraMonitoring && INFRA_LONG_TO_SHORT_OPERATOR_MAP[op]
-			? INFRA_LONG_TO_SHORT_OPERATOR_MAP[op]
-			: op;
-	return getOperatorValue(mappedOp);
-}
-
-function QueryBuilderSearch({
-	query,
-	onChange,
-	whereClauseConfig,
-	className,
-	placeholder,
-	suffixIcon,
-	isInfraMonitoring,
-	isMetricsExplorer,
-	disableNavigationShortcuts,
-	entity,
-}: QueryBuilderSearchProps): JSX.Element {
-	const getPopupContainer = useSelectPopupContainer();
-	const { pathname } = useLocation();
-	const isLogsExplorerPage = useMemo(
-		() => pathname === ROUTES.LOGS_EXPLORER,
-		[pathname],
-	);
-
-	const [isEditingTag, setIsEditingTag] = useState(false);
-
-	const {
-		updateTag,
-		handleClearTag,
-		handleKeyDown,
-		handleOnBlur,
-		handleSearch,
-		handleSelect,
-		tags,
-		options,
-		searchValue,
-		isMulti,
-		isFetching,
-		setSearchKey,
-		setSearchValue,
-		searchKey,
-		key,
-		exampleQueries,
-	} = useAutoComplete(
-		query,
-		whereClauseConfig,
-		isLogsExplorerPage,
-		isInfraMonitoring,
-		entity,
-		isMetricsExplorer,
-	);
-
-	const [isOpen, setIsOpen] = useState<boolean>(false);
-	const [showAllFilters, setShowAllFilters] = useState<boolean>(false);
-	const [dynamicPlacholder, setDynamicPlaceholder] = useState<string>(
-		placeholder || '',
-	);
-	const selectRef = useRef<BaseSelectRef>(null);
-
-	const { sourceKeys, handleRemoveSourceKey } = useFetchKeysAndValues(
-		searchValue,
-		query,
-		searchKey,
-		isLogsExplorerPage,
-		isInfraMonitoring,
-		entity,
-		isMetricsExplorer,
-	);
-
-	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
-
-	const { handleRunQuery, currentQuery } = useQueryBuilder();
-
-	const toggleEditMode = useCallback(
-		(value: boolean) => {
-			// Editing mode is required only in infra monitoring or metrics explorer
-			if (isInfraMonitoring || isMetricsExplorer) {
-				setIsEditingTag(value);
-			}
-		},
-		[isInfraMonitoring, isMetricsExplorer],
-	);
-
-	const onTagRender = ({
-		value,
-		closable,
-		onClose,
-	}: CustomTagProps): ReactElement => {
-		const { tagOperator } = getTagToken(value);
-		const isInNin = isInNInOperator(tagOperator);
-		const chipValue = isInNin
-			? value?.trim()?.replace(/,\s*$/, '')
-			: value?.trim();
-
-		const onCloseHandler = (): void => {
-			onClose();
-			// Editing is done after closing a tag
-			toggleEditMode(false);
-			handleSearch('');
-			setSearchKey('');
-		};
-
-		const tagEditHandler = (value: string): void => {
-			updateTag(value);
-			// Editing starts
-			toggleEditMode(true);
-			if (isInfraMonitoring || isMetricsExplorer) {
-				setSearchValue(value);
-			} else {
-				handleSearch(value);
-			}
-		};
-
-		const isDisabled = !!searchValue;
-
-		return (
-			<Badge
-				color="vanilla"
-				closable={!searchValue && closable}
-				onClose={(e): void => {
-					e.preventDefault();
-					onCloseHandler();
-				}}
-			>
-				<Tooltip title={chipValue}>
-					<TypographyText
-						$isInNin={isInNin}
-						$isEnabled={!!searchValue}
-						onClick={(): void => {
-							if (!isDisabled) {
-								tagEditHandler(value);
-							}
-						}}
-					>
-						{chipValue}
-					</TypographyText>
-				</Tooltip>
-			</Badge>
-		);
-	};
-
-	const onChangeHandler = (value: string[]): void => {
-		if (!isMulti) {
-			handleSearch(value[value.length - 1]);
-		}
-	};
-
-	const onInputKeyDownHandler = (event: KeyboardEvent<Element>): void => {
-		if (isMulti || event.key === 'Backspace') {
-			handleKeyDown(event);
-		}
-		if (isExistsNotExistsOperator(searchValue)) {
-			handleKeyDown(event);
-		}
-
-		// Editing is done after enter key press
-		if (event.key === 'Enter') {
-			toggleEditMode(false);
-		}
-
-		if (
-			!disableNavigationShortcuts &&
-			(event.ctrlKey || event.metaKey) &&
-			event.key === 'Enter'
-		) {
-			event.preventDefault();
-			event.stopPropagation();
-			handleRunQuery();
-			setIsOpen(false);
-		}
-
-		if (
-			!disableNavigationShortcuts &&
-			(event.ctrlKey || event.metaKey) &&
-			event.key === '/'
-		) {
-			event.preventDefault();
-			event.stopPropagation();
-			setShowAllFilters((prev) => !prev);
-		}
-	};
-
-	const handleDeselect = useCallback(
-		(deselectedItem: string) => {
-			handleClearTag(deselectedItem);
-			handleRemoveSourceKey(deselectedItem);
-		},
-		[handleClearTag, handleRemoveSourceKey],
-	);
-
-	const isMetricsDataSource = useMemo(
-		() =>
-			query.dataSource === DataSource.METRICS &&
-			!isInfraMonitoring &&
-			!isMetricsExplorer,
-		[query.dataSource, isInfraMonitoring, isMetricsExplorer],
-	);
-
-	const fetchValueDataType = (value: unknown, operator: string): DataTypes => {
-		if (operator === OPERATORS.HAS || operator === OPERATORS.NHAS) {
-			return getDataTypes([value]);
-		}
-
-		return DataTypes.EMPTY;
-	};
-
-	const queryTags = useMemo(() => {
-		if (!query.aggregateAttribute?.key && isMetricsDataSource) {
-			return [];
-		}
-		return tags;
-	}, [isMetricsDataSource, query.aggregateAttribute?.key, tags]);
-
-	useEffect(() => {
-		const initialTagFilters: TagFilter = { items: [], op: 'AND' };
-		const initialSourceKeys = query.filters?.items?.map(
-			(item) => item.key as BaseAutocompleteData,
-		);
-
-		initialTagFilters.items = tags.map((tag) => {
-			const { tagKey, tagOperator, tagValue } = getTagToken(tag);
-
-			const filterAttribute = [
-				...(initialSourceKeys || []),
-				...(sourceKeys || []),
-			].find((key) => key?.key === getRemovePrefixFromKey(tagKey));
-
-			const computedTagValue =
-				tagValue && Array.isArray(tagValue) && tagValue[tagValue.length - 1] === ''
-					? tagValue?.slice(0, -1)
-					: (tagValue ?? '');
-
-			return {
-				id: uuid().slice(0, 8),
-				key: filterAttribute ?? {
-					key: tagKey,
-					dataType: fetchValueDataType(computedTagValue, tagOperator),
-					type: '',
-				},
-				op: getOperatorValueForContext(tagOperator, isInfraMonitoring),
-				value: computedTagValue,
-			};
-		});
-
-		// If in infra monitoring or metrics explorer, only run the onChange query when editing is finsished.
-		if (isInfraMonitoring || isMetricsExplorer) {
-			if (!isEditingTag) {
-				onChange(initialTagFilters);
-			}
-		} else {
-			onChange(initialTagFilters);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [sourceKeys]);
-
-	const isLastQuery = useMemo(
-		() =>
-			isEqual(
-				currentQuery.builder.queryData[currentQuery.builder.queryData.length - 1],
-				query,
-			),
-		[currentQuery, query],
-	);
-
-	useEffect(() => {
-		if (isLastQuery && !disableNavigationShortcuts) {
-			registerShortcut(LogsExplorerShortcuts.FocusTheSearchBar, () => {
-				// set timeout is needed here else the select treats the hotkey as input value
-				setTimeout(() => {
-					selectRef.current?.focus();
-				}, 0);
-			});
-		}
-
-		return (): void =>
-			deregisterShortcut(LogsExplorerShortcuts.FocusTheSearchBar);
-	}, [
-		deregisterShortcut,
-		disableNavigationShortcuts,
-		isLastQuery,
-		registerShortcut,
-	]);
-
-	useEffect(() => {
-		if (!isOpen) {
-			setDynamicPlaceholder(placeholder || '');
-		}
-	}, [isOpen, placeholder]);
-
-	const userOs = getUserOperatingSystem();
-
-	// conditional changes here to use a seperate component to render the example queries based on the option group label
-	const customRendererForLogsExplorer = options.map((option) => (
-		<Select.Option
-			key={`${option.label}-${option.type || ''}-${option.dataType || ''}`}
-			value={option.value}
-		>
-			<OptionRendererForLogs
-				label={option.label}
-				value={option.value}
-				dataType={option.dataType || ''}
-				isIndexed={option.isIndexed || false}
-				setDynamicPlaceholder={setDynamicPlaceholder}
-			/>
-			{option.selected && <StyledCheckOutlined />}
-		</Select.Option>
-	));
-
-	return (
-		<div className="query-builder-search-container">
-			<Select
-				data-testid={'qb-search-select'}
-				ref={selectRef}
-				getPopupContainer={getPopupContainer}
-				transitionName=""
-				choiceTransitionName=""
-				virtual={false}
-				showSearch
-				tagRender={onTagRender}
-				filterOption={false}
-				open={isOpen}
-				onDropdownVisibleChange={setIsOpen}
-				autoClearSearchValue={false}
-				mode="multiple"
-				placeholder={dynamicPlacholder}
-				value={queryTags}
-				searchValue={searchValue}
-				className={cx(
-					className,
-					isLogsExplorerPage ? 'logs-popup' : '',
-					!showAllFilters && options.length > 3 && !key ? 'hide-scroll' : '',
-				)}
-				rootClassName="query-builder-search"
-				disabled={isMetricsDataSource && !query.aggregateAttribute?.key}
-				style={selectStyle}
-				onSearch={handleSearch}
-				onChange={onChangeHandler}
-				onSelect={handleSelect}
-				onDeselect={handleDeselect}
-				onInputKeyDown={onInputKeyDownHandler}
-				notFoundContent={isFetching ? <Spin size="small" /> : null}
-				suffixIcon={
-					!isUndefined(suffixIcon) ? (
-						suffixIcon
-					) : isOpen ? (
-						<ChevronUp size={14} />
-					) : (
-						<ChevronDown size={14} />
-					)
-				}
-				showAction={['focus']}
-				onBlur={(e: React.FocusEvent<HTMLInputElement>): void => {
-					handleOnBlur(e);
-					// Editing is done after tapping out of the input
-					toggleEditMode(false);
-				}}
-				popupClassName={isLogsExplorerPage ? 'logs-explorer-popup' : ''}
-				dropdownRender={(menu): ReactElement => (
-					<div>
-						{!searchKey && isLogsExplorerPage && (
-							<div className="ant-select-item-group ">Suggested Filters</div>
-						)}
-						{menu}
-						{isLogsExplorerPage && (
-							<div>
-								{!searchKey && tags.length === 0 && (
-									<div className="example-queries">
-										<div className="heading"> Example Queries </div>
-										<div className="query-container">
-											{convertExampleQueriesToOptions(exampleQueries).map((query) => (
-												<ExampleQueriesRendererForLogs
-													key={query.label}
-													label={query.label}
-													value={query.value}
-													handleAddTag={onChange}
-												/>
-											))}
-										</div>
-									</div>
-								)}
-								{!key && !isFetching && !showAllFilters && options.length > 3 && (
-									<Button
-										type="text"
-										className="show-all-filter-props"
-										onClick={(): void => {
-											setShowAllFilters(true);
-											// when clicking on the button the search bar looses the focus
-											selectRef?.current?.focus();
-										}}
-									>
-										<div className="content">
-											<section className="left-section">
-												<Filter size={14} />
-												<Typography.Text className="text">
-													Show all filters properties
-												</Typography.Text>
-											</section>
-											<section className="right-section">
-												{userOs === UserOperatingSystem.MACOS ? (
-													<Command size={14} className="keyboard-shortcut-slash" />
-												) : (
-													<ChevronUp size={14} className="keyboard-shortcut-slash" />
-												)}
-												+
-												<Slash size={14} className="keyboard-shortcut-slash" />
-											</section>
-										</div>
-									</Button>
-								)}
-								<div className="keyboard-shortcuts">
-									<section className="navigate">
-										<ArrowDown size={10} className="icons" />
-										<ArrowUp size={10} className="icons" />
-										<span className="keyboard-text">to navigate</span>
-									</section>
-									<section className="update-query">
-										<CornerDownLeft size={10} className="icons" />
-										<span className="keyboard-text">to update query</span>
-									</section>
-								</div>
-							</div>
-						)}
-					</div>
-				)}
-			>
-				{isLogsExplorerPage
-					? customRendererForLogsExplorer
-					: options.map((option) => (
-							<Select.Option
-								key={`${option.label}-${option.type || ''}-${option.dataType || ''}`}
-								value={option.value}
-							>
-								<OptionRenderer
-									label={option.label}
-									value={option.value}
-									dataType={option.dataType || ''}
-									type={option.type || ''}
-								/>
-								{option.selected && <StyledCheckOutlined />}
-							</Select.Option>
-						))}
-			</Select>
-		</div>
-	);
-}
-
-interface QueryBuilderSearchProps {
-	query: IBuilderQuery;
-	onChange: (value: TagFilter) => void;
-	whereClauseConfig?: WhereClauseConfig;
-	className?: string;
-	placeholder?: string;
-	suffixIcon?: React.ReactNode;
-	isInfraMonitoring?: boolean;
-	disableNavigationShortcuts?: boolean;
-	// TODO: Remove the dependency of InfraMonitoring from this code
-	entity?: InfraMonitoringEntity | null;
-	isMetricsExplorer?: boolean;
-}
-
-QueryBuilderSearch.defaultProps = {
-	whereClauseConfig: undefined,
-	className: '',
-	placeholder: PLACEHOLDER,
-	suffixIcon: undefined,
-	isInfraMonitoring: false,
-	disableNavigationShortcuts: false,
-	entity: null,
-	isMetricsExplorer: false,
-};
-
-export interface CustomTagProps {
-	label: ReactNode;
-	value: string;
-	disabled: boolean;
-	onClose: () => void;
-	closable: boolean;
-}
-
-export default QueryBuilderSearch;

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

@@ -1,7 +1,5 @@
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import './QueryBuilderSearch.styles.scss';
-
 function ExampleQueriesRendererForLogs({
 	label,
 	value,

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

@@ -11,8 +11,8 @@ import {
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { getUserOperatingSystem, UserOperatingSystem } from 'utils/getUserOS';
 
-import ExampleQueriesRendererForLogs from '../QueryBuilderSearch/ExampleQueriesRendererForLogs';
-import { convertExampleQueriesToOptions } from '../QueryBuilderSearch/utils';
+import ExampleQueriesRendererForLogs from './ExampleQueriesRendererForLogs';
+import { convertExampleQueriesToOptions } from './utils';
 import { ITag, Option } from './QueryBuilderSearchV2';
 
 import './QueryBuilderSearchV2.styles.scss';

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

@@ -19,10 +19,10 @@ import {
 	QUERY_BUILDER_SEARCH_VALUES,
 } from 'constants/queryBuilder';
 import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
+import type { WhereClauseConfig } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { LogsExplorerShortcuts } from 'constants/shortcuts/logsExplorerShortcuts';
 import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
-import { WhereClauseConfig } from 'hooks/queryBuilder/useAutoComplete';
 import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
 import { useGetAggregateValues } from 'hooks/queryBuilder/useGetAggregateValues';
 import { useGetAttributeSuggestions } from 'hooks/queryBuilder/useGetAttributeSuggestions';
@@ -53,16 +53,16 @@ import { DataSource } from 'types/common/queryBuilder';
 import { useSelectPopupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
-import { selectStyle } from '../QueryBuilderSearch/config';
-import { PLACEHOLDER } from '../QueryBuilderSearch/constant';
-import { TypographyText } from '../QueryBuilderSearch/style';
+import { selectStyle } from './config';
+import { PLACEHOLDER } from './constant';
+import { TypographyText } from './style';
 import {
 	checkCommaInValue,
 	getOperatorFromValue,
 	getOperatorValue,
 	getTagToken,
 	isInNInOperator,
-} from '../QueryBuilderSearch/utils';
+} from './utils';
 import { filterByOperatorConfig } from '../utils';
 import QueryBuilderSearchDropdown from './QueryBuilderSearchDropdown';
 import SpanScopeSelector from './SpanScopeSelector';

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

@@ -7,7 +7,7 @@ import { isEmpty, isObject } from 'lodash-es';
 import { Check, Zap } from '@signozhq/icons';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 
-import { getTagToken } from '../QueryBuilderSearch/utils';
+import { getTagToken } from './utils';
 import { DropdownState } from './QueryBuilderSearchV2';
 
 import './Suggestions.styles.scss';

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/style.ts

@@ -1,5 +1,3 @@
-import { Check } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';
 
 export const TypographyText = styled.span<{
@@ -17,27 +15,3 @@ export const TypographyText = styled.span<{
 	padding-left: 8px;
 	${({ $disabled }): string => ($disabled ? 'opacity: 0.6' : '')}
 `;
-
-export const StyledCheckOutlined = styled(Check)`
-	float: right;
-`;
-
-export const TagContainer = styled(Badge).attrs({
-	color: 'secondary',
-	variant: 'outline',
-})`
-	&&& {
-		display: flex;
-		font-weight: 300;
-		font-size: 0.6rem;
-	}
-`;
-
-export const TagLabel = styled.span`
-	font-weight: 400;
-`;
-
-export const TagValue = styled.span`
-	text-transform: capitalize;
-	font-weight: 400;
-`;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/utils.ts

@@ -1,8 +1,7 @@
 import { OPERATORS } from 'constants/queryBuilder';
-import { MetricsType } from 'container/MetricsApplication/constant';
 import { queryFilterTags } from 'hooks/queryBuilder/useTag';
 import { parse } from 'papaparse';
-import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+import type { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { orderByValueDelimiter } from '../OrderByFilter/utils';
 
@@ -191,18 +190,6 @@ export function getRemoveOrderFromValue(tag: string): string {
 	return tag;
 }
 
-export function getOptionType(label: string): MetricsType | undefined {
-	let optionType;
-
-	if (label.startsWith('tag_')) {
-		optionType = MetricsType.Tag;
-	} else if (label.startsWith('resource_')) {
-		optionType = MetricsType.Resource;
-	}
-
-	return optionType;
-}
-
 /**
  *
  * @param exampleQueries the example queries based on recommendation engine

frontend/src/container/QueryBuilder/filters/utils.ts

@@ -1,4 +1,3 @@
-import { AttributeValuesMap } from 'components/ClientSideQBSearch/ClientSideQBSearch';
 import { OperatorConfigKeys, OPERATORS_CONFIG } from 'constants/queryBuilder';
 import { HAVING_FILTER_REGEXP } from 'constants/regExp';
 import { IOption } from 'hooks/useResourceAttribute/types';
@@ -11,7 +10,7 @@ import {
 	orderByValueDelimiter,
 	splitOrderByFromString,
 } from './OrderByFilter/utils';
-import { getRemoveOrderFromValue } from './QueryBuilderSearch/utils';
+import { getRemoveOrderFromValue } from './QueryBuilderSearchV2/utils';
 
 export const handleKeyDownLimitFilter: React.KeyboardEventHandler<
 	HTMLInputElement
@@ -101,23 +100,6 @@ export const getValidOrderByResult = (result: IOption[]): IOption[] =>
 		return acc;
 	}, []);
 
-export const transformKeyValuesToAttributeValuesMap = (
-	attributeValuesMap: Record<string, string[] | number[] | boolean[]>,
-): AttributeValuesMap =>
-	Object.fromEntries(
-		Object.entries(attributeValuesMap || {}).map(([key, values]) => [
-			key,
-			{
-				stringAttributeValues:
-					typeof values[0] === 'string' ? (values as string[]) : [],
-				numberAttributeValues:
-					typeof values[0] === 'number' ? (values as number[]) : [],
-				boolAttributeValues:
-					typeof values[0] === 'boolean' ? (values as boolean[]) : [],
-			},
-		]),
-	);
-
 export const filterByOperatorConfig = (
 	options: IOption[],
 	key?: OperatorConfigKeys,

frontend/src/container/QueryTable/Drilldown/metricsCorrelationUtils.tsx

@@ -3,7 +3,7 @@ import {
 	formatValueForExpression,
 	removeKeysFromExpression,
 } from 'components/QueryBuilderV2/utils';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { IQueryPair } from 'types/antlrQueryTypes';
 import { extractQueryPairs } from 'utils/queryContextUtils';
 import { isQuoted, unquote } from 'utils/stringUtils';

frontend/src/hooks/logs/useActiveLog.ts

@@ -9,7 +9,7 @@ import { QueryParams } from 'constants/query';
 import { OPERATORS, QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { MetricsType } from 'container/MetricsApplication/constant';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';

frontend/src/hooks/queryBuilder/useAutoComplete.ts

@@ -1,185 +0,0 @@
-import { KeyboardEvent, useCallback, useState } from 'react';
-import { OPERATORS } from 'constants/queryBuilder';
-import type { InfraMonitoringEntity } from 'container/InfraMonitoringK8sV2/constants';
-import {
-	getRemovePrefixFromKey,
-	getTagToken,
-	replaceStringWithMaxLength,
-	tagRegexp,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { Option } from 'container/QueryBuilder/type';
-import { parse } from 'papaparse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-import { useFetchKeysAndValues } from './useFetchKeysAndValues';
-import { useOptions, WHERE_CLAUSE_CUSTOM_SUFFIX } from './useOptions';
-import { useSetCurrentKeyAndOperator } from './useSetCurrentKeyAndOperator';
-import { useTag } from './useTag';
-import { useTagValidation } from './useTagValidation';
-
-export type WhereClauseConfig = {
-	customKey: string;
-	customOp: string;
-};
-
-export const useAutoComplete = (
-	query: IBuilderQuery,
-	whereClauseConfig?: WhereClauseConfig,
-	shouldUseSuggestions?: boolean,
-	isInfraMonitoring?: boolean,
-	entity?: InfraMonitoringEntity | null,
-	isMetricsExplorer?: boolean,
-): IAutoComplete => {
-	const [searchValue, setSearchValue] = useState<string>('');
-	const [searchKey, setSearchKey] = useState<string>('');
-
-	const { keys, results, isFetching, exampleQueries } = useFetchKeysAndValues(
-		searchValue,
-		query,
-		searchKey,
-		shouldUseSuggestions,
-		isInfraMonitoring,
-		entity,
-		isMetricsExplorer,
-	);
-
-	const [key, operator, result] = useSetCurrentKeyAndOperator(searchValue, keys);
-
-	const handleSearch = (value: string): void => {
-		const prefixFreeValue = getRemovePrefixFromKey(getTagToken(value).tagKey);
-		setSearchValue(value);
-		setSearchKey(prefixFreeValue);
-	};
-
-	const { isValidTag, isExist, isValidOperator, isMulti } = useTagValidation(
-		operator,
-		result,
-	);
-
-	const { handleAddTag, handleClearTag, tags, updateTag } = useTag(
-		isValidTag,
-		handleSearch,
-		query,
-		setSearchKey,
-		whereClauseConfig,
-		isInfraMonitoring,
-	);
-
-	const handleSelect = useCallback(
-		(value: string): void => {
-			if (isMulti) {
-				setSearchValue((prev: string) => {
-					const matches = prev?.matchAll(tagRegexp);
-					const [match] = matches ? Array.from(matches) : [];
-					const [, , , matchTagValue] = match;
-					const data = parse(matchTagValue).data.flat();
-					return replaceStringWithMaxLength(prev, data as string[], value);
-				});
-			}
-			if (!isMulti) {
-				handleAddTag(value);
-			}
-		},
-		[handleAddTag, isMulti],
-	);
-
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent): void => {
-			if (
-				event.key === ' ' &&
-				(searchValue.endsWith(' ') || searchValue.length === 0)
-			) {
-				event.preventDefault();
-			}
-
-			if (event.key === 'Enter' && searchValue && isValidTag) {
-				if (isMulti) {
-					event.stopPropagation();
-				}
-				event.preventDefault();
-				handleAddTag(searchValue);
-			}
-
-			if (event.key === 'Backspace' && !searchValue) {
-				event.stopPropagation();
-				const last = tags[tags.length - 1];
-				handleClearTag(last);
-			}
-		},
-		[handleAddTag, handleClearTag, isMulti, isValidTag, searchValue, tags],
-	);
-
-	const handleOnBlur = (event: React.FocusEvent<HTMLInputElement>): void => {
-		event.preventDefault();
-		if (searchValue) {
-			if (
-				key &&
-				!operator &&
-				whereClauseConfig?.customKey === 'body' &&
-				whereClauseConfig.customOp === OPERATORS.CONTAINS
-			) {
-				const value = `${searchValue}${WHERE_CLAUSE_CUSTOM_SUFFIX}`;
-				handleAddTag(value);
-				return;
-			}
-			handleAddTag(searchValue);
-		}
-	};
-
-	const options = useOptions(
-		key,
-		keys,
-		operator,
-		searchValue,
-		isMulti,
-		isValidOperator,
-		isExist,
-		results,
-		result,
-		isFetching,
-		whereClauseConfig,
-		isInfraMonitoring,
-	);
-
-	return {
-		updateTag,
-		handleSearch,
-		handleClearTag,
-		handleSelect,
-		handleKeyDown,
-		handleOnBlur,
-		options,
-		tags,
-		searchValue,
-		isMulti,
-		isFetching,
-		setSearchKey,
-		setSearchValue,
-		searchKey,
-		key,
-		exampleQueries,
-	};
-};
-
-interface IAutoComplete {
-	updateTag: (value: string) => void;
-	handleSearch: (value: string) => void;
-	handleClearTag: (value: string) => void;
-	handleSelect: (value: string) => void;
-	handleKeyDown: (event: React.KeyboardEvent) => void;
-	handleOnBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
-	options: Option[];
-	tags: string[];
-	searchValue: string;
-	isMulti: boolean;
-	isFetching: boolean;
-	setSearchKey: (value: string) => void;
-	setSearchValue: (value: string) => void;
-	searchKey: string;
-	key: string;
-	exampleQueries: TagFilter[];
-	isInfraMonitoring?: boolean;
-}

frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts

@@ -1,308 +0,0 @@
-/* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useDebounce } from 'react-use';
-import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
-import { DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY } from 'constants/queryBuilder';
-import { DEBOUNCE_DELAY } from 'constants/queryBuilderFilterConfig';
-import {
-	GetK8sEntityToAggregateAttribute,
-	InfraMonitoringEntity,
-} from 'container/InfraMonitoringK8sV2/constants';
-import {
-	getRemovePrefixFromKey,
-	getTagToken,
-	isInNInOperator,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import useDebounceValue from 'hooks/useDebounce';
-import { cloneDeep, isEqual, uniqWith, unset } from 'lodash-es';
-import { IAttributeValuesResponse } from 'types/api/queryBuilder/getAttributesValues';
-import {
-	BaseAutocompleteData,
-	DataTypes,
-} from 'types/api/queryBuilder/queryAutocompleteResponse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { useGetAggregateKeys } from './useGetAggregateKeys';
-import { useGetAttributeSuggestions } from './useGetAttributeSuggestions';
-
-type IuseFetchKeysAndValues = {
-	keys: BaseAutocompleteData[];
-	results: string[];
-	isFetching: boolean;
-	sourceKeys: BaseAutocompleteData[];
-	handleRemoveSourceKey: (newSourceKey: string) => void;
-	exampleQueries: TagFilter[];
-};
-
-/**
- * Custom hook to fetch attribute keys and values from an API
- * @param searchValue - the search query value
- * @param query - an object containing data for the query
- * @returns an object containing the fetched attribute keys, results, and the status of the fetch
- */
-
-export const useFetchKeysAndValues = (
-	searchValue: string,
-	query: IBuilderQuery,
-	searchKey: string,
-	shouldUseSuggestions?: boolean,
-	isInfraMonitoring?: boolean,
-	entity?: InfraMonitoringEntity | null,
-	isMetricsExplorer?: boolean,
-): IuseFetchKeysAndValues => {
-	const [keys, setKeys] = useState<BaseAutocompleteData[]>([]);
-	const [exampleQueries, setExampleQueries] = useState<TagFilter[]>([]);
-	const [sourceKeys, setSourceKeys] = useState<BaseAutocompleteData[]>([]);
-	const [results, setResults] = useState<string[]>([]);
-	const [isAggregateFetching, setAggregateFetching] = useState<boolean>(false);
-
-	const memoizedSearchParams = useMemo(
-		() => [
-			searchKey,
-			query.dataSource,
-			query.aggregateOperator,
-			query.aggregateAttribute?.key,
-		],
-		[
-			searchKey,
-			query.dataSource,
-			query.aggregateOperator,
-			query.aggregateAttribute?.key,
-		],
-	);
-
-	const searchParams = useDebounceValue(memoizedSearchParams, DEBOUNCE_DELAY);
-
-	const queryFiltersWithoutId = useMemo(
-		() => ({
-			...query.filters,
-			items: query.filters?.items?.map((item) => {
-				const filterWithoutId = cloneDeep(item);
-				unset(filterWithoutId, 'id');
-				return filterWithoutId;
-			}),
-		}),
-		[query.filters],
-	);
-
-	const memoizedSuggestionsParams = useMemo(
-		() => [searchKey, query.dataSource, queryFiltersWithoutId],
-		[query.dataSource, queryFiltersWithoutId, searchKey],
-	);
-
-	const suggestionsParams = useDebounceValue(
-		memoizedSuggestionsParams,
-		DEBOUNCE_DELAY,
-	);
-
-	const isQueryEnabled = useMemo(
-		() =>
-			query.dataSource === DataSource.METRICS &&
-			!isInfraMonitoring &&
-			!isMetricsExplorer
-				? !!query.dataSource && !!query.aggregateAttribute?.dataType
-				: true,
-		[
-			isInfraMonitoring,
-			isMetricsExplorer,
-			query.aggregateAttribute?.dataType,
-			query.dataSource,
-		],
-	);
-
-	const { data, isFetching, status } = useGetAggregateKeys(
-		{
-			searchText: searchKey,
-			dataSource: query.dataSource,
-			aggregateOperator: query.aggregateOperator || '',
-			aggregateAttribute:
-				isInfraMonitoring && entity
-					? GetK8sEntityToAggregateAttribute(entity)
-					: query.aggregateAttribute?.key || '',
-			tagType: query.aggregateAttribute?.type ?? null,
-		},
-		{
-			queryKey: [searchParams],
-			enabled: isMetricsExplorer ? false : isQueryEnabled && !shouldUseSuggestions,
-		},
-		isInfraMonitoring, // isInfraMonitoring
-		entity, // infraMonitoringEntity
-	);
-
-	const {
-		data: suggestionsData,
-		isFetching: isFetchingSuggestions,
-		status: fetchingSuggestionsStatus,
-	} = useGetAttributeSuggestions(
-		{
-			searchText: searchKey,
-			dataSource: query.dataSource,
-			filters: query.filters || { items: [], op: 'AND' },
-		},
-		{
-			queryKey: [suggestionsParams],
-			enabled: isQueryEnabled && shouldUseSuggestions,
-		},
-	);
-
-	function isAttributeValuesResponse(
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		payload: any,
-	): payload is IAttributeValuesResponse {
-		return (
-			payload &&
-			(Array.isArray(payload.stringAttributeValues) ||
-				payload.stringAttributeValues === null ||
-				Array.isArray(payload.numberAttributeValues) ||
-				payload.numberAttributeValues === null ||
-				Array.isArray(payload.boolAttributeValues) ||
-				payload.boolAttributeValues === null)
-		);
-	}
-
-	/**
-	 * Fetches the options to be displayed based on the selected value
-	 * @param value - the selected value
-	 * @param query - an object containing data for the query
-	 */
-	const handleFetchOption = async (
-		value: string,
-		query: IBuilderQuery,
-		keys: BaseAutocompleteData[],
-	): Promise<void> => {
-		if (!value) {
-			return;
-		}
-		const { tagKey, tagOperator, tagValue } = getTagToken(value);
-		const filterAttributeKey = keys.find(
-			(item) => item.key === getRemovePrefixFromKey(tagKey),
-		);
-		setResults([]);
-
-		if (!tagKey || !tagOperator) {
-			return;
-		}
-		setAggregateFetching(true);
-
-		try {
-			let payload;
-			if (isInfraMonitoring && entity) {
-				const response = await getAttributesValues({
-					aggregateOperator: 'noop',
-					dataSource: query.dataSource,
-					aggregateAttribute:
-						GetK8sEntityToAggregateAttribute(entity) ||
-						query.aggregateAttribute?.key ||
-						'',
-					attributeKey: filterAttributeKey?.key ?? tagKey,
-					filterAttributeKeyDataType:
-						filterAttributeKey?.dataType ?? DataTypes.EMPTY,
-					tagType: filterAttributeKey?.type ?? '',
-					searchText: isInNInOperator(tagOperator)
-						? (tagValue[tagValue.length - 1]?.toString() ?? '')
-						: (tagValue?.toString() ?? ''),
-				});
-				payload = response.payload;
-			} else {
-				const response = await getAttributesValues({
-					aggregateOperator: query.aggregateOperator || '',
-					dataSource: query.dataSource,
-					aggregateAttribute: query.aggregateAttribute?.key || '',
-					attributeKey: filterAttributeKey?.key ?? tagKey,
-					filterAttributeKeyDataType:
-						filterAttributeKey?.dataType ?? DataTypes.EMPTY,
-					tagType: filterAttributeKey?.type ?? '',
-					searchText: isInNInOperator(tagOperator)
-						? (tagValue[tagValue.length - 1]?.toString() ?? '')
-						: (tagValue?.toString() ?? ''),
-				});
-				payload = response.payload;
-			}
-
-			if (payload && isAttributeValuesResponse(payload)) {
-				const dataType = filterAttributeKey?.dataType ?? DataTypes.String;
-				const key = DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY[dataType];
-				setResults(key ? payload[key] || [] : []);
-				return;
-			}
-		} catch (e) {
-			console.error(e);
-		} finally {
-			setAggregateFetching(false);
-		}
-	};
-
-	const handleRemoveSourceKey = useCallback((sourceKey: string) => {
-		setSourceKeys((prevState) =>
-			prevState.filter((item) => item.key !== sourceKey),
-		);
-	}, []);
-
-	// creates a ref to the fetch function so that it doesn't change on every render
-	const clearFetcher = useRef(handleFetchOption).current;
-
-	// debounces the fetch function to avoid excessive API calls
-	useDebounce(() => clearFetcher(searchValue, query, keys), 750, [
-		clearFetcher,
-		searchValue,
-		query,
-		keys,
-	]);
-
-	// update the fetched keys when the fetch status changes
-	useEffect(() => {
-		if (status === 'success' && data?.payload?.attributeKeys) {
-			setKeys(data.payload.attributeKeys);
-			setSourceKeys((prevState) =>
-				uniqWith([...(data.payload.attributeKeys ?? []), ...prevState], isEqual),
-			);
-		} else {
-			setKeys([]);
-		}
-	}, [data?.payload?.attributeKeys, status]);
-
-	useEffect(() => {
-		if (
-			fetchingSuggestionsStatus === 'success' &&
-			suggestionsData?.payload?.attributes
-		) {
-			if (!isInfraMonitoring) {
-				setKeys(suggestionsData.payload.attributes);
-				setSourceKeys((prevState) =>
-					uniqWith(
-						[...(suggestionsData.payload.attributes ?? []), ...prevState],
-						isEqual,
-					),
-				);
-			}
-		} else {
-			setKeys([]);
-		}
-		if (
-			fetchingSuggestionsStatus === 'success' &&
-			suggestionsData?.payload?.example_queries
-		) {
-			setExampleQueries(suggestionsData.payload.example_queries);
-		} else {
-			setExampleQueries([]);
-		}
-	}, [
-		suggestionsData?.payload?.attributes,
-		fetchingSuggestionsStatus,
-		suggestionsData?.payload?.example_queries,
-		isInfraMonitoring,
-	]);
-
-	return {
-		keys,
-		results,
-		isFetching: isFetching || isAggregateFetching || isFetchingSuggestions,
-		sourceKeys,
-		handleRemoveSourceKey,
-		exampleQueries,
-	};
-};

frontend/src/hooks/queryBuilder/useOperators.ts

@@ -1,31 +0,0 @@
-import { useMemo } from 'react';
-import {
-	OPERATORS,
-	QUERY_BUILDER_OPERATORS_BY_TYPES,
-} from 'constants/queryBuilder';
-import { getRemovePrefixFromKey } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-type IOperators =
-	| typeof QUERY_BUILDER_OPERATORS_BY_TYPES.universal
-	| typeof QUERY_BUILDER_OPERATORS_BY_TYPES.string
-	| typeof QUERY_BUILDER_OPERATORS_BY_TYPES.bool
-	| typeof QUERY_BUILDER_OPERATORS_BY_TYPES.int64
-	| typeof QUERY_BUILDER_OPERATORS_BY_TYPES.float64;
-
-export const useOperators = (
-	key: string,
-	keys: BaseAutocompleteData[],
-): IOperators =>
-	useMemo(() => {
-		const currentKey = keys?.find((el) => el.key === getRemovePrefixFromKey(key));
-		const strippedKey = key.split(' ')[0];
-
-		return currentKey?.dataType
-			? QUERY_BUILDER_OPERATORS_BY_TYPES[
-					currentKey.dataType as keyof typeof QUERY_BUILDER_OPERATORS_BY_TYPES
-				]
-			: strippedKey.endsWith('[*]') && strippedKey.startsWith('body.')
-				? [OPERATORS.HAS, OPERATORS.NHAS]
-				: QUERY_BUILDER_OPERATORS_BY_TYPES.universal;
-	}, [keys, key]);

frontend/src/hooks/queryBuilder/useOptions.ts

@@ -1,220 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { INFRA_SHORT_TO_LONG_OPERATOR_MAP } from 'constants/queryBuilder';
-import {
-	checkCommaInValue,
-	getTagToken,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { Option } from 'container/QueryBuilder/type';
-import { useDashboardVariablesByType } from 'hooks/dashboard/useDashboardVariablesByType';
-import { isEmpty } from 'lodash-es';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-import { WhereClauseConfig } from './useAutoComplete';
-import { useOperators } from './useOperators';
-
-export const WHERE_CLAUSE_CUSTOM_SUFFIX = '-custom';
-
-export const useOptions = (
-	key: string,
-	keys: BaseAutocompleteData[],
-	operator: string,
-	searchValue: string,
-	isMulti: boolean,
-	isValidOperator: boolean,
-	isExist: boolean,
-	results: string[],
-	result: string[],
-	isFetching: boolean,
-	whereClauseConfig?: WhereClauseConfig,
-	isInfraMonitoring?: boolean,
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-): Option[] => {
-	const [options, setOptions] = useState<Option[]>([]);
-	const operators = useOperators(key, keys);
-
-	// get matching dynamic variables to suggest
-	const dashboardDynamicVariables = useDashboardVariablesByType(
-		'DYNAMIC',
-		'values',
-	);
-
-	const variableName = dashboardDynamicVariables?.find(
-		(variable) => variable?.dynamicVariablesAttribute === key,
-	)?.name;
-
-	const variableAsValue = variableName ? `$${variableName}` : '';
-
-	const getLabel = useCallback(
-		(data: BaseAutocompleteData): Option['label'] => data?.key,
-		[],
-	);
-
-	const getOptionsFromKeys = useCallback(
-		(items: BaseAutocompleteData[]): Option[] =>
-			items?.map((item) => ({
-				label: `${getLabel(item)}`,
-				value: item.key,
-				dataType: item.dataType,
-				isIndexed: item?.isIndexed,
-				type: item?.type || '',
-			})),
-		[getLabel],
-	);
-
-	const getKeyOpValue = useCallback(
-		(items: string[]): Option[] =>
-			items?.map((item) => ({
-				label: `${key} ${operator} ${item}`,
-				value: `${key} ${operator} ${item}`,
-			})),
-		[key, operator],
-	);
-
-	const getOptionsWithValidOperator = useCallback(
-		(key: string, results: string[], searchValue: string) => {
-			const hasAllResults = results.every((value) => result.includes(value));
-
-			let newResults = results;
-			if (!isEmpty(variableAsValue)) {
-				newResults = [variableAsValue, ...newResults];
-			}
-
-			const values = getKeyOpValue(newResults);
-
-			return hasAllResults
-				? [
-						{
-							label: searchValue,
-							value: searchValue,
-						},
-					]
-				: [
-						{
-							label: searchValue,
-							value: searchValue,
-						},
-						...values,
-					];
-		},
-		[getKeyOpValue, result, variableAsValue],
-	);
-
-	const getKeyOperatorOptions = useCallback(
-		(key: string) => {
-			const keyOperator = key.split(' ');
-			const partialOperator = keyOperator?.[1];
-			const partialKey = keyOperator?.[0];
-			const filteredOperators = !isEmpty(partialOperator)
-				? operators?.filter((operator) =>
-						operator.startsWith(partialOperator?.toUpperCase()),
-					)
-				: operators;
-			const operatorsOptions = filteredOperators?.map((op) => {
-				const labelOp =
-					isInfraMonitoring && INFRA_SHORT_TO_LONG_OPERATOR_MAP[op]
-						? INFRA_SHORT_TO_LONG_OPERATOR_MAP[op]
-						: op;
-				return {
-					value: `${partialKey} ${op} `,
-					label: `${partialKey} ${labelOp} `,
-				};
-			});
-			if (whereClauseConfig) {
-				return [
-					{
-						label: `${searchValue} `,
-						value: `${searchValue}${WHERE_CLAUSE_CUSTOM_SUFFIX}`,
-					},
-					...operatorsOptions,
-				];
-			}
-			return operatorsOptions;
-		},
-		[isInfraMonitoring, operators, searchValue, whereClauseConfig],
-	);
-
-	useEffect(() => {
-		let newOptions: Option[] = [];
-
-		if (!key) {
-			newOptions = searchValue
-				? [
-						{
-							label: `${searchValue} `,
-							value: `${searchValue} `,
-						},
-						...getOptionsFromKeys(keys),
-					]
-				: getOptionsFromKeys(keys);
-		} else if (key && !operator) {
-			newOptions = getKeyOperatorOptions(key);
-		} else if (key && operator) {
-			if (isMulti) {
-				const resultsWithVariable = isEmpty(variableAsValue)
-					? results
-					: [variableAsValue, ...results];
-				newOptions = resultsWithVariable.map((item) => ({
-					label: checkCommaInValue(String(item)),
-					value: String(item),
-				}));
-			} else if (isExist) {
-				newOptions = [];
-			} else if (isValidOperator) {
-				newOptions = getOptionsWithValidOperator(key, results, searchValue);
-			}
-		}
-		if (newOptions.length > 0) {
-			setOptions(newOptions);
-		}
-		if (isFetching) {
-			setOptions([]);
-		}
-	}, [
-		whereClauseConfig,
-		getKeyOpValue,
-		getOptionsFromKeys,
-		isExist,
-		isMulti,
-		isValidOperator,
-		key,
-		keys,
-		operator,
-		operators,
-		result,
-		results,
-		searchValue,
-		getKeyOperatorOptions,
-		getOptionsWithValidOperator,
-		isFetching,
-		variableAsValue,
-	]);
-
-	return useMemo(
-		() =>
-			(
-				options.filter(
-					(option, index, self) =>
-						index ===
-							self.findIndex(
-								(o) =>
-									o.label === option.label &&
-									o.value === option.value &&
-									(o.type || '') === (option.type || '') &&
-									(o.dataType || '') === (option.dataType || ''), // keep entries with same key but different type/dataType
-							) && option.value !== '',
-				) || []
-			).map((option) => {
-				const { tagValue } = getTagToken(searchValue);
-				if (isMulti) {
-					return {
-						...option,
-						selected: tagValue
-							.filter((i) => i.trim().replace(/^\s+/, '') === option.value)
-							.includes(option.value),
-					};
-				}
-				return option;
-			}),
-		[isMulti, options, searchValue],
-	);
-};

frontend/src/hooks/queryBuilder/useSetCurrentKeyAndOperator.ts

@@ -1,32 +0,0 @@
-import { useMemo } from 'react';
-import {
-	getRemovePrefixFromKey,
-	getTagToken,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
-import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-
-type ICurrentKeyAndOperator = [string, string, string[]];
-
-export const useSetCurrentKeyAndOperator = (
-	value: string,
-	keys: BaseAutocompleteData[],
-): ICurrentKeyAndOperator => {
-	const [key, operator, result] = useMemo(() => {
-		let key = '';
-		let operator = '';
-		let result: string[] = [];
-		const { tagKey, tagOperator, tagValue } = getTagToken(value);
-		const isSuggestKey = keys?.some(
-			(el) => el?.key === getRemovePrefixFromKey(tagKey),
-		);
-		if (isSuggestKey || keys.length === 0) {
-			key = tagKey || '';
-			operator = tagOperator || '';
-			result = tagValue || [];
-		}
-
-		return [key, operator, result];
-	}, [value, keys]);
-
-	return [key, operator, result];
-};

frontend/src/hooks/queryBuilder/useTag.ts

@@ -1,18 +1,10 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
 import { INFRA_SHORT_TO_LONG_OPERATOR_MAP } from 'constants/queryBuilder';
 import {
 	getOperatorFromValue,
-	getTagToken,
-	isExistsNotExistsOperator,
 	isInNInOperator,
-} from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+} from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { unparse } from 'papaparse';
-import {
-	IBuilderQuery,
-	TagFilter,
-} from 'types/api/queryBuilder/queryBuilderData';
-
-import { WhereClauseConfig } from './useAutoComplete';
+import type { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 /**
  * Helper for formatting a TagFilter object into filter item strings
@@ -42,95 +34,3 @@ export function queryFilterTags(
 		return `${ele.key?.key} ${displayOp} ${ele.value}`;
 	});
 }
-
-type IUseTag = {
-	handleAddTag: (value: string) => void;
-	handleClearTag: (value: string) => void;
-	tags: string[];
-	updateTag: (value: string) => void;
-};
-
-/**
- * A custom React hook for handling tags.
- * @param {string} key - A string value to identify tags.
- * @param {boolean} isValidTag - A boolean value to indicate whether the tag is valid.
- * @param {function} handleSearch - A callback function to handle search.
- * @returns {IUseTag} The return object containing handlers and tags.
- */
-
-export const useTag = (
-	isValidTag: boolean,
-	handleSearch: (value: string) => void,
-	query: IBuilderQuery,
-	setSearchKey: (value: string) => void,
-	whereClauseConfig?: WhereClauseConfig,
-	isInfraMonitoring?: boolean,
-): IUseTag => {
-	const initTagsData = useMemo(
-		() =>
-			queryFilterTags(
-				query?.filters || { items: [], op: 'AND' },
-				isInfraMonitoring,
-			),
-		[query?.filters, isInfraMonitoring],
-	);
-
-	const [tags, setTags] = useState<string[]>(initTagsData);
-
-	const updateTag = (value: string): void => {
-		const newTags = tags?.filter((item: string) => item !== value);
-		setTags(newTags);
-	};
-
-	/**
-	 * Adds a new tag to the tag list.
-	 * @param {string} value - The tag value to be added.
-	 */
-
-	const handleAddTag = useCallback(
-		(value: string): void => {
-			const { tagKey } = getTagToken(value);
-			const parts = tagKey.split('-');
-			// this is done to ensure that `hello-world` also gets converted to `body CONTAINS hello-world`
-			let id = parts[parts.length - 1];
-			let key = parts.slice(0, -1).join('-');
-			if (parts.length === 1) {
-				id = '';
-				[key] = parts;
-			}
-
-			if (id === 'custom') {
-				const customValue = whereClauseConfig
-					? `${whereClauseConfig.customKey} ${whereClauseConfig.customOp} ${key}`
-					: '';
-				setTags((prevTags) =>
-					prevTags.includes(customValue) ? prevTags : [...prevTags, customValue],
-				);
-				handleSearch('');
-				setSearchKey('');
-				return;
-			}
-
-			if ((value && key && isValidTag) || isExistsNotExistsOperator(value)) {
-				setTags((prevTags) => [...prevTags, value]);
-				handleSearch('');
-				setSearchKey('');
-			}
-		},
-		[whereClauseConfig, isValidTag, handleSearch, setSearchKey],
-	);
-
-	/**
-	 * Removes a tag from the tag list.
-	 * @param {string} value - The tag value to be removed.
-	 */
-	const handleClearTag = useCallback((value: string): void => {
-		setTags((prevTags) => prevTags.filter((v) => v !== value));
-	}, []);
-
-	useEffect(() => {
-		setTags(initTagsData);
-	}, [initTagsData]);
-
-	return { handleAddTag, handleClearTag, tags, updateTag };
-};

frontend/src/hooks/trace/useTraceActions.ts

@@ -6,7 +6,7 @@ import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBui
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
-import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearch/utils';
+import { getOperatorValue } from 'container/QueryBuilder/filters/QueryBuilderSearchV2/utils';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useNotifications } from 'hooks/useNotifications';
 import { chooseAutocompleteFromCustomValue } from 'lib/newQueryBuilder/chooseAutocompleteFromCustomValue';

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.module.scss

@@ -1,75 +0,0 @@
-.container {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	width: 100%;
-	padding: 4px 12px 8px;
-	box-sizing: border-box;
-}
-
-.label {
-	flex: 0 0 auto;
-	font-size: 11px;
-	line-height: 16px;
-	color: var(--text-vanilla-400);
-	font-variant-numeric: tabular-nums;
-}
-
-.track {
-	position: relative;
-	flex: 1 1 auto;
-	height: 8px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-}
-
-.marker {
-	position: absolute;
-	top: -3px;
-	bottom: -3px;
-	width: 2px;
-	transform: translateX(-1px);
-	background: var(--text-vanilla-100);
-	border-radius: 1px;
-}
-
-.caption {
-	flex: 0 0 auto;
-	font-size: 10px;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--text-vanilla-400);
-}
-
-.keys {
-	display: flex;
-	flex: 0 0 auto;
-	gap: 12px;
-	align-items: center;
-}
-
-.key {
-	display: flex;
-	gap: 5px;
-	align-items: center;
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-}
-
-.swatch,
-.hatchSwatch {
-	width: 11px;
-	height: 11px;
-	border-radius: 2px;
-	border: 1px solid var(--l2-border);
-	box-sizing: border-box;
-}
-
-// Approximates the canvas hatch painted over null cells.
-.hatchSwatch {
-	background-image: repeating-linear-gradient(
-		45deg,
-		transparent 0 2px,
-		var(--text-vanilla-400) 2px 3px
-	);
-}

frontend/src/lib/uPlotV2/components/ColorBar/ColorBar.tsx

@@ -1,81 +0,0 @@
-import { useMemo } from 'react';
-
-import Styles from './ColorBar.module.scss';
-
-export interface ColorBarProps {
-	/** Low to high, drawn as hard-edged segments so the bar shows the same set of
-	 *  colours as the cells. */
-	ramp: string[];
-	minLabel: string;
-	maxLabel: string;
-	/** 0..1. `null` hides the marker. */
-	markerPosition?: number | null;
-	/** What the colour encodes, e.g. "count". */
-	label?: string;
-	/** Keys for the two states a ramp cannot express: a hatched data gap, and a
-	 *  genuine zero at the bottom. Without them the difference is guesswork. */
-	showStateKeys?: boolean;
-	'data-testid'?: string;
-}
-
-/** What a colour means, plus a marker for the value under the cursor. */
-export default function ColorBar({
-	ramp,
-	minLabel,
-	maxLabel,
-	markerPosition = null,
-	label,
-	showStateKeys = true,
-	'data-testid': testId = 'color-bar',
-}: ColorBarProps): JSX.Element | null {
-	const gradient = useMemo(() => {
-		if (ramp.length === 0) {
-			return undefined;
-		}
-		if (ramp.length === 1) {
-			return ramp[0];
-		}
-		const stops = ramp.flatMap((color, index) => {
-			const from = (index / ramp.length) * 100;
-			const to = ((index + 1) / ramp.length) * 100;
-			return [`${color} ${from}%`, `${color} ${to}%`];
-		});
-		return `linear-gradient(to right, ${stops.join(', ')})`;
-	}, [ramp]);
-
-	if (gradient === undefined) {
-		return null;
-	}
-
-	const clampedMarker =
-		markerPosition === null ? null : Math.min(Math.max(markerPosition, 0), 1);
-
-	return (
-		<div className={Styles.container} data-testid={testId}>
-			{label && <span className={Styles.caption}>{label}</span>}
-			<span className={Styles.label}>{minLabel}</span>
-			<div className={Styles.track} style={{ background: gradient }}>
-				{clampedMarker !== null && (
-					<span
-						className={Styles.marker}
-						style={{ left: `${clampedMarker * 100}%` }}
-						data-testid={`${testId}-marker`}
-					/>
-				)}
-			</div>
-			<span className={Styles.label}>{maxLabel}</span>
-			{showStateKeys && (
-				<div className={Styles.keys} data-testid={`${testId}-state-keys`}>
-					<span className={Styles.key}>
-						<span className={Styles.hatchSwatch} />
-						no data
-					</span>
-					<span className={Styles.key}>
-						<span className={Styles.swatch} style={{ background: ramp[0] }} />
-						count 0
-					</span>
-				</div>
-			)}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/ColorBar/__tests__/ColorBar.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import ColorBar from '../ColorBar';
-
-const RAMP = ['#111111', '#555555', '#999999', '#dddddd'];
-
-describe('ColorBar', () => {
-	it('renders the domain labels', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="1,204" />);
-
-		expect(screen.getByText('0')).toBeInTheDocument();
-		expect(screen.getByText('1,204')).toBeInTheDocument();
-	});
-
-	it('renders nothing without a ramp', () => {
-		const { container } = render(
-			<ColorBar ramp={[]} minLabel="0" maxLabel="0" />,
-		);
-
-		expect(container).toBeEmptyDOMElement();
-	});
-
-	it('hides the marker when nothing is hovered', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.queryByTestId('color-bar-marker')).not.toBeInTheDocument();
-	});
-
-	it('positions the marker at the hovered value', () => {
-		render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={0.25} />,
-		);
-
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '25%' });
-	});
-
-	it('clamps a marker outside the ramp to its ends', () => {
-		const { rerender } = render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={-2} />,
-		);
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '0%' });
-
-		rerender(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" markerPosition={4} />,
-		);
-		expect(screen.getByTestId('color-bar-marker')).toHaveStyle({ left: '100%' });
-	});
-
-	it('keys the two states a colour ramp cannot express', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.getByText('no data')).toBeInTheDocument();
-		expect(screen.getByText('count 0')).toBeInTheDocument();
-	});
-
-	it('draws the count-0 key with the bottom of the ramp', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" />);
-
-		expect(screen.getByText('count 0').firstChild).toHaveStyle({
-			background: RAMP[0],
-		});
-	});
-
-	it('hides the state keys when asked', () => {
-		render(
-			<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" showStateKeys={false} />,
-		);
-
-		expect(screen.queryByText('no data')).not.toBeInTheDocument();
-	});
-
-	it('captions what the colour encodes', () => {
-		render(<ColorBar ramp={RAMP} minLabel="0" maxLabel="10" label="count" />);
-
-		expect(screen.getByText('count')).toBeInTheDocument();
-	});
-
-	it('renders hard-edged segments so the bar matches the drawn cells', () => {
-		render(
-			<ColorBar
-				ramp={['#111111', '#dddddd']}
-				minLabel="0"
-				maxLabel="10"
-				data-testid="scale"
-			/>,
-		);
-
-		const track = screen.getByTestId('scale').querySelector('div');
-		expect(track).toHaveStyle({
-			background:
-				'linear-gradient(to right, #111111 0%, #111111 50%, #dddddd 50%, #dddddd 100%)',
-		});
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/HeatmapBucketList.tsx

@@ -1,29 +0,0 @@
-import cx from 'classnames';
-
-import { formatCount, HeatmapBucketRow } from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/** The buckets either side of the hovered one, so a mode reads as a shape rather
- *  than a single number. */
-export default function HeatmapBucketList({
-	rows,
-}: {
-	rows: HeatmapBucketRow[];
-}): JSX.Element {
-	return (
-		<div className={Styles.rows} data-testid="heatmap-tooltip-buckets">
-			{rows.map((row) => (
-				<div
-					key={row.label}
-					className={cx(Styles.row, { [Styles.rowHovered]: row.isHovered })}
-					data-hovered={row.isHovered}
-					data-testid="heatmap-tooltip-bucket-row"
-				>
-					<span className={Styles.rowLabel}>{row.label}</span>
-					<span className={Styles.rowValue}>{formatCount(row.count)}</span>
-				</div>
-			))}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/HeatmapContributionList.tsx

@@ -1,39 +0,0 @@
-import {
-	formatCount,
-	formatPercent,
-	HeatmapContributionRow,
-} from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/** Only shown when the cell sums more than one group. */
-export default function HeatmapContributionList({
-	rows,
-	groupByLabel,
-}: {
-	rows: HeatmapContributionRow[];
-	/** The `groupBy` keys these rows are by. */
-	groupByLabel: string;
-}): JSX.Element {
-	return (
-		<div className={Styles.rows} data-testid="heatmap-tooltip-contribution">
-			{groupByLabel && <span className={Styles.section}>{groupByLabel}</span>}
-			{rows.map((row) => (
-				<div
-					key={row.label}
-					className={Styles.row}
-					data-testid="heatmap-tooltip-contribution-row"
-				>
-					<span
-						className={Styles.marker}
-						style={{ background: row.color }}
-						data-is-legend-marker={true}
-					/>
-					<span className={Styles.rowLabel}>{row.label}</span>
-					<span className={Styles.rowValue}>{formatCount(row.count)}</span>
-					<span className={Styles.rowPercent}>{formatPercent(row.percent)}</span>
-				</div>
-			))}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/HeatmapTooltip.module.scss

@@ -1,151 +0,0 @@
-// Surface matches the shared Tooltip exactly — same tokens, same radius, no
-// shadow (the plugin's portal wrapper is transparent and paints nothing).
-//
-// Padding lives on the sections rather than here, also matching the shared
-// tooltip: TooltipFooter draws its own dashed top border, background and bottom
-// corner radius, so it has to reach the container edges.
-.container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 220px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-// Separates the cell identity from whichever question the second block answers.
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.identity {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-2);
-	padding: var(--spacing-4) var(--spacing-4) var(--spacing-3);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-6);
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-	font-variant-numeric: tabular-nums;
-}
-
-.filter {
-	display: flex;
-	align-items: center;
-	gap: 5px;
-	min-width: 0;
-}
-
-// Hollow ring, matching the legend's unselected marker — this names the filter the
-// grid is under, it is not a colour key.
-.filterMarker {
-	width: 9px;
-	height: 9px;
-	border-radius: 50%;
-	border: 2px solid currentColor;
-	flex-shrink: 0;
-}
-
-.filterLabel {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.title {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--spacing-8);
-}
-
-.titleBucket {
-	font-size: 13px;
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-}
-
-.titleCount {
-	font-size: 13px;
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-	font-variant-numeric: tabular-nums;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.section {
-	font-size: 10px;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--text-vanilla-400);
-	padding: 0 var(--spacing-2) var(--spacing-1);
-}
-
-.row {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-	padding: var(--spacing-1) var(--spacing-2);
-	border-radius: 3px;
-	font-size: 12px;
-	color: var(--text-vanilla-400);
-	font-variant-numeric: tabular-nums;
-}
-
-// The hovered bucket is the one the cursor is on; lift it out of the neighbours.
-.rowHovered {
-	background: var(--l3-background);
-	color: var(--text-vanilla-100);
-	font-weight: 500;
-}
-
-.rowLabel {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	text-align: right;
-}
-
-.rowPercent {
-	flex: 0 0 auto;
-	min-width: 40px;
-	text-align: right;
-	color: var(--text-vanilla-400);
-	opacity: 0.75;
-}
-
-.marker {
-	width: 8px;
-	height: 8px;
-	border-radius: 50%;
-	flex-shrink: 0;
-}

frontend/src/lib/uPlotV2/components/Tooltip/HeatmapTooltip.tsx

@@ -1,181 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import {
-	resolveColumnIndex,
-	resolveRowIndex,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import { useTimezone } from 'providers/Timezone';
-
-import { HeatmapTooltipProps } from '../types';
-import HeatmapBucketList from './HeatmapBucketList';
-import HeatmapContributionList from './HeatmapContributionList';
-import {
-	buildBucketRows,
-	buildContributionRows,
-	formatBucketLabel,
-	formatColumnRange,
-	formatCount,
-	formatGroupFilter,
-	HeatmapTooltipBody,
-	resolveGroupByLabel,
-	resolveTooltipBody,
-} from './heatmapTooltipContent';
-
-import Styles from './HeatmapTooltip.module.scss';
-
-/**
- * The cell identity is the same in every state; the second block answers whichever
- * question the panel state leaves open (see `resolveTooltipBody`). Purpose-built
- * rather than composed from the shared `Tooltip`, which renders a flat list of
- * series values — none of these states is that shape.
- *
- * The cell comes from the live cursor, not a prop: uPlot's `cursor.idx` snaps to
- * the nearest timestamp, so half of every column would report its neighbour.
- */
-export default function HeatmapTooltip({
-	uPlotInstance,
-	yAxis,
-	step,
-	series,
-	visibleGroups,
-	groupColor,
-	yAxisUnit,
-	decimalPrecision,
-	timezone,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: HeatmapTooltipProps): JSX.Element | null {
-	const { timezone: userTimezone } = useTimezone();
-	const resolvedTimezone = timezone?.value ?? userTimezone.value;
-
-	// Read outside the memo: uPlot mutates the same instance on every move, so
-	// keying off the instance alone would freeze the cell.
-	const { left = -10, top = -10 } = uPlotInstance.cursor;
-
-	const cell = useMemo(() => {
-		if (left < 0 || top < 0) {
-			return null;
-		}
-		const timestamps = uPlotInstance.data[0] as ArrayLike<number>;
-		const column = resolveColumnIndex(
-			timestamps,
-			uPlotInstance.posToVal(left, 'x'),
-			step,
-		);
-		const row = resolveRowIndex(yAxis.edges, uPlotInstance.posToVal(top, 'y'));
-		if (column === null || row === null) {
-			return null;
-		}
-		return {
-			row,
-			column,
-			timestamp: timestamps[column],
-			count:
-				(uPlotInstance.data[row + 1] as Array<number | null> | undefined)?.[
-					column
-				] ?? null,
-		};
-	}, [left, top, uPlotInstance, yAxis, step]);
-
-	// The cell sums the enabled groups, so those are what a breakdown must cover.
-	const visible = useMemo(
-		() => series.filter((entry) => visibleGroups.includes(entry.label)),
-		[series, visibleGroups],
-	);
-	const body = resolveTooltipBody(visible.length);
-
-	const bucketRows = useMemo(() => {
-		if (!cell || body !== HeatmapTooltipBody.Buckets) {
-			return [];
-		}
-		return buildBucketRows({
-			counts: uPlotInstance.data.slice(1) as Array<
-				ArrayLike<number | null> | undefined
-			>,
-			yAxis,
-			row: cell.row,
-			column: cell.column,
-			yAxisUnit,
-			decimalPrecision,
-		});
-	}, [cell, body, uPlotInstance, yAxis, yAxisUnit, decimalPrecision]);
-
-	const contributionRows = useMemo(() => {
-		if (!cell || body !== HeatmapTooltipBody.Contribution) {
-			return [];
-		}
-		return buildContributionRows({
-			series: visible,
-			timestamp: cell.timestamp,
-			row: cell.row,
-			color: groupColor,
-		});
-	}, [cell, body, visible, groupColor]);
-
-	if (!cell) {
-		return null;
-	}
-
-	// A single enabled group out of several means the legend has isolated it.
-	const isolated =
-		series.length > 1 && visible.length === 1 ? visible[0] : undefined;
-	const filterLabel = formatGroupFilter(isolated);
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="heatmap-tooltip"
-		>
-			<div className={Styles.identity}>
-				<div className={Styles.header}>
-					<span data-testid="heatmap-tooltip-range">
-						{formatColumnRange({
-							start: cell.timestamp,
-							step,
-							timezone: resolvedTimezone,
-						})}
-					</span>
-					{filterLabel && (
-						<span
-							className={Styles.filter}
-							style={{ color: groupColor }}
-							data-testid="heatmap-tooltip-filter"
-						>
-							<span className={Styles.filterMarker} />
-							<span className={Styles.filterLabel}>{filterLabel}</span>
-						</span>
-					)}
-				</div>
-
-				<div className={Styles.title}>
-					<span className={Styles.titleBucket} data-testid="heatmap-tooltip-bucket">
-						{formatBucketLabel({
-							yAxis,
-							row: cell.row,
-							yAxisUnit,
-							decimalPrecision,
-						})}
-					</span>
-					<span className={Styles.titleCount} data-testid="heatmap-tooltip-count">
-						{formatCount(cell.count)}
-					</span>
-				</div>
-			</div>
-
-			<span className={Styles.divider} data-testid="heatmap-tooltip-divider" />
-
-			{body === HeatmapTooltipBody.Contribution ? (
-				<HeatmapContributionList
-					rows={contributionRows}
-					groupByLabel={resolveGroupByLabel(series)}
-				/>
-			) : (
-				<HeatmapBucketList rows={bucketRows} />
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/HeatmapTooltip.test.tsx

@@ -1,289 +0,0 @@
-import { resolveHeatmapYAxis } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	HeatmapAxisScale,
-	HeatmapSeries,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import { render, RenderResult, screen } from 'tests/test-utils';
-import type uPlot from 'uplot';
-
-import HeatmapTooltip from '../HeatmapTooltip';
-
-const BOUNDS = [100, 500, 1000, 2500];
-const Y_AXIS = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-const TIMESTAMPS = [1_700_000_000, 1_700_000_300];
-const STEP = 300;
-const PLOT_SIZE = 500;
-const ROW_COUNT = BOUNDS.length + 1;
-
-/** Row 2 is the 500ms–1s bucket the design mock hovers. */
-const HOVERED_ROW = 2;
-
-function seriesFor(
-	group: string,
-	countsAtHoveredRow: [number, number],
-): HeatmapSeries {
-	return {
-		label: `service.name=${group}`,
-		labels: [{ key: 'service.name', value: group }],
-		points: TIMESTAMPS.map((timestamp, column) => ({
-			timestamp,
-			counts: Array.from({ length: ROW_COUNT }, (_, row) =>
-				row === HOVERED_ROW ? countsAtHoveredRow[column] : row * 10,
-			),
-		})),
-	};
-}
-
-const GROUPED: HeatmapSeries[] = [
-	seriesFor('checkout', [355, 300]),
-	seriesFor('frontend', [86, 80]),
-	seriesFor('cart', [14, 10]),
-	seriesFor('payments', [0, 0]),
-];
-
-/** Grid counts, matching what the renderer would have been handed. */
-function gridData(rowTotals: number[]): uPlot.AlignedData {
-	return [
-		TIMESTAMPS,
-		...Array.from({ length: ROW_COUNT }, (_, row) => [
-			rowTotals[row] ?? row * 40,
-			rowTotals[row] ?? row * 40,
-		]),
-	] as unknown as uPlot.AlignedData;
-}
-
-// Totals chosen to match the mock: 2 / 92 / 455 / 269 / 10 bottom-up.
-const ROW_TOTALS = [10, 269, 455, 92, 2];
-
-function createFakePlot(): uPlot {
-	const xSpan = TIMESTAMPS[TIMESTAMPS.length - 1] + STEP - TIMESTAMPS[0];
-	const ySpan = Y_AXIS.max - Y_AXIS.min;
-	// Aim the cursor at the middle of the hovered row, first column.
-	const rowMid = (Y_AXIS.edges[HOVERED_ROW] + Y_AXIS.edges[HOVERED_ROW + 1]) / 2;
-	const top = PLOT_SIZE * (1 - (rowMid - Y_AXIS.min) / ySpan);
-
-	return {
-		data: gridData(ROW_TOTALS),
-		cursor: { left: PLOT_SIZE * 0.25, top },
-		posToVal: (pos: number, scaleKey: string): number =>
-			scaleKey === 'x'
-				? TIMESTAMPS[0] + (pos / PLOT_SIZE) * xSpan
-				: Y_AXIS.min + ((PLOT_SIZE - pos) / PLOT_SIZE) * ySpan,
-	} as unknown as uPlot;
-}
-
-function renderTooltip(
-	overrides: Partial<React.ComponentProps<typeof HeatmapTooltip>> = {},
-): RenderResult {
-	return render(
-		<HeatmapTooltip
-			id="panel-1"
-			uPlotInstance={createFakePlot()}
-			dataIndexes={[]}
-			seriesIndex={null}
-			isPinned={false}
-			dismiss={jest.fn()}
-			viaSync={false}
-			yAxis={Y_AXIS}
-			step={STEP}
-			series={GROUPED}
-			visibleGroups={GROUPED.map((entry) => entry.label)}
-			groupColor="#fcfdbf"
-			yAxisUnit="ms"
-			{...overrides}
-		/>,
-	);
-}
-
-describe('HeatmapTooltip — cell identity', () => {
-	it('heads with the time span the column covers, not a single instant', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-range').textContent).toMatch(
-			/^\d{2}:\d{2} → \d{2}:\d{2}$/,
-		);
-	});
-
-	it('names the hovered bucket and its count', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-bucket')).toHaveTextContent(
-			'500 ms – 1 s',
-		);
-		expect(screen.getByTestId('heatmap-tooltip-count')).toHaveTextContent('455');
-	});
-
-	it('marks the surface as pinned so the border picks up the ring', () => {
-		renderTooltip({ isPinned: true });
-
-		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
-			'data-pinned',
-			'true',
-		);
-	});
-
-	it('is unpinned by default', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip')).toHaveAttribute(
-			'data-pinned',
-			'false',
-		);
-	});
-
-	it('separates the cell identity from the block below it', () => {
-		renderTooltip();
-
-		expect(screen.getByTestId('heatmap-tooltip-divider')).toBeInTheDocument();
-	});
-
-	it('renders a footer when the panel supplies one', () => {
-		renderTooltip({
-			renderTooltipFooter: ({ isPinned }): JSX.Element => (
-				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
-			),
-		});
-
-		expect(screen.getByTestId('footer')).toHaveTextContent('press P');
-	});
-
-	it('tells the footer when the tooltip is pinned', () => {
-		renderTooltip({
-			isPinned: true,
-			renderTooltipFooter: ({ isPinned }): JSX.Element => (
-				<div data-testid="footer">{isPinned ? 'pinned' : 'press P'}</div>
-			),
-		});
-
-		expect(screen.getByTestId('footer')).toHaveTextContent('pinned');
-	});
-
-	it('renders nothing when the cursor is off the plot', () => {
-		const plot = createFakePlot();
-		(plot as { cursor: unknown }).cursor = { left: -10, top: -10 };
-
-		const { container } = renderTooltip({ uPlotInstance: plot });
-
-		expect(container).toBeEmptyDOMElement();
-	});
-});
-
-describe('HeatmapTooltip — grouped, nothing selected', () => {
-	it('breaks the cell down by group instead of showing neighbours', () => {
-		renderTooltip();
-
-		expect(
-			screen.getByTestId('heatmap-tooltip-contribution'),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('heatmap-tooltip-buckets'),
-		).not.toBeInTheDocument();
-	});
-
-	it('heads the breakdown with the groupBy key', () => {
-		renderTooltip();
-
-		expect(screen.getByText('service.name')).toBeInTheDocument();
-	});
-
-	it('names each row by value alone and orders by contribution', () => {
-		renderTooltip();
-
-		const rows = screen
-			.getAllByTestId('heatmap-tooltip-contribution-row')
-			.map((row) => row.textContent);
-
-		expect(rows[0]).toContain('checkout');
-		expect(rows[0]).toContain('355');
-		expect(rows[1]).toContain('frontend');
-		expect(rows[2]).toContain('cart');
-	});
-
-	it('shows each group"s share of the cell', () => {
-		renderTooltip();
-
-		const rows = screen.getAllByTestId('heatmap-tooltip-contribution-row');
-		// 355 / 455 = 78%, 86 / 455 = 19%, 14 / 455 = 3.1%
-		expect(rows[0]).toHaveTextContent('78%');
-		expect(rows[1]).toHaveTextContent('19%');
-		expect(rows[2]).toHaveTextContent('3.1%');
-	});
-
-	it('still lists a group that contributed nothing', () => {
-		renderTooltip();
-
-		const rows = screen.getAllByTestId('heatmap-tooltip-contribution-row');
-		expect(rows).toHaveLength(GROUPED.length);
-		expect(rows[3]).toHaveTextContent('payments');
-		expect(rows[3]).toHaveTextContent('0.0%');
-	});
-
-	it('does not name a filter when every group is enabled', () => {
-		renderTooltip();
-
-		expect(
-			screen.queryByTestId('heatmap-tooltip-filter'),
-		).not.toBeInTheDocument();
-	});
-});
-
-describe('HeatmapTooltip — grouped, one enabled', () => {
-	const selected = { visibleGroups: ['service.name=checkout'] };
-
-	it('returns to neighbouring buckets, since contribution is already answered', () => {
-		renderTooltip(selected);
-
-		expect(screen.getByTestId('heatmap-tooltip-buckets')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('heatmap-tooltip-contribution'),
-		).not.toBeInTheDocument();
-	});
-
-	it('names the active filter', () => {
-		renderTooltip(selected);
-
-		expect(screen.getByTestId('heatmap-tooltip-filter')).toHaveTextContent(
-			'service.name = checkout',
-		);
-	});
-});
-
-describe('HeatmapTooltip — no grouping', () => {
-	const ungrouped = {
-		series: [{ label: '', points: GROUPED[0].points }],
-		visibleGroups: [''],
-	};
-
-	it('shows neighbouring buckets, highest first', () => {
-		renderTooltip(ungrouped);
-
-		const rows = screen
-			.getAllByTestId('heatmap-tooltip-bucket-row')
-			.map((row) => row.textContent);
-
-		// Two buckets either side of 500ms – 1s, reading down the y axis.
-		expect(rows).toHaveLength(5);
-		expect(rows[0]).toContain('> 2.5 s');
-		expect(rows[2]).toContain('500 ms – 1 s');
-		expect(rows[4]).toContain('≤ 100 ms');
-	});
-
-	it('marks the hovered bucket among its neighbours', () => {
-		renderTooltip(ungrouped);
-
-		const hovered = screen
-			.getAllByTestId('heatmap-tooltip-bucket-row')
-			.filter((row) => row.dataset.hovered === 'true');
-
-		expect(hovered).toHaveLength(1);
-		expect(hovered[0]).toHaveTextContent('500 ms – 1 s');
-	});
-
-	it('never breaks down a single series', () => {
-		renderTooltip(ungrouped);
-
-		expect(
-			screen.queryByTestId('heatmap-tooltip-contribution'),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/lib/uPlotV2/components/Tooltip/heatmapTooltipContent.ts

@@ -1,199 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import dayjs from 'dayjs';
-import { formatRowLabel } from 'lib/uPlotV2/plugins/HeatmapPlugin/geometry';
-import {
-	HeatmapSeries,
-	HeatmapYAxis,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-
-/** Rows shown either side of the hovered one. */
-const NEIGHBOUR_SPAN = 2;
-/** Below this share a percentage needs a decimal to stay informative. */
-const PERCENT_DECIMAL_THRESHOLD = 10;
-/** Below this, the header needs seconds to distinguish columns. */
-const SUB_MINUTE_STEP = 60;
-
-export const NO_DATA_LABEL = 'no data';
-
-/**
- * Which question the second block answers. A cell summed across several groups begs
- * "which group?"; a cell that is already one series begs "how does this bucket
- * compare with its neighbours?".
- */
-export enum HeatmapTooltipBody {
-	Buckets = 'buckets',
-	Contribution = 'contribution',
-}
-
-export interface HeatmapBucketRow {
-	label: string;
-	count: number | null;
-	isHovered: boolean;
-}
-
-export interface HeatmapContributionRow {
-	label: string;
-	color: string;
-	count: number;
-	/** Share of the cell's total, 0..100. */
-	percent: number;
-}
-
-export function resolveTooltipBody(visibleCount: number): HeatmapTooltipBody {
-	// One enabled group contributes the whole cell, so there is nothing to break
-	// down — whether the query is ungrouped or the legend has isolated a group.
-	return visibleCount > 1
-		? HeatmapTooltipBody.Contribution
-		: HeatmapTooltipBody.Buckets;
-}
-
-/** A cell is an interval, so a single instant would misreport which observations
- *  it contains. The date is left to the x axis directly below. */
-export function formatColumnRange({
-	start,
-	step,
-	timezone,
-}: {
-	/** Column start, in seconds. */
-	start: number;
-	/** Column width, in seconds. */
-	step: number;
-	timezone: string;
-}): string {
-	const format =
-		step < SUB_MINUTE_STEP
-			? DATE_TIME_FORMATS.TIME_SECONDS
-			: DATE_TIME_FORMATS.TIME;
-	const from = dayjs(start * 1000).tz(timezone);
-	const to = dayjs((start + step) * 1000).tz(timezone);
-	return `${from.format(format)} → ${to.format(format)}`;
-}
-
-/** Formatted with the panel's unit. */
-export function formatBucketLabel({
-	yAxis,
-	row,
-	yAxisUnit,
-	decimalPrecision,
-}: {
-	yAxis: HeatmapYAxis;
-	row: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}): string {
-	const bucket = yAxis.rows[row];
-	if (!bucket) {
-		return '';
-	}
-	return formatRowLabel(bucket, (value) =>
-		getToolTipValue(String(value), yAxisUnit, decimalPrecision),
-	);
-}
-
-export function formatCount(count: number | null): string {
-	return count === null ? NO_DATA_LABEL : count.toLocaleString();
-}
-
-export function formatPercent(percent: number): string {
-	return percent >= PERCENT_DECIMAL_THRESHOLD
-		? `${Math.round(percent)}%`
-		: `${percent.toFixed(1)}%`;
-}
-
-/** Names the group the grid is currently isolated to. */
-export function formatGroupFilter(series: HeatmapSeries | undefined): string {
-	if (!series) {
-		return '';
-	}
-	if (!series.labels?.length) {
-		return series.label;
-	}
-	return series.labels
-		.map((label) => `${label.key} = ${label.value}`)
-		.join(', ');
-}
-
-/** The `groupBy` keys the breakdown is by. */
-export function resolveGroupByLabel(series: HeatmapSeries[]): string {
-	const keys = series[0]?.labels?.map((label) => label.key) ?? [];
-	return keys.join(', ');
-}
-
-function formatSeriesValue(series: HeatmapSeries): string {
-	if (!series.labels?.length) {
-		return series.label;
-	}
-	return series.labels.map((label) => label.value).join(', ');
-}
-
-/** Highest first, so the list reads in the same direction as the y axis. */
-export function buildBucketRows({
-	counts,
-	yAxis,
-	row,
-	column,
-	yAxisUnit,
-	decimalPrecision,
-}: {
-	/** Row-major, as the renderer draws them. */
-	counts: Array<ArrayLike<number | null> | undefined>;
-	yAxis: HeatmapYAxis;
-	row: number;
-	column: number;
-	yAxisUnit?: string;
-	decimalPrecision?: PrecisionOption;
-}): HeatmapBucketRow[] {
-	const formatBucketValue = (value: number): string =>
-		getToolTipValue(String(value), yAxisUnit, decimalPrecision);
-
-	const rows: HeatmapBucketRow[] = [];
-	for (let offset = NEIGHBOUR_SPAN; offset >= -NEIGHBOUR_SPAN; offset -= 1) {
-		const index = row + offset;
-		const bucket = yAxis.rows[index];
-		if (!bucket) {
-			continue;
-		}
-		rows.push({
-			label: formatRowLabel(bucket, formatBucketValue),
-			count: counts[index]?.[column] ?? null,
-			isHovered: offset === 0,
-		});
-	}
-	return rows;
-}
-
-/**
- * Largest first. Groups that contributed nothing are still listed — that is an
- * answer, and dropping the row makes the list look truncated.
- */
-export function buildContributionRows({
-	series,
-	timestamp,
-	row,
-	color,
-}: {
-	/** Only the groups the legend has enabled — they are what the cell sums. */
-	series: HeatmapSeries[];
-	/** Column start, in seconds. */
-	timestamp: number;
-	row: number;
-	color: string;
-}): HeatmapContributionRow[] {
-	const counts = series.map((entry) => {
-		const point = entry.points.find((item) => item.timestamp === timestamp);
-		// Absent or null contributed nothing to the sum, which is what this breaks down.
-		return point?.counts[row] ?? 0;
-	});
-	const total = counts.reduce((sum, count) => sum + count, 0);
-
-	return series
-		.map((entry, index) => ({
-			label: formatSeriesValue(entry),
-			color,
-			count: counts[index],
-			percent: total > 0 ? (counts[index] / total) * 100 : 0,
-		}))
-		.sort((a, b) => b.count - a.count);
-}

frontend/src/lib/uPlotV2/components/types.ts

@@ -5,7 +5,6 @@ import uPlot from 'uplot';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
-import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -99,21 +98,6 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 export interface HistogramTooltipProps
 	extends BaseTooltipProps, TooltipRenderArgs {}
 
-/** Not part of `TooltipProps`: it renders its own container, since none of its
- *  states is the flat series list the shared `Tooltip` draws. */
-export interface HeatmapTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	yAxis: HeatmapYAxis;
-	/** Column width in seconds. */
-	step: number;
-	/** Needed to break a summed cell down by contribution. */
-	series: HeatmapSeries[];
-	/** Groups the legend has enabled; the cell sums exactly these. */
-	visibleGroups: string[];
-	/** Same colour the legend and the densest cells use. */
-	groupColor: string;
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

frontend/src/lib/uPlotV2/config/UPlotAxisBuilder.ts

@@ -157,7 +157,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			show = true,
 			side = 2, // bottom by default
 			space,
-			splits,
 			gap = 5, // default gap is 5
 		} = this.props;
 
@@ -189,9 +188,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (values) {
 			axisConfig.values = values;
 		}
-		if (splits) {
-			axisConfig.splits = splits;
-		}
 		if (gap !== undefined) {
 			axisConfig.gap = gap;
 		}

frontend/src/lib/uPlotV2/config/UPlotScaleBuilder.ts

@@ -46,13 +46,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 
 		// Special handling for time scales (X axis)
 		if (time) {
-			// An explicit range wins: the alignment below trims the tail of the window
-			// to whole minutes, which is right for point-based series but drops the
-			// final column of any chart whose marks span an interval.
-			if (range) {
-				return { [scaleKey]: { time: true, auto: false, range } };
-			}
-
 			let minTime = this.min ?? 0;
 			let maxTime = this.max ?? 0;
 
@@ -63,17 +56,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 				maxTime = fallbackMax;
 			}
 
-			// Align max time to "endTime - 1 minute", rounded down to minute precision
-			// This matches legacy getXAxisScale behavior and avoids empty space at the right edge
-			const oneMinuteAgoTimestamp = (maxTime - 60) * 1000;
-			const currentDate = new Date(oneMinuteAgoTimestamp);
-
-			currentDate.setSeconds(0);
-			currentDate.setMilliseconds(0);
-
-			const unixTimestampSeconds = Math.floor(currentDate.getTime() / 1000);
-			maxTime = unixTimestampSeconds;
-
 			return {
 				[scaleKey]: {
 					time: true,

frontend/src/lib/uPlotV2/config/__tests__/UPlotScaleBuilder.test.ts

@@ -44,7 +44,7 @@ describe('UPlotScaleBuilder', () => {
 		expect(adjustSpy).toHaveBeenCalledWith(null, null, undefined, undefined);
 	});
 
-	it('handles time scales using explicit min/max and rounds max down to the previous minute', () => {
+	it('handles time scales using explicit min/max', () => {
 		const min = 1_700_000_000; // seconds
 		const max = 1_700_000_600; // seconds
 
@@ -62,21 +62,25 @@ describe('UPlotScaleBuilder', () => {
 
 		expect(xScale.time).toBe(true);
 		expect(xScale.auto).toBe(false);
-		expect(Array.isArray(xScale.range)).toBe(true);
+		expect(xScale.range).toStrictEqual([min, max]);
+	});
 
-		const [resolvedMin, resolvedMax] = xScale.range as [number, number];
+	it('keeps short time windows intact', () => {
+		const min = 1_786_527_160;
+		const max = 1_786_527_183;
 
-		// min is passed through
-		expect(resolvedMin).toBe(min);
+		const builder = new UPlotScaleBuilder(
+			createScaleProps({
+				scaleKey: 'x',
+				time: true,
+				min,
+				max,
+			}),
+		);
 
-		// max is coerced to "endTime - 1 minute" and rounded down to minute precision
-		const oneMinuteAgoTimestamp = (max - 60) * 1000;
-		const currentDate = new Date(oneMinuteAgoTimestamp);
-		currentDate.setSeconds(0);
-		currentDate.setMilliseconds(0);
-		const expectedMax = Math.floor(currentDate.getTime() / 1000);
+		const config = builder.getConfig();
 
-		expect(resolvedMax).toBe(expectedMax);
+		expect(config.x.range).toStrictEqual([min, max]);
 	});
 
 	it('falls back to getFallbackMinMaxTimeStamp when time scale has no min/max', () => {
@@ -99,9 +103,7 @@ describe('UPlotScaleBuilder', () => {
 
 		expect(getFallbackMinMaxSpy).toHaveBeenCalled();
 		expect(resolvedMin).toBe(100);
-		// max is aligned to "fallbackMax - 60 seconds" minute boundary
-		expect(resolvedMax).toBeLessThanOrEqual(200);
-		expect(resolvedMax).toBeGreaterThan(100);
+		expect(resolvedMax).toBe(200);
 	});
 
 	it('pipes limits through soft-limit adjustment and log-scale normalization before range config', () => {

frontend/src/lib/uPlotV2/config/types.ts

@@ -63,7 +63,6 @@ export interface AxisProps {
 		size?: number;
 	};
 	values?: uPlot.Axis.Values;
-	splits?: uPlot.Axis.Splits;
 	gap?: number;
 	size?: uPlot.Axis.Size;
 	formatValue?: (v: number) => string;

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/colorScale.test.ts

@@ -1,207 +0,0 @@
-import {
-	clampColorSteps,
-	createHeatmapColorResolver,
-	DEFAULT_COLOR_STEPS,
-	DEFAULT_HEATMAP_COLORS,
-	getMaxCount,
-	MAX_COLOR_STEPS,
-	MIN_OPACITY_ALPHA,
-	normalizeCount,
-	resolveCountDomain,
-} from '../colorScale';
-import { HeatmapColorMode, HeatmapColorScale } from '../types';
-
-const SERIES_COLOR = '#4e74f8';
-
-describe('getMaxCount', () => {
-	it('ignores null cells', () => {
-		expect(
-			getMaxCount([
-				[1, null, 9],
-				[null, 4],
-			]),
-		).toBe(9);
-	});
-
-	it('returns 0 for an empty or all-null grid', () => {
-		expect(getMaxCount([])).toBe(0);
-		expect(getMaxCount([[null, null]])).toBe(0);
-	});
-
-	it('ignores non-finite counts', () => {
-		expect(getMaxCount([[3, Number.POSITIVE_INFINITY, Number.NaN]])).toBe(3);
-	});
-});
-
-describe('resolveCountDomain', () => {
-	it('floors at 0 on auto so a zero count sits at the bottom of the scale', () => {
-		expect(
-			resolveCountDomain({ minCount: null, maxCount: null }, [[5, 20]]),
-		).toStrictEqual({
-			min: 0,
-			max: 20,
-		});
-	});
-
-	it('honours explicit clamps', () => {
-		expect(
-			resolveCountDomain({ minCount: 10, maxCount: 100 }, [[5, 20]]),
-		).toStrictEqual({
-			min: 10,
-			max: 100,
-		});
-	});
-
-	it('collapses a max at or below min', () => {
-		expect(
-			resolveCountDomain({ minCount: 50, maxCount: 10 }, [[5]]),
-		).toStrictEqual({
-			min: 50,
-			max: 50,
-		});
-	});
-});
-
-describe('normalizeCount', () => {
-	const domain = { min: 0, max: 1000 };
-
-	it('spreads low counts on a log scale where a linear one washes them out', () => {
-		const log = (count: number): number =>
-			normalizeCount({ count, domain, scale: HeatmapColorScale.Log });
-
-		expect(log(10)).toBeCloseTo(1 / 3, 5);
-		expect(log(20)).toBeCloseTo(Math.log10(20) / 3, 5);
-		expect(
-			normalizeCount({ count: 10, domain, scale: HeatmapColorScale.Linear }),
-		).toBeCloseTo(0.01, 5);
-	});
-
-	it('puts 0 and 1 at the bottom of a log scale', () => {
-		expect(
-			normalizeCount({ count: 0, domain, scale: HeatmapColorScale.Log }),
-		).toBe(0);
-		expect(
-			normalizeCount({ count: 1, domain, scale: HeatmapColorScale.Log }),
-		).toBe(0);
-	});
-
-	it('reaches the top of the scale at max on every scale', () => {
-		[
-			HeatmapColorScale.Log,
-			HeatmapColorScale.Sqrt,
-			HeatmapColorScale.Linear,
-		].forEach((scale) => {
-			expect(normalizeCount({ count: 1000, domain, scale })).toBeCloseTo(1, 6);
-		});
-	});
-
-	it('takes the square root of the linear position on a sqrt scale', () => {
-		expect(
-			normalizeCount({
-				count: 250,
-				domain: { min: 0, max: 1000 },
-				scale: HeatmapColorScale.Sqrt,
-			}),
-		).toBeCloseTo(0.5, 6);
-	});
-
-	it('clamps counts outside the domain', () => {
-		const scale = HeatmapColorScale.Linear;
-		expect(normalizeCount({ count: -5, domain, scale })).toBe(0);
-		expect(normalizeCount({ count: 5000, domain, scale })).toBe(1);
-	});
-
-	it('returns the bottom of the scale when min equals max', () => {
-		expect(
-			normalizeCount({
-				count: 7,
-				domain: { min: 7, max: 7 },
-				scale: HeatmapColorScale.Log,
-			}),
-		).toBe(0);
-	});
-
-	it('handles a log domain whose min and max share a decade floor', () => {
-		expect(
-			normalizeCount({
-				count: 1,
-				domain: { min: 0, max: 1 },
-				scale: HeatmapColorScale.Log,
-			}),
-		).toBe(0);
-	});
-});
-
-describe('clampColorSteps', () => {
-	it('clamps to the supported range', () => {
-		expect(clampColorSteps(1)).toBe(2);
-		expect(clampColorSteps(500)).toBe(MAX_COLOR_STEPS);
-		expect(clampColorSteps(32)).toBe(32);
-	});
-
-	it('falls back to the default for a non-finite value', () => {
-		expect(clampColorSteps(Number.NaN)).toBe(DEFAULT_COLOR_STEPS);
-	});
-});
-
-describe('createHeatmapColorResolver', () => {
-	const build = (
-		overrides: Partial<typeof DEFAULT_HEATMAP_COLORS> = {},
-		isDarkMode = true,
-	): ReturnType<typeof createHeatmapColorResolver> =>
-		createHeatmapColorResolver({
-			options: { ...DEFAULT_HEATMAP_COLORS, ...overrides },
-			domain: { min: 0, max: 1000 },
-			isDarkMode,
-			seriesColor: SERIES_COLOR,
-		});
-
-	it('leaves null cells uncoloured so they can be hatched', () => {
-		const resolver = build();
-
-		expect(resolver.colorFor(null)).toBeNull();
-		expect(resolver.positionOf(null)).toBeNull();
-	});
-
-	it('gives a zero count the bottom colour, not the null treatment', () => {
-		const resolver = build();
-
-		expect(resolver.colorFor(0)).toBe(resolver.ramp[0]);
-	});
-
-	it('emits one ramp entry per step', () => {
-		expect(build({ steps: 8 }).ramp).toHaveLength(8);
-	});
-
-	it('maps the max count to the top of the ramp', () => {
-		const resolver = build({ steps: 8 });
-
-		expect(resolver.colorFor(1000)).toBe(resolver.ramp[7]);
-	});
-
-	it('picks different stops per theme so low counts stay near the surface', () => {
-		expect(build({}, true).ramp[0]).not.toBe(build({}, false).ramp[0]);
-	});
-
-	it('varies alpha in opacity mode, never below the visibility floor', () => {
-		const resolver = build({ mode: HeatmapColorMode.Opacity, steps: 4 });
-
-		expect(resolver.ramp[0]).toBe(`rgba(78, 116, 248, ${MIN_OPACITY_ALPHA})`);
-		// `color` drops the alpha channel from the string once it reaches 1.
-		expect(resolver.ramp[3]).toBe('rgb(78, 116, 248)');
-	});
-
-	it('prefers an explicit opacity fill over the series colour', () => {
-		const resolver = build({
-			mode: HeatmapColorMode.Opacity,
-			fill: '#e5484d',
-			steps: 2,
-		});
-
-		expect(resolver.ramp[1]).toBe('rgb(229, 72, 77)');
-	});
-
-	it('reports the domain it applied', () => {
-		expect(build().domain).toStrictEqual({ min: 0, max: 1000 });
-	});
-});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/geometry.test.ts

@@ -1,356 +0,0 @@
-import {
-	canUseLogAxis,
-	decimateAxisSplits,
-	formatRowLabel,
-	resolveColumnIndex,
-	resolveHeatmapYAxis,
-	resolveRowIndex,
-} from '../geometry';
-import { HeatmapAxisScale } from '../types';
-
-const BOUNDS = [128, 256, 1024, 4096];
-
-describe('canUseLogAxis', () => {
-	it('accepts strictly positive bounds', () => {
-		expect(canUseLogAxis(BOUNDS)).toBe(true);
-	});
-
-	it('rejects a zero or negative bound', () => {
-		expect(canUseLogAxis([0, 128])).toBe(false);
-		expect(canUseLogAxis([-1, 128])).toBe(false);
-	});
-
-	it('rejects empty bounds', () => {
-		expect(canUseLogAxis([])).toBe(false);
-	});
-});
-
-describe('resolveHeatmapYAxis', () => {
-	it('turns N bounds into N+1 rows with underflow and overflow at the ends', () => {
-		const { rows } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-
-		expect(rows).toHaveLength(BOUNDS.length + 1);
-		expect(rows[0]).toMatchObject({
-			upper: 128,
-			isUnderflow: true,
-			isOverflow: false,
-		});
-		expect(rows[1]).toMatchObject({ lower: 128, upper: 256 });
-		expect(rows[4]).toMatchObject({
-			lower: 4096,
-			isOverflow: true,
-			isUnderflow: false,
-		});
-	});
-
-	it('exposes one edge per row boundary, ascending', () => {
-		const { rows, edges } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-
-		expect(edges).toHaveLength(rows.length + 1);
-		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
-	});
-
-	it('places bounds in log space so row heights are log-proportional', () => {
-		const { splits, min, max } = resolveHeatmapYAxis(
-			BOUNDS,
-			HeatmapAxisScale.Log,
-		);
-
-		expect(splits).toStrictEqual(BOUNDS.map((bound) => Math.log10(bound)));
-		// Outer edges extend by the geometric mean ratio, (4096/128)^(1/3) = 3.174…
-		expect(10 ** min).toBeCloseTo(128 / (4096 / 128) ** (1 / 3), 6);
-		expect(10 ** max).toBeCloseTo(4096 * (4096 / 128) ** (1 / 3), 6);
-	});
-
-	it('keeps bounds in value space on a linear axis', () => {
-		const { splits, min } = resolveHeatmapYAxis(
-			[10, 20, 30],
-			HeatmapAxisScale.Linear,
-		);
-
-		expect(splits).toStrictEqual([10, 20, 30]);
-		// Mean gap is 10, and the underflow edge never crosses zero.
-		expect(min).toBe(0);
-	});
-
-	it('sorts and de-duplicates bounds', () => {
-		const { rows, splits } = resolveHeatmapYAxis(
-			[256, 128, 256, Number.NaN],
-			HeatmapAxisScale.Log,
-		);
-
-		expect(splits).toStrictEqual([Math.log10(128), Math.log10(256)]);
-		expect(rows).toHaveLength(3);
-	});
-
-	it('gives a single bound an underflow and an overflow row', () => {
-		const { rows, edges } = resolveHeatmapYAxis([100], HeatmapAxisScale.Log);
-
-		expect(rows).toHaveLength(2);
-		expect(rows[0].isUnderflow).toBe(true);
-		expect(rows[1].isOverflow).toBe(true);
-		expect(edges).toHaveLength(3);
-	});
-
-	it('degrades to an empty axis with no bounds', () => {
-		expect(resolveHeatmapYAxis([], HeatmapAxisScale.Log).rows).toStrictEqual([]);
-	});
-
-	it('puts the overflow label on the row"s upper edge, clear of the last boundary', () => {
-		const { overflowSplit, edges } = resolveHeatmapYAxis(
-			BOUNDS,
-			HeatmapAxisScale.Log,
-		);
-
-		// A full row above the last boundary tick, so the two labels cannot collide.
-		expect(overflowSplit).toBe(edges[edges.length - 1]);
-	});
-});
-
-describe('resolveRowIndex', () => {
-	const { edges } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Linear);
-
-	it('finds the row containing a value', () => {
-		expect(resolveRowIndex(edges, 200)).toBe(1);
-		expect(resolveRowIndex(edges, 2000)).toBe(3);
-	});
-
-	it('assigns a boundary to the row it opens', () => {
-		expect(resolveRowIndex(edges, 256)).toBe(2);
-	});
-
-	it('returns the last row on the top edge', () => {
-		expect(resolveRowIndex(edges, edges[edges.length - 1])).toBe(
-			edges.length - 2,
-		);
-	});
-
-	it('returns null outside the grid', () => {
-		expect(resolveRowIndex(edges, edges[0] - 1)).toBeNull();
-		expect(resolveRowIndex(edges, edges[edges.length - 1] + 1)).toBeNull();
-	});
-
-	it('returns null without at least one row', () => {
-		expect(resolveRowIndex([5], 5)).toBeNull();
-	});
-});
-
-describe('resolveColumnIndex', () => {
-	const timestamps = [100, 160, 220, 280];
-	const step = 60;
-
-	it('resolves by containment, not proximity', () => {
-		// 155 is nearer to 160, but the observations at 155 belong to column 0.
-		expect(resolveColumnIndex(timestamps, 155, step)).toBe(0);
-		expect(resolveColumnIndex(timestamps, 160, step)).toBe(1);
-	});
-
-	it('includes the column start and excludes its end', () => {
-		expect(resolveColumnIndex(timestamps, 100, step)).toBe(0);
-		expect(resolveColumnIndex(timestamps, 159.9, step)).toBe(0);
-	});
-
-	it('covers the trailing column using the step, not the next timestamp', () => {
-		expect(resolveColumnIndex(timestamps, 330, step)).toBe(3);
-		expect(resolveColumnIndex(timestamps, 340, step)).toBeNull();
-	});
-
-	it('returns null before the first column', () => {
-		expect(resolveColumnIndex(timestamps, 99, step)).toBeNull();
-	});
-
-	it('returns null with no columns', () => {
-		expect(resolveColumnIndex([], 100, step)).toBeNull();
-	});
-
-	it('leaves the last column open when the step is unknown', () => {
-		expect(resolveColumnIndex(timestamps, 10_000, 0)).toBe(3);
-	});
-});
-
-describe('formatRowLabel', () => {
-	const format = (value: number): string => `${value}ms`;
-	const { rows } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-
-	it('labels the underflow row by its only real bound', () => {
-		expect(formatRowLabel(rows[0], format)).toBe('≤ 128ms');
-	});
-
-	it('labels the overflow row by its only real bound', () => {
-		expect(formatRowLabel(rows[rows.length - 1], format)).toBe('> 4096ms');
-	});
-
-	it('labels an interior row as a range', () => {
-		expect(formatRowLabel(rows[1], format)).toBe('128ms – 256ms');
-	});
-});
-
-describe('decimateAxisSplits', () => {
-	const splits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-	const domain = { min: 0, max: 10 };
-
-	it('keeps every tick when they all fit', () => {
-		expect(
-			decimateAxisSplits({ ...domain, splits, plotHeight: 400, minGapPx: 18 }),
-		).toStrictEqual(splits);
-	});
-
-	it('thins to whatever fits at the available height', () => {
-		// 11 ticks over 100px is 10px apart; an 18px floor keeps every other one.
-		expect(
-			decimateAxisSplits({ ...domain, splits, plotHeight: 100, minGapPx: 18 }),
-		).toStrictEqual([0, 2, 4, 6, 8, 10]);
-	});
-
-	it('always keeps the topmost tick, so the overflow edge survives thinning', () => {
-		const thinned = decimateAxisSplits({
-			...domain,
-			splits,
-			plotHeight: 40,
-			minGapPx: 18,
-		});
-
-		expect(thinned[thinned.length - 1]).toBe(10);
-	});
-
-	it('returns ascending positions', () => {
-		const thinned = decimateAxisSplits({
-			...domain,
-			splits,
-			plotHeight: 60,
-			minGapPx: 18,
-		});
-
-		expect([...thinned].sort((a, b) => a - b)).toStrictEqual(thinned);
-	});
-
-	it('thins by pixel distance, not index, so uneven rows are handled', () => {
-		// Three boundaries bunched at the bottom of a wide linear domain: only the
-		// first and the far-away last are far enough apart to both get labels.
-		expect(
-			decimateAxisSplits({
-				splits: [1, 2, 3, 1000],
-				min: 0,
-				max: 1000,
-				plotHeight: 200,
-				minGapPx: 18,
-			}),
-		).toStrictEqual([3, 1000]);
-	});
-
-	it('leaves the tick set alone when it cannot measure', () => {
-		expect(
-			decimateAxisSplits({ ...domain, splits, plotHeight: 0, minGapPx: 18 }),
-		).toStrictEqual(splits);
-		expect(
-			decimateAxisSplits({
-				splits,
-				min: 5,
-				max: 5,
-				plotHeight: 400,
-				minGapPx: 18,
-			}),
-		).toStrictEqual(splits);
-	});
-});
-
-describe('resolveHeatmapYAxis — symmetric log', () => {
-	// The OTel SDK default explicit bucket boundaries, which start at zero.
-	const OTEL = [
-		0, 5, 10, 25, 50, 75, 100, 250, 500, 750, 1000, 2500, 5000, 7500, 10000,
-	];
-	// Clock skew in ms — a logs/traces field that straddles zero.
-	const SKEW = [-1000, -100, -10, -1, 0, 1, 10, 100, 1000];
-
-	const PLOT_HEIGHT = 250;
-
-	/** Row heights in axis units, which map linearly to pixels. */
-	function rowHeights(bounds: number[]): number[] {
-		const { edges } = resolveHeatmapYAxis(bounds, HeatmapAxisScale.Log);
-		return edges.slice(1).map((edge, index) => edge - edges[index]);
-	}
-
-	/** Shortest row, in pixels, for a plot of `PLOT_HEIGHT`. */
-	function shortestRowPx(bounds: number[], scale: HeatmapAxisScale): number {
-		const { edges } = resolveHeatmapYAxis(bounds, scale);
-		const span = edges[edges.length - 1] - edges[0];
-		const heights = edges
-			.slice(1)
-			.map((edge, index) => ((edge - edges[index]) / span) * PLOT_HEIGHT);
-		return Math.min(...heights);
-	}
-
-	it('keeps a zero boundary on a log axis instead of giving up to linear', () => {
-		const { splits } = resolveHeatmapYAxis([0, 5, 10], HeatmapAxisScale.Log);
-
-		// A linear fallback would leave the boundaries untransformed.
-		expect(splits).not.toStrictEqual([0, 5, 10]);
-	});
-
-	it('gives every row a usable height for the OTel default boundaries', () => {
-		// Linear squeezes the 0–100ms buckets — where the data is — under a pixel.
-		expect(shortestRowPx(OTEL, HeatmapAxisScale.Linear)).toBeLessThan(1);
-		expect(shortestRowPx(OTEL, HeatmapAxisScale.Log)).toBeGreaterThan(4);
-	});
-
-	it('gives the zero-crossing row a full decade, since it cannot be compressed', () => {
-		const heights = rowHeights(OTEL);
-		const { rows } = resolveHeatmapYAxis(OTEL, HeatmapAxisScale.Log);
-		const nearZero = rows.findIndex((row) => row.lower === 0 && row.upper === 5);
-
-		// One axis unit — the same space a decade gets above the threshold.
-		expect(heights[nearZero]).toBeCloseTo(1, 6);
-	});
-
-	it('places boundaries either side of zero symmetrically', () => {
-		const heights = rowHeights(SKEW);
-
-		expect(Math.max(...heights) - Math.min(...heights)).toBeCloseTo(0, 6);
-	});
-
-	it('keeps negative boundaries ascending', () => {
-		const { edges } = resolveHeatmapYAxis(SKEW, HeatmapAxisScale.Log);
-
-		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
-	});
-
-	it('round-trips a boundary back to its bucket value', () => {
-		const { splits, toBucketValue } = resolveHeatmapYAxis(
-			SKEW,
-			HeatmapAxisScale.Log,
-		);
-
-		expect(
-			splits.map((split) => Math.round(toBucketValue(split) * 1e6) / 1e6),
-		).toStrictEqual(SKEW);
-	});
-
-	it('derives the linear threshold from the smallest non-zero boundary', () => {
-		// Threshold 10 puts -10 at -1 and 0 at 0 in axis space.
-		const { edges, rows } = resolveHeatmapYAxis(
-			[-100, -10, 0, 10, 100],
-			HeatmapAxisScale.Log,
-		);
-		const crossing = rows.findIndex(
-			(row) => row.lower === -10 && row.upper === 0,
-		);
-
-		expect(edges[crossing]).toBeCloseTo(-1, 6);
-		expect(edges[crossing + 1]).toBeCloseTo(0, 6);
-	});
-
-	it('leaves an all-positive layout on a plain log axis', () => {
-		const { splits } = resolveHeatmapYAxis(
-			[128, 256, 1024],
-			HeatmapAxisScale.Log,
-		);
-
-		expect(splits).toStrictEqual([128, 256, 1024].map((b) => Math.log10(b)));
-	});
-
-	it('falls back to linear when every boundary is zero', () => {
-		const { splits } = resolveHeatmapYAxis([0], HeatmapAxisScale.Log);
-
-		expect(splits).toStrictEqual([0]);
-	});
-});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/grid.test.ts

@@ -1,176 +0,0 @@
-import { resolveHeatmapGrid } from '../grid';
-import { HeatmapSeries } from '../types';
-
-const BUCKETS = [10, 20];
-const STEP = 60;
-
-/** Two groups over two columns, each missing a value the other reports. */
-const TWO_GROUPS: HeatmapSeries[] = [
-	{
-		label: 'cart',
-		points: [
-			{ timestamp: 60, counts: [1, 2, 3] },
-			{ timestamp: 120, counts: [null, 5, 6] },
-		],
-	},
-	{
-		label: 'checkout',
-		points: [
-			{ timestamp: 60, counts: [10, 20, 30] },
-			{ timestamp: 120, counts: [40, null, 60] },
-		],
-	},
-];
-
-function resolve(
-	overrides: Partial<Parameters<typeof resolveHeatmapGrid>[0]> = {},
-): ReturnType<typeof resolveHeatmapGrid> {
-	return resolveHeatmapGrid({
-		buckets: BUCKETS,
-		step: STEP,
-		series: TWO_GROUPS,
-		...overrides,
-	});
-}
-
-describe('resolveHeatmapGrid', () => {
-	it('pivots per-timestamp count arrays into one row per bucket', () => {
-		const { counts } = resolve({ series: [TWO_GROUPS[0]] });
-
-		// 2 boundaries describe 3 rows; each row spans both columns.
-		expect(counts).toStrictEqual([
-			[1, null],
-			[2, 5],
-			[3, 6],
-		]);
-	});
-
-	it('carries the bounds and step through untouched', () => {
-		const { bounds, step } = resolve();
-
-		expect(bounds).toStrictEqual(BUCKETS);
-		expect(step).toBe(STEP);
-	});
-
-	it('sums every group for the combined view', () => {
-		const { counts } = resolve();
-
-		expect(counts[0]).toStrictEqual([11, 40]);
-		expect(counts[2]).toStrictEqual([33, 66]);
-	});
-
-	it('keeps one group"s count where the other has no data', () => {
-		const { counts } = resolve();
-
-		// cart is null at 120 in row 0 while checkout reports 40.
-		expect(counts[0][1]).toBe(40);
-		// checkout is null at 120 in row 1 while cart reports 5.
-		expect(counts[1][1]).toBe(5);
-	});
-
-	it('reports a cell as no-data only when every group is missing it', () => {
-		const { counts } = resolve({
-			buckets: [10],
-			series: [
-				{ label: 'a', points: [{ timestamp: 60, counts: [null, null] }] },
-				{ label: 'b', points: [{ timestamp: 60, counts: [null, null] }] },
-			],
-		});
-
-		expect(counts).toStrictEqual([[null], [null]]);
-	});
-
-	it('distinguishes a zero count from no data', () => {
-		const { counts } = resolve({
-			buckets: [10],
-			series: [{ label: 'a', points: [{ timestamp: 60, counts: [0, null] }] }],
-		});
-
-		expect(counts[0][0]).toBe(0);
-		expect(counts[1][0]).toBeNull();
-	});
-
-	it('sums only the groups the legend has enabled', () => {
-		const { counts } = resolve({ visibleGroups: ['cart'] });
-
-		expect(counts[0]).toStrictEqual([1, null]);
-		expect(counts[2]).toStrictEqual([3, 6]);
-	});
-
-	it('sums every group when the legend passes nothing', () => {
-		const { counts } = resolve({ visibleGroups: undefined });
-
-		expect(counts[0]).toStrictEqual([11, 40]);
-	});
-
-	it('ignores an enabled label that left the result', () => {
-		const { counts } = resolve({ visibleGroups: ['cart', 'gone'] });
-
-		expect(counts[0]).toStrictEqual([1, null]);
-	});
-
-	it('empties the grid when every group is excluded', () => {
-		const { timestamps, counts } = resolve({ visibleGroups: [] });
-
-		expect(timestamps).toStrictEqual([]);
-		expect(counts.every((row) => row.length === 0)).toBe(true);
-	});
-
-	it('unions timestamps when groups do not align', () => {
-		const { timestamps, counts } = resolve({
-			buckets: [10],
-			series: [
-				{ label: 'a', points: [{ timestamp: 60, counts: [1, 2] }] },
-				{ label: 'b', points: [{ timestamp: 180, counts: [3, 4] }] },
-			],
-		});
-
-		expect(timestamps).toStrictEqual([60, 180]);
-		expect(counts[0]).toStrictEqual([1, 3]);
-	});
-
-	it('sorts columns ascending regardless of response order', () => {
-		const { timestamps } = resolve({
-			buckets: [10],
-			series: [
-				{
-					label: 'a',
-					points: [
-						{ timestamp: 180, counts: [1, 2] },
-						{ timestamp: 60, counts: [3, 4] },
-					],
-				},
-			],
-		});
-
-		expect(timestamps).toStrictEqual([60, 180]);
-	});
-
-	it('pads rows the response left short', () => {
-		const { counts } = resolve({
-			buckets: [10, 20, 30],
-			series: [{ label: 'a', points: [{ timestamp: 60, counts: [1, 2] }] }],
-		});
-
-		expect(counts).toStrictEqual([[1], [2], [null], [null]]);
-	});
-
-	it('ignores counts beyond the bucket rows', () => {
-		const { counts } = resolve({
-			buckets: [10],
-			series: [{ label: 'a', points: [{ timestamp: 60, counts: [1, 2, 99] }] }],
-		});
-
-		expect(counts).toStrictEqual([[1], [2]]);
-	});
-
-	it('degrades to an empty grid with no buckets or no series', () => {
-		expect(resolve({ buckets: [] })).toStrictEqual({
-			bounds: [],
-			timestamps: [],
-			step: 0,
-			counts: [],
-		});
-		expect(resolve({ series: [] }).counts).toStrictEqual([]);
-	});
-});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/heatmapPlugin.test.ts

@@ -1,289 +0,0 @@
-import type uPlot from 'uplot';
-
-import { DEFAULT_HEATMAP_COLORS } from '../colorScale';
-import { resolveHeatmapYAxis } from '../geometry';
-import { createHeatmapHooks } from '../heatmapPlugin';
-import { HeatmapAxisScale, HeatmapCell } from '../types';
-
-const BOUNDS = [100, 1000];
-const Y_AXIS = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Linear);
-const TIMESTAMPS = [1000, 1060, 1120];
-const STEP = 60;
-const PLOT_WIDTH = 300;
-const PLOT_HEIGHT = 300;
-
-// Three rows for two bounds, three columns; row 1 column 1 is a data gap.
-const DATA = [
-	TIMESTAMPS,
-	[1, 2, 3],
-	[4, null, 6],
-	[7, 8, 9],
-] as unknown as uPlot.AlignedData;
-
-interface FakeContext {
-	fillRect: jest.Mock;
-	fills: string[];
-}
-
-interface FakePlot {
-	plot: uPlot;
-	context: FakeContext;
-	setSeries: jest.Mock;
-	over: HTMLDivElement;
-}
-
-function createFakePlot(cursor: { left: number; top: number }): FakePlot {
-	const over = document.createElement('div');
-	Object.defineProperty(over, 'clientWidth', { value: PLOT_WIDTH });
-	Object.defineProperty(over, 'clientHeight', { value: PLOT_HEIGHT });
-
-	const fills: string[] = [];
-	const fillRect = jest.fn();
-	const context = { fills, fillRect };
-	const setSeries = jest.fn();
-
-	const xSpan = TIMESTAMPS[TIMESTAMPS.length - 1] + STEP - TIMESTAMPS[0];
-	const ySpan = Y_AXIS.max - Y_AXIS.min;
-
-	const ctx = {
-		save: jest.fn(),
-		restore: jest.fn(),
-		beginPath: jest.fn(),
-		rect: jest.fn(),
-		clip: jest.fn(),
-		moveTo: jest.fn(),
-		lineTo: jest.fn(),
-		stroke: jest.fn(),
-		setLineDash: jest.fn(),
-		createPattern: jest.fn(() => null),
-		set fillStyle(value: string) {
-			fills.push(value);
-		},
-		fillRect: (...args: number[]): void => {
-			fillRect(...args);
-		},
-	};
-
-	const plot = {
-		data: DATA,
-		cursor,
-		over,
-		setSeries,
-		ctx,
-		bbox: { left: 0, top: 0, width: PLOT_WIDTH, height: PLOT_HEIGHT },
-		scales: { x: { min: TIMESTAMPS[0], max: TIMESTAMPS[2] + STEP } },
-		// x grows left to right; y is inverted, so the highest bucket is at the top.
-		valToPos: (value: number, scaleKey: string): number =>
-			scaleKey === 'x'
-				? ((value - TIMESTAMPS[0]) / xSpan) * PLOT_WIDTH
-				: PLOT_HEIGHT - ((value - Y_AXIS.min) / ySpan) * PLOT_HEIGHT,
-		posToVal: (pos: number, scaleKey: string): number =>
-			scaleKey === 'x'
-				? TIMESTAMPS[0] + (pos / PLOT_WIDTH) * xSpan
-				: Y_AXIS.min + ((PLOT_HEIGHT - pos) / PLOT_HEIGHT) * ySpan,
-	};
-
-	return { plot: plot as unknown as uPlot, context, setSeries, over };
-}
-
-function createHooks(
-	onHoverChange?: (cell: HeatmapCell | null) => void,
-	dimOnHover = true,
-): ReturnType<typeof createHeatmapHooks> {
-	return createHeatmapHooks({
-		yAxis: Y_AXIS,
-		step: STEP,
-		colors: DEFAULT_HEATMAP_COLORS,
-		isDarkMode: true,
-		seriesColor: '#4e74f8',
-		dimOnHover,
-		onHoverChange,
-	});
-}
-
-describe('heatmap renderer — lifecycle', () => {
-	it('mounts the hover overlay into the plot overlay and tears it down', () => {
-		const hooks = createHooks();
-		const { plot, over } = createFakePlot({ left: -10, top: -10 });
-
-		hooks.init(plot);
-		expect(
-			over.querySelector('[data-testid="heatmap-hover-overlay"]'),
-		).not.toBeNull();
-
-		hooks.destroy(plot);
-		expect(
-			over.querySelector('[data-testid="heatmap-hover-overlay"]'),
-		).toBeNull();
-	});
-});
-
-describe('heatmap renderer — draw', () => {
-	it('paints every cell of every visible column', () => {
-		const hooks = createHooks();
-		const { plot, context } = createFakePlot({ left: -10, top: -10 });
-
-		hooks.init(plot);
-		hooks.draw(plot);
-
-		// 3 rows x 3 columns, less the one null cell that has no hatch pattern
-		// available under jsdom.
-		expect(context.fillRect).toHaveBeenCalledTimes(8);
-	});
-
-	it('gives a zero count the bottom-of-scale fill rather than skipping it', () => {
-		const hooks = createHooks();
-		const zeroed = [TIMESTAMPS, [0, 0, 0], [0, 0, 0], [0, 0, 0]];
-		const { plot, context } = createFakePlot({ left: -10, top: -10 });
-		(plot as { data: unknown }).data = zeroed;
-
-		hooks.init(plot);
-		hooks.draw(plot);
-
-		expect(context.fillRect).toHaveBeenCalledTimes(9);
-		expect(new Set(context.fills).size).toBe(1);
-	});
-
-	it('skips columns outside the current x range', () => {
-		const hooks = createHooks();
-		const { plot, context } = createFakePlot({ left: -10, top: -10 });
-		(plot as { scales: unknown }).scales = {
-			x: { min: TIMESTAMPS[0], max: TIMESTAMPS[0] + STEP },
-		};
-
-		hooks.init(plot);
-		hooks.draw(plot);
-
-		// Only the first two columns overlap the range; the third starts past its end.
-		// 2 columns x 3 rows, less the null cell in column 1.
-		expect(context.fillRect).toHaveBeenCalledTimes(5);
-	});
-
-	it('draws nothing without columns', () => {
-		const hooks = createHooks();
-		const { plot, context } = createFakePlot({ left: -10, top: -10 });
-		(plot as { data: unknown }).data = [[]];
-
-		hooks.init(plot);
-		hooks.draw(plot);
-
-		expect(context.fillRect).not.toHaveBeenCalled();
-	});
-});
-
-describe('heatmap renderer — hover', () => {
-	it('focuses the hovered row and reports the cell under the cursor', () => {
-		const onHoverChange = jest.fn();
-		const hooks = createHooks(onHoverChange);
-		// Left third of the plot is column 0; the top third is the overflow row.
-		const { plot, setSeries } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-
-		expect(onHoverChange).toHaveBeenCalledWith({ row: 2, column: 0, count: 7 });
-		expect(setSeries).toHaveBeenCalledWith(3, { focus: true });
-	});
-
-	it('reports a data gap as a null count instead of zero', () => {
-		const onHoverChange = jest.fn();
-		const hooks = createHooks(onHoverChange);
-		const { plot } = createFakePlot({
-			left: PLOT_WIDTH / 2,
-			top: PLOT_HEIGHT / 2,
-		});
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-
-		expect(onHoverChange).toHaveBeenCalledWith({
-			row: 1,
-			column: 1,
-			count: null,
-		});
-	});
-
-	it('does not re-report the same cell', () => {
-		const onHoverChange = jest.fn();
-		const hooks = createHooks(onHoverChange);
-		const { plot } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-		hooks.setCursor(plot);
-
-		expect(onHoverChange).toHaveBeenCalledTimes(1);
-	});
-
-	it('shows the overlay over the hovered cell and dims around it', () => {
-		const hooks = createHooks(undefined, true);
-		const { plot, over } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-
-		const overlay = over.querySelector<HTMLDivElement>(
-			'[data-testid="heatmap-hover-overlay"]',
-		);
-		expect(overlay?.style.display).toBe('block');
-		// Column 0 spans the left third of a 300px plot.
-		expect(overlay?.lastElementChild).toHaveStyle({
-			left: '0px',
-			width: '100px',
-		});
-	});
-
-	it('collapses the dim rects when dimming is off', () => {
-		const hooks = createHooks(undefined, false);
-		const { plot, over } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-
-		const overlay = over.querySelector<HTMLDivElement>(
-			'[data-testid="heatmap-hover-overlay"]',
-		);
-		expect(overlay?.firstElementChild).toHaveStyle({
-			width: '0px',
-			height: '0px',
-		});
-	});
-
-	it('releases focus and hides the overlay when the cursor leaves', () => {
-		const onHoverChange = jest.fn();
-		const hooks = createHooks(onHoverChange);
-		const { plot, over, setSeries } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-		(plot as { cursor: { left: number; top: number } }).cursor = {
-			left: -10,
-			top: -10,
-		};
-		hooks.setCursor(plot);
-
-		expect(onHoverChange).toHaveBeenLastCalledWith(null);
-		expect(setSeries).toHaveBeenLastCalledWith(null, { focus: true });
-		expect(
-			over.querySelector<HTMLDivElement>('[data-testid="heatmap-hover-overlay"]')
-				?.style.display,
-		).toBe('none');
-	});
-
-	it('clears the hover when the cursor is inside the plot but past the last column', () => {
-		const onHoverChange = jest.fn();
-		const hooks = createHooks(onHoverChange);
-		const { plot } = createFakePlot({ left: 10, top: 10 });
-
-		hooks.init(plot);
-		hooks.setCursor(plot);
-		(plot as { data: unknown }).data = [[], [], [], []];
-		(plot as { cursor: { left: number; top: number } }).cursor = {
-			left: 10,
-			top: 10,
-		};
-		hooks.setCursor(plot);
-
-		expect(onHoverChange).toHaveBeenLastCalledWith(null);
-	});
-});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/__tests__/palettes.test.ts

@@ -1,75 +0,0 @@
-import { getPaletteStops } from '../palettes';
-import { HeatmapColorPalette } from '../types';
-
-const ALL_PALETTES = Object.values(HeatmapColorPalette);
-
-/** Perceived brightness, good enough to tell a ramp's ends apart. */
-function luminance(hex: string): number {
-	const value = parseInt(hex.slice(1), 16);
-	// eslint-disable-next-line no-bitwise
-	const [r, g, b] = [(value >> 16) & 255, (value >> 8) & 255, value & 255];
-	return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-
-describe('getPaletteStops', () => {
-	it.each(ALL_PALETTES)('%s is a full ramp of valid colours', (palette) => {
-		const stops = getPaletteStops(palette, true);
-
-		expect(stops).toHaveLength(9);
-		stops.forEach((stop) => expect(stop).toMatch(/^#[0-9a-f]{6}$/));
-	});
-
-	it.each(ALL_PALETTES)(
-		'%s climbs from dark to bright on a dark panel',
-		(palette) => {
-			const stops = getPaletteStops(palette, true);
-
-			// Low counts must sit near the surface, whichever direction the ramp is
-			// stored in — otherwise empty cells become the loudest thing on screen.
-			expect(luminance(stops[0])).toBeLessThan(luminance(stops[stops.length - 1]));
-		},
-	);
-
-	it.each(ALL_PALETTES)(
-		'%s falls from pale to saturated on a light panel',
-		(palette) => {
-			const stops = getPaletteStops(palette, false);
-
-			expect(luminance(stops[0])).toBeGreaterThan(
-				luminance(stops[stops.length - 1]),
-			);
-		},
-	);
-
-	it.each(ALL_PALETTES)('%s uses the same colours in both themes', (palette) => {
-		// Only the polarity flips; the palette itself is theme-independent.
-		expect([...getPaletteStops(palette, false)].reverse()).toStrictEqual(
-			getPaletteStops(palette, true),
-		);
-	});
-
-	it('never mutates the stored ramp when reversing it', () => {
-		const first = getPaletteStops(HeatmapColorPalette.Lava, false);
-		const second = getPaletteStops(HeatmapColorPalette.Lava, false);
-
-		expect(first).toStrictEqual(second);
-	});
-
-	it('falls back to the first ramp for an unknown palette', () => {
-		const unknown = 'nope' as HeatmapColorPalette;
-
-		expect(getPaletteStops(unknown, true)).toStrictEqual(
-			getPaletteStops(HeatmapColorPalette.Ice, true),
-		);
-	});
-
-	it('offers a neutral ramp for panels that already spend colour elsewhere', () => {
-		const stops = getPaletteStops(HeatmapColorPalette.Graphite, true);
-
-		// Every stop is a grey: red, green and blue channels stay equal.
-		stops.forEach((stop) => {
-			expect(stop.slice(1, 3)).toBe(stop.slice(3, 5));
-			expect(stop.slice(3, 5)).toBe(stop.slice(5, 7));
-		});
-	});
-});

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/colorScale.ts

@@ -1,198 +0,0 @@
-import { Color as DesignToken } from '@signozhq/design-tokens';
-import Color from 'color';
-
-import { getPaletteStops } from './palettes';
-import {
-	HeatmapColorMode,
-	HeatmapColorOptions,
-	HeatmapColorScale,
-	HeatmapColorPalette,
-} from './types';
-
-export const MIN_COLOR_STEPS = 2;
-export const MAX_COLOR_STEPS = 128;
-export const DEFAULT_COLOR_STEPS = 64;
-
-/** Without a floor, the lowest counts read as "no data". */
-export const MIN_OPACITY_ALPHA = 0.1;
-
-/** Used when neither an explicit fill nor a series colour is available. */
-export const DEFAULT_OPACITY_FILL = DesignToken.BG_ROBIN_500;
-
-export const DEFAULT_HEATMAP_COLORS: HeatmapColorOptions = {
-	mode: HeatmapColorMode.Palette,
-	scale: HeatmapColorScale.Log,
-	minCount: null,
-	maxCount: null,
-	palette: HeatmapColorPalette.Lava,
-	steps: DEFAULT_COLOR_STEPS,
-	fill: '',
-};
-
-export interface CountDomain {
-	min: number;
-	max: number;
-}
-
-/** Highest count, ignoring `null`. 0 for an empty grid. */
-export function getMaxCount(counts: Array<Array<number | null>>): number {
-	let max = 0;
-	for (const row of counts) {
-		for (const count of row) {
-			if (count !== null && Number.isFinite(count) && count > max) {
-				max = count;
-			}
-		}
-	}
-	return max;
-}
-
-/** Explicit clamps win; otherwise 0 to the grid's highest count. */
-export function resolveCountDomain(
-	options: Pick<HeatmapColorOptions, 'minCount' | 'maxCount'>,
-	counts: Array<Array<number | null>>,
-): CountDomain {
-	const min = options.minCount ?? 0;
-	const max = options.maxCount ?? getMaxCount(counts);
-	return max > min ? { min, max } : { min, max: min };
-}
-
-/** Position on the colour scale, 0..1. A degenerate domain collapses to 0 so an
- *  all-zero grid renders at the bottom rather than disappearing. */
-export function normalizeCount({
-	count,
-	domain,
-	scale,
-}: {
-	count: number;
-	domain: CountDomain;
-	scale: HeatmapColorScale;
-}): number {
-	const { min, max } = domain;
-	if (!(max > min)) {
-		return 0;
-	}
-
-	const clamped = Math.min(Math.max(count, min), max);
-
-	if (scale === HeatmapColorScale.Log) {
-		// 0 and 1 both sit at the bottom; log of either is meaningless.
-		const logMin = Math.log10(Math.max(min, 1));
-		const logMax = Math.log10(Math.max(max, 1));
-		if (!(logMax > logMin)) {
-			return 0;
-		}
-		return (Math.log10(Math.max(clamped, 1)) - logMin) / (logMax - logMin);
-	}
-
-	const linear = (clamped - min) / (max - min);
-	return scale === HeatmapColorScale.Sqrt ? Math.sqrt(linear) : linear;
-}
-
-export function clampColorSteps(steps: number): number {
-	if (!Number.isFinite(steps)) {
-		return DEFAULT_COLOR_STEPS;
-	}
-	return Math.min(Math.max(Math.round(steps), MIN_COLOR_STEPS), MAX_COLOR_STEPS);
-}
-
-/** Colour at `t` (0..1) along a multi-stop ramp. */
-function sampleStops(stops: string[], t: number): string {
-	if (stops.length === 0) {
-		return 'transparent';
-	}
-	if (stops.length === 1) {
-		return stops[0];
-	}
-	const scaled = Math.min(Math.max(t, 0), 1) * (stops.length - 1);
-	const lower = Math.min(Math.floor(scaled), stops.length - 2);
-	return Color(stops[lower])
-		.mix(Color(stops[lower + 1]), scaled - lower)
-		.hex();
-}
-
-/**
- * Colour the densest cells are drawn with — the palette's extreme, or the opacity
- * fill at full strength. Depends only on the options, not on the data, so callers
- * can read it before a grid exists.
- */
-export function resolveExtremeColor({
-	options,
-	isDarkMode,
-	seriesColor,
-}: {
-	options: HeatmapColorOptions;
-	isDarkMode: boolean;
-	seriesColor: string;
-}): string {
-	if (options.mode === HeatmapColorMode.Opacity) {
-		return options.fill || seriesColor || DEFAULT_OPACITY_FILL;
-	}
-	const stops = getPaletteStops(options.palette, isDarkMode);
-	return stops[stops.length - 1] ?? DEFAULT_OPACITY_FILL;
-}
-
-export interface HeatmapColorResolver {
-	/** `null` for a `null` count, which must be hatched. */
-	colorFor: (count: number | null) => string | null;
-	/** 0..1, or `null` for a `null` count. */
-	positionOf: (count: number | null) => number | null;
-	/** Low to high. The colour bar renders exactly these. */
-	ramp: string[];
-	domain: CountDomain;
-}
-
-/** Palette mode walks a sequential ramp; opacity mode varies the alpha of one
- *  fill, so the grid matches its group's legend swatch. */
-export function createHeatmapColorResolver({
-	options,
-	domain,
-	isDarkMode,
-	seriesColor,
-}: {
-	options: HeatmapColorOptions;
-	domain: CountDomain;
-	isDarkMode: boolean;
-	/** Opacity-mode fill when `options.fill` is empty. */
-	seriesColor: string;
-}): HeatmapColorResolver {
-	const steps = clampColorSteps(options.steps);
-	const positions = Array.from({ length: steps }, (_, index) =>
-		steps === 1 ? 0 : index / (steps - 1),
-	);
-
-	let ramp: string[];
-	if (options.mode === HeatmapColorMode.Opacity) {
-		const base = Color(options.fill || seriesColor || DEFAULT_OPACITY_FILL);
-		ramp = positions.map((t) =>
-			base
-				.alpha(MIN_OPACITY_ALPHA + t * (1 - MIN_OPACITY_ALPHA))
-				.rgb()
-				.string(),
-		);
-	} else {
-		const stops = getPaletteStops(options.palette, isDarkMode);
-		ramp = positions.map((t) => sampleStops(stops, t));
-	}
-
-	const positionOf = (count: number | null): number | null => {
-		if (count === null || !Number.isFinite(count)) {
-			return null;
-		}
-		return normalizeCount({ count, domain, scale: options.scale });
-	};
-
-	return {
-		positionOf,
-		colorFor: (count): string | null => {
-			const t = positionOf(count);
-			if (t === null) {
-				return null;
-			}
-			const index = Math.min(Math.floor(t * steps), steps - 1);
-			return ramp[index];
-		},
-		ramp,
-		domain,
-	};
-}

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/geometry.ts

@@ -1,297 +0,0 @@
-import { HeatmapAxisScale, HeatmapRow, HeatmapYAxis } from './types';
-
-/** Used when the ratio cannot be inferred, i.e. a single boundary. */
-const FALLBACK_LOG_RATIO = 2;
-
-const EMPTY_Y_AXIS: HeatmapYAxis = {
-	rows: [],
-	edges: [],
-	splits: [],
-	overflowSplit: null,
-	toBucketValue: (axisValue: number): number => axisValue,
-	min: 0,
-	max: 1,
-};
-
-/** Ascending, finite, de-duplicated boundaries. */
-function normalizeBounds(bounds: number[]): number[] {
-	const sorted = bounds
-		.filter((bound) => Number.isFinite(bound))
-		.sort((a, b) => a - b);
-	return sorted.filter(
-		(bound, index) => index === 0 || bound !== sorted[index - 1],
-	);
-}
-
-/** True when a plain log axis can place every boundary. */
-export function canUseLogAxis(bounds: number[]): boolean {
-	return bounds.length > 0 && bounds.every((bound) => bound > 0);
-}
-
-interface AxisTransform {
-	toAxisValue: (value: number) => number;
-	toBucketValue: (axisValue: number) => number;
-}
-
-const LINEAR_TRANSFORM: AxisTransform = {
-	toAxisValue: (value) => value,
-	toBucketValue: (axisValue) => axisValue,
-};
-
-const LOG_TRANSFORM: AxisTransform = {
-	toAxisValue: (value) => Math.log10(value),
-	toBucketValue: (axisValue) => 10 ** axisValue,
-};
-
-/**
- * Where "near zero" starts, taken as the smallest non-zero boundary magnitude. The
- * bucket layout already declares it, so it never needs to be configured.
- */
-function resolveLinearThreshold(bounds: number[]): number {
-	let threshold = Number.POSITIVE_INFINITY;
-	for (const bound of bounds) {
-		const magnitude = Math.abs(bound);
-		if (magnitude > 0 && magnitude < threshold) {
-			threshold = magnitude;
-		}
-	}
-	return Number.isFinite(threshold) ? threshold : 1;
-}
-
-/**
- * Symmetric log: linear within ±threshold, logarithmic beyond, mirrored across
- * zero. Bucketing an arbitrary logs/traces field can straddle zero — clock skew,
- * deltas, balances — which a plain log cannot place at all, and which a linear axis
- * squeezes into sub-pixel rows exactly where the interesting data sits.
- *
- * The gradient kink at ±threshold is invisible here: the threshold *is* a boundary,
- * so it lands on a row edge, and row edges are already discrete.
- */
-function createSymlogTransform(threshold: number): AxisTransform {
-	return {
-		toAxisValue: (value) =>
-			Math.abs(value) <= threshold
-				? value / threshold
-				: Math.sign(value) * (1 + Math.log10(Math.abs(value) / threshold)),
-		toBucketValue: (axisValue) =>
-			Math.abs(axisValue) <= 1
-				? axisValue * threshold
-				: Math.sign(axisValue) * threshold * 10 ** (Math.abs(axisValue) - 1),
-	};
-}
-
-function resolveAxisTransform(
-	bounds: number[],
-	scale: HeatmapAxisScale,
-): AxisTransform {
-	if (scale !== HeatmapAxisScale.Log) {
-		return LINEAR_TRANSFORM;
-	}
-	if (canUseLogAxis(bounds)) {
-		return LOG_TRANSFORM;
-	}
-	// All-zero bounds have no magnitude to scale against.
-	if (!bounds.some((bound) => bound !== 0)) {
-		return LINEAR_TRANSFORM;
-	}
-	return createSymlogTransform(resolveLinearThreshold(bounds));
-}
-
-/**
- * The open-ended rows still need a height, so each gets the grid's typical bucket
- * width — the mean gap in axis space, which on a geometric layout is exactly one
- * bucket ratio. Linear stays in value space so it can refuse to cross zero.
- */
-function resolveOuterEdges(
-	bounds: number[],
-	transform: AxisTransform,
-	isLinear: boolean,
-): { lower: number; upper: number } {
-	const first = bounds[0];
-	const last = bounds[bounds.length - 1];
-
-	if (isLinear) {
-		const gap = bounds.length > 1 ? (last - first) / (bounds.length - 1) : 0;
-		const safeGap = gap > 0 ? gap : Math.abs(first) || 1;
-		// Never extend below zero unless the boundaries already do.
-		const lower = first > 0 ? Math.max(0, first - safeGap) : first - safeGap;
-		return { lower, upper: last + safeGap };
-	}
-
-	const axisFirst = transform.toAxisValue(first);
-	const axisLast = transform.toAxisValue(last);
-	const fallback = Math.log10(FALLBACK_LOG_RATIO);
-	const gap =
-		bounds.length > 1 ? (axisLast - axisFirst) / (bounds.length - 1) : fallback;
-	const safeGap = gap > 0 ? gap : fallback;
-
-	return {
-		lower: transform.toBucketValue(axisFirst - safeGap),
-		upper: transform.toBucketValue(axisLast + safeGap),
-	};
-}
-
-/** N boundaries produce N+1 rows: an underflow row below the first, and the
- *  `+Inf` overflow row above the last. */
-export function resolveHeatmapYAxis(
-	bounds: number[],
-	scale: HeatmapAxisScale,
-): HeatmapYAxis {
-	const normalized = normalizeBounds(bounds);
-	if (normalized.length === 0) {
-		return EMPTY_Y_AXIS;
-	}
-
-	const transform = resolveAxisTransform(normalized, scale);
-	const isLinear = transform === LINEAR_TRANSFORM;
-	const { toAxisValue, toBucketValue } = transform;
-
-	const { lower, upper } = resolveOuterEdges(normalized, transform, isLinear);
-	const last = normalized[normalized.length - 1];
-
-	const rows: HeatmapRow[] = [
-		{ lower, upper: normalized[0], isUnderflow: true, isOverflow: false },
-	];
-	for (let index = 1; index < normalized.length; index += 1) {
-		rows.push({
-			lower: normalized[index - 1],
-			upper: normalized[index],
-			isUnderflow: false,
-			isOverflow: false,
-		});
-	}
-	rows.push({ lower: last, upper, isUnderflow: false, isOverflow: true });
-
-	const edges = [
-		toAxisValue(lower),
-		...normalized.map(toAxisValue),
-		toAxisValue(upper),
-	];
-
-	return {
-		rows,
-		edges,
-		splits: normalized.map(toAxisValue),
-		overflowSplit: toAxisValue(upper),
-		toBucketValue,
-		min: edges[0],
-		max: edges[edges.length - 1],
-	};
-}
-
-/** Row containing `axisValue`, or `null` when it falls outside the grid. */
-export function resolveRowIndex(
-	edges: number[],
-	axisValue: number,
-): number | null {
-	if (edges.length < 2) {
-		return null;
-	}
-	if (axisValue < edges[0] || axisValue > edges[edges.length - 1]) {
-		return null;
-	}
-
-	let low = 0;
-	let high = edges.length - 2;
-	while (low <= high) {
-		const mid = (low + high) >> 1;
-		if (axisValue < edges[mid]) {
-			high = mid - 1;
-		} else if (axisValue >= edges[mid + 1]) {
-			low = mid + 1;
-		} else {
-			return mid;
-		}
-	}
-	// Exactly on the top edge.
-	return edges.length - 2;
-}
-
-/**
- * A containment test, not a nearest-timestamp lookup: uPlot's own `cursor.idx`
- * snaps to the closest boundary and would report the next column as soon as the
- * cursor passed a cell's midpoint.
- */
-export function resolveColumnIndex(
-	timestamps: ArrayLike<number>,
-	xValue: number,
-	step: number,
-): number | null {
-	if (timestamps.length === 0) {
-		return null;
-	}
-
-	let low = 0;
-	let high = timestamps.length - 1;
-	let candidate = -1;
-	while (low <= high) {
-		const mid = (low + high) >> 1;
-		if (timestamps[mid] <= xValue) {
-			candidate = mid;
-			low = mid + 1;
-		} else {
-			high = mid - 1;
-		}
-	}
-
-	if (candidate < 0) {
-		return null;
-	}
-	const width = step > 0 ? step : Number.POSITIVE_INFINITY;
-	return xValue < timestamps[candidate] + width ? candidate : null;
-}
-
-/** The open-ended rows are labelled by their one real boundary; the synthetic
- *  edge is a drawing device, not a value. */
-export function formatRowLabel(
-	row: HeatmapRow,
-	formatValue: (value: number) => string,
-): string {
-	if (row.isOverflow) {
-		return `> ${formatValue(row.lower)}`;
-	}
-	if (row.isUnderflow) {
-		return `≤ ${formatValue(row.upper)}`;
-	}
-	return `${formatValue(row.lower)} – ${formatValue(row.upper)}`;
-}
-
-/**
- * Drops boundary ticks that would overlap. Filters by pixel distance rather than
- * index, since linear rows are not the same height, and walks down from the top
- * so the `∞` edge survives whatever else is dropped.
- */
-export function decimateAxisSplits({
-	splits,
-	min,
-	max,
-	plotHeight,
-	minGapPx,
-}: {
-	/** Candidates in axis space, ascending. */
-	splits: number[];
-	min: number;
-	max: number;
-	/** Plotting area height, in CSS pixels. */
-	plotHeight: number;
-	minGapPx: number;
-}): number[] {
-	if (splits.length < 2 || plotHeight <= 0 || minGapPx <= 0 || !(max > min)) {
-		return splits;
-	}
-
-	const pixelsPerUnit = plotHeight / (max - min);
-	const kept: number[] = [];
-	let lastPosition = 0;
-
-	for (let index = splits.length - 1; index >= 0; index -= 1) {
-		// Axis values grow upward, pixel offsets downward.
-		const position = (max - splits[index]) * pixelsPerUnit;
-		if (kept.length === 0 || position - lastPosition >= minGapPx) {
-			kept.push(splits[index]);
-			lastPosition = position;
-		}
-	}
-
-	return kept.reverse();
-}

frontend/src/lib/uPlotV2/plugins/HeatmapPlugin/grid.ts

@@ -1,99 +0,0 @@
-import { HeatmapGrid, HeatmapSeries } from './types';
-
-const EMPTY_GRID: HeatmapGrid = {
-	bounds: [],
-	timestamps: [],
-	step: 0,
-	counts: [],
-};
-
-/**
- * Highest single-cell count each group reaches. Read against the same domain the
- * colour bar uses, this is where a group sits on that bar.
- */
-export function resolveGroupPeaks(
-	series: HeatmapSeries[],
-): Map<string, number> {
-	const peaks = new Map<string, number>();
-	series.forEach((entry) => {
-		let peak = 0;
-		entry.points.forEach((point) =>
-			point.counts.forEach((count) => {
-				if (count !== null && count > peak) {
-					peak = count;
-				}
-			}),
-		);
-		peaks.set(entry.label, peak);
-	});
-	return peaks;
-}
-
-/** Groups the legend currently has enabled. `undefined` means all of them. */
-function resolveVisible(
-	series: HeatmapSeries[],
-	visibleGroups: string[] | undefined,
-): HeatmapSeries[] {
-	if (visibleGroups === undefined) {
-		return series;
-	}
-	const allowed = new Set(visibleGroups);
-	return series.filter((entry) => allowed.has(entry.label));
-}
-
-/**
- * Pivots the response's column-major counts into the row-major grid the renderer
- * draws, and sums the enabled groups — counts are additive, so the sum is exact and
- * needs no extra request. A cell is `null` only when no group contributed to it.
- */
-export function resolveHeatmapGrid({
-	buckets,
-	step,
-	series,
-	visibleGroups,
-}: {
-	buckets: number[];
-	/** Column width in seconds. */
-	step: number;
-	series: HeatmapSeries[];
-	/** Labels the legend has enabled. `undefined` sums every group. */
-	visibleGroups?: string[];
-}): HeatmapGrid {
-	if (buckets.length === 0 || series.length === 0) {
-		return EMPTY_GRID;
-	}
-
-	const selected = resolveVisible(series, visibleGroups);
-
-	// Groups are not guaranteed to share timestamps, so the columns are their union.
-	const timestampSet = new Set<number>();
-	selected.forEach((entry) => {
-		entry.points.forEach((point) => timestampSet.add(point.timestamp));
-	});
-	const timestamps = Array.from(timestampSet).sort((a, b) => a - b);
-	const columnOf = new Map(timestamps.map((value, index) => [value, index]));
-
-	// N boundaries describe N+1 rows: the underflow row and the `+Inf` overflow row.
-	const rowCount = buckets.length + 1;
-	const counts: Array<Array<number | null>> = Array.from(
-		{ length: rowCount },
-		() => new Array<number | null>(timestamps.length).fill(null),
-	);
-
-	selected.forEach((entry) => {
-		entry.points.forEach((point) => {
-			const column = columnOf.get(point.timestamp);
-			if (column === undefined) {
-				return;
-			}
-			point.counts.forEach((count, row) => {
-				if (row >= rowCount || count === null || count === undefined) {
-					return;
-				}
-				counts[row][column] = (counts[row][column] ?? 0) + count;
-			});
-		});
-	});
-
-	return { bounds: buckets, timestamps, step, counts };
-}