fix: minor changes

#### Description

- Adds the `builder_ai_query` envelope type, seeded by the AI explorer
via `initialQueryAIWithType`.
- AI queries pull filter-bar keys from
`/api/v1/ai_observability/fields/keys` and values from
`/api/v1/ai_observability/fields/values`.
- `QuerySection` drops the builder's custom order-by (`ExplorerOrderBy`
via `renderOrderBy`) for the list and trace panels, along with
`showTraceOperator`. Ordering for those views is the list's own concern,
not the builder's — the trace view supplies its own control in #12688.
`limit` and `having` are now rendered disabled on every panel instead of
hidden on list.
- Hides the span-scope selector for AI queries — "Root / Entrypoint
Spans" ANDs badly with the gate, since GenAI attributes sit on nested
spans. Derived from the query itself, so no new prop on the shared
builder.
- `createNewBuilderQuery` inherits `builderQueryType` from the first
query, the way it already inherits `source`.
- Response conversion reads aggregation metadata from both builder
envelope types, not just `builder_query`.

TDD -
https://app.notion.com/p/signoz/Query-Builder-Changes-3b4fcc6bcd1980889c7aed782665e78d

#### Issues closed by this PR

Closes -
https://github.com/orgs/SigNoz/projects/39/views/20?pane=issue&itemId=226748421&issue=SigNoz%7Cengineering-pod%7C5889

#### Screenshots / Screen Recordings


https://github.com/user-attachments/assets/985cb178-ffb0-405c-b0a6-82ec242c3d68

---------

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

docs/api/openapi.yml

@@ -3064,79 +3064,6 @@ components:
       - tags
       - spec
       type: object
-    DashboardtypesHeatmapAxes:
-      properties:
-        yScale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapYScale'
-      type: object
-    DashboardtypesHeatmapChartAppearance:
-      properties:
-        colors:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColors'
-      type: object
-    DashboardtypesHeatmapColorMode:
-      enum:
-      - palette
-      - opacity
-      type: string
-    DashboardtypesHeatmapColorScale:
-      enum:
-      - log
-      - sqrt
-      - linear
-      type: string
-    DashboardtypesHeatmapColors:
-      properties:
-        fill:
-          type: string
-        maxCount:
-          nullable: true
-          type: number
-        minCount:
-          nullable: true
-          type: number
-        mode:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorMode'
-        palette:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPalette'
-        scale:
-          $ref: '#/components/schemas/DashboardtypesHeatmapColorScale'
-        steps:
-          type: integer
-      type: object
-    DashboardtypesHeatmapPalette:
-      enum:
-      - ice
-      - moss
-      - rust
-      - graphite
-      - ember
-      - lagoon
-      - orchid
-      - verdant
-      - lava
-      - beacon
-      type: string
-    DashboardtypesHeatmapPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesHeatmapAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesHeatmapChartAppearance'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesPanelFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesHeatmapYScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesHistogramBuckets:
       properties:
         bucketCount:
@@ -3489,7 +3416,6 @@ components:
       discriminator:
         mapping:
           signoz/BarChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec'
-          signoz/HeatmapPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
           signoz/HistogramPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
@@ -3505,7 +3431,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -3516,7 +3441,6 @@ components:
       - signoz/TablePanel
       - signoz/HistogramPanel
       - signoz/ListPanel
-      - signoz/HeatmapPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpec:
       properties:
@@ -3530,18 +3454,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/HeatmapPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesHeatmapPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpec:
       properties:
         kind:
@@ -7073,7 +6985,10 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
         meta:
-          $ref: '#/components/schemas/Querybuildertypesv5AggregationMeta'
+          properties:
+            unit:
+              type: string
+          type: object
         predictedSeries:
           items:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
@@ -7088,51 +7003,12 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5TimeSeries'
           type: array
       type: object
-    Querybuildertypesv5AggregationMeta:
+    Querybuildertypesv5Bucket:
       properties:
-        buckets:
-          items:
-            format: double
-            type: number
-          type: array
-        unit:
-          type: string
+        step:
+          format: double
+          type: number
       type: object
-    Querybuildertypesv5BucketOptions:
-      discriminator:
-        mapping:
-          linear: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
-          log: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
-        propertyName: kind
-      oneOf:
-      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLinear'
-      - $ref: '#/components/schemas/Querybuildertypesv5BucketOptionsLog'
-      type: object
-    Querybuildertypesv5BucketOptionsLinear:
-      properties:
-        kind:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5LinearBucketsSpec'
-      required:
-      - kind
-      - spec
-      type: object
-    Querybuildertypesv5BucketOptionsLog:
-      properties:
-        kind:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketsKind'
-        spec:
-          $ref: '#/components/schemas/Querybuildertypesv5LogBucketsSpec'
-      required:
-      - kind
-      - spec
-      type: object
-    Querybuildertypesv5BucketsKind:
-      enum:
-      - linear
-      - log
-      type: string
     Querybuildertypesv5BuilderQuerySpec:
       discriminator:
         mapping:
@@ -7313,16 +7189,6 @@ components:
         value:
           type: string
       type: object
-    Querybuildertypesv5LinearBucketsSpec:
-      properties:
-        maxValue:
-          format: double
-          type: number
-        numBuckets:
-          type: integer
-      required:
-      - maxValue
-      type: object
     Querybuildertypesv5LogAggregation:
       properties:
         alias:
@@ -7330,12 +7196,6 @@ components:
         expression:
           type: string
       type: object
-    Querybuildertypesv5LogBucketsSpec:
-      properties:
-        scale:
-          nullable: true
-          type: integer
-      type: object
     Querybuildertypesv5MetricAggregation:
       properties:
         comparisonSpaceAggregationParam:
@@ -7794,8 +7654,6 @@ components:
         queries (traces, logs, metrics), formulas, joins, trace operators, PromQL,
         and ClickHouse SQL queries.
       properties:
-        bucketOptions:
-          $ref: '#/components/schemas/Querybuildertypesv5BucketOptions'
         compositeQuery:
           $ref: '#/components/schemas/Querybuildertypesv5CompositeQuery'
         end:
@@ -7895,7 +7753,6 @@ components:
       - raw
       - raw_stream
       - trace
-      - heatmap
       type: string
     Querybuildertypesv5ScalarData:
       properties:
@@ -7970,6 +7827,8 @@ components:
       type: object
     Querybuildertypesv5TimeSeriesValue:
       properties:
+        bucket:
+          $ref: '#/components/schemas/Querybuildertypesv5Bucket'
         partial:
           type: boolean
         timestamp:
@@ -8080,6 +7939,8 @@ components:
           $ref: '#/components/schemas/RuletypesAlertState'
         overallStateChanged:
           type: boolean
+        relatedAITracesLink:
+          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8123,6 +7984,8 @@ components:
             $ref: '#/components/schemas/Querybuildertypesv5Label'
           nullable: true
           type: array
+        relatedAITracesLink:
+          type: string
         relatedLogsLink:
           type: string
         relatedTracesLink:
@@ -8228,6 +8091,7 @@ components:
       - TRACES_BASED_ALERT
       - LOGS_BASED_ALERT
       - EXCEPTIONS_BASED_ALERT
+      - AI_TRACES_BASED_ALERT
       type: string
     RuletypesBasicRuleThreshold:
       properties:

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/sigNoz.schemas.ts

@@ -4402,83 +4402,6 @@ export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDa
 	spec: DashboardtypesListPanelSpecDTO;
 }
 
-export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind {
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
-}
-export enum DashboardtypesHeatmapYScaleDTO {
-	auto = 'auto',
-	linear = 'linear',
-	log = 'log',
-	symlog = 'symlog',
-}
-export interface DashboardtypesHeatmapAxesDTO {
-	yScale?: DashboardtypesHeatmapYScaleDTO;
-}
-
-export enum DashboardtypesHeatmapColorModeDTO {
-	palette = 'palette',
-	opacity = 'opacity',
-}
-export enum DashboardtypesHeatmapPaletteDTO {
-	ice = 'ice',
-	moss = 'moss',
-	rust = 'rust',
-	graphite = 'graphite',
-	ember = 'ember',
-	lagoon = 'lagoon',
-	orchid = 'orchid',
-	verdant = 'verdant',
-	lava = 'lava',
-	beacon = 'beacon',
-}
-export enum DashboardtypesHeatmapColorScaleDTO {
-	log = 'log',
-	sqrt = 'sqrt',
-	linear = 'linear',
-}
-export interface DashboardtypesHeatmapColorsDTO {
-	/**
-	 * @type string
-	 */
-	fill?: string;
-	/**
-	 * @type number,null
-	 */
-	maxCount?: number | null;
-	/**
-	 * @type number,null
-	 */
-	minCount?: number | null;
-	mode?: DashboardtypesHeatmapColorModeDTO;
-	palette?: DashboardtypesHeatmapPaletteDTO;
-	scale?: DashboardtypesHeatmapColorScaleDTO;
-	/**
-	 * @type integer
-	 */
-	steps?: number;
-}
-
-export interface DashboardtypesHeatmapChartAppearanceDTO {
-	colors?: DashboardtypesHeatmapColorsDTO;
-}
-
-export interface DashboardtypesHeatmapPanelSpecDTO {
-	axes?: DashboardtypesHeatmapAxesDTO;
-	chartAppearance?: DashboardtypesHeatmapChartAppearanceDTO;
-	formatting?: DashboardtypesPanelFormattingDTO;
-	legend?: DashboardtypesLegendDTO;
-	visualization?: DashboardtypesBasicVisualizationDTO;
-}
-
-export interface DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO {
-	/**
-	 * @enum signoz/HeatmapPanel
-	 * @type string
-	 */
-	kind: DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTOKind;
-	spec: DashboardtypesHeatmapPanelSpecDTO;
-}
-
 export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBarChartPanelSpecDTO
@@ -4486,8 +4409,7 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO
-	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpecDTO;
+	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
 export enum Querybuildertypesv5RequestTypeDTO {
 	scalar = 'scalar',
@@ -4495,7 +4417,6 @@ export enum Querybuildertypesv5RequestTypeDTO {
 	raw = 'raw',
 	raw_stream = 'raw_stream',
 	trace = 'trace',
-	heatmap = 'heatmap',
 }
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
@@ -5410,7 +5331,6 @@ export enum DashboardtypesPanelPluginKindDTO {
 	'signoz/TablePanel' = 'signoz/TablePanel',
 	'signoz/HistogramPanel' = 'signoz/HistogramPanel',
 	'signoz/ListPanel' = 'signoz/ListPanel',
-	'signoz/HeatmapPanel' = 'signoz/HeatmapPanel',
 }
 /**
  * @nullable
@@ -8110,7 +8030,16 @@ export interface Querybuildertypesv5LabelDTO {
 	value?: Querybuildertypesv5LabelDTOValue;
 }
 
+export interface Querybuildertypesv5BucketDTO {
+	/**
+	 * @type number
+	 * @format double
+	 */
+	step?: number;
+}
+
 export interface Querybuildertypesv5TimeSeriesValueDTO {
+	bucket?: Querybuildertypesv5BucketDTO;
 	/**
 	 * @type boolean
 	 */
@@ -8661,16 +8590,12 @@ export interface PromotetypesPromotePathDTO {
 	promote?: boolean;
 }
 
-export interface Querybuildertypesv5AggregationMetaDTO {
-	/**
-	 * @type array
-	 */
-	buckets?: number[];
+export type Querybuildertypesv5AggregationBucketDTOMeta = {
 	/**
 	 * @type string
 	 */
 	unit?: string;
-}
+};
 
 export interface Querybuildertypesv5AggregationBucketDTO {
 	/**
@@ -8689,7 +8614,10 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	 * @type array
 	 */
 	lowerBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
-	meta?: Querybuildertypesv5AggregationMetaDTO;
+	/**
+	 * @type object
+	 */
+	meta?: Querybuildertypesv5AggregationBucketDTOMeta;
 	/**
 	 * @type array
 	 */
@@ -8704,57 +8632,6 @@ export interface Querybuildertypesv5AggregationBucketDTO {
 	upperBoundSeries?: Querybuildertypesv5TimeSeriesDTO[];
 }
 
-export enum Querybuildertypesv5BucketOptionsLinearDTOKind {
-	linear = 'linear',
-}
-export interface Querybuildertypesv5LinearBucketsSpecDTO {
-	/**
-	 * @type number
-	 * @format double
-	 */
-	maxValue: number;
-	/**
-	 * @type integer
-	 */
-	numBuckets?: number;
-}
-
-export interface Querybuildertypesv5BucketOptionsLinearDTO {
-	/**
-	 * @type string
-	 * @enum linear
-	 */
-	kind: Querybuildertypesv5BucketOptionsLinearDTOKind;
-	spec: Querybuildertypesv5LinearBucketsSpecDTO;
-}
-
-export enum Querybuildertypesv5BucketOptionsLogDTOKind {
-	log = 'log',
-}
-export interface Querybuildertypesv5LogBucketsSpecDTO {
-	/**
-	 * @type integer,null
-	 */
-	scale?: number | null;
-}
-
-export interface Querybuildertypesv5BucketOptionsLogDTO {
-	/**
-	 * @type string
-	 * @enum log
-	 */
-	kind: Querybuildertypesv5BucketOptionsLogDTOKind;
-	spec: Querybuildertypesv5LogBucketsSpecDTO;
-}
-
-export type Querybuildertypesv5BucketOptionsDTO =
-	| Querybuildertypesv5BucketOptionsLinearDTO
-	| Querybuildertypesv5BucketOptionsLogDTO;
-
-export enum Querybuildertypesv5BucketsKindDTO {
-	linear = 'linear',
-	log = 'log',
-}
 export type Querybuildertypesv5ColumnDescriptorDTOMeta = {
 	/**
 	 * @type string
@@ -9104,7 +8981,6 @@ export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
  * Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.
  */
 export interface Querybuildertypesv5QueryRangeRequestDTO {
-	bucketOptions?: Querybuildertypesv5BucketOptionsDTO;
 	compositeQuery?: Querybuildertypesv5CompositeQueryDTO;
 	/**
 	 * @type integer
@@ -9222,6 +9098,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryDTO {
 	 * @type boolean
 	 */
 	overallStateChanged: boolean;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9270,6 +9150,10 @@ export interface RulestatehistorytypesGettableRuleStateHistoryContributorDTO {
 	 * @type array,null
 	 */
 	labels: Querybuildertypesv5LabelDTO[] | null;
+	/**
+	 * @type string
+	 */
+	relatedAITracesLink?: string;
 	/**
 	 * @type string
 	 */
@@ -9365,6 +9249,7 @@ export enum RuletypesAlertTypeDTO {
 	TRACES_BASED_ALERT = 'TRACES_BASED_ALERT',
 	LOGS_BASED_ALERT = 'LOGS_BASED_ALERT',
 	EXCEPTIONS_BASED_ALERT = 'EXCEPTIONS_BASED_ALERT',
+	AI_TRACES_BASED_ALERT = 'AI_TRACES_BASED_ALERT',
 }
 export enum RuletypesMatchTypeDTO {
 	at_least_once = 'at_least_once',

frontend/src/api/v5/queryRange/convertV5Response.ts

@@ -2,8 +2,10 @@ import { cloneDeep, isEmpty } from 'lodash-es';
 import { SuccessResponse, Warning } from 'types/api';
 import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
 import {
+	BuilderQuery,
 	DistributionData,
 	MetricRangePayloadV5,
+	QueryEnvelope,
 	QueryRangeRequestV5,
 	RawData,
 	ScalarData,
@@ -11,6 +13,11 @@ import {
 } from 'types/api/v5/queryRange';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
+const isBuilderQueryEnvelope = (
+	envelope: QueryEnvelope,
+): envelope is QueryEnvelope & { spec: BuilderQuery } =>
+	envelope.type === 'builder_query' || envelope.type === 'builder_ai_query';
+
 function getColName(
 	col: ScalarData['columns'][number],
 	legendMap: Record<string, string>,
@@ -409,21 +416,19 @@ export function convertV5ResponseToLegacy(
 	const v5Data = payload?.data;
 
 	const aggregationPerQuery =
-		params?.compositeQuery?.queries
-			?.filter((query) => query.type === 'builder_query')
-			.reduce(
-				(acc, query) => {
-					if (
-						query.type === 'builder_query' &&
-						'aggregations' in query.spec &&
-						query.spec.name
-					) {
-						acc[query.spec.name] = query.spec.aggregations;
-					}
-					return acc;
-				},
-				{} as Record<string, any>,
-			) || {};
+		params?.compositeQuery?.queries?.filter(isBuilderQueryEnvelope).reduce(
+			(acc, query) => {
+				if (
+					isBuilderQueryEnvelope(query) &&
+					'aggregations' in query.spec &&
+					query.spec.name
+				) {
+					acc[query.spec.name] = query.spec.aggregations;
+				}
+				return acc;
+			},
+			{} as Record<string, any>,
+		) || {};
 
 	// clickhouse_sql queries have no aggregation metadata; their value columns
 	// are named/keyed by the real SQL alias the response carries (see getColId).

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.test.ts

@@ -14,6 +14,7 @@ import {
 	QueryBuilderFormula as V5QueryBuilderFormula,
 	QueryEnvelope,
 	QueryRangePayloadV5,
+	RequestType,
 } from 'types/api/v5/queryRange';
 import { EQueryType } from 'types/common/dashboard';
 import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
@@ -935,3 +936,41 @@ describe('convertBuilderQueriesToV5 having normalization', () => {
 		});
 	});
 });
+
+describe('convertBuilderQueriesToV5 builder query type', () => {
+	const buildEnvelope = (
+		builderQueryType: IBuilderQuery['builderQueryType'],
+		requestType: RequestType,
+	): QueryEnvelope => {
+		const [envelope] = convertBuilderQueriesToV5(
+			{
+				A: {
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					builderQueryType,
+				} as unknown as IBuilderQuery,
+			},
+			requestType,
+		);
+		return envelope;
+	};
+
+	it.each<[RequestType]>([
+		['trace'],
+		['raw'],
+		['time_series'],
+		['scalar'],
+		['distribution'],
+	])('sends builder_ai_query for the %s request type', (requestType) => {
+		expect(buildEnvelope('builder_ai_query', requestType).type).toBe(
+			'builder_ai_query',
+		);
+	});
+
+	it.each<[string, IBuilderQuery['builderQueryType']]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('sends builder_query for %s', (_label, builderQueryType) => {
+		expect(buildEnvelope(builderQueryType, 'trace').type).toBe('builder_query');
+	});
+});

frontend/src/api/v5/queryRange/prepareQueryRangePayloadV5.ts

@@ -365,7 +365,7 @@ export function convertBuilderQueriesToV5(
 			}
 
 			return {
-				type: 'builder_query' as QueryType,
+				type: queryData.builderQueryType ?? 'builder_query',
 				spec,
 			};
 		},

frontend/src/components/QueryBuilderV2/QueryBuilderV2.tsx

@@ -19,7 +19,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 	panelType: newPanelType,
 	filterConfigs = {},
 	queryComponents,
-	supportedDataSources,
 	isListViewPanel = false,
 	showOnlyWhereClause = false,
 	showTraceOperator = false,
@@ -202,7 +201,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 							query={currentQuery.builder.queryData[0]}
 							filterConfigs={queryFilterConfigs}
 							queryComponents={queryComponents}
-							supportedDataSources={supportedDataSources}
 							isMultiQueryAllowed={isMultiQueryAllowed}
 							showTraceOperator={showTraceOperator}
 							hasTraceOperator={hasTraceOperator}
@@ -226,7 +224,6 @@ export const QueryBuilderV2 = memo(function QueryBuilderV2({
 								query={query}
 								filterConfigs={queryFilterConfigs}
 								queryComponents={queryComponents}
-								supportedDataSources={supportedDataSources}
 								version={version}
 								isMultiQueryAllowed={isMultiQueryAllowed}
 								isAvailableToDisable={false}

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

@@ -16,8 +16,6 @@ import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
 import { Button, Card, Collapse, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
-import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
 import {
 	negationQueryOperatorSuggestions,
@@ -54,6 +52,12 @@ import {
 	SUGGESTION_FETCH_DEBOUNCE_MS,
 	SUGGESTIONS_SECTION,
 } from './constants';
+import {
+	fetchFieldKeysForQuery,
+	fetchFieldValuesForQuery,
+	SuggestedFieldKey,
+	SuggestedFieldKeysByName,
+} from './fieldSuggestions';
 import {
 	combineInitialAndUserExpression,
 	dedupeOptionsByLabel,
@@ -261,10 +265,8 @@ function QuerySearch({
 	const dashboardDynamicVariables = useDynamicVariableSuggestions();
 
 	// Add back the generateOptions function and useEffect
-	const generateOptions = (keys: {
-		[key: string]: QueryKeyDataSuggestionsProps[];
-	}): any[] =>
-		Object.values(keys).flatMap((items: QueryKeyDataSuggestionsProps[]) =>
+	const generateOptions = (keys: SuggestedFieldKeysByName): any[] =>
+		Object.values(keys).flatMap((items: SuggestedFieldKey[]) =>
 			items.map(({ name, fieldDataType, fieldContext }) => ({
 				label: name,
 				type: fieldDataType === 'string' ? 'keyword' : fieldDataType,
@@ -317,8 +319,9 @@ function QuerySearch({
 
 			lastFetchedKeyRef.current = searchText || '';
 
-			const response = await getKeySuggestions({
-				signal: dataSource,
+			const response = await fetchFieldKeysForQuery({
+				builderQueryType: queryData.builderQueryType,
+				dataSource,
 				searchText: searchText || '',
 				metricName: debouncedMetricName ?? undefined,
 				signalSource: signalSource as 'meter' | '',
@@ -360,6 +363,7 @@ function QuerySearch({
 			hardcodedAttributeKeys,
 			showFilterSuggestionsWithoutMetric,
 			metricNamespace,
+			queryData.builderQueryType,
 		],
 	);
 
@@ -493,10 +497,11 @@ function QuerySearch({
 			try {
 				const values = valueSuggestionsOverride
 					? await valueSuggestionsOverride(key, sanitizedSearchText)
-					: await getValueSuggestions({
+					: await fetchFieldValuesForQuery({
+							builderQueryType: queryData.builderQueryType,
+							dataSource,
 							key,
 							searchText: sanitizedSearchText,
-							signal: dataSource,
 							signalSource: signalSource as 'meter' | '',
 							metricName: debouncedMetricName ?? undefined,
 						}).then((response) => {
@@ -601,6 +606,7 @@ function QuerySearch({
 			signalSource,
 			toggleSuggestions,
 			valueSuggestionsOverride,
+			queryData.builderQueryType,
 		],
 	);
 

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/__tests__/fieldSuggestions.test.ts

@@ -0,0 +1,215 @@
+import {
+	getAIObservabilityFieldsKeys,
+	getAIObservabilityFieldsValues,
+} from 'api/generated/services/ai-observability';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { DataSource } from 'types/common/queryBuilder';
+
+import {
+	fetchFieldKeysForQuery,
+	fetchFieldValuesForQuery,
+} from '../fieldSuggestions';
+
+jest.mock('api/generated/services/ai-observability', () => ({
+	getAIObservabilityFieldsKeys: jest.fn(),
+	getAIObservabilityFieldsValues: jest.fn(),
+}));
+
+jest.mock('api/querySuggestions/getKeySuggestions', () => ({
+	getKeySuggestions: jest.fn(),
+}));
+
+jest.mock('api/querySuggestions/getValueSuggestion', () => ({
+	getValueSuggestions: jest.fn(),
+}));
+
+const mockedAIKeys = getAIObservabilityFieldsKeys as jest.MockedFunction<
+	typeof getAIObservabilityFieldsKeys
+>;
+const mockedGenericKeys = getKeySuggestions as jest.MockedFunction<
+	typeof getKeySuggestions
+>;
+const mockedAIValues = getAIObservabilityFieldsValues as jest.MockedFunction<
+	typeof getAIObservabilityFieldsValues
+>;
+const mockedGenericValues = getValueSuggestions as jest.MockedFunction<
+	typeof getValueSuggestions
+>;
+
+const aiValuesResponse = (
+	values: { stringValues?: string[]; numberValues?: number[] } | null,
+	complete = true,
+): Awaited<ReturnType<typeof getAIObservabilityFieldsValues>> =>
+	({
+		status: 'success',
+		data: { complete, values },
+	}) as Awaited<ReturnType<typeof getAIObservabilityFieldsValues>>;
+
+describe('fetchFieldKeysForQuery', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
+		mockedAIKeys.mockResolvedValue({
+			status: 'success',
+			data: {
+				complete: true,
+				keys: { llm_call_count: [{ name: 'llm_call_count' }] },
+			},
+		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
+
+		const keys = await fetchFieldKeysForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			searchText: 'llm',
+		});
+
+		expect(mockedAIKeys).toHaveBeenCalledWith({ searchText: 'llm' });
+		expect(mockedGenericKeys).not.toHaveBeenCalled();
+		expect(keys.data.data).toStrictEqual({
+			complete: true,
+			keys: { llm_call_count: [{ name: 'llm_call_count' }] },
+		});
+	});
+
+	it.each<[string, 'builder_query' | undefined]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
+		mockedGenericKeys.mockResolvedValue({
+			data: { status: 'success', data: { complete: true, keys: {} } },
+		} as Awaited<ReturnType<typeof getKeySuggestions>>);
+
+		await fetchFieldKeysForQuery({
+			builderQueryType,
+			dataSource: DataSource.TRACES,
+			searchText: 'svc',
+		});
+
+		expect(mockedAIKeys).not.toHaveBeenCalled();
+		expect(mockedGenericKeys).toHaveBeenCalledWith(
+			expect.objectContaining({ signal: DataSource.TRACES, searchText: 'svc' }),
+		);
+	});
+
+	it('normalizes a null ai_observability keys payload to an empty map', async () => {
+		mockedAIKeys.mockResolvedValue({
+			status: 'success',
+			data: { complete: false, keys: null },
+		} as Awaited<ReturnType<typeof getAIObservabilityFieldsKeys>>);
+
+		const response = await fetchFieldKeysForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			searchText: '',
+		});
+
+		expect(response.data.data).toStrictEqual({ complete: false, keys: {} });
+	});
+
+	it('passes the generic response through untouched', async () => {
+		const genericResponse = {
+			data: { status: 'success', data: { complete: true, keys: {} } },
+		} as unknown as Awaited<ReturnType<typeof getKeySuggestions>>;
+		mockedGenericKeys.mockResolvedValue(genericResponse);
+
+		await expect(
+			fetchFieldKeysForQuery({
+				builderQueryType: 'builder_query',
+				dataSource: DataSource.TRACES,
+				searchText: '',
+			}),
+		).resolves.toBe(genericResponse);
+	});
+});
+
+describe('fetchFieldValuesForQuery', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('reads the ai_observability endpoint for a builder_ai_query', async () => {
+		mockedAIValues.mockResolvedValue(
+			aiValuesResponse({ stringValues: ['gpt-4o'], numberValues: [] }),
+		);
+
+		const response = await fetchFieldValuesForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			key: 'gen_ai.request.model',
+			searchText: 'gpt',
+		});
+
+		expect(mockedGenericValues).not.toHaveBeenCalled();
+		expect(response).toStrictEqual({
+			data: {
+				data: {
+					complete: true,
+					values: { stringValues: ['gpt-4o'], numberValues: [] },
+				},
+			},
+		});
+	});
+
+	it('forwards the key as the name the endpoint expects', async () => {
+		mockedAIValues.mockResolvedValue(aiValuesResponse({}));
+
+		await fetchFieldValuesForQuery({
+			builderQueryType: 'builder_ai_query',
+			dataSource: DataSource.TRACES,
+			key: 'total_tokens',
+			searchText: '',
+		});
+
+		expect(mockedAIValues).toHaveBeenCalledWith({
+			name: 'total_tokens',
+			searchText: '',
+		});
+	});
+
+	it('wraps the ai_observability payload in the envelope the call site unwraps', async () => {
+		mockedAIValues.mockResolvedValue(aiValuesResponse(null, false));
+
+		await expect(
+			fetchFieldValuesForQuery({
+				builderQueryType: 'builder_ai_query',
+				dataSource: DataSource.TRACES,
+				key: 'llm_call_count',
+				searchText: '',
+			}),
+		).resolves.toStrictEqual({
+			data: { data: { complete: false, values: null } },
+		});
+	});
+
+	it.each<[string, 'builder_query' | undefined]>([
+		['an unmarked query', undefined],
+		['an explicitly generic query', 'builder_query'],
+	])('reads the generic endpoint for %s', async (_label, builderQueryType) => {
+		const genericResponse = {
+			data: {
+				data: { complete: false, values: { stringValues: ['frontend'] } },
+			},
+		} as unknown as Awaited<ReturnType<typeof getValueSuggestions>>;
+		mockedGenericValues.mockResolvedValue(genericResponse);
+
+		const response = await fetchFieldValuesForQuery({
+			builderQueryType,
+			dataSource: DataSource.TRACES,
+			key: 'service.name',
+			searchText: 'front',
+		});
+
+		expect(mockedAIValues).not.toHaveBeenCalled();
+		expect(mockedGenericValues).toHaveBeenCalledWith(
+			expect.objectContaining({
+				signal: DataSource.TRACES,
+				key: 'service.name',
+				searchText: 'front',
+			}),
+		);
+		expect(response).toBe(genericResponse);
+	});
+});

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/fieldSuggestions.ts

@@ -0,0 +1,111 @@
+import {
+	getAIObservabilityFieldsKeys,
+	getAIObservabilityFieldsValues,
+} from 'api/generated/services/ai-observability';
+import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
+import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+export interface SuggestedFieldKey {
+	name: string;
+	fieldContext?: string;
+	fieldDataType?: string;
+}
+
+export type SuggestedFieldKeysByName = Record<string, SuggestedFieldKey[]>;
+
+export interface SuggestedFieldKeysPayload {
+	complete: boolean;
+	keys: SuggestedFieldKeysByName;
+}
+
+export interface SuggestedFieldKeysResponse {
+	data: { data?: SuggestedFieldKeysPayload };
+}
+
+export interface SuggestedFieldValuesPayload {
+	complete?: boolean;
+	values?: {
+		stringValues?: string[] | null;
+		numberValues?: number[] | null;
+	} | null;
+}
+
+export interface SuggestedFieldValuesResponse {
+	data: { data?: SuggestedFieldValuesPayload };
+}
+
+interface FetchFieldKeysParams {
+	builderQueryType: IBuilderQuery['builderQueryType'];
+	dataSource: DataSource;
+	searchText: string;
+	metricName?: string;
+	signalSource?: 'meter' | '';
+	metricNamespace?: string;
+}
+
+interface FetchFieldValuesParams {
+	builderQueryType: IBuilderQuery['builderQueryType'];
+	dataSource: DataSource;
+	key: string;
+	searchText: string;
+	metricName?: string;
+	signalSource?: 'meter' | '';
+}
+
+export const fetchFieldKeysForQuery = async ({
+	builderQueryType,
+	dataSource,
+	searchText,
+	metricName,
+	signalSource,
+	metricNamespace,
+}: FetchFieldKeysParams): Promise<SuggestedFieldKeysResponse> => {
+	if (builderQueryType === 'builder_ai_query') {
+		const response = await getAIObservabilityFieldsKeys({ searchText });
+
+		return {
+			data: {
+				data: response.data
+					? { complete: response.data.complete, keys: response.data.keys ?? {} }
+					: undefined,
+			},
+		};
+	}
+
+	return getKeySuggestions({
+		signal: dataSource,
+		searchText,
+		metricName,
+		signalSource,
+		metricNamespace,
+	});
+};
+
+export const fetchFieldValuesForQuery = async ({
+	builderQueryType,
+	dataSource,
+	key,
+	searchText,
+	metricName,
+	signalSource,
+}: FetchFieldValuesParams): Promise<SuggestedFieldValuesResponse> => {
+	if (builderQueryType === 'builder_ai_query') {
+		const response = await getAIObservabilityFieldsValues({
+			name: key,
+			searchText,
+		});
+
+		return { data: { data: response.data } };
+	}
+
+	// getValueSuggestions' declared response type does not match what the endpoint returns.
+	return getValueSuggestions({
+		signal: dataSource,
+		key,
+		searchText,
+		signalSource,
+		metricName,
+	}) as unknown as Promise<SuggestedFieldValuesResponse>;
+};

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

@@ -32,7 +32,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 		queryVariant,
 		query,
 		filterConfigs,
-		supportedDataSources,
 		isListViewPanel = false,
 		showTraceOperator = false,
 		hasTraceOperator = false,
@@ -55,7 +54,7 @@ export const QueryV2 = forwardRef(function QueryV2(
 	const { cloneQuery, panelType } = useQueryBuilder();
 
 	const showFunctions = query?.functions?.length > 0;
-	const { dataSource } = query;
+	const { dataSource, builderQueryType } = query;
 
 	const [isCollapsed, setIsCollapsed] = useState(false);
 
@@ -95,8 +94,9 @@ export const QueryV2 = forwardRef(function QueryV2(
 	);
 
 	const showSpanScopeSelector = useMemo(
-		() => dataSource === DataSource.TRACES,
-		[dataSource],
+		() =>
+			dataSource === DataSource.TRACES && builderQueryType !== 'builder_ai_query',
+		[dataSource, builderQueryType],
 	);
 
 	const showInlineQuerySearch = useMemo(() => {
@@ -170,7 +170,6 @@ export const QueryV2 = forwardRef(function QueryV2(
 									isListViewPanel={isListViewPanel}
 									index={index}
 									queryVariant={queryVariant}
-									supportedDataSources={supportedDataSources}
 									onChangeDataSource={handleChangeDataSource}
 								/>
 							</div>

frontend/src/constants/panelTypes.ts

@@ -31,8 +31,6 @@ export const getComponentForPanelType = (
 		[PANEL_TYPES.BAR]: Uplot,
 		[PANEL_TYPES.PIE]: null,
 		[PANEL_TYPES.HISTOGRAM]: Uplot,
-		// V2-only kind; it renders through the V2 panel registry.
-		[PANEL_TYPES.HEATMAP]: null,
 		[PANEL_TYPES.EMPTY_WIDGET]: null,
 	};
 

frontend/src/constants/queryBuilder.ts

@@ -348,6 +348,19 @@ export const initialQueryMeterWithType: Query = {
 	},
 };
 
+export const initialQueryAIWithType: Query = {
+	...initialQueryWithType,
+	builder: {
+		...initialQueryWithType.builder,
+		queryData: [
+			{
+				...initialQueryBuilderFormValuesMap.traces,
+				builderQueryType: 'builder_ai_query',
+			},
+		],
+	},
+};
+
 export const operatorsByTypes: Record<LocalDataType, string[]> = {
 	string: Object.values(StringOperators),
 	number: Object.values(NumberOperators),
@@ -363,7 +376,6 @@ export enum PANEL_TYPES {
 	BAR = 'bar',
 	PIE = 'pie',
 	HISTOGRAM = 'histogram',
-	HEATMAP = 'heatmap',
 	EMPTY_WIDGET = 'EMPTY_WIDGET',
 }
 
@@ -611,7 +623,6 @@ export const PANEL_TYPES_INITIAL_QUERY: Record<PANEL_TYPES, Query> = {
 	[PANEL_TYPES.BAR]: initialQueriesMap.metrics,
 	[PANEL_TYPES.PIE]: initialQueriesMap.metrics,
 	[PANEL_TYPES.HISTOGRAM]: initialQueriesMap.metrics,
-	[PANEL_TYPES.HEATMAP]: initialQueriesMap.metrics,
 	[PANEL_TYPES.EMPTY_WIDGET]: initialQueriesMap.metrics,
 };
 

frontend/src/container/LLMObservability/Explorer/Explorer.tsx

@@ -11,17 +11,13 @@ import QuickFilters from 'components/QuickFilters/QuickFilters';
 import { QuickFiltersSource, SignalType } from 'components/QuickFilters/types';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { AVAILABLE_EXPORT_PANEL_TYPES } from 'constants/panelTypes';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { usePageActions } from 'container/AIAssistant/pageActions/usePageActions';
 import ExplorerOptionWrapper from 'container/ExplorerOptions/ExplorerOptionWrapper';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import LeftToolbarActions from 'container/QueryBuilder/components/ToolbarActions/LeftToolbarActions';
 import RightToolbarActions from 'container/QueryBuilder/components/ToolbarActions/RightToolbarActions';
 import Toolbar from 'container/Toolbar/Toolbar';
-import {
-	getExportQueryData,
-	getQueryByPanelType,
-} from 'container/TracesExplorer/explorerUtils';
 import { ExportDashboard } from 'hooks/dashboard/useExportDashboards';
 import { useGetExportToDashboardLink } from 'hooks/dashboard/useGetExportToDashboardLink';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
@@ -52,6 +48,7 @@ import {
 import { v4 } from 'uuid';
 
 import { TOOLBAR_VIEWS } from './constants';
+import { getExportQueryData, getQueryByPanelType } from './explorerUtils';
 import ListView from './ListView/ListView';
 import { defaultSelectedColumns } from './ListView/configs';
 import QuerySection from './QuerySection/QuerySection';
@@ -118,7 +115,7 @@ function Explorer(): JSX.Element {
 	const defaultQuery = useMemo(
 		(): Query =>
 			updateAllQueriesOperators(
-				initialQueriesMap.traces,
+				initialQueryAIWithType,
 				PANEL_TYPES.LIST,
 				DataSource.TRACES,
 			),
@@ -185,7 +182,7 @@ function Explorer(): JSX.Element {
 	const exportDefaultQuery = useMemo(
 		() =>
 			getQueryByPanelType(
-				stagedQuery || initialQueriesMap.traces,
+				stagedQuery || initialQueryAIWithType,
 				panelType || PANEL_TYPES.LIST,
 			),
 		[stagedQuery, panelType],

frontend/src/container/LLMObservability/Explorer/ListView/ListView.tsx

@@ -17,12 +17,11 @@ import ListViewOrderBy from 'components/OrderBy/ListViewOrderBy';
 import type { TableColumnDef } from 'components/TanStackTableView/types';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import {
 	getTraceLink,
 	transformSpanRows,
@@ -43,6 +42,7 @@ import { Warning } from 'types/api';
 import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 
+import { getListViewQuery } from '../explorerUtils';
 import {
 	defaultSelectedColumns,
 	PER_PAGE_OPTIONS,
@@ -94,7 +94,7 @@ function ListView({
 		paginationQueryData ?? getDefaultPaginationConfig(PER_PAGE_OPTIONS);
 
 	const requestQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces, orderBy),
+		() => getListViewQuery(stagedQuery || initialQueryAIWithType, orderBy),
 		[stagedQuery, orderBy],
 	);
 

frontend/src/container/LLMObservability/Explorer/QuerySection/QuerySection.tsx

@@ -1,8 +1,6 @@
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import ExplorerOrderBy from 'container/ExplorerOrderBy';
-import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
 import { DataSource } from 'types/common/queryBuilder';
@@ -10,33 +8,16 @@ import { DataSource } from 'types/common/queryBuilder';
 function QuerySection(): JSX.Element {
 	const panelTypes = useGetPanelTypesQueryParam(PANEL_TYPES.LIST);
 
-	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
-		const isList = panelTypes === PANEL_TYPES.LIST;
-		const config: QueryBuilderProps['filterConfigs'] = {
+	// Only reaches the builder for timeseries/table; list/trace panels use QueryBuilderV2's listViewTracesFilterConfigs.
+	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
+		() => ({
 			stepInterval: { isHidden: false, isDisabled: false },
-			limit: { isHidden: isList, isDisabled: true },
-			having: { isHidden: isList, isDisabled: true },
-		};
-
-		return config;
-	}, [panelTypes]);
-
-	const renderOrderBy = useCallback(
-		({ query, onChange }: OrderByFilterProps) => (
-			<ExplorerOrderBy query={query} onChange={onChange} />
-		),
+			limit: { isHidden: false, isDisabled: true },
+			having: { isHidden: false, isDisabled: true },
+		}),
 		[],
 	);
 
-	const queryComponents = useMemo((): QueryBuilderProps['queryComponents'] => {
-		const shouldRenderCustomOrderBy =
-			panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE;
-
-		return {
-			...(shouldRenderCustomOrderBy ? { renderOrderBy } : {}),
-		};
-	}, [panelTypes, renderOrderBy]);
-
 	const isListViewPanel = useMemo(
 		() => panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE,
 		[panelTypes],
@@ -45,14 +26,10 @@ function QuerySection(): JSX.Element {
 	return (
 		<QueryBuilderV2
 			isListViewPanel={isListViewPanel}
-			showTraceOperator
 			config={{ initialDataSource: DataSource.TRACES, queryVariant: 'static' }}
-			queryComponents={queryComponents}
 			panelType={panelTypes}
 			filterConfigs={filterConfigs}
-			showOnlyWhereClause={
-				panelTypes === PANEL_TYPES.LIST || panelTypes === PANEL_TYPES.TRACE
-			}
+			showOnlyWhereClause={isListViewPanel}
 			version="v3" // setting this to v3 as we this is rendered in logs explorer
 		/>
 	);

frontend/src/container/LLMObservability/Explorer/TracesView/TracesView.tsx

@@ -14,10 +14,9 @@ import logEvent from 'api/common/logEvent';
 import DownloadOptionsMenu from 'components/DownloadOptionsMenu/DownloadOptionsMenu';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { initialQueryAIWithType, PANEL_TYPES } from 'constants/queryBuilder';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import TraceExplorerControls from 'container/TracesExplorer/Controls';
-import { getListViewQuery } from 'container/TracesExplorer/explorerUtils';
 import { getTraceLink } from 'container/TracesExplorer/ListView/utils';
 import { TracesTableRow } from 'container/TracesExplorer/TracesTable/getFieldColumn';
 import TracesTable from 'container/TracesExplorer/TracesTable/TracesTable';
@@ -31,6 +30,7 @@ import { DataSource } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import DOCLINKS from 'utils/docLinks';
 
+import { getListViewQuery } from '../explorerUtils';
 import { columns, PER_PAGE_OPTIONS } from './configs';
 import styles from './TracesView.module.scss';
 
@@ -60,7 +60,7 @@ function TracesView({
 	);
 
 	const transformedQuery = useMemo(
-		() => getListViewQuery(stagedQuery || initialQueriesMap.traces),
+		() => getListViewQuery(stagedQuery || initialQueryAIWithType),
 		[stagedQuery],
 	);
 

frontend/src/container/LLMObservability/Explorer/explorerUtils.ts

@@ -0,0 +1,61 @@
+import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import { OptionsQuery } from 'container/OptionsMenu/types';
+import { cloneDeep, set } from 'lodash-es';
+import { OrderByPayload, Query } from 'types/api/queryBuilder/queryBuilderData';
+
+export const getListViewQuery = (
+	stagedQuery: Query,
+	orderBy?: string,
+): Query => {
+	const query = stagedQuery
+		? cloneDeep(stagedQuery)
+		: cloneDeep(initialQueriesMap.traces);
+
+	const orderByPayload: OrderByPayload[] = orderBy
+		? [
+				{
+					columnName: orderBy.split(':')[0],
+					order: orderBy.split(':')[1] as 'asc' | 'desc',
+				},
+			]
+		: [];
+
+	for (let i = 0; i < query.builder.queryData.length; i++) {
+		const queryData = query.builder.queryData[i];
+		queryData.groupBy = [];
+		queryData.having = {
+			expression: '',
+		};
+		queryData.orderBy = orderByPayload;
+	}
+
+	return query;
+};
+
+export const getQueryByPanelType = (
+	stagedQuery: Query,
+	panelType: PANEL_TYPES,
+): Query => {
+	if (panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE) {
+		return getListViewQuery(stagedQuery);
+	}
+	return stagedQuery;
+};
+
+export const getExportQueryData = (
+	query: Query,
+	panelType: PANEL_TYPES,
+	options: OptionsQuery,
+): Query => {
+	if (panelType === PANEL_TYPES.LIST) {
+		const updatedQuery = cloneDeep(query);
+		set(
+			updatedQuery,
+			'builder.queryData[0].selectColumns',
+			options.selectColumns,
+		);
+
+		return updatedQuery;
+	}
+	return query;
+};

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

@@ -30,8 +30,6 @@ export type QueryBuilderProps = {
 	panelType: PANEL_TYPES;
 	actions?: ReactNode;
 	filterConfigs?: Partial<FilterConfigs>;
-	/** Signals the data-source dropdown may offer; defaults to all of them. */
-	supportedDataSources?: DataSource[];
 	queryComponents?: { renderOrderBy?: (props: OrderByFilterProps) => ReactNode };
 	isListViewPanel?: boolean;
 	showFunctions?: boolean;

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

@@ -3,8 +3,6 @@ import { DataSource } from 'types/common/queryBuilder';
 
 export type QueryLabelProps = {
 	onChange: (value: DataSource) => void;
-	/** The sources to offer. Overrides `isListViewPanel`; every known source when omitted. */
-	supportedDataSources?: DataSource[];
 	isListViewPanel?: boolean;
 	'data-testid'?: string;
 } & Omit<SelectProps, 'onChange'>;

frontend/src/container/QueryBuilder/components/DataSourceDropdown/DataSourceDropdown.tsx

@@ -15,28 +15,17 @@ const exploreDataSourceMap = [DataSource.LOGS, DataSource.TRACES];
 export const DataSourceDropdown = memo(function DataSourceDropdown(
 	props: QueryLabelProps,
 ): JSX.Element {
-	const {
-		onChange,
-		value,
-		style,
-		supportedDataSources,
-		isListViewPanel = false,
-	} = props;
+	const { onChange, value, style, isListViewPanel = false } = props;
 
-	// An explicit list wins; `isListViewPanel` only says which panel is asking.
-	const sources =
-		supportedDataSources && supportedDataSources.length > 0
-			? supportedDataSources
-			: isListViewPanel
-				? exploreDataSourceMap
-				: dataSourceMap;
-
-	const dataSourceOptions: SelectOption<DataSource, string>[] = sources.map(
-		(source) => ({
-			label: transformToUpperCase(source),
-			value: source,
-		}),
-	);
+	const dataSourceOptions: SelectOption<DataSource, string>[] = isListViewPanel
+		? exploreDataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}))
+		: dataSourceMap.map((source) => ({
+				label: transformToUpperCase(source),
+				value: source,
+			}));
 
 	return (
 		<Select

frontend/src/container/QueryBuilder/components/DataSourceDropdown/__tests__/DataSourceDropdown.test.tsx

@@ -1,94 +0,0 @@
-import { render, screen, userEvent } from 'tests/test-utils';
-import { DataSource } from 'types/common/queryBuilder';
-
-import { DataSourceDropdown } from '../DataSourceDropdown';
-
-const TEST_ID = 'query-data-source-selector';
-
-async function openDropdown(): Promise<void> {
-	const user = userEvent.setup();
-	const trigger = screen.getByTestId(TEST_ID);
-	await user.click(trigger.querySelector('.ant-select-selector') as HTMLElement);
-}
-
-describe('DataSourceDropdown', () => {
-	// antd's virtual list renders only the first couple of options into jsdom, so
-	// each case asserts what the restriction admits and excludes, not the full list.
-	it('offers the signals beyond the current one when nothing restricts it', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Metrics' })).toBeInTheDocument();
-	});
-
-	it('offers only the sources the caller can visualize', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				supportedDataSources={[DataSource.METRICS]}
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Metrics' }),
-		).resolves.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Logs' }),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Traces' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('lets an explicit list win over the list-panel default', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.METRICS}
-				supportedDataSources={[DataSource.METRICS]}
-				isListViewPanel
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Metrics' }),
-		).resolves.toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Logs' }),
-		).not.toBeInTheDocument();
-	});
-
-	it('falls back to the explorer sources for a list panel', async () => {
-		render(
-			<DataSourceDropdown
-				data-testid={TEST_ID}
-				value={DataSource.LOGS}
-				isListViewPanel
-				onChange={jest.fn()}
-			/>,
-		);
-		await openDropdown();
-
-		await expect(
-			screen.findByRole('option', { name: 'Logs' }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: 'Traces' })).toBeInTheDocument();
-		expect(
-			screen.queryByRole('option', { name: 'Metrics' }),
-		).not.toBeInTheDocument();
-	});
-});

frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx

@@ -41,8 +41,6 @@ interface QBEntityOptionsProps {
 	showTraceOperator?: boolean;
 	hasTraceOperator?: boolean;
 	queryVariant?: 'dropdown' | 'static';
-	/** Restricts the data-source dropdown; every known source when omitted. */
-	supportedDataSources?: DataSource[];
 	onChangeDataSource?: (value: DataSource) => void;
 }
 
@@ -64,7 +62,6 @@ export default function QBEntityOptions({
 	onCloneQuery,
 	index,
 	queryVariant,
-	supportedDataSources,
 	hasTraceOperator = false,
 	showTraceOperator = false,
 	onChangeDataSource,
@@ -141,7 +138,6 @@ export default function QBEntityOptions({
 										}}
 										data-testid={`query-data-source-selector-${index}`}
 										value={query?.dataSource || DataSource.METRICS}
-										supportedDataSources={supportedDataSources}
 										isListViewPanel={isListViewPanel}
 										className="query-data-source-dropdown"
 									/>

frontend/src/container/QueryBuilder/type.ts

@@ -35,7 +35,4 @@ export type QueryProps = {
 	hasTraceOperator?: boolean;
 	signalSource?: string;
 	isMultiQueryAllowed?: boolean;
-} & Pick<
-	QueryBuilderProps,
-	'filterConfigs' | 'queryComponents' | 'supportedDataSources'
->;
+} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/WidgetCard/Card/FullView/contants.ts

@@ -29,6 +29,5 @@ export const PANEL_TYPES_VS_FULL_VIEW_TABLE: PanelTypeAndGraphManagerVisibilityP
 		BAR: true,
 		PIE: false,
 		HISTOGRAM: false,
-		HEATMAP: false,
 		EMPTY_WIDGET: false,
 	};

frontend/src/container/WidgetCard/Panels/constants.ts

@@ -18,6 +18,4 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
 	[PANEL_TYPES.BAR]: BarPanel,
 	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
-	// V2-only kind; it renders through the V2 panel registry.
-	[PANEL_TYPES.HEATMAP]: null,
 };

frontend/src/lib/query/panelQuery.ts

@@ -99,7 +99,6 @@ export type PartialPanelTypes = {
 	[PANEL_TYPES.VALUE]: 'value';
 	[PANEL_TYPES.PIE]: 'pie';
 	[PANEL_TYPES.HISTOGRAM]: 'histogram';
-	[PANEL_TYPES.HEATMAP]: 'heatmap';
 };
 
 export const panelTypeDataSourceFormValuesMap: Record<
@@ -307,74 +306,6 @@ export const panelTypeDataSourceFormValuesMap: Record<
 			},
 		},
 	},
-	// `functions` and `having` are dropped rather than carried: the heatmap request
-	// rejects both. Every signal is listed because the map is keyed by the query's
-	// own, which a switch can still be holding.
-	[PANEL_TYPES.HEATMAP]: {
-		[DataSource.LOGS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.METRICS]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-		[DataSource.TRACES]: {
-			builder: {
-				queryData: [
-					'aggregateAttribute',
-					'aggregateOperator',
-					'timeAggregation',
-					'filters',
-					'filter',
-					'spaceAggregation',
-					'groupBy',
-					'limit',
-					'orderBy',
-					'stepInterval',
-					'legend',
-					'queryName',
-					'disabled',
-					'expression',
-					'aggregations',
-				],
-			},
-		},
-	},
 	[PANEL_TYPES.TABLE]: {
 		[DataSource.LOGS]: {
 			builder: {

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/components/HeatmapTooltip/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/components/HeatmapTooltip/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/components/HeatmapTooltip/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/components/HeatmapTooltip/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/components/HeatmapTooltip/__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/components/HeatmapTooltip/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';
 
 /**
@@ -104,21 +103,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

@@ -148,7 +148,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;
 
@@ -180,9 +179,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;
 

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

@@ -78,8 +78,6 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit axis splits, overriding the default tick calculation. */
-	splits?: uPlot.Axis.Splits;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */

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,444 +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 — the scale auto picks', () => {
-	// 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.Auto);
-		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.Auto);
-
-		// A linear fallback would leave the boundaries untransformed.
-		expect(splits).not.toStrictEqual([0, 5, 10]);
-	});
-
-	it('is what an all-positive layout does NOT get — that stays a plain log', () => {
-		const { splits } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Auto);
-
-		expect(splits).toStrictEqual(BOUNDS.map((bound) => Math.log10(bound)));
-	});
-
-	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.Auto)).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.Auto);
-		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.Auto);
-
-		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.Auto,
-		);
-
-		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.Auto,
-		);
-		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.Auto,
-		);
-
-		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.Auto);
-
-		expect(splits).toStrictEqual([0]);
-	});
-});
-
-describe('resolveHeatmapYAxis — an explicitly chosen scale', () => {
-	// The low end of the OTel SDK defaults: a zero bucket, then positive bounds.
-	const ZERO_HEAD = [0, 5, 10, 25];
-	// Clock skew in ms — a field that straddles zero.
-	const SKEW = [-100, -10, 0, 10, 100];
-
-	/** Row heights in axis units, which map linearly to pixels. */
-	function rowHeights(bounds: number[], scale: HeatmapAxisScale): number[] {
-		const { edges } = resolveHeatmapYAxis(bounds, scale);
-		return edges.slice(1).map((edge, index) => edge - edges[index]);
-	}
-
-	it('log stays a plain log10 for a positive layout', () => {
-		const { splits } = resolveHeatmapYAxis(BOUNDS, HeatmapAxisScale.Log);
-
-		expect(splits).toStrictEqual(BOUNDS.map((bound) => Math.log10(bound)));
-	});
-
-	it('log keeps its own answer for a zero bucket rather than becoming a symlog', () => {
-		const { splits } = resolveHeatmapYAxis(ZERO_HEAD, HeatmapAxisScale.Log);
-		// One bucket below the smallest positive bound, where a symlog would put it
-		// a whole decade below.
-		const gap = (Math.log10(25) - Math.log10(5)) / 2;
-
-		expect(splits[0]).toBeCloseTo(Math.log10(5) - gap, 6);
-		expect(splits.slice(1)).toStrictEqual([5, 10, 25].map((b) => Math.log10(b)));
-	});
-
-	it('log spends a bucket on the zero-crossing row where symlog spends a decade', () => {
-		const gap = (Math.log10(25) - Math.log10(5)) / 2;
-
-		// Row 1 is (0, 5] — the row above the zero bucket.
-		expect(rowHeights(ZERO_HEAD, HeatmapAxisScale.Log)[1]).toBeCloseTo(gap, 6);
-		expect(rowHeights(ZERO_HEAD, HeatmapAxisScale.Symlog)[1]).toBeCloseTo(1, 6);
-	});
-
-	it('log leaves every edge ascending with a zero bucket in the layout', () => {
-		const { edges } = resolveHeatmapYAxis(ZERO_HEAD, HeatmapAxisScale.Log);
-
-		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
-	});
-
-	it('log squashes several non-positive boundaries onto one edge — what symlog is for', () => {
-		const { edges } = resolveHeatmapYAxis(SKEW, HeatmapAxisScale.Log);
-
-		// -100, -10 and 0 have no logarithm and share the floor.
-		expect(edges[1]).toBe(edges[2]);
-		expect(edges[2]).toBe(edges[3]);
-		expect([...edges].sort((a, b) => a - b)).toStrictEqual(edges);
-	});
-
-	it('log has nothing to compress without a positive boundary and stays linear', () => {
-		const { splits } = resolveHeatmapYAxis([-5, 0], HeatmapAxisScale.Log);
-
-		expect(splits).toStrictEqual([-5, 0]);
-	});
-
-	it('symlog is a choice for a positive layout too, and is not the log axis', () => {
-		const positive = [1, 10, 100];
-
-		expect(
-			resolveHeatmapYAxis(positive, HeatmapAxisScale.Log).splits,
-		).toStrictEqual([0, 1, 2]);
-		// Threshold 1: the boundaries sit a decade apart, one unit above the linear band.
-		expect(
-			resolveHeatmapYAxis(positive, HeatmapAxisScale.Symlog).splits,
-		).toStrictEqual([1, 2, 3]);
-	});
-
-	it('symlog places boundaries either side of zero symmetrically', () => {
-		const heights = rowHeights(SKEW, HeatmapAxisScale.Symlog);
-
-		expect(Math.max(...heights) - Math.min(...heights)).toBeCloseTo(0, 6);
-	});
-
-	it('symlog has no magnitude to scale against when every boundary is zero', () => {
-		const { splits } = resolveHeatmapYAxis([0], HeatmapAxisScale.Symlog);
-
-		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,343 +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),
-	};
-}
-
-/** Symmetric log about the threshold the bucket layout implies. All-zero
- *  boundaries have no magnitude to scale against and stay linear. */
-function resolveSymlogTransform(bounds: number[]): AxisTransform {
-	if (!bounds.some((bound) => bound !== 0)) {
-		return LINEAR_TRANSFORM;
-	}
-	return createSymlogTransform(resolveLinearThreshold(bounds));
-}
-
-/** One typical bucket, in axis space — the mean ratio between adjacent positive
- *  boundaries, which on a geometric layout is exactly one bucket. */
-function resolveLogGap(positive: number[]): number {
-	const axisFirst = Math.log10(positive[0]);
-	const axisLast = Math.log10(positive[positive.length - 1]);
-	const gap =
-		positive.length > 1
-			? (axisLast - axisFirst) / (positive.length - 1)
-			: Math.log10(FALLBACK_LOG_RATIO);
-	return gap > 0 ? gap : Math.log10(FALLBACK_LOG_RATIO);
-}
-
-/**
- * Plain log10, with the boundaries a logarithm has no answer for — zero and
- * below — pinned one bucket beneath the smallest positive one. They keep their
- * own rows, ticks and labels; only their height is synthetic, and it is the
- * height of a bucket rather than the decade a symmetric log would spend on them.
- *
- * Several of them share that one edge, which squashes them together: a layout
- * that straddles zero wants `Symlog`. This is the scale for the one non-positive
- * boundary an explicit-bounds histogram routinely carries — its zero bucket.
- */
-function createFloorLogTransform(positive: number[]): AxisTransform {
-	const floor = Math.log10(positive[0]) - resolveLogGap(positive);
-	return {
-		toAxisValue: (value) => (value > 0 ? Math.log10(value) : floor),
-		toBucketValue: (axisValue) => 10 ** axisValue,
-	};
-}
-
-function resolveAxisTransform(
-	bounds: number[],
-	scale: HeatmapAxisScale,
-): AxisTransform {
-	if (scale === HeatmapAxisScale.Linear) {
-		return LINEAR_TRANSFORM;
-	}
-	if (scale === HeatmapAxisScale.Symlog) {
-		return resolveSymlogTransform(bounds);
-	}
-	if (canUseLogAxis(bounds)) {
-		return LOG_TRANSFORM;
-	}
-	// A plain log is still a plain log where the boundaries allow one; `Auto`
-	// instead reads the layout and answers with the scale that fits it.
-	if (scale === HeatmapAxisScale.Log) {
-		const positive = bounds.filter((bound) => bound > 0);
-		return positive.length > 0
-			? createFloorLogTransform(positive)
-			: LINEAR_TRANSFORM;
-	}
-	return resolveSymlogTransform(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 };
-}

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

@@ -1,170 +0,0 @@
-import uPlot from 'uplot';
-
-import {
-	createHeatmapColorResolver,
-	HeatmapColorResolver,
-	resolveCountDomain,
-} from './colorScale';
-import { resolveColumnIndex, resolveRowIndex } from './geometry';
-import {
-	createHoverOverlay,
-	HeatmapHoverOverlay,
-	showHoverOverlay,
-} from './hoverOverlay';
-import { createHatchPattern, drawCells, drawOverflowBoundary } from './paint';
-import { HeatmapCell, HeatmapColorOptions, HeatmapYAxis } from './types';
-
-export interface HeatmapRenderOptions {
-	yAxis: HeatmapYAxis;
-	/** Column width in seconds. */
-	step: number;
-	colors: HeatmapColorOptions;
-	isDarkMode: boolean;
-	/** Opacity-mode fill when `colors.fill` is empty. */
-	seriesColor: string;
-	/** Default true. */
-	dimOnHover?: boolean;
-	/** `null` when the cursor leaves. */
-	onHoverChange?: (cell: HeatmapCell | null) => void;
-}
-
-/**
- * Registered through `UPlotConfigBuilder.addHook`, not as a `uPlot.Plugin`: uPlot
- * appends plugin hooks *after* the hook arrays, and `setCursor` must run before
- * TooltipPlugin's so the focused row is resolved when the tooltip positions
- * itself. As a plugin it trails a frame and the tooltip flashes at the origin.
- */
-export interface HeatmapHooks {
-	init: (u: uPlot) => void;
-	draw: (u: uPlot) => void;
-	setCursor: (u: uPlot) => void;
-	destroy: (u: uPlot) => void;
-}
-
-export function createHeatmapHooks({
-	yAxis,
-	step,
-	colors,
-	isDarkMode,
-	seriesColor,
-	dimOnHover = true,
-	onHoverChange,
-}: HeatmapRenderOptions): HeatmapHooks {
-	let overlay: HeatmapHoverOverlay | null = null;
-	let hovered: HeatmapCell | null = null;
-	let hatchPattern: CanvasPattern | null = null;
-
-	// On auto, the domain comes from the data, but these hooks are captured once at
-	// config-build time. Resolving lazily keeps a refetch on uPlot's `setData` path
-	// rather than forcing a rebuild.
-	let cachedData: uPlot.AlignedData | null = null;
-	let cachedResolver: HeatmapColorResolver | null = null;
-
-	function getResolver(u: uPlot): HeatmapColorResolver {
-		if (cachedResolver && cachedData === u.data) {
-			return cachedResolver;
-		}
-		cachedResolver = createHeatmapColorResolver({
-			options: colors,
-			domain: resolveCountDomain(
-				colors,
-				u.data.slice(1) as Array<Array<number | null>>,
-			),
-			isDarkMode,
-			seriesColor,
-		});
-		cachedData = u.data;
-		return cachedResolver;
-	}
-
-	function clearHover(u: uPlot): void {
-		if (overlay) {
-			overlay.container.style.display = 'none';
-		}
-		if (hovered === null) {
-			return;
-		}
-		hovered = null;
-		u.setSeries(null, { focus: true });
-		onHoverChange?.(null);
-	}
-
-	return {
-		init: (u: uPlot): void => {
-			overlay = createHoverOverlay(isDarkMode);
-			u.over.appendChild(overlay.container);
-		},
-
-		draw: (u: uPlot): void => {
-			const timestamps = u.data[0] as ArrayLike<number> | undefined;
-			if (!timestamps?.length || yAxis.rows.length === 0) {
-				return;
-			}
-			const { ctx } = u;
-			hatchPattern ??= createHatchPattern(ctx, isDarkMode);
-
-			ctx.save();
-			ctx.beginPath();
-			ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height);
-			ctx.clip();
-			drawCells({ u, yAxis, step, resolver: getResolver(u), hatchPattern });
-			ctx.restore();
-
-			drawOverflowBoundary({ u, yAxis, isDarkMode });
-		},
-
-		setCursor: (u: uPlot): void => {
-			const { left = -10, top = -10 } = u.cursor;
-			if (left < 0 || top < 0) {
-				clearHover(u);
-				return;
-			}
-
-			const column = resolveColumnIndex(
-				u.data[0] as ArrayLike<number>,
-				u.posToVal(left, 'x'),
-				step,
-			);
-			const row = resolveRowIndex(yAxis.edges, u.posToVal(top, 'y'));
-			if (column === null || row === null) {
-				clearHover(u);
-				return;
-			}
-			if (hovered?.row === row && hovered?.column === column) {
-				return;
-			}
-
-			hovered = {
-				row,
-				column,
-				count:
-					(u.data[row + 1] as Array<number | null> | undefined)?.[column] ?? null,
-			};
-			// Drives TooltipPlugin, which only shows a tooltip for a focused series.
-			// uPlot's own focus is disabled here: it picks the series nearest in value
-			// space, and a heatmap's value is a colour, not a y coordinate.
-			u.setSeries(row + 1, { focus: true });
-			if (overlay) {
-				showHoverOverlay({
-					overlay,
-					u,
-					yAxis,
-					step,
-					row,
-					column,
-					dim: dimOnHover,
-				});
-			}
-			onHoverChange?.(hovered);
-		},
-
-		destroy: (): void => {
-			overlay?.container.remove();
-			overlay = null;
-			hovered = null;
-			hatchPattern = null;
-			cachedData = null;
-			cachedResolver = null;
-		},
-	};
-}

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

@@ -1,118 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import uPlot from 'uplot';
-
-import { HeatmapYAxis } from './types';
-
-const HIGHLIGHT_BORDER_WIDTH = 1;
-/** ~55% alpha. */
-const DIM_ALPHA = '8C';
-
-export interface HeatmapHoverOverlay {
-	container: HTMLDivElement;
-	highlight: HTMLDivElement;
-	/** Four corner rects whose complement is the hovered row/column cross. */
-	dims: HTMLDivElement[];
-}
-
-function createOverlayElement(): HTMLDivElement {
-	const element = document.createElement('div');
-	element.style.position = 'absolute';
-	element.style.pointerEvents = 'none';
-	return element;
-}
-
-function setRect(
-	element: HTMLDivElement,
-	left: number,
-	top: number,
-	width: number,
-	height: number,
-): void {
-	element.style.left = `${left}px`;
-	element.style.top = `${top}px`;
-	element.style.width = `${Math.max(0, width)}px`;
-	element.style.height = `${Math.max(0, height)}px`;
-}
-
-/** Kept out of the canvas so moving between cells repositions a few nodes
- *  instead of repainting the grid. */
-export function createHoverOverlay(isDarkMode: boolean): HeatmapHoverOverlay {
-	const container = createOverlayElement();
-	container.style.inset = '0';
-	container.style.display = 'none';
-	container.setAttribute('data-testid', 'heatmap-hover-overlay');
-
-	const dimColor = `${
-		isDarkMode ? Color.BG_INK_500 : Color.BG_VANILLA_100
-	}${DIM_ALPHA}`;
-	const dims = Array.from({ length: 4 }, () => {
-		const dim = createOverlayElement();
-		dim.style.background = dimColor;
-		container.appendChild(dim);
-		return dim;
-	});
-
-	const highlight = createOverlayElement();
-	highlight.style.border = `${HIGHLIGHT_BORDER_WIDTH}px solid ${
-		isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_300
-	}`;
-	highlight.style.boxSizing = 'border-box';
-	container.appendChild(highlight);
-
-	return { container, highlight, dims };
-}
-
-/** Positions the highlight, and the four corner rects so only the hovered row
- *  and column stay at full contrast. */
-export function showHoverOverlay({
-	overlay,
-	u,
-	yAxis,
-	step,
-	row,
-	column,
-	dim,
-}: {
-	overlay: HeatmapHoverOverlay;
-	u: uPlot;
-	yAxis: HeatmapYAxis;
-	step: number;
-	row: number;
-	column: number;
-	dim: boolean;
-}): void {
-	const timestamps = u.data[0] as ArrayLike<number>;
-	const width = u.over.clientWidth;
-	const height = u.over.clientHeight;
-
-	const cellLeft = u.valToPos(timestamps[column], 'x');
-	const cellRight = u.valToPos(timestamps[column] + step, 'x');
-	const cellTop = u.valToPos(yAxis.edges[row + 1], 'y');
-	const cellBottom = u.valToPos(yAxis.edges[row], 'y');
-
-	setRect(
-		overlay.highlight,
-		cellLeft,
-		cellTop,
-		cellRight - cellLeft,
-		cellBottom - cellTop,
-	);
-
-	const [topLeft, topRight, bottomLeft, bottomRight] = overlay.dims;
-	if (dim) {
-		setRect(topLeft, 0, 0, cellLeft, cellTop);
-		setRect(topRight, cellRight, 0, width - cellRight, cellTop);
-		setRect(bottomLeft, 0, cellBottom, cellLeft, height - cellBottom);
-		setRect(
-			bottomRight,
-			cellRight,
-			cellBottom,
-			width - cellRight,
-			height - cellBottom,
-		);
-	} else {
-		overlay.dims.forEach((element) => setRect(element, 0, 0, 0, 0));
-	}
-
-	overlay.container.style.display = 'block';
-}

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

@@ -1,128 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import uPlot from 'uplot';
-
-import { HeatmapColorResolver } from './colorScale';
-import { HeatmapYAxis } from './types';
-
-/** Cells at least this wide/tall keep a hairline separator. */
-const MIN_CELL_SIZE_FOR_GAP = 4;
-const HATCH_TILE_SIZE = 6;
-const OVERFLOW_DASH: [number, number] = [4, 3];
-
-/** Hatch for `null` cells: a gap must never share the bottom-of-scale fill, or a
- *  scrape outage reads as a quiet period. */
-export function createHatchPattern(
-	ctx: CanvasRenderingContext2D,
-	isDarkMode: boolean,
-): CanvasPattern | null {
-	const pxRatio = uPlot.pxRatio;
-	const size = Math.max(2, Math.round(HATCH_TILE_SIZE * pxRatio));
-	const tile = document.createElement('canvas');
-	tile.width = size;
-	tile.height = size;
-
-	const tileCtx = tile.getContext('2d');
-	if (!tileCtx) {
-		return null;
-	}
-	tileCtx.strokeStyle = isDarkMode
-		? `${Color.BG_VANILLA_400}59`
-		: `${Color.BG_INK_300}40`;
-	tileCtx.lineWidth = Math.max(1, pxRatio);
-	tileCtx.beginPath();
-	// Three strokes keep the pattern continuous across tile seams.
-	tileCtx.moveTo(0, size);
-	tileCtx.lineTo(size, 0);
-	tileCtx.moveTo(-size / 2, size / 2);
-	tileCtx.lineTo(size / 2, -size / 2);
-	tileCtx.moveTo(size / 2, size * 1.5);
-	tileCtx.lineTo(size * 1.5, size / 2);
-	tileCtx.stroke();
-
-	return ctx.createPattern(tile, 'repeat');
-}
-
-/** One canvas pass. Offscreen columns are skipped rather than clipped. */
-// eslint-disable-next-line sonarjs/cognitive-complexity
-export function drawCells({
-	u,
-	yAxis,
-	step,
-	resolver,
-	hatchPattern,
-}: {
-	u: uPlot;
-	yAxis: HeatmapYAxis;
-	step: number;
-	resolver: HeatmapColorResolver;
-	hatchPattern: CanvasPattern | null;
-}): void {
-	const { ctx } = u;
-	const timestamps = u.data[0] as ArrayLike<number>;
-	const { rows, edges } = yAxis;
-	const pxRatio = uPlot.pxRatio;
-
-	const xMin = u.scales.x.min ?? timestamps[0];
-	const xMax = u.scales.x.max ?? timestamps[timestamps.length - 1] + step;
-	const rowEdgePositions = edges.map((edge) => u.valToPos(edge, 'y', true));
-
-	for (let column = 0; column < timestamps.length; column += 1) {
-		const columnStart = timestamps[column];
-		const columnEnd = columnStart + step;
-		if (columnEnd < xMin || columnStart > xMax) {
-			continue;
-		}
-
-		const left = u.valToPos(columnStart, 'x', true);
-		const rawWidth = u.valToPos(columnEnd, 'x', true) - left;
-		const gapX = rawWidth > MIN_CELL_SIZE_FOR_GAP * pxRatio ? pxRatio : 0;
-		const width = Math.max(1, rawWidth - gapX);
-
-		for (let row = 0; row < rows.length; row += 1) {
-			const top = rowEdgePositions[row + 1];
-			const rawHeight = rowEdgePositions[row] - top;
-			const gapY = rawHeight > MIN_CELL_SIZE_FOR_GAP * pxRatio ? pxRatio : 0;
-
-			const count = (u.data[row + 1] as Array<number | null> | undefined)?.[
-				column
-			];
-			const fill = resolver.colorFor(count ?? null);
-
-			if (fill === null && hatchPattern === null) {
-				continue;
-			}
-			ctx.fillStyle = fill ?? (hatchPattern as CanvasPattern);
-			ctx.fillRect(left, top, width, Math.max(1, rawHeight - gapY));
-		}
-	}
-}
-
-/** The `+Inf` row is unbounded, so its height is a drawing convenience and
- *  should not be compared with the real buckets. */
-export function drawOverflowBoundary({
-	u,
-	yAxis,
-	isDarkMode,
-}: {
-	u: uPlot;
-	yAxis: HeatmapYAxis;
-	isDarkMode: boolean;
-}): void {
-	const overflowIndex = yAxis.rows.length - 1;
-	if (overflowIndex < 1 || !yAxis.rows[overflowIndex].isOverflow) {
-		return;
-	}
-
-	const { ctx } = u;
-	const y = Math.round(u.valToPos(yAxis.edges[overflowIndex], 'y', true));
-
-	ctx.save();
-	ctx.setLineDash(OVERFLOW_DASH);
-	ctx.lineWidth = Math.max(1, uPlot.pxRatio);
-	ctx.strokeStyle = isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_300;
-	ctx.beginPath();
-	ctx.moveTo(u.bbox.left, y);
-	ctx.lineTo(u.bbox.left + u.bbox.width, y);
-	ctx.stroke();
-	ctx.restore();
-}

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

@@ -1,167 +0,0 @@
-import { HeatmapColorPalette } from './types';
-
-interface PaletteDefinition {
-	/** Evenly spaced, one end of the ramp to the other. */
-	stops: string[];
-	/** `true` when `stops[0]` is the dark end. */
-	darkFirst: boolean;
-}
-
-/**
- * Stop values come from the long-established public palette families —
- * ColorBrewer for the hue ramps, matplotlib's perceptual set for the rest.
- */
-const PALETTES: Record<HeatmapColorPalette, PaletteDefinition> = {
-	[HeatmapColorPalette.Ice]: {
-		darkFirst: false,
-		stops: [
-			'#f7fbff',
-			'#deebf7',
-			'#c3dbee',
-			'#9cc8e2',
-			'#6daed5',
-			'#4391c6',
-			'#2271b4',
-			'#0c5198',
-			'#08306b',
-		],
-	},
-	[HeatmapColorPalette.Moss]: {
-		darkFirst: false,
-		stops: [
-			'#f7fcf5',
-			'#e3f4de',
-			'#c6e8bf',
-			'#a0d89b',
-			'#73c378',
-			'#45aa5d',
-			'#228b45',
-			'#066b2d',
-			'#00441b',
-		],
-	},
-	[HeatmapColorPalette.Rust]: {
-		darkFirst: false,
-		stops: [
-			'#fff5f0',
-			'#feddcf',
-			'#fcbaa1',
-			'#fc9273',
-			'#f9694c',
-			'#eb3d2f',
-			'#cb1c1e',
-			'#a10e15',
-			'#67000d',
-		],
-	},
-	[HeatmapColorPalette.Graphite]: {
-		darkFirst: false,
-		stops: [
-			'#ffffff',
-			'#efefef',
-			'#d8d8d8',
-			'#bbbbbb',
-			'#979797',
-			'#737373',
-			'#505050',
-			'#262626',
-			'#000000',
-		],
-	},
-	[HeatmapColorPalette.Ember]: {
-		darkFirst: false,
-		stops: [
-			'#ffffcc',
-			'#ffeda0',
-			'#fed676',
-			'#feb250',
-			'#fd893c',
-			'#f8502b',
-			'#e11e20',
-			'#b90424',
-			'#800026',
-		],
-	},
-	[HeatmapColorPalette.Lagoon]: {
-		darkFirst: false,
-		stops: [
-			'#ffffd9',
-			'#eaf7b8',
-			'#c1e7b5',
-			'#81cebb',
-			'#45b4c2',
-			'#248fbd',
-			'#2260a9',
-			'#20378d',
-			'#081d58',
-		],
-	},
-	[HeatmapColorPalette.Orchid]: {
-		darkFirst: false,
-		stops: [
-			'#fff7f3',
-			'#fddfdc',
-			'#fcc3c3',
-			'#fa9cb4',
-			'#f369a3',
-			'#da3495',
-			'#ad0a81',
-			'#7b0176',
-			'#49006a',
-		],
-	},
-	[HeatmapColorPalette.Verdant]: {
-		darkFirst: true,
-		stops: [
-			'#440154',
-			'#472d7b',
-			'#3b528b',
-			'#2c728e',
-			'#21918c',
-			'#28ae80',
-			'#5ec962',
-			'#addc30',
-			'#fde725',
-		],
-	},
-	[HeatmapColorPalette.Lava]: {
-		darkFirst: true,
-		stops: [
-			'#000004',
-			'#1d1147',
-			'#51127c',
-			'#832681',
-			'#b73779',
-			'#e75263',
-			'#fc8961',
-			'#fec488',
-			'#fcfdbf',
-		],
-	},
-	[HeatmapColorPalette.Beacon]: {
-		darkFirst: true,
-		stops: [
-			'#002051',
-			'#11366c',
-			'#3c4d6e',
-			'#62646f',
-			'#7f7c75',
-			'#9a9478',
-			'#bbaf71',
-			'#e2cb5c',
-			'#fdea45',
-		],
-	},
-};
-
-/** Stops oriented low-count first for the active theme. At the wrong polarity,
- *  empty cells become the loudest thing on screen. */
-export function getPaletteStops(
-	palette: HeatmapColorPalette,
-	isDarkMode: boolean,
-): string[] {
-	const definition = PALETTES[palette] ?? PALETTES[HeatmapColorPalette.Ice];
-	return definition.darkFirst === isDarkMode
-		? definition.stops
-		: [...definition.stops].reverse();
-}

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

@@ -1,122 +0,0 @@
-export enum HeatmapColorScale {
-	Log = 'log',
-	Sqrt = 'sqrt',
-	Linear = 'linear',
-}
-
-export enum HeatmapColorMode {
-	Palette = 'palette',
-	Opacity = 'opacity',
-}
-
-/** Sequential ramps only: colour means "count", so a midpoint or hue cycle would
- *  read as a threshold that does not exist. */
-export enum HeatmapColorPalette {
-	Ice = 'ice',
-	Moss = 'moss',
-	Rust = 'rust',
-	Graphite = 'graphite',
-	Ember = 'ember',
-	Lagoon = 'lagoon',
-	Orchid = 'orchid',
-	Verdant = 'verdant',
-	Lava = 'lava',
-	Beacon = 'beacon',
-}
-
-export interface HeatmapColorOptions {
-	mode: HeatmapColorMode;
-	scale: HeatmapColorScale;
-	/** `null` derives it, which is always 0 — a count of 0 belongs at the bottom. */
-	minCount: number | null;
-	/** `null` derives it from the grid's highest count. */
-	maxCount: number | null;
-	palette: HeatmapColorPalette;
-	/** Colour steps the ramp is quantised into, 2..128. Unrelated to `step`, the
-	 *  column width in seconds. */
-	steps: number;
-	/** Opacity mode. Empty falls back to the caller's series colour. */
-	fill: string;
-}
-
-/** Row-height distribution of the bucket axis. */
-export enum HeatmapAxisScale {
-	/** Whichever of the three below the boundaries admit: log when they are all
-	 *  positive, symmetric log when they cross zero, linear when they are all
-	 *  zero. The choice is a property of the data, so this is the default. */
-	Auto = 'auto',
-	Linear = 'linear',
-	/** Plain log10. A boundary at or below zero has no logarithm, so it is pinned
-	 *  one bucket below the smallest positive one — see `resolveHeatmapYAxis`. */
-	Log = 'log',
-	/** Linear within ±the smallest non-zero boundary, logarithmic beyond,
-	 *  mirrored across zero. The scale for boundaries that straddle zero. */
-	Symlog = 'symlog',
-}
-
-export interface HeatmapSeriesPoint {
-	/** Column start, in seconds. */
-	timestamp: number;
-	/** One per bucket row, lowest first. `null` is "no data", never `0`. */
-	counts: Array<number | null>;
-}
-
-export interface HeatmapSeriesLabel {
-	key: string;
-	value: string;
-}
-
-export interface HeatmapSeries {
-	/** Group label, as the legend names it. Empty when there is no grouping. */
-	label: string;
-	/** The pairs behind `label`, letting the tooltip name rows by value alone. */
-	labels?: HeatmapSeriesLabel[];
-	points: HeatmapSeriesPoint[];
-}
-
-/** Counts pivoted into rows and aligned to one column axis. Internal to the
- *  chart, which resolves it from `buckets` and `series`. */
-export interface HeatmapGrid {
-	/** Ascending. N boundaries describe N+1 rows, including the `+Inf` overflow. */
-	bounds: number[];
-	/** Column starts, in seconds. */
-	timestamps: number[];
-	/** Column width in seconds. Cells span `[timestamps[j], timestamps[j] + step)`,
-	 *  and the last column has no successor to infer it from. */
-	step: number;
-	/** `counts[row][column]`, row 0 lowest. `null` (no data) renders hatched, `0`
-	 *  at the bottom of the scale — conflating them hides an outage. */
-	counts: Array<Array<number | null>>;
-}
-
-export interface HeatmapRow {
-	/** Synthetic on the underflow row. */
-	lower: number;
-	/** Synthetic on the overflow row. */
-	upper: number;
-	isUnderflow: boolean;
-	isOverflow: boolean;
-}
-
-/** The bucket axis in uPlot y-scale space. A log axis is log10 values on a
- *  *linear* scale, not uPlot's log distribution, so boundaries stay exactly on
- *  ticks and uPlot's decade-only label filter cannot hide them. */
-export interface HeatmapYAxis {
-	rows: HeatmapRow[];
-	/** Row edges, ascending. Length is `rows.length + 1`. */
-	edges: number[];
-	/** Real bucket boundaries — one tick each. */
-	splits: number[];
-	/** Where the `∞` tick goes: the overflow row's upper edge, not its centre,
-	 *  which would sit half a row from the last boundary and collide with it. */
-	overflowSplit: number | null;
-	toBucketValue: (axisValue: number) => number;
-	min: number;
-	max: number;
-}
-
-export interface HeatmapCell {
-	row: number;
-	column: number;
-	count: number | null;
-}

frontend/src/lib/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -41,9 +41,6 @@ export default function ChartWrapper({
 	customTooltip,
 	pinnedTooltipElement,
 	tooltipPortalRoot,
-	customLegend,
-	legendLabels,
-	contentFooter,
 	'data-testid': testId,
 }: ChartWrapperProps): JSX.Element {
 	const plotInstanceRef = useRef<uPlot | null>(null);
@@ -64,10 +61,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}
@@ -76,7 +69,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position, showLegend, customLegend],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -107,8 +100,6 @@ export default function ChartWrapper({
 				containerHeight={containerHeight}
 				legendConfig={legendConfig}
 				legendComponent={legendComponent}
-				seriesLabels={legendLabels}
-				contentFooter={contentFooter}
 				layoutChildren={layoutChildren}
 			>
 				{({ chartWidth, chartHeight, averageLegendWidth }): JSX.Element => (

frontend/src/lib/visualization/charts/Heatmap/Heatmap.tsx

@@ -1,310 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
-import ChartWrapper from 'lib/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/components/HeatmapTooltip/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 'lib/visualization/charts/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.Auto,
-		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}
-			customTooltip={renderTooltip}
-			renderTooltipFooter={renderTooltipFooter}
-			tooltipPortalRoot={tooltipPortalRoot}
-			contentFooter={visualMap}
-			layoutChildren={layoutChildren}
-			data-testid={testId}
-		/>
-	);
-}

frontend/src/lib/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/lib/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/lib/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/lib/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/lib/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/lib/visualization/charts/types.ts

@@ -9,12 +9,6 @@ import {
 	TooltipRenderArgs,
 } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type {
-	HeatmapAxisScale,
-	HeatmapCell,
-	HeatmapColorOptions,
-	HeatmapSeries,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -39,13 +33,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 {
@@ -87,61 +74,6 @@ export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
-/**
- * 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 auto: the boundaries pick between log, symmetric log and
-	 *  linear. */
-	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;
-}
-
 /**
  * One resolved pie/donut slice: a display label, its (already parsed) positive
  * numeric value, and the colour used for the arc + legend swatch.

frontend/src/lib/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/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/ConfigPane.tsx

@@ -5,11 +5,10 @@ import type {
 	DashboardtypesPanelSpecDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { resolveSignal } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
 import type { EQueryType } from 'types/common/dashboard';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import ConfigActions from './ConfigActions/ConfigActions';
 import SectionSlot from './SectionSlot/SectionSlot';
@@ -68,7 +67,7 @@ function ConfigPane({
 	const definition = getPanelDefinition(panelKind);
 	const sections = definition.sections;
 
-	const signal = resolveSignal(spec.queries, getSupportedSignals(panelKind)[0]);
+	const signal = resolveSignal(spec.queries, definition.supportedSignals[0]);
 
 	// Title/description are just a slice of the spec — edit them through the same
 	// onChangeSpec path the sections use, so there's a single editing surface.

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/__tests__/PanelTypeSwitcher.test.tsx

@@ -5,18 +5,8 @@ import PanelTypeSwitcher from '../PanelTypeSwitcher';
 import { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import { EQueryType } from 'types/common/dashboard';
 
-// Stub the registry so the test doesn't pull in the real renderers and chart libs.
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/NumberPanel', displayName: 'Number' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-		{ kind: 'signoz/BarChartPanel', displayName: 'Bar Chart' },
-		{ kind: 'signoz/PieChartPanel', displayName: 'Pie Chart' },
-		{ kind: 'signoz/HistogramPanel', displayName: 'Histogram' },
-		{ kind: 'signoz/ListPanel', displayName: 'List' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 const mockGetPanelDefinition = getPanelDefinition as unknown as jest.Mock;
@@ -44,7 +34,6 @@ describe('PanelTypeSwitcher', () => {
 		// List supports only logs/traces; every other kind also supports metrics.
 		// Query-type support comes from SUPPORTED_QUERY_TYPES (all three by default).
 		mockGetPanelDefinition.mockImplementation((kind: string) => ({
-			mode: 'query',
 			supportedSignals:
 				kind === 'signoz/ListPanel'
 					? ['logs', 'traces']

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/PanelTypeSwitcher/usePanelTypeSelectItems.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 import type { EQueryType } from 'types/common/dashboard';
 
-import { PANEL_OPTIONS } from '../../../Panels/registry';
 import type { PanelKind } from '../../../Panels/types/panelKind';
+import { PANEL_TYPES } from '../../../PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/constants';
 import type { ConfigSelectItem } from '../controls/ConfigSelect/ConfigSelect';
 
 import { getPanelTypeDisabledReason } from './utils';
@@ -27,17 +27,17 @@ export function usePanelTypeSelectItems({
 }: UsePanelTypeSelectItemsArgs): ConfigSelectItem<PanelKind>[] {
 	return useMemo(
 		() =>
-			PANEL_OPTIONS.map(({ kind, displayName, icon: Icon }) => {
+			PANEL_TYPES.map(({ panelKind, label, Icon }) => {
 				// One reason drives both the disabled flag and the tooltip, so they can't disagree.
 				const disabledReason = getPanelTypeDisabledReason({
-					kind,
+					kind: panelKind,
 					queryType,
 					signal,
-					label: displayName,
+					label,
 				});
 				return {
-					value: kind,
-					label: displayName,
+					value: panelKind,
+					label,
 					icon: <Icon size={14} />,
 					disabled: !!disabledReason,
 					tooltip: disabledReason,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/LegendColors.tsx

@@ -5,7 +5,7 @@ import { Input } from 'antd';
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 import { Virtuoso } from 'react-virtuoso';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 import LegendColorRow from './LegendColorRow';
 import {
 	clearSeriesColor,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/LegendColors.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import LegendColors from '../LegendColors';
 
 const SERIES: LegendSeries[] = [

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/__tests__/legendColors.utils.test.ts

@@ -1,4 +1,4 @@
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../../utils/legendSeries';
 import {
 	clearSeriesColor,
 	filterLegendSeries,

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/controls/LegendColors/legendColors.utils.ts

@@ -1,6 +1,6 @@
 import type { DashboardtypesLegendDTOCustomColors } from 'api/generated/services/sigNoz.schemas';
 
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../../../utils/legendSeries';
 
 /** Case-insensitive substring filter over series labels. Empty query → all series. */
 export function filterLegendSeries(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionContext.ts

@@ -1,7 +1,7 @@
 import type { TelemetrytypesSignalDTO } from 'api/generated/services/sigNoz.schemas';
 
 import type { PanelKind } from '../../Panels/types/panelKind';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
+import type { LegendSeries } from '../utils/legendSeries';
 import type { TableColumnOption } from '../hooks/useTableColumns';
 import { EQueryType } from 'types/common/dashboard';
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sectionRegistry.tsx

@@ -1,16 +1,16 @@
 import type { ComponentType } from 'react';
 import type {
 	DashboardtypesLinkDTO,
+	DashboardtypesAxesDTO,
 	DashboardtypesBarChartVisualizationDTO,
 	DashboardtypesHistogramBucketsDTO,
 	DashboardtypesLegendDTO,
 	DashboardtypesPanelSpecDTO,
+	DashboardtypesTimeSeriesChartAppearanceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import {
 	SectionKind,
 	type AnyThreshold,
-	type PanelAxesSlice,
-	type PanelChartAppearanceSlice,
 	type PanelFormattingSlice,
 	type SectionEditorProps,
 	type SectionSpecMap,
@@ -79,8 +79,8 @@ export const SECTION_REGISTRY: {
 	},
 	[SectionKind.Axes]: {
 		Component: AxesSection,
-		get: (spec): PanelAxesSlice | undefined =>
-			getPluginSlice<PanelAxesSlice>(spec, 'axes'),
+		get: (spec): DashboardtypesAxesDTO | undefined =>
+			getPluginSlice<DashboardtypesAxesDTO>(spec, 'axes'),
 		update: (spec, axes): PanelSpec => updatePluginSlice(spec, 'axes', axes),
 	},
 	[SectionKind.Legend]: {
@@ -92,8 +92,11 @@ export const SECTION_REGISTRY: {
 	},
 	[SectionKind.ChartAppearance]: {
 		Component: ChartAppearanceSection,
-		get: (spec): PanelChartAppearanceSlice | undefined =>
-			getPluginSlice<PanelChartAppearanceSlice>(spec, 'chartAppearance'),
+		get: (spec): DashboardtypesTimeSeriesChartAppearanceDTO | undefined =>
+			getPluginSlice<DashboardtypesTimeSeriesChartAppearanceDTO>(
+				spec,
+				'chartAppearance',
+			),
 		update: (spec, chartAppearance): PanelSpec =>
 			updatePluginSlice(spec, 'chartAppearance', chartAppearance),
 	},

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/AxesSection.tsx

@@ -1,14 +1,12 @@
 import type { ChangeEvent } from 'react';
 import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
-import { DashboardtypesHeatmapYScaleDTO } from 'api/generated/services/sigNoz.schemas';
 import type {
 	SectionEditorProps,
 	SectionKind,
 } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 
 import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-import ConfigSelect from '../../controls/ConfigSelect/ConfigSelect';
 
 import styles from './AxesSection.module.scss';
 
@@ -19,37 +17,9 @@ const SCALE_OPTIONS = [
 	{ value: 'log', label: 'Log', icon: 'scale-log' as const },
 ];
 
-// Auto is the only one that reads the boundaries rather than overriding them.
-const Y_SCALE_OPTIONS = [
-	{
-		value: DashboardtypesHeatmapYScaleDTO.auto,
-		label: 'Auto',
-		tooltip:
-			'Log when every bucket bound is positive, symmetric log when they cross zero',
-	},
-	{
-		value: DashboardtypesHeatmapYScaleDTO.linear,
-		label: 'Linear',
-		tooltip: 'Row heights proportional to the bucket range',
-	},
-	{
-		value: DashboardtypesHeatmapYScaleDTO.log,
-		label: 'Log',
-		tooltip:
-			'Log-proportional row heights; a zero bucket sits one bucket below the smallest positive bound',
-	},
-	{
-		value: DashboardtypesHeatmapYScaleDTO.symlog,
-		label: 'Symmetric log',
-		tooltip:
-			'Linear within the smallest non-zero bound, logarithmic beyond, mirrored across zero',
-	},
-];
-
 /**
- * Edits the `axes` slice of a panel spec: soft Y-axis min/max bounds, the
- * linear/logarithmic scale toggle, and the heatmap's bucket-axis distribution.
- * Each control is gated by its `controls` flag.
+ * Edits the `axes` slice of a panel spec: soft Y-axis min/max bounds and the
+ * linear/logarithmic scale toggle. Each control is gated by its `controls` flag.
  */
 function AxesSection({
 	value,
@@ -106,19 +76,6 @@ function AxesSection({
 					/>
 				</div>
 			)}
-
-			{controls.yScale && (
-				<div className={styles.field}>
-					<Typography.Text>Y-axis scale</Typography.Text>
-					<ConfigSelect
-						testId="panel-editor-v2-y-scale"
-						placeholder="Select scale…"
-						value={value?.yScale}
-						items={Y_SCALE_OPTIONS}
-						onChange={(next): void => onChange({ ...value, yScale: next })}
-					/>
-				</div>
-			)}
 		</>
 	);
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/AxesSection/__tests__/AxesSection.test.tsx

@@ -1,4 +1,3 @@
-import { DashboardtypesHeatmapYScaleDTO } from 'api/generated/services/sigNoz.schemas';
 import { render, screen, userEvent } from 'tests/test-utils';
 
 import AxesSection from '../AxesSection';
@@ -65,65 +64,6 @@ describe('AxesSection', () => {
 		expect(onChange).toHaveBeenCalledWith({ softMax: null });
 	});
 
-	it('offers the bucket-axis scale instead of the soft bounds when yScale is on', () => {
-		render(
-			<AxesSection
-				value={undefined}
-				controls={{ yScale: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId('panel-editor-v2-y-scale')).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-soft-min'),
-		).not.toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-log-scale'),
-		).not.toBeInTheDocument();
-	});
-
-	it('offers every bucket-axis scale, symmetric log included', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<AxesSection
-				value={undefined}
-				controls={{ yScale: true }}
-				onChange={onChange}
-			/>,
-		);
-
-		const trigger = screen.getByTestId('panel-editor-v2-y-scale');
-		await user.click(
-			trigger.querySelector('.ant-select-selector') as HTMLElement,
-		);
-
-		await expect(
-			screen.findByRole('option', { name: /Auto/ }),
-		).resolves.toBeInTheDocument();
-		expect(screen.getByRole('option', { name: /Log/ })).toBeInTheDocument();
-		expect(screen.getByRole('option', { name: /Linear/ })).toBeInTheDocument();
-
-		await user.click(screen.getByRole('option', { name: /Symmetric log/ }));
-
-		expect(onChange).toHaveBeenCalledWith({
-			yScale: DashboardtypesHeatmapYScaleDTO.symlog,
-		});
-	});
-
-	it('shows the scale the spec asks for', () => {
-		render(
-			<AxesSection
-				value={{ yScale: DashboardtypesHeatmapYScaleDTO.symlog }}
-				controls={{ yScale: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByText('Symmetric log')).toBeInTheDocument();
-	});
-
 	it('toggles the logarithmic scale through onChange', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -15,7 +15,6 @@ import ConfigSwitch from '../../controls/ConfigSwitch/ConfigSwitch';
 import { SegmentIcon } from '../../controls/segmentIcons';
 import type { SectionEditorContext } from '../../sectionContext';
 import DisconnectValuesField from './DisconnectValuesField';
-import HeatmapColorsField from './HeatmapColorsField';
 
 import styles from './ChartAppearanceSection.module.scss';
 
@@ -74,9 +73,9 @@ const FILL_MODE_OPTIONS = [
 ];
 
 /**
- * Edits the `chartAppearance` slice of a panel spec: line style / interpolation, fill
- * mode, point markers and the connect-null-gaps threshold for the time-axis charts,
- * the cell colour ramp for the heatmap. Each control is gated by its `controls` flag.
+ * Edits the `chartAppearance` slice of a TimeSeries panel spec: line style /
+ * interpolation, fill mode, point markers, and the connect-null-gaps threshold. Each
+ * control is gated by its `controls` flag.
  */
 function ChartAppearanceSection({
 	value,
@@ -151,13 +150,6 @@ function ChartAppearanceSection({
 					onChange={(spanGaps): void => onChange({ ...value, spanGaps })}
 				/>
 			)}
-
-			{controls.colors && (
-				<HeatmapColorsField
-					value={value?.colors}
-					onChange={(colors): void => onChange({ ...value, colors })}
-				/>
-			)}
 		</>
 	);
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapColorStepsField.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { Slider } from '@signozhq/ui/slider';
-import { Typography } from '@signozhq/ui/typography';
-import {
-	clampColorSteps,
-	DEFAULT_COLOR_STEPS,
-	MAX_COLOR_STEPS,
-	MIN_COLOR_STEPS,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-
-import { singleSliderValue } from './heatmapColorOptions';
-
-import styles from './HeatmapColorsField.module.scss';
-
-interface HeatmapColorStepsFieldProps {
-	/** Unset until the slider moves; the chart's default stands in. */
-	value: number | undefined;
-	onChange: (steps: number) => void;
-}
-
-/**
- * How many colours the ramp is quantised into. Committed on release, so a drag
- * doesn't write every value it passes through to the spec.
- */
-function HeatmapColorStepsField({
-	value,
-	onChange,
-}: HeatmapColorStepsFieldProps): JSX.Element {
-	const [dragging, setDragging] = useState<number | null>(null);
-
-	const steps = dragging ?? value ?? DEFAULT_COLOR_STEPS;
-
-	return (
-		<div className={styles.field}>
-			<div className={styles.fieldHeader}>
-				<Typography.Text>Color steps</Typography.Text>
-				<span className={styles.mono}>{steps}</span>
-			</div>
-			<Slider
-				testId="panel-editor-v2-heatmap-color-steps"
-				className={styles.slider}
-				value={steps}
-				min={MIN_COLOR_STEPS}
-				max={MAX_COLOR_STEPS}
-				step={1}
-				aria-label="Color steps"
-				onChange={(next): void => setDragging(singleSliderValue(next))}
-				onAfterChange={(next): void => {
-					setDragging(null);
-					onChange(clampColorSteps(singleSliderValue(next)));
-				}}
-			/>
-			<Typography.Text className={styles.help}>
-				How many colours the ramp is split into.
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default HeatmapColorStepsField;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapColorsField.module.scss

@@ -1,138 +0,0 @@
-.colors {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-8);
-}
-
-.field {
-	display: flex;
-	flex: 1;
-	flex-direction: column;
-	gap: var(--spacing-4);
-	min-width: 0;
-}
-
-.fieldHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-}
-
-// The track is inset by half a thumb at each end by default, which reads as an
-// indent against the label and help text either side of it. Radix keeps the thumb
-// in bounds on its own, so the track can run the full width of the field.
-.slider {
-	--slider-track-margin-x: 0;
-}
-
-.help {
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.mono {
-	font-family: var(--periscope-font-family-mono);
-	font-size: var(--periscope-font-size-small);
-	color: var(--l3-foreground);
-}
-
-.bounds {
-	display: flex;
-	gap: var(--spacing-4);
-}
-
-.fillGrid {
-	display: grid;
-	grid-template-columns: repeat(4, minmax(0, 1fr));
-	gap: var(--spacing-4);
-}
-
-.customFill {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	padding: var(--spacing-4) var(--spacing-6);
-	border: 1px solid var(--l2-border);
-	border-radius: var(--radius-1);
-	background: var(--l2-background-60);
-	cursor: pointer;
-
-	&:hover {
-		border-color: var(--l2-foreground);
-	}
-
-	&.isSelected {
-		border-color: var(--accent-primary);
-	}
-}
-
-.customFillValue {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-4);
-}
-
-.customFillSwatch {
-	width: var(--spacing-12);
-	height: var(--spacing-8);
-	border-radius: var(--radius-1);
-	border: 1px solid var(--l2-border);
-}
-
-.preview {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-}
-
-.previewHeader {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-}
-
-.previewRamp {
-	height: var(--spacing-8);
-	border-radius: var(--radius-1);
-	border: 1px solid var(--l2-border);
-}
-
-.previewBounds {
-	display: flex;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-}
-
-.paletteGrid {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: var(--spacing-4);
-}
-
-.paletteCard {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-3);
-	padding: var(--spacing-4);
-	border: 1px solid var(--l2-border);
-	border-radius: var(--radius-1);
-	background: var(--l2-background-60);
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		border-color: var(--l2-foreground);
-	}
-
-	&.isSelected {
-		border-color: var(--accent-primary);
-	}
-}
-
-.paletteRamp {
-	height: var(--spacing-6);
-	border-radius: var(--radius-1);
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapColorsField.tsx

@@ -1,100 +0,0 @@
-import { Typography } from '@signozhq/ui/typography';
-import {
-	DashboardtypesHeatmapColorModeDTO,
-	DashboardtypesHeatmapColorScaleDTO,
-	type DashboardtypesHeatmapColorsDTO,
-} from 'api/generated/services/sigNoz.schemas';
-
-import ConfigSegmented from '../../controls/ConfigSegmented/ConfigSegmented';
-import HeatmapColorStepsField from './HeatmapColorStepsField';
-import HeatmapCountRangeField from './HeatmapCountRangeField';
-import HeatmapFillField from './HeatmapFillField';
-import HeatmapPaletteGrid from './HeatmapPaletteGrid';
-import HeatmapRampPreview from './HeatmapRampPreview';
-import { COLOR_MODE_OPTIONS, COLOR_SCALE_OPTIONS } from './heatmapColorOptions';
-
-import styles from './HeatmapColorsField.module.scss';
-
-interface HeatmapColorsFieldProps {
-	value: DashboardtypesHeatmapColorsDTO | undefined;
-	onChange: (next: DashboardtypesHeatmapColorsDTO) => void;
-}
-
-/**
- * Edits `chartAppearance.colors` — how a cell's count becomes a colour. Palette
- * mode ramps through a sequential palette, opacity mode through one fill's alpha;
- * everything below the mode applies to both.
- */
-function HeatmapColorsField({
-	value,
-	onChange,
-}: HeatmapColorsFieldProps): JSX.Element {
-	const isOpacityMode =
-		value?.mode === DashboardtypesHeatmapColorModeDTO.opacity;
-
-	return (
-		<div className={styles.colors}>
-			<HeatmapRampPreview colors={value} />
-
-			<div className={styles.field}>
-				<Typography.Text>Color mode</Typography.Text>
-				<ConfigSegmented
-					testId="panel-editor-v2-heatmap-color-mode"
-					value={value?.mode}
-					items={COLOR_MODE_OPTIONS}
-					onChange={(next): void =>
-						onChange({
-							...value,
-							mode: next as DashboardtypesHeatmapColorModeDTO,
-						})
-					}
-				/>
-			</div>
-
-			{isOpacityMode ? (
-				<HeatmapFillField
-					value={value?.fill}
-					onChange={(fill): void => onChange({ ...value, fill })}
-				/>
-			) : (
-				<div className={styles.field}>
-					<Typography.Text>Palette</Typography.Text>
-					<HeatmapPaletteGrid
-						value={value?.palette}
-						onChange={(palette): void => onChange({ ...value, palette })}
-					/>
-				</div>
-			)}
-
-			<div className={styles.field}>
-				<Typography.Text>Color scale</Typography.Text>
-				<ConfigSegmented
-					testId="panel-editor-v2-heatmap-color-scale"
-					value={value?.scale}
-					items={COLOR_SCALE_OPTIONS}
-					onChange={(next): void =>
-						onChange({
-							...value,
-							scale: next as DashboardtypesHeatmapColorScaleDTO,
-						})
-					}
-				/>
-				<Typography.Text className={styles.help}>
-					How a count maps onto the ramp.
-				</Typography.Text>
-			</div>
-
-			<HeatmapColorStepsField
-				value={value?.steps}
-				onChange={(steps): void => onChange({ ...value, steps })}
-			/>
-
-			<HeatmapCountRangeField
-				value={{ minCount: value?.minCount, maxCount: value?.maxCount }}
-				onChange={(bounds): void => onChange({ ...value, ...bounds })}
-			/>
-		</div>
-	);
-}
-
-export default HeatmapColorsField;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapCountRangeField.tsx

@@ -1,52 +0,0 @@
-import { InputNumber } from '@signozhq/ui/input-number';
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesHeatmapColorsDTO } from 'api/generated/services/sigNoz.schemas';
-
-import styles from './HeatmapColorsField.module.scss';
-
-/** `null` on either bound derives it from the data. */
-type CountBound = Pick<DashboardtypesHeatmapColorsDTO, 'minCount' | 'maxCount'>;
-
-interface HeatmapCountRangeFieldProps {
-	value: CountBound;
-	onChange: (next: CountBound) => void;
-}
-
-/**
- * Clamps the colour scale to a fixed count range. Two panels rarely derive the
- * same bounds, so comparing them needs the range pinned on both.
- */
-function HeatmapCountRangeField({
-	value,
-	onChange,
-}: HeatmapCountRangeFieldProps): JSX.Element {
-	return (
-		<div className={styles.field}>
-			<div className={styles.bounds}>
-				<div className={styles.field}>
-					<Typography.Text>Min count</Typography.Text>
-					<InputNumber
-						testId="panel-editor-v2-heatmap-min-count"
-						placeholder="Auto"
-						value={value.minCount ?? null}
-						onChange={(minCount): void => onChange({ ...value, minCount })}
-					/>
-				</div>
-				<div className={styles.field}>
-					<Typography.Text>Max count</Typography.Text>
-					<InputNumber
-						testId="panel-editor-v2-heatmap-max-count"
-						placeholder="Auto"
-						value={value.maxCount ?? null}
-						onChange={(maxCount): void => onChange({ ...value, maxCount })}
-					/>
-				</div>
-			</div>
-			<Typography.Text className={styles.help}>
-				The counts the ramp&apos;s ends mean; empty reads them off the data.
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default HeatmapCountRangeField;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapFillField.tsx

@@ -1,85 +0,0 @@
-import cx from 'classnames';
-import { ColorPicker } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-import { DEFAULT_OPACITY_FILL } from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-
-import { FILL_PRESETS, isSameColor } from './heatmapColorOptions';
-
-import styles from './HeatmapColorsField.module.scss';
-
-interface HeatmapFillFieldProps {
-	/** Empty follows the selected group's legend colour. */
-	value: string | undefined;
-	onChange: (fill: string) => void;
-}
-
-/**
- * The colour opacity mode ramps the alpha of. Any hex goes, since the point of
- * the fill is matching whatever else the dashboard already uses.
- */
-function HeatmapFillField({
-	value,
-	onChange,
-}: HeatmapFillFieldProps): JSX.Element {
-	const isAuto = !value;
-	const isCustom =
-		!isAuto && !FILL_PRESETS.some((preset) => isSameColor(preset.color, value));
-
-	return (
-		<div className={styles.field}>
-			<Typography.Text>Base color</Typography.Text>
-
-			<div className={styles.fillGrid}>
-				{FILL_PRESETS.map((preset) => (
-					<button
-						key={preset.label}
-						type="button"
-						aria-pressed={isSameColor(preset.color, value)}
-						className={cx(styles.paletteCard, {
-							[styles.isSelected]: isSameColor(preset.color, value),
-						})}
-						data-testid={`panel-editor-v2-heatmap-fill-${preset.label}`}
-						onClick={(): void => onChange(preset.color)}
-					>
-						<span
-							className={styles.paletteRamp}
-							style={{ background: preset.color }}
-						/>
-						<span className={styles.mono}>{preset.label}</span>
-					</button>
-				))}
-			</div>
-
-			<ColorPicker
-				value={value || DEFAULT_OPACITY_FILL}
-				trigger="click"
-				onChangeComplete={(next): void => onChange(next.toHexString())}
-			>
-				<button
-					type="button"
-					className={cx(styles.customFill, {
-						[styles.isSelected]: isCustom,
-					})}
-					data-testid="panel-editor-v2-heatmap-fill-custom"
-				>
-					<Typography.Text>Custom</Typography.Text>
-					<span className={styles.customFillValue}>
-						<span className={styles.mono}>
-							{isAuto ? 'group colour' : value.toUpperCase()}
-						</span>
-						<span
-							className={styles.customFillSwatch}
-							style={{ background: value || DEFAULT_OPACITY_FILL }}
-						/>
-					</span>
-				</button>
-			</ColorPicker>
-
-			<Typography.Text className={styles.help}>
-				The colour whose alpha ramps; unset uses the group&apos;s.
-			</Typography.Text>
-		</div>
-	);
-}
-
-export default HeatmapFillField;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapPaletteGrid.tsx

@@ -1,45 +0,0 @@
-import cx from 'classnames';
-import type { DashboardtypesHeatmapPaletteDTO } from 'api/generated/services/sigNoz.schemas';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import { paletteGradient, PALETTE_OPTIONS } from './heatmapColorOptions';
-
-import styles from './HeatmapColorsField.module.scss';
-
-interface HeatmapPaletteGridProps {
-	value: DashboardtypesHeatmapPaletteDTO | undefined;
-	onChange: (palette: DashboardtypesHeatmapPaletteDTO) => void;
-}
-
-/** The palettes as the ramps they are: "lava" and "ember" name nothing visible. */
-function HeatmapPaletteGrid({
-	value,
-	onChange,
-}: HeatmapPaletteGridProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	return (
-		<div className={styles.paletteGrid}>
-			{PALETTE_OPTIONS.map((option) => (
-				<button
-					key={option.value}
-					type="button"
-					aria-pressed={option.value === value}
-					className={cx(styles.paletteCard, {
-						[styles.isSelected]: option.value === value,
-					})}
-					data-testid={`panel-editor-v2-heatmap-palette-${option.value}`}
-					onClick={(): void => onChange(option.value)}
-				>
-					<span
-						className={styles.paletteRamp}
-						style={{ background: paletteGradient(option.value, isDarkMode) }}
-					/>
-					<span className={styles.mono}>{option.label}</span>
-				</button>
-			))}
-		</div>
-	);
-}
-
-export default HeatmapPaletteGrid;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/HeatmapRampPreview.tsx

@@ -1,76 +0,0 @@
-import { useMemo } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import type { DashboardtypesHeatmapColorsDTO } from 'api/generated/services/sigNoz.schemas';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import {
-	createHeatmapColorResolver,
-	DEFAULT_HEATMAP_COLORS,
-} from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-import { HeatmapColorMode } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import { resolveHeatmapColors } from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/resolvers';
-
-import { rampGradient } from './heatmapColorOptions';
-
-import styles from './HeatmapColorsField.module.scss';
-
-/** The ramp is domain-independent; the preview shows colours, not positions. */
-const NOMINAL_DOMAIN = { min: 0, max: 1 };
-
-interface HeatmapRampPreviewProps {
-	colors: DashboardtypesHeatmapColorsDTO | undefined;
-}
-
-/**
- * The ramp the grid will draw, resolved through the chart's own colour resolver.
- * Its ends carry the counts it is stretched between; an unset maximum is only
- * known once the data arrives.
- */
-function HeatmapRampPreview({ colors }: HeatmapRampPreviewProps): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	const options = useMemo(
-		() => ({ ...DEFAULT_HEATMAP_COLORS, ...resolveHeatmapColors(colors) }),
-		[colors],
-	);
-
-	const ramp = useMemo(
-		() =>
-			createHeatmapColorResolver({
-				options,
-				domain: NOMINAL_DOMAIN,
-				isDarkMode,
-				// No group to follow here, so the resolver's fallback fill stands in.
-				seriesColor: '',
-			}).ramp,
-		[options, isDarkMode],
-	);
-
-	const summary = [
-		options.mode === HeatmapColorMode.Opacity ? 'opacity' : options.palette,
-		options.scale,
-		`${options.steps} steps`,
-	].join(' · ');
-
-	return (
-		<div className={styles.preview} data-testid="panel-editor-v2-heatmap-preview">
-			<div className={styles.previewHeader}>
-				<Typography.Text>Preview</Typography.Text>
-				<span className={styles.mono}>{summary}</span>
-			</div>
-			<div
-				className={styles.previewRamp}
-				style={{ background: rampGradient(ramp) }}
-			/>
-			<div className={styles.previewBounds}>
-				<span className={styles.mono}>
-					{(colors?.minCount ?? 0).toLocaleString()}
-				</span>
-				<span className={styles.mono}>
-					{colors?.maxCount == null ? 'auto' : colors.maxCount.toLocaleString()}
-				</span>
-			</div>
-		</div>
-	);
-}
-
-export default HeatmapRampPreview;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/ChartAppearanceSection.test.tsx

@@ -85,36 +85,6 @@ describe('ChartAppearanceSection', () => {
 		).not.toBeInTheDocument();
 	});
 
-	it('offers the heatmap colour ramp only when the colors flag is set', () => {
-		const { unmount } = render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={ALL_CONTROLS}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.queryByTestId('panel-editor-v2-heatmap-color-mode'),
-		).not.toBeInTheDocument();
-		unmount();
-
-		render(
-			<ChartAppearanceSection
-				value={undefined}
-				controls={{ colors: true }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-color-mode'),
-		).toBeInTheDocument();
-		expect(
-			screen.queryByTestId('panel-editor-v2-line-style'),
-		).not.toBeInTheDocument();
-	});
-
 	it('writes the chosen fill mode through the segmented control', async () => {
 		const user = userEvent.setup();
 		const onChange = jest.fn();

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/__tests__/HeatmapColorsField.test.tsx

@@ -1,258 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import {
-	DashboardtypesHeatmapColorModeDTO,
-	DashboardtypesHeatmapColorScaleDTO,
-	DashboardtypesHeatmapPaletteDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DEFAULT_COLOR_STEPS } from 'lib/uPlotV2/plugins/HeatmapPlugin/colorScale';
-import { render, screen, userEvent } from 'tests/test-utils';
-
-import HeatmapColorsField from '../HeatmapColorsField';
-
-const PALETTE_CARD = `panel-editor-v2-heatmap-palette-${DashboardtypesHeatmapPaletteDTO.lagoon}`;
-
-describe('HeatmapColorsField', () => {
-	it('shows the ramp the grid will draw, with what resolved it', () => {
-		render(
-			<HeatmapColorsField
-				value={{
-					palette: DashboardtypesHeatmapPaletteDTO.lava,
-					scale: DashboardtypesHeatmapColorScaleDTO.log,
-					steps: 32,
-				}}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-preview'),
-		).toBeInTheDocument();
-		expect(screen.getByText('lava · log · 32 steps')).toBeInTheDocument();
-	});
-
-	it('labels the ramp ends with the counts it is stretched between', () => {
-		render(
-			<HeatmapColorsField value={{ maxCount: 4000 }} onChange={jest.fn()} />,
-		);
-
-		// An unset minimum always resolves to 0; an unset maximum needs the data.
-		expect(screen.getByText('0')).toBeInTheDocument();
-		expect(screen.getByText('4,000')).toBeInTheDocument();
-	});
-
-	it('offers the palettes as the ramps they are in palette mode', () => {
-		render(
-			<HeatmapColorsField
-				value={{ mode: DashboardtypesHeatmapColorModeDTO.palette }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId(PALETTE_CARD)).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-color-scale'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-color-steps'),
-		).toBeInTheDocument();
-	});
-
-	it('swaps the palettes for the base colour in opacity mode', () => {
-		render(
-			<HeatmapColorsField
-				value={{ mode: DashboardtypesHeatmapColorModeDTO.opacity }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.queryByTestId(PALETTE_CARD)).not.toBeInTheDocument();
-		expect(screen.getByText('Base color')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-fill-robin'),
-		).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-fill-custom'),
-		).toBeInTheDocument();
-	});
-
-	it('writes the colour mode through onChange', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<HeatmapColorsField
-				value={{ mode: DashboardtypesHeatmapColorModeDTO.palette }}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByText('Opacity'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			mode: DashboardtypesHeatmapColorModeDTO.opacity,
-		});
-	});
-
-	it('writes the picked palette through onChange', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={undefined} onChange={onChange} />);
-
-		await user.click(screen.getByTestId(PALETTE_CARD));
-
-		expect(onChange).toHaveBeenCalledWith({
-			palette: DashboardtypesHeatmapPaletteDTO.lagoon,
-		});
-	});
-
-	it('marks the palette the spec asks for as the selected one', () => {
-		render(
-			<HeatmapColorsField
-				value={{ palette: DashboardtypesHeatmapPaletteDTO.lagoon }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByTestId(PALETTE_CARD)).toHaveAttribute(
-			'aria-pressed',
-			'true',
-		);
-	});
-
-	it('writes the colour scale through onChange and says what it drives', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={undefined} onChange={onChange} />);
-
-		expect(
-			screen.getByText(/How a count maps onto the ramp/),
-		).toBeInTheDocument();
-
-		await user.click(screen.getByText('Sqrt'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			scale: DashboardtypesHeatmapColorScaleDTO.sqrt,
-		});
-	});
-
-	it('steps off the default step count, which stands in until it is moved', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={undefined} onChange={onChange} />);
-
-		expect(screen.getByRole('slider')).toHaveAttribute(
-			'aria-valuenow',
-			String(DEFAULT_COLOR_STEPS),
-		);
-
-		screen.getByRole('slider').focus();
-		await user.keyboard('{ArrowRight}');
-
-		expect(onChange).toHaveBeenLastCalledWith({
-			steps: DEFAULT_COLOR_STEPS + 1,
-		});
-	});
-
-	it('cannot be taken past the step counts the chart can draw', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={{ steps: 2 }} onChange={onChange} />);
-
-		const slider = screen.getByRole('slider');
-		expect(slider).toHaveAttribute('aria-valuemin', '2');
-		expect(slider).toHaveAttribute('aria-valuemax', '128');
-
-		// Already at the floor, so there is no step to take and nothing to write.
-		slider.focus();
-		await user.keyboard('{ArrowLeft}');
-
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it('writes a pinned count bound through onChange', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={undefined} onChange={onChange} />);
-
-		await user.type(
-			screen.getByTestId('panel-editor-v2-heatmap-max-count'),
-			'500',
-		);
-
-		expect(onChange).toHaveBeenLastCalledWith({ maxCount: 500 });
-	});
-
-	it('clears a count bound to null, which asks for the derived one', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(<HeatmapColorsField value={{ maxCount: 500 }} onChange={onChange} />);
-
-		await user.clear(screen.getByTestId('panel-editor-v2-heatmap-max-count'));
-
-		expect(onChange).toHaveBeenCalledWith({ maxCount: null });
-	});
-
-	it('writes a preset base colour through onChange', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-		render(
-			<HeatmapColorsField
-				value={{ mode: DashboardtypesHeatmapColorModeDTO.opacity }}
-				onChange={onChange}
-			/>,
-		);
-
-		await user.click(screen.getByTestId('panel-editor-v2-heatmap-fill-forest'));
-
-		expect(onChange).toHaveBeenCalledWith({
-			mode: DashboardtypesHeatmapColorModeDTO.opacity,
-			fill: Color.BG_FOREST_400,
-		});
-	});
-
-	it('marks the preset the spec asks for, whatever case its hex is in', () => {
-		render(
-			<HeatmapColorsField
-				value={{
-					mode: DashboardtypesHeatmapColorModeDTO.opacity,
-					fill: Color.BG_FOREST_400.toUpperCase(),
-				}}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-fill-forest'),
-		).toHaveAttribute('aria-pressed', 'true');
-	});
-
-	it('shows a fill that is no preset as the custom one', () => {
-		render(
-			<HeatmapColorsField
-				value={{
-					mode: DashboardtypesHeatmapColorModeDTO.opacity,
-					fill: '#0060e6',
-				}}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByText('#0060E6')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-fill-robin'),
-		).toHaveAttribute('aria-pressed', 'false');
-	});
-
-	it('names the group colour as the fill until one is picked', () => {
-		render(
-			<HeatmapColorsField
-				value={{ mode: DashboardtypesHeatmapColorModeDTO.opacity }}
-				onChange={jest.fn()}
-			/>,
-		);
-
-		expect(screen.getByText('group colour')).toBeInTheDocument();
-		expect(
-			screen.getByTestId('panel-editor-v2-heatmap-fill-robin'),
-		).toHaveAttribute('aria-pressed', 'false');
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/ChartAppearanceSection/heatmapColorOptions.ts

@@ -1,98 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import {
-	DashboardtypesHeatmapColorModeDTO,
-	DashboardtypesHeatmapColorScaleDTO,
-	DashboardtypesHeatmapPaletteDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { HEATMAP_PALETTE_MAP } from 'pages/DashboardPage/DashboardContainer/Panels/utils/chartAppearance/enumMaps';
-import { getPaletteStops } from 'lib/uPlotV2/plugins/HeatmapPlugin/palettes';
-
-import type { ConfigSegmentedItem } from '../../controls/ConfigSegmented/ConfigSegmented';
-
-export const COLOR_MODE_OPTIONS: ConfigSegmentedItem[] = [
-	{ value: DashboardtypesHeatmapColorModeDTO.palette, label: 'Palette' },
-	{ value: DashboardtypesHeatmapColorModeDTO.opacity, label: 'Opacity' },
-];
-
-// Log first: bucket counts routinely span decades.
-export const COLOR_SCALE_OPTIONS: ConfigSegmentedItem[] = [
-	{
-		value: DashboardtypesHeatmapColorScaleDTO.log,
-		label: 'Log',
-		icon: 'scale-log',
-	},
-	{ value: DashboardtypesHeatmapColorScaleDTO.sqrt, label: 'Sqrt' },
-	{
-		value: DashboardtypesHeatmapColorScaleDTO.linear,
-		label: 'Linear',
-		icon: 'scale-linear',
-	},
-];
-
-export interface HeatmapFillPreset {
-	label: string;
-	color: string;
-}
-
-/** Opacity-mode base colours: the palette values that read on both themes. */
-export const FILL_PRESETS: HeatmapFillPreset[] = [
-	{ label: 'robin', color: Color.BG_ROBIN_400 },
-	{ label: 'aqua', color: Color.BG_AQUA_400 },
-	{ label: 'forest', color: Color.BG_FOREST_400 },
-	{ label: 'sienna', color: Color.BG_SIENNA_400 },
-];
-
-/** Hex comparison for a spec value that may differ only in case. */
-export function isSameColor(
-	left: string | undefined,
-	right: string | undefined,
-): boolean {
-	return Boolean(left) && left?.toLowerCase() === right?.toLowerCase();
-}
-
-export interface HeatmapPaletteOption {
-	value: DashboardtypesHeatmapPaletteDTO;
-	label: string;
-}
-
-export const PALETTE_OPTIONS: HeatmapPaletteOption[] = [
-	{ value: DashboardtypesHeatmapPaletteDTO.ice, label: 'ice' },
-	{ value: DashboardtypesHeatmapPaletteDTO.moss, label: 'moss' },
-	{ value: DashboardtypesHeatmapPaletteDTO.rust, label: 'rust' },
-	{ value: DashboardtypesHeatmapPaletteDTO.graphite, label: 'graphite' },
-	{ value: DashboardtypesHeatmapPaletteDTO.ember, label: 'ember' },
-	{ value: DashboardtypesHeatmapPaletteDTO.lagoon, label: 'lagoon' },
-	{ value: DashboardtypesHeatmapPaletteDTO.orchid, label: 'orchid' },
-	{ value: DashboardtypesHeatmapPaletteDTO.verdant, label: 'verdant' },
-	{ value: DashboardtypesHeatmapPaletteDTO.lava, label: 'lava' },
-	{ value: DashboardtypesHeatmapPaletteDTO.beacon, label: 'beacon' },
-];
-
-/** `background` for a palette's card, low-count-first like the colour bar. */
-export function paletteGradient(
-	palette: DashboardtypesHeatmapPaletteDTO,
-	isDarkMode: boolean,
-): string {
-	const stops = getPaletteStops(HEATMAP_PALETTE_MAP[palette], isDarkMode);
-	return `linear-gradient(90deg, ${stops.join(', ')})`;
-}
-
-/** `background` for a resolved ramp: hard-edged bands, one per colour step. */
-export function rampGradient(ramp: string[]): string {
-	if (ramp.length === 0) {
-		return 'transparent';
-	}
-	if (ramp.length === 1) {
-		return ramp[0];
-	}
-	const stops = ramp.flatMap((color, index) => [
-		`${color} ${(index / ramp.length) * 100}%`,
-		`${color} ${((index + 1) / ramp.length) * 100}%`,
-	]);
-	return `linear-gradient(90deg, ${stops.join(', ')})`;
-}
-
-/** The Slider emits a pair in range mode; these are all single-thumb. */
-export function singleSliderValue(value: number | number[]): number {
-	return Array.isArray(value) ? value[0] : value;
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/ConfigPane/sections/VisualizationSection/__tests__/VisualizationSection.test.tsx

@@ -8,14 +8,9 @@ import VisualizationSection from '../VisualizationSection';
 // the test doesn't pull the whole panel registry (renderers, chart libs).
 jest.mock('pages/DashboardPage/DashboardContainer/Panels/registry', () => ({
 	getPanelDefinition: jest.fn(() => ({
-		mode: 'query',
 		supportedSignals: ['metrics', 'logs', 'traces'],
 		supportedQueryTypes: ['builder', 'clickhouse_sql', 'promql'],
 	})),
-	PANEL_OPTIONS: [
-		{ kind: 'signoz/TimeSeriesPanel', displayName: 'Time Series' },
-		{ kind: 'signoz/TablePanel', displayName: 'Table' },
-	].map((option) => ({ ...option, icon: (): null => null })),
 }));
 
 // Open the antd Select by clicking its selector, then pick the option by label.

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditor.module.scss

@@ -26,16 +26,3 @@
 		background: var(--l2-border);
 	}
 }
-
-// The static editor's preview: the panel card the grid shows, minus actions.
-.staticPreviewSurface {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	min-height: 0;
-	margin: 12px;
-	border: 1px solid var(--l2-border);
-	border-radius: 4px;
-	background: var(--l2-background);
-	overflow: hidden;
-}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorLayout/PanelEditorLayout.tsx

@@ -1,116 +0,0 @@
-import type { ReactNode } from 'react';
-import {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-	useDefaultLayout,
-} from '@signozhq/ui/resizable';
-
-import layoutStorage from '../layoutStorage';
-
-import styles from '../PanelEditor.module.scss';
-
-/** A resizable pane's bounds, in the percentage strings `ResizablePanel` takes. */
-interface PaneSize {
-	minSize: string;
-	maxSize: string;
-	defaultSize: string;
-}
-
-/** How the left column divides between the preview and the editor pane. */
-export interface PaneSplit {
-	preview: PaneSize;
-	editor: PaneSize;
-}
-
-/**
- * Vertical split per authoring mode. The query builder is a compact form, so the
- * preview keeps the room; a static kind's editor pane is the surface being worked
- * in, so it gets more and can grow further.
- */
-export const PANE_SPLIT = {
-	query: {
-		preview: { minSize: '55%', maxSize: '65%', defaultSize: '60%' },
-		editor: { minSize: '35%', maxSize: '45%', defaultSize: '40%' },
-	},
-	static: {
-		preview: { minSize: '40%', maxSize: '65%', defaultSize: '55%' },
-		editor: { minSize: '35%', maxSize: '60%', defaultSize: '45%' },
-	},
-} as const satisfies Record<string, PaneSplit>;
-
-interface PanelEditorLayoutProps {
-	/** Save/close chrome — its affordances differ per authoring mode. */
-	header: ReactNode;
-	/** Upper-left: what the panel will look like once saved. */
-	preview: ReactNode;
-	/** Lower-left: the kind's `EditorPane` — the query builder, or a static kind's own. */
-	editor: ReactNode;
-	/** Right column: the kind's config sections. */
-	config: ReactNode;
-	split: PaneSplit;
-}
-
-/**
- * The panel editor's frame: header, the resizable three-pane arrangement, and the
- * persistence of what the user drags. Owned once so both authoring modes cannot
- * drift apart on pane bounds or share a layout id by accident — they differ only in
- * `split` and in what fills the slots.
- */
-function PanelEditorLayout({
-	header,
-	preview,
-	editor,
-	config,
-	split,
-}: PanelEditorLayoutProps): JSX.Element {
-	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
-		id: 'panel-editor-v2',
-		storage: layoutStorage,
-	});
-	const {
-		defaultLayout: mainDefaultLayout,
-		onLayoutChanged: onMainLayoutChanged,
-	} = useDefaultLayout({
-		id: 'panel-editor-v2-main',
-		storage: layoutStorage,
-	});
-
-	return (
-		<div className={styles.page} data-testid="panel-editor-v2">
-			{header}
-			<ResizablePanelGroup
-				id="panel-editor-v2"
-				orientation="horizontal"
-				defaultLayout={defaultLayout}
-				onLayoutChanged={onLayoutChanged}
-			>
-				<ResizablePanel minSize="75%" maxSize="80%" defaultSize="80%">
-					<div className={styles.left}>
-						<ResizablePanelGroup
-							id="panel-editor-v2-main"
-							orientation="vertical"
-							defaultLayout={mainDefaultLayout}
-							onLayoutChanged={onMainLayoutChanged}
-						>
-							<ResizablePanel {...split.preview}>{preview}</ResizablePanel>
-							<ResizableHandle withHandle className={styles.handle} />
-							<ResizablePanel {...split.editor}>{editor}</ResizablePanel>
-						</ResizablePanelGroup>
-					</div>
-				</ResizablePanel>
-				<ResizableHandle withHandle className={styles.handle} />
-				<ResizablePanel
-					minSize="20%"
-					maxSize="25%"
-					defaultSize="20%"
-					className={styles.right}
-				>
-					{config}
-				</ResizablePanel>
-			</ResizablePanelGroup>
-		</div>
-	);
-}
-
-export default PanelEditorLayout;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/PanelEditorQueryBuilder.tsx

@@ -21,16 +21,20 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { EQueryType } from 'types/common/dashboard';
 
-import { getSupportedDataSources } from '../../Panels/capabilities';
-import { mergeQueryBuilderFieldRule } from '../../Panels/types/panelCapabilities';
-import type { RenderableQueryPanelDefinition } from '../../Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from '../../Panels/types/panelKind';
+import {
+	getHiddenQueryBuilderFields,
+	getSupportedQueryTypes,
+} from '../../Panels/capabilities';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from '../../Panels/types/panelKind';
 
 import styles from './PanelEditorQueryBuilder.module.scss';
 
 interface PanelEditorQueryBuilderProps {
-	/** The edited kind's definition — drives supported query types + field visibility. */
-	panelDefinition: RenderableQueryPanelDefinition;
+	/** The edited panel's visualization kind — drives supported query types + field visibility via the capabilities guard. */
+	panelKind: PanelKind;
 	/** The panel's current signal; selects per-signal query-builder field rules. */
 	signal: TelemetrytypesSignalDTO;
 	/** Preview fetch in flight — drives the Stage & Run button's loading/cancel state. */
@@ -51,7 +55,7 @@ interface PanelEditorQueryBuilderProps {
  * `QueryBuilderProvider`. `usePanelEditorQuerySync` owns the panel↔provider sync.
  */
 function PanelEditorQueryBuilder({
-	panelDefinition,
+	panelKind,
 	signal,
 	isLoadingQueries,
 	onStageRunQuery,
@@ -61,10 +65,10 @@ function PanelEditorQueryBuilder({
 }: PanelEditorQueryBuilderProps): JSX.Element {
 	// The shared QueryBuilderV2 provider still speaks the legacy PANEL_TYPES; what the
 	// builder offers for this kind comes from the kind's own declaration.
-	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelDefinition.kind];
+	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	// Raw rows: the builder drops its aggregation controls, and with them the trace
 	// operator that combines aggregated trace queries (V1 parity).
-	const isListViewPanel = panelDefinition.kind === 'signoz/ListPanel';
+	const isListViewPanel = panelKind === 'signoz/ListPanel';
 	const { currentQuery, redirectWithQueryBuilderData } = useQueryBuilder();
 	const isDarkMode = useIsDarkMode();
 
@@ -95,19 +99,12 @@ function PanelEditorQueryBuilder({
 	// Per-kind query-builder field rules from the guard (e.g. List hides step interval
 	// and having), passed to QueryBuilderV2 as its `filterConfigs`.
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(
-		() => mergeQueryBuilderFieldRule(panelDefinition.queryBuilderFields, signal),
-		[panelDefinition.queryBuilderFields, signal],
-	);
-
-	// The signal dropdown offers what this kind can visualize, not every signal the
-	// builder knows — a Heatmap reads a bucket axis, which only metrics carry.
-	const supportedDataSources = useMemo(
-		() => getSupportedDataSources(panelDefinition.kind),
-		[panelDefinition.kind],
+		() => getHiddenQueryBuilderFields(panelKind, signal),
+		[panelKind, signal],
 	);
 
 	const items = useMemo(() => {
-		const { supportedQueryTypes } = panelDefinition;
+		const supportedQueryTypes = getSupportedQueryTypes(panelKind);
 
 		const queryTypeComponents = {
 			[EQueryType.QUERY_BUILDER]: {
@@ -118,7 +115,6 @@ function PanelEditorQueryBuilder({
 						<QueryBuilderV2
 							panelType={panelType}
 							filterConfigs={filterConfigs}
-							supportedDataSources={supportedDataSources}
 							showTraceOperator={!isListViewPanel}
 							version="v3"
 							isListViewPanel={isListViewPanel}
@@ -155,14 +151,7 @@ function PanelEditorQueryBuilder({
 			),
 			children: queryTypeComponents[queryType].component,
 		}));
-	}, [
-		panelDefinition,
-		panelType,
-		filterConfigs,
-		supportedDataSources,
-		isDarkMode,
-		isListViewPanel,
-	]);
+	}, [panelKind, panelType, filterConfigs, isDarkMode, isListViewPanel]);
 
 	return (
 		<div

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/QueryBuilderEditorPane.tsx

@@ -1,28 +0,0 @@
-import type { QueryEditorPaneProps } from '../../Panels/types/panelDefinition';
-import PanelEditorQueryBuilder from './PanelEditorQueryBuilder';
-
-/**
- * The default query-kind editor pane: the query-builder tabs with no extras. A
- * kind that needs more (e.g. List's columns editor) declares its own wrapper.
- */
-function QueryBuilderEditorPane({
-	panelDefinition,
-	signal,
-	isLoadingQueries,
-	onStageRunQuery,
-	onCancelQuery,
-	stickyHeader,
-}: QueryEditorPaneProps): JSX.Element {
-	return (
-		<PanelEditorQueryBuilder
-			panelDefinition={panelDefinition}
-			signal={signal}
-			isLoadingQueries={isLoadingQueries}
-			onStageRunQuery={onStageRunQuery}
-			onCancelQuery={onCancelQuery}
-			stickyHeader={stickyHeader}
-		/>
-	);
-}
-
-export default QueryBuilderEditorPane;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PanelEditorQueryBuilder/__tests__/PanelEditorQueryBuilder.test.tsx

@@ -4,9 +4,6 @@ import { OPERATORS } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { EQueryType } from 'types/common/dashboard';
 
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-
 import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder';
 
 // Capture the props the (real-guard-fed) QueryBuilderV2 receives without rendering it.
@@ -51,7 +48,7 @@ function renderBuilder(
 ): void {
 	render(
 		<PanelEditorQueryBuilder
-			panelDefinition={requireQueryPanelDefinition(panelKind as PanelKind)}
+			panelKind={panelKind as never}
 			signal={signal}
 			isLoadingQueries={false}
 			onStageRunQuery={jest.fn()}
@@ -65,7 +62,6 @@ function lastQueryBuilderProps(): {
 	isListViewPanel: boolean;
 	showTraceOperator: boolean;
 	filterConfigs: unknown;
-	supportedDataSources: string[];
 } {
 	const calls = mockQueryBuilderV2.mock.calls;
 	return calls[calls.length - 1][0];
@@ -152,40 +148,3 @@ describe('PanelEditorQueryBuilder field visibility (driven by the capabilities g
 		});
 	});
 });
-
-describe('PanelEditorQueryBuilder signal dropdown (driven by the capabilities guard)', () => {
-	beforeEach(() => {
-		jest.clearAllMocks();
-		mockUseQueryBuilder.mockReturnValue({
-			currentQuery: { queryType: EQueryType.QUERY_BUILDER },
-			redirectWithQueryBuilderData: jest.fn(),
-		});
-	});
-
-	it('offers metrics alone for the Heatmap kind — the only signal with a bucket axis', () => {
-		renderBuilder('signoz/HeatmapPanel', TelemetrytypesSignalDTO.metrics);
-
-		expect(lastQueryBuilderProps().supportedDataSources).toStrictEqual([
-			'metrics',
-		]);
-	});
-
-	it('offers logs and traces for the List kind, which reads raw rows', () => {
-		renderBuilder('signoz/ListPanel', TelemetrytypesSignalDTO.logs);
-
-		expect(lastQueryBuilderProps().supportedDataSources).toStrictEqual([
-			'logs',
-			'traces',
-		]);
-	});
-
-	it('offers every signal for a kind that visualizes them all', () => {
-		renderBuilder('signoz/TimeSeriesPanel', TelemetrytypesSignalDTO.metrics);
-
-		expect(lastQueryBuilderProps().supportedDataSources).toStrictEqual([
-			'metrics',
-			'logs',
-			'traces',
-		]);
-	});
-});

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/PreviewPane/PreviewPane.tsx

@@ -6,7 +6,7 @@ import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import PanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody/PanelBody';
 import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
 import type { AnyPanelInteractionProps } from 'pages/DashboardPage/DashboardContainer/Panels/types/interactions';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
 import type { DashboardPreference } from 'pages/DashboardPage/DashboardContainer/Panels/types/rendererProps';
 import { getPanelQueryType } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getPanelQueryType';
 import type {
@@ -20,8 +20,8 @@ import styles from './PreviewPane.module.scss';
 interface PreviewPaneProps {
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
-	/** The kind's definition, narrowed to the query arm — this preview is the query render path. */
-	panelDefinition: RenderableQueryPanelDefinition;
+	/** Resolved definition for the panel kind; */
+	panelDefinition: RenderablePanelDefinition;
 	data: PanelQueryData;
 	/** Any fetch in flight — drives the header spinner and the body's loading state. */
 	isFetching: boolean;
@@ -107,7 +107,7 @@ function PreviewPane({
 						hideActions
 					/>
 					<PanelBody
-						Renderer={panelDefinition.Renderer}
+						panelDefinition={panelDefinition}
 						panel={panel}
 						panelId={panelId}
 						data={data}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/QueryEditorBody.tsx

@@ -1,331 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { ConfigProvider } from 'antd';
-import {
-	type DashboardtypesPanelDTO,
-	TelemetrytypesSignalDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import {
-	type SectionConfig,
-	type SectionControls,
-	SectionKind,
-} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
-import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-
-import { getExecStats } from '../queryV5/v5ResponseData';
-import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
-import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
-import ConfigPane from './ConfigPane/ConfigPane';
-import Header from './Header/Header';
-import PanelEditorLayout, {
-	PANE_SPLIT,
-} from './PanelEditorLayout/PanelEditorLayout';
-import PreviewPane from './PreviewPane/PreviewPane';
-import { useLegendSeries } from './hooks/useLegendSeries';
-import type { PanelEditorDraftApi } from './types';
-import { usePanelEditSession } from './hooks/usePanelEditSession';
-import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-import { useSeedMetricUnit } from './hooks/useSeedMetricUnit';
-import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
-import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
-import { useSwitchToViewMode } from './hooks/useSwitchToViewMode';
-import { useTableColumns } from './hooks/useTableColumns';
-
-import logEvent from '@/api/common/logEvent';
-import { DashboardEvents } from '../../constants/events';
-
-// The query builder sits in an `overflow:hidden` resizable pane, so its Select
-// popups (group-by, order-by, having, …) clip when they open into the short pane.
-// Portal them to the document body; the query-builder filters honor this via
-// `useSelectPopupContainer`. Scoped to the full-page editor — the View modal keeps
-// its own `ConfigProvider` so popups stay inside the focus-trapped dialog.
-const getBodyPopupContainer = (): HTMLElement => document.body;
-
-interface QueryEditorBodyProps {
-	dashboardId: string;
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	/**
-	 * The persisted panel the dirty check compares against. Distinct from `panel` (the
-	 * seed), which may carry unsaved edits handed off from View mode. Omit for a new panel.
-	 */
-	savedPanel?: DashboardtypesPanelDTO;
-	/** Creating a new panel (seeded default) vs editing an existing one. */
-	isNew?: boolean;
-	/** Target section for a new panel; falls back to the last/new section. */
-	layoutIndex?: number;
-	/** The dashboard can be edited (unlocked + permission); gates Save. */
-	isEditable: boolean;
-	/** Why Save is disabled (locked / no permission); '' when editable. */
-	editDisabledReason: string;
-	/** Leave the editor (navigate back to the dashboard) without saving. */
-	onClose: () => void;
-	/** Called after a successful save — navigates back to the dashboard. */
-	onSaved: () => void;
-	/** Draft state, owned by the shell so it survives an authoring-mode switch. */
-	draftApi: PanelEditorDraftApi;
-	/** The draft kind's definition, narrowed by the shell's fork. */
-	panelDefinition: RenderableQueryPanelDefinition;
-	/** Kind switch, owned by the shell (its cache must survive the fork swap). */
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * The query-kind editor body: a resizable split with the live preview + the
- * kind's editor pane on the left and the config pane on the right. Draft and
- * kind-switch state live in the shell; this body owns the query session and the
- * save round-trip.
- */
-function QueryEditorBody({
-	dashboardId,
-	panelId,
-	panel,
-	savedPanel,
-	isNew = false,
-	layoutIndex,
-	isEditable,
-	editDisabledReason,
-	onClose,
-	onSaved,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: QueryEditorBodyProps): JSX.Element {
-	// Shared editing pipeline (draft + query + staged-query sync + kind switch). A new
-	// panel always serializes its seed query and seeds the builder's default signal.
-	const {
-		draft,
-		spec,
-		setSpec,
-		isSpecDirty,
-		query,
-		runQuery,
-		isQueryDirty,
-		buildSaveSpec,
-	} = usePanelEditSession({
-		panel,
-		panelId,
-		savedPanel,
-		alwaysSerializeQuery: isNew,
-		seedQuerySignal: true,
-		draftApi,
-	});
-	const {
-		data,
-		isFetching,
-		isPreviousData,
-		error,
-		cancelQuery,
-		refetch,
-		pagination,
-	} = query;
-
-	// Live query type (the selected tab) — the type switcher disables kinds that can't be
-	// authored in it. Read from the provider, not the spec: a new panel's spec carries no
-	// query until staged, so the spec would lag the tab.
-	const { currentQuery } = useQueryBuilder();
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
-
-	const panelKind = draft.spec.plugin.kind;
-	// The kind's own lower pane (query builder, plus e.g. List's columns footer).
-	const { EditorPane } = panelDefinition;
-
-	// The current kind's Formatting controls — which unit field (panel-wide `unit` vs
-	// per-column `columnUnits`) a metric unit may seed into. Same source of truth the
-	// switch-time seeding in `buildPluginSpec` reads, so the two stay in lockstep.
-	const formattingControls = useMemo(():
-		| SectionControls[SectionKind.Formatting]
-		| undefined => {
-		const section = panelDefinition.sections.find(
-			(
-				candidate,
-			): candidate is Extract<SectionConfig, { kind: SectionKind.Formatting }> =>
-				candidate.kind === SectionKind.Formatting,
-		);
-		return section?.controls;
-	}, [panelDefinition]);
-
-	// Unsaved-edits flag driving the discard confirmation on close (Save is always
-	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
-	// commits the seed into the draft on open, which would falsely dirty an untouched
-	// query-less new panel.
-	const isDirty = useMemo(
-		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
-		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
-	);
-
-	const isListPanel = panelKind === 'signoz/ListPanel';
-	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
-	// values; cast at this boundary (as ConfigPane does) so the columns editor's
-	// field-key lookup is typed.
-	const listSignal =
-		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
-		TelemetrytypesSignalDTO.logs;
-
-	// Swap the List panel's columns to the new signal's defaults on signal change
-	// (V1 had a per-signal field list; V2 has one `selectFields`).
-	useSwitchColumnsOnSignalChange({
-		enabled: isListPanel,
-		signal: listSignal,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Seed a new List panel's columns from the query's resolved signal (not the kind's
-	// default logs signal) so a traces-List export gets traces columns, not logs.
-	useSeedNewListColumns({
-		enabled: isNew && isListPanel,
-		signal: listSignal,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
-	const { onDragSelect } = usePanelInteractions();
-	const legendSeries = useLegendSeries(draft, data);
-	const tableColumns = useTableColumns(draft, data);
-
-	// Resolves the selected metric's unit and, on a new panel, seeds it into the right
-	// formatting field for the kind (panel-wide `unit`, or per-column `columnUnits` for
-	// a Table once results resolve them). `metricUnit` also drives the mismatch warning.
-	const { metricUnit } = useSeedMetricUnit({
-		isNewPanel: isNew,
-		formattingControls,
-		columns: tableColumns,
-		spec,
-		onChangeSpec: setSpec,
-	});
-
-	// Smallest query step interval (seconds) — the floor for the span-gaps
-	// threshold. Undefined until results carry step metadata.
-	const stepInterval = useMemo((): number | undefined => {
-		const intervals = getExecStats(data.response)?.stepIntervals;
-		const values = intervals ? Object.values(intervals) : [];
-		return values.length ? Math.min(...values) : undefined;
-	}, [data.response]);
-
-	const onSwitchToView = useSwitchToViewMode({
-		dashboardId,
-		panelId,
-		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
-		query: currentQuery,
-		spec: draft.spec,
-	});
-
-	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
-	const { showErrorModal } = useErrorModal();
-
-	const onSave = useCallback(async (): Promise<void> => {
-		if (!isEditable) {
-			return;
-		}
-		try {
-			// Bake the live query into the spec so unstaged edits are saved too.
-			const savedPanelId = await save(buildSaveSpec(draft.spec));
-			// Reveal the saved panel once the dashboard re-renders.
-			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved', {
-				position: 'top-center',
-			});
-			onSaved();
-		} catch (err) {
-			showErrorModal(err);
-		}
-	}, [
-		isEditable,
-		save,
-		buildSaveSpec,
-		draft.spec,
-		setScrollTargetId,
-		onSaved,
-		showErrorModal,
-	]);
-
-	// Leaving an existing panel's editor (without saving) still returns to it, so
-	// the dashboard lands on that panel rather than scrolled to the top. A new,
-	// unsaved panel has no persisted target, so there's nothing to reveal.
-	const onCloseEditor = useCallback((): void => {
-		if (!isNew) {
-			setScrollTargetId(panelId);
-		}
-		onClose();
-	}, [isNew, panelId, setScrollTargetId, onClose]);
-
-	const switchToViewMode = useCallback((): void => {
-		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
-			panelId: panelId,
-		});
-		onSwitchToView();
-	}, [onSwitchToView]);
-
-	return (
-		<PanelEditorLayout
-			split={PANE_SPLIT.query}
-			header={
-				<Header
-					isDirty={isDirty}
-					isSaving={isSaving}
-					showSwitchToView={!isNew}
-					readOnly={!isEditable}
-					readOnlyReason={editDisabledReason}
-					onSave={onSave}
-					onSwitchToView={switchToViewMode}
-					onClose={onCloseEditor}
-				/>
-			}
-			preview={
-				<PreviewPane
-					panelId={panelId}
-					panel={draft}
-					panelDefinition={panelDefinition}
-					data={data}
-					isFetching={isFetching}
-					isPreviousData={isPreviousData}
-					error={error}
-					refetch={refetch}
-					onDragSelect={onDragSelect}
-					pagination={pagination}
-				/>
-			}
-			editor={
-				<ConfigProvider getPopupContainer={getBodyPopupContainer}>
-					<EditorPane
-						panelDefinition={panelDefinition}
-						signal={listSignal}
-						isLoadingQueries={isFetching}
-						onStageRunQuery={runQuery}
-						onCancelQuery={cancelQuery}
-						spec={spec}
-						onChangeSpec={setSpec}
-					/>
-				</ConfigProvider>
-			}
-			config={
-				<ConfigPane
-					panel={draft}
-					panelId={panelId}
-					spec={spec}
-					onChangeSpec={setSpec}
-					onChangePanelKind={onChangePanelKind}
-					queryType={currentQuery.queryType}
-					legendSeries={legendSeries}
-					tableColumns={tableColumns}
-					stepInterval={stepInterval}
-					metricUnit={metricUnit}
-				/>
-			}
-		/>
-	);
-}
-
-export default QueryEditorBody;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/StaticEditorBody.tsx

@@ -1,135 +0,0 @@
-import { useCallback } from 'react';
-import { toast } from '@signozhq/ui/sonner';
-import { PanelMode } from 'lib/visualization/panels/types';
-import StaticPanelBody from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/StaticPanelBody/StaticPanelBody';
-import PanelHeader from 'pages/DashboardPage/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader/PanelHeader';
-import type { RenderableStaticPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import type { PanelKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
-import { EMPTY_PANEL_QUERY_DATA } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-import { EQueryType } from 'types/common/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-
-import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
-import ConfigPane from './ConfigPane/ConfigPane';
-import Header from './Header/Header';
-import PanelEditorLayout, {
-	PANE_SPLIT,
-} from './PanelEditorLayout/PanelEditorLayout';
-import type { PanelEditorContainerProps } from './index';
-import type { PanelEditorDraftApi } from './types';
-import { usePanelEditorSave } from './hooks/usePanelEditorSave';
-
-import styles from './PanelEditor.module.scss';
-
-interface StaticEditorBodyProps extends PanelEditorContainerProps {
-	draftApi: PanelEditorDraftApi;
-	panelDefinition: RenderableStaticPanelDefinition;
-	onChangePanelKind: (kind: PanelKind) => void;
-}
-
-/**
- * Editor body for a kind that renders from its own plugin spec: the kind's
- * editor pane under a live preview of the draft, the config pane on the right.
- * No query session, no builder seeding, no staged-run — the preview re-renders
- * from the draft spec on every edit.
- */
-function StaticEditorBody({
-	dashboardId,
-	panelId,
-	isNew = false,
-	layoutIndex,
-	isEditable,
-	editDisabledReason,
-	onClose,
-	onSaved,
-	draftApi,
-	panelDefinition,
-	onChangePanelKind,
-}: StaticEditorBodyProps): JSX.Element {
-	const { draft, spec, setSpec, isSpecDirty } = draftApi;
-	const { EditorPane } = panelDefinition;
-
-	const { save, isSaving } = usePanelEditorSave({
-		dashboardId,
-		panelId,
-		isNew,
-		layoutIndex,
-	});
-
-	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
-	const { showErrorModal } = useErrorModal();
-
-	const onSave = useCallback(async (): Promise<void> => {
-		if (!isEditable) {
-			return;
-		}
-		try {
-			// `queries: []` is the only shape the API accepts for a static kind.
-			const savedPanelId = await save({ ...draft.spec, queries: [] });
-			setScrollTargetId(savedPanelId);
-			toast.success('Panel saved', {
-				position: 'top-center',
-			});
-			onSaved();
-		} catch (err) {
-			showErrorModal(err);
-		}
-	}, [isEditable, save, draft.spec, setScrollTargetId, onSaved, showErrorModal]);
-
-	const onCloseEditor = useCallback((): void => {
-		if (!isNew) {
-			setScrollTargetId(panelId);
-		}
-		onClose();
-	}, [isNew, panelId, setScrollTargetId, onClose]);
-
-	return (
-		<PanelEditorLayout
-			split={PANE_SPLIT.static}
-			header={
-				<Header
-					isDirty={isSpecDirty}
-					isSaving={isSaving}
-					showSwitchToView={false}
-					readOnly={!isEditable}
-					readOnlyReason={editDisabledReason}
-					onSave={onSave}
-					onClose={onCloseEditor}
-				/>
-			}
-			preview={
-				<div className={styles.staticPreviewSurface}>
-					<PanelHeader
-						panelId={panelId}
-						panel={draft}
-						data={EMPTY_PANEL_QUERY_DATA}
-						isFetching={false}
-						error={null}
-						hideActions
-					/>
-					<StaticPanelBody
-						panelDefinition={panelDefinition}
-						panel={draft}
-						panelId={panelId}
-						panelMode={PanelMode.DASHBOARD_EDIT}
-					/>
-				</div>
-			}
-			editor={<EditorPane spec={spec} onChangeSpec={setSpec} />}
-			config={
-				<ConfigPane
-					panel={draft}
-					panelId={panelId}
-					spec={spec}
-					onChangeSpec={setSpec}
-					onChangePanelKind={onChangePanelKind}
-					queryType={EQueryType.QUERY_BUILDER}
-					legendSeries={[]}
-					tableColumns={[]}
-				/>
-			}
-		/>
-	);
-}
-
-export default StaticEditorBody;

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/__tests__/PanelEditorContainer.test.tsx

@@ -3,7 +3,6 @@ import userEvent from '@testing-library/user-event';
 import { toast } from '@signozhq/ui/sonner';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getSupportedSignals } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
 import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
 
 import PanelEditorContainer from '../index';
@@ -233,12 +232,7 @@ describe('PanelEditorContainer composition', () => {
 			}),
 		);
 		expect(mockQbProps).toHaveBeenCalledWith(
-			expect.objectContaining({
-				panelDefinition: expect.objectContaining({
-					kind: 'signoz/TimeSeriesPanel',
-					mode: 'query',
-				}),
-			}),
+			expect.objectContaining({ panelKind: 'signoz/TimeSeriesPanel' }),
 		);
 		expect(mockConfigProps).toHaveBeenCalledWith(
 			expect.objectContaining({
@@ -262,7 +256,7 @@ describe('PanelEditorContainer composition', () => {
 				setSpec: mockSetSpec,
 				refetch: mockRefetch,
 				alwaysSerializeQuery: false,
-				signal: getSupportedSignals('signoz/TimeSeriesPanel')[0],
+				signal: getPanelDefinition('signoz/TimeSeriesPanel').supportedSignals[0],
 			}),
 		);
 		expect(mockUseTypeSwitch).toHaveBeenCalledWith(

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/__tests__/panelEditorUrlQuery.promql.test.tsx

@@ -18,8 +18,6 @@ import appStore from 'store';
 
 import { useOpenPanelEditor } from '../../hooks/useOpenPanelEditor';
 import { usePanelEditorQuerySync } from '../hooks/usePanelEditorQuerySync';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-
 import PanelEditorQueryBuilder from '../PanelEditorQueryBuilder/PanelEditorQueryBuilder';
 
 // jest.config maps the real hook to a no-op mock; this suite needs real navigation.
@@ -85,7 +83,7 @@ function EditorRoute(): JSX.Element {
 
 	return (
 		<PanelEditorQueryBuilder
-			panelDefinition={requireQueryPanelDefinition('signoz/TimeSeriesPanel')}
+			panelKind="signoz/TimeSeriesPanel"
 			signal={TelemetrytypesSignalDTO.metrics}
 			isLoadingQueries={false}
 			onStageRunQuery={noop}

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/__tests__/usePanelTypeSwitch.test.ts

@@ -19,10 +19,6 @@ jest.mock('lib/query/panelQuery', () => ({
 }));
 jest.mock('../../../Panels/capabilities', () => ({
 	resolveQueryType: jest.fn(),
-	// Real predicate: these specs use real (query) kinds and the static path is
-	// exercised through its own cases below.
-	isQuerylessPanelKind: jest.requireActual('../../../Panels/capabilities')
-		.isQuerylessPanelKind,
 }));
 jest.mock('../../../queryV5/persesQueryAdapters', () => ({
 	toPerses: jest.fn(),

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/useLegendSeries.ts

@@ -1,27 +1,36 @@
 import { useMemo } from 'react';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type { LegendSeries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/legendSeries';
-import { getSectionControls } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getSectionControls';
-import { SectionKind } from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
 import type { PanelQueryData } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
+import {
+	type LegendSeries,
+	resolvePieLegendSeries,
+	resolveTimeSeriesLegendSeries,
+} from '../utils/legendSeries';
+
 /**
  * Resolves the panel's rendered series into `{ label, defaultColor }` pairs so the
- * legend-colors control can key overrides by the exact labels the chart draws, using
- * the resolver the kind declares as its `colors` control.
+ * legend-colors control can key overrides by the exact labels the chart draws. Only the
+ * kinds that expose a colors control resolve series (Pie from its scalar slices, Time
+ * Series from its flat series); every other kind returns none.
  */
 export function useLegendSeries(
 	panel: DashboardtypesPanelDTO,
 	data: PanelQueryData,
 ): LegendSeries[] {
 	const isDarkMode = useIsDarkMode();
-	const kind = panel.spec.plugin.kind;
 
 	return useMemo(() => {
-		const resolve = getSectionControls(kind, SectionKind.Legend)?.colors;
-		return resolve
-			? resolve({ queries: panel.spec.queries, data, isDarkMode })
-			: [];
-	}, [kind, panel.spec.queries, data, isDarkMode]);
+		switch (panel.spec.plugin.kind) {
+			case 'signoz/PieChartPanel':
+				return resolvePieLegendSeries(data, isDarkMode);
+			case 'signoz/TimeSeriesPanel':
+			case 'signoz/BarChartPanel':
+			case 'signoz/HistogramPanel':
+				return resolveTimeSeriesLegendSeries(panel.spec.queries, data, isDarkMode);
+			default:
+				return [];
+		}
+	}, [panel.spec.plugin.kind, panel.spec.queries, data, isDarkMode]);
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelEditSession.ts

@@ -4,19 +4,24 @@ import type {
 	TelemetrytypesSignalDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { PANEL_TYPES } from 'constants/queryBuilder';
-import { requireQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/capabilities';
-import { isPanelKindSupported } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
-import type { RenderableQueryPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
-import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import {
+	getPanelDefinition,
+	isPanelKindSupported,
+} from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import type { RenderablePanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelDefinition';
+import {
+	PANEL_KIND_TO_PANEL_TYPE,
+	type PanelKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
 import {
 	usePanelQuery,
 	type PanelQueryTimeOverride,
 	type UsePanelQueryResult,
 } from 'pages/DashboardPage/DashboardContainer/hooks/usePanelQuery';
 
-import type { PanelEditorDraftApi } from '../types';
 import { usePanelEditorDraft } from './usePanelEditorDraft';
 import { usePanelEditorQuerySync } from './usePanelEditorQuerySync';
+import { usePanelTypeSwitch } from './usePanelTypeSwitch';
 
 interface UsePanelEditSessionArgs {
 	panel: DashboardtypesPanelDTO;
@@ -33,12 +38,6 @@ interface UsePanelEditSessionArgs {
 	alwaysSerializeQuery?: boolean;
 	/** Seed an empty builder with the kind's default signal (new panels) — off for drilldown. */
 	seedQuerySignal?: boolean;
-	/**
-	 * Externally-owned draft. The editor shell hoists it above its mode fork so a
-	 * kind switch across modes survives the branch swap; hosts without a fork (the
-	 * View modal, until it forks) omit it and the session owns the draft.
-	 */
-	draftApi?: PanelEditorDraftApi;
 }
 
 export interface UsePanelEditSessionReturn {
@@ -51,7 +50,7 @@ export interface UsePanelEditSessionReturn {
 	reset: () => void;
 	/** Draft kind → V1 panel type (drives the query builder + preview). */
 	panelType: PANEL_TYPES;
-	panelDefinition: RenderableQueryPanelDefinition;
+	panelDefinition: RenderablePanelDefinition;
 	/** The kind's first supported signal — seeds new queries/columns. */
 	defaultSignal: TelemetrytypesSignalDTO;
 	/** Shared query result for the draft over the resolved time window. */
@@ -63,6 +62,8 @@ export interface UsePanelEditSessionReturn {
 	buildSaveSpec: (
 		spec: DashboardtypesPanelSpecDTO,
 	) => DashboardtypesPanelSpecDTO;
+	/** Switch the draft's visualization kind in place (reversible per session). */
+	onChangePanelKind: (kind: PanelKind) => void;
 }
 
 /**
@@ -79,17 +80,14 @@ export function usePanelEditSession({
 	time,
 	alwaysSerializeQuery = false,
 	seedQuerySignal = false,
-	draftApi,
 }: UsePanelEditSessionArgs): UsePanelEditSessionReturn {
-	// Called unconditionally (hooks rules); unused when a hoisted draft is passed in.
-	const internalDraftApi = usePanelEditorDraft(panel, savedPanel);
-	const { draft, spec, setSpec, isSpecDirty, reset } =
-		draftApi ?? internalDraftApi;
+	const { draft, spec, setSpec, isSpecDirty, reset } = usePanelEditorDraft(
+		panel,
+		savedPanel,
+	);
 
 	const panelKind = draft.spec.plugin.kind;
-	// Hosts fork on `definition.mode` before mounting this session (the editor and
-	// View modal shells) — asserted rather than assumed.
-	const panelDefinition = requireQueryPanelDefinition(panelKind);
+	const panelDefinition = getPanelDefinition(panelKind);
 	const panelType = PANEL_KIND_TO_PANEL_TYPE[panelKind];
 	const defaultSignal = panelDefinition.supportedSignals[0];
 
@@ -111,6 +109,12 @@ export function usePanelEditSession({
 		savedQueries: savedPanel?.spec.queries,
 	});
 
+	const { onChangePanelKind } = usePanelTypeSwitch({
+		spec: draft.spec,
+		panelType,
+		setSpec,
+	});
+
 	return {
 		draft,
 		spec,
@@ -124,5 +128,6 @@ export function usePanelEditSession({
 		runQuery,
 		isQueryDirty,
 		buildSaveSpec,
+		onChangePanelKind,
 	};
 }

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/hooks/usePanelTypeSwitch.ts

@@ -18,10 +18,7 @@ import type {
 	Query,
 } from 'types/api/queryBuilder/queryBuilderData';
 
-import {
-	isQuerylessPanelKind,
-	resolveQueryType,
-} from '../../Panels/capabilities';
+import { resolveQueryType } from '../../Panels/capabilities';
 import {
 	PANEL_KIND_TO_PANEL_TYPE,
 	type PanelKind,
@@ -131,25 +128,11 @@ export function usePanelTypeSwitch({
 				queries,
 			});
 
-			// Revisit → restore the stash verbatim (the reversibility path). A static
-			// kind's stash carries `queries: []` and its builder query is untouched —
-			// there is no builder to re-seed for it.
+			// Revisit → restore the stash verbatim (the reversibility path).
 			const cached = cacheRef.current.get(newKind);
 			if (cached) {
 				setSpec(buildSpec(cached.pluginSpec, cached.queries));
-				if (!isQuerylessPanelKind(newKind)) {
-					redirectWithQueryBuilderData(cached.builderQuery);
-				}
-				return;
-			}
-
-			// First visit to a static kind → fresh spec from its sections, queries
-			// emptied (the API accepts nothing else), and the query builder left as-is:
-			// the stash above keeps the old kind's query for the return trip.
-			if (isQuerylessPanelKind(newKind)) {
-				const signal = getBuilderQueries(currentSpec.queries)[0]
-					?.signal as TelemetrytypesSignalDTO;
-				setSpec(buildSpec(getSwitchedPluginSpec(currentSpec, newKind, signal), []));
+				redirectWithQueryBuilderData(cached.builderQuery);
 				return;
 			}
 

frontend/src/pages/DashboardPage/DashboardContainer/PanelEditor/index.tsx

@@ -1,13 +1,56 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPage/DashboardContainer/Panels/registry';
+import { useCallback, useMemo } from 'react';
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+	useDefaultLayout,
+} from '@signozhq/ui/resizable';
+import { toast } from '@signozhq/ui/sonner';
+import { ConfigProvider } from 'antd';
+import {
+	type DashboardtypesPanelDTO,
+	TelemetrytypesSignalDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { PANEL_KIND_TO_PANEL_TYPE } from 'pages/DashboardPage/DashboardContainer/Panels/types/panelKind';
+import {
+	type SectionConfig,
+	type SectionControls,
+	SectionKind,
+} from 'pages/DashboardPage/DashboardContainer/Panels/types/sections';
+import { getBuilderQueries } from 'pages/DashboardPage/DashboardContainer/Panels/utils/getBuilderQueries';
+import { useErrorModal } from 'providers/ErrorModalProvider';
 
-import QueryEditorBody from './QueryEditorBody';
-import StaticEditorBody from './StaticEditorBody';
-import { usePanelEditorDraft } from './hooks/usePanelEditorDraft';
-import { usePanelTypeSwitch } from './hooks/usePanelTypeSwitch';
+import { getExecStats } from '../queryV5/v5ResponseData';
+import { usePanelInteractions } from '../PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions';
+import { useScrollIntoViewStore } from '../store/useScrollIntoViewStore';
+import ConfigPane from './ConfigPane/ConfigPane';
+import Header from './Header/Header';
+import layoutStorage from './layoutStorage';
+import PanelEditorQueryBuilder from './PanelEditorQueryBuilder/PanelEditorQueryBuilder';
+import PreviewPane from './PreviewPane/PreviewPane';
+import { useLegendSeries } from './hooks/useLegendSeries';
+import { usePanelEditSession } from './hooks/usePanelEditSession';
+import { usePanelEditorSave } from './hooks/usePanelEditorSave';
+import { useSeedMetricUnit } from './hooks/useSeedMetricUnit';
+import { useSeedNewListColumns } from './hooks/useSeedNewListColumns';
+import { useSwitchColumnsOnSignalChange } from './hooks/useSwitchColumnsOnSignalChange';
+import { useSwitchToViewMode } from './hooks/useSwitchToViewMode';
+import { useTableColumns } from './hooks/useTableColumns';
+import ListColumnsEditor from './ListColumnsEditor/ListColumnsEditor';
 
-export interface PanelEditorContainerProps {
+import styles from './PanelEditor.module.scss';
+import logEvent from '@/api/common/logEvent';
+import { DashboardEvents } from '../../constants/events';
+
+// The query builder sits in an `overflow:hidden` resizable pane, so its Select
+// popups (group-by, order-by, having, …) clip when they open into the short pane.
+// Portal them to the document body; the query-builder filters honor this via
+// `useSelectPopupContainer`. Scoped to the full-page editor — the View modal keeps
+// its own `ConfigProvider` so popups stay inside the focus-trapped dialog.
+const getBodyPopupContainer = (): HTMLElement => document.body;
+
+interface PanelEditorContainerProps {
 	dashboardId: string;
 	panelId: string;
 	panel: DashboardtypesPanelDTO;
@@ -31,42 +74,293 @@ export interface PanelEditorContainerProps {
 }
 
 /**
- * V2 panel editor page shell. Owns exactly the state that must survive a switch
- * between authoring modes — the draft and the kind-switch cache — and forks on
- * the draft kind's `mode`: query kinds get the session-backed body, static kinds
- * an editor pane over a live preview with no query machinery at all.
+ * V2 panel editor page body: a resizable split with the live preview + query
+ * builder on the left and the config pane on the right. Owns the draft state and
+ * the save round-trip.
  */
-function PanelEditorContainer(props: PanelEditorContainerProps): JSX.Element {
-	const { panel, savedPanel } = props;
-	const draftApi = usePanelEditorDraft(panel, savedPanel);
+function PanelEditorContainer({
+	dashboardId,
+	panelId,
+	panel,
+	savedPanel,
+	isNew = false,
+	layoutIndex,
+	isEditable,
+	editDisabledReason,
+	onClose,
+	onSaved,
+}: PanelEditorContainerProps): JSX.Element {
+	// Shared editing pipeline (draft + query + staged-query sync + kind switch). A new
+	// panel always serializes its seed query and seeds the builder's default signal.
+	const {
+		draft,
+		spec,
+		setSpec,
+		isSpecDirty,
+		panelDefinition,
+		query,
+		runQuery,
+		isQueryDirty,
+		buildSaveSpec,
+		onChangePanelKind,
+	} = usePanelEditSession({
+		panel,
+		panelId,
+		savedPanel,
+		alwaysSerializeQuery: isNew,
+		seedQuerySignal: true,
+	});
+	const {
+		data,
+		isFetching,
+		isPreviousData,
+		error,
+		cancelQuery,
+		refetch,
+		pagination,
+	} = query;
 
-	const panelKind = draftApi.draft.spec.plugin.kind;
-	const panelDefinition = getPanelDefinition(panelKind);
-
-	const { onChangePanelKind } = usePanelTypeSwitch({
-		spec: draftApi.draft.spec,
-		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
-		setSpec: draftApi.setSpec,
+	// Live query type (the selected tab) — the type switcher disables kinds that can't be
+	// authored in it. Read from the provider, not the spec: a new panel's spec carries no
+	// query until staged, so the spec would lag the tab.
+	const { currentQuery } = useQueryBuilder();
+	const { save, isSaving } = usePanelEditorSave({
+		dashboardId,
+		panelId,
+		isNew,
+		layoutIndex,
+	});
+	const { defaultLayout, onLayoutChanged } = useDefaultLayout({
+		id: 'panel-editor-v2',
+		storage: layoutStorage,
 	});
 
-	if (panelDefinition.mode === 'static') {
-		return (
-			<StaticEditorBody
-				{...props}
-				draftApi={draftApi}
-				panelDefinition={panelDefinition}
-				onChangePanelKind={onChangePanelKind}
-			/>
+	const {
+		defaultLayout: mainDefaultLayout,
+		onLayoutChanged: onMainLayoutChanged,
+	} = useDefaultLayout({
+		id: 'panel-editor-v2-main',
+		storage: layoutStorage,
+	});
+
+	const panelKind = draft.spec.plugin.kind;
+
+	// The current kind's Formatting controls — which unit field (panel-wide `unit` vs
+	// per-column `columnUnits`) a metric unit may seed into. Same source of truth the
+	// switch-time seeding in `buildPluginSpec` reads, so the two stay in lockstep.
+	const formattingControls = useMemo(():
+		| SectionControls[SectionKind.Formatting]
+		| undefined => {
+		const section = panelDefinition.sections.find(
+			(
+				candidate,
+			): candidate is Extract<SectionConfig, { kind: SectionKind.Formatting }> =>
+				candidate.kind === SectionKind.Formatting,
 		);
-	}
+		return section?.controls;
+	}, [panelDefinition]);
+
+	// Unsaved-edits flag driving the discard confirmation on close (Save is always
+	// enabled). Read the seed `panel`, not the live `draft` — the staged-query sync
+	// commits the seed into the draft on open, which would falsely dirty an untouched
+	// query-less new panel.
+	const isDirty = useMemo(
+		() => isSpecDirty || isQueryDirty || (isNew && panel.spec.queries.length > 0),
+		[isSpecDirty, isQueryDirty, isNew, panel.spec.queries.length],
+	);
+
+	const isListPanel = panelKind === 'signoz/ListPanel';
+	// The builder-query `signal` literal matches the TelemetrytypesSignalDTO enum
+	// values; cast at this boundary (as ConfigPane does) so the columns editor's
+	// field-key lookup is typed.
+	const listSignal =
+		(getBuilderQueries(spec.queries)[0]?.signal as TelemetrytypesSignalDTO) ||
+		TelemetrytypesSignalDTO.logs;
+
+	// Swap the List panel's columns to the new signal's defaults on signal change
+	// (V1 had a per-signal field list; V2 has one `selectFields`).
+	useSwitchColumnsOnSignalChange({
+		enabled: isListPanel,
+		signal: listSignal,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Seed a new List panel's columns from the query's resolved signal (not the kind's
+	// default logs signal) so a traces-List export gets traces columns, not logs.
+	useSeedNewListColumns({
+		enabled: isNew && isListPanel,
+		signal: listSignal,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Drag-to-zoom on the preview updates the URL-synced time window, as on the dashboard.
+	const { onDragSelect } = usePanelInteractions();
+	const legendSeries = useLegendSeries(draft, data);
+	const tableColumns = useTableColumns(draft, data);
+
+	// Resolves the selected metric's unit and, on a new panel, seeds it into the right
+	// formatting field for the kind (panel-wide `unit`, or per-column `columnUnits` for
+	// a Table once results resolve them). `metricUnit` also drives the mismatch warning.
+	const { metricUnit } = useSeedMetricUnit({
+		isNewPanel: isNew,
+		formattingControls,
+		columns: tableColumns,
+		spec,
+		onChangeSpec: setSpec,
+	});
+
+	// Smallest query step interval (seconds) — the floor for the span-gaps
+	// threshold. Undefined until results carry step metadata.
+	const stepInterval = useMemo((): number | undefined => {
+		const intervals = getExecStats(data.response)?.stepIntervals;
+		const values = intervals ? Object.values(intervals) : [];
+		return values.length ? Math.min(...values) : undefined;
+	}, [data.response]);
+
+	const onSwitchToView = useSwitchToViewMode({
+		dashboardId,
+		panelId,
+		panelType: PANEL_KIND_TO_PANEL_TYPE[panelKind],
+		query: currentQuery,
+		spec: draft.spec,
+	});
+
+	const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
+	const { showErrorModal } = useErrorModal();
+
+	const onSave = useCallback(async (): Promise<void> => {
+		if (!isEditable) {
+			return;
+		}
+		try {
+			// Bake the live query into the spec so unstaged edits are saved too.
+			const savedPanelId = await save(buildSaveSpec(draft.spec));
+			// Reveal the saved panel once the dashboard re-renders.
+			setScrollTargetId(savedPanelId);
+			toast.success('Panel saved', {
+				position: 'top-center',
+			});
+			onSaved();
+		} catch (err) {
+			showErrorModal(err);
+		}
+	}, [
+		isEditable,
+		save,
+		buildSaveSpec,
+		draft.spec,
+		setScrollTargetId,
+		onSaved,
+		showErrorModal,
+	]);
+
+	// Leaving an existing panel's editor (without saving) still returns to it, so
+	// the dashboard lands on that panel rather than scrolled to the top. A new,
+	// unsaved panel has no persisted target, so there's nothing to reveal.
+	const onCloseEditor = useCallback((): void => {
+		if (!isNew) {
+			setScrollTargetId(panelId);
+		}
+		onClose();
+	}, [isNew, panelId, setScrollTargetId, onClose]);
+
+	const switchToViewMode = useCallback((): void => {
+		logEvent(DashboardEvents.SWITCH_TO_VIEW_MODE, {
+			panelId: panelId,
+		});
+		onSwitchToView();
+	}, [onSwitchToView]);
 
 	return (
-		<QueryEditorBody
-			{...props}
-			draftApi={draftApi}
-			panelDefinition={panelDefinition}
-			onChangePanelKind={onChangePanelKind}
-		/>
+		<div className={styles.page} data-testid="panel-editor-v2">
+			<Header
+				isDirty={isDirty}
+				isSaving={isSaving}
+				showSwitchToView={!isNew}
+				readOnly={!isEditable}
+				readOnlyReason={editDisabledReason}
+				onSave={onSave}
+				onSwitchToView={switchToViewMode}
+				onClose={onCloseEditor}
+			/>
+			<ResizablePanelGroup
+				id="panel-editor-v2"
+				orientation="horizontal"
+				defaultLayout={defaultLayout}
+				onLayoutChanged={onLayoutChanged}
+			>
+				<ResizablePanel minSize="75%" maxSize="80%" defaultSize="80%">
+					<div className={styles.left}>
+						<ResizablePanelGroup
+							id="panel-editor-v2-main"
+							orientation="vertical"
+							defaultLayout={mainDefaultLayout}
+							onLayoutChanged={onMainLayoutChanged}
+						>
+							<ResizablePanel minSize="55%" maxSize="65%" defaultSize="60%">
+								{panelDefinition && (
+									<PreviewPane
+										panelId={panelId}
+										panel={draft}
+										panelDefinition={panelDefinition}
+										data={data}
+										isFetching={isFetching}
+										isPreviousData={isPreviousData}
+										error={error}
+										refetch={refetch}
+										onDragSelect={onDragSelect}
+										pagination={pagination}
+									/>
+								)}
+							</ResizablePanel>
+							<ResizableHandle withHandle className={styles.handle} />
+							<ResizablePanel minSize="35%" maxSize="45%" defaultSize="40%">
+								<ConfigProvider getPopupContainer={getBodyPopupContainer}>
+									<PanelEditorQueryBuilder
+										panelKind={panelKind}
+										signal={listSignal}
+										isLoadingQueries={isFetching}
+										onStageRunQuery={runQuery}
+										onCancelQuery={cancelQuery}
+										footer={
+											isListPanel ? (
+												<ListColumnsEditor
+													spec={spec}
+													onChangeSpec={setSpec}
+													signal={listSignal}
+												/>
+											) : undefined
+										}
+									/>
+								</ConfigProvider>
+							</ResizablePanel>
+						</ResizablePanelGroup>
+					</div>
+				</ResizablePanel>
+				<ResizableHandle withHandle className={styles.handle} />
+				<ResizablePanel
+					minSize="20%"
+					maxSize="25%"
+					defaultSize="20%"
+					className={styles.right}
+				>
+					<ConfigPane
+						panel={draft}
+						panelId={panelId}
+						spec={spec}
+						onChangeSpec={setSpec}
+						onChangePanelKind={onChangePanelKind}
+						queryType={currentQuery.queryType}
+						legendSeries={legendSeries}
+						tableColumns={tableColumns}
+						stepInterval={stepInterval}
+						metricUnit={metricUnit}
+					/>
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
 	);
 }