feat(empty-state): add org context API for contextual empty states

Adds GET /api/v1/empty_state/org_context returning raw org-level
observability signals (ingestion presence per signal, infra metrics,
alert/dashboard/saved-view counts, firing and recently-fired alerts,
raw license state) consumed by the AI assistant to render contextual
empty-state chips. Includes unit tests and an integration test suite.

.github/workflows/integrationci.yaml

@@ -43,6 +43,7 @@ jobs:
           - callbackauthn
           - cloudintegrations
           - dashboard
+          - emptystate
           - ingestionkeys
           - inframonitoring
           - logspipelines

.gitignore

@@ -40,6 +40,8 @@ frontend/src/constants/env.ts
 **/__debug_bin
 
 .env
+# sqlite db created at repo root by `make go-run-community` / `make go-run-enterprise`
+/signoz.db
 pkg/query-service/signoz.db
 
 pkg/query-service/tests/test-deploy/data/

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.1
+    image: signoz/signoz:v0.128.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.127.1
+    image: signoz/signoz:v0.128.0
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.1}
+    image: signoz/signoz:${VERSION:-v0.128.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.127.1}
+    image: signoz/signoz:${VERSION:-v0.128.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -3355,6 +3355,58 @@ components:
       - kind
       - spec
       type: object
+    EmptystatetypesOrgContext:
+      properties:
+        activeFiringAlertsCount:
+          type: integer
+        alertsCount:
+          type: integer
+        dashboardsCount:
+          type: integer
+        hasInfraMetrics:
+          type: boolean
+        hasIngestedData:
+          type: boolean
+        ingestingCurrently:
+          type: boolean
+        licenseStatus:
+          description: Raw Zeus license state. Known values include DEFAULTED, ACTIVATED,
+            EXPIRED, ISSUED, EVALUATING, EVALUATION_EXPIRED, TERMINATED, CANCELLED.
+            UNKNOWN is emitted when no license state is available.
+          type: string
+        recentlyFiredAlertsCount:
+          type: integer
+        savedViewsCount:
+          type: integer
+        signalsIngested:
+          $ref: '#/components/schemas/EmptystatetypesSignalsIngested'
+      required:
+      - hasIngestedData
+      - signalsIngested
+      - ingestingCurrently
+      - hasInfraMetrics
+      - alertsCount
+      - activeFiringAlertsCount
+      - recentlyFiredAlertsCount
+      - dashboardsCount
+      - savedViewsCount
+      - licenseStatus
+      type: object
+    EmptystatetypesSignalsIngested:
+      properties:
+        logs:
+          type: boolean
+        metrics:
+          description: Excludes span-generated metrics (signoz_ prefix), which only
+            prove traces ingestion.
+          type: boolean
+        traces:
+          type: boolean
+      required:
+      - logs
+      - traces
+      - metrics
+      type: object
     ErrorsJSON:
       properties:
         code:
@@ -6726,11 +6778,6 @@ components:
       type: object
     SpantypesGettableWaterfallTrace:
       properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregationResult'
-          nullable: true
-          type: array
         endTimestampMillis:
           minimum: 0
           type: integer
@@ -6818,14 +6865,6 @@ components:
       type: object
     SpantypesPostableWaterfall:
       properties:
-        aggregations:
-          items:
-            $ref: '#/components/schemas/SpantypesSpanAggregation'
-          nullable: true
-          type: array
-        limit:
-          minimum: 0
-          type: integer
         selectedSpanId:
           type: string
         uncollapsedSpans:
@@ -9522,6 +9561,53 @@ paths:
       summary: Update downtime schedule
       tags:
       - downtimeschedules
+  /api/v1/empty_state/org_context:
+    get:
+      deprecated: false
+      description: This endpoint returns raw org-level observability signals used
+        to render contextual empty states
+      operationId: GetOrgContext
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/EmptystatetypesOrgContext'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get org context for empty states
+      tags:
+      - emptystate
   /api/v1/export_raw_data:
     post:
       deprecated: false
@@ -20681,76 +20767,6 @@ paths:
       summary: Get flamegraph view for a trace
       tags:
       - tracedetail
-  /api/v3/traces/{traceID}/waterfall:
-    post:
-      deprecated: false
-      description: Returns the waterfall view of spans for a given trace ID with tree
-        structure, metadata, and windowed pagination
-      operationId: GetWaterfall
-      parameters:
-      - in: path
-        name: traceID
-        required: true
-        schema:
-          type: string
-      requestBody:
-        content:
-          application/json:
-            schema:
-              $ref: '#/components/schemas/SpantypesPostableWaterfall'
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/SpantypesGettableWaterfallTrace'
-                  status:
-                    type: string
-                required:
-                - status
-                - data
-                type: object
-          description: OK
-        "400":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Bad Request
-        "401":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Unauthorized
-        "403":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Forbidden
-        "404":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Not Found
-        "500":
-          content:
-            application/json:
-              schema:
-                $ref: '#/components/schemas/RenderErrorResponse'
-          description: Internal Server Error
-      security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
-      summary: Get waterfall view for a trace
-      tags:
-      - tracedetail
   /api/v4/traces/{traceID}/waterfall:
     post:
       deprecated: false

frontend/src/api/alerts/getTriggered.ts

@@ -5,6 +5,13 @@ import convertObjectIntoParams from 'lib/query/convertObjectIntoParams';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { PayloadProps, Props } from 'types/api/alerts/getTriggered';
 
+/**
+ * @deprecated Use the generated `useGetAlerts` hook (or `getAlerts` fetcher) from
+ * `api/generated/services/alerts` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getTriggered = async (
 	props: Props,
 ): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {

frontend/src/api/channels/createEmail.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createEmail';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createMsTeams.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createMsTeams';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createOpsgenie.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createOpsgenie';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createPager.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createPager';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createSlack.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createSlack';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/createWebhook.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/createWebhook';
 
+/**
+ * @deprecated Use the generated `useCreateChannel` hook (or `createChannel` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const create = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/delete.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/delete';
 
+/**
+ * @deprecated Use the generated `useDeleteChannelByID` hook (or `deleteChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteChannel = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editEmail.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editEmail';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editEmail = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editMsTeams.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editMsTeams';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editMsTeams = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editOpsgenie.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorResponse, ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editOpsgenie';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editOpsgenie = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps> | ErrorResponse> => {

frontend/src/api/channels/editPager.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editPager';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editPager = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editSlack.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editSlack';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editSlack = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/editWebhook.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/editWebhook';
 
+/**
+ * @deprecated Use the generated `useUpdateChannelByID` hook (or `updateChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const editWebhook = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/channels/get.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/channels/get';
 import { Channels } from 'types/api/channels/getAll';
 
+/**
+ * @deprecated Use the generated `useGetChannelByID` hook (or `getChannelByID` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (props: Props): Promise<SuccessResponseV2<Channels>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/channels/${props.id}`);

frontend/src/api/channels/getAll.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Channels, PayloadProps } from 'types/api/channels/getAll';
 
+/**
+ * @deprecated Use the generated `useListChannels` hook (or `listChannels` fetcher) from
+ * `api/generated/services/channels` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getAll = async (): Promise<SuccessResponseV2<Channels[]>> => {
 	try {
 		const response = await axios.get<PayloadProps>('/channels');

frontend/src/api/dashboard/public/createPublicDashboard.ts

@@ -5,6 +5,13 @@ import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constan
 import { ErrorV2Resp, 	 SuccessResponseV2 } from 'types/api';
 import { CreatePublicDashboardProps } from 'types/api/dashboard/public/create';
 
+/**
+ * @deprecated Use the generated `useCreatePublicDashboard` hook (or `createPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const createPublicDashboard = async (
 	props: CreatePublicDashboardProps,
 ): Promise<SuccessResponseV2<CreatePublicDashboardProps>> => {

frontend/src/api/dashboard/public/getPublicDashboardData.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardDataProps, PayloadProps,PublicDashboardDataProps } from 'types/api/dashboard/public/get';
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboardData` hook (or `getPublicDashboardData` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardData = async (props: GetPublicDashboardDataProps): Promise<SuccessResponseV2<PublicDashboardDataProps>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/public/dashboards/${props.id}`);

frontend/src/api/dashboard/public/getPublicDashboardMeta.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardMetaProps, PayloadProps,PublicDashboardMetaProps } from 'types/api/dashboard/public/getMeta';
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboard` hook (or `getPublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardMeta = async (props: GetPublicDashboardMetaProps): Promise<SuccessResponseV2<PublicDashboardMetaProps>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/dashboards/${props.id}/public`);

frontend/src/api/dashboard/public/getPublicDashboardWidgetData.ts

@@ -6,6 +6,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { GetPublicDashboardWidgetDataProps } from 'types/api/dashboard/public/getWidgetData';
 
 
+/**
+ * @deprecated Use the generated `useGetPublicDashboardWidgetQueryRange` hook (or `getPublicDashboardWidgetQueryRange` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const getPublicDashboardWidgetData = async (props: GetPublicDashboardWidgetDataProps): Promise<SuccessResponseV2<MetricRangePayloadV5>> => {
 	try {
 		const response = await axios.get(`/public/dashboards/${props.id}/widgets/${props.index}/query_range`, {

frontend/src/api/dashboard/public/revokePublicDashboardAccess.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps,RevokePublicDashboardAccessProps } from 'types/api/dashboard/public/delete';
 
+/**
+ * @deprecated Use the generated `useDeletePublicDashboard` hook (or `deletePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const revokePublicDashboardAccess = async (
 	props: RevokePublicDashboardAccessProps,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/dashboard/public/updatePublicDashboard.ts

@@ -5,6 +5,13 @@ import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constan
 import {  ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { UpdatePublicDashboardProps } from 'types/api/dashboard/public/update';
 
+/**
+ * @deprecated Use the generated `useUpdatePublicDashboard` hook (or `updatePublicDashboard` fetcher) from
+ * `api/generated/services/dashboard` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const updatePublicDashboard = async (
 	props: UpdatePublicDashboardProps,
 ): Promise<SuccessResponseV2<UpdatePublicDashboardProps>> => {

frontend/src/api/dashboard/substitute_vars.ts

@@ -9,6 +9,13 @@ interface ISubstituteVars {
 	compositeQuery: ICompositeMetricQuery;
 }
 
+/**
+ * @deprecated Use the generated `useReplaceVariables` hook (or `replaceVariables` fetcher) from
+ * `api/generated/services/querier` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getSubstituteVars = async (
 	props?: Partial<QueryRangePayloadV5>,
 	signal?: AbortSignal,

frontend/src/api/dynamicVariables/getFieldKeys.ts

@@ -8,6 +8,12 @@ import { FieldKeyResponse } from 'types/api/dynamicVariables/getFieldKeys';
  * Get field keys for a given signal type
  * @param signal Type of signal (traces, logs, metrics)
  * @param name Optional search text
+ *
+ * @deprecated Use the generated `useGetFieldsKeys` hook (or `getFieldsKeys` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
  */
 export const getFieldKeys = async (
 	signal?: 'traces' | 'logs' | 'metrics',

frontend/src/api/dynamicVariables/getFieldValues.ts

@@ -11,6 +11,12 @@ import { FieldValueResponse } from 'types/api/dynamicVariables/getFieldValues';
  * @param name Name of the attribute for which values are being fetched
  * @param value Optional search text
  * @param existingQuery Optional existing query - across all present dynamic variables
+ *
+ * @deprecated Use the generated `useGetFieldsValues` hook (or `getFieldsValues` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
  */
 export const getFieldValues = async (
 	signal?: 'traces' | 'logs' | 'metrics',

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

@@ -0,0 +1,107 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'pnpm generate:api'
+ * SigNoz
+ */
+import { useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	GetOrgContext200,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint returns raw org-level observability signals used to render contextual empty states
+ * @summary Get org context for empty states
+ */
+export const getOrgContext = (signal?: AbortSignal) => {
+	return GeneratedAPIInstance<GetOrgContext200>({
+		url: `/api/v1/empty_state/org_context`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetOrgContextQueryKey = () => {
+	return [`/api/v1/empty_state/org_context`] as const;
+};
+
+export const getGetOrgContextQueryOptions = <
+	TData = Awaited<ReturnType<typeof getOrgContext>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	>;
+}) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey = queryOptions?.queryKey ?? getGetOrgContextQueryKey();
+
+	const queryFn: QueryFunction<Awaited<ReturnType<typeof getOrgContext>>> = ({
+		signal,
+	}) => getOrgContext(signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetOrgContextQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getOrgContext>>
+>;
+export type GetOrgContextQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get org context for empty states
+ */
+
+export function useGetOrgContext<
+	TData = Awaited<ReturnType<typeof getOrgContext>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(options?: {
+	query?: UseQueryOptions<
+		Awaited<ReturnType<typeof getOrgContext>>,
+		TError,
+		TData
+	>;
+}): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetOrgContextQueryOptions(options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	return { ...query, queryKey: queryOptions.queryKey };
+}
+
+/**
+ * @summary Get org context for empty states
+ */
+export const invalidateGetOrgContext = async (
+	queryClient: QueryClient,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetOrgContextQueryKey() },
+		options,
+	);
+
+	return queryClient;
+};

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

@@ -4826,6 +4826,63 @@ export enum DashboardtypesVariablePluginKindDTO {
 	'signoz/QueryVariable' = 'signoz/QueryVariable',
 	'signoz/CustomVariable' = 'signoz/CustomVariable',
 }
+export interface EmptystatetypesSignalsIngestedDTO {
+	/**
+	 * @type boolean
+	 */
+	logs: boolean;
+	/**
+	 * @type boolean
+	 * @description Excludes span-generated metrics (signoz_ prefix), which only prove traces ingestion.
+	 */
+	metrics: boolean;
+	/**
+	 * @type boolean
+	 */
+	traces: boolean;
+}
+
+export interface EmptystatetypesOrgContextDTO {
+	/**
+	 * @type integer
+	 */
+	activeFiringAlertsCount: number;
+	/**
+	 * @type integer
+	 */
+	alertsCount: number;
+	/**
+	 * @type integer
+	 */
+	dashboardsCount: number;
+	/**
+	 * @type boolean
+	 */
+	hasInfraMetrics: boolean;
+	/**
+	 * @type boolean
+	 */
+	hasIngestedData: boolean;
+	/**
+	 * @type boolean
+	 */
+	ingestingCurrently: boolean;
+	/**
+	 * @type string
+	 * @description Raw Zeus license state. Known values include DEFAULTED, ACTIVATED, EXPIRED, ISSUED, EVALUATING, EVALUATION_EXPIRED, TERMINATED, CANCELLED. UNKNOWN is emitted when no license state is available.
+	 */
+	licenseStatus: string;
+	/**
+	 * @type integer
+	 */
+	recentlyFiredAlertsCount: number;
+	/**
+	 * @type integer
+	 */
+	savedViewsCount: number;
+	signalsIngested: EmptystatetypesSignalsIngestedDTO;
+}
+
 export type FactoryResponseDTOServicesAnyOf = { [key: string]: string[] };
 
 /**
@@ -8095,10 +8152,6 @@ export interface SpantypesWaterfallSpanDTO {
 }
 
 export interface SpantypesGettableWaterfallTraceDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: SpantypesSpanAggregationResultDTO[] | null;
 	/**
 	 * @type integer
 	 * @minimum 0
@@ -8218,15 +8271,6 @@ export interface SpantypesPostableTraceAggregationsDTO {
 }
 
 export interface SpantypesPostableWaterfallDTO {
-	/**
-	 * @type array,null
-	 */
-	aggregations?: SpantypesSpanAggregationDTO[] | null;
-	/**
-	 * @type integer
-	 * @minimum 0
-	 */
-	limit?: number;
 	/**
 	 * @type string
 	 */
@@ -9055,6 +9099,14 @@ export type GetDowntimeScheduleByID200 = {
 export type UpdateDowntimeScheduleByIDPathParameters = {
 	id: string;
 };
+export type GetOrgContext200 = {
+	data: EmptystatetypesOrgContextDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type HandleExportRawDataPOSTParams = {
 	/**
 	 * @enum csv,jsonl
@@ -10521,17 +10573,6 @@ export type GetFlamegraph200 = {
 	status: string;
 };
 
-export type GetWaterfallPathParameters = {
-	traceID: string;
-};
-export type GetWaterfall200 = {
-	data: SpantypesGettableWaterfallTraceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type GetWaterfallV4PathParameters = {
 	traceID: string;
 };

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

@@ -16,8 +16,6 @@ import type {
 	GetFlamegraphPathParameters,
 	GetTraceAggregations200,
 	GetTraceAggregationsPathParameters,
-	GetWaterfall200,
-	GetWaterfallPathParameters,
 	GetWaterfallV4200,
 	GetWaterfallV4PathParameters,
 	RenderErrorResponseDTO,
@@ -228,105 +226,6 @@ export const useGetFlamegraph = <
 > => {
 	return useMutation(getGetFlamegraphMutationOptions(options));
 };
-/**
- * Returns the waterfall view of spans for a given trace ID with tree structure, metadata, and windowed pagination
- * @summary Get waterfall view for a trace
- */
-export const getWaterfall = (
-	{ traceID }: GetWaterfallPathParameters,
-	spantypesPostableWaterfallDTO?: BodyType<SpantypesPostableWaterfallDTO>,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetWaterfall200>({
-		url: `/api/v3/traces/${traceID}/waterfall`,
-		method: 'POST',
-		headers: { 'Content-Type': 'application/json' },
-		data: spantypesPostableWaterfallDTO,
-		signal,
-	});
-};
-
-export const getGetWaterfallMutationOptions = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		},
-		TContext
-	>;
-}): UseMutationOptions<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<SpantypesPostableWaterfallDTO>;
-	},
-	TContext
-> => {
-	const mutationKey = ['getWaterfall'];
-	const { mutation: mutationOptions } = options
-		? options.mutation &&
-			'mutationKey' in options.mutation &&
-			options.mutation.mutationKey
-			? options
-			: { ...options, mutation: { ...options.mutation, mutationKey } }
-		: { mutation: { mutationKey } };
-
-	const mutationFn: MutationFunction<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		}
-	> = (props) => {
-		const { pathParams, data } = props ?? {};
-
-		return getWaterfall(pathParams, data);
-	};
-
-	return { mutationFn, ...mutationOptions };
-};
-
-export type GetWaterfallMutationResult = NonNullable<
-	Awaited<ReturnType<typeof getWaterfall>>
->;
-export type GetWaterfallMutationBody =
-	| BodyType<SpantypesPostableWaterfallDTO>
-	| undefined;
-export type GetWaterfallMutationError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get waterfall view for a trace
- */
-export const useGetWaterfall = <
-	TError = ErrorType<RenderErrorResponseDTO>,
-	TContext = unknown,
->(options?: {
-	mutation?: UseMutationOptions<
-		Awaited<ReturnType<typeof getWaterfall>>,
-		TError,
-		{
-			pathParams: GetWaterfallPathParameters;
-			data?: BodyType<SpantypesPostableWaterfallDTO>;
-		},
-		TContext
-	>;
-}): UseMutationResult<
-	Awaited<ReturnType<typeof getWaterfall>>,
-	TError,
-	{
-		pathParams: GetWaterfallPathParameters;
-		data?: BodyType<SpantypesPostableWaterfallDTO>;
-	},
-	TContext
-> => {
-	return useMutation(getGetWaterfallMutationOptions(options));
-};
 /**
  * Returns the waterfall view of spans including all spans if total spans are under a limit, a max count otherwise. Aggregations are dropped compared to v3
  * @summary Get waterfall view for a trace

frontend/src/api/querySuggestions/getKeySuggestions.ts

@@ -5,6 +5,13 @@ import {
 	QueryKeySuggestionsResponseProps,
 } from 'types/api/querySuggestions/types';
 
+/**
+ * @deprecated Use the generated `useGetFieldsKeys` hook (or `getFieldsKeys` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getKeySuggestions = (
 	props: QueryKeyRequestProps,
 ): Promise<AxiosResponse<QueryKeySuggestionsResponseProps>> => {

frontend/src/api/querySuggestions/getValueSuggestion.ts

@@ -5,6 +5,13 @@ import {
 	QueryKeyValueSuggestionsResponseProps,
 } from 'types/api/querySuggestions/types';
 
+/**
+ * @deprecated Use the generated `useGetFieldsValues` hook (or `getFieldsValues` fetcher) from
+ * `api/generated/services/fields` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getValueSuggestions = (
 	props: QueryKeyValueRequestProps,
 ): Promise<AxiosResponse<QueryKeyValueSuggestionsResponseProps>> => {

frontend/src/api/routingPolicies/createRoutingPolicy.ts

@@ -15,6 +15,13 @@ export interface CreateRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useCreateRoutePolicy` hook (or `createRoutePolicy` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const createRoutingPolicy = async (
 	props: CreateRoutingPolicyBody,
 ): Promise<

frontend/src/api/routingPolicies/deleteRoutingPolicy.ts

@@ -8,6 +8,13 @@ export interface DeleteRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useDeleteRoutePolicyByID` hook (or `deleteRoutePolicyByID` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteRoutingPolicy = async (
 	routingPolicyId: string,
 ): Promise<

frontend/src/api/routingPolicies/getRoutingPolicies.ts

@@ -20,6 +20,13 @@ export interface GetRoutingPoliciesResponse {
 	data?: ApiRoutingPolicy[];
 }
 
+/**
+ * @deprecated Use the generated `useGetAllRoutePolicies` hook (or `getAllRoutePolicies` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getRoutingPolicies = async (
 	signal?: AbortSignal,
 	headers?: Record<string, string>,

frontend/src/api/routingPolicies/updateRoutingPolicy.ts

@@ -15,6 +15,13 @@ export interface UpdateRoutingPolicyResponse {
 	message: string;
 }
 
+/**
+ * @deprecated Use the generated `useUpdateRoutePolicy` hook (or `updateRoutePolicy` fetcher) from
+ * `api/generated/services/routepolicies` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const updateRoutingPolicy = async (
 	id: string,
 	props: UpdateRoutingPolicyBody,

frontend/src/api/trace/getTraceV4.tsx

@@ -27,7 +27,6 @@ const getTraceV4 = async (
 		{
 			selectedSpanId: props.selectedSpanId,
 			uncollapsedSpans,
-			limit: 10000,
 		},
 	);
 

frontend/src/api/v1/factor_password/resetPassword.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/resetPassword';
 
+/**
+ * @deprecated Use the generated `useResetPassword` hook (or `resetPassword` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const resetPassword = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/v1/invite/bulk/create.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { UsersProps } from 'types/api/user/inviteUsers';
 
+/**
+ * @deprecated Use the generated `useCreateBulkInvite` hook (or `createBulkInvite` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const inviteUsers = async (
 	users: UsersProps,
 ): Promise<SuccessResponseV2<null>> => {

frontend/src/api/v1/invite/create.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/user/setInvite';
 
+/**
+ * @deprecated Use the generated `useCreateInvite` hook (or `createInvite` fetcher) from
+ * `api/generated/services/users` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const sendInvite = async (
 	props: Props,
 ): Promise<SuccessResponseV2<PayloadProps>> => {

frontend/src/api/v1/org/preferences/list.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps } from 'types/api/preferences/list';
 import { OrgPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useListOrgPreferences` hook (or `listOrgPreferences` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const listPreference = async (): Promise<
 	SuccessResponseV2<OrgPreference[]>
 > => {

frontend/src/api/v1/org/preferences/name/update.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Props } from 'types/api/preferences/update';
 
+/**
+ * @deprecated Use the generated `useUpdateOrgPreference` hook (or `updateOrgPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.put(`/org/preferences/${props.name}`, {

frontend/src/api/v1/user/preferences/list.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps } from 'types/api/preferences/list';
 import { UserPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useListUserPreferences` hook (or `listUserPreferences` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const list = async (): Promise<SuccessResponseV2<UserPreference[]>> => {
 	try {
 		const response = await axios.get<PayloadProps>(`/user/preferences`);

frontend/src/api/v1/user/preferences/name/get.ts

@@ -5,6 +5,13 @@ import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { PayloadProps, Props } from 'types/api/preferences/get';
 import { UserPreference } from 'types/api/preferences/preference';
 
+/**
+ * @deprecated Use the generated `useGetUserPreference` hook (or `getUserPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (
 	props: Props,
 ): Promise<SuccessResponseV2<UserPreference>> => {

frontend/src/api/v1/user/preferences/name/update.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, SuccessResponseV2 } from 'types/api';
 import { Props } from 'types/api/preferences/update';
 
+/**
+ * @deprecated Use the generated `useUpdateUserPreference` hook (or `updateUserPreference` fetcher) from
+ * `api/generated/services/preferences` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const update = async (props: Props): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.put(`/user/preferences/${props.name}`, {

frontend/src/api/v2/sessions/context/get.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, SessionsContext } from 'types/api/v2/sessions/context/get';
 
+/**
+ * @deprecated Use the generated `useGetSessionContext` hook (or `getSessionContext` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const get = async (
 	props: Props,
 ): Promise<SuccessResponseV2<SessionsContext>> => {

frontend/src/api/v2/sessions/delete.ts

@@ -3,6 +3,13 @@ import { ErrorResponseHandlerV2 } from 'api/ErrorResponseHandlerV2';
 import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 
+/**
+ * @deprecated Use the generated `useDeleteSession` hook (or `deleteSession` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const deleteSession = async (): Promise<SuccessResponseV2<null>> => {
 	try {
 		const response = await axios.delete<RawSuccessResponse<null>>('/sessions');

frontend/src/api/v2/sessions/email_password/post.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, Token } from 'types/api/v2/sessions/email_password/post';
 
+/**
+ * @deprecated Use the generated `useCreateSessionByEmailPassword` hook (or `createSessionByEmailPassword` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const post = async (props: Props): Promise<SuccessResponseV2<Token>> => {
 	try {
 		const response = await axios.post<RawSuccessResponse<Token>>(

frontend/src/api/v2/sessions/rotate/post.ts

@@ -4,6 +4,13 @@ import { AxiosError } from 'axios';
 import { ErrorV2Resp, RawSuccessResponse, SuccessResponseV2 } from 'types/api';
 import { Props, Token } from 'types/api/v2/sessions/rotate/post';
 
+/**
+ * @deprecated Use the generated `useRotateSession` hook (or `rotateSession` fetcher) from
+ * `api/generated/services/sessions` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 const post = async (props: Props): Promise<SuccessResponseV2<Token>> => {
 	try {
 		const response = await axios.post<RawSuccessResponse<Token>>(

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

@@ -8,6 +8,13 @@ import {
 	QueryRangePayloadV5,
 } from 'types/api/v5/queryRange';
 
+/**
+ * @deprecated Use the generated `useQueryRangeV5` hook (or `queryRangeV5` fetcher) from
+ * `api/generated/services/querier` instead. This hand-written client targets the
+ * same endpoint and will be removed once call sites migrate.
+ *
+ * Part of https://github.com/SigNoz/engineering-pod/issues/5289, add a comment or update when removing this method.
+ */
 export const getQueryRangeV5 = async (
 	props: QueryRangePayloadV5,
 	version: string,

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useGroupByPerQuery.ts

@@ -1,30 +0,0 @@
-import { useMemo } from 'react';
-import type { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-/**
- * Builds a record keyed by builder-query name to that query's groupBy keys
- * in the V1 `BaseAutocompleteData` shape — the shape `TimeSeries` and the
- * tooltip plugin consume. Conversion from v5 `GroupByKey` lives at this one
- * call site that needs the V1 shape; the rest of V2 panel code stays on
- * v5 types.
- */
-export function useGroupByPerQuery(
-	builderQueries: BuilderQuery[],
-): Record<string, BaseAutocompleteData[]> {
-	return useMemo(() => {
-		const result: Record<string, BaseAutocompleteData[]> = {};
-		builderQueries.forEach((q) => {
-			if (!q.name) {
-				return;
-			}
-			result[q.name] = (q.groupBy ?? []).map((g) => ({
-				key: g.name,
-				dataType: g.fieldDataType as BaseAutocompleteData['dataType'],
-				type: (g.fieldContext as BaseAutocompleteData['type']) ?? '',
-				id: '',
-			}));
-		});
-		return result;
-	}, [builderQueries]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/hooks/useTimeScale.ts

@@ -1,29 +0,0 @@
-import { useMemo } from 'react';
-import type { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import type { QueryRangeRequestV5 } from 'types/api/v5/queryRange';
-import { getTimeRangeFromQueryRangeRequest } from 'utils/getTimeRange';
-
-interface TimeScale {
-	minTimeScale: number | undefined;
-	maxTimeScale: number | undefined;
-}
-
-/**
- * Derives the X-axis time-scale clamps from a query-range response. Reads
- * `start`/`end` off `data.params` (the request that produced this payload)
- * so each panel pins to the window it actually fetched — important during
- * drag-zoom transitions when the time picker has moved but new data hasn't
- * arrived yet. Falls back to the global time picker via the helper when
- * `data` is absent.
- */
-export function useTimeScale(
-	data: MetricQueryRangeSuccessResponse | undefined,
-): TimeScale {
-	return useMemo(() => {
-		// `data.params` is typed `unknown` on this branch; PR 11562 narrows it
-		// to `QueryRangeRequestV5`. Drop this cast when that lands.
-		const params = data?.params as QueryRangeRequestV5 | undefined;
-		const { startTime, endTime } = getTimeRangeFromQueryRangeRequest(params);
-		return { minTimeScale: startTime, maxTimeScale: endTime };
-	}, [data]);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/index.ts

@@ -1,34 +0,0 @@
-import { definition as barChart } from './kinds/BarChartPanel/definition';
-import { definition as histogram } from './kinds/HistogramPanel/definition';
-import { definition as pieChart } from './kinds/PieChartPanel/definition';
-import { definition as timeSeries } from './kinds/TimeSeriesPanel/definition';
-import type {
-	PanelRegistry,
-	RenderablePanelDefinition,
-} from './types/panelDefinition';
-import type { PanelKind } from './types/panelKind';
-
-// Pure assembly: each kind owns its own PanelDefinition (see
-// `kinds/<Kind>/definition.ts`). Registering a new panel = add its folder and a
-// single entry below — no other central file needs editing.
-export const PANELS: PanelRegistry = {
-	[timeSeries.kind]: timeSeries,
-	[barChart.kind]: barChart,
-	[histogram.kind]: histogram,
-	[pieChart.kind]: pieChart,
-};
-
-export function getPanelDefinition(
-	kind: string | undefined,
-): RenderablePanelDefinition | undefined {
-	if (!kind) {
-		return undefined;
-	}
-	// The registry is correlated by kind, so a string lookup yields a union over
-	// every kind's exactly-typed definition. The renderer cannot be validated
-	// against that union at the JSX boundary, so widen to the kind-agnostic
-	// surface here — the single, intentional cast for the whole panel system.
-	return PANELS[kind as PanelKind] as unknown as
-		| RenderablePanelDefinition
-		| undefined;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/Renderer.tsx

@@ -1,152 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { useTimezone } from 'providers/Timezone';
-
-import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
-import { useTimeScale } from '../../hooks/useTimeScale';
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildBarChartConfig } from './buildConfig';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function BarPanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-	onDragSelect,
-	dashboardPreference,
-	panelMode,
-}: PanelRendererProps<'signoz/BarChartPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/BarChartPanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesBarChartPanelSpecDTO>(
-		() => (panel?.spec?.plugin?.spec ?? {}) as DashboardtypesBarChartPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	const { minTimeScale, maxTimeScale } = useTimeScale(data);
-	const groupByPerQuery = useGroupByPerQuery(builderQueries);
-
-	const config = useMemo(
-		() =>
-			buildBarChartConfig({
-				panelId,
-				spec,
-				builderQueries,
-				apiResponse: data,
-				isDarkMode,
-				timezone,
-				panelMode,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			panelId,
-			spec,
-			builderQueries,
-			data,
-			isDarkMode,
-			timezone,
-			panelMode,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
-			// Rebuild it on syncMode changes so the new chart instance starts from a
-			// clean config — otherwise switching to "No Sync" would inherit stale sync
-			// settings from the previous mode.
-			dashboardPreference?.syncMode,
-		],
-	);
-
-	const chartData = useMemo(
-		() => (data?.payload ? prepareChartData(data.payload) : []),
-		[data?.payload],
-	);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(() => {
-		return resolveLegendPosition(spec.legend?.position);
-	}, [spec.legend?.position]);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
-		),
-		[panelId],
-	);
-
-	// The uPlot key prop is the only way to force a full teardown and re-mount
-	// of the chart. Including syncMode/syncFilterMode in the key ensures changes
-	// to these preferences trigger a fresh chart instance, preventing stale
-	// sync wiring from being inherited.
-	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="bar-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<BarChart
-					key={key}
-					config={config}
-					data={chartData}
-					legendConfig={{ position: legendPosition }}
-					groupByPerQuery={groupByPerQuery}
-					canPinTooltip
-					timezone={timezone}
-					yAxisUnit={spec.formatting?.unit}
-					decimalPrecision={decimalPrecision}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					syncMode={dashboardPreference?.syncMode}
-					syncFilterMode={dashboardPreference?.syncFilterMode}
-					isStackedBarChart={spec.visualization?.stackedBarChart ?? false}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default BarPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/buildConfig.ts

@@ -1,140 +0,0 @@
-import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import { resolveSeriesLabel } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-export interface BuildBarChartConfigArgs {
-	panelId: string;
-	spec: DashboardtypesBarChartPanelSpecDTO;
-	/**
-	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
-	 * Powers per-query legend resolution; empty for non-builder panels.
-	 */
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a Bar chart panel.
- *
- * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
- * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
- * in the Bar-specific concerns: optional stacking via uPlot bands, plus
- * one bar series per result row.
- */
-export function buildBarChartConfig({
-	panelId,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-	timezone,
-	panelMode,
-	onDragSelect,
-	onClick,
-	minTimeScale,
-	maxTimeScale,
-}: BuildBarChartConfigArgs): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.BAR,
-		isDarkMode,
-		timezone,
-		panelMode,
-		isLogScale: spec.axes?.isLogScale,
-		softMin: spec.axes?.softMin ?? undefined,
-		softMax: spec.axes?.softMax ?? undefined,
-		formatting: spec.formatting,
-		thresholds: spec.thresholds,
-		apiResponse,
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-		onClick,
-	});
-
-	addSeriesFromResponse({
-		builder,
-		spec,
-		builderQueries,
-		apiResponse,
-		isDarkMode,
-	});
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesBarChartPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-}
-
-/**
- * Adds one bar series per result row, plus uPlot bands for stacking when
- * `spec.visualization.stackedBarChart` is set. Each series receives its
- * own per-query step interval so bar widths line up with the actual
- * sampling cadence reported by the backend.
- */
-function addSeriesFromResponse({
-	builder,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	const result = apiResponse?.payload?.data?.result;
-	if (!result) {
-		return;
-	}
-
-	const stepIntervals =
-		apiResponse?.payload?.data?.newResult?.meta?.stepIntervals;
-	const colorMapping = spec.legend?.customColors ?? {};
-
-	if (spec.visualization?.stackedBarChart) {
-		// uPlot uses 1-based series indices (index 0 is the timestamp axis);
-		// `+1` keeps the band targets aligned with the series we're about to add.
-		builder.setBands(getInitialStackedBands(result.length + 1));
-	}
-
-	result.forEach((series) => {
-		const baseLabel = getLabelName(
-			series.metric,
-			series.queryName || '',
-			series.legend || '',
-		);
-		const label = resolveSeriesLabel(series, builderQueries, baseLabel);
-		const stepInterval = series.queryName
-			? stepIntervals?.[series.queryName]
-			: undefined;
-
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping,
-			isDarkMode,
-			stepInterval,
-			metric: series.metric,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/definition.ts

@@ -1,13 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/BarChartPanel'> = {
-	kind: 'signoz/BarChartPanel',
-	displayName: 'Bar Chart',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/BarChartPanel/sections.ts

@@ -1,9 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{ kind: 'formatting', controls: { unit: true, decimals: true } },
-	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-	{ kind: 'chartAppearance', controls: { stacked: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/Renderer.tsx

@@ -1,126 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import Histogram from 'container/DashboardContainer/visualization/charts/Histogram/Histogram';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import { useTimezone } from 'providers/Timezone';
-import type uPlot from 'uplot';
-
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import { resolveLegendPosition } from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildHistogramConfig } from './buildConfig';
-import { prepareHistogramData } from './prepareData';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function HistogramPanelRenderer({
-	panelId,
-	panel,
-	data,
-	panelMode,
-	onClick,
-}: PanelRendererProps<'signoz/HistogramPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/HistogramPanel'`, so the cast is a
-	// documented boundary narrowing.
-	const spec = useMemo<DashboardtypesHistogramPanelSpecDTO>(
-		() =>
-			(panel?.spec?.plugin?.spec ?? {}) as DashboardtypesHistogramPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	const config = useMemo(
-		() =>
-			buildHistogramConfig({
-				panelId,
-				spec,
-				builderQueries,
-				apiResponse: data,
-				isDarkMode,
-				timezone,
-				panelMode,
-			}),
-		[panelId, spec, builderQueries, data, isDarkMode, timezone, panelMode],
-	);
-
-	const chartData = useMemo(
-		() =>
-			prepareHistogramData({
-				payload: data?.payload,
-				bucketWidth: spec.histogramBuckets?.bucketWidth ?? undefined,
-				bucketCount: spec.histogramBuckets?.bucketCount ?? undefined,
-				mergeAllActiveQueries: spec.histogramBuckets?.mergeAllActiveQueries,
-			}),
-		[
-			data?.payload,
-			spec.histogramBuckets?.bucketWidth,
-			spec.histogramBuckets?.bucketCount,
-			spec.histogramBuckets?.mergeAllActiveQueries,
-		],
-	);
-
-	const legendPosition = useMemo(
-		() => resolveLegendPosition(spec.legend?.position),
-		[spec.legend?.position],
-	);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter
-				id={panelId}
-				isPinned={isPinned}
-				dismiss={dismiss}
-				canDrilldown={false}
-			/>
-		),
-		[panelId],
-	);
-
-	const isQueriesMerged = spec.histogramBuckets?.mergeAllActiveQueries ?? false;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="histogram-panel-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<Histogram
-					key={panelId}
-					config={config}
-					data={chartData as uPlot.AlignedData}
-					legendConfig={{ position: legendPosition }}
-					canPinTooltip
-					isQueriesMerged={isQueriesMerged}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default HistogramPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/buildConfig.ts

@@ -1,142 +0,0 @@
-import type { DashboardtypesHistogramPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import { resolveSeriesLabel } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import getLabelName from 'lib/getLabelName';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-const POINT_SIZE = 5;
-const BAR_WIDTH_FACTOR = 1;
-// Merged-series colors mirror the V1 default — single histogram bin gets a
-// fixed blue-ish pair so the merged view looks the same as before.
-const MERGED_SERIES_LINE_COLOR = '#3f5ecc';
-const MERGED_SERIES_FILL_COLOR = '#4E74F8';
-
-export interface BuildHistogramConfigArgs {
-	panelId: string;
-	spec: DashboardtypesHistogramPanelSpecDTO;
-	/** Builder queries on this panel — used to resolve per-series labels. */
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a Histogram panel.
- *
- * Unlike time-axis panels, histograms have no time scale and no drag-to-zoom.
- * We still reuse `buildBaseConfig` for the consistent scaffolding (thresholds,
- * axes, click plugin) but then override the X/Y scales to be auto-linear
- * (`time: false, auto: true`) and install a histogram-specific cursor that
- * disables drag-pan and tightens focus proximity.
- */
-export function buildHistogramConfig({
-	panelId,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-	timezone,
-	panelMode,
-}: BuildHistogramConfigArgs): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.HISTOGRAM,
-		isDarkMode,
-		timezone,
-		panelMode,
-		apiResponse,
-	});
-
-	builder.setCursor({
-		drag: { x: false, y: false, setScale: true },
-		focus: { prox: 1e3 },
-	});
-
-	// Override the time-axis scales from `buildBaseConfig` — histograms are
-	// distribution plots, not time series.
-	builder.addScale({ scaleKey: 'x', time: false, auto: true });
-	builder.addScale({ scaleKey: 'y', time: false, auto: true, min: 0 });
-
-	addSeriesFromResponse({
-		builder,
-		spec,
-		builderQueries,
-		apiResponse,
-		isDarkMode,
-	});
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesHistogramPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-}
-
-/**
- * Adds histogram bar series to the builder. When `mergeAllActiveQueries` is
- * set, `prepareHistogramData` produces a single Y column, so we add exactly
- * one series with the fixed merged-mode colors. Otherwise one series per
- * result row, with labels resolved via the standard legend matrix.
- */
-function addSeriesFromResponse({
-	builder,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	const colorMapping = spec.legend?.customColors ?? {};
-	const mergeAllActiveQueries =
-		spec.histogramBuckets?.mergeAllActiveQueries ?? false;
-
-	if (mergeAllActiveQueries) {
-		builder.addSeries({
-			scaleKey: 'y',
-			label: '',
-			drawStyle: DrawStyle.Histogram,
-			colorMapping,
-			barWidthFactor: BAR_WIDTH_FACTOR,
-			pointSize: POINT_SIZE,
-			lineColor: MERGED_SERIES_LINE_COLOR,
-			fillColor: MERGED_SERIES_FILL_COLOR,
-			isDarkMode,
-		});
-		return;
-	}
-
-	const result = apiResponse?.payload?.data?.result;
-	if (!result) {
-		return;
-	}
-
-	result.forEach((series) => {
-		const baseLabel = getLabelName(
-			series.metric,
-			series.queryName || '',
-			series.legend || '',
-		);
-		const label = resolveSeriesLabel(series, builderQueries, baseLabel);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			label,
-			drawStyle: DrawStyle.Histogram,
-			colorMapping,
-			barWidthFactor: BAR_WIDTH_FACTOR,
-			pointSize: POINT_SIZE,
-			isDarkMode,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/definition.ts

@@ -1,13 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/HistogramPanel'> = {
-	kind: 'signoz/HistogramPanel',
-	displayName: 'Histogram',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/prepareData.ts

@@ -1,148 +0,0 @@
-import { histogramBucketSizes } from '@grafana/data';
-import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
-import {
-	buildHistogramBuckets,
-	mergeAlignedDataTables,
-	prependNullBinToFirstHistogramSeries,
-	replaceUndefinedWithNullInAlignedData,
-} from 'container/DashboardContainer/visualization/panels/utils/histogram';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import { AlignedData } from 'uplot';
-import { incrRoundDn, roundDecimals } from 'utils/round';
-
-export interface PrepareHistogramDataArgs {
-	payload: MetricRangePayloadProps | undefined;
-	bucketWidth?: number;
-	bucketCount?: number;
-	mergeAllActiveQueries?: boolean;
-}
-
-const BUCKET_OFFSET = 0;
-const sortAscending = (a: number, b: number): number => a - b;
-
-/**
- * Bins raw series values into a uPlot-aligned histogram. Picks a bucket size
- * either from `bucketWidth` (explicit override) or the smallest predefined
- * Grafana bucket that fits the data's `range / bucketCount` target while
- * staying ≥ the data's smallest non-zero delta (so we never sub-divide below
- * the resolution of the input).
- *
- * Empty input → `[[]]` (a valid empty AlignedData uPlot accepts).
- */
-export function prepareHistogramData({
-	payload,
-	bucketWidth,
-	bucketCount = DEFAULT_BUCKET_COUNT,
-	mergeAllActiveQueries = false,
-}: PrepareHistogramDataArgs): AlignedData {
-	if (!payload) {
-		return [[]];
-	}
-	const result = payload.data.result;
-	const values = extractNumericValues(result);
-	if (values.length === 0) {
-		return [[]];
-	}
-
-	const sorted = [...values].sort(sortAscending);
-	const range = sorted[sorted.length - 1] - sorted[0];
-	const smallestDelta = computeSmallestDelta(sorted);
-	let bucketSize = selectBucketSize({
-		range,
-		bucketCount,
-		smallestDelta,
-		bucketWidthOverride: bucketWidth,
-	});
-	if (bucketSize <= 0) {
-		bucketSize = range > 0 ? range / bucketCount : 1;
-	}
-
-	const getBucket = (v: number): number =>
-		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
-
-	const frames = buildFrames(result, mergeAllActiveQueries);
-	// Merged mode folds every query into frame 0 and leaves trailing empty
-	// frames — drop those. Per-query mode must keep one column per result row
-	// (even empty queries), or the data column count drifts below the series
-	// count `buildHistogramConfig` adds per row → uPlot renders nothing.
-	const histograms: AlignedData[] = frames
-		.filter((frame) => !mergeAllActiveQueries || frame.length > 0)
-		.map((frame) => buildHistogramBuckets(frame, getBucket, sortAscending));
-
-	if (histograms.length === 0) {
-		return [[]];
-	}
-
-	const merged = mergeAlignedDataTables(histograms);
-	replaceUndefinedWithNullInAlignedData(merged);
-	prependNullBinToFirstHistogramSeries(merged, bucketSize);
-	return merged;
-}
-
-function extractNumericValues(
-	result: MetricRangePayloadProps['data']['result'],
-): number[] {
-	const values: number[] = [];
-	for (const item of result) {
-		for (const [, valueStr] of item.values) {
-			values.push(Number.parseFloat(valueStr) || 0);
-		}
-	}
-	return values;
-}
-
-function computeSmallestDelta(sortedValues: number[]): number {
-	if (sortedValues.length <= 1) {
-		return 0;
-	}
-	let smallest = Infinity;
-	for (let i = 1; i < sortedValues.length; i++) {
-		const delta = sortedValues[i] - sortedValues[i - 1];
-		if (delta > 0) {
-			smallest = Math.min(smallest, delta);
-		}
-	}
-	return smallest === Infinity ? 0 : smallest;
-}
-
-function selectBucketSize({
-	range,
-	bucketCount,
-	smallestDelta,
-	bucketWidthOverride,
-}: {
-	range: number;
-	bucketCount: number;
-	smallestDelta: number;
-	bucketWidthOverride?: number;
-}): number {
-	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
-		return bucketWidthOverride;
-	}
-	const targetSize = range / bucketCount;
-	for (const candidate of histogramBucketSizes) {
-		if (targetSize < candidate && candidate >= smallestDelta) {
-			return candidate;
-		}
-	}
-	return 0;
-}
-
-// When merging is on, fold all frames into the first; the trailing empty
-// frames stay in the array so downstream `.filter(length > 0)` drops them.
-function buildFrames(
-	result: MetricRangePayloadProps['data']['result'],
-	mergeAllActiveQueries: boolean,
-): number[][] {
-	const frames: number[][] = result.map((item) =>
-		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
-	);
-	if (mergeAllActiveQueries && frames.length > 1) {
-		const first = frames[0];
-		for (let i = 1; i < frames.length; i++) {
-			first.push(...frames[i]);
-			frames[i] = [];
-		}
-	}
-	return frames;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/HistogramPanel/sections.ts

@@ -1,6 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'buckets', controls: { count: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/Renderer.tsx

@@ -1,76 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import type { DashboardtypesPieChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import Pie from 'container/DashboardContainer/visualization/charts/Pie/Pie';
-import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-
-import { preparePieData } from './prepareData';
-
-function PiePanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-}: PanelRendererProps<'signoz/PieChartPanel'>): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/PieChartPanel'`, so the cast is a
-	// documented boundary narrowing. Memoized so the `?? {}` fallback doesn't
-	// produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesPieChartPanelSpecDTO>(
-		() => (panel?.spec?.plugin?.spec ?? {}) as DashboardtypesPieChartPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const slices = useMemo(
-		() =>
-			preparePieData({
-				payload: data?.payload,
-				customColors: spec.legend?.customColors,
-				isDarkMode,
-			}),
-		[data?.payload, spec.legend?.customColors, isDarkMode],
-	);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(
-		() => resolveLegendPosition(spec.legend?.position),
-		[spec.legend?.position],
-	);
-
-	const handleSliceClick = useCallback(
-		(slice: PieSlice) => {
-			onClick?.({ label: slice.label, value: slice.value });
-		},
-		[onClick],
-	);
-
-	return (
-		<div data-testid="pie-panel-renderer" className={PanelStyles.panelContainer}>
-			<Pie
-				data={slices}
-				yAxisUnit={spec.formatting?.unit}
-				decimalPrecision={decimalPrecision}
-				isDarkMode={isDarkMode}
-				position={legendPosition}
-				id={panelId}
-				onSliceClick={handleSliceClick}
-				data-testid="pie-chart"
-			/>
-		</div>
-	);
-}
-
-export default PiePanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/definition.ts

@@ -1,13 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/PieChartPanel'> = {
-	kind: 'signoz/PieChartPanel',
-	displayName: 'Pie Chart',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/prepareData.ts

@@ -1,89 +0,0 @@
-import { themeColors } from 'constants/theme';
-import type { PieSlice } from 'container/DashboardContainer/visualization/charts/types';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
-import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-export interface PreparePieDataArgs {
-	payload: MetricRangePayloadProps | undefined;
-	/** Per-label colour overrides from `spec.legend.customColors`. */
-	customColors?: Record<string, string> | null;
-	isDarkMode: boolean;
-}
-
-// Local view of the scalar/table response. A pie issues a TABLE request (see
-// `getGraphType`), which the API returns web-formatted: one aggregation column
-// holds the value, the remaining (group) columns form the label, and each row's
-// `data` is keyed by `column.id || column.name`. The generated `QueryData.table`
-// types its columns loosely (no `isValueColumn`), so we cast to this precise
-// shape once at the boundary rather than threading `any` through.
-interface ScalarTableColumn {
-	name: string;
-	id?: string;
-	isValueColumn: boolean;
-}
-interface ScalarTableEntry {
-	queryName?: string;
-	legend?: string;
-	table?: {
-		columns: ScalarTableColumn[];
-		rows: { data: Record<string, string | number | null> }[];
-	};
-}
-
-/**
- * Turns a query response into pie slices: one slice per group row.
- *
- * The reduced value-per-series lives in the scalar `table`, not the time-series
- * `result[].values`. Because the pie's graphType is `TABLE`, the response is
- * web-formatted and the table sits on `result[]`; we fall back to `newResult`
- * for the non-`formatForWeb` shape. Labels come from the group column(s),
- * colours honour `customColors` then fall back to a deterministic palette
- * colour, and non-positive / non-numeric values are dropped.
- */
-export function preparePieData({
-	payload,
-	customColors,
-	isDarkMode,
-}: PreparePieDataArgs): PieSlice[] {
-	const primary = (payload?.data?.result ?? []) as unknown as ScalarTableEntry[];
-	const fallback = (payload?.data?.newResult?.data?.result ??
-		[]) as unknown as ScalarTableEntry[];
-	const entries = primary.some((entry) => entry.table) ? primary : fallback;
-
-	const colorMap = isDarkMode
-		? themeColors.chartcolors
-		: themeColors.lightModeColor;
-
-	const slices: PieSlice[] = [];
-	entries.forEach((entry) => {
-		const { table } = entry;
-		if (!table) {
-			return;
-		}
-
-		const valueColumn = table.columns.find((column) => column.isValueColumn);
-		if (!valueColumn) {
-			return;
-		}
-		const valueKey = valueColumn.id || valueColumn.name;
-		const labelColumns = table.columns.filter((column) => !column.isValueColumn);
-
-		table.rows.forEach((row) => {
-			const value = Number(row.data[valueKey]);
-			const label =
-				labelColumns
-					.map((column) => row.data[column.id || column.name])
-					.filter((part) => part != null)
-					.join(', ') ||
-				entry.legend ||
-				entry.queryName ||
-				'';
-			const color = customColors?.[label] ?? generateColor(label, colorMap);
-			slices.push({ label, value, color });
-		});
-	});
-
-	return slices.filter(
-		(slice) => Number.isFinite(slice.value) && slice.value > 0,
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/PieChartPanel/sections.ts

@@ -1,8 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-// Pie has no axes, thresholds, or stacking — just value formatting and a
-// legend. `mode` is omitted: the pie legend is always interactive swatches.
-export const sections: SectionConfig[] = [
-	{ kind: 'formatting', controls: { unit: true, decimals: true } },
-	{ kind: 'legend', controls: { position: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/Renderer.tsx

@@ -1,154 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
-import TooltipFooter from 'container/DashboardContainer/visualization/panels/components/TooltipFooter';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { useResizeObserver } from 'hooks/useDimensions';
-import { IRenderTooltipFooterArgs } from 'lib/uPlotV2/components/types';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import { useTimezone } from 'providers/Timezone';
-
-import { useGroupByPerQuery } from '../../hooks/useGroupByPerQuery';
-import { useTimeScale } from '../../hooks/useTimeScale';
-import PanelStyles from '../../panel.module.scss';
-import { PanelRendererProps } from '../../types/rendererProps';
-import {
-	resolveDecimalPrecision,
-	resolveLegendPosition,
-} from '../../utils/chartAppearanceMappings';
-import { getBuilderQueries } from '../../utils/getBuilderQueries';
-
-import { buildTimeSeriesConfig } from './buildConfig';
-import { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-function TimeSeriesPanelRenderer({
-	panelId,
-	panel,
-	data,
-	onClick,
-	onDragSelect,
-	dashboardPreference,
-	panelMode,
-}: PanelRendererProps<'signoz/TimeSeriesPanel'>): JSX.Element {
-	const graphRef = useRef<HTMLDivElement>(null);
-	const containerDimensions = useResizeObserver(graphRef);
-	const isDarkMode = useIsDarkMode();
-	const { timezone } = useTimezone();
-
-	// The registry guarantees this Renderer only runs when
-	// `panel.spec.plugin.kind === 'signoz/TimeSeriesPanel'`, so the cast is a
-	// documented boundary narrowing — not a blind assertion. Memoized so the
-	// `?? {}` fallback doesn't produce a fresh object on each render.
-	const spec = useMemo<DashboardtypesTimeSeriesPanelSpecDTO>(
-		() =>
-			(panel?.spec?.plugin?.spec ?? {}) as DashboardtypesTimeSeriesPanelSpecDTO,
-		[panel?.spec?.plugin?.spec],
-	);
-
-	const builderQueries = useMemo(
-		() => getBuilderQueries(panel?.spec?.queries),
-		[panel?.spec?.queries],
-	);
-
-	const { minTimeScale, maxTimeScale } = useTimeScale(data);
-	const groupByPerQuery = useGroupByPerQuery(builderQueries);
-
-	const config = useMemo(
-		() =>
-			buildTimeSeriesConfig({
-				panelId,
-				spec,
-				builderQueries,
-				apiResponse: data,
-				isDarkMode,
-				timezone,
-				panelMode,
-				minTimeScale,
-				maxTimeScale,
-				onDragSelect,
-			}),
-		[
-			panelId,
-			spec,
-			builderQueries,
-			data,
-			isDarkMode,
-			timezone,
-			panelMode,
-			minTimeScale,
-			maxTimeScale,
-			onDragSelect,
-			// `config` gets mutated by TooltipPlugin (config.setCursor for cursor sync).
-			// Rebuild it on syncMode changes so the new chart instance starts from a
-			// clean config — otherwise switching to "No Sync" would inherit stale sync
-			// settings from the previous mode.
-			dashboardPreference?.syncMode,
-		],
-	);
-
-	const chartData = useMemo(
-		() => (data?.payload ? prepareChartData(data.payload) : []),
-		[data?.payload],
-	);
-
-	const decimalPrecision = useMemo(
-		() => resolveDecimalPrecision(spec.formatting?.decimalPrecision),
-		[spec.formatting?.decimalPrecision],
-	);
-
-	const legendPosition = useMemo(() => {
-		return resolveLegendPosition(spec.legend?.position);
-	}, [spec.legend?.position]);
-
-	const renderTooltipFooter = useCallback(
-		({ isPinned, dismiss }: IRenderTooltipFooterArgs) => (
-			<TooltipFooter id={panelId} isPinned={isPinned} dismiss={dismiss} />
-		),
-		[panelId],
-	);
-
-	/**
-	 * The uPlot key prop is the only way to force a full teardown and re-mount
-	 * of the chart. By including the syncMode and syncFilterMode in the key,
-	 * we ensure that changes to these preferences trigger a fresh chart instance,
-	 * preventing stale sync settings from being inherited.
-	 */
-	const key = `${dashboardPreference?.syncMode}-${dashboardPreference?.syncFilterMode}`;
-
-	const handleChartClick = useCallback(
-		(args: ChartClickData) => {
-			onClick?.(args);
-		},
-		[onClick],
-	);
-
-	return (
-		<div
-			ref={graphRef}
-			data-testid="time-series-renderer"
-			className={PanelStyles.panelContainer}
-		>
-			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-				<TimeSeries
-					key={key}
-					config={config}
-					data={chartData}
-					legendConfig={{ position: legendPosition }}
-					groupByPerQuery={groupByPerQuery}
-					canPinTooltip
-					timezone={timezone}
-					yAxisUnit={spec.formatting?.unit}
-					decimalPrecision={decimalPrecision}
-					width={containerDimensions.width}
-					height={containerDimensions.height}
-					syncMode={dashboardPreference?.syncMode}
-					syncFilterMode={dashboardPreference?.syncFilterMode}
-					renderTooltipFooter={renderTooltipFooter}
-					onClick={handleChartClick}
-				/>
-			)}
-		</div>
-	);
-}
-
-export default TimeSeriesPanelRenderer;

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/buildConfig.ts

@@ -1,163 +0,0 @@
-import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import { buildBaseConfig } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder';
-import {
-	FILL_MODE_MAP,
-	LINE_INTERPOLATION_MAP,
-	LINE_STYLE_MAP,
-	resolveSpanGaps,
-} from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearanceMappings';
-import { resolveSeriesLabel } from 'pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel';
-import getLabelName from 'lib/getLabelName';
-import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DrawStyle,
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { hasSingleVisiblePoint } from 'lib/uPlotV2/utils/dataUtils';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-const DEFAULT_POINT_SIZE = 5;
-
-export interface BuildTimeSeriesConfigArgs {
-	panelId: string;
-	spec: DashboardtypesTimeSeriesPanelSpecDTO;
-	/**
-	 * Flat list of builder queries on this panel (see `getBuilderQueries`).
-	 * Powers per-query legend resolution; empty for non-builder panels.
-	 */
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-	minTimeScale?: number;
-	maxTimeScale?: number;
-}
-
-/**
- * Builds a fully-wired `UPlotConfigBuilder` for a TimeSeries panel.
- *
- * Delegates the panel-agnostic scaffolding (scales, thresholds, axes,
- * drag-to-zoom, click plugin) to the shared `buildBaseConfig`, then layers
- * in the TimeSeries-specific concern: one series per result, with visuals
- * resolved from `spec.chartAppearance`.
- */
-export function buildTimeSeriesConfig({
-	panelId,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-	timezone,
-	panelMode,
-	onDragSelect,
-	onClick,
-	minTimeScale,
-	maxTimeScale,
-}: BuildTimeSeriesConfigArgs): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		panelId,
-		panelType: PANEL_TYPES.TIME_SERIES,
-		isDarkMode,
-		timezone,
-		panelMode,
-		isLogScale: spec.axes?.isLogScale,
-		softMin: spec.axes?.softMin ?? undefined,
-		softMax: spec.axes?.softMax ?? undefined,
-		formatting: spec.formatting,
-		thresholds: spec.thresholds,
-		apiResponse,
-		minTimeScale,
-		maxTimeScale,
-		onDragSelect,
-		onClick,
-	});
-
-	addSeriesFromResponse({
-		builder,
-		spec,
-		builderQueries,
-		apiResponse,
-		isDarkMode,
-	});
-
-	return builder;
-}
-
-interface AddSeriesArgs {
-	builder: UPlotConfigBuilder;
-	spec: DashboardtypesTimeSeriesPanelSpecDTO;
-	builderQueries: BuilderQuery[];
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-	isDarkMode: boolean;
-}
-
-/**
- * Adds one uPlot series per result row to the scaffolded builder. The visual
- * resolution (line style, interpolation, fill mode, span gaps) reads from
- * `spec.chartAppearance`; the label is resolved via the legend matrix in
- * `resolveSeriesLabel`. Mutates the builder in place.
- */
-function addSeriesFromResponse({
-	builder,
-	spec,
-	builderQueries,
-	apiResponse,
-	isDarkMode,
-}: AddSeriesArgs): void {
-	if (!apiResponse?.payload?.data?.result) {
-		return;
-	}
-
-	const chartAppearance = spec.chartAppearance;
-	// `customColors` is nullable on the spec; coerce so `addSeries` always gets
-	// a defined record (it dereferences keys without a guard).
-	const colorMapping = spec.legend?.customColors ?? {};
-	const spanGaps = resolveSpanGaps(chartAppearance?.spanGaps?.fillLessThan);
-
-	const lineStyle = chartAppearance?.lineStyle
-		? LINE_STYLE_MAP[chartAppearance.lineStyle]
-		: LineStyle.Solid;
-	const lineInterpolation = chartAppearance?.lineInterpolation
-		? LINE_INTERPOLATION_MAP[chartAppearance.lineInterpolation]
-		: LineInterpolation.Spline;
-	const fillMode = chartAppearance?.fillMode
-		? FILL_MODE_MAP[chartAppearance.fillMode]
-		: FillMode.None;
-
-	apiResponse.payload.data.result.forEach((series) => {
-		const hasSingleValidPoint = hasSingleVisiblePoint(series.values);
-		const baseLabel = getLabelName(
-			series.metric,
-			series.queryName || '',
-			series.legend || '',
-		);
-		const label = resolveSeriesLabel(series, builderQueries, baseLabel);
-
-		builder.addSeries({
-			scaleKey: 'y',
-			// A single visible point can't be drawn as a line — degrade to points
-			// so the user still sees the datum (matches V1 behavior).
-			drawStyle: hasSingleValidPoint ? DrawStyle.Points : DrawStyle.Line,
-			label,
-			colorMapping,
-			spanGaps,
-			lineStyle,
-			lineInterpolation,
-			showPoints: chartAppearance?.showPoints || hasSingleValidPoint,
-			pointSize: DEFAULT_POINT_SIZE,
-			fillMode,
-			isDarkMode,
-			metric: series.metric,
-		});
-	});
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/definition.ts

@@ -1,13 +0,0 @@
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { PanelDefinition } from '../../types/panelDefinition';
-import Renderer from './Renderer';
-import { sections } from './sections';
-
-export const definition: PanelDefinition<'signoz/TimeSeriesPanel'> = {
-	kind: 'signoz/TimeSeriesPanel',
-	displayName: 'Time Series',
-	Renderer,
-	sections,
-	supportedSignals: [DataSource.METRICS, DataSource.LOGS, DataSource.TRACES],
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/kinds/TimeSeriesPanel/sections.ts

@@ -1,15 +0,0 @@
-import type { SectionConfig } from '../../types/sections';
-
-export const sections: SectionConfig[] = [
-	{
-		kind: 'formatting',
-		controls: {
-			unit: true,
-			decimals: true,
-		},
-	},
-	{ kind: 'axes', controls: { minMax: true, unit: true, logScale: true } },
-	{ kind: 'legend', controls: { position: true, mode: true } },
-	{ kind: 'thresholds', controls: { list: true } },
-	{ kind: 'chartAppearance', controls: { lineStyle: true, fillOpacity: true } },
-];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/panel.module.scss

@@ -1,9 +0,0 @@
-.panelContainer {
-	flex: 1;
-	min-width: 0;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	position: relative;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/interactions.ts

@@ -1,59 +0,0 @@
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-
-/**
- * Source-tagged click events. The three uPlot panels share `ChartClickEvent`;
- * each non-chart kind carries the context its drill-down needs. The `source`
- * tag lets a kind-agnostic consumer (the render boundary, a shared drill-down
- * handler) discriminate without assuming a chart shape.
- */
-export type ChartClickEvent = ChartClickData;
-export type TableClickEvent = {
-	rowData: Record<string, unknown>;
-	columnId?: string;
-};
-export type ListClickEvent = {
-	rowData: Record<string, unknown>;
-};
-export type PieClickEvent = { label: string; value: number };
-
-/** Union of every panel click event — switched on by `source` at the boundary. */
-export type PanelClickEvent =
-	| ChartClickEvent
-	| TableClickEvent
-	| ListClickEvent
-	| PieClickEvent;
-
-type DragSelect = (start: number, end: number) => void;
-
-/**
- * Per-kind interaction props. Each panel kind exposes ONLY the gestures it
- * supports: chart panels get a chart-shaped `onClick`, time-axis charts add
- * `onDragSelect`, histograms have no drag-to-zoom, a NumberPanel has no
- * interactions at all. Keys mirror `PanelKind`; `PanelRendererProps<K>` in
- * rendererProps.ts indexes this map, so a missing kind is a compile error there.
- */
-export interface PanelInteractionMap {
-	'signoz/TimeSeriesPanel': {
-		onClick?: (event: ChartClickEvent) => void;
-		onDragSelect?: DragSelect;
-	};
-	'signoz/BarChartPanel': {
-		onClick?: (event: ChartClickEvent) => void;
-		onDragSelect?: DragSelect;
-	};
-	'signoz/HistogramPanel': { onClick?: (event: ChartClickEvent) => void };
-	'signoz/TablePanel': { onClick?: (event: TableClickEvent) => void };
-	'signoz/ListPanel': { onClick?: (event: ListClickEvent) => void };
-	'signoz/PieChartPanel': { onClick?: (event: PieClickEvent) => void };
-	'signoz/NumberPanel': Record<string, never>;
-}
-
-/**
- * Widest interaction surface — used where the panel kind is not known
- * statically (the registry render boundary; see `getPanelDefinition`). It is
- * the structural supertype the per-kind shapes are cast to exactly once.
- */
-export interface AnyPanelInteractionProps {
-	onClick?: (event: PanelClickEvent) => void;
-	onDragSelect?: DragSelect;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition.ts

@@ -1,31 +0,0 @@
-import type { ComponentType } from 'react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import type { SectionConfig } from './sections';
-import type { AnyPanelInteractionProps } from './interactions';
-import type { PanelKind } from './panelKind';
-import type { BaseRendererProps, PanelRendererProps } from './rendererProps';
-
-export interface PanelDefinition<K extends PanelKind = PanelKind> {
-	kind: K;
-	displayName: string;
-	Renderer: ComponentType<PanelRendererProps<K>>;
-	sections: SectionConfig[];
-	supportedSignals: DataSource[];
-}
-
-// Keyed registry that preserves the kind ↔ definition correlation: indexing
-// with a literal kind yields that kind's exactly-typed PanelDefinition.
-export type PanelRegistry = { [K in PanelKind]?: PanelDefinition<K> };
-
-// A PanelDefinition whose Renderer is widened to the kind-agnostic prop surface.
-// At the render boundary the concrete kind isn't known statically (a registry
-// lookup returns a union over kinds), so getPanelDefinition resolves to this —
-// concentrating the single unavoidable cast in one place instead of leaking it
-// to every call site.
-export interface RenderablePanelDefinition extends Omit<
-	PanelDefinition,
-	'Renderer'
-> {
-	Renderer: ComponentType<BaseRendererProps & AnyPanelInteractionProps>;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/panelKind.ts

@@ -1,20 +0,0 @@
-import { PANEL_TYPES } from 'constants/queryBuilder';
-
-export type PanelKind =
-	| 'signoz/TimeSeriesPanel'
-	| 'signoz/BarChartPanel'
-	| 'signoz/NumberPanel'
-	| 'signoz/PieChartPanel'
-	| 'signoz/TablePanel'
-	| 'signoz/HistogramPanel'
-	| 'signoz/ListPanel';
-
-export const PANEL_KIND_TO_PANEL_TYPE: Record<PanelKind, PANEL_TYPES> = {
-	'signoz/TimeSeriesPanel': PANEL_TYPES.TIME_SERIES,
-	'signoz/BarChartPanel': PANEL_TYPES.BAR,
-	'signoz/NumberPanel': PANEL_TYPES.VALUE,
-	'signoz/PieChartPanel': PANEL_TYPES.PIE,
-	'signoz/TablePanel': PANEL_TYPES.TABLE,
-	'signoz/HistogramPanel': PANEL_TYPES.HISTOGRAM,
-	'signoz/ListPanel': PANEL_TYPES.LIST,
-};

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps.ts

@@ -1,74 +0,0 @@
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import type {
-	DashboardCursorSync,
-	SyncTooltipFilterMode,
-} from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import type { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-
-import type { PanelInteractionMap } from './interactions';
-import type { PanelKind } from './panelKind';
-
-/**
- * Dashboard-wide rendering preferences propagated down to every panel renderer
- * on the same dashboard. Lets the shell push cross-panel concerns (cursor
- * sync, tooltip filter mode, dashboard id for scoped state) without each
- * renderer rediscovering them via hooks. All fields are optional — non-
- * dashboard render contexts (PanelEditor preview, standalone view) can pass
- * an empty object and the renderer will fall back to sensible defaults.
- */
-export interface DashboardPreference {
-	/**
-	 * Cursor-sync mode for the dashboard. Drives the uPlot tooltip plugin so
-	 * hovering one panel highlights the corresponding x on every other panel.
-	 */
-	syncMode?: DashboardCursorSync;
-	/**
-	 * Filter applied to the synced tooltip across panels (e.g. only show series
-	 * whose label matches the hovered series).
-	 */
-	syncFilterMode?: SyncTooltipFilterMode;
-	/**
-	 * Dashboard id — useful for renderers that scope per-dashboard state
-	 * (e.g. pinned-tooltip persistence, drill-down history).
-	 */
-	dashboardId?: string;
-}
-
-// Kind-agnostic props every renderer receives, regardless of panel kind. The
-// kind-specific interaction props (onClick payload, onDragSelect) are layered
-// on per-kind by PanelRendererProps<K>.
-export interface BaseRendererProps {
-	panelId: string;
-	/**
-	 * The whole perses panel — renderers derive their concrete `spec` and the
-	 * perses-shaped `queries` from this. Passing the full panel keeps the prop
-	 * surface stable as new panel-level fields are added to the wire format.
-	 */
-	panel: DashboardtypesPanelDTO | undefined;
-	data: MetricQueryRangeSuccessResponse | undefined;
-	isLoading: boolean;
-	error: Error | null;
-	/** Gate for the drill-down right-click menu. Off by default in V2. */
-	enableDrillDown?: boolean;
-	/**
-	 * Render context — varies behavior (e.g. dashboard widget vs. standalone
-	 * full-screen vs. inside the editor). See PanelMode for the contract.
-	 */
-	panelMode: PanelMode;
-	/**
-	 * Dashboard-level preferences that should propagate to every panel
-	 * (cursor sync, tooltip filter mode, dashboard id). The shell owns
-	 * resolving these; the renderer just consumes them.
-	 */
-	dashboardPreference?: DashboardPreference;
-}
-
-// Renderer props for a specific panel kind: the shared base plus that kind's
-// interaction surface (PanelInteractionMap[K]). Each renderer annotates with
-// its own kind — e.g. PanelRendererProps<'signoz/TimeSeriesPanel'> — so it can
-// only reference the gestures that kind supports. Indexing PanelInteractionMap
-// here forces the map to cover every PanelKind. The default K = PanelKind
-// yields the widest surface (a union over all kinds).
-export type PanelRendererProps<K extends PanelKind = PanelKind> =
-	BaseRendererProps & PanelInteractionMap[K];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/types/sections.ts

@@ -1,55 +0,0 @@
-import {
-	BarChart,
-	Columns3,
-	Hash,
-	ListEnd,
-	Palette,
-	Ruler,
-	SlidersHorizontal,
-} from '@signozhq/icons';
-
-// Derived from an actual icon component so the type stays exact (size is a
-// constrained IconSize union, not arbitrary strings) and ForwardRef-compatible.
-export type SectionIcon = typeof Hash;
-
-export interface SectionMetadata {
-	title: string;
-	icon: SectionIcon;
-	description?: string;
-}
-
-// Per-kind control toggles (type-only — runtime metadata is in SECTIONS).
-// Section components type their controls prop via `SectionControls['axes']`.
-export type SectionControls = {
-	formatting: { unit?: boolean; decimals?: boolean };
-	axes: { minMax?: boolean; unit?: boolean; logScale?: boolean };
-	legend: { position?: boolean; mode?: boolean };
-	thresholds: { list?: boolean };
-	chartAppearance: {
-		lineStyle?: boolean;
-		fillOpacity?: boolean;
-		stacked?: boolean;
-	};
-	columnUnits: { perColumnUnit?: boolean };
-	buckets: { count?: boolean; min?: boolean; max?: boolean };
-};
-
-// Source of truth for sections. Its keys define SectionKind; its values are the
-// runtime UI metadata (consumed by PanelEditor in 1.8). Adding a new section =
-// one entry here + one entry in SectionControls.
-export const SECTIONS = {
-	formatting: { title: 'Formatting', icon: Hash },
-	axes: { title: 'Axes', icon: Ruler },
-	legend: { title: 'Legend', icon: ListEnd },
-	thresholds: { title: 'Thresholds', icon: SlidersHorizontal },
-	chartAppearance: { title: 'Chart appearance', icon: Palette },
-	columnUnits: { title: 'Column units', icon: Columns3 },
-	buckets: { title: 'Buckets', icon: BarChart },
-} as const satisfies Record<string, SectionMetadata>;
-
-export type SectionKind = keyof typeof SECTIONS;
-
-// Discriminated union derived from SectionControls — kept in lockstep automatically.
-export type SectionConfig = {
-	[K in SectionKind]: { kind: K; controls: SectionControls[K] };
-}[SectionKind];

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/baseConfigBuilder.ts

@@ -1,208 +0,0 @@
-import type {
-	DashboardtypesPanelFormattingDTO,
-	DashboardtypesThresholdWithLabelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import onClickPlugin, {
-	OnClickPluginOpts,
-} from 'lib/uPlotLib/plugins/onClickPlugin';
-import {
-	DistributionType,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
-import { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-/**
- * Inputs for the shared V2 chart pipeline. Mirrors the V1 helper of the same
- * name but accepts perses-shaped inputs directly (so callers don't translate
- * once per panel). The series-rendering step is panel-specific and lives in
- * each panel's `utils.ts` — this helper only wires the scaffolding (scales,
- * thresholds, axes, drag-to-zoom, click plugin).
- */
-export interface BuildBaseConfigArgs {
-	panelId: string;
-	panelType: PANEL_TYPES;
-	isDarkMode: boolean;
-	timezone: Timezone;
-	panelMode: PanelMode;
-
-	/** From `spec.axes` — drives the Y scale and (when log) both scales' base. */
-	isLogScale?: boolean;
-	softMin?: number;
-	softMax?: number;
-
-	/** From `spec.formatting.unit` — drives Y axis tick formatting + threshold formatting. */
-	formatting?: DashboardtypesPanelFormattingDTO;
-
-	/** From `spec.thresholds` — perses shape, mapped to the draw-hook shape internally. */
-	thresholds?: DashboardtypesThresholdWithLabelDTO[] | null;
-
-	/** Query-range response — used by the click plugin to map pixel → data. */
-	apiResponse: MetricQueryRangeSuccessResponse | undefined;
-
-	/** Time-range clamps for the X scale (typically from `getTimeRange(apiResponse)`). */
-	minTimeScale?: number;
-	maxTimeScale?: number;
-
-	/** Optional — histogram and other non-time panels omit drag-to-zoom. */
-	onDragSelect?: (start: number, end: number) => void;
-	onClick?: OnClickPluginOpts['onClick'];
-}
-
-/**
- * Builds the panel-agnostic scaffolding of a uPlot chart: scales, thresholds,
- * axes, drag-to-zoom, click plugin. Callers (TimeSeriesPanel, BarPanel, …)
- * then call `addSeries`/`addPlugin` on the returned builder for their own
- * panel-specific rendering.
- */
-export function buildBaseConfig({
-	panelId,
-	panelType,
-	isDarkMode,
-	timezone,
-	panelMode,
-	isLogScale,
-	softMin,
-	softMax,
-	formatting,
-	thresholds,
-	apiResponse,
-	minTimeScale,
-	maxTimeScale,
-	onDragSelect,
-	onClick,
-}: BuildBaseConfigArgs): UPlotConfigBuilder {
-	const yAxisUnit = formatting?.unit;
-
-	const builder = new UPlotConfigBuilder({
-		id: panelId,
-		onDragSelect,
-		tzDate: makeTzDate(timezone),
-		shouldSaveSelectionPreference: panelMode === PanelMode.DASHBOARD_VIEW,
-		selectionPreferencesSource: resolveSelectionPreferencesSource(panelMode),
-		stepInterval: resolveStepInterval(apiResponse),
-	});
-
-	const thresholdOptions: ThresholdsDrawHookOptions = {
-		scaleKey: 'y',
-		thresholds: mapThresholds(thresholds),
-		yAxisUnit,
-	};
-
-	builder.addThresholds(thresholdOptions);
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: true,
-		min: minTimeScale,
-		max: maxTimeScale,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		min: undefined,
-		max: undefined,
-		softMin,
-		softMax,
-		thresholds: thresholdOptions,
-		logBase: isLogScale ? 10 : undefined,
-		distribution: isLogScale
-			? DistributionType.Logarithmic
-			: DistributionType.Linear,
-	});
-
-	if (typeof onClick === 'function') {
-		builder.addPlugin(
-			onClickPlugin({ onClick, apiResponse: apiResponse?.payload }),
-		);
-	}
-
-	builder.addAxis({
-		scaleKey: 'x',
-		show: true,
-		side: 2,
-		isDarkMode,
-		isLogScale,
-		panelType,
-	});
-
-	builder.addAxis({
-		scaleKey: 'y',
-		show: true,
-		side: 3,
-		isDarkMode,
-		isLogScale,
-		yAxisUnit,
-		panelType,
-	});
-
-	return builder;
-}
-
-function makeTzDate(
-	timezone: Timezone,
-): ((timestamp: number) => Date) | undefined {
-	if (!timezone) {
-		return undefined;
-	}
-	return (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
-}
-
-function resolveSelectionPreferencesSource(
-	panelMode: PanelMode,
-): SelectionPreferencesSource {
-	return panelMode === PanelMode.DASHBOARD_VIEW ||
-		panelMode === PanelMode.STANDALONE_VIEW
-		? SelectionPreferencesSource.LOCAL_STORAGE
-		: SelectionPreferencesSource.IN_MEMORY;
-}
-
-// Perses-shape thresholds → the draw-hook shape uPlotV2 consumes. Exported so
-// panels that need to feed the same threshold list elsewhere (e.g. to a series
-// `addSeries` thresholds hook) don't have to redo the mapping.
-export function mapThresholds(
-	thresholds: DashboardtypesThresholdWithLabelDTO[] | null | undefined,
-): ThresholdsDrawHookOptions['thresholds'] {
-	if (!thresholds || thresholds.length === 0) {
-		return [];
-	}
-	return thresholds.map((t) => ({
-		thresholdValue: t.value,
-		thresholdColor: t.color,
-		thresholdUnit: t.unit,
-		thresholdLabel: t.label,
-	}));
-}
-
-/**
- * V5 backend reports per-query step intervals; we feed the smallest one through
- * to uPlot so the X-axis tick density matches the densest query. An empty map
- * yields `Infinity` from `Math.min`, which would corrupt downstream scale math —
- * fall back to `undefined` (uPlot's "auto") in that case.
- */
-export function resolveStepInterval(
-	apiResponse: MetricQueryRangeSuccessResponse | undefined,
-): number | undefined {
-	const stepIntervals =
-		apiResponse?.payload?.data?.newResult?.meta?.stepIntervals;
-	if (!stepIntervals) {
-		return undefined;
-	}
-	const values = Object.values(stepIntervals);
-	if (values.length === 0) {
-		return undefined;
-	}
-	const min = Math.min(...values);
-	return Number.isFinite(min) ? min : undefined;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/chartAppearanceMappings.ts

@@ -1,108 +0,0 @@
-import {
-	DashboardtypesFillModeDTO,
-	DashboardtypesLegendPositionDTO,
-	DashboardtypesLineInterpolationDTO,
-	DashboardtypesLineStyleDTO,
-	DashboardtypesPrecisionOptionDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-
-/**
- * Bridges the V2 dashboard wire-format enums (snake_case, generated from Go)
- * to the uPlotV2 chart enums (PascalCase). String values diverge between the
- * two — don't coerce, map.
- *
- * Kept as a single source of truth so every panel that reads chart-appearance
- * fields stays in sync as either side's enum evolves.
- */
-
-export const LINE_STYLE_MAP: Record<DashboardtypesLineStyleDTO, LineStyle> = {
-	[DashboardtypesLineStyleDTO.solid]: LineStyle.Solid,
-	[DashboardtypesLineStyleDTO.dashed]: LineStyle.Dashed,
-};
-
-export const LINE_INTERPOLATION_MAP: Record<
-	DashboardtypesLineInterpolationDTO,
-	LineInterpolation
-> = {
-	[DashboardtypesLineInterpolationDTO.linear]: LineInterpolation.Linear,
-	[DashboardtypesLineInterpolationDTO.spline]: LineInterpolation.Spline,
-	[DashboardtypesLineInterpolationDTO.step_after]: LineInterpolation.StepAfter,
-	[DashboardtypesLineInterpolationDTO.step_before]: LineInterpolation.StepBefore,
-};
-
-export const FILL_MODE_MAP: Record<DashboardtypesFillModeDTO, FillMode> = {
-	[DashboardtypesFillModeDTO.solid]: FillMode.Solid,
-	[DashboardtypesFillModeDTO.gradient]: FillMode.Gradient,
-	[DashboardtypesFillModeDTO.none]: FillMode.None,
-};
-
-export const LEGEND_POSITION_MAP: Record<
-	DashboardtypesLegendPositionDTO,
-	LegendPosition
-> = {
-	[DashboardtypesLegendPositionDTO.bottom]: LegendPosition.BOTTOM,
-	[DashboardtypesLegendPositionDTO.right]: LegendPosition.RIGHT,
-};
-
-/**
- * `spec.formatting.decimalPrecision` is a stringified-digit enum on the wire
- * (`'0'`–`'4'` plus the sentinel `'full'`). The chart consumes a numeric
- * `PrecisionOption` (`0`–`4`) or the same `'full'` sentinel from its own
- * enum. Missing / unknown → `undefined` (chart uses its default).
- */
-export function resolveDecimalPrecision(
-	precision: DashboardtypesPrecisionOptionDTO | undefined,
-): PrecisionOption | undefined {
-	if (!precision) {
-		return undefined;
-	}
-	if (precision === DashboardtypesPrecisionOptionDTO.full) {
-		return PrecisionOptionsEnum.FULL;
-	}
-	const parsed = Number(precision);
-	if (
-		parsed === 0 ||
-		parsed === 1 ||
-		parsed === 2 ||
-		parsed === 3 ||
-		parsed === 4
-	) {
-		return parsed;
-	}
-	return undefined;
-}
-
-/**
- * `spec.chartAppearance.spanGaps.fillLessThan` is a stringified number on the
- * wire. Empty / missing → span all gaps (the chart default). Numeric → forward
- * the threshold so uPlot only bridges short runs of nulls.
- */
-export function resolveSpanGaps(
-	fillLessThan: string | undefined,
-): boolean | number {
-	if (!fillLessThan) {
-		return true;
-	}
-	const parsed = Number(fillLessThan);
-	return Number.isFinite(parsed) ? parsed : true;
-}
-
-/**
- * Resolves the legend position for a panel. Missing / unknown values fall
- * back to `BOTTOM` to match the chart's default and the V1 behavior.
- */
-export function resolveLegendPosition(
-	position: DashboardtypesLegendPositionDTO | undefined,
-): LegendPosition {
-	if (position && position in LEGEND_POSITION_MAP) {
-		return LEGEND_POSITION_MAP[position];
-	}
-	return LegendPosition.BOTTOM;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/getBuilderQueries.ts

@@ -1,38 +0,0 @@
-import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-
-/**
- * Flattens a panel's queries into the list of builder queries it contains —
- * unwrapping `CompositeQuery` envelopes along the way. Non-builder kinds
- * (PromQL, ClickHouseSQL, Formula, TraceOperator) are dropped: they don't
- * carry the legend / groupBy / aggregation context downstream code needs.
- *
- * Returns the generated v5 `BuilderQuery` shape directly — no intermediate
- * summary type — so callers consume the same type the wire format defines.
- */
-export function getBuilderQueries(
-	queries: DashboardtypesQueryDTO[] | undefined,
-): BuilderQuery[] {
-	if (!queries) {
-		return [];
-	}
-	const flattened: BuilderQuery[] = [];
-	queries.forEach((envelope) => {
-		const plugin = envelope?.spec?.plugin;
-		if (!plugin) {
-			return;
-		}
-		if (plugin.kind === 'signoz/BuilderQuery') {
-			flattened.push(plugin.spec as BuilderQuery);
-			return;
-		}
-		if (plugin.kind === 'signoz/CompositeQuery') {
-			(plugin.spec.queries ?? []).forEach((sub) => {
-				if (sub.type === 'builder_query') {
-					flattened.push(sub.spec as BuilderQuery);
-				}
-			});
-		}
-	});
-	return flattened;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/Panels/utils/resolveSeriesLabel.ts

@@ -1,112 +0,0 @@
-import type { BuilderQuery } from 'types/api/v5/queryRange';
-import type { QueryData } from 'types/api/widgets/getQuery';
-
-/**
- * Resolves the display label for one series, applying the V1 legend matrix:
- * `single-vs-many builder queries × with/without groupBy × single-vs-many
- * aggregations`. Returns `baseLabel` unchanged for panels without builder
- * queries (PromQL, ClickHouseSQL) and for builder series whose aggregation
- * carries no alias/expression — metric aggregations don't have those fields,
- * so they naturally short-circuit to the base label here.
- */
-export function resolveSeriesLabel(
-	series: QueryData,
-	builderQueries: BuilderQuery[],
-	baseLabel: string,
-): string {
-	if (builderQueries.length === 0) {
-		return baseLabel;
-	}
-
-	const matching = builderQueries.find((q) => q.name === series.queryName);
-	if (!matching) {
-		return baseLabel;
-	}
-
-	// `series.metaData.index` points to the aggregation in the matched query
-	// that produced this series. Default to 0 so single-aggregation panels
-	// still resolve when the backend omits the field.
-	const aggIndex = series.metaData?.index ?? 0;
-	const aggregations = matching.aggregations ?? [];
-	const aggregation = aggregations[aggIndex];
-
-	// `alias` / `expression` exist on Log/Trace aggregations only —
-	// `MetricAggregation` carries `metricName`/`temporality`/… instead. The
-	// `in` guards narrow the union without a cast.
-	const aggregationAlias =
-		aggregation && 'alias' in aggregation ? (aggregation.alias ?? '') : '';
-	const aggregationExpression =
-		aggregation && 'expression' in aggregation
-			? (aggregation.expression ?? '')
-			: '';
-
-	if (!aggregationAlias && !aggregationExpression) {
-		return baseLabel || series.metaData?.queryName || matching.name || '';
-	}
-
-	const ctx: FormatContext = {
-		aggregationAlias,
-		aggregationExpression,
-		baseLabel,
-		legend: matching.legend ?? '',
-		hasGroupBy: (matching.groupBy?.length ?? 0) > 0,
-		singleAggregation: aggregations.length === 1,
-	};
-
-	return builderQueries.length === 1
-		? formatForSinglePanelQuery(ctx)
-		: formatForMultiplePanelQueries(ctx);
-}
-
-interface FormatContext {
-	aggregationAlias: string;
-	aggregationExpression: string;
-	baseLabel: string;
-	legend: string;
-	hasGroupBy: boolean;
-	singleAggregation: boolean;
-}
-
-// Panel has one builder query — ports V1's `getLegendForSingleAggregation`.
-function formatForSinglePanelQuery({
-	aggregationAlias,
-	aggregationExpression,
-	baseLabel,
-	legend,
-	hasGroupBy,
-	singleAggregation,
-}: FormatContext): string {
-	if (hasGroupBy) {
-		if (singleAggregation) {
-			return baseLabel;
-		}
-		return `${aggregationAlias || aggregationExpression}-${baseLabel}`;
-	}
-	if (singleAggregation) {
-		return aggregationAlias || legend || aggregationExpression;
-	}
-	return aggregationAlias || aggregationExpression;
-}
-
-// Panel has multiple builder queries — ports V1's `getLegendForMultipleAggregations`.
-// Differs from the single-query path in two cells: the no-groupBy / single-agg
-// cell falls through to `baseLabel` instead of `legend`, and the no-groupBy /
-// multi-agg cell prepends the base label.
-function formatForMultiplePanelQueries({
-	aggregationAlias,
-	aggregationExpression,
-	baseLabel,
-	hasGroupBy,
-	singleAggregation,
-}: FormatContext): string {
-	if (hasGroupBy) {
-		if (singleAggregation) {
-			return baseLabel;
-		}
-		return `${aggregationAlias || aggregationExpression}-${baseLabel}`;
-	}
-	if (singleAggregation) {
-		return aggregationAlias || baseLabel || aggregationExpression;
-	}
-	return `${aggregationAlias || aggregationExpression}-${baseLabel}`;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.module.scss

@@ -3,8 +3,8 @@
 	flex-direction: column;
 	height: 100%;
 	width: 100%;
-	background: var(--l2-background);
-	border: 1px solid var(--l2-border);
+	background: var(--bg-ink-400, #0b0c0e);
+	border: 1px solid var(--l1-border);
 	border-radius: 4px;
 	overflow: hidden;
 }
@@ -14,7 +14,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 8px 12px;
-	border-bottom: 1px solid var(--l2-border);
+	border-bottom: 1px solid var(--l1-border);
 	cursor: grab;
 }
 
@@ -36,15 +36,6 @@
 	margin-inline-end: 0;
 }
 
-// Actions sit inside the drag-handle row but opt out of dragging
-// (`panel-no-drag`); reset the grab cursor so the menu reads as clickable.
-.actions {
-	display: flex;
-	align-items: center;
-	gap: 4px;
-	cursor: default;
-}
-
 .body {
 	flex: 1;
 	display: flex;
@@ -59,41 +50,3 @@
 .bodyKind {
 	margin-bottom: 6px;
 }
-
-// Container for the rendered chart — fills the panel below the header and lets
-// the chart shrink (min-* 0) so it resizes with the grid cell.
-.chartBody {
-	flex: 1;
-	display: flex;
-	min-height: 0;
-	min-width: 0;
-}
-
-// Subtle background-refetch spinner in the header (chart stays mounted).
-.refetchIndicator {
-	color: var(--l2-foreground);
-	flex-shrink: 0;
-}
-
-// Error state — shown only when there's no stale data to fall back to.
-.error {
-	flex: 1;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 8px;
-	padding: 12px;
-	text-align: center;
-}
-
-.errorIcon {
-	color: var(--bg-cherry-500);
-}
-
-.errorMessage {
-	color: var(--l2-foreground);
-	font-size: 12px;
-	max-width: 90%;
-	overflow-wrap: anywhere;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -1,15 +1,15 @@
 import { useMemo } from 'react';
+import { Badge } from '@signozhq/ui/badge';
 import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Typography } from '@signozhq/ui/typography';
+import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { getPanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels';
-import { usePanelQuery } from 'pages/DashboardPageV2/DashboardContainer/hooks/usePanelQuery';
+import cx from 'classnames';
 
 import type { DashboardSection } from '../../utils';
 import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import { usePanelInteractions } from './hooks/usePanelInteractions';
 import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import PanelBody from './PanelBody';
-import PanelHeader from './PanelHeader';
+import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
 /** Panel action context — present together only in editable sectioned mode. */
@@ -23,18 +23,16 @@ export interface PanelActionsConfig {
 interface PanelProps {
 	panel: DashboardtypesPanelDTO | undefined;
 	panelId: string;
-	/** True once this panel's section enters the viewport — gates the fetch. */
+	/**
+	 * Placeholder: true once this panel's section enters the viewport. The panel
+	 * query-loading implementation (later PR) will consume this to lazily fetch
+	 * data. Currently unused on purpose.
+	 */
 	isVisible?: boolean;
 	/** Move/delete actions — present only in editable sectioned mode. */
 	panelActions?: PanelActionsConfig;
 }
 
-/**
- * A single dashboard panel: chrome (header) + content (body). Thin orchestrator
- * — data fetching lives in `usePanelQuery`, cross-panel interactions in
- * `usePanelInteractions`, and the loading/error/chart state machine in
- * `PanelBody`.
- */
 function Panel({
 	panel,
 	panelId,
@@ -43,22 +41,9 @@ function Panel({
 }: PanelProps): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
-	const fullKind = panel?.spec?.plugin?.kind;
-	const kind = fullKind?.replace(/^signoz\//, '') ?? 'unknown';
+	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
 	const queryCount = panel?.spec?.queries?.length ?? 0;
 
-	const panelDef = getPanelDefinition(fullKind);
-
-	const { data, isLoading, isFetching, error, refetch } = usePanelQuery({
-		panel,
-		panelId,
-		// Lazy: only fetch once the section is on screen (undefined → treat as
-		// visible) and a renderer exists for the kind.
-		enabled: !!panelDef && isVisible !== false,
-	});
-
-	const { onDragSelect, dashboardPreference } = usePanelInteractions();
-
 	const headerTitle = useMemo(() => {
 		if (!description) {
 			return name;
@@ -75,27 +60,35 @@ function Panel({
 			className={styles.panel}
 			data-panel-visible={isVisible ? 'true' : 'false'}
 		>
-			<PanelHeader
-				title={headerTitle}
-				panelId={panelId}
-				isFetching={isFetching}
-				error={error}
-				warning={data?.warning}
-				panelActions={panelActions}
-			/>
-			<PanelBody
-				panelDef={panelDef}
-				panel={panel}
-				panelId={panelId}
-				kind={kind}
-				queryCount={queryCount}
-				data={data}
-				isLoading={isLoading}
-				error={error}
-				refetch={refetch}
-				onDragSelect={onDragSelect}
-				dashboardPreference={dashboardPreference}
-			/>
+			<div className={cx(styles.header, 'panel-drag-handle')}>
+				<div className={styles.headerLeft}>
+					<Typography.Text className={styles.headerTitle}>
+						{headerTitle}
+					</Typography.Text>
+					<Badge className={styles.badge}>{kind}</Badge>
+				</div>
+				{panelActions ? (
+					<PanelActionsMenu
+						panelId={panelId}
+						currentLayoutIndex={panelActions.currentLayoutIndex}
+						sections={panelActions.sections}
+						onMovePanel={panelActions.onMovePanel}
+						onDeletePanel={panelActions.onDeletePanel}
+					/>
+				) : (
+					<EllipsisVertical size={14} />
+				)}
+			</div>
+
+			<div className={styles.body}>
+				<div>
+					<div className={styles.bodyKind}>{kind} panel</div>
+					<div>
+						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · chart rendering
+						coming next
+					</div>
+				</div>
+			</div>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelBody.tsx

@@ -1,108 +0,0 @@
-import { Spin } from 'antd';
-import { Button } from '@signozhq/ui/button';
-import { Typography } from '@signozhq/ui/typography';
-import { Loader, TriangleAlert } from '@signozhq/icons';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import type { RenderablePanelDefinition } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/panelDefinition';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
-import type { MetricQueryRangeSuccessResponse } from 'types/api/metrics/getQueryRange';
-
-import styles from './Panel.module.scss';
-
-interface PanelBodyProps {
-	/** Resolved renderer for the panel kind; undefined when the kind is unknown. */
-	panelDef: RenderablePanelDefinition | undefined;
-	panel: DashboardtypesPanelDTO | undefined;
-	panelId: string;
-	kind: string;
-	queryCount: number;
-	data: MetricQueryRangeSuccessResponse | undefined;
-	isLoading: boolean;
-	error: Error | null;
-	refetch: () => void;
-	onDragSelect: (start: number, end: number) => void;
-	dashboardPreference: DashboardPreference;
-}
-
-/**
- * Renders the panel content as an explicit state machine so each state is
- * handled deliberately (no implicit fall-through):
- *
- *   unknown-kind → unsupported fallback
- *   error + no data → error message with retry
- *   first load (no data) → loading indicator
- *   otherwise → the kind's renderer (which owns its own "No Data" state, and
- *               keeps stale data mounted during background refetches)
- */
-function PanelBody({
-	panelDef,
-	panel,
-	panelId,
-	kind,
-	queryCount,
-	data,
-	isLoading,
-	error,
-	refetch,
-	onDragSelect,
-	dashboardPreference,
-}: PanelBodyProps): JSX.Element {
-	if (!panelDef) {
-		return (
-			<div className={styles.body} data-testid="panel-unknown-kind-fallback">
-				<div>
-					<div className={styles.bodyKind}>{kind} panel</div>
-					<div>
-						{queryCount} {queryCount === 1 ? 'query' : 'queries'} · not yet supported
-						in V2
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	// Surface a hard failure only when there's no (stale) data to show; otherwise
-	// keep the last-good chart and let the header indicate the refresh.
-	if (error && !data) {
-		return (
-			<div className={styles.error} data-testid="panel-error">
-				<TriangleAlert size={20} className={styles.errorIcon} />
-				<Typography.Text className={styles.errorMessage}>
-					{error.message || 'Failed to load panel data'}
-				</Typography.Text>
-				<Button variant="outlined" color="secondary" onClick={refetch}>
-					Retry
-				</Button>
-			</div>
-		);
-	}
-
-	// First load only — background refetches keep `data` populated so the chart
-	// stays mounted instead of blinking.
-	if (isLoading && !data) {
-		return (
-			<div className={styles.body} data-testid="panel-loading">
-				<Spin indicator={<Loader size={14} className="animate-spin" />} />
-			</div>
-		);
-	}
-
-	return (
-		<div className={styles.chartBody}>
-			<panelDef.Renderer
-				panelId={panelId}
-				panel={panel}
-				data={data}
-				isLoading={isLoading}
-				error={error}
-				onDragSelect={onDragSelect}
-				panelMode={PanelMode.DASHBOARD_VIEW}
-				enableDrillDown={false}
-				dashboardPreference={dashboardPreference}
-			/>
-		</div>
-	);
-}
-
-export default PanelBody;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelHeader.tsx

@@ -1,81 +0,0 @@
-import { useMemo, type ReactNode } from 'react';
-import { Typography } from '@signozhq/ui/typography';
-import { Loader } from '@signozhq/icons';
-import cx from 'classnames';
-import type { Warning } from 'types/api';
-
-import type { PanelActionsConfig } from './Panel';
-import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
-import PanelStatusPopover from './PanelStatus/PanelStatusPopover';
-import {
-	panelStatusFromError,
-	panelStatusFromWarning,
-} from './PanelStatus/utils';
-import styles from './Panel.module.scss';
-
-interface PanelHeaderProps {
-	title: ReactNode;
-	panelId: string;
-	/** Background refresh in flight — shows a subtle spinner without blinking the chart. */
-	isFetching: boolean;
-	/** Latest query error, if any — surfaced as a header error indicator. */
-	error?: Error | null;
-	/** Non-fatal query warning lifted from the response payload. */
-	warning?: Warning;
-	/** Move/delete actions — present only in editable sectioned mode. */
-	panelActions?: PanelActionsConfig;
-}
-
-/** Panel chrome: drag handle, title, refetch + status indicators, actions. */
-function PanelHeader({
-	title,
-	panelId,
-	isFetching,
-	error,
-	warning,
-	panelActions,
-}: PanelHeaderProps): JSX.Element {
-	const errorDetail = useMemo(
-		() => panelStatusFromError(error ?? null),
-		[error],
-	);
-
-	const warningDetail = useMemo(
-		() => panelStatusFromWarning(warning),
-		[warning],
-	);
-
-	return (
-		<div className={cx(styles.header, 'panel-drag-handle')}>
-			<div className={styles.headerLeft}>
-				<Typography.Text className={styles.headerTitle}>{title}</Typography.Text>
-				{isFetching && (
-					<Loader
-						size={12}
-						className={cx('animate-spin', styles.refetchIndicator)}
-						data-testid="panel-refetching"
-					/>
-				)}
-			</div>
-			{/* `panel-no-drag` opts this region out of the grid drag handle so the
-			    actions menu is clickable instead of starting a panel drag. */}
-			<div className={cx('panel-no-drag', styles.actions)}>
-				{errorDetail && <PanelStatusPopover variant="error" detail={errorDetail} />}
-				{warningDetail && (
-					<PanelStatusPopover variant="warning" detail={warningDetail} />
-				)}
-				{panelActions && (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={panelActions.currentLayoutIndex}
-						sections={panelActions.sections}
-						onMovePanel={panelActions.onMovePanel}
-						onDeletePanel={panelActions.onDeletePanel}
-					/>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default PanelHeader;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/PanelStatusContent.tsx

@@ -1,51 +0,0 @@
-import { BookOpenText } from '@signozhq/icons';
-
-import type { PanelStatusDetail } from './types';
-import styles from './PanelStatusPopover.module.scss';
-
-interface PanelStatusContentProps {
-	detail: PanelStatusDetail;
-}
-
-/**
- * Popover body for a panel status (error or warning): a code + summary header
- * with an optional docs link, followed by any per-item messages. Pure
- * presentation — the variant's icon/colour is owned by `PanelStatusPopover`.
- */
-function PanelStatusContent({ detail }: PanelStatusContentProps): JSX.Element {
-	const { code, message, docsUrl, messages } = detail;
-
-	return (
-		<section className={styles.content} data-testid="panel-status-content">
-			<header className={styles.summary}>
-				<div className={styles.summaryText}>
-					<h2 className={styles.code}>{code}</h2>
-					<p className={styles.message}>{message}</p>
-				</div>
-				{docsUrl && (
-					<a
-						className={styles.docsLink}
-						href={docsUrl}
-						target="_blank"
-						rel="noreferrer"
-						data-testid="panel-status-docs"
-					>
-						<BookOpenText size={14} />
-						Open Docs
-					</a>
-				)}
-			</header>
-			{messages.length > 0 && (
-				<ul className={styles.messageList}>
-					{messages.map((m) => (
-						<li key={m} className={styles.messageItem}>
-							{m}
-						</li>
-					))}
-				</ul>
-			)}
-		</section>
-	);
-}
-
-export default PanelStatusContent;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/PanelStatusPopover.module.scss

@@ -1,64 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	cursor: pointer;
-	flex-shrink: 0;
-}
-
-.content {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 600px;
-	padding: 12px;
-}
-
-.summary {
-	display: flex;
-	align-items: flex-start;
-	justify-content: space-between;
-	gap: 12px;
-}
-
-.summaryText {
-	min-width: 0;
-}
-
-.code {
-	margin: 0;
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--l2-foreground);
-}
-
-.message {
-	margin: 4px 0 0;
-	font-size: 12px;
-	color: var(--l1-foreground);
-	word-break: break-word;
-}
-
-.docsLink {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	flex-shrink: 0;
-	font-size: 12px;
-	white-space: nowrap;
-}
-
-.messageList {
-	margin: 0;
-	padding-left: 16px;
-	max-height: 240px;
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.messageItem {
-	font-size: 12px;
-	color: var(--l1-foreground);
-	word-break: break-word;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/PanelStatusPopover.tsx

@@ -1,59 +0,0 @@
-import { useMemo } from 'react';
-import { Color } from '@signozhq/design-tokens';
-import { CircleX, TriangleAlert } from '@signozhq/icons';
-import { Popover } from 'antd';
-
-import PanelStatusContent from './PanelStatusContent';
-import type { PanelStatusDetail, PanelStatusVariant } from './types';
-import styles from './PanelStatusPopover.module.scss';
-
-const VARIANT_CONFIG: Record<
-	PanelStatusVariant,
-	{ color: string; ariaLabel: string }
-> = {
-	error: { color: Color.BG_CHERRY_500, ariaLabel: 'Panel error' },
-	warning: { color: Color.BG_AMBER_500, ariaLabel: 'Panel warning' },
-};
-
-interface PanelStatusPopoverProps {
-	variant: PanelStatusVariant;
-	detail: PanelStatusDetail;
-}
-
-/**
- * Header status indicator: a variant-coloured icon (error → CircleX,
- * warning → TriangleAlert) that opens a popover with the status detail. One
- * component drives both variants so error and warning surfacing stay in lockstep.
- */
-function PanelStatusPopover({
-	variant,
-	detail,
-}: PanelStatusPopoverProps): JSX.Element {
-	const { color, ariaLabel } = VARIANT_CONFIG[variant];
-	const Icon = variant === 'error' ? CircleX : TriangleAlert;
-
-	const content = useMemo(
-		() => <PanelStatusContent detail={detail} />,
-		[detail],
-	);
-
-	return (
-		<Popover
-			content={content}
-			overlayInnerStyle={{ padding: 0 }}
-			autoAdjustOverflow
-		>
-			{/* Wrapping span gives antd a ref-able, hoverable trigger (icon
-			    components don't forward refs) and a stable testid anchor. */}
-			<span
-				className={styles.trigger}
-				aria-label={ariaLabel}
-				data-testid={`panel-status-${variant}`}
-			>
-				<Icon size={16} color={color} />
-			</span>
-		</Popover>
-	);
-}
-
-export default PanelStatusPopover;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/__tests__/utils.test.ts

@@ -1,69 +0,0 @@
-import type { Warning } from 'types/api';
-import APIError from 'types/api/error';
-import { StatusCodes } from 'http-status-codes';
-
-import { panelStatusFromError, panelStatusFromWarning } from '../utils';
-
-describe('panelStatusFromError', () => {
-	it('returns null when there is no error', () => {
-		expect(panelStatusFromError(null)).toBeNull();
-	});
-
-	it('maps a structured APIError to code/message/docs/sub-messages', () => {
-		const apiError = new APIError({
-			httpStatusCode: StatusCodes.BAD_REQUEST,
-			error: {
-				code: 'invalid_query',
-				message: 'Query is invalid',
-				url: 'https://docs/err',
-				errors: [{ message: 'missing aggregation' }, { message: 'bad filter' }],
-			},
-		});
-
-		expect(panelStatusFromError(apiError)).toStrictEqual({
-			code: 'invalid_query',
-			message: 'Query is invalid',
-			docsUrl: 'https://docs/err',
-			messages: ['missing aggregation', 'bad filter'],
-		});
-	});
-
-	it('falls back to a generic 500 for a plain Error', () => {
-		expect(panelStatusFromError(new Error('boom'))).toStrictEqual({
-			code: '500',
-			message: 'boom',
-			messages: [],
-		});
-	});
-
-	it('omits docsUrl when the API error has no url', () => {
-		const apiError = new APIError({
-			httpStatusCode: StatusCodes.INTERNAL_SERVER_ERROR,
-			error: { code: 'x', message: 'y', url: '', errors: [] },
-		});
-
-		expect(panelStatusFromError(apiError)?.docsUrl).toBeUndefined();
-	});
-});
-
-describe('panelStatusFromWarning', () => {
-	it('returns null when there is no warning', () => {
-		expect(panelStatusFromWarning(undefined)).toBeNull();
-	});
-
-	it('maps a warning to the normalized status shape', () => {
-		const warning: Warning = {
-			code: 'partial_data',
-			message: 'Some series were dropped',
-			url: 'https://docs/warn',
-			warnings: [{ message: 'series A truncated' }],
-		};
-
-		expect(panelStatusFromWarning(warning)).toStrictEqual({
-			code: 'partial_data',
-			message: 'Some series were dropped',
-			docsUrl: 'https://docs/warn',
-			messages: ['series A truncated'],
-		});
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/types.ts

@@ -1,19 +0,0 @@
-/** Which kind of non-fatal panel status is being surfaced in the header. */
-export type PanelStatusVariant = 'error' | 'warning';
-
-/**
- * Normalized status shape that both an API error and a query warning adapt into,
- * so a single popover can render either. Mirrors the fields the backend supplies
- * on its `ErrorV2` / `Warning` envelopes (code + summary + optional docs link +
- * per-item messages).
- */
-export interface PanelStatusDetail {
-	/** Short status code (e.g. an error/warning code) shown as the heading. */
-	code: string;
-	/** Human-readable summary line. */
-	message: string;
-	/** Optional docs link; renders an "Open Docs" action when present. */
-	docsUrl?: string;
-	/** Additional per-item messages listed under the summary. */
-	messages: string[];
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelStatus/utils.ts

@@ -1,65 +0,0 @@
-import type { Warning } from 'types/api';
-import type APIError from 'types/api/error';
-
-import type { PanelStatusDetail } from './types';
-
-const FALLBACK_CODE = '500';
-const FALLBACK_MESSAGE = 'Something went wrong';
-
-/**
- * Narrows a thrown `Error` to our `APIError` (which carries the structured
- * `error.error` envelope). react-query types failures as `Error`, so a runtime
- * guard is the typed way to recover the richer shape.
- */
-function isAPIError(error: Error): error is APIError {
-	return (
-		'error' in error &&
-		typeof (error as APIError).error === 'object' &&
-		(error as APIError).error !== null
-	);
-}
-
-/**
- * Adapts a query failure into the normalized status shape. Structured
- * `APIError`s yield their backend code/message/docs/sub-messages; any other
- * `Error` falls back to a generic 500 with its message.
- */
-export function panelStatusFromError(
-	error: Error | null,
-): PanelStatusDetail | null {
-	if (!error) {
-		return null;
-	}
-
-	if (isAPIError(error)) {
-		const detail = error.error.error;
-		return {
-			code: detail?.code || FALLBACK_CODE,
-			message: detail?.message || FALLBACK_MESSAGE,
-			docsUrl: detail?.url || undefined,
-			messages: (detail?.errors ?? []).map((e) => e.message),
-		};
-	}
-
-	return {
-		code: FALLBACK_CODE,
-		message: error.message || FALLBACK_MESSAGE,
-		messages: [],
-	};
-}
-
-/** Adapts a query warning into the normalized status shape. */
-export function panelStatusFromWarning(
-	warning: Warning | undefined,
-): PanelStatusDetail | null {
-	if (!warning) {
-		return null;
-	}
-
-	return {
-		code: warning.code,
-		message: warning.message,
-		docsUrl: warning.url || undefined,
-		messages: (warning.warnings ?? []).map((w) => w.message),
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/__tests__/PanelHeader.test.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import type { Warning } from 'types/api';
-
-import PanelHeader from '../PanelHeader';
-
-const baseProps = {
-	title: 'My panel',
-	kind: 'TimeSeries',
-	panelId: 'panel-1',
-	isFetching: false,
-};
-
-const warning: Warning = {
-	code: 'partial_data',
-	message: 'Some series were dropped',
-	url: '',
-	warnings: [],
-};
-
-describe('PanelHeader status indicators', () => {
-	it('shows the error indicator whenever an error is present', () => {
-		render(<PanelHeader {...baseProps} error={new Error('boom')} />);
-		expect(screen.getByTestId('panel-status-error')).toBeInTheDocument();
-	});
-
-	it('shows the warning indicator whenever a warning is present', () => {
-		render(<PanelHeader {...baseProps} warning={warning} />);
-		expect(screen.getByTestId('panel-status-warning')).toBeInTheDocument();
-	});
-
-	it('renders no status indicators when there is no error or warning', () => {
-		render(<PanelHeader {...baseProps} />);
-		expect(screen.queryByTestId('panel-status-error')).not.toBeInTheDocument();
-		expect(screen.queryByTestId('panel-status-warning')).not.toBeInTheDocument();
-	});
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/usePanelInteractions.ts

@@ -1,68 +0,0 @@
-import { useCallback, useMemo } from 'react';
-// eslint-disable-next-line no-restricted-imports -- TODO: migrate global time dispatch off redux
-import { useDispatch } from 'react-redux';
-import { useLocation, useParams } from 'react-router-dom';
-import { QueryParams } from 'constants/query';
-import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
-import type { DashboardPreference } from 'pages/DashboardPageV2/DashboardContainer/Panels/types/rendererProps';
-import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
-import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { UpdateTimeInterval } from 'store/actions';
-
-export interface PanelInteractions {
-	/**
-	 * Drag-select a time range on a chart → write the window to the URL + global
-	 * time so every panel re-fetches against the same range.
-	 */
-	onDragSelect: (start: number, end: number) => void;
-	/**
-	 * Dashboard-wide rendering preferences (cursor sync, tooltip filter) keyed
-	 * off the dashboard id from the route.
-	 */
-	dashboardPreference: DashboardPreference;
-}
-
-/**
- * Encapsulates the cross-panel interactions shared by every dashboard-view
- * panel: drag-to-zoom time selection and the cursor-sync / tooltip-filter
- * preferences. Keeping this out of the `Panel` component keeps the component a
- * thin render orchestrator and lets the wiring be unit-tested in isolation.
- */
-export function usePanelInteractions(): PanelInteractions {
-	const dispatch = useDispatch();
-	const { pathname } = useLocation();
-	const { safeNavigate } = useSafeNavigate();
-	const urlQuery = useUrlQuery();
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	const [syncMode] = useDashboardCursorSyncMode(
-		dashboardId,
-		PanelMode.DASHBOARD_VIEW,
-	);
-	const [syncFilterMode] = useSyncTooltipFilterMode(dashboardId);
-
-	const dashboardPreference = useMemo<DashboardPreference>(
-		() => ({ syncMode, syncFilterMode, dashboardId }),
-		[syncMode, syncFilterMode, dashboardId],
-	);
-
-	const onDragSelect = useCallback(
-		(start: number, end: number): void => {
-			const startTimestamp = Math.trunc(start);
-			const endTimestamp = Math.trunc(end);
-
-			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
-			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
-			safeNavigate(`${pathname}?${urlQuery.toString()}`);
-
-			if (startTimestamp !== endTimestamp) {
-				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
-			}
-		},
-		[dispatch, pathname, safeNavigate, urlQuery],
-	);
-
-	return { onDragSelect, dashboardPreference };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.module.scss

@@ -9,11 +9,4 @@
 		z-index: 2;
 		user-select: none;
 	}
-
-	:global(.react-resizable-handle) {
-		&::after {
-			border-right-color: var(--l2-border) !important;
-			border-bottom-color: var(--l2-border) !important;
-		}
-	}
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -54,7 +54,6 @@ function SectionGrid({
 			useCSSTransforms
 			layout={rglLayout}
 			draggableHandle=".panel-drag-handle"
-			draggableCancel=".panel-no-drag"
 			isDraggable={isEditable}
 			isResizable={isEditable}
 			onDragStop={handleLayoutChange}

frontend/src/pages/DashboardPageV2/DashboardContainer/hooks/__tests__/usePanelQuery.test.tsx

@@ -1,288 +0,0 @@
-// eslint-disable-next-line no-restricted-imports
-import { useSelector } from 'react-redux';
-import { renderHook } from '@testing-library/react';
-import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
-import { ENTITY_VERSION_V5 } from 'constants/app';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
-import { EQueryType } from 'types/common/dashboard';
-
-import { usePanelQuery } from '../../hooks/usePanelQuery';
-
-jest.mock('lib/getStartEndRangeTime', () => ({
-	__esModule: true,
-	default: jest.fn(() => ({ start: '100', end: '200' })),
-}));
-
-jest.mock('react-redux', () => ({
-	useSelector: jest.fn(),
-}));
-
-jest.mock('hooks/queryBuilder/useGetQueryRange', () => ({
-	useGetQueryRange: jest.fn(),
-}));
-
-const mockUseSelector = useSelector as unknown as jest.Mock;
-const mockUseGetQueryRange = useGetQueryRange as unknown as jest.Mock;
-
-// ---- helpers ---------------------------------------------------------------
-
-// Test fixtures are cast at the outer boundary; the perses-generated panel and
-// query plugin unions are too verbose to construct field-typed inline.
-
-function builderPanel(): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: {
-						plugin: {
-							kind: 'signoz/BuilderQuery',
-							spec: {
-								name: 'A',
-								signal: 'metrics',
-								filter: { expression: '' },
-							},
-						},
-					},
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-function listPanelWithLogs(): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			plugin: { kind: 'signoz/ListPanel', spec: {} },
-			queries: [
-				{
-					kind: 'LogQuery',
-					spec: {
-						plugin: {
-							kind: 'signoz/BuilderQuery',
-							spec: {
-								name: 'A',
-								signal: 'logs',
-								filter: { expression: '' },
-							},
-						},
-					},
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-function emptyPanel(): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			plugin: { kind: 'signoz/TimeSeriesPanel', spec: {} },
-			queries: [],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-function histogramPanel(): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			plugin: { kind: 'signoz/HistogramPanel', spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: {
-						plugin: {
-							kind: 'signoz/BuilderQuery',
-							spec: {
-								name: 'A',
-								signal: 'metrics',
-								filter: { expression: '' },
-							},
-						},
-					},
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-function barPanel(): DashboardtypesPanelDTO {
-	return {
-		kind: 'Panel',
-		spec: {
-			plugin: { kind: 'signoz/BarChartPanel', spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: {
-						plugin: {
-							kind: 'signoz/BuilderQuery',
-							spec: {
-								name: 'A',
-								signal: 'metrics',
-								filter: { expression: '' },
-							},
-						},
-					},
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-const DEFAULT_GLOBAL_TIME = {
-	selectedTime: 'GLOBAL_TIME',
-	minTime: 1000,
-	maxTime: 2000,
-	isAutoRefreshDisabled: false,
-};
-
-beforeEach(() => {
-	jest.clearAllMocks();
-	mockUseSelector.mockImplementation((selector: unknown) => {
-		// usePanelQuery passes a selector `(state) => state.globalTime`.
-		return (
-			selector as (state: { globalTime: typeof DEFAULT_GLOBAL_TIME }) => unknown
-		)({ globalTime: DEFAULT_GLOBAL_TIME });
-	});
-	mockUseGetQueryRange.mockReturnValue({
-		data: undefined,
-		isLoading: false,
-		isFetching: false,
-		error: null,
-	});
-});
-
-// ---- tests -----------------------------------------------------------------
-
-describe('usePanelQuery', () => {
-	it('runs fromPerses on the panel queries and forwards the V1 Query to useGetQueryRange', () => {
-		renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.query.queryType).toBe(EQueryType.QUERY_BUILDER);
-		expect(requestArg.query.builder.queryData).toHaveLength(1);
-		expect(requestArg.query.builder.queryData[0].queryName).toBe('A');
-	});
-
-	it('derives graphType=TIME_SERIES for a TimeSeries panel', () => {
-		renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.graphType).toBe(PANEL_TYPES.TIME_SERIES);
-	});
-
-	it('derives graphType=LIST for a ListPanel', () => {
-		renderHook(() =>
-			usePanelQuery({ panel: listPanelWithLogs(), panelId: 'p1' }),
-		);
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.graphType).toBe(PANEL_TYPES.LIST);
-	});
-
-	// HISTOGRAM and BAR panels bin/derive from raw time-series data
-	// client-side, so the backend must receive `time_series` (matches V1's
-	// `getGraphType` translation). Without this remap, V5's
-	// `mapPanelTypeToRequestType` would send `distribution` for histograms,
-	// returning a shape `prepareHistogramData` can't bin.
-	it('remaps graphType=HISTOGRAM to TIME_SERIES (V1 parity)', () => {
-		renderHook(() => usePanelQuery({ panel: histogramPanel(), panelId: 'p1' }));
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.graphType).toBe(PANEL_TYPES.TIME_SERIES);
-	});
-
-	it('remaps graphType=BAR to TIME_SERIES (V1 parity)', () => {
-		renderHook(() => usePanelQuery({ panel: barPanel(), panelId: 'p1' }));
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.graphType).toBe(PANEL_TYPES.TIME_SERIES);
-	});
-
-	it('passes V5 entity version to useGetQueryRange', () => {
-		renderHook(() => usePanelQuery({ panel: builderPanel(), panelId: 'p1' }));
-		const [, version] = mockUseGetQueryRange.mock.calls[0];
-		expect(version).toBe(ENTITY_VERSION_V5);
-	});
-
-	it('exposes data/error from useGetQueryRange', () => {
-		mockUseGetQueryRange.mockReturnValue({
-			data: { payload: 'X' } as unknown,
-			isLoading: false,
-			isFetching: false,
-			error: new Error('boom'),
-		});
-		const { result } = renderHook(() =>
-			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
-		);
-		expect(result.current.data).toStrictEqual({ payload: 'X' });
-		expect(result.current.error?.message).toBe('boom');
-	});
-
-	it('combines isLoading and isFetching into a single isLoading flag', () => {
-		mockUseGetQueryRange.mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isFetching: true,
-			error: null,
-		});
-		const { result } = renderHook(() =>
-			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
-		);
-		expect(result.current.isLoading).toBe(true);
-	});
-
-	it('coerces a missing/undefined error to null', () => {
-		mockUseGetQueryRange.mockReturnValue({
-			data: undefined,
-			isLoading: false,
-			isFetching: false,
-			error: undefined,
-		});
-		const { result } = renderHook(() =>
-			usePanelQuery({ panel: builderPanel(), panelId: 'p1' }),
-		);
-		expect(result.current.error).toBeNull();
-	});
-
-	it('passes enabled=false to useGetQueryRange when the caller disables it', () => {
-		renderHook(() =>
-			usePanelQuery({ panel: builderPanel(), panelId: 'p1', enabled: false }),
-		);
-		const [, , opts] = mockUseGetQueryRange.mock.calls[0];
-		expect(opts.enabled).toBe(false);
-	});
-
-	it('auto-disables the fetch when the panel has no queries (even with enabled=true)', () => {
-		renderHook(() =>
-			usePanelQuery({ panel: emptyPanel(), panelId: 'p1', enabled: true }),
-		);
-		const [, , opts] = mockUseGetQueryRange.mock.calls[0];
-		expect(opts.enabled).toBe(false);
-	});
-
-	it('composes a react-query cache key that includes panelId, time range, kind, and queries', () => {
-		const panel = builderPanel();
-		renderHook(() => usePanelQuery({ panel, panelId: 'p1' }));
-		const [, , opts] = mockUseGetQueryRange.mock.calls[0];
-		expect(opts.queryKey).toStrictEqual(
-			expect.arrayContaining([
-				'p1',
-				DEFAULT_GLOBAL_TIME.minTime,
-				DEFAULT_GLOBAL_TIME.maxTime,
-				DEFAULT_GLOBAL_TIME.selectedTime,
-				'signoz/TimeSeriesPanel',
-				panel.spec?.queries,
-			]),
-		);
-	});
-
-	it('forwards the inflated empty composite to useGetQueryRange when panel is undefined (no crash)', () => {
-		renderHook(() => usePanelQuery({ panel: undefined, panelId: 'p-none' }));
-		const [requestArg] = mockUseGetQueryRange.mock.calls[0];
-		expect(requestArg.query.queryType).toBe(EQueryType.QUERY_BUILDER);
-		expect(requestArg.query.builder.queryData).toStrictEqual([]);
-	});
-});