Merge remote-tracking branch 'origin/feat/trace-details-thread-tab' into feat/trace-details-thread

# Conflicts:
#	frontend/src/pages/TraceDetailsV3/utils.ts

docs/api/openapi.yml

@@ -3702,13 +3702,6 @@ components:
           nullable: true
           type: number
       type: object
-    DashboardtypesAxisScale:
-      enum:
-      - auto
-      - linear
-      - log
-      - symlog
-      type: string
     DashboardtypesBarChartPanelSpec:
       properties:
         axes:
@@ -4451,7 +4444,6 @@ components:
           signoz/ListPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
           signoz/NumberPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesNumberPanelSpec'
           signoz/PieChartPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesPieChartPanelSpec'
-          signoz/ScatterPlotPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
           signoz/TablePanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec'
           signoz/TextPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
           signoz/TimeSeriesPanel: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -4467,7 +4459,6 @@ components:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTextPanelSpec'
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHeatmapPanelSpec'
-      - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec'
       type: object
     DashboardtypesPanelPluginKind:
       enum:
@@ -4481,7 +4472,6 @@ components:
       - signoz/ListPanel
       - signoz/TextPanel
       - signoz/HeatmapPanel
-      - signoz/ScatterPlotPanel
       type: string
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesAreaChartPanelSpec:
       properties:
@@ -4567,18 +4557,6 @@ components:
       - kind
       - spec
       type: object
-    DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesScatterPlotPanelSpec:
-      properties:
-        kind:
-          enum:
-          - signoz/ScatterPlotPanel
-          type: string
-        spec:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPanelSpec'
-      required:
-      - kind
-      - spec
-      type: object
     DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTablePanelSpec:
       properties:
         kind:
@@ -4658,16 +4636,6 @@ components:
         visualization:
           $ref: '#/components/schemas/DashboardtypesBasicVisualization'
       type: object
-    DashboardtypesPointDiameter:
-      maximum: 40
-      minimum: 2
-      nullable: true
-      type: integer
-    DashboardtypesPointOpacity:
-      maximum: 1
-      minimum: 0.1
-      nullable: true
-      type: number
     DashboardtypesPostableDashboardV2:
       properties:
         generateName:
@@ -4856,104 +4824,6 @@ components:
       required:
       - queryValue
       type: object
-    DashboardtypesScatterPlotAxes:
-      properties:
-        x:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-        "y":
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxis'
-      type: object
-    DashboardtypesScatterPlotAxis:
-      properties:
-        label:
-          description: Axis title. Empty draws none.
-          type: string
-        scale:
-          $ref: '#/components/schemas/DashboardtypesAxisScale'
-        softMax:
-          nullable: true
-          type: number
-        softMin:
-          nullable: true
-          type: number
-      type: object
-    DashboardtypesScatterPlotChartAppearance:
-      properties:
-        points:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotPoints'
-      type: object
-    DashboardtypesScatterPlotDimensions:
-      properties:
-        colorBy:
-          description: Group-by label names (e.g. k8s.namespace.name) whose combined
-            values colour dots and drive the legend. Empty colours by every group-by
-            label.
-          items:
-            type: string
-          nullable: true
-          type: array
-        sizeBy:
-          description: Value column key that scales dot size. Empty draws every dot
-            at the default size.
-          type: string
-        x:
-          description: Value column key (queryName, or queryName.expression for a
-            multi-aggregation query) plotted on the x axis. Empty uses the first value
-            column.
-          type: string
-        "y":
-          description: Value column key plotted on the y axis. Empty uses the second
-            value column.
-          type: string
-      type: object
-    DashboardtypesScatterPlotPanelSpec:
-      properties:
-        axes:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotAxes'
-        chartAppearance:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotChartAppearance'
-        dimensions:
-          $ref: '#/components/schemas/DashboardtypesScatterPlotDimensions'
-        formatting:
-          $ref: '#/components/schemas/DashboardtypesTableFormatting'
-        legend:
-          $ref: '#/components/schemas/DashboardtypesLegend'
-        thresholds:
-          items:
-            $ref: '#/components/schemas/DashboardtypesScatterPlotThreshold'
-          nullable: true
-          type: array
-        visualization:
-          $ref: '#/components/schemas/DashboardtypesBasicVisualization'
-      type: object
-    DashboardtypesScatterPlotPoints:
-      properties:
-        maxSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        minSize:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-        opacity:
-          $ref: '#/components/schemas/DashboardtypesPointOpacity'
-        size:
-          $ref: '#/components/schemas/DashboardtypesPointDiameter'
-      type: object
-    DashboardtypesScatterPlotThreshold:
-      properties:
-        axis:
-          $ref: '#/components/schemas/DashboardtypesThresholdAxis'
-        color:
-          type: string
-        label:
-          type: string
-        unit:
-          type: string
-        value:
-          format: double
-          type: number
-      required:
-      - value
-      - color
-      type: object
     DashboardtypesSource:
       enum:
       - user
@@ -5067,11 +4937,6 @@ components:
       - value
       - name
       type: object
-    DashboardtypesThresholdAxis:
-      enum:
-      - x
-      - "y"
-      type: string
     DashboardtypesThresholdFormat:
       enum:
       - text
@@ -8181,6 +8046,31 @@ components:
       - metric
       - value
       type: object
+    PromotetypesIndexMaterializedPathsResult:
+      properties:
+        indexed:
+          items:
+            $ref: '#/components/schemas/PromotetypesPromotePath'
+          nullable: true
+          type: array
+        skipped:
+          items:
+            $ref: '#/components/schemas/PromotetypesPromotePath'
+          nullable: true
+          type: array
+      required:
+      - indexed
+      - skipped
+      type: object
+    PromotetypesPostableIndexMaterializedPaths:
+      properties:
+        dryRun:
+          type: boolean
+        signal:
+          type: string
+      required:
+      - signal
+      type: object
     PromotetypesPromotePath:
       properties:
         context:
@@ -14207,6 +14097,67 @@ paths:
       tags:
       - promote
       x-signoz-stability: alpha
+  /api/v1/promoted_paths/materialized:
+    post:
+      deprecated: false
+      description: This endpoint indexes the JSON sub-columns of materialized paths
+        whose columns are indexed and returns the indexed and skipped paths.
+      operationId: IndexMaterializedPaths
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/PromotetypesPostableIndexMaterializedPaths'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/PromotetypesIndexMaterializedPathsResult'
+                  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
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - logs-field:update
+        - traces-field:update
+      - tokenizer:
+        - logs-field:update
+        - traces-field:update
+      summary: Index materialized paths
+      tags:
+      - promote
+      x-signoz-stability: alpha
   /api/v1/roles:
     get:
       deprecated: false
@@ -16199,10 +16150,8 @@ paths:
                 $ref: '#/components/schemas/RenderErrorResponse'
           description: Internal Server Error
       security:
-      - api_key:
-        - VIEWER
-      - tokenizer:
-        - VIEWER
+      - api_key: []
+      - tokenizer: []
       summary: Get stats
       tags:
       - stats
@@ -19051,9 +19000,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: Run Infra Monitoring Setup Checks
       tags:
       - inframonitoring
@@ -19125,9 +19074,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Clusters for Infra Monitoring
       tags:
       - inframonitoring
@@ -19209,9 +19158,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List DaemonSets for Infra Monitoring
       tags:
       - inframonitoring
@@ -19287,9 +19236,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Deployments for Infra Monitoring
       tags:
       - inframonitoring
@@ -19355,9 +19304,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Hosts for Infra Monitoring
       tags:
       - inframonitoring
@@ -19437,9 +19386,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Jobs for Infra Monitoring
       tags:
       - inframonitoring
@@ -19518,9 +19467,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Kubernetes Containers for Infra Monitoring
       tags:
       - inframonitoring
@@ -19589,9 +19538,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Namespaces for Infra Monitoring
       tags:
       - inframonitoring
@@ -19664,9 +19613,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Nodes for Infra Monitoring
       tags:
       - inframonitoring
@@ -19740,9 +19689,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Pods for Infra Monitoring
       tags:
       - inframonitoring
@@ -19811,9 +19760,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List Volumes for Infra Monitoring
       tags:
       - inframonitoring
@@ -19889,9 +19838,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - VIEWER
+        - metrics:read
       - tokenizer:
-        - VIEWER
+        - metrics:read
       summary: List StatefulSets for Infra Monitoring
       tags:
       - inframonitoring

frontend/.storybook/preview.tsx

@@ -142,7 +142,7 @@ const preview: Preview = {
 						'Logs',
 						['Explorer', 'Live Tail', 'Saved Views', 'Pipelines', 'Settings'],
 						'Traces',
-						['Explorer', 'Trace Details', 'Funnel Details'],
+						['Explorer', 'Trace Details', ['Overview', 'Thread'], 'Funnel Details'],
 						'Metrics',
 						['Explorer'],
 						'Infrastructure',

frontend/__mocks__/uplotMock.ts

@@ -57,7 +57,6 @@ const mockPaths = {
 const mockTzDate = jest.fn(
 	(date: Date, _timezone: string) => new Date(date.getTime()),
 );
-const mockOrient = jest.fn();
 
 // Mock uPlot constructor - this needs to be a proper constructor function
 function MockUPlot(
@@ -71,7 +70,6 @@ function MockUPlot(
 // Add static methods to the constructor
 MockUPlot.tzDate = mockTzDate;
 MockUPlot.paths = mockPaths;
-MockUPlot.orient = mockOrient;
 // Pinned so canvas-space maths in draw hooks is deterministic under jsdom.
 MockUPlot.pxRatio = 1;
 

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

@@ -18,8 +18,10 @@ import type {
 } from 'react-query';
 
 import type {
+	IndexMaterializedPaths200,
 	ListPromotedPaths200,
 	ListPromotedPathsParams,
+	PromotetypesPostableIndexMaterializedPathsDTO,
 	PromotetypesPromotePathDTO,
 	RenderErrorResponseDTO,
 } from '../sigNoz.schemas';
@@ -230,3 +232,87 @@ export const usePromotePaths = <
 > => {
 	return useMutation(getPromotePathsMutationOptions(options));
 };
+/**
+ * This endpoint indexes the JSON sub-columns of materialized paths whose columns are indexed and returns the indexed and skipped paths.
+ * @summary Index materialized paths
+ */
+export const indexMaterializedPaths = (
+	promotetypesPostableIndexMaterializedPathsDTO?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO>,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<IndexMaterializedPaths200>({
+		url: `/api/v1/promoted_paths/materialized`,
+		method: 'POST',
+		headers: { 'Content-Type': 'application/json' },
+		data: promotetypesPostableIndexMaterializedPathsDTO,
+		signal,
+	});
+};
+
+export const getIndexMaterializedPathsMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof indexMaterializedPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+	TContext
+> => {
+	const mutationKey = ['indexMaterializedPaths'];
+	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 indexMaterializedPaths>>,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return indexMaterializedPaths(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type IndexMaterializedPathsMutationResult = NonNullable<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>
+>;
+export type IndexMaterializedPathsMutationBody =
+	| BodyType<PromotetypesPostableIndexMaterializedPathsDTO>
+	| undefined;
+export type IndexMaterializedPathsMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Index materialized paths
+ */
+export const useIndexMaterializedPaths = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof indexMaterializedPaths>>,
+		TError,
+		{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof indexMaterializedPaths>>,
+	TError,
+	{ data?: BodyType<PromotetypesPostableIndexMaterializedPathsDTO> },
+	TContext
+> => {
+	return useMutation(getIndexMaterializedPathsMutationOptions(options));
+};

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

@@ -9878,6 +9878,28 @@ export interface PromotetypesPromotePathDTO {
 	signal: string;
 }
 
+export interface PromotetypesIndexMaterializedPathsResultDTO {
+	/**
+	 * @type array,null
+	 */
+	indexed: PromotetypesPromotePathDTO[] | null;
+	/**
+	 * @type array,null
+	 */
+	skipped: PromotetypesPromotePathDTO[] | null;
+}
+
+export interface PromotetypesPostableIndexMaterializedPathsDTO {
+	/**
+	 * @type boolean
+	 */
+	dryRun?: boolean;
+	/**
+	 * @type string
+	 */
+	signal: string;
+}
+
 export interface Querybuildertypesv5AggregationMetaDTO {
 	/**
 	 * @type array
@@ -13250,6 +13272,14 @@ export type ListPromotedPaths200 = {
 	status: string;
 };
 
+export type IndexMaterializedPaths200 = {
+	data: PromotetypesIndexMaterializedPathsResultDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListRoles200 = {
 	/**
 	 * @type array

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

@@ -61,7 +61,11 @@ describe('convertV5ResponseToLegacy', () => {
 							],
 							values: [
 								{ timestamp: 1000, value: 10 } as unknown as TimeSeriesValue,
-								{ timestamp: 2000, value: 12 } as unknown as TimeSeriesValue,
+								{
+									timestamp: 2000,
+									value: 12,
+									partial: true,
+								} as unknown as TimeSeriesValue,
 							],
 						} as unknown as TimeSeries,
 					],
@@ -104,7 +108,7 @@ describe('convertV5ResponseToLegacy', () => {
 				labels: { 'service.name': 'adservice' },
 				values: [
 					{ timestamp: 1000, value: '10' },
-					{ timestamp: 2000, value: '12' },
+					{ timestamp: 2000, value: '12', partial: true },
 				],
 				metaData: expect.objectContaining({
 					alias: '__result_0',

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

@@ -125,6 +125,7 @@ function convertTimeSeriesData(
 				values: series.values.map((value: any) => ({
 					timestamp: value.timestamp,
 					value: String(value.value),
+					...(value.partial ? { partial: true } : {}),
 				})),
 				metaData: {
 					alias,

frontend/src/assets/Logos/apache-druid.svg

@@ -1,3 +1,3 @@
 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill="#29F1FB" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
+  <path fill="#0E9AA7" d="M8.932 20.806c-.369 0-.738.007-1.109 0-.35-.007-.587-.206-.623-.5a.587.587 0 0 1 .53-.636c.79-.062 1.582-.063 2.372-.003a.548.548 0 0 1 .522.602c-.024.326-.253.526-.616.54zM1.792 8.345c-.392 0-.782.008-1.173.002-.327-.006-.577-.22-.614-.512-.037-.293.146-.544.499-.615.192-.032.388-.045.583-.039a81.515 81.515 0 0 1 1.597 0c.163 0 .325.019.483.056.288.073.445.318.411.617-.034.298-.214.477-.515.487-.424.014-.848.004-1.272.004zm7.588 8.417H4.292a2.464 2.464 0 0 1-.326-.007c-.294-.04-.48-.209-.508-.506-.029-.298.11-.501.391-.606.179-.065.365-.051.549-.051 3.347 0 6.695.005 10.042-.006 1.174-.004 2.187-.439 2.993-1.3.69-.738 1.053-1.63 1.16-2.635.085-.788-.027-1.513-.516-2.156-.544-.718-1.28-1.078-2.163-1.082-3.163-.013-6.328-.005-9.487-.01-.336 0-.673-.027-1.007-.058-.29-.027-.45-.201-.469-.492-.021-.317.141-.545.429-.6a1.55 1.55 0 0 1 .29-.015h10.177c1.71.004 3.187 1.038 3.726 2.654.383 1.147.246 2.304-.182 3.416-.824 2.135-2.762 3.448-5.055 3.454-1.652.005-3.304 0-4.956 0zm2.906-13.568c1.533 0 3.066-.008 4.598 0 2.935.018 5.629 1.892 6.653 4.626.442 1.181.538 2.403.412 3.657-.185 1.842-.735 3.552-1.776 5.084-1.608 2.365-3.873 3.68-6.679 4.118-.95.148-1.905.13-2.86.13-.397 0-.61-.181-.633-.51-.025-.351.196-.621.587-.645.434-.026.87-.004 1.305-.016 2.641-.072 4.928-.982 6.74-2.935 1.269-1.37 1.912-3.039 2.13-4.878.151-1.275.135-2.544-.37-3.752-.773-1.85-2.159-2.983-4.068-3.509-.74-.204-1.5-.243-2.26-.247-2.837-.017-5.675-.007-8.511-.007-.12 0-.24.004-.359-.006a.57.57 0 0 1-.517-.536.557.557 0 0 1 .456-.557c.13-.018.261-.024.392-.019h4.762Z"/>
 </svg>

frontend/src/assets/Logos/baseten.svg

@@ -1,3 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#9CA3AF" height="34" viewBox="0 0 131 34">
-  <path fill="#9CA3AF" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35ZM44.41 14.7c-.5-.5-1.1-.9-1.76-1.18a5.62 5.62 0 0 0-4.6.17c-.73.37-1.32.91-1.75 1.62h-.17V8.59H34.1v16.83h2.04v-1.81h.17c.21.36.47.67.77.94.31.25.65.48 1.01.67.37.18.77.31 1.18.39a6.2 6.2 0 0 0 3.39-.24 5.36 5.36 0 0 0 3.02-3.1c.29-.75.44-1.62.44-2.6v-.47c0-.96-.16-1.83-.47-2.58-.3-.75-.7-1.4-1.23-1.9v-.01Zm-5.87.66a3.9 3.9 0 0 1 4.34.84c.36.35.64.8.83 1.3.2.5.3 1.07.3 1.7v.47c0 .64-.1 1.23-.3 1.74a3.75 3.75 0 0 1-2.06 2.15 4.27 4.27 0 0 1-3.12-.03 3.86 3.86 0 0 1-2.09-2.2c-.2-.52-.3-1.11-.3-1.75v-.29c0-.62.1-1.2.3-1.7v-.01c.21-.53.5-.99.84-1.36.36-.37.78-.66 1.26-.86ZM97.04 8.59H95v4.86h-2.94v1.86H95v8.17c0 .56.17 1.03.53 1.4.37.35.84.54 1.4.54h4.18v-1.87h-3.5c-.2 0-.33-.05-.43-.15-.1-.1-.14-.27-.14-.49v-7.6h4.65v-1.86h-4.65V8.59ZM114.61 15a5.48 5.48 0 0 0-1.8-1.33 5.6 5.6 0 0 0-2.57-.56 6.17 6.17 0 0 0-4.26 1.7 5.6 5.6 0 0 0-1.72 4.2v.57c0 .9.15 1.75.44 2.5a5.58 5.58 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.35 5.35 0 0 0 1.91-2.73l.03-.07-1.94-.52-.02.07c-.11.33-.27.64-.46.94-.17.27-.4.52-.7.74-.28.22-.63.39-1.04.51-.41.13-.9.19-1.46.19a3.8 3.8 0 0 1-2.84-1.05 4.07 4.07 0 0 1-1.1-2.7h9.68v-1.6c0-.54-.11-1.12-.34-1.75a5.04 5.04 0 0 0-1.03-1.74Zm-8.25 3.21a3.8 3.8 0 0 1 1.22-2.25 4.19 4.19 0 0 1 3.99-.7c.44.16.83.38 1.17.66.34.27.62.62.82 1.02.21.38.34.8.38 1.27h-7.58ZM129.09 14.42a4.47 4.47 0 0 0-3.37-1.3c-.93 0-1.73.2-2.4.59-.64.39-1.15.97-1.52 1.74h-.17v-2h-2.04v11.97h2.04v-6.23c0-1.26.32-2.28.95-3.02a3.31 3.31 0 0 1 2.65-1.14c.94 0 1.7.3 2.24.9.56.6.83 1.52.83 2.74v6.75h2.04v-7.13c0-1.71-.42-3.02-1.25-3.87ZM88.1 15a5.48 5.48 0 0 0-1.78-1.33 5.6 5.6 0 0 0-2.58-.56 6.17 6.17 0 0 0-4.27 1.7 5.59 5.59 0 0 0-1.71 4.2v.56c0 .92.14 1.76.44 2.51a5.6 5.6 0 0 0 5.5 3.67c1.55 0 2.8-.35 3.72-1.04a5.36 5.36 0 0 0 1.91-2.73l.03-.07-1.94-.52-.03.07c-.1.32-.26.64-.45.94-.17.27-.4.52-.7.74-.29.21-.64.39-1.05.51-.4.12-.9.19-1.45.19a3.8 3.8 0 0 1-2.85-1.05 4.07 4.07 0 0 1-1.09-2.7h9.68v-1.61c0-.53-.12-1.12-.34-1.74A5.03 5.03 0 0 0 88.1 15Zm-8.24 3.21a3.83 3.83 0 0 1 1.22-2.25 4.2 4.2 0 0 1 3.99-.7c.44.16.83.38 1.16.66.35.27.62.62.83 1.02.2.38.33.8.37 1.27h-7.57ZM73.65 19.42a6.11 6.11 0 0 0-3.23-1.02 6.63 6.63 0 0 1-2.68-.58c-.47-.3-.7-.7-.7-1.25 0-.27.08-.5.21-.7.14-.2.33-.38.56-.52a4.05 4.05 0 0 1 1.78-.42c.85 0 1.54.21 2.06.63.53.41.83 1 .91 1.73l.01.1 1.95-.47-.01-.07c-.07-.45-.22-.91-.45-1.36a3.46 3.46 0 0 0-.94-1.2 4.6 4.6 0 0 0-1.52-.84 6.05 6.05 0 0 0-2.1-.34c-.58 0-1.13.07-1.65.22-.52.14-1 .36-1.43.65-.41.3-.74.66-.99 1.1a2.9 2.9 0 0 0-.37 1.49v.14c0 1.06.38 1.87 1.14 2.42a6.2 6.2 0 0 0 3.24.97c1.18.08 2.04.26 2.56.54.5.28.75.72.75 1.36 0 .6-.25 1.06-.78 1.4-.52.32-1.22.48-2.1.48a3.68 3.68 0 0 1-2.46-.79 3.13 3.13 0 0 1-1.04-2.14v-.09l-1.93.46h-.02v.07a4.4 4.4 0 0 0 3.1 4c.7.24 1.52.36 2.46.36.7 0 1.35-.09 1.93-.27.6-.16 1.12-.4 1.53-.72A3.38 3.38 0 0 0 74.8 22v-.14c0-1.07-.39-1.9-1.14-2.44ZM60.25 23.4c-.1-.1-.14-.27-.14-.49v-9.46h-2.05v1.85h-.16a3.78 3.78 0 0 0-1.61-1.63 4.62 4.62 0 0 0-2.26-.56c-.77 0-1.5.14-2.19.41a5.27 5.27 0 0 0-3.02 3.12c-.29.75-.44 1.63-.44 2.6v.38c0 .99.15 1.87.44 2.63.3.75.7 1.4 1.2 1.93a5.48 5.48 0 0 0 4.05 1.57c.8 0 1.51-.2 2.2-.58.69-.38 1.24-.97 1.63-1.75h.16v.06c0 .56.18 1.03.53 1.4.37.35.85.54 1.41.54h1.36v-1.87h-.68c-.2 0-.34-.05-.43-.15Zm-4.46.13c-.46.2-.97.3-1.52.3a3.68 3.68 0 0 1-2.75-1.09 4.42 4.42 0 0 1-1.05-3.12v-.38c0-.62.1-1.2.29-1.71a3.65 3.65 0 0 1 5-2.17c.47.2.88.49 1.21.86.35.37.62.83.8 1.36.2.5.3 1.08.3 1.7v.3c0 .63-.1 1.23-.3 1.76-.18.5-.45.96-.78 1.33-.33.37-.73.66-1.2.86Z"/>
-</svg>
+<svg role="img" viewBox="-2.625 3 28 28" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M.36 8.6h16.7v5.6H6.04c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h11.02v5.6h-5.33c-.2 0-.35.16-.35.35v4.9c0 .2.16.35.35.35h4.98c.2 0 .35-.15.35-.35V25.4h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34v-5.6h5.34c.2 0 .35-.16.35-.35v-4.9c0-.2-.16-.35-.35-.35h-5.34V3.35c0-.2-.16-.35-.35-.35H.36c-.2 0-.36.16-.36.35v4.9c0 .2.16.35.36.35Z"/></svg>

frontend/src/assets/Logos/celery.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" id="图层_1" x="0" y="0" version="1.1" viewBox="0 0 519.27 214.14"><style>.st2{fill:#a9cc54}</style><path d="M493.54 171.25c-35.63 0-64.52-28.89-64.52-64.52s28.89-64.52 64.52-64.52c3.85 0 7.62.36 11.29 1L493.54 5.45H104.46v.02C49.24 6.51 4.78 51.59 4.78 107.07c0 55.47 44.45 100.56 99.68 101.59v.02h389.07l11.29-38.44c-3.66.65-7.43 1.01-11.28 1.01" style="fill:#b6de64"/><defs><path id="SVGID_1_" d="M493.54 171.25c-35.63 0-64.52-28.89-64.52-64.52s28.89-64.52 64.52-64.52c3.85 0 7.62.36 11.29 1V5.45H104.46v.02C49.24 6.51 4.78 51.59 4.78 107.07c0 55.47 44.45 100.56 99.68 101.59v.02h389.07l11.29-38.44c-3.66.65-7.43 1.01-11.28 1.01"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style="overflow:visible"/></clipPath><g style="clip-path:url(#SVGID_2_)"><path d="M-23.16 55.58H428.5v51.1H-23.16zM-23.16 157.59h530.98v72.35H-23.16z" class="st2"/></g><path d="M493.54 184.23c-43.94 0-79.56-33.62-79.56-77.56s35.62-76.56 79.56-76.56" style="fill:none;stroke:#ddf4a4;stroke-width:49;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#37814A" d="M2.303 0A2.298 2.298 0 0 0 0 2.303v19.394A2.298 2.298 0 0 0 2.303 24h19.394A2.298 2.298 0 0 0 24 21.697V2.303A2.298 2.298 0 0 0 21.697 0zm8.177 3.072c4.098 0 7.028 1.438 7.68 1.764l-1.194 2.55c-2.442-1.057-4.993-1.41-5.672-1.41-1.574 0-2.17.922-2.17 1.763v8.494c0 .869.596 1.791 2.17 1.791.679 0 3.23-.38 5.672-1.41l1.194 2.496c-.435.271-3.637 1.818-7.68 1.818-1.112 0-4.64-.244-4.64-4.64V7.713c0-4.397 3.528-4.64 4.64-4.64z"/></svg>

frontend/src/assets/Logos/github.svg

@@ -1,5 +1,5 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g id="lucide/github">
-<path id="Vector" d="M15 22V18C15.1391 16.7473 14.7799 15.4901 14 14.5C17 14.5 20 12.5 20 9C20.08 7.75 19.73 6.52 19 5.5C19.28 4.35 19.28 3.15 19 2C19 2 18 2 16 3.5C13.36 3 10.64 3 8 3.5C6 2 5 2 5 2C4.7 3.15 4.7 4.35 5 5.5C4.27187 6.51588 3.91847 7.75279 4 9C4 12.5 7 14.5 10 14.5C9.61 14.99 9.32 15.55 9.15 16.15C8.98 16.75 8.93 17.38 9 18M9 18V22M9 18C4.49 20 4 16 2 16" stroke="#C0C1C3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector" d="M15 22V18C15.1391 16.7473 14.7799 15.4901 14 14.5C17 14.5 20 12.5 20 9C20.08 7.75 19.73 6.52 19 5.5C19.28 4.35 19.28 3.15 19 2C19 2 18 2 16 3.5C13.36 3 10.64 3 8 3.5C6 2 5 2 5 2C4.7 3.15 4.7 4.35 5 5.5C4.27187 6.51588 3.91847 7.75279 4 9C4 12.5 7 14.5 10 14.5C9.61 14.99 9.32 15.55 9.15 16.15C8.98 16.75 8.93 17.38 9 18M9 18V22M9 18C4.49 20 4 16 2 16" stroke="#7A8291" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 </svg>

frontend/src/assets/Logos/hcp-vault.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#FFEC6E" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A68400" d="m0 0 11.955 24L24 0zm13.366 4.827h1.393v1.38h-1.393zm-2.77 5.569H9.22V8.993h1.389zm0-2.087H9.22V6.906h1.389zm0-2.086H9.22V4.819h1.389zm2.087 6.263h-1.377V11.08h1.388zm0-2.09h-1.377V8.993h1.388zm0-2.087h-1.377V6.906h1.388zm0-2.086h-1.377V4.819h1.388zm.683.683h1.393v1.389h-1.393zm0 3.475V8.993h1.389v1.388Z"/></svg>

frontend/src/assets/Logos/heroku.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="285" height="285" preserveAspectRatio="xMidYMid" viewBox="-14.5 0 285 285"><path fill="#430098" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64 17.582 0 28.106 6.913 33.838 12.712 12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="285" height="285" preserveAspectRatio="xMidYMid" viewBox="-14.5 0 285 285"><path fill="#7C4DD6" d="M230.4 0c13.996 0 25.37 11.232 25.597 25.177l.003.423v233.244c0 13.996-11.235 25.37-25.177 25.597l-.423.003H25.6c-13.996 0-25.37-11.235-25.597-25.176L0 258.844V25.6C0 11.601 11.235.23 25.177.003L25.6 0zm0 14.222H25.6c-6.174 0-11.218 4.948-11.374 11.085l-.004.293v233.244c0 6.174 4.948 11.218 11.085 11.374l.293.004h204.8c6.177 0 11.218-4.947 11.374-11.084l.004-.294V25.6c0-6.272-5.102-11.378-11.378-11.378M64 184.89l32 28.444-32 28.445zM92.444 42.667v80.75c14.201-4.622 34.052-9.64 53.334-9.64 17.582 0 28.106 6.913 33.838 12.712 12.109 12.25 12.397 27.82 12.381 29.897v.058l.003 85.334h-28.444v-84.942c-.14-6.639-3.34-14.614-17.778-14.614-28.632 0-60.714 14.257-61.666 14.683l-.02.009L64 166.016V42.666zm99.556 0c-1.92 16.156-8.47 31.644-21.333 46.222h-28.445c11.179-14.667 18.198-30.101 21.334-46.222Z"/></svg>

frontend/src/assets/Logos/livekit.svg

@@ -1 +1 @@
-<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>LiveKit</title><path d="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z" fill="#1FD5F9"></path><path d="M6 18V2H2v20h12v-4H6z" fill="#fff"></path></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 10h-4v4h4v-4zM18 6h-4v4.001h4v-4zM18 14h-4v4h4v-4zM22 2h-4v4h4V2zM22 18h-4v4h4v-4z" fill="#1FD5F9"></path><path d="M6 18V2H2v20h12v-4H6z" fill="#7A8291"></path></svg>

frontend/src/assets/Logos/opencode.svg

@@ -1 +1 @@
-<svg width='234' height='42' viewBox='0 0 234 42' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18 30H6V18H18V30Z' fill='#CFCECD'/><path d='M18 12H6V30H18V12ZM24 36H0V6H24V36Z' fill='#656363'/><path d='M48 30H36V18H48V30Z' fill='#CFCECD'/><path d='M36 30H48V12H36V30ZM54 36H36V42H30V6H54V36Z' fill='#656363'/><path d='M84 24V30H66V24H84Z' fill='#CFCECD'/><path d='M84 24H66V30H84V36H60V6H84V24ZM66 18H78V12H66V18Z' fill='#656363'/><path d='M108 36H96V18H108V36Z' fill='#CFCECD'/><path d='M108 12H96V36H90V6H108V12ZM114 36H108V12H114V36Z' fill='#656363'/><path d='M144 30H126V18H144V30Z' fill='#CFCECD'/><path d='M144 12H126V30H144V36H120V6H144V12Z' fill='#211E1E'/><path d='M168 30H156V18H168V30Z' fill='#CFCECD'/><path d='M168 12H156V30H168V12ZM174 36H150V6H174V36Z' fill='#211E1E'/><path d='M198 30H186V18H198V30Z' fill='#CFCECD'/><path d='M198 12H186V30H198V12ZM204 36H180V6H198V0H204V36Z' fill='#211E1E'/><path d='M234 24V30H216V24H234Z' fill='#CFCECD'/><path d='M216 12V18H228V12H216ZM234 24H216V30H234V36H210V6H234V24Z' fill='#211E1E'/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M22 24H2V0h20zM17 4.8H7v14.4h10z"/></svg>

frontend/src/assets/Logos/render.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>Render</title><path d="M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507a7.9 7.9 0 0 1-3.825-.979.202.202 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75"/></svg>
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#7A8291" d="M18.263.007c-3.121-.147-5.744 2.109-6.192 5.082-.018.138-.045.272-.067.405-.696 3.703-3.936 6.507-7.827 6.507-1.388 0-2.691-.356-3.825-.979a.2024.2024 0 0 0-.302.178V24H12v-8.999c0-1.656 1.338-3 2.987-3h2.988c3.382 0 6.103-2.817 5.97-6.244-.12-3.084-2.61-5.603-5.682-5.75"/></svg>

frontend/src/assets/Logos/vector.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.0" viewBox="0 0 800 600"><path d="M364.7 246.1h16.9L363.2 300h-16.9l-18.5-53.9h17.1l10.2 33h.2zM436 300h-39.4v-53.9h39.2v13.6h-23.6v7.1h20.9V279h-20.9v7.4H436zm41.6-54.8c11.3 0 19.6 5.8 22.1 15.1l-14.7 6.4c-.7-4.2-2.9-7.4-7.6-7.4-5.3 0-9.3 4.4-9.3 14s3.8 14.2 9.3 14.2c4.5 0 6.9-3.4 7.6-7.6l14.7 6.4c-2.5 9.3-10.9 15.1-22.1 15.1-16.2 0-26.1-10.7-26.1-28s9.9-28.2 26.1-28.2m50.3 54.8v-40.3h-16.2v-13.6h48.5v13.6H544V300zm97.7-26.9c0 17.2-10 28-26.1 28-16 0-26.1-10.7-26.1-28s10.2-28 26.1-28c16.1.1 26.1 10.8 26.1 28m-35.4 0c0 8.7 3.3 14.2 9.4 14.2s9.4-5.3 9.4-14.2c0-8.7-3.3-14.2-9.4-14.2s-9.4 5.3-9.4 14.2m84.4 26.9c-1.5-1.8-2-3.4-2.5-6.4l-1.1-6c-.7-3.8-2.5-4.9-5.8-4.9h-6.4V300h-16v-53.9h25.6c12.2 0 20.7 4.7 20.7 16.5 0 7.8-5.3 12.3-11.1 13.4v.2c4.7.7 7.4 3.6 8.5 8.5l2 8.5c.7 2.9 1.6 4.7 3.4 6.7.1.1-17.3.1-17.3.1m-8.2-40.7h-7.8V270h7.8c3.8 0 5.8-1.6 5.8-5.4 0-3.5-1.8-5.3-5.8-5.3m-321.5 81.2c3.3.4 5.6 2.4 5.6 6 0 4.4-2.7 7.3-8.7 7.3h-9.3v-26.1h8.9c5.1 0 8.2 2.4 8.2 6.9 0 3.1-2 5.3-4.7 5.9m-9.1-1.1h5.4c3.3 0 5.1-1.5 5.1-4.5s-1.8-4.5-5.1-4.5h-5.4zm0 11.6h5.8c3.6 0 5.4-1.6 5.4-4.5s-2-4.5-5.4-4.5h-5.8zm28-10.7 7.1-12.7h3.4l-8.9 15.8v10.2h-3.3v-10.2l-9.1-15.8h3.6zm26.7-12.7h7.6c7.3 0 12.7 4 12.7 12.9s-5.4 13.1-12.7 13.1h-7.6zm3.2 23.2h4.4c4.7 0 9.3-2.5 9.3-10.3s-4.5-10.2-9.3-10.2h-4.4zm36.2-4.3H419l-2.5 7.3h-3.3l9.4-26.1h3.6l9.4 26.1h-3.3zm-10-2.9h8.9l-4.4-12.5zm24.1 10.1v-23.2h-8.7v-2.9h20.9v2.9h-8.7v23.2zm28.3-7.2h-10.9l-2.5 7.3h-3.3l9.4-26.1h3.6l9.4 26.1h-3.3zm-9.8-2.9h8.9l-4.4-12.5zm20.7-16h7.6c7.3 0 12.7 4 12.7 12.9s-5.4 13.1-12.7 13.1h-7.6zm3.3 23.2h4.4c4.7 0 9.3-2.5 9.3-10.3s-4.5-10.2-9.3-10.2h-4.4zm44.1-10.1c0 8.4-4.5 13.4-11.3 13.4S508 349 508 340.7c0-8.4 4.5-13.4 11.3-13.4s11.3 5 11.3 13.4m-19 0c0 6.4 2.7 10.7 7.8 10.7s7.8-4.4 7.8-10.7c0-6.4-2.7-10.7-7.8-10.7s-7.8 4.3-7.8 10.7m45-.2v13.1H554l-.5-3.8c-.9 2.7-3.8 4.4-7.3 4.4-6.5 0-11.1-4.9-11.1-13.4 0-8.7 4.9-13.6 11.4-13.6 4.7 0 8 2 9.4 6l-2.9 1.6c-.9-3.1-3.4-4.9-6.7-4.9-5.1 0-8 4-8 10.7 0 6.4 2.5 10.7 8 10.7 3.4 0 6.7-1.8 6.7-6.5V343h-6.4v-2.7h9.8z"/><linearGradient id="a" x1="128.046" x2="313.226" y1="579.207" y2="472.293" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m199.7 408.2-92.2-54.1V245.9l92.2-54.1 92.2 54.1v108.2zm-79.4-61.7 79.1 46.5 79.1-46.5v-92.9l-79-46.5-79.3 46.5c.1-.1.1 92.9.1 92.9" style="fill:url(#a)"/><linearGradient id="b" x1="185.354" x2="277.202" y1="542.013" y2="488.984" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m239.4 270.6-32.3 56.8 10.5 18.5 42.8-75.3zm-36.1 0L171 327.4l10.5 18.5 42.8-75.3zm-64.4 0 42.8 75.3 10.5-18.5-32.3-56.8zm0 0 42.8 75.3 10.5-18.5-32.3-56.8zm64.4 0L171 327.4l10.5 18.5 42.8-75.3z" style="fill:url(#b)"/></svg>
+<svg role="img" viewBox="89.7 190 220 220" xmlns="http://www.w3.org/2000/svg"><linearGradient id="a" x1="128.046" x2="313.226" y1="579.207" y2="472.293" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m199.7 408.2-92.2-54.1V245.9l92.2-54.1 92.2 54.1v108.2zm-79.4-61.7 79.1 46.5 79.1-46.5v-92.9l-79-46.5-79.3 46.5c.1-.1.1 92.9.1 92.9" style="fill:url(#a)"/><linearGradient id="b" x1="185.354" x2="277.202" y1="542.013" y2="488.984" gradientTransform="translate(-20.96 -225.764)" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#10e7ff"/><stop offset=".103" style="stop-color:#33d5ff"/><stop offset=".255" style="stop-color:#60bdff"/><stop offset=".408" style="stop-color:#86aaff"/><stop offset=".56" style="stop-color:#a39aff"/><stop offset=".71" style="stop-color:#b790ff"/><stop offset=".858" style="stop-color:#c489ff"/><stop offset="1" style="stop-color:#c887ff"/></linearGradient><path d="m239.4 270.6-32.3 56.8 10.5 18.5 42.8-75.3zm-36.1 0L171 327.4l10.5 18.5 42.8-75.3zm-64.4 0 42.8 75.3 10.5-18.5-32.3-56.8zm0 0 42.8 75.3 10.5-18.5-32.3-56.8zm64.4 0L171 327.4l10.5 18.5 42.8-75.3z" style="fill:url(#b)"/></svg>

frontend/src/components/MarkdownRenderer/MarkdownRenderer.tsx

@@ -65,6 +65,21 @@ function Code({
 	);
 }
 
+// Untrusted images become links so viewing a message never fetches a third-party URL.
+function ImageAsLink({
+	src,
+	alt,
+}: {
+	src?: string;
+	alt?: string;
+}): JSX.Element {
+	return (
+		<a href={src} target="_blank" rel="noopener noreferrer">
+			{alt || src}
+		</a>
+	);
+}
+
 function Link({ href, children }: LinkProps): JSX.Element {
 	return (
 		<a href={href} target="_blank" rel="noopener noreferrer">
@@ -101,19 +116,22 @@ function MarkdownRenderer({
 	trackCopyAction,
 	elementDetails,
 	className,
+	isTrusted = true,
 }: {
 	markdownContent: any;
 	variables: any;
 	trackCopyAction?: boolean;
 	elementDetails?: Record<string, unknown>;
 	className?: string;
+	// False for untrusted content (e.g. telemetry): HTML renders as text, images as links.
+	isTrusted?: boolean;
 }): JSX.Element {
 	const interpolatedMarkdown = interpolateMarkdown(markdownContent, variables);
 
 	return (
 		<ReactMarkdown
 			className={className}
-			rehypePlugins={[rehypeRaw as any]}
+			rehypePlugins={isTrusted ? [rehypeRaw as any] : []}
 			components={{
 				// @ts-expect-error
 				a: Link,
@@ -125,6 +143,7 @@ function MarkdownRenderer({
 					}),
 				code: Code,
 				customtag: CustomTag,
+				...(isTrusted ? {} : { img: ImageAsLink }),
 			}}
 		>
 			{interpolatedMarkdown}
@@ -135,6 +154,7 @@ function MarkdownRenderer({
 MarkdownRenderer.defaultProps = {
 	elementDetails: {},
 	trackCopyAction: false,
+	isTrusted: true,
 };
 
 export { Code, Link, MarkdownRenderer, Pre };

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

@@ -1,6 +1,7 @@
 import type { TracesTableRow } from '../TracesTable/getFieldColumn';
 import { generatePath } from 'react-router-dom';
 import ROUTES from 'constants/routes';
+import { TraceDetailsTab } from 'pages/TraceDetailsV3/constants';
 import { formUrlParams } from 'utils/traceUtils';
 import { QueryDataV3 } from 'types/api/widgets/getQuery';
 
@@ -20,6 +21,7 @@ export const getTraceLink = (record: Record<string, unknown>): string => {
 	}
 
 	return `${generatePath(ROUTES.TRACE_DETAIL, { id: traceId })}${formUrlParams({
+		tab: TraceDetailsTab.Thread,
 		spanId,
 		levelUp: 0,
 		levelDown: 0,

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

@@ -3,6 +3,7 @@ import { Badge } from '@signozhq/ui/badge';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import ROUTES from 'constants/routes';
+import { TraceDetailsTab } from 'pages/TraceDetailsV3/constants';
 import { getMs } from 'utils/timeUtils';
 import { useTimezone } from 'providers/Timezone';
 
@@ -44,7 +45,10 @@ function FieldCell({ name, value }: FieldCellProps): JSX.Element {
 	if (TRACE_ID_FIELD_NAMES.has(name)) {
 		return (
 			<Link
-				to={generatePath(ROUTES.TRACE_DETAIL, { id: text })}
+				to={{
+					pathname: generatePath(ROUTES.TRACE_DETAIL, { id: text }),
+					search: `?tab=${TraceDetailsTab.Thread}`,
+				}}
 				data-testid="trace-id"
 				onClick={(e): void => e.stopPropagation()}
 			>

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

@@ -560,7 +560,7 @@ const onboardingConfigWithLinks = [
 					key: 'springboot',
 					label: 'Spring Boot',
 					imgUrl: springbootUrl,
-					link: '/docs/instrumentation/opentelemetry-springboot/',
+					link: '/docs/instrumentation/java/opentelemetry-java/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -570,25 +570,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-springboot/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-springboot/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-springboot/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-springboot/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 						],
 					},
@@ -597,7 +597,7 @@ const onboardingConfigWithLinks = [
 					key: 'tomcat',
 					label: 'Tomcat',
 					imgUrl: tomcatUrl,
-					link: '/docs/instrumentation/opentelemetry-tomcat/',
+					link: '/docs/instrumentation/java/opentelemetry-tomcat/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -607,25 +607,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-tomcat/',
+								link: '/docs/instrumentation/java/opentelemetry-tomcat/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-tomcat/',
+								link: '/docs/instrumentation/java/opentelemetry-tomcat/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-tomcat/',
+								link: '/docs/instrumentation/java/opentelemetry-tomcat/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-tomcat/',
+								link: '/docs/instrumentation/java/opentelemetry-tomcat/',
 							},
 						],
 					},
@@ -634,7 +634,7 @@ const onboardingConfigWithLinks = [
 					key: 'jboss',
 					label: 'JBoss/WildFly',
 					imgUrl: jbossUrl,
-					link: '/docs/instrumentation/opentelemetry-jboss/',
+					link: '/docs/instrumentation/java/opentelemetry-jboss/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -644,25 +644,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-jboss/',
+								link: '/docs/instrumentation/java/opentelemetry-jboss/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-jboss/',
+								link: '/docs/instrumentation/java/opentelemetry-jboss/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-jboss/',
+								link: '/docs/instrumentation/java/opentelemetry-jboss/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-jboss/',
+								link: '/docs/instrumentation/java/opentelemetry-jboss/',
 							},
 						],
 					},
@@ -671,7 +671,7 @@ const onboardingConfigWithLinks = [
 					key: 'opentelemetry-quarkus',
 					label: 'Quarkus',
 					imgUrl: quarkusUrl,
-					link: '/docs/instrumentation/opentelemetry-quarkus/',
+					link: '/docs/instrumentation/java/opentelemetry-quarkus/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -681,25 +681,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-quarkus/',
+								link: '/docs/instrumentation/java/opentelemetry-quarkus/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-quarkus/',
+								link: '/docs/instrumentation/java/opentelemetry-quarkus/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-quarkus/',
+								link: '/docs/instrumentation/java/opentelemetry-quarkus/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-quarkus/',
+								link: '/docs/instrumentation/java/opentelemetry-quarkus/',
 							},
 						],
 					},
@@ -708,7 +708,7 @@ const onboardingConfigWithLinks = [
 					key: 'Others',
 					label: 'Others',
 					imgUrl: javaOthersUrl,
-					link: '/docs/instrumentation/opentelemetry-java/',
+					link: '/docs/instrumentation/java/opentelemetry-java/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -718,25 +718,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-java/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-java/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-java/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-java/',
+								link: '/docs/instrumentation/java/opentelemetry-java/',
 							},
 						],
 					},
@@ -872,7 +872,7 @@ const onboardingConfigWithLinks = [
 					key: 'nodejs-nestjs',
 					label: 'NodeJs/NestJS',
 					imgUrl: nodejsUrl,
-					link: '/docs/instrumentation/opentelemetry-javascript/',
+					link: '/docs/instrumentation/javascript/opentelemetry-nodejs/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -882,25 +882,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-javascript/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nodejs/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-javascript/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nodejs/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-javascript/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nodejs/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-javascript/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nodejs/',
 							},
 						],
 					},
@@ -909,7 +909,7 @@ const onboardingConfigWithLinks = [
 					key: 'nextjs',
 					label: 'NextJS',
 					imgUrl: nextjsUrl,
-					link: '/docs/instrumentation/opentelemetry-nextjs/',
+					link: '/docs/instrumentation/javascript/opentelemetry-nextjs/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -919,25 +919,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-nextjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nextjs/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-nextjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nextjs/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-nextjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nextjs/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-nextjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nextjs/',
 							},
 						],
 					},
@@ -946,7 +946,7 @@ const onboardingConfigWithLinks = [
 					key: 'nuxtjs',
 					label: 'NuxtJS',
 					imgUrl: nuxtjsUrl,
-					link: '/docs/instrumentation/opentelemetry-nuxtjs/',
+					link: '/docs/instrumentation/javascript/opentelemetry-nuxtjs/',
 					question: {
 						desc: 'What is your Environment?',
 						type: 'select',
@@ -956,25 +956,25 @@ const onboardingConfigWithLinks = [
 								key: 'vm',
 								label: 'VM',
 								imgUrl: vmUrl,
-								link: '/docs/instrumentation/opentelemetry-nuxtjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nuxtjs/',
 							},
 							{
 								key: 'k8s',
 								label: 'Kubernetes',
 								imgUrl: kubernetesUrl,
-								link: '/docs/instrumentation/opentelemetry-nuxtjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nuxtjs/',
 							},
 							{
 								key: 'docker',
 								label: 'Docker',
 								imgUrl: dockerUrl,
-								link: '/docs/instrumentation/opentelemetry-nuxtjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nuxtjs/',
 							},
 							{
 								key: 'windows',
 								label: 'Windows',
 								imgUrl: windowsUrl,
-								link: '/docs/instrumentation/opentelemetry-nuxtjs/',
+								link: '/docs/instrumentation/javascript/opentelemetry-nuxtjs/',
 							},
 						],
 					},
@@ -983,7 +983,7 @@ const onboardingConfigWithLinks = [
 					key: 'react-native',
 					label: 'React Native',
 					imgUrl: reactjsUrl,
-					link: '/docs/instrumentation/opentelemetry-react-native/',
+					link: '/docs/instrumentation/javascript/opentelemetry-react-native/',
 				},
 			],
 		},
@@ -1298,7 +1298,7 @@ const onboardingConfigWithLinks = [
 			'resque',
 		],
 		id: 'ruby',
-		link: '/docs/instrumentation/opentelemetry-ruby-on-rails/',
+		link: '/docs/instrumentation/opentelemetry-ruby/',
 		question: {
 			desc: 'What is your Environment?',
 			type: 'select',
@@ -1308,25 +1308,25 @@ const onboardingConfigWithLinks = [
 					key: 'vm',
 					label: 'VM',
 					imgUrl: vmUrl,
-					link: '/docs/instrumentation/opentelemetry-ruby-on-rails/',
+					link: '/docs/instrumentation/opentelemetry-ruby/',
 				},
 				{
 					key: 'k8s',
 					label: 'Kubernetes',
 					imgUrl: kubernetesUrl,
-					link: '/docs/instrumentation/opentelemetry-ruby-on-rails/',
+					link: '/docs/instrumentation/opentelemetry-ruby/',
 				},
 				{
 					key: 'docker',
 					label: 'Docker',
 					imgUrl: dockerUrl,
-					link: '/docs/instrumentation/opentelemetry-ruby-on-rails/',
+					link: '/docs/instrumentation/opentelemetry-ruby/',
 				},
 				{
 					key: 'windows',
 					label: 'Windows',
 					imgUrl: windowsUrl,
-					link: '/docs/instrumentation/opentelemetry-ruby-on-rails/',
+					link: '/docs/instrumentation/opentelemetry-ruby/',
 				},
 			],
 		},
@@ -2292,7 +2292,7 @@ const onboardingConfigWithLinks = [
 			'python structured logging',
 			'python-logs-auto-instrumentation',
 		],
-		link: '/docs/userguide/python-logs-auto-instrumentation/',
+		link: '/docs/logs-management/send-logs/python-logs/',
 	},
 	{
 		dataSource: 'otel-java-sdk',
@@ -2323,7 +2323,7 @@ const onboardingConfigWithLinks = [
 			'Logback',
 			'log4j',
 		],
-		link: '/docs/userguide/collecting_application_logs_otel_sdk_java/',
+		link: '/docs/logs-management/send-logs/java-logs/',
 	},
 	{
 		dataSource: 'nodejs-logs',
@@ -2463,7 +2463,7 @@ const onboardingConfigWithLinks = [
 			'linux',
 		],
 		imgUrl: hostmetricsUrl,
-		link: '/docs/userguide/hostmetrics/',
+		link: '/docs/infrastructure-monitoring/user-guides/hostmetrics/',
 	},
 	{
 		dataSource: 'k8s-metrics',
@@ -2495,7 +2495,7 @@ const onboardingConfigWithLinks = [
 			'telemetry',
 		],
 		imgUrl: kubernetesUrl,
-		link: '/docs/userguide/k8s-metrics/',
+		link: '/docs/infrastructure-monitoring/user-guides/k8s-metrics/',
 	},
 	{
 		dataSource: 'docker-container-metrics',
@@ -2583,7 +2583,7 @@ const onboardingConfigWithLinks = [
 								key: 'aws-ec2-metrics-manual',
 								label: 'Manual Setup',
 								imgUrl: ec2Url,
-								link: '/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/',
+								link: '/docs/opentelemetry-collection-agents/vm/install/',
 							},
 						],
 					},
@@ -2772,7 +2772,7 @@ const onboardingConfigWithLinks = [
 			'vpc-logs',
 		],
 		imgUrl: vpcUrl,
-		link: '/docs/aws-monitoring/vpc-logs/',
+		link: '/docs/aws-monitoring/vpc/',
 	},
 	{
 		dataSource: 'aws-rds',
@@ -3837,7 +3837,7 @@ const onboardingConfigWithLinks = [
 			'traces',
 			'tracing',
 		],
-		link: '/docs/llm/opentelemetry-openai-monitoring/',
+		link: '/docs/openai-monitoring/',
 	},
 	{
 		dataSource: 'codex-monitoring',
@@ -4779,7 +4779,7 @@ const onboardingConfigWithLinks = [
 		link: '/docs/instrumentation/mobile-instrumentation/opentelemetry-flutter/',
 	},
 	{
-		dataSource: 'swift',
+		dataSource: 'ios-swift',
 		label: 'iOS Swift',
 		imgUrl: swiftMonitoringUrl,
 		tags: ['mobile app monitoring'],
@@ -4808,6 +4808,7 @@ const onboardingConfigWithLinks = [
 			'traces',
 			'tracing',
 		],
+		id: 'ios-swift',
 		link: '/docs/instrumentation/mobile-instrumentation/opentelemetry-swiftui/',
 	},
 	{
@@ -5473,7 +5474,7 @@ const onboardingConfigWithLinks = [
 			'telemetry',
 		],
 		id: 'hasura',
-		link: '/docs/integrations/opentelemetry-hasura/',
+		link: '/docs/integrations/outposts/hasura/',
 	},
 	{
 		dataSource: 'opencode-observability',
@@ -5935,7 +5936,7 @@ const onboardingConfigWithLinks = [
 			'metrics',
 			'monitoring',
 		],
-		link: '/docs/integrations/flyio/',
+		link: '/docs/integrations/outposts/flyio/',
 	},
 	{
 		dataSource: 'envoy',
@@ -6513,7 +6514,7 @@ const onboardingConfigWithLinks = [
 			'tracing',
 		],
 		id: 'openclaw-observability',
-		link: '/docs/openclaw-monitoring/',
+		link: '/docs/openclaw-observability/',
 	},
 	{
 		dataSource: 'claude-agent-monitoring',
@@ -6555,7 +6556,7 @@ const onboardingConfigWithLinks = [
 			'render monitoring',
 		],
 		id: 'render-metrics',
-		link: '/docs/metrics-management/render-metrics/',
+		link: '/docs/integrations/outposts/render/',
 	},
 	{
 		dataSource: 'cert-manager',
@@ -6579,7 +6580,7 @@ const onboardingConfigWithLinks = [
 			'tls',
 		],
 		id: 'cert-manager',
-		link: '/docs/infrastructure-monitoring/cert-manager/',
+		link: '/docs/infrastructure-monitoring/user-guides/cert-manager/',
 	},
 	{
 		dataSource: 'pgbouncer',

frontend/src/container/WidgetCard/Panels/BarPanel/__tests__/utils.test.ts

@@ -1,3 +1,4 @@
+import type { ExtendedSeries } from 'lib/uPlotV2/config/types';
 import { Widgets } from 'types/api/widgets/widget';
 import {
 	MetricRangePayloadProps,
@@ -164,6 +165,27 @@ describe('BarPanel utils', () => {
 			expect(config.series).toHaveLength(3);
 		});
 
+		it('passes partial timestamps to the series', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [
+						[1000, '1'],
+						[1060, '0.2'],
+					],
+					partialTimestamps: [1060],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+
+			const series = prepareBarPanelConfig({
+				...baseParams,
+				apiResponse,
+			}).getConfig().series?.[1] as ExtendedSeries;
+
+			expect(series.partialTimestamps).toStrictEqual(new Set([1060]));
+		});
+
 		it('uses getLegend for label when currentQuery is provided', () => {
 			const apiResponse = createApiResponse([
 				{

frontend/src/container/WidgetCard/Panels/BarPanel/utils.ts

@@ -89,6 +89,9 @@ export function prepareBarPanelConfig({
 			isDarkMode,
 			stepInterval: currentStepInterval,
 			metric: series.metric,
+			partialTimestamps: series.partialTimestamps
+				? new Set(series.partialTimestamps)
+				: undefined,
 		});
 	});
 

frontend/src/container/WidgetCard/Panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -5,6 +5,7 @@ import {
 } from 'types/api/metrics/getQueryRange';
 import { Query } from 'types/api/queryBuilder/queryBuilderData';
 
+import type { ExtendedSeries } from 'lib/uPlotV2/config/types';
 import { PanelMode } from 'lib/visualization/panels/types';
 import { prepareUPlotConfig } from 'container/WidgetCard/Panels/TimeSeriesPanel/utils';
 import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
@@ -185,6 +186,28 @@ describe('TimeSeriesPanel utils', () => {
 			});
 		});
 
+		it('passes partial timestamps to the series', () => {
+			const apiResponse = createApiResponse([
+				{
+					metric: {},
+					queryName: 'Q1',
+					values: [
+						[1000, '1'],
+						[1060, '0.2'],
+					],
+					partialTimestamps: [1060],
+				} as MetricRangePayloadProps['data']['result'][0],
+			]);
+
+			const series = prepareUPlotConfig({
+				...baseParams,
+				apiResponse,
+				currentQuery: null as unknown as Query,
+			}).getConfig().series?.[1] as ExtendedSeries;
+
+			expect(series.partialTimestamps).toStrictEqual(new Set([1060]));
+		});
+
 		it('uses getLegend for label when currentQuery is provided', () => {
 			const apiResponse = createApiResponse([
 				{

frontend/src/container/WidgetCard/Panels/TimeSeriesPanel/utils.ts

@@ -101,6 +101,9 @@ export const prepareUPlotConfig = ({
 			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
 			metric: series.metric,
+			partialTimestamps: series.partialTimestamps
+				? new Set(series.partialTimestamps)
+				: undefined,
 		});
 	});
 

frontend/src/lib/newQueryBuilder/__test__/convertNewDataToOld.test.ts

@@ -0,0 +1,42 @@
+import { MetricRangePayloadV3 } from 'types/api/metrics/getQueryRange';
+
+import { convertNewDataToOld } from '../convertNewDataToOld';
+
+describe('convertNewDataToOld', () => {
+	it('carries partial values as epoch-second partialTimestamps', () => {
+		const payload = {
+			data: {
+				resultType: 'time_series',
+				result: [
+					{
+						queryName: 'A',
+						series: [
+							{
+								labels: {},
+								labelsArray: [],
+								values: [
+									{ timestamp: 1_000_000, value: '1' },
+									{ timestamp: 1_060_000, value: '0.2', partial: true },
+								],
+							},
+							{
+								labels: {},
+								labelsArray: [],
+								values: [{ timestamp: 1_000_000, value: '1' }],
+							},
+						],
+					},
+				],
+			},
+		} as unknown as MetricRangePayloadV3;
+
+		const [partial, complete] = convertNewDataToOld(payload).data.result;
+
+		expect(partial.values).toStrictEqual([
+			[1000, '1'],
+			[1060, '0.2'],
+		]);
+		expect(partial.partialTimestamps).toStrictEqual([1060]);
+		expect(complete).not.toHaveProperty('partialTimestamps');
+	});
+});

frontend/src/lib/newQueryBuilder/convertNewDataToOld.ts

@@ -25,11 +25,16 @@ export const convertNewDataToOld = (
 					return [...acc, renderValues];
 				}, []);
 
+				const partialTimestamps = series.values
+					.filter((value) => value.partial)
+					.map((value) => value.timestamp / 1000);
+
 				const result: QueryData = {
 					metric: series.labels,
 					values,
 					queryName: `${item.queryName}`,
 					metaData: series.metaData,
+					...(partialTimestamps.length ? { partialTimestamps } : {}),
 				};
 
 				oldResult.push(result);

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

@@ -1,98 +0,0 @@
-// Sections own the padding so the footer spans edge to edge.
-.container {
-	font-family: 'Inter';
-	font-size: 12px;
-	background: var(--l2-background);
-	-webkit-font-smoothing: antialiased;
-	color: var(--l2-foreground);
-	border-radius: 6px;
-	border: 1px solid var(--l2-border);
-	display: flex;
-	flex-direction: column;
-	min-width: 200px;
-
-	&.pinned {
-		border-color: var(--ring);
-	}
-}
-
-.divider {
-	display: block;
-	width: 100%;
-	height: 1px;
-	background-color: var(--l2-border);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-// Matches the legend row's marker.
-.marker {
-	width: 10px;
-	height: 10px;
-	border-radius: var(--radius);
-	flex-shrink: 0;
-}
-
-.title {
-	flex: 1;
-	min-width: 0;
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-weight: 600;
-	color: var(--text-vanilla-100);
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.status {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-1);
-	font-size: 11px;
-	color: var(--text-vanilla-400);
-	flex-shrink: 0;
-}
-
-.rows {
-	display: flex;
-	flex-direction: column;
-	gap: var(--spacing-1);
-	padding: var(--spacing-3) var(--spacing-4);
-}
-
-.row {
-	display: flex;
-	align-items: baseline;
-	justify-content: space-between;
-	gap: var(--spacing-4);
-	font-family: var(--font-mono);
-	font-size: var(--font-size-xs);
-	font-variant-numeric: tabular-nums;
-	color: var(--text-vanilla-100);
-}
-
-.rowMuted {
-	color: var(--text-vanilla-400);
-}
-
-.rowLabel {
-	flex: 1;
-	min-width: 0;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.rowValue {
-	flex: 0 0 auto;
-	max-width: 60%;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}

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

@@ -1,107 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import { Pin } from '@signozhq/icons';
-
-import { ScatterTooltipProps } from '../types';
-import { buildChannelRows, resolveHoveredPoint } from './scatterTooltipContent';
-
-import Styles from './ScatterTooltip.module.scss';
-
-/** Own component: the shared Tooltip lists one row per series at a shared x. */
-export default function ScatterTooltip({
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	channels,
-	resolvePointLabels,
-	decimalPrecision,
-	isPinned,
-	dismiss,
-	renderTooltipFooter,
-}: ScatterTooltipProps): JSX.Element | null {
-	const point = useMemo(
-		() => resolveHoveredPoint(uPlotInstance, seriesIndex, dataIndexes),
-		[uPlotInstance, seriesIndex, dataIndexes],
-	);
-
-	const rows = useMemo(
-		() => (point ? buildChannelRows(point, channels, decimalPrecision) : []),
-		[point, channels, decimalPrecision],
-	);
-
-	const labels = useMemo(
-		() =>
-			point
-				? (resolvePointLabels?.(point.seriesIndex, point.dataIndex) ?? [])
-				: [],
-		[point, resolvePointLabels],
-	);
-
-	if (!point) {
-		return null;
-	}
-
-	return (
-		<div
-			className={cx(Styles.container, { [Styles.pinned]: isPinned })}
-			data-pinned={isPinned}
-			data-testid="scatter-tooltip"
-		>
-			<div className={Styles.header}>
-				<span className={Styles.marker} style={{ backgroundColor: point.color }} />
-				<span
-					className={Styles.title}
-					title={point.label}
-					data-testid="scatter-tooltip-title"
-				>
-					{point.label}
-				</span>
-				{isPinned && (
-					<span className={Styles.status} data-testid="scatter-tooltip-status">
-						<Pin size={12} />
-						<span>Pinned</span>
-					</span>
-				)}
-			</div>
-
-			<span className={Styles.divider} />
-
-			<div className={Styles.rows}>
-				{rows.map((row) => (
-					<div
-						key={row.label}
-						className={Styles.row}
-						data-testid="scatter-tooltip-row"
-					>
-						<span className={Styles.rowLabel}>{row.label}</span>
-						<span className={Styles.rowValue}>{row.value}</span>
-					</div>
-				))}
-			</div>
-
-			{labels.length > 0 && (
-				<>
-					<span className={Styles.divider} />
-					<div className={Styles.rows}>
-						{labels.map((label) => (
-							<div
-								key={label.key}
-								className={cx(Styles.row, Styles.rowMuted)}
-								data-testid="scatter-tooltip-label"
-							>
-								<span className={Styles.rowLabel} title={label.key}>
-									{label.key}
-								</span>
-								<span className={Styles.rowValue} title={label.value}>
-									{label.value}
-								</span>
-							</div>
-						))}
-					</div>
-				</>
-			)}
-
-			{renderTooltipFooter?.({ isPinned, dismiss })}
-		</div>
-	);
-}

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

@@ -122,6 +122,27 @@ describe('Tooltip', () => {
 		expect(screen.getByText(expectedTitle)).toBeInTheDocument();
 	});
 
+	it('marks the header partial when a visible series has a partial bucket at the cursor', () => {
+		const withSeries = (series: unknown[]): uPlot =>
+			Object.assign(createUPlotInstance(0), { series });
+		const partial = { show: true, partialTimestamps: new Set([1]) };
+
+		const { unmount } = renderTooltip({
+			uPlotInstance: withSeries([{}, partial]),
+		});
+		expect(screen.getByTestId('uplot-tooltip-header-partial')).toHaveTextContent(
+			'(partial)',
+		);
+		unmount();
+
+		renderTooltip({
+			uPlotInstance: withSeries([{}, { ...partial, show: false }]),
+		});
+		expect(
+			screen.queryByTestId('uplot-tooltip-header-partial'),
+		).not.toBeInTheDocument();
+	});
+
 	it('drops the date from the header title for a point on the current day', () => {
 		const todayTimestamp = dayjs().tz('UTC').startOf('hour').unix();
 		const uPlotInstance = createUPlotInstance(0, todayTimestamp);

frontend/src/lib/uPlotV2/components/Tooltip/__tests__/scatterTooltipContent.test.ts

@@ -1,94 +0,0 @@
-import type uPlot from 'uplot';
-
-import {
-	buildChannelRows,
-	resolveHoveredPoint,
-	ScatterHoveredPoint,
-} from '../scatterTooltipContent';
-
-jest.mock('components/Graph/yAxisConfig', () => ({
-	getToolTipValue: jest.fn((value: number | string, unit?: string) =>
-		`${value} ${unit ?? ''}`.trim(),
-	),
-}));
-
-const plot = {
-	data: [
-		null,
-		[
-			[10, 20],
-			[100, 200],
-			[5, null],
-		],
-		[[30], [300]],
-	],
-	series: [
-		{},
-		{ label: 'cart', stroke: '#ff0000' },
-		{ label: 'checkout', stroke: (): string => '#00ff00' },
-	],
-} as unknown as uPlot;
-
-describe('resolveHoveredPoint', () => {
-	it('reads the focused series at its own data index', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 1, null])).toStrictEqual({
-			seriesIndex: 1,
-			dataIndex: 1,
-			label: 'cart',
-			color: '#ff0000',
-			x: 20,
-			y: 200,
-			size: null,
-		});
-	});
-
-	it('carries the size column when present and resolves function strokes', () => {
-		expect(resolveHoveredPoint(plot, 1, [null, 0, null])?.size).toBe(5);
-		expect(resolveHoveredPoint(plot, 2, [null, null, 0])).toMatchObject({
-			label: 'checkout',
-			color: '#00ff00',
-			size: null,
-		});
-	});
-
-	it('is null without a focused series or an index for it', () => {
-		expect(resolveHoveredPoint(plot, null, [null, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 0, [0, 0, null])).toBeNull();
-		expect(resolveHoveredPoint(plot, 1, [null, null, null])).toBeNull();
-	});
-});
-
-describe('buildChannelRows', () => {
-	const point: ScatterHoveredPoint = {
-		seriesIndex: 1,
-		dataIndex: 0,
-		label: 'cart',
-		color: '#f00',
-		x: 12,
-		y: 340,
-		size: 7,
-	};
-
-	it('formats x and y with their own units', () => {
-		const rows = buildChannelRows(point, {
-			x: { label: 'Throughput', unit: 'reqps' },
-			y: { label: 'p99', unit: 'ms' },
-		});
-
-		expect(rows).toStrictEqual([
-			{ label: 'Throughput', value: '12 reqps' },
-			{ label: 'p99', value: '340 ms' },
-		]);
-	});
-
-	it('adds the size row only when the channel is mapped and the point has one', () => {
-		const channels = {
-			x: { label: 'x' },
-			y: { label: 'y' },
-			size: { label: 'Errors' },
-		};
-
-		expect(buildChannelRows(point, channels)).toHaveLength(3);
-		expect(buildChannelRows({ ...point, size: null }, channels)).toHaveLength(2);
-	});
-});

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

@@ -13,6 +13,17 @@
 	gap: var(--spacing-2);
 }
 
+.headerEnd {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-2);
+}
+
+.partialLabel {
+	font-style: italic;
+	opacity: 0.7;
+}
+
 .pinnedItem {
 	padding: var(--spacing-4);
 }

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

@@ -5,6 +5,7 @@ import { useTimezone } from 'providers/Timezone';
 import type uPlot from 'uplot';
 import { formatTimestampOmittingTodaysDate } from 'utils/timeUtils';
 
+import type { ExtendedSeries } from '../../../../config/types';
 import { TooltipContentItem } from '../../../types';
 import TooltipItem from '../TooltipItem/TooltipItem';
 import TooltipPinnedBadge from '../TooltipPinnedBadge/TooltipPinnedBadge';
@@ -34,7 +35,7 @@ export default function TooltipHeader({
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
 
-	const headerTitle = useMemo(() => {
+	const header = useMemo(() => {
 		if (!showTooltipHeader) {
 			return null;
 		}
@@ -46,14 +47,21 @@ export default function TooltipHeader({
 		if (timestamp == null) {
 			return null;
 		}
-		return formatTimestampOmittingTodaysDate(
-			timestamp * 1000,
-			resolvedTimezone,
-			dateFormat,
-		);
+		return {
+			title: formatTimestampOmittingTodaysDate(
+				timestamp * 1000,
+				resolvedTimezone,
+				dateFormat,
+			),
+			isPartial: (uPlotInstance.series ?? []).some(
+				(series: ExtendedSeries) =>
+					series.show && series.partialTimestamps?.has(timestamp),
+			),
+		};
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
+		uPlotInstance.series,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
 		dateFormat,
@@ -64,10 +72,22 @@ export default function TooltipHeader({
 			className={Styles.headerContainer}
 			data-testid="uplot-tooltip-header-container"
 		>
-			{showTooltipHeader && headerTitle && (
+			{showTooltipHeader && header && (
 				<div className={cx(Styles.headerRow, headerRowClassName)}>
-					<span>{headerTitle}</span>
-					{isPinned && <TooltipPinnedBadge />}
+					<span>{header.title}</span>
+					{(header.isPartial || isPinned) && (
+						<span className={Styles.headerEnd}>
+							{header.isPartial && (
+								<span
+									className={Styles.partialLabel}
+									data-testid="uplot-tooltip-header-partial"
+								>
+									(partial)
+								</span>
+							)}
+							{isPinned && <TooltipPinnedBadge />}
+						</span>
+					)}
 				</div>
 			)}
 

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

@@ -1,89 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import type uPlot from 'uplot';
-
-import type {
-	ScatterChannel,
-	ScatterChannels,
-	ScatterSeriesData,
-} from '../../plugins/ScatterPlugin/types';
-import { resolveSeriesColor } from './utils';
-
-export interface ScatterHoveredPoint {
-	seriesIndex: number;
-	dataIndex: number;
-	label: string;
-	color: string;
-	x: number;
-	y: number;
-	size: number | null;
-}
-
-export interface ScatterTooltipRow {
-	label: string;
-	value: string;
-}
-
-export function resolveHoveredPoint(
-	u: uPlot,
-	seriesIndex: number | null,
-	dataIndexes: Array<number | null>,
-): ScatterHoveredPoint | null {
-	if (seriesIndex == null || seriesIndex < 1) {
-		return null;
-	}
-	const dataIndex = dataIndexes[seriesIndex];
-	const series = u.series[seriesIndex];
-	const columns = u.data[seriesIndex] as unknown as
-		| ScatterSeriesData
-		| undefined;
-	if (dataIndex == null || !series || !columns) {
-		return null;
-	}
-	const x = columns[0][dataIndex];
-	const y = columns[1][dataIndex];
-	if (x == null || y == null) {
-		return null;
-	}
-	return {
-		seriesIndex,
-		dataIndex,
-		label: String(series.label ?? ''),
-		color: resolveSeriesColor(series.stroke, u, seriesIndex),
-		x,
-		y,
-		size: columns[2]?.[dataIndex] ?? null,
-	};
-}
-
-function formatChannel(
-	value: number,
-	channel: ScatterChannel,
-	decimalPrecision?: PrecisionOption,
-): string {
-	return getToolTipValue(value, channel.unit, decimalPrecision);
-}
-
-export function buildChannelRows(
-	point: ScatterHoveredPoint,
-	channels: ScatterChannels,
-	decimalPrecision?: PrecisionOption,
-): ScatterTooltipRow[] {
-	const rows: ScatterTooltipRow[] = [
-		{
-			label: channels.x.label,
-			value: formatChannel(point.x, channels.x, decimalPrecision),
-		},
-		{
-			label: channels.y.label,
-			value: formatChannel(point.y, channels.y, decimalPrecision),
-		},
-	];
-	if (channels.size && point.size != null) {
-		rows.push({
-			label: channels.size.label,
-			value: formatChannel(point.size, channels.size, decimalPrecision),
-		});
-	}
-	return rows;
-}

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

@@ -6,10 +6,6 @@ import uPlot from 'uplot';
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { LegendItem } from '../config/types';
 import { HeatmapSeries, HeatmapYAxis } from '../plugins/HeatmapPlugin/types';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from '../plugins/ScatterPlugin/types';
 import { SyncTooltipFilterMode } from '../plugins/TooltipPlugin/types';
 
 /**
@@ -123,16 +119,6 @@ export interface HeatmapTooltipProps
 	groupColor: string;
 }
 
-export interface ScatterTooltipProps
-	extends BaseTooltipProps, TooltipRenderArgs {
-	channels: ScatterChannels;
-	/** The group values behind a point, e.g. `service.name` → `cart`. */
-	resolvePointLabels?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-}
-
 export type TooltipProps =
 	| TimeSeriesTooltipProps
 	| BarTooltipProps

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

@@ -39,16 +39,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
-	/** Styled like the grid. */
-	private buildBorderConfig(
-		grid: uPlot.Axis.Grid | undefined,
-	): uPlot.Axis.Border | undefined {
-		if (this.props.showBorder === false || !grid || grid.show === false) {
-			return undefined;
-		}
-		return { show: true, stroke: grid.stroke, width: grid.width };
-	}
-
 	/**
 	 * Build ticks configuration
 	 */
@@ -67,43 +57,33 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		};
 	}
 
-	/** Time ticks, or unit-formatted values when a unit/precision is set. */
+	/**
+	 * Build values formatter for X-axis (time)
+	 */
 	private buildXAxisValuesFormatter(): uPlot.Axis.Values | undefined {
-		const { isTimeAxis, yAxisUnit, decimalPrecision } = this.props;
+		const { isTimeAxis } = this.props;
 
 		if (isTimeAxis) {
 			return uPlotXAxisValuesFormat as uPlot.Axis.Values;
 		}
 
-		if (yAxisUnit !== undefined || decimalPrecision !== undefined) {
-			return this.buildValueAxisFormatter();
-		}
-
 		return undefined;
 	}
 
-	/** Blanks splits outside the scale; uPlot's asinh splits always include ±threshold. */
-	private buildValueAxisFormatter(): uPlot.Axis.Values {
-		const { yAxisUnit, decimalPrecision, scaleKey } = this.props;
+	/**
+	 * Build values formatter for Y-axis (values with units)
+	 */
+	private buildYAxisValuesFormatter(): uPlot.Axis.Values {
+		const { yAxisUnit, decimalPrecision } = this.props;
 
-		return (u, t): string[] => {
-			const scale = u?.scales?.[scaleKey];
-			const min = scale?.min ?? -Infinity;
-			const max = scale?.max ?? Infinity;
-			return t.map((v) => {
-				if (
-					v === null ||
-					v === undefined ||
-					Number.isNaN(v) ||
-					v < min ||
-					v > max
-				) {
+		return (_, t): string[] =>
+			t.map((v) => {
+				if (v === null || v === undefined || Number.isNaN(v)) {
 					return '';
 				}
 				const value = getToolTipValue(v.toString(), yAxisUnit, decimalPrecision);
 				return `${value}`;
 			});
-		};
 	}
 
 	/**
@@ -121,7 +101,7 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		return scaleKey === 'x'
 			? this.buildXAxisValuesFormatter()
 			: scaleKey === 'y'
-				? this.buildValueAxisFormatter()
+				? this.buildYAxisValuesFormatter()
 				: undefined;
 	}
 
@@ -169,12 +149,10 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 			side = 2, // bottom by default
 			space,
 			splits,
-			filter,
 			gap = 5, // default gap is 5
 		} = this.props;
 
 		const grid = this.buildGridConfig();
-		const border = this.buildBorderConfig(grid);
 		const ticks = this.buildTicksConfig();
 		const values = this.buildValuesFormatter();
 		const size = this.buildSizeCalculator();
@@ -199,9 +177,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (ticks) {
 			axisConfig.ticks = ticks;
 		}
-		if (border) {
-			axisConfig.border = border;
-		}
 		if (values) {
 			axisConfig.values = values;
 		}
@@ -214,9 +189,6 @@ export class UPlotAxisBuilder extends ConfigBuilder<AxisProps, Axis> {
 		if (space !== undefined) {
 			axisConfig.space = space;
 		}
-		if (filter) {
-			axisConfig.filter = filter;
-		}
 		if (size) {
 			axisConfig.size = size;
 		}

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

@@ -1,5 +1,6 @@
 import { SeriesVisibilityItem } from 'lib/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'lib/visualization/panels/utils/legendVisibilityUtils';
+import { partialPointsDrawHook } from 'lib/uPlotV2/hooks/partialPointsDrawHook';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
 import { resolveSeriesVisibility } from 'lib/uPlotV2/utils/seriesVisibility';
@@ -19,7 +20,6 @@ import {
 	ConfigBuilder,
 	ConfigBuilderProps,
 	LegendItem,
-	PlotMode,
 	SelectionPreferencesSource,
 	StackMode,
 } from './types';
@@ -66,8 +66,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private stackMode: StackMode = StackMode.None;
 
-	private mode: PlotMode = PlotMode.Aligned;
-
 	private cursor: Cursor | undefined;
 
 	private hooks: Hooks.Arrays = {};
@@ -84,6 +82,8 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 
 	private thresholds: Record<string, ThresholdsDrawHookOptions> = {};
 
+	private hasPartialPointsHook = false;
+
 	private tzDate: ((timestamp: number) => Date) | undefined;
 
 	private id: string;
@@ -163,10 +163,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return this.stackMode;
 	}
 
-	setMode(mode: PlotMode): void {
-		this.mode = mode;
-	}
-
 	/**
 	 * Add or merge a scale configuration
 	 */
@@ -184,6 +180,10 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	 */
 	addSeries(props: SeriesProps): void {
 		this.series.push(new UPlotSeriesBuilder(props));
+		if (props.partialTimestamps?.size && !this.hasPartialPointsHook) {
+			this.hasPartialPointsHook = true;
+			this.addHook('draw', partialPointsDrawHook);
+		}
 	}
 
 	getSeriesSpanGapsOptions(): SeriesSpanGapsOption[] {
@@ -519,10 +519,6 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			{} as Record<string, uPlot.Scale>,
 		);
 
-		if (this.mode === PlotMode.Faceted) {
-			config.mode = this.mode as number as uPlot.Mode;
-		}
-
 		config.hooks = this.hooks;
 		config.select = this.select;
 

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

@@ -40,7 +40,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			range,
 			thresholds,
 			logBase = 10,
-			asinhThreshold,
 			padMinBy = 0,
 			padMaxBy = 0.05,
 		} = this.props;
@@ -100,7 +99,6 @@ export class UPlotScaleBuilder extends ConfigBuilder<
 			time,
 			distr,
 			logBase,
-			asinhThreshold,
 		});
 
 		const { rangeConfig, hardMinOnly, hardMaxOnly, hasFixedRange } =

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

@@ -4,6 +4,7 @@ import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import { resolveFillOpacity, toAlphaHex } from '../utils/fillOpacity';
+import { reportBarRect } from '../utils/barRect';
 import { generateGradientFill } from '../utils/generateGradientFill';
 import { isolatedPointFilter } from '../utils/seriesPointsFilter';
 import {
@@ -87,8 +88,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			lineConfig.fill = finalFillColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
 			lineConfig.fill = `${finalFillColor}40`;
-		} else if (this.props.drawStyle === DrawStyle.Scatter) {
-			lineConfig.fill = `${finalFillColor}${toAlphaHex(resolveFillOpacity(fillOpacity))}`;
 		} else if (fillMode && fillMode !== FillMode.None) {
 			const resolvedOpacity = resolveFillOpacity(fillOpacity);
 			if (fillMode === FillMode.Solid) {
@@ -124,7 +123,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			return { paths: pathBuilder };
 		}
 
-		if (drawStyle === DrawStyle.Points || drawStyle === DrawStyle.Scatter) {
+		if (drawStyle === DrawStyle.Points) {
 			return { paths: (): null => null };
 		}
 
@@ -196,10 +195,6 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 		if (drawStyle === DrawStyle.Points) {
 			return true;
 		}
-		// The discs are the series path; uPlot's own points would double-draw them.
-		if (drawStyle === DrawStyle.Scatter) {
-			return false;
-		}
 		return !!showPoints;
 	}
 
@@ -224,7 +219,14 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 	}
 
 	getConfig(): ExtendedSeries {
-		const { scaleKey, label, spanGaps, show = true, metric, facets } = this.props;
+		const {
+			scaleKey,
+			label,
+			spanGaps,
+			show = true,
+			metric,
+			partialTimestamps,
+		} = this.props;
 
 		const resolvedLineColor = this.getLineColor();
 
@@ -252,7 +254,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<
 			...pathConfig,
 			points: Object.keys(pointsConfig).length > 0 ? pointsConfig : undefined,
 			metric,
-			...(facets && { facets }),
+			...(partialTimestamps?.size ? { partialTimestamps } : {}),
 		};
 	}
 }
@@ -365,6 +367,7 @@ function getBarPathBuilder({
 				builders[barsCfgKey] = barsPathBuilderFactory({
 					size: [barWidthFactor, effectiveBarMaxWidth],
 					align: barAlignment,
+					each: reportBarRect,
 				});
 			}
 
@@ -379,6 +382,7 @@ function getBarPathBuilder({
 		builders[barsCfgKey] = barsPathBuilderFactory({
 			size: [barWidthFactor, barMaxWidth],
 			align: barAlignment,
+			each: reportBarRect,
 		});
 	}
 

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

@@ -120,41 +120,6 @@ describe('UPlotAxisBuilder', () => {
 		});
 	});
 
-	it('draws the axis line by default, styled like the grid', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ isDarkMode: true, grid: { width: 0.5 } }),
-		).getConfig();
-
-		expect(config.border).toStrictEqual({
-			show: true,
-			stroke: config.grid?.stroke,
-			width: 0.5,
-		});
-	});
-
-	it('leaves the axis line off when showBorder is false', () => {
-		expect(
-			new UPlotAxisBuilder(createAxisProps({ showBorder: false })).getConfig(),
-		).not.toHaveProperty('border');
-	});
-
-	it('leaves the axis line off when the grid is hidden', () => {
-		expect(
-			new UPlotAxisBuilder(createAxisProps({ grid: { show: false } })).getConfig(),
-		).not.toHaveProperty('border');
-	});
-
-	it('passes explicit splits and a label filter through to uPlot', () => {
-		const splits = jest.fn();
-		const filter = jest.fn();
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ splits, filter }),
-		).getConfig();
-
-		expect(config.splits).toBe(splits);
-		expect(config.filter).toBe(filter);
-	});
-
 	it('uses provided ticks config when present and falls back to defaults otherwise', () => {
 		const customTicks = { width: 1, show: false };
 		const withTicks = new UPlotAxisBuilder(
@@ -411,51 +376,3 @@ describe('UPlotAxisBuilder', () => {
 		expect(config.values).toBeDefined();
 	});
 });
-
-describe('UPlotAxisBuilder value x axis', () => {
-	it('formats a non-time x axis with its unit', () => {
-		(getToolTipValue as jest.Mock).mockReturnValue('1.2K req/s');
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false, yAxisUnit: 'reqps' }),
-		).getConfig();
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			{} as uPlot,
-			[1200],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['1.2K req/s']);
-		expect(getToolTipValue).toHaveBeenCalledWith('1200', 'reqps', undefined);
-	});
-
-	it('leaves a non-time x axis to uPlot when nothing says how to format it', () => {
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'x', isTimeAxis: false }),
-		).getConfig();
-
-		expect(config.values).toBeUndefined();
-	});
-});
-
-describe('UPlotAxisBuilder out-of-range splits', () => {
-	it('leaves a split the scale cannot place unlabelled', () => {
-		(getToolTipValue as jest.Mock).mockImplementation((v: string) => `${v} ms`);
-		const config = new UPlotAxisBuilder(
-			createAxisProps({ scaleKey: 'y', yAxisUnit: 'ms' }),
-		).getConfig();
-		const u = { scales: { y: { min: 0, max: 1000 } } } as unknown as uPlot;
-
-		const values = (config.values as uPlot.Axis.DynamicValues)(
-			u,
-			[-10, 0, 500, 5000],
-			0,
-			0,
-			0,
-		);
-
-		expect(values).toStrictEqual(['', '0 ms', '500 ms', '']);
-	});
-});

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

@@ -5,12 +5,7 @@ import {
 	STEP_INTERVAL_MULTIPLIER,
 } from '../../constants';
 import type { SeriesProps } from '../types';
-import {
-	DrawStyle,
-	PlotMode,
-	SelectionPreferencesSource,
-	StackMode,
-} from '../types';
+import { DrawStyle, SelectionPreferencesSource, StackMode } from '../types';
 import { UPlotConfigBuilder } from '../UPlotConfigBuilder';
 
 // Mock only the real boundary that hits localStorage
@@ -655,15 +650,20 @@ describe('UPlotConfigBuilder stacking', () => {
 
 		expect(builder.getConfig().bands).toStrictEqual([{ series: [1, 3] }]);
 	});
-});
 
-describe('UPlotConfigBuilder plot mode', () => {
-	it('leaves mode unset for aligned data and emits 2 when faceted', () => {
-		const aligned = new UPlotConfigBuilder({ id: 'aligned' });
-		expect(aligned.getConfig().mode).toBeUndefined();
+	it('registers the partial points draw hook once, only for series with partial timestamps', () => {
+		const props: SeriesProps = {
+			scaleKey: 'y',
+			label: 'Requests',
+			colorMapping: {},
+			drawStyle: DrawStyle.Line,
+		};
+		const builder = new UPlotConfigBuilder({ id: 'partial' });
+		builder.addSeries(props);
+		expect(builder.getConfig().hooks?.draw ?? []).toHaveLength(0);
 
-		const faceted = new UPlotConfigBuilder({ id: 'faceted' });
-		faceted.setMode(PlotMode.Faceted);
-		expect(faceted.getConfig().mode).toBe(2);
+		builder.addSeries({ ...props, partialTimestamps: new Set([40]) });
+		builder.addSeries({ ...props, partialTimestamps: new Set([40]) });
+		expect(builder.getConfig().hooks?.draw).toHaveLength(1);
 	});
 });

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

@@ -1,6 +1,7 @@
 import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
+import { reportBarRect } from '../../utils/barRect';
 import { isolatedPointFilter } from '../../utils/seriesPointsFilter';
 import type { SeriesProps } from '../types';
 import { DrawStyle, FillMode, LineInterpolation, LineStyle } from '../types';
@@ -398,40 +399,29 @@ describe('UPlotSeriesBuilder', () => {
 
 		expect(builder.getConfig().fill).toBeUndefined();
 	});
-});
 
-describe('UPlotSeriesBuilder scatter', () => {
-	it('draws through the given path builder and hides uPlot points', () => {
-		const pathBuilder = jest.fn();
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({
-				drawStyle: DrawStyle.Scatter,
-				pathBuilder,
-				facets: [{ scale: 'x' }, { scale: 'y' }],
-				lineColor: '#ff0000',
-				fillOpacity: 0.5,
-				lineWidth: 1,
-				pointSize: 8,
-			}),
-		).getConfig();
-
-		expect(config.paths).toBe(pathBuilder);
-		expect(config.facets).toStrictEqual([{ scale: 'x' }, { scale: 'y' }]);
-		expect(config.points?.show).toBe(false);
-		expect(config.points?.size).toBe(8);
-		expect(config.stroke).toBe('#ff0000');
-		expect(config.width).toBe(1);
-		expect(config.fill).toBe('#ff000080');
-	});
-
-	it('draws nothing without a path builder', () => {
-		const config = new UPlotSeriesBuilder(
-			createBaseProps({ drawStyle: DrawStyle.Scatter }),
-		).getConfig();
+	it('exposes partial timestamps only when there are some', () => {
+		const partialTimestamps = new Set([40]);
 
 		expect(
-			(config.paths as uPlot.Series.PathBuilder)({} as uPlot, 1, 0, 0),
-		).toBeNull();
-		expect(config.facets).toBeUndefined();
+			new UPlotSeriesBuilder(createBaseProps({ partialTimestamps })).getConfig(),
+		).toHaveProperty('partialTimestamps', partialTimestamps);
+		expect(
+			new UPlotSeriesBuilder(
+				createBaseProps({ partialTimestamps: new Set() }),
+			).getConfig(),
+		).not.toHaveProperty('partialTimestamps');
+	});
+
+	it('reports bar rects from bar path builders', () => {
+		const config = new UPlotSeriesBuilder(
+			createBaseProps({ drawStyle: DrawStyle.Bar, barMaxWidth: 321 }),
+		).getConfig();
+
+		config.paths?.({} as uPlot, 1, 0, 1);
+
+		expect(uPlot.paths.bars).toHaveBeenCalledWith(
+			expect.objectContaining({ each: reportBarRect }),
+		);
 	});
 });

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

@@ -78,12 +78,8 @@ export interface AxisProps {
 	};
 	/** Explicit tick formatter, replacing the scale's default (time / unit-formatted). */
 	values?: uPlot.Axis.Values;
-	/** Explicit tick positions, replacing uPlot's per-distribution default. */
+	/** Explicit axis splits, overriding the default tick calculation. */
 	splits?: uPlot.Axis.Splits;
-	/** Which splits get a label, replacing uPlot's per-distribution default. */
-	filter?: uPlot.Axis.Filter;
-	/** Draw the axis line along the plot edge, styled like the grid. Default true. */
-	showBorder?: boolean;
 	/** Pixels between the ticks and their labels; also feeds the y axis width calculation. */
 	gap?: number;
 	/** Explicit axis thickness. Left unset, the y axis sizes itself to its widest label. */
@@ -94,7 +90,7 @@ export interface AxisProps {
 	isDarkMode?: boolean;
 	/** Axis is on a log scale — thins the grid lines to keep dense decades readable. */
 	isLogScale?: boolean;
-	/** Unit the value ticks are formatted in (`spec.formatting.unit`); a non-time x axis reads it too. */
+	/** Unit the y axis ticks are formatted in (`spec.formatting.unit`). */
 	yAxisUnit?: string;
 	/**
 	 * X axis carries timestamps, so its ticks format as dates/times. Declared by the caller
@@ -113,14 +109,6 @@ export interface AxisProps {
 export enum DistributionType {
 	Linear = 'linear',
 	Logarithmic = 'logarithmic',
-	/** arcsinh: linear within ±`asinhThreshold`, log beyond; places zero and negatives. */
-	SymmetricLog = 'symlog',
-}
-
-/** uPlot's data layout: one shared x per chart, or per-series x/y columns. */
-export enum PlotMode {
-	Aligned = 1,
-	Faceted = 2,
 }
 
 export interface ScaleProps {
@@ -137,8 +125,6 @@ export interface ScaleProps {
 	auto?: boolean;
 	logBase?: uPlot.Scale.LogBase;
 	distribution?: DistributionType;
-	/** Half-width of a `SymmetricLog` scale's linear band around zero. Default 1. */
-	asinhThreshold?: number;
 }
 
 export enum DisconnectedValuesMode {
@@ -160,8 +146,6 @@ export enum DrawStyle {
 	Points = 'points',
 	Bar = 'bar',
 	Histogram = 'histogram',
-	/** Mode 2; drawn by the caller's `pathBuilder`. */
-	Scatter = 'scatter',
 }
 
 export enum LineInterpolation {
@@ -217,6 +201,7 @@ export enum FillMode {
 
 export type ExtendedSeries = Series & {
 	metric?: { [key: string]: string };
+	partialTimestamps?: Set<number>;
 };
 
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
@@ -245,8 +230,8 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	isDarkMode?: boolean;
 	stepInterval?: number;
 	metric?: { [key: string]: string };
-	/** Mode 2 only: the scales the series' own x and y columns are read against. */
-	facets?: Series.Facet[];
+	/** Epoch-second x values whose bucket doesn't cover a full step; marked with a dotted ring. */
+	partialTimestamps?: Set<number>;
 }
 
 export interface LegendItem {

frontend/src/lib/uPlotV2/hooks/__tests__/partialPointsDrawHook.test.ts

@@ -0,0 +1,77 @@
+import uPlot from 'uplot';
+
+import type { ExtendedSeries } from '../../config/types';
+import { reportBarRect } from '../../utils/barRect';
+import { partialPointsDrawHook } from '../partialPointsDrawHook';
+
+function createPlot(
+	series: Partial<ExtendedSeries>,
+	values: (number | null)[] = [1, 2, 3],
+): { u: uPlot; ctx: Record<string, jest.Mock> } {
+	const ctx = {
+		save: jest.fn(),
+		restore: jest.fn(),
+		beginPath: jest.fn(),
+		rect: jest.fn(),
+		clip: jest.fn(),
+		arc: jest.fn(),
+		fill: jest.fn(),
+		stroke: jest.fn(),
+		setLineDash: jest.fn(),
+		strokeRect: jest.fn(),
+	};
+	const xValues = [10, 20, 30];
+	const u = {
+		ctx,
+		bbox: { left: 0, top: 0, width: 100, height: 100 },
+		data: [xValues, values],
+		series: [{}, { show: true, stroke: 'red', points: { size: 4 }, ...series }],
+		valToIdx: (value: number): number => xValues.indexOf(value),
+		valToPos: (value: number): number => value,
+	} as unknown as uPlot;
+	return { u, ctx };
+}
+
+describe('partialPointsDrawHook', () => {
+	it('draws a dot and a dotted ring on each partial point', () => {
+		const { u, ctx } = createPlot({ partialTimestamps: new Set([30]) });
+
+		partialPointsDrawHook(u);
+
+		expect(ctx.arc).toHaveBeenCalledTimes(2);
+		expect(ctx.arc).toHaveBeenCalledWith(30, 3, 2, 0, 2 * Math.PI);
+		expect(ctx.arc).toHaveBeenCalledWith(30, 3, 5, 0, 2 * Math.PI);
+		expect(ctx.setLineDash).toHaveBeenCalledWith([2, 2]);
+		expect(ctx.restore).toHaveBeenCalled();
+	});
+
+	it('skips hidden series, null values and timestamps not in the data', () => {
+		const hidden = createPlot({ show: false, partialTimestamps: new Set([30]) });
+		const missing = createPlot({ partialTimestamps: new Set([30]) }, [
+			1,
+			2,
+			null,
+		]);
+		const unknown = createPlot({ partialTimestamps: new Set([40]) });
+
+		[hidden, missing, unknown].forEach(({ u, ctx }) => {
+			partialPointsDrawHook(u);
+			expect(ctx.arc).not.toHaveBeenCalled();
+		});
+	});
+
+	it('draws a dotted outline around a partial bar', () => {
+		const { u, ctx } = createPlot({
+			partialTimestamps: new Set([30]),
+			paths: (plot, seriesIdx, idx) => {
+				reportBarRect(plot, seriesIdx, idx, 10, 20, 8, 30);
+				return null;
+			},
+		});
+
+		partialPointsDrawHook(u);
+
+		expect(ctx.strokeRect).toHaveBeenCalledWith(7, 17, 14, 36);
+		expect(ctx.arc).not.toHaveBeenCalled();
+	});
+});

frontend/src/lib/uPlotV2/hooks/partialPointsDrawHook.ts

@@ -0,0 +1,89 @@
+import uPlot from 'uplot';
+
+import { ExtendedSeries } from '../config/types';
+import { BarRect, measureBar } from '../utils/barRect';
+
+const DEFAULT_POINT_SIZE = 5;
+const RING_GAP = 3;
+const RING_WIDTH = 1.5;
+const RING_DASH = [2, 2];
+
+function drawRing(
+	u: uPlot,
+	series: ExtendedSeries,
+	idx: number,
+	value: number,
+): void {
+	const { ctx } = u;
+	const { pxRatio } = uPlot;
+	const cx = u.valToPos(u.data[0][idx], 'x', true);
+	const cy = u.valToPos(value, series.scale ?? 'y', true);
+	const radius = ((series.points?.size ?? DEFAULT_POINT_SIZE) / 2) * pxRatio;
+
+	ctx.beginPath();
+	ctx.arc(cx, cy, radius, 0, 2 * Math.PI);
+	ctx.fill();
+
+	ctx.lineWidth = RING_WIDTH * pxRatio;
+	ctx.setLineDash(RING_DASH.map((segment) => segment * pxRatio));
+	ctx.beginPath();
+	ctx.arc(cx, cy, radius + RING_GAP * pxRatio, 0, 2 * Math.PI);
+	ctx.stroke();
+}
+
+function drawBarOutline(u: uPlot, rect: BarRect): void {
+	const gap = RING_GAP * uPlot.pxRatio;
+	u.ctx.lineWidth = RING_WIDTH * uPlot.pxRatio;
+	u.ctx.setLineDash(RING_DASH.map((segment) => segment * uPlot.pxRatio));
+	u.ctx.strokeRect(
+		rect.left - gap,
+		rect.top - gap,
+		rect.width + 2 * gap,
+		rect.height + 2 * gap,
+	);
+}
+
+/**
+ * Marks each series' partial buckets: a dotted outline around bars, a dot and dotted
+ * ring on line and point series.
+ */
+export function partialPointsDrawHook(u: uPlot): void {
+	const { ctx, bbox } = u;
+	const xValues = u.data[0];
+
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(bbox.left, bbox.top, bbox.width, bbox.height);
+	ctx.clip();
+
+	for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx += 1) {
+		const series = u.series[seriesIdx] as ExtendedSeries;
+		if (!series.show || !series.partialTimestamps) {
+			continue;
+		}
+		const color =
+			typeof series.stroke === 'function'
+				? series.stroke(u, seriesIdx)
+				: (series.stroke ?? '');
+		ctx.fillStyle = color;
+		ctx.strokeStyle = color;
+		ctx.globalAlpha = series.alpha ?? 1;
+
+		series.partialTimestamps.forEach((timestamp) => {
+			const idx = u.valToIdx(timestamp);
+			const value = u.data[seriesIdx][idx];
+			if (xValues[idx] !== timestamp || value == null) {
+				return;
+			}
+			ctx.setLineDash([]);
+			const bar = measureBar(u, seriesIdx, idx);
+			if (bar) {
+				drawBarOutline(u, bar);
+			} else {
+				drawRing(u, series, idx, value);
+			}
+		});
+	}
+
+	ctx.restore();
+}

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

@@ -1,114 +0,0 @@
-import type uPlot from 'uplot';
-
-import { Quadtree } from '../../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-} from '../geometry';
-import { ScatterHit, ScatterPointSize } from '../types';
-
-const POINT_SIZE: ScatterPointSize = { fixed: 6, min: 4, max: 20 };
-
-const asData = (columns: unknown[]): uPlot.AlignedData =>
-	columns as unknown as uPlot.AlignedData;
-
-describe('resolveSizeDomain', () => {
-	it('spans the size columns of every series, skipping nulls', () => {
-		const data = asData([
-			null,
-			[
-				[1, 2],
-				[1, 2],
-				[10, null],
-			],
-			[[3], [3], [40]],
-		]);
-
-		expect(resolveSizeDomain(data)).toStrictEqual({ min: 10, max: 40 });
-	});
-
-	it('is null when no series carries sizes', () => {
-		expect(resolveSizeDomain(asData([null, [[1], [1]]]))).toBeNull();
-		expect(resolveSizeDomain(asData([null, [[1], [1], [null]]]))).toBeNull();
-	});
-});
-
-describe('resolvePointDiameter', () => {
-	it('uses the fixed diameter without a size or a domain', () => {
-		expect(resolvePointDiameter(null, { min: 0, max: 10 }, POINT_SIZE)).toBe(6);
-		expect(resolvePointDiameter(5, null, POINT_SIZE)).toBe(6);
-	});
-
-	it('maps the domain ends to min and max', () => {
-		const domain = { min: 0, max: 100 };
-		expect(resolvePointDiameter(0, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(100, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('scales by area, not diameter', () => {
-		const midArea = (4 ** 2 + 20 ** 2) / 2;
-		expect(
-			resolvePointDiameter(50, { min: 0, max: 100 }, POINT_SIZE),
-		).toBeCloseTo(Math.sqrt(midArea));
-	});
-
-	it('clamps values outside the domain', () => {
-		const domain = { min: 10, max: 20 };
-		expect(resolvePointDiameter(-5, domain, POINT_SIZE)).toBe(4);
-		expect(resolvePointDiameter(500, domain, POINT_SIZE)).toBe(20);
-	});
-
-	it('uses the midpoint when every size is the same', () => {
-		expect(resolvePointDiameter(7, { min: 7, max: 7 }, POINT_SIZE)).toBe(12);
-	});
-});
-
-describe('resolveHit', () => {
-	const hit = (
-		seriesIndex: number,
-		dataIndex: number,
-		x: number,
-		y: number,
-		d: number,
-	): ScatterHit => ({ seriesIndex, dataIndex, x, y, w: d, h: d });
-
-	it('returns the disc under the cursor', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-		tree.add(hit(2, 3, 50, 50, 6));
-
-		expect(resolveHit(tree, 13, 13, 0)).toMatchObject({
-			seriesIndex: 1,
-			dataIndex: 0,
-		});
-		expect(resolveHit(tree, 52, 52, 0)).toMatchObject({
-			seriesIndex: 2,
-			dataIndex: 3,
-		});
-	});
-
-	it('is null when the cursor is off every disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 30, 30, 0)).toBeNull();
-	});
-
-	it('tolerance widens each disc', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 6));
-
-		expect(resolveHit(tree, 18, 13, 0)).toBeNull();
-		expect(resolveHit(tree, 18, 13, 3)).not.toBeNull();
-	});
-
-	it('prefers the disc whose centre is nearest when they overlap', () => {
-		const tree = new Quadtree<ScatterHit>(0, 0, 100, 100);
-		tree.add(hit(1, 0, 10, 10, 10));
-		tree.add(hit(1, 1, 14, 10, 10));
-
-		expect(resolveHit(tree, 13, 15, 0)?.dataIndex).toBe(0);
-		expect(resolveHit(tree, 21, 15, 0)?.dataIndex).toBe(1);
-	});
-});

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/__tests__/scatterPlugin.test.ts

@@ -1,286 +0,0 @@
-import uPlot from 'uplot';
-
-import { UPlotConfigBuilder } from '../../../config/UPlotConfigBuilder';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from '../scatterPlugin';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-/** jsdom has no Path2D; the builder only needs something that takes the calls. */
-class FakePath2D {
-	moveTo = jest.fn();
-	arc = jest.fn();
-}
-
-type OrientCallback = Parameters<typeof uPlot.orient>[2];
-
-interface FakePlotArgs {
-	series: Array<{ xs: number[]; ys: number[]; sizes?: Array<number | null> }>;
-	cursor?: { left: number; top: number };
-	scaleX?: { min: number; max: number };
-	scaleY?: { min: number; max: number };
-}
-
-/**
- * A 100×100 plot at the canvas origin with identity scales: value 10 draws at
- * pixel 10 on x, and at 100 − 10 on y (uPlot's y grows downward).
- */
-function createFakePlot({
-	series,
-	cursor = { left: -1, top: -1 },
-	scaleX = { min: 0, max: 100 },
-	scaleY = { min: 0, max: 100 },
-}: FakePlotArgs): uPlot {
-	const data = [
-		null,
-		...series.map((entry) =>
-			entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return {
-		data,
-		series: [{}, ...series.map((_, index) => ({ label: `s${index + 1}` }))],
-		bbox: { left: 0, top: 0, width: 100, height: 100 },
-		cursor,
-		scales: { x: scaleX, y: scaleY },
-	} as unknown as uPlot;
-}
-
-/** Stands in for `uPlot.orient`: identity x, flipped y, an `arc` that records. */
-function orientWithIdentityScales(
-	u: uPlot,
-	seriesIdx: number,
-	cb: OrientCallback,
-): void {
-	const columns = (u.data as unknown as Array<number[][] | null>)[seriesIdx];
-	if (!columns) {
-		return;
-	}
-	const scaleX = (u.scales as unknown as Record<string, uPlot.Scale>).x;
-	const scaleY = (u.scales as unknown as Record<string, uPlot.Scale>).y;
-	const valToPosX = (value: number): number => value;
-	const valToPosY = (value: number): number => 100 - value;
-	// Real uPlot's `arc` helper forwards to the path; the test counts those calls.
-	const arc = (path: FakePath2D, ...args: number[]): void => {
-		path.arc(...args);
-	};
-	cb(
-		u.series[seriesIdx],
-		columns[0],
-		columns[1],
-		scaleX,
-		scaleY,
-		valToPosX as unknown as uPlot.ValToPos,
-		valToPosY as unknown as uPlot.ValToPos,
-		0,
-		0,
-		100,
-		100,
-		jest.fn() as never,
-		jest.fn() as never,
-		jest.fn() as never,
-		arc as never,
-		jest.fn() as never,
-	);
-}
-
-describe('createScatterPlugin', () => {
-	beforeAll(() => {
-		(globalThis as { Path2D?: unknown }).Path2D = FakePath2D;
-	});
-
-	beforeEach(() => {
-		(uPlot.orient as jest.Mock).mockImplementation(orientWithIdentityScales);
-	});
-
-	afterEach(() => {
-		(uPlot.orient as jest.Mock).mockReset();
-	});
-
-	function drawAll(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): void {
-		plugin.hooks.drawClear(u);
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			const columns = (u.data as unknown as number[][][])[seriesIdx];
-			plugin.pathBuilder(u, seriesIdx, 0, columns[0].length - 1);
-		}
-	}
-
-	/** Runs the cursor scan the way uPlot does: every data series, in order. */
-	function scan(
-		u: uPlot,
-		plugin: ReturnType<typeof createScatterPlugin>,
-	): Array<number | null> {
-		const dataIdx = plugin.cursor.dataIdx as NonNullable<uPlot.Cursor['dataIdx']>;
-		const indexes: Array<number | null> = [null];
-		for (let seriesIdx = 1; seriesIdx < u.series.length; seriesIdx++) {
-			indexes.push(dataIdx(u, seriesIdx, 0, 0));
-		}
-		return indexes;
-	}
-
-	it('returns one path that strokes and fills the same discs', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [10, 20], ys: [10, 20] }] });
-		plugin.hooks.drawClear(u);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-
-		expect(paths.stroke).toBeInstanceOf(FakePath2D);
-		expect(paths.fill).toBe(paths.stroke);
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(2);
-	});
-
-	it('resolves the hovered point to its own series and index', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 6, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [
-				{ xs: [10, 50], ys: [10, 50] },
-				{ xs: [80], ys: [80] },
-			],
-			// Over the second series' only point: x 80, y drawn at 100 − 80.
-			cursor: { left: 80, top: 20 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null, 0]);
-		expect(plugin.getHit()).toMatchObject({ seriesIndex: 2, dataIndex: 0 });
-	});
-
-	it('returns null for every series when the cursor is off the plot or off any disc', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: -1, top: -1 },
-		});
-		drawAll(u, plugin);
-
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-
-		(u.cursor as { left: number; top: number }).left = 50;
-		(u.cursor as { left: number; top: number }).top = 50;
-		expect(scan(u, plugin)).toStrictEqual([null, null]);
-	});
-
-	it('skips points outside the visible scale range', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({
-			series: [{ xs: [10, 500], ys: [10, 10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-
-		const paths = plugin.pathBuilder(u, 1, 0, 1) as uPlot.Series.Paths;
-		expect((paths.fill as unknown as FakePath2D).arc).toHaveBeenCalledTimes(1);
-		expect(scan(u, plugin)).toStrictEqual([null, 0]);
-	});
-
-	it('rings the hit disc, in CSS pixels, with a gap around it', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 8, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-		scan(u, plugin);
-
-		const bbox = plugin.cursor.points?.bbox;
-		// The 8px disc spans 6..14; the ring sits 3px out and is 2px wide.
-		expect(bbox?.(u, 1)).toStrictEqual({
-			left: 1,
-			top: 81,
-			width: 18,
-			height: 18,
-		});
-		expect(bbox?.(u, 2)).toMatchObject({ width: 0, height: 0 });
-	});
-
-	it('snaps the ring to whole pixels without moving its centre', () => {
-		const plugin = createScatterPlugin({
-			pointSize: { fixed: 7, min: 4, max: 20 },
-		});
-		const u = createFakePlot({
-			series: [{ xs: [10], ys: [10] }],
-			cursor: { left: 10, top: 90 },
-		});
-		drawAll(u, plugin);
-		scan(u, plugin);
-
-		// The 7px disc starts at 6.5, so the ring's edge would land on 1.5.
-		const ring = plugin.cursor.points?.bbox?.(u, 1);
-		expect(ring).toMatchObject({ left: 1, width: 18 });
-		expect((ring?.left ?? 0) + (ring?.width ?? 0) / 2).toBe(10);
-	});
-
-	it('draws the hover marker as an outline in the series colour', () => {
-		const plugin = createScatterPlugin();
-		const u = {
-			series: [{}, { stroke: (): string => '#E5484D' }, { stroke: '#30A46C' }],
-		} as unknown as uPlot;
-		const points = plugin.cursor.points as {
-			fill: (u: uPlot, seriesIdx: number) => string;
-			stroke: (u: uPlot, seriesIdx: number) => string;
-			width: (u: uPlot, seriesIdx: number, size: number) => number;
-		};
-
-		expect(points.fill(u, 1)).toBe('transparent');
-		expect(points.stroke(u, 1)).toBe('#E5484D');
-		expect(points.stroke(u, 2)).toBe('#30A46C');
-		expect(points.width(u, 1, 0)).toBe(2);
-	});
-
-	it('drawClear drops cached paths on data series only', () => {
-		const plugin = createScatterPlugin();
-		const u = createFakePlot({ series: [{ xs: [1], ys: [1] }] });
-		const [xSeries, dataSeries] = u.series as Array<{ _paths?: unknown }>;
-		xSeries._paths = 'x';
-		dataSeries._paths = 'cached';
-
-		plugin.hooks.drawClear(u);
-
-		expect(xSeries._paths).toBe('x');
-		expect(dataSeries._paths).toBeNull();
-	});
-
-	it('focus distance is zero, so the hit series wins focus', () => {
-		const plugin = createScatterPlugin();
-		expect(plugin.cursor.focus?.dist?.({} as uPlot, 1, 0, 0, 0)).toBe(0);
-	});
-});
-
-describe('applyScatterPlugin', () => {
-	it('switches the builder to faceted mode and disables drag selection', () => {
-		const builder = new UPlotConfigBuilder({ id: 'scatter' });
-		const plugin = createScatterPlugin();
-
-		applyScatterPlugin(builder, plugin);
-		const config = builder.getConfig();
-
-		expect(config.mode).toBe(2);
-		expect(config.cursor?.drag).toMatchObject({
-			x: false,
-			y: false,
-			setScale: false,
-		});
-		expect(config.hooks?.drawClear).toHaveLength(1);
-		expect(config.hooks?.destroy).toHaveLength(1);
-	});
-
-	it('facets read x and y against the shared scales', () => {
-		expect(SCATTER_FACETS).toStrictEqual([
-			{ scale: 'x', auto: true },
-			{ scale: 'y', auto: true },
-		]);
-	});
-});

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

@@ -1,86 +0,0 @@
-import type uPlot from 'uplot';
-
-import type { Quadtree } from '../../utils/quadtree';
-import type { ScatterHit, ScatterPointSize, ScatterSeriesData } from './types';
-
-export interface SizeDomain {
-	min: number;
-	max: number;
-}
-
-/** Size extent across all series, so equal values draw equal discs. */
-export function resolveSizeDomain(data: uPlot.AlignedData): SizeDomain | null {
-	let min = Infinity;
-	let max = -Infinity;
-	for (let seriesIndex = 1; seriesIndex < data.length; seriesIndex++) {
-		const sizes = (data[seriesIndex] as unknown as ScatterSeriesData)[2];
-		if (!sizes) {
-			continue;
-		}
-		for (const size of sizes) {
-			if (size == null || !Number.isFinite(size)) {
-				continue;
-			}
-			min = Math.min(min, size);
-			max = Math.max(max, size);
-		}
-	}
-	return min <= max ? { min, max } : null;
-}
-
-/** Area, not diameter, scales with the value. */
-export function resolvePointDiameter(
-	size: number | null | undefined,
-	domain: SizeDomain | null,
-	pointSize: ScatterPointSize,
-): number {
-	if (size == null || domain == null || !Number.isFinite(size)) {
-		return pointSize.fixed;
-	}
-	if (domain.max === domain.min) {
-		return (pointSize.min + pointSize.max) / 2;
-	}
-	const t = Math.min(
-		1,
-		Math.max(0, (size - domain.min) / (domain.max - domain.min)),
-	);
-	const minArea = pointSize.min ** 2;
-	const maxArea = pointSize.max ** 2;
-	return Math.sqrt(minArea + (maxArea - minArea) * t);
-}
-
-/** Disc whose centre is closest, within `tolerance` px; `null` if none. */
-export function resolveHit(
-	tree: Quadtree<ScatterHit>,
-	cx: number,
-	cy: number,
-	tolerance: number,
-): ScatterHit | null {
-	let best: ScatterHit | null = null;
-	let bestDistance = Infinity;
-
-	tree.get(
-		cx - tolerance,
-		cy - tolerance,
-		tolerance * 2,
-		tolerance * 2,
-		(hit) => {
-			const left = hit.x - tolerance;
-			const top = hit.y - tolerance;
-			const right = hit.x + hit.w + tolerance;
-			const bottom = hit.y + hit.h + tolerance;
-			if (cx < left || cx > right || cy < top || cy > bottom) {
-				return;
-			}
-			const dx = cx - (hit.x + hit.w / 2);
-			const dy = cy - (hit.y + hit.h / 2);
-			const distance = dx * dx + dy * dy;
-			if (distance < bestDistance) {
-				best = hit;
-				bestDistance = distance;
-			}
-		},
-	);
-
-	return best;
-}

frontend/src/lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin.ts

@@ -1,225 +0,0 @@
-import uPlot, { Series } from 'uplot';
-
-import { DEFAULT_FOCUS_PROXIMITY_VALUE } from '../../constants';
-import { PlotMode } from '../../config/types';
-import type { UPlotConfigBuilder } from '../../config/UPlotConfigBuilder';
-import { Quadtree } from '../../utils/quadtree';
-import {
-	resolveHit,
-	resolvePointDiameter,
-	resolveSizeDomain,
-	SizeDomain,
-} from './geometry';
-import {
-	DEFAULT_HOVER_TOLERANCE_PX,
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterHit,
-	ScatterPluginOptions,
-	ScatterSeriesData,
-} from './types';
-
-export const SCATTER_FACETS: Series.Facet[] = [
-	{ scale: 'x', auto: true },
-	{ scale: 'y', auto: true },
-];
-
-const HIDDEN_BBOX: uPlot.BBox = { left: -10, top: -10, width: 0, height: 0 };
-
-const TWO_PI = 2 * Math.PI;
-
-/** CSS pixels between a hovered disc and the outline ring drawn around it. */
-const HOVER_RING_GAP_PX = 3;
-const HOVER_RING_WIDTH_PX = 2;
-
-/** uPlot ceils a cursor point's left/top but not its size; snap so the ring stays centred. */
-function snapToPixel(start: number, length: number): [number, number] {
-	const snapped = Math.floor(start);
-	return [snapped, length + (start - snapped) * 2];
-}
-
-export function getSeriesStroke(u: uPlot, seriesIdx: number): string {
-	const { stroke } = u.series[seriesIdx];
-	const color = typeof stroke === 'function' ? stroke(u, seriesIdx) : stroke;
-	return typeof color === 'string' ? color : '';
-}
-
-/** uPlot caches built paths on the series; the field is internal to it. */
-type SeriesWithPaths = Series & { _paths?: Series.Paths | null };
-
-export interface ScatterPlugin {
-	pathBuilder: Series.PathBuilder;
-	/** Hover by disc rather than by nearest x: mode 2 has no shared x to scan. */
-	cursor: uPlot.Cursor;
-	hooks: {
-		drawClear: (u: uPlot) => void;
-		destroy: (u: uPlot) => void;
-	};
-	getHit: () => ScatterHit | null;
-}
-
-export function createScatterPlugin({
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	hoverTolerance = DEFAULT_HOVER_TOLERANCE_PX,
-}: ScatterPluginOptions = {}): ScatterPlugin {
-	let tree: Quadtree<ScatterHit> | null = null;
-	let hit: ScatterHit | null = null;
-
-	// Spans every series; cached per dataset.
-	let cachedData: uPlot.AlignedData | null = null;
-	let cachedDomain: SizeDomain | null = null;
-
-	function getSizeDomain(u: uPlot): SizeDomain | null {
-		if (cachedData !== u.data) {
-			cachedDomain = resolveSizeDomain(u.data);
-			cachedData = u.data;
-		}
-		return cachedDomain;
-	}
-
-	const pathBuilder: Series.PathBuilder = (u, seriesIdx, idx0, idx1) => {
-		const path = new Path2D();
-		const sizes = (u.data[seriesIdx] as unknown as ScatterSeriesData)[2];
-		const domain = getSizeDomain(u);
-		const { pxRatio } = uPlot;
-
-		uPlot.orient(
-			u,
-			seriesIdx,
-			(
-				_series,
-				dataX,
-				dataY,
-				scaleX,
-				scaleY,
-				valToPosX,
-				valToPosY,
-				xOff,
-				yOff,
-				xDim,
-				yDim,
-				_moveTo,
-				_lineTo,
-				_rect,
-				arc,
-			) => {
-				const xMin = scaleX.min ?? -Infinity;
-				const xMax = scaleX.max ?? Infinity;
-				const yMin = scaleY.min ?? -Infinity;
-				const yMax = scaleY.max ?? Infinity;
-
-				for (let i = idx0; i <= idx1; i++) {
-					const x = dataX[i];
-					const y = dataY[i];
-					if (
-						x == null ||
-						y == null ||
-						x < xMin ||
-						x > xMax ||
-						y < yMin ||
-						y > yMax
-					) {
-						continue;
-					}
-
-					const diameter =
-						resolvePointDiameter(sizes?.[i], domain, pointSize) * pxRatio;
-					const radius = diameter / 2;
-					const cx = valToPosX(x, scaleX, xDim, xOff);
-					const cy = valToPosY(y, scaleY, yDim, yOff);
-
-					path.moveTo(cx + radius, cy);
-					arc(path, cx, cy, radius, 0, TWO_PI);
-
-					tree?.add({
-						x: cx - radius - u.bbox.left,
-						y: cy - radius - u.bbox.top,
-						w: diameter,
-						h: diameter,
-						seriesIndex: seriesIdx,
-						dataIndex: i,
-					});
-				}
-			},
-		);
-
-		return { stroke: path, fill: path, clip: null };
-	};
-
-	const cursor: uPlot.Cursor = {
-		// Selection would set the dashboard time range; neither axis is time here.
-		drag: { x: false, y: false, setScale: false },
-		dataIdx: (u, seriesIdx): number | null => {
-			// uPlot asks series 1..n in order on every cursor move; resolve once.
-			if (seriesIdx === 1) {
-				const { left = -1, top = -1 } = u.cursor;
-				const { pxRatio } = uPlot;
-				hit =
-					tree && left >= 0 && top >= 0
-						? resolveHit(
-								tree,
-								left * pxRatio,
-								top * pxRatio,
-								hoverTolerance * pxRatio,
-							)
-						: null;
-			}
-			return hit?.seriesIndex === seriesIdx ? hit.dataIndex : null;
-		},
-		points: {
-			bbox: (_u, seriesIdx): uPlot.BBox => {
-				if (hit?.seriesIndex !== seriesIdx) {
-					return HIDDEN_BBOX;
-				}
-				const { pxRatio } = uPlot;
-				const inset = HOVER_RING_GAP_PX + HOVER_RING_WIDTH_PX;
-				const [left, width] = snapToPixel(
-					hit.x / pxRatio - inset,
-					hit.w / pxRatio + inset * 2,
-				);
-				const [top, height] = snapToPixel(
-					hit.y / pxRatio - inset,
-					hit.h / pxRatio + inset * 2,
-				);
-				return { left, top, width, height };
-			},
-			fill: (): string => 'transparent',
-			stroke: getSeriesStroke,
-			width: (): number => HOVER_RING_WIDTH_PX,
-		},
-		// uPlot only measures series that returned a data index, i.e. the hit one.
-		focus: { prox: DEFAULT_FOCUS_PROXIMITY_VALUE, dist: (): number => 0 },
-	};
-
-	return {
-		pathBuilder,
-		cursor,
-		hooks: {
-			drawClear: (u: uPlot): void => {
-				tree = new Quadtree<ScatterHit>(0, 0, u.bbox.width, u.bbox.height);
-				// The tree holds only what the path builder drew, so force a rebuild.
-				u.series.forEach((series, index) => {
-					if (index > 0) {
-						(series as SeriesWithPaths)._paths = null;
-					}
-				});
-			},
-			destroy: (): void => {
-				tree = null;
-				hit = null;
-				cachedData = null;
-				cachedDomain = null;
-			},
-		},
-		getHit: (): ScatterHit | null => hit,
-	};
-}
-
-export function applyScatterPlugin(
-	builder: UPlotConfigBuilder,
-	plugin: ScatterPlugin,
-): void {
-	builder.setMode(PlotMode.Faceted);
-	builder.setCursor(plugin.cursor);
-	builder.addHook('drawClear', plugin.hooks.drawClear);
-	builder.addHook('destroy', plugin.hooks.destroy);
-}

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

@@ -1,54 +0,0 @@
-import type { QuadtreeRect } from '../../utils/quadtree';
-
-/** Diameters in CSS pixels. `min`/`max` bound the area scale when a size column is mapped. */
-export interface ScatterPointSize {
-	fixed: number;
-	min: number;
-	max: number;
-}
-
-export const DEFAULT_SCATTER_POINT_SIZE: ScatterPointSize = {
-	fixed: 6,
-	min: 4,
-	max: 24,
-};
-
-/** CSS pixels around a point's disc that still register as a hover. */
-export const DEFAULT_HOVER_TOLERANCE_PX = 3;
-
-export interface ScatterPluginOptions {
-	pointSize?: ScatterPointSize;
-	hoverTolerance?: number;
-}
-
-/** Parallel columns; a `null` size draws at `fixed`. */
-export type ScatterSeriesData = [
-	xs: number[],
-	ys: number[],
-	sizes?: Array<number | null>,
-];
-
-/** Mode-2 data: series 0 is uPlot's x placeholder and carries nothing. */
-export type ScatterChartData = [null, ...ScatterSeriesData[]];
-
-/** A drawn point's disc, in canvas pixels relative to the plot area. */
-export interface ScatterHit extends QuadtreeRect {
-	seriesIndex: number;
-	dataIndex: number;
-}
-
-export interface ScatterChannel {
-	label: string;
-	unit?: string;
-}
-
-export interface ScatterChannels {
-	x: ScatterChannel;
-	y: ScatterChannel;
-	size?: ScatterChannel;
-}
-
-export interface ScatterPointLabel {
-	key: string;
-	value: string;
-}

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

@@ -1,52 +0,0 @@
-import type uPlot from 'uplot';
-
-import { buildClickData } from '../utils';
-
-jest.mock('lib/uPlotLib/plugins/onClickPlugin', () => ({
-	getFocusedSeriesAtPosition: jest.fn(() => ({ seriesIndex: 1 })),
-}));
-
-const event = {
-	offsetX: 10,
-	offsetY: 20,
-	clientX: 110,
-	clientY: 220,
-} as MouseEvent;
-
-describe('buildClickData', () => {
-	it('skips the x-index lookups on a faceted plot, which has no shared x series', () => {
-		const posToIdx = jest.fn(() => {
-			throw new Error('faceted data[0] is null');
-		});
-		const plot = {
-			data: [null],
-			posToVal: (pos: number): number => pos * 2,
-			posToIdx,
-		} as unknown as uPlot;
-
-		expect(buildClickData(event, plot)).toStrictEqual({
-			xValue: 20,
-			yValue: 40,
-			focusedSeries: null,
-			clickedDataTimestamp: 20,
-			mouseX: 10,
-			mouseY: 20,
-			absoluteMouseX: 110,
-			absoluteMouseY: 220,
-		});
-		expect(posToIdx).not.toHaveBeenCalled();
-	});
-
-	it('resolves the focused series and clicked timestamp on an aligned plot', () => {
-		const plot = {
-			data: [[100, 200, 300]],
-			posToVal: (pos: number): number => pos,
-			posToIdx: (): number => 1,
-		} as unknown as uPlot;
-
-		expect(buildClickData(event, plot)).toMatchObject({
-			focusedSeries: { seriesIndex: 1 },
-			clickedDataTimestamp: 200,
-		});
-	});
-});

frontend/src/lib/uPlotV2/plugins/TooltipPlugin/utils.ts

@@ -174,24 +174,6 @@ export function createLayoutObserver(
 export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 	const xValue = plot.posToVal(event.offsetX, 'x');
 	const yValue = plot.posToVal(event.offsetY, 'y');
-	const pointer = {
-		mouseX: event.offsetX,
-		mouseY: event.offsetY,
-		absoluteMouseX: event.clientX,
-		absoluteMouseY: event.clientY,
-	};
-
-	// Faceted (scatter): no shared x, so `posToIdx` would throw.
-	if (plot.data[0] == null) {
-		return {
-			xValue,
-			yValue,
-			focusedSeries: null,
-			clickedDataTimestamp: xValue,
-			...pointer,
-		};
-	}
-
 	const focusedSeries = getFocusedSeriesAtPosition(event, plot);
 
 	const dataIndex = plot.posToIdx(event.offsetX);
@@ -211,6 +193,9 @@ export function buildClickData(event: MouseEvent, plot: uPlot): ChartClickData {
 		yValue,
 		focusedSeries,
 		clickedDataTimestamp,
-		...pointer,
+		mouseX: event.offsetX,
+		mouseY: event.offsetY,
+		absoluteMouseX: event.clientX,
+		absoluteMouseY: event.clientY,
 	};
 }

frontend/src/lib/uPlotV2/utils/__tests__/barRect.test.ts

@@ -0,0 +1,30 @@
+import type uPlot from 'uplot';
+
+import { measureBar, reportBarRect } from '../barRect';
+
+function plotWithPaths(paths?: uPlot.Series['paths']): uPlot {
+	return { series: [{}, { paths }] } as unknown as uPlot;
+}
+
+describe('measureBar', () => {
+	it('returns the rect the bar paths report for that index', () => {
+		const paths = jest.fn((u: uPlot, seriesIdx: number, idx: number) => {
+			reportBarRect(u, seriesIdx, idx, 10, 20, 8, 30);
+			return null;
+		});
+		const u = plotWithPaths(paths);
+
+		expect(measureBar(u, 1, 4)).toStrictEqual({
+			left: 10,
+			top: 20,
+			width: 8,
+			height: 30,
+		});
+		expect(paths).toHaveBeenCalledWith(u, 1, 4, 4);
+	});
+
+	it('returns null for series whose paths report no bar', () => {
+		expect(measureBar(plotWithPaths(jest.fn(() => null)), 1, 0)).toBeNull();
+		expect(measureBar(plotWithPaths(), 1, 0)).toBeNull();
+	});
+});

frontend/src/lib/uPlotV2/utils/__tests__/logGridSplits.test.ts

@@ -1,59 +0,0 @@
-import type uPlot from 'uplot';
-
-import { logScaleSplits, spacedLogLabels } from '../logGridSplits';
-
-describe('logScaleSplits', () => {
-	const splitsFor = (min: number, max: number): number[] =>
-		(
-			logScaleSplits as (
-				u: uPlot,
-				axisIdx: number,
-				min: number,
-				max: number,
-			) => number[]
-		)({} as uPlot, 0, min, max);
-
-	it('splits at 1, 2 and 5 × 10ⁿ inside an unsnapped range', () => {
-		expect(splitsFor(10.6, 990)).toStrictEqual([20, 50, 100, 200, 500]);
-	});
-
-	it('includes the ends when they fall on a split', () => {
-		expect(splitsFor(0.1, 10)).toStrictEqual([0.1, 0.2, 0.5, 1, 2, 5, 10]);
-	});
-
-	it('is empty for a range a log scale cannot hold', () => {
-		expect(splitsFor(0, 10)).toStrictEqual([]);
-		expect(splitsFor(5, 5)).toStrictEqual([]);
-	});
-});
-
-describe('spacedLogLabels', () => {
-	// 100px per decade.
-	const plot = {
-		axes: [{ scale: 'x' }],
-		valToPos: (value: number): number => Math.log10(value) * 100,
-	} as unknown as uPlot;
-	const label = (splits: number[], space: number): (number | null)[] =>
-		spacedLogLabels(plot, splits, 0, space, 0) as (number | null)[];
-
-	it('always labels the powers of ten', () => {
-		expect(label([10, 20, 50, 100], 200)).toStrictEqual([10, null, null, 100]);
-	});
-
-	it('adds a 2 or 5 that clears the labels already kept', () => {
-		// 20 is 30px from 10; 50 is 70px from 10 and 30px from 100.
-		expect(label([10, 20, 50, 100], 25)).toStrictEqual([10, 20, 50, 100]);
-		expect(label([10, 20, 50, 100], 40)).toStrictEqual([10, null, null, 100]);
-	});
-
-	it('labels both ends of a range spanning under a decade', () => {
-		// 100 sits at 200px; 20 (130px) and 500 (270px) clear it, 50 and 200 do not.
-		expect(label([20, 50, 100, 200, 500], 60)).toStrictEqual([
-			20,
-			null,
-			100,
-			null,
-			500,
-		]);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/quadtree.test.ts

@@ -1,62 +0,0 @@
-import { Quadtree, QuadtreeRect } from '../quadtree';
-
-interface Item extends QuadtreeRect {
-	id: number;
-}
-
-function collect(
-	tree: Quadtree<Item>,
-	x: number,
-	y: number,
-	w: number,
-	h: number,
-): Set<number> {
-	const ids = new Set<number>();
-	tree.get(x, y, w, h, (item) => ids.add(item.id));
-	return ids;
-}
-
-describe('Quadtree', () => {
-	it('returns items in the queried region and not those far from it', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		tree.add({ id: 1, x: 10, y: 10, w: 5, h: 5 });
-		tree.add({ id: 2, x: 80, y: 80, w: 5, h: 5 });
-
-		// Below the split threshold every item is visited; callers refine the hit.
-		expect(collect(tree, 9, 9, 8, 8)).toStrictEqual(new Set([1, 2]));
-	});
-
-	it('splits past the object limit and still finds every item', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		const total = 50;
-		for (let id = 0; id < total; id++) {
-			tree.add({ id, x: (id % 10) * 10, y: Math.floor(id / 10) * 10, w: 4, h: 4 });
-		}
-
-		expect(collect(tree, 0, 0, 100, 100).size).toBe(total);
-	});
-
-	it('after a split, a query in one quadrant skips items confined to another', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			// All in the north-west quadrant.
-			tree.add({ id, x: 1 + id, y: 1, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 90, y: 90, w: 2, h: 2 });
-
-		const northWest = collect(tree, 0, 0, 10, 10);
-		expect(northWest.has(99)).toBe(false);
-		expect(collect(tree, 85, 85, 10, 10).has(99)).toBe(true);
-	});
-
-	it('reports an item straddling the midline from either side', () => {
-		const tree = new Quadtree<Item>(0, 0, 100, 100);
-		for (let id = 0; id < 20; id++) {
-			tree.add({ id, x: 1, y: 1 + id, w: 2, h: 2 });
-		}
-		tree.add({ id: 99, x: 48, y: 48, w: 4, h: 4 });
-
-		expect(collect(tree, 40, 40, 5, 5).has(99)).toBe(true);
-		expect(collect(tree, 55, 55, 5, 5).has(99)).toBe(true);
-	});
-});

frontend/src/lib/uPlotV2/utils/__tests__/scale.test.ts

@@ -195,22 +195,3 @@ describe('scale utils', () => {
 		});
 	});
 });
-
-describe('symmetric log scale', () => {
-	it('maps to uPlot arcsinh with the given linear threshold', () => {
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-				asinhThreshold: 0.01,
-			}),
-		).toStrictEqual({ distr: 4, log: 10, asinh: 0.01 });
-
-		expect(
-			scaleUtils.getDistributionConfig({
-				time: false,
-				distr: DistributionType.SymmetricLog,
-			}).asinh,
-		).toBe(scaleUtils.DEFAULT_ASINH_THRESHOLD);
-	});
-});

frontend/src/lib/uPlotV2/utils/barRect.ts

@@ -0,0 +1,45 @@
+import type uPlot from 'uplot';
+
+export interface BarRect {
+	left: number;
+	top: number;
+	width: number;
+	height: number;
+}
+
+let onBarRect: ((rect: BarRect) => void) | null = null;
+
+/** `each` callback for bar path builders; reports bar rects while {@link measureBar} runs. */
+// eslint-disable-next-line max-params
+export function reportBarRect(
+	_u: uPlot,
+	_seriesIdx: number,
+	_idx: number,
+	left: number,
+	top: number,
+	width: number,
+	height: number,
+): void {
+	onBarRect?.({ left, top, width, height });
+}
+
+/**
+ * Canvas rect of one bar, from re-running the series' paths for that index.
+ * `null` for series not drawn as bars.
+ */
+export function measureBar(
+	u: uPlot,
+	seriesIdx: number,
+	idx: number,
+): BarRect | null {
+	let rect: BarRect | null = null;
+	onBarRect = (measured): void => {
+		rect = measured;
+	};
+	try {
+		u.series[seriesIdx].paths?.(u, seriesIdx, idx, idx);
+	} finally {
+		onBarRect = null;
+	}
+	return rect;
+}

frontend/src/lib/uPlotV2/utils/logGridSplits.ts

@@ -1,61 +0,0 @@
-import type uPlot from 'uplot';
-
-const DECADE_TOLERANCE = 1e-9;
-
-function isDecade(value: number): boolean {
-	if (value === 0) {
-		return true;
-	}
-	const exponent = Math.log10(Math.abs(value));
-	return Math.abs(exponent - Math.round(exponent)) < DECADE_TOLERANCE;
-}
-
-const LOG_SPLIT_MULTIPLES = [1, 2, 5];
-
-/** 1, 2, 5 × 10ⁿ in range; uPlot's log splits step from an unsnapped min (10.79, 21.58…). */
-export const logScaleSplits: uPlot.Axis.Splits = (_u, _axisIdx, min, max) => {
-	if (!(min > 0) || !(max > min)) {
-		return [];
-	}
-	const splits: number[] = [];
-	for (
-		let exponent = Math.floor(Math.log10(min));
-		exponent <= Math.ceil(Math.log10(max));
-		exponent++
-	) {
-		LOG_SPLIT_MULTIPLES.forEach((multiple) => {
-			// Rounded through toPrecision so 0.1 × 3 noise can't fall outside [min, max].
-			const split = Number((multiple * 10 ** exponent).toPrecision(12));
-			if (split >= min && split <= max) {
-				splits.push(split);
-			}
-		});
-	}
-	return splits;
-};
-
-/** Labels every decade, plus any 2 or 5 at least `space` px clear. */
-export const spacedLogLabels: uPlot.Axis.Filter = (
-	u,
-	splits,
-	axisIdx,
-	space,
-) => {
-	const scaleKey = u.axes[axisIdx]?.scale ?? 'x';
-	const positions = splits.map((split) =>
-		split == null ? null : u.valToPos(split, scaleKey),
-	);
-	const kept = splits.map((split) => split != null && isDecade(split));
-	const isClear = (index: number): boolean =>
-		kept.every(
-			(isKept, other) =>
-				!isKept ||
-				Math.abs((positions[other] ?? 0) - (positions[index] ?? 0)) >= space,
-		);
-	splits.forEach((split, index) => {
-		if (split != null && !kept[index] && isClear(index)) {
-			kept[index] = true;
-		}
-	});
-	return splits.map((split, index) => (kept[index] ? split : null));
-};

frontend/src/lib/uPlotV2/utils/quadtree.ts

@@ -1,100 +0,0 @@
-export interface QuadtreeRect {
-	x: number;
-	y: number;
-	w: number;
-	h: number;
-}
-
-const MAX_OBJECTS = 10;
-const MAX_LEVELS = 4;
-
-/** Rect index for cursor hit-testing; items straddling quadrants are stored in each, so `get` may repeat them. */
-export class Quadtree<T extends QuadtreeRect = QuadtreeRect> {
-	private items: T[] = [];
-	private quadrants: Quadtree<T>[] | null = null;
-
-	constructor(
-		private readonly x: number,
-		private readonly y: number,
-		private readonly w: number,
-		private readonly h: number,
-		private readonly level = 0,
-	) {}
-
-	add(item: T): void {
-		if (this.quadrants) {
-			this.forEachQuadrant(item, (quadrant) => quadrant.add(item));
-			return;
-		}
-
-		this.items.push(item);
-
-		if (this.items.length > MAX_OBJECTS && this.level < MAX_LEVELS) {
-			this.split();
-			const items = this.items;
-			this.items = [];
-			for (const existing of items) {
-				this.forEachQuadrant(existing, (quadrant) => quadrant.add(existing));
-			}
-		}
-	}
-
-	/** Visits every item whose quadrant overlaps the rectangle; callers refine the test. */
-	get(
-		x: number,
-		y: number,
-		w: number,
-		h: number,
-		visit: (item: T) => void,
-	): void {
-		for (const item of this.items) {
-			visit(item);
-		}
-		if (this.quadrants) {
-			this.forEachQuadrant({ x, y, w, h }, (quadrant) =>
-				quadrant.get(x, y, w, h, visit),
-			);
-		}
-	}
-
-	private split(): void {
-		const w = this.w / 2;
-		const h = this.h / 2;
-		const level = this.level + 1;
-		// North-east, north-west, south-west, south-east.
-		this.quadrants = [
-			new Quadtree<T>(this.x + w, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y, w, h, level),
-			new Quadtree<T>(this.x, this.y + h, w, h, level),
-			new Quadtree<T>(this.x + w, this.y + h, w, h, level),
-		];
-	}
-
-	private forEachQuadrant(
-		rect: QuadtreeRect,
-		visit: (quadrant: Quadtree<T>) => void,
-	): void {
-		if (!this.quadrants) {
-			return;
-		}
-		const midX = this.x + this.w / 2;
-		const midY = this.y + this.h / 2;
-		const startsNorth = rect.y < midY;
-		const startsWest = rect.x < midX;
-		const endsEast = rect.x + rect.w > midX;
-		const endsSouth = rect.y + rect.h > midY;
-
-		if (startsNorth && endsEast) {
-			visit(this.quadrants[0]);
-		}
-		if (startsWest && startsNorth) {
-			visit(this.quadrants[1]);
-		}
-		if (startsWest && endsSouth) {
-			visit(this.quadrants[2]);
-		}
-		if (endsEast && endsSouth) {
-			visit(this.quadrants[3]);
-		}
-	}
-}

frontend/src/lib/uPlotV2/utils/scale.ts

@@ -58,23 +58,18 @@ function normalizeLogLimit(
 	return logBase ** exp;
 }
 
-export const DEFAULT_ASINH_THRESHOLD = 1;
-
 /**
- * Returns uPlot scale distribution options for a value axis.
- * Time scales get no distr/log; value scales get distr 1 (linear), 3 (log) or
- * 4 (arcsinh, uPlot's symmetric log) and log base 2 or 10.
+ * Returns uPlot scale distribution options for the Y axis.
+ * Time (X) scale gets no distr/log; Y scale gets distr 1 (linear) or 3 (log) and log base 2 or 10.
  */
 export function getDistributionConfig({
 	time,
 	distr,
 	logBase,
-	asinhThreshold,
 }: {
 	time: ScaleProps['time'];
 	distr?: DistributionType;
 	logBase?: number;
-	asinhThreshold?: number;
 }): Partial<Scale> {
 	if (time) {
 		return {};
@@ -82,14 +77,6 @@ export function getDistributionConfig({
 
 	const resolvedLogBase = (logBase ?? 10) === 2 ? 2 : 10;
 
-	if (distr === DistributionType.SymmetricLog) {
-		return {
-			distr: 4,
-			log: resolvedLogBase,
-			asinh: asinhThreshold ?? DEFAULT_ASINH_THRESHOLD,
-		};
-	}
-
 	return {
 		distr: distr === DistributionType.Logarithmic ? 3 : 1,
 		log: resolvedLogBase,

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

@@ -37,7 +37,6 @@ export default function ChartWrapper({
 	syncKey,
 	syncFilterMode,
 	onDestroy = noop,
-	plotRef,
 	children,
 	layoutChildren,
 	yAxisUnit,
@@ -124,7 +123,6 @@ export default function ChartWrapper({
 						height={chartHeight}
 						plotRef={(plot): void => {
 							plotInstanceRef.current = plot;
-							plotRef?.(plot);
 						}}
 						onDestroy={(plot: uPlot): void => {
 							plotInstanceRef.current = null;

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

@@ -1,45 +0,0 @@
-import { render } from 'tests/test-utils';
-import type uPlot from 'uplot';
-
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-
-import ChartWrapper from '../ChartWrapper';
-
-const FAKE_PLOT = { id: 'plot' } as unknown as uPlot;
-
-jest.mock('lib/uPlotV2/components/UPlotChart/UPlotChart', () => ({
-	__esModule: true,
-	default: ({ plotRef }: { plotRef?: (plot: uPlot | null) => void }): null => {
-		plotRef?.(FAKE_PLOT);
-		return null;
-	},
-}));
-
-window.ResizeObserver =
-	window.ResizeObserver ||
-	jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-
-describe('ChartWrapper', () => {
-	it('hands the plot instance to the caller', () => {
-		const plotRef = jest.fn();
-		render(
-			<ChartWrapper
-				config={new UPlotConfigBuilder({ id: 'chart' })}
-				data={[[1], [2]]}
-				width={400}
-				height={300}
-				legendConfig={{ position: LegendPosition.BOTTOM }}
-				showLegend={false}
-				showTooltip={false}
-				plotRef={plotRef}
-			/>,
-		);
-
-		expect(plotRef).toHaveBeenCalledWith(FAKE_PLOT);
-	});
-});

frontend/src/lib/visualization/charts/Scatter/Scatter.stories.tsx

@@ -1,244 +0,0 @@
-import { useMemo } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useIsDarkMode } from 'hooks/useDarkMode';
-import { LegendPosition } from 'lib/uPlotV2/components/types';
-import type { Threshold } from 'lib/uPlotV2/hooks/types';
-import type { ScatterPointLabel } from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-
-import Scatter from './Scatter';
-import {
-	buildScatterConfig,
-	prepareScatterChartData,
-	ScatterAxisScale,
-	ScatterSeries,
-} from './utils';
-
-const SERVICES = [
-	'frontend',
-	'cart',
-	'checkout',
-	'payment',
-	'shipping',
-	'currency',
-	'email',
-	'recommendation',
-	'ads',
-	'product-catalog',
-];
-
-type Shape = 'spread' | 'single' | 'sameX';
-
-interface ScatterStoryProps {
-	groups: number;
-	pointsPerGroup: number;
-	/** Adds an error-count size column. */
-	sized: boolean;
-	xScale: ScatterAxisScale;
-	yScale: ScatterAxisScale;
-	/** Zeroes a share of y values, which forces the symmetric log. */
-	withZeros: boolean;
-	shape: Shape;
-	thresholds: boolean;
-	pointSize: number;
-	/** 0–1. */
-	fillOpacity: number;
-	width: number;
-	height: number;
-}
-
-/** Deterministic, so a story renders the same points on every run. */
-function createRng(seed: number): () => number {
-	let state = seed >>> 0;
-	return (): number => {
-		state = (state * 1664525 + 1013904223) >>> 0;
-		return state / 2 ** 32;
-	};
-}
-
-function buildSeries({
-	groups,
-	pointsPerGroup,
-	sized,
-	withZeros,
-	shape,
-}: ScatterStoryProps): ScatterSeries[] {
-	const rng = createRng(42);
-	return Array.from({ length: groups }, (_, groupIndex) => {
-		const label = SERVICES[groupIndex % SERVICES.length];
-		// Each service sits in its own throughput/latency band, so groups are telling
-		// apart rather than one cloud.
-		const baseThroughput = 20 * 2 ** (groupIndex % 5);
-		const baseLatency = 40 + 60 * (groupIndex % 4);
-
-		const count = shape === 'single' ? 1 : pointsPerGroup;
-		const xs: number[] = [];
-		const ys: number[] = [];
-		const sizes: Array<number | null> = [];
-
-		for (let i = 0; i < count; i++) {
-			const throughput =
-				shape === 'sameX' ? baseThroughput : baseThroughput * (0.5 + rng() * 1.5);
-			// Latency grows with load, plus noise; the odd outlier keeps the axis honest.
-			const outlier = rng() < 0.03 ? 4 + rng() * 6 : 1;
-			let latency =
-				baseLatency *
-				(0.8 + (throughput / baseThroughput) * 0.4 + rng() * 0.3) *
-				outlier;
-			if (withZeros && rng() < 0.2) {
-				latency = 0;
-			}
-			xs.push(Number(throughput.toFixed(2)));
-			ys.push(Number(latency.toFixed(2)));
-			sizes.push(rng() < 0.1 ? null : Math.round(rng() * rng() * 500));
-		}
-
-		return sized ? { label, xs, ys, sizes } : { label, xs, ys };
-	});
-}
-
-const THRESHOLDS: Threshold[] = [
-	{
-		thresholdValue: 300,
-		thresholdUnit: 'ms',
-		thresholdColor: '#E5484D',
-		thresholdLabel: 'p99 SLO',
-	},
-];
-
-function ScatterStory(props: ScatterStoryProps): JSX.Element {
-	const {
-		xScale,
-		yScale,
-		sized,
-		thresholds,
-		pointSize,
-		fillOpacity,
-		width,
-		height,
-	} = props;
-	const isDarkMode = useIsDarkMode();
-
-	const series = useMemo(() => buildSeries(props), [props]);
-
-	const config = useMemo(
-		() =>
-			buildScatterConfig({
-				id: 'scatter-story',
-				series,
-				isDarkMode,
-				x: { unit: 'reqps', scale: xScale },
-				y: { unit: 'ms', scale: yScale },
-				pointSize: { fixed: pointSize, min: 4, max: pointSize * 4 },
-				fillOpacity,
-				thresholds: thresholds ? THRESHOLDS : undefined,
-			}),
-		[series, isDarkMode, xScale, yScale, pointSize, fillOpacity, thresholds],
-	);
-
-	const data = useMemo(() => prepareScatterChartData(series), [series]);
-
-	const resolvePointLabels = (
-		seriesIndex: number,
-		dataIndex: number,
-	): ScatterPointLabel[] => [
-		{ key: 'service.name', value: series[seriesIndex - 1]?.label ?? '' },
-		{
-			key: 'k8s.pod.name',
-			value: `pod-${dataIndex.toString().padStart(3, '0')}`,
-		},
-	];
-
-	return (
-		<div style={{ width, padding: 16 }}>
-			<Scatter
-				config={config}
-				data={data}
-				width={width}
-				height={height}
-				legendConfig={{ position: LegendPosition.BOTTOM }}
-				channels={{
-					x: { label: 'Throughput', unit: 'reqps' },
-					y: { label: 'p99 latency', unit: 'ms' },
-					...(sized && { size: { label: 'Errors', unit: 'short' } }),
-				}}
-				resolvePointLabels={resolvePointLabels}
-				canPinTooltip
-			/>
-		</div>
-	);
-}
-
-const meta = {
-	title: 'Charts/Scatter',
-	component: ScatterStory,
-	parameters: { layout: 'padded' },
-	args: {
-		groups: 1,
-		pointsPerGroup: 10,
-		sized: false,
-		xScale: ScatterAxisScale.Linear,
-		yScale: ScatterAxisScale.Linear,
-		withZeros: false,
-		shape: 'spread',
-		thresholds: false,
-		pointSize: 6,
-		fillOpacity: 0.7,
-		width: 800,
-		height: 420,
-	},
-	argTypes: {
-		shape: { control: 'radio', options: ['spread', 'single', 'sameX'] },
-		xScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
-		yScale: { control: 'radio', options: Object.values(ScatterAxisScale) },
-		fillOpacity: { control: { type: 'range', min: 0, max: 1, step: 0.05 } },
-		pointSize: { control: { type: 'range', min: 2, max: 16, step: 1 } },
-	},
-} satisfies Meta<ScatterStoryProps>;
-
-export default meta;
-
-type Story = StoryObj<ScatterStoryProps>;
-
-/** One service, ten points: axes formatted with units, hover picks the right point. */
-export const Basic: Story = {};
-
-/** Five services, one legend entry each; toggling a row hides its points. */
-export const Grouped: Story = {
-	args: { groups: 5, pointsPerGroup: 40 },
-};
-
-/** Error count as disc area, between the configured min and max diameters. */
-export const Sized: Story = {
-	args: { groups: 5, pointsPerGroup: 40, sized: true, pointSize: 5 },
-};
-
-/** Log x; a fifth of the latencies are 0, so y falls back to the symmetric log. */
-export const LogAxes: Story = {
-	args: {
-		groups: 5,
-		pointsPerGroup: 60,
-		xScale: ScatterAxisScale.Log,
-		yScale: ScatterAxisScale.Log,
-		withZeros: true,
-	},
-};
-
-/** A single point still gets a padded range rather than an empty plot. */
-export const SinglePoint: Story = {
-	args: { shape: 'single' },
-};
-
-/** Fifty points sharing one x collide on nothing: no shared x array to align. */
-export const SameX: Story = {
-	args: { groups: 3, pointsPerGroup: 50, shape: 'sameX' },
-};
-
-/** Horizontal line with label on the y axis; the scale stretches to include it. */
-export const Thresholds: Story = {
-	args: { groups: 3, pointsPerGroup: 40, thresholds: true },
-};
-
-/** Perf harness: raise `pointsPerGroup` and read the draw time under the chart. */
-export const Dense: Story = {
-	args: { groups: 5, pointsPerGroup: 1000, pointSize: 4, fillOpacity: 0.5 },
-};

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

@@ -1,98 +0,0 @@
-import { useCallback, useRef } from 'react';
-import ChartWrapper from 'lib/visualization/charts/ChartWrapper/ChartWrapper';
-import ScatterTooltip from 'lib/uPlotV2/components/Tooltip/ScatterTooltip';
-import {
-	ScatterTooltipProps,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { getSeriesStroke } from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
-import type { ChartClickData } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
-import { ScatterChartProps } from 'lib/visualization/charts/types';
-import uPlot from 'uplot';
-
-import { getCursorHit } from './utils';
-
-// Faceted uPlot can't mount without series; empty aligned data shows no-data instead.
-const EMPTY_ALIGNED_DATA: uPlot.AlignedData = [[]];
-
-export default function Scatter(props: ScatterChartProps): JSX.Element {
-	const {
-		children,
-		customTooltip,
-		channels,
-		resolvePointLabels,
-		pinnedTooltipElement,
-		onPointClick,
-		plotRef,
-		...rest
-	} = props;
-
-	const plotInstanceRef = useRef<uPlot | null>(null);
-
-	const handlePlotRef = useCallback(
-		(plot: uPlot | null): void => {
-			plotInstanceRef.current = plot;
-			plotRef?.(plot);
-		},
-		[plotRef],
-	);
-
-	// Faceted plots have no shared x; take the hit from the cursor.
-	const handleClick = useCallback(
-		(click: ChartClickData): void => {
-			const plot = plotInstanceRef.current;
-			const hit = plot ? getCursorHit(plot) : null;
-			if (!plot || !hit || !onPointClick) {
-				return;
-			}
-			onPointClick({
-				...hit,
-				color: getSeriesStroke(plot, hit.seriesIndex),
-				coordinates: { x: click.absoluteMouseX, y: click.absoluteMouseY },
-			});
-		},
-		[onPointClick],
-	);
-
-	const renderTooltip = useCallback(
-		(args: TooltipRenderArgs): React.ReactNode => {
-			if (customTooltip) {
-				return customTooltip(args);
-			}
-			const tooltipProps: ScatterTooltipProps = {
-				...args,
-				id: rest.config.getId(),
-				channels,
-				resolvePointLabels,
-				decimalPrecision: rest.decimalPrecision,
-				canPinTooltip: rest.canPinTooltip,
-				renderTooltipFooter: rest.renderTooltipFooter,
-			};
-			return <ScatterTooltip {...tooltipProps} />;
-		},
-		[
-			customTooltip,
-			channels,
-			resolvePointLabels,
-			rest.config,
-			rest.decimalPrecision,
-			rest.canPinTooltip,
-			rest.renderTooltipFooter,
-		],
-	);
-
-	const hasSeries = rest.data.length > 1;
-
-	return (
-		<ChartWrapper
-			{...rest}
-			data={hasSeries ? rest.data : EMPTY_ALIGNED_DATA}
-			plotRef={handlePlotRef}
-			onClick={onPointClick ? handleClick : rest.onClick}
-			customTooltip={renderTooltip}
-			pinnedTooltipElement={pinnedTooltipElement}
-		>
-			{children}
-		</ChartWrapper>
-	);
-}

frontend/src/lib/visualization/charts/Scatter/__tests__/scatterRange.test.ts

@@ -1,97 +0,0 @@
-import { DistributionType } from 'lib/uPlotV2/config/types';
-import uPlot from 'uplot';
-
-import { createScatterRange, type ScatterRangeOptions } from '../scatterRange';
-
-/** A 220px-tall, 420px-wide plot at a device pixel ratio of 1. */
-const plot = { bbox: { width: 420, height: 220 } } as unknown as uPlot;
-
-function rangeOf(
-	options: Partial<ScatterRangeOptions>,
-	dataMin: number | null,
-	dataMax: number | null,
-): [number, number] {
-	const range = createScatterRange({
-		dimension: 'y',
-		marginPx: 10,
-		distribution: DistributionType.Linear,
-		...options,
-	}) as (u: uPlot, min: number | null, max: number | null) => [number, number];
-	return range(plot, dataMin, dataMax);
-}
-
-describe('createScatterRange', () => {
-	beforeAll(() => {
-		Object.defineProperty(uPlot, 'pxRatio', { value: 1, configurable: true });
-	});
-
-	it('widens a linear range so the data sits marginPx inside each edge', () => {
-		// 200px of data inside 220px: 10px at each end is 1/20 of the span.
-		expect(rangeOf({}, 0, 100)).toStrictEqual([-5, 105]);
-	});
-
-	it('measures the margin along its own axis', () => {
-		// 400px of data inside 420px.
-		expect(rangeOf({ dimension: 'x' }, 0, 100)).toStrictEqual([-2.5, 102.5]);
-	});
-
-	it('pads a log range in decades, without snapping to the next power of ten', () => {
-		const [min, max] = rangeOf(
-			{ distribution: DistributionType.Logarithmic },
-			1,
-			10,
-		);
-		expect(Math.log10(min)).toBeCloseTo(-0.05);
-		expect(Math.log10(max)).toBeCloseTo(1.05);
-	});
-
-	it('pads a symmetric log range in its asinh space', () => {
-		const [min, max] = rangeOf(
-			{ distribution: DistributionType.SymmetricLog, asinhThreshold: 2 },
-			0,
-			20,
-		);
-		const span = Math.asinh(10);
-		expect(Math.asinh(min / 2)).toBeCloseTo(-span / 20);
-		expect(Math.asinh(max / 2)).toBeCloseTo(span + span / 20);
-	});
-
-	it('stretches to the soft limits before padding', () => {
-		expect(rangeOf({ softMin: 0, softMax: 200 }, 50, 100)).toStrictEqual([
-			-10, 210,
-		]);
-	});
-
-	it('ignores a soft min at or below zero on a log scale', () => {
-		const [min] = rangeOf(
-			{ distribution: DistributionType.Logarithmic, softMin: 0 },
-			10,
-			100,
-		);
-		expect(min).toBeGreaterThan(0);
-	});
-
-	it('spreads a single value around itself', () => {
-		const [min, max] = rangeOf({}, 5, 5);
-		expect(min).toBeLessThan(5);
-		expect(max).toBeGreaterThan(5);
-		expect(5 - min).toBeCloseTo(max - 5);
-	});
-
-	it('falls back to a unit range with no data', () => {
-		expect(rangeOf({}, null, null)).toStrictEqual([0, 1]);
-		expect(
-			rangeOf({ distribution: DistributionType.Logarithmic }, null, null),
-		).toStrictEqual([1, 10]);
-	});
-
-	it('skips the margin on a plot too small to hold it', () => {
-		const tiny = { bbox: { width: 15, height: 15 } } as unknown as uPlot;
-		const range = createScatterRange({
-			dimension: 'y',
-			marginPx: 10,
-			distribution: DistributionType.Linear,
-		}) as (u: uPlot, min: number, max: number) => [number, number];
-		expect(range(tiny, 0, 100)).toStrictEqual([0, 100]);
-	});
-});

frontend/src/lib/visualization/charts/Scatter/__tests__/utils.test.ts

@@ -1,243 +0,0 @@
-import type uPlot from 'uplot';
-import { DistributionType } from 'lib/uPlotV2/config/types';
-
-import {
-	buildScatterConfig,
-	getCursorHit,
-	prepareScatterChartData,
-	resolveAxisDistribution,
-	ScatterAxisScale,
-	ScatterSeries,
-} from '../utils';
-
-jest.mock('lib/visualization/panels/utils/legendVisibilityUtils', () => ({
-	getStoredSeriesVisibility: jest.fn(),
-}));
-
-const SERIES: ScatterSeries[] = [
-	{ label: 'cart', xs: [10, 20], ys: [100, 200], sizes: [1, null] },
-	{ label: 'checkout', xs: [30], ys: [0] },
-];
-
-describe('prepareScatterChartData', () => {
-	it('lays series out as facets behind an empty x slot', () => {
-		expect(prepareScatterChartData(SERIES)).toStrictEqual([
-			null,
-			[
-				[10, 20],
-				[100, 200],
-				[1, null],
-			],
-			[[30], [0]],
-		]);
-	});
-});
-
-describe('getCursorHit', () => {
-	const plotWith = (idxs: Array<number | null>): uPlot =>
-		({ cursor: { idxs } }) as unknown as uPlot;
-
-	it('reads the series the scatter plugin answered for', () => {
-		expect(getCursorHit(plotWith([null, null, 4, null]))).toStrictEqual({
-			seriesIndex: 2,
-			dataIndex: 4,
-		});
-	});
-
-	it('takes a data index of 0 as a hit', () => {
-		expect(getCursorHit(plotWith([0, 0]))).toStrictEqual({
-			seriesIndex: 1,
-			dataIndex: 0,
-		});
-	});
-
-	it('is null off every dot', () => {
-		expect(getCursorHit(plotWith([null, null]))).toBeNull();
-		expect(getCursorHit({ cursor: {} } as unknown as uPlot)).toBeNull();
-	});
-});
-
-describe('resolveAxisDistribution', () => {
-	it('is linear when asked, whatever the values', () => {
-		expect(
-			resolveAxisDistribution([1, 1e6], ScatterAxisScale.Linear),
-		).toStrictEqual({ distribution: DistributionType.Linear });
-	});
-
-	it('is a plain log when every value is positive', () => {
-		expect(resolveAxisDistribution([1, 100], ScatterAxisScale.Log)).toStrictEqual(
-			{ distribution: DistributionType.Logarithmic },
-		);
-	});
-
-	it('falls back from log to a symmetric log around the smallest magnitude when zero is present', () => {
-		expect(
-			resolveAxisDistribution([0, 0.05, 300], ScatterAxisScale.Log),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 0.01,
-		});
-	});
-
-	it('keeps an explicit log axis for a soft min it cannot place', () => {
-		expect(
-			resolveAxisDistribution([1, 100], ScatterAxisScale.Log, [-10]),
-		).toStrictEqual({ distribution: DistributionType.Logarithmic });
-	});
-
-	it('is a symmetric log when asked, even with only positive values', () => {
-		expect(
-			resolveAxisDistribution([2, 300], ScatterAxisScale.SymLog),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 1,
-		});
-	});
-
-	it('uses a unit threshold when nothing is positive', () => {
-		expect(
-			resolveAxisDistribution([0, -5], ScatterAxisScale.SymLog),
-		).toStrictEqual({
-			distribution: DistributionType.SymmetricLog,
-			asinhThreshold: 1,
-		});
-	});
-
-	describe('auto', () => {
-		const SKEWED = [1, 2, 3, 5, 8, 10, 20, 50, 1000];
-
-		it.each([
-			['skewed positive values', SKEWED, DistributionType.Logarithmic],
-			[
-				'values spread evenly across decades',
-				[1, 250, 500, 750, 1000],
-				DistributionType.Linear,
-			],
-			[
-				'a single outlier among clustered values',
-				[0.001, 40, 45, 50, 55, 60],
-				DistributionType.Linear,
-			],
-			[
-				'skewed values spanning under two decades',
-				[10, 10, 10, 11, 50],
-				DistributionType.Linear,
-			],
-			['no finite values', [Number.NaN], DistributionType.Linear],
-		])('picks a scale for %s', (_, values, distribution) => {
-			expect(resolveAxisDistribution(values, ScatterAxisScale.Auto)).toStrictEqual(
-				{ distribution },
-			);
-		});
-
-		it('picks symlog for skewed values that include zero', () => {
-			expect(
-				resolveAxisDistribution(
-					[0, 0, 1, 2, 5, 10, 50, 100, 10_000],
-					ScatterAxisScale.Auto,
-				),
-			).toStrictEqual({
-				distribution: DistributionType.SymmetricLog,
-				asinhThreshold: 1,
-			});
-		});
-
-		it('picks symlog when a soft limit reaches zero or below', () => {
-			expect(
-				resolveAxisDistribution(SKEWED, ScatterAxisScale.Auto, [0]),
-			).toStrictEqual({
-				distribution: DistributionType.SymmetricLog,
-				asinhThreshold: 1,
-			});
-		});
-
-		it('counts a soft limit towards the decades it spans', () => {
-			expect(
-				resolveAxisDistribution([5, 50], ScatterAxisScale.Auto, [null, 5000]),
-			).toStrictEqual({ distribution: DistributionType.Logarithmic });
-		});
-
-		it('is the default', () => {
-			expect(resolveAxisDistribution(SKEWED)).toStrictEqual({
-				distribution: DistributionType.Logarithmic,
-			});
-		});
-	});
-});
-
-describe('buildScatterConfig', () => {
-	const build = (
-		overrides: Partial<Parameters<typeof buildScatterConfig>[0]> = {},
-	): ReturnType<typeof buildScatterConfig> =>
-		buildScatterConfig({
-			id: 'scatter',
-			series: SERIES,
-			isDarkMode: true,
-			x: { unit: 'reqps' },
-			y: { unit: 'ms', scale: ScatterAxisScale.Log },
-			...overrides,
-		});
-
-	it('draws a line along both plot edges', () => {
-		const [xAxis, yAxis] = build().getConfig().axes ?? [];
-
-		expect(xAxis?.border?.show).toBe(true);
-		expect(yAxis?.border?.show).toBe(true);
-	});
-
-	it('titles each axis with its label, and leaves an unlabelled one bare', () => {
-		const config = build({
-			x: { unit: 'reqps', label: 'Throughput' },
-			y: { unit: 'ms', label: '' },
-		}).getConfig();
-		const [xAxis, yAxis] = config.axes ?? [];
-
-		expect(xAxis?.label).toBe('Throughput');
-		expect(yAxis?.label).toBeUndefined();
-	});
-
-	it('emits a faceted plot with two value scales', () => {
-		const config = build().getConfig();
-
-		expect(config.mode).toBe(2);
-		expect(config.scales?.x).toMatchObject({ time: false, distr: 1 });
-		// The y column has a 0, so log becomes the symmetric variant.
-		expect(config.scales?.y).toMatchObject({ time: false, distr: 4 });
-	});
-
-	it('draws one faceted series per group with the plugin path builder', () => {
-		const config = build().getConfig();
-		const [, cart, checkout] = config.series ?? [];
-
-		expect(config.series).toHaveLength(3);
-		expect(cart).toMatchObject({
-			label: 'cart',
-			facets: [
-				{ scale: 'x', auto: true },
-				{ scale: 'y', auto: true },
-			],
-		});
-		expect(typeof cart?.paths).toBe('function');
-		expect(cart?.paths).toBe(checkout?.paths);
-		expect(cart?.points?.show).toBe(false);
-	});
-
-	it('formats both axes with their units', () => {
-		const config = build().getConfig();
-		const [xAxis, yAxis] = config.axes ?? [];
-
-		expect(xAxis).toMatchObject({ scale: 'x', side: 2, space: 90 });
-		expect(yAxis).toMatchObject({ scale: 'y', side: 3 });
-		expect(typeof xAxis?.values).toBe('function');
-		expect(typeof yAxis?.values).toBe('function');
-	});
-
-	it('registers a y threshold draw hook when thresholds are given', () => {
-		const config = build({
-			thresholds: [{ thresholdValue: 300, thresholdUnit: 'ms' }],
-		}).getConfig();
-
-		expect(config.hooks?.draw).toHaveLength(1);
-		expect(build().getConfig().hooks?.draw).toBeUndefined();
-	});
-});

frontend/src/lib/visualization/charts/Scatter/scatterRange.ts

@@ -1,101 +0,0 @@
-import { DistributionType } from 'lib/uPlotV2/config/types';
-import { DEFAULT_ASINH_THRESHOLD } from 'lib/uPlotV2/utils/scale';
-import uPlot from 'uplot';
-
-import type { AxisDistribution } from './utils';
-
-interface ScaleTransform {
-	forward: (value: number) => number;
-	inverse: (position: number) => number;
-}
-
-export function getScaleTransform({
-	distribution,
-	asinhThreshold = DEFAULT_ASINH_THRESHOLD,
-}: AxisDistribution): ScaleTransform {
-	switch (distribution) {
-		case DistributionType.Logarithmic:
-			return {
-				forward: (value): number => Math.log10(value),
-				inverse: (position): number => 10 ** position,
-			};
-		case DistributionType.SymmetricLog:
-			return {
-				forward: (value): number => Math.asinh(value / asinhThreshold),
-				inverse: (position): number => Math.sinh(position) * asinhThreshold,
-			};
-		default:
-			return {
-				forward: (value): number => value,
-				inverse: (position): number => position,
-			};
-	}
-}
-
-/** In transformed units. */
-const SINGLE_VALUE_HALF_SPAN = 0.5;
-
-/** The data's extent stretched to the soft limits; null with neither. */
-function resolveExtent(
-	dataMin: number | null,
-	dataMax: number | null,
-	softMin: number | null | undefined,
-	softMax: number | null | undefined,
-): [number, number] | null {
-	const lows = [dataMin, softMin].filter(
-		(value): value is number => value != null && Number.isFinite(value),
-	);
-	const highs = [dataMax, softMax].filter(
-		(value): value is number => value != null && Number.isFinite(value),
-	);
-	return lows.length > 0 && highs.length > 0
-		? [Math.min(...lows), Math.max(...highs)]
-		: null;
-}
-
-export interface ScatterRangeOptions extends AxisDistribution {
-	dimension: 'x' | 'y';
-	/** CSS pixels kept clear at each end so the largest dot draws whole. */
-	marginPx: number;
-	softMin?: number | null;
-	softMax?: number | null;
-}
-
-/** Data extent padded by `marginPx` so edge dots draw whole; log stays unsnapped (snapping after the margin can add an empty decade). */
-export function createScatterRange({
-	dimension,
-	marginPx,
-	softMin,
-	softMax,
-	...distribution
-}: ScatterRangeOptions): uPlot.Scale.Range {
-	const transform = getScaleTransform(distribution);
-	const isLog = distribution.distribution === DistributionType.Logarithmic;
-
-	// A log scale cannot place a soft limit at or below zero.
-	const usableSoftMin = isLog && (softMin ?? 0) <= 0 ? null : softMin;
-
-	return (u, dataMin, dataMax): uPlot.Range.MinMax => {
-		const extent = resolveExtent(dataMin, dataMax, usableSoftMin, softMax);
-		if (!extent) {
-			return isLog ? [1, 10] : [0, 1];
-		}
-
-		let start = transform.forward(extent[0]);
-		let end = transform.forward(extent[1]);
-		if (start === end) {
-			start -= SINGLE_VALUE_HALF_SPAN;
-			end += SINGLE_VALUE_HALF_SPAN;
-		}
-
-		const plotPx =
-			(dimension === 'x' ? u.bbox.width : u.bbox.height) / uPlot.pxRatio;
-		if (plotPx > 2 * marginPx) {
-			const pad = ((end - start) * marginPx) / (plotPx - 2 * marginPx);
-			start -= pad;
-			end += pad;
-		}
-
-		return [transform.inverse(start), transform.inverse(end)];
-	};
-}

frontend/src/lib/visualization/charts/Scatter/utils.ts

@@ -1,366 +0,0 @@
-import { PrecisionOption } from 'components/Graph/types';
-import {
-	type AxisProps,
-	DistributionType,
-	DrawStyle,
-	SelectionPreferencesSource,
-} from 'lib/uPlotV2/config/types';
-import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import { Threshold } from 'lib/uPlotV2/hooks/types';
-import {
-	applyScatterPlugin,
-	createScatterPlugin,
-	SCATTER_FACETS,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/scatterPlugin';
-import {
-	DEFAULT_SCATTER_POINT_SIZE,
-	ScatterChartData,
-	ScatterPointSize,
-	ScatterSeriesData,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
-import {
-	logScaleSplits,
-	spacedLogLabels,
-} from 'lib/uPlotV2/utils/logGridSplits';
-import { adjustSoftLimitsWithThresholds } from 'lib/uPlotV2/utils/scale';
-import uPlot from 'uplot';
-
-import { createScatterRange, getScaleTransform } from './scatterRange';
-
-const POINT_STROKE_WIDTH = 1;
-
-/** Unit-suffixed x labels are wider than uPlot's 50px default assumes. */
-const X_AXIS_TICK_SPACE_PX = 90;
-const X_AXIS_END_LABEL_PADDING_PX = 40;
-
-export interface ScatterSeries {
-	label: string;
-	xs: number[];
-	ys: number[];
-	/** Optional third channel, in the caller's units. */
-	sizes?: Array<number | null>;
-}
-
-export enum ScatterAxisScale {
-	/** Log or symlog when it spreads the points out more than linear does. */
-	Auto = 'auto',
-	Linear = 'linear',
-	Log = 'log',
-	/** Log-like, but places zero and negatives. */
-	SymLog = 'symlog',
-}
-
-export interface ScatterAxisOptions {
-	label?: string;
-	unit?: string;
-	softMin?: number | null;
-	softMax?: number | null;
-	scale?: ScatterAxisScale;
-}
-
-export interface BuildScatterConfigArgs {
-	id: string;
-	series: ScatterSeries[];
-	isDarkMode: boolean;
-	x: ScatterAxisOptions;
-	y: ScatterAxisOptions;
-	pointSize?: ScatterPointSize;
-	/** 0–1. */
-	fillOpacity?: number;
-	colorMapping?: Record<string, string>;
-	/** Drawn on the y axis. */
-	thresholds?: Threshold[];
-	decimalPrecision?: PrecisionOption;
-	selectionPreferencesSource?: SelectionPreferencesSource;
-	shouldSaveSelectionPreference?: boolean;
-}
-
-/** The plugin's `dataIdx` answers only for the hit series. */
-export function getCursorHit(
-	plot: uPlot,
-): { seriesIndex: number; dataIndex: number } | null {
-	const idxs = plot.cursor.idxs ?? [];
-	for (let seriesIndex = 1; seriesIndex < idxs.length; seriesIndex++) {
-		const dataIndex = idxs[seriesIndex];
-		if (dataIndex != null) {
-			return { seriesIndex, dataIndex };
-		}
-	}
-	return null;
-}
-
-/** `[null, [xs, ys, sizes?], …]`: uPlot's faceted layout, series 0 empty. */
-export function prepareScatterChartData(
-	series: ScatterSeries[],
-): uPlot.AlignedData {
-	const data: ScatterChartData = [
-		null,
-		...series.map(
-			(entry): ScatterSeriesData =>
-				entry.sizes ? [entry.xs, entry.ys, entry.sizes] : [entry.xs, entry.ys],
-		),
-	];
-	return data as unknown as uPlot.AlignedData;
-}
-
-export interface AxisDistribution {
-	distribution: DistributionType;
-	asinhThreshold?: number;
-}
-
-const LINEAR_DISTRIBUTION: AxisDistribution = {
-	distribution: DistributionType.Linear,
-};
-
-/** Orders of magnitude `auto` needs before it considers leaving linear. */
-export const AUTO_MIN_DECADES = 2;
-
-/** How many times more axis the middle half of the points must cover for `auto` to leave linear. */
-export const AUTO_SPREAD_GAIN = 2;
-
-function getMagnitudeRange(values: number[]): {
-	minMagnitude: number;
-	maxMagnitude: number;
-	hasNonPositive: boolean;
-} {
-	let minMagnitude = Infinity;
-	let maxMagnitude = -Infinity;
-	let hasNonPositive = false;
-	for (const value of values) {
-		if (!Number.isFinite(value)) {
-			continue;
-		}
-		if (value <= 0) {
-			hasNonPositive = true;
-		}
-		if (value !== 0) {
-			minMagnitude = Math.min(minMagnitude, Math.abs(value));
-			maxMagnitude = Math.max(maxMagnitude, Math.abs(value));
-		}
-	}
-	return { minMagnitude, maxMagnitude, hasNonPositive };
-}
-
-/** The linear band ends at the smallest non-zero magnitude so small values still spread. */
-function symmetricLogDistribution(minMagnitude: number): AxisDistribution {
-	const asinhThreshold = Number.isFinite(minMagnitude)
-		? 10 ** Math.floor(Math.log10(minMagnitude))
-		: 1;
-	return { distribution: DistributionType.SymmetricLog, asinhThreshold };
-}
-
-function quantile(sorted: number[], q: number): number {
-	const position = (sorted.length - 1) * q;
-	const lower = Math.floor(position);
-	const upper = Math.ceil(position);
-	return sorted[lower] + (sorted[upper] - sorted[lower]) * (position - lower);
-}
-
-/** Share of the axis the middle half of the points covers. */
-function middleHalfSpread(
-	sorted: number[],
-	[min, max]: [number, number],
-	distribution: AxisDistribution,
-): number {
-	const { forward } = getScaleTransform(distribution);
-	const span = forward(max) - forward(min);
-	return span > 0
-		? (forward(quantile(sorted, 0.75)) - forward(quantile(sorted, 0.25))) / span
-		: 0;
-}
-
-/**
- * Log (symlog with zero or negatives) when it spreads the points out clearly
- * more than linear does; min/max alone would let one outlier decide.
- */
-function resolveAutoDistribution(
-	values: number[],
-	softLimits: number[],
-): AxisDistribution {
-	const sorted = values
-		.filter((value) => Number.isFinite(value))
-		.sort((a, b) => a - b);
-	if (sorted.length < 2) {
-		return LINEAR_DISTRIBUTION;
-	}
-	const { minMagnitude, maxMagnitude, hasNonPositive } = getMagnitudeRange([
-		...sorted,
-		...softLimits,
-	]);
-	if (!(Math.log10(maxMagnitude / minMagnitude) >= AUTO_MIN_DECADES)) {
-		return LINEAR_DISTRIBUTION;
-	}
-	const candidate = hasNonPositive
-		? symmetricLogDistribution(minMagnitude)
-		: { distribution: DistributionType.Logarithmic };
-	const extent: [number, number] = [
-		Math.min(sorted[0], ...softLimits),
-		Math.max(sorted[sorted.length - 1], ...softLimits),
-	];
-	const candidateSpread = middleHalfSpread(sorted, extent, candidate);
-	const linearSpread = middleHalfSpread(sorted, extent, LINEAR_DISTRIBUTION);
-	return candidateSpread > 0 &&
-		candidateSpread >= AUTO_SPREAD_GAIN * linearSpread
-		? candidate
-		: LINEAR_DISTRIBUTION;
-}
-
-/** `log` falls back to symlog rather than drop zero or negatives; callers filter first to drop them. */
-export function resolveAxisDistribution(
-	values: number[],
-	scale: ScatterAxisScale = ScatterAxisScale.Auto,
-	/** Soft limits and thresholds the axis must reach; only `auto` weighs them. */
-	softLimits: Array<number | null | undefined> = [],
-): AxisDistribution {
-	switch (scale) {
-		case ScatterAxisScale.Linear:
-			return LINEAR_DISTRIBUTION;
-		case ScatterAxisScale.SymLog:
-			return symmetricLogDistribution(getMagnitudeRange(values).minMagnitude);
-		case ScatterAxisScale.Log: {
-			const { minMagnitude, hasNonPositive } = getMagnitudeRange(values);
-			return hasNonPositive
-				? symmetricLogDistribution(minMagnitude)
-				: { distribution: DistributionType.Logarithmic };
-		}
-		case ScatterAxisScale.Auto:
-		default:
-			return resolveAutoDistribution(
-				values,
-				softLimits.filter(
-					(limit): limit is number => limit != null && Number.isFinite(limit),
-				),
-			);
-	}
-}
-
-/** The scatter range is unsnapped, so a log axis places and labels its own ticks. */
-function getLogAxisTicks({
-	distribution,
-}: AxisDistribution): Pick<AxisProps, 'splits' | 'filter'> {
-	return distribution === DistributionType.Logarithmic
-		? { splits: logScaleSplits, filter: spacedLogLabels }
-		: {};
-}
-
-export function buildScatterConfig({
-	id,
-	series,
-	isDarkMode,
-	x,
-	y,
-	pointSize = DEFAULT_SCATTER_POINT_SIZE,
-	fillOpacity,
-	colorMapping = {},
-	thresholds,
-	decimalPrecision,
-	selectionPreferencesSource,
-	shouldSaveSelectionPreference,
-}: BuildScatterConfigArgs): UPlotConfigBuilder {
-	const builder = new UPlotConfigBuilder({
-		id,
-		selectionPreferencesSource,
-		shouldSaveSelectionPreference,
-	});
-
-	const plugin = createScatterPlugin({ pointSize });
-	applyScatterPlugin(builder, plugin);
-	// The last x label is centred on the plot's right edge; room for its unit.
-	builder.setPadding([16, X_AXIS_END_LABEL_PADDING_PX, 8, 8]);
-
-	const ySoftLimits = adjustSoftLimitsWithThresholds(
-		y.softMin ?? null,
-		y.softMax ?? null,
-		thresholds,
-		y.unit,
-	);
-	const xDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.xs),
-		x.scale,
-		[x.softMin, x.softMax],
-	);
-	const yDistribution = resolveAxisDistribution(
-		series.flatMap((entry) => entry.ys),
-		y.scale,
-		[ySoftLimits.softMin, ySoftLimits.softMax],
-	);
-
-	const yThresholds =
-		thresholds && thresholds.length > 0
-			? { scaleKey: 'y', thresholds, yAxisUnit: y.unit }
-			: undefined;
-
-	// The largest disc drawn, plus its outline, kept clear of each plot edge.
-	const largestDiameter = series.some((entry) => entry.sizes)
-		? pointSize.max
-		: pointSize.fixed;
-	const marginPx = largestDiameter / 2 + POINT_STROKE_WIDTH;
-
-	builder.addScale({
-		scaleKey: 'x',
-		time: false,
-		range: createScatterRange({
-			dimension: 'x',
-			marginPx,
-			softMin: x.softMin,
-			softMax: x.softMax,
-			...xDistribution,
-		}),
-		...xDistribution,
-	});
-	builder.addScale({
-		scaleKey: 'y',
-		time: false,
-		range: createScatterRange({
-			dimension: 'y',
-			marginPx,
-			...ySoftLimits,
-			...yDistribution,
-		}),
-		...yDistribution,
-	});
-
-	builder.addAxis({
-		scaleKey: 'x',
-		side: 2,
-		label: x.label || undefined,
-		isDarkMode,
-		isTimeAxis: false,
-		yAxisUnit: x.unit ?? '',
-		decimalPrecision,
-		isLogScale: xDistribution.distribution !== DistributionType.Linear,
-		...getLogAxisTicks(xDistribution),
-		space: X_AXIS_TICK_SPACE_PX,
-	});
-	builder.addAxis({
-		scaleKey: 'y',
-		side: 3,
-		label: y.label || undefined,
-		isDarkMode,
-		yAxisUnit: y.unit ?? '',
-		decimalPrecision,
-		isLogScale: yDistribution.distribution !== DistributionType.Linear,
-		...getLogAxisTicks(yDistribution),
-	});
-
-	series.forEach((entry) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			label: entry.label,
-			colorMapping,
-			drawStyle: DrawStyle.Scatter,
-			pathBuilder: plugin.pathBuilder,
-			facets: SCATTER_FACETS,
-			lineWidth: POINT_STROKE_WIDTH,
-			pointSize: pointSize.fixed,
-			fillOpacity,
-			isDarkMode,
-		});
-	});
-
-	if (yThresholds) {
-		builder.addThresholds(yThresholds);
-	}
-
-	return builder;
-}

frontend/src/lib/visualization/charts/types.ts

@@ -16,10 +16,6 @@ import type {
 	HeatmapColorOptions,
 	HeatmapSeries,
 } from 'lib/uPlotV2/plugins/HeatmapPlugin/types';
-import type {
-	ScatterChannels,
-	ScatterPointLabel,
-} from 'lib/uPlotV2/plugins/ScatterPlugin/types';
 import {
 	DashboardCursorSync,
 	SyncTooltipFilterMode,
@@ -92,26 +88,6 @@ export interface HistogramChartProps extends ChartWrapperProps {
 	isQueriesMerged?: boolean;
 }
 
-/** The dot a click landed on; `seriesIndex` is uPlot's, so the first series is 1. */
-export interface ScatterPointClick {
-	seriesIndex: number;
-	dataIndex: number;
-	color: string;
-	/** Viewport coordinates of the click. */
-	coordinates: { x: number; y: number };
-}
-
-/** `data` is mode-2 (`prepareScatterChartData`); `config` comes from `buildScatterConfig`. */
-export interface ScatterChartProps extends ChartWrapperProps {
-	channels: ScatterChannels;
-	resolvePointLabels?: (
-		seriesIndex: number,
-		dataIndex: number,
-	) => ScatterPointLabel[];
-	/** Fires for a click on a dot; a click on empty plot space fires nothing. */
-	onPointClick?: (click: ScatterPointClick) => void;
-}
-
 /**
  * Data arrives as the query response carries it — bucket bounds plus one series per
  * group — and the chart pivots and sums it, so no caller has to get the transpose

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/AreaChartPanel/utils/buildConfig.ts

@@ -15,6 +15,7 @@ import {
 import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 import {
+	getPartialTimestamps,
 	hasSingleVisiblePoint,
 	toClickPluginPayload,
 } from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
@@ -155,6 +156,7 @@ function addSeries({
 			fillOpacity,
 			isDarkMode,
 			metric: s.labels,
+			partialTimestamps: getPartialTimestamps(s.values),
 		});
 	});
 }

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/utils/__tests__/buildConfig.test.ts

@@ -0,0 +1,34 @@
+import type { DashboardtypesBarChartPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
+import { UTC_TIMEZONE } from 'components/CustomTimePicker/timezoneUtils';
+import type { ExtendedSeries } from 'lib/uPlotV2/config/types';
+import { PanelMode } from 'lib/visualization/panels/types';
+
+import { buildBarChartConfig } from '../buildConfig';
+
+describe('buildBarChartConfig partial buckets', () => {
+	it('passes partial timestamps (epoch seconds) to the series', () => {
+		const config = buildBarChartConfig({
+			panelId: 'p1',
+			spec: {} as DashboardtypesBarChartPanelSpecDTO,
+			builderQueries: [],
+			series: [
+				{
+					queryName: 'A',
+					legend: 'A',
+					labels: {},
+					values: [
+						{ timestamp: 1000, value: 1 },
+						{ timestamp: 61000, value: 0.2, partial: true },
+					],
+					kind: 'series',
+					aggregation: { index: 0, alias: 'A' },
+				},
+			],
+			isDarkMode: false,
+			timezone: UTC_TIMEZONE,
+			panelMode: PanelMode.DASHBOARD_VIEW,
+		}).getConfig().series?.[1] as ExtendedSeries;
+
+		expect(config.partialTimestamps).toStrictEqual(new Set([61]));
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/BarChartPanel/utils/buildConfig.ts

@@ -5,7 +5,10 @@ import {
 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/baseConfigBuilder';
 import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
-import { toClickPluginPayload } from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
+import {
+	getPartialTimestamps,
+	toClickPluginPayload,
+} from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
 import getLabelName from 'lib/getLabelName';
 import { DrawStyle } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
@@ -102,6 +105,7 @@ function addSeries({
 			isDarkMode,
 			stepInterval,
 			metric: s.labels,
+			partialTimestamps: getPartialTimestamps(s.values),
 		});
 	});
 }

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/__tests__/buildConfig.test.ts

@@ -1,5 +1,6 @@
 import type { DashboardtypesTimeSeriesPanelSpecDTO } from 'api/generated/services/sigNoz.schemas';
 import { UTC_TIMEZONE } from 'components/CustomTimePicker/timezoneUtils';
+import type { ExtendedSeries } from 'lib/uPlotV2/config/types';
 import { PanelMode } from 'lib/visualization/panels/types';
 import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 
@@ -74,3 +75,27 @@ describe('buildTimeSeriesConfig spanGaps', () => {
 		).toStrictEqual([10]);
 	});
 });
+
+describe('buildTimeSeriesConfig partial buckets', () => {
+	it('passes partial timestamps (epoch seconds) to the series', () => {
+		const config = buildTimeSeriesConfig({
+			panelId: 'p1',
+			spec: {} as DashboardtypesTimeSeriesPanelSpecDTO,
+			builderQueries: [],
+			series: [
+				{
+					...series[0],
+					values: [
+						{ timestamp: 1000, value: 1 },
+						{ timestamp: 61000, value: 0.2, partial: true },
+					],
+				},
+			],
+			isDarkMode: false,
+			timezone: UTC_TIMEZONE,
+			panelMode: PanelMode.DASHBOARD_VIEW,
+		}).getConfig().series?.[1] as ExtendedSeries;
+
+		expect(config.partialTimestamps).toStrictEqual(new Set([61]));
+	});
+});

frontend/src/pages/DashboardPage/DashboardContainer/Panels/kinds/TimeSeriesPanel/utils/buildConfig.ts

@@ -13,6 +13,7 @@ import { resolveSpanGaps } from 'pages/DashboardPage/DashboardContainer/Panels/u
 import { resolveSeriesLabelV5 } from 'pages/DashboardPage/DashboardContainer/Panels/utils/resolveSeriesLabel';
 import type { PanelSeries } from 'pages/DashboardPage/DashboardContainer/queryV5/types';
 import {
+	getPartialTimestamps,
 	hasSingleVisiblePoint,
 	toClickPluginPayload,
 } from 'pages/DashboardPage/DashboardContainer/queryV5/uplotData';
@@ -149,6 +150,7 @@ function addSeries({
 			fillMode,
 			isDarkMode,
 			metric: s.labels,
+			partialTimestamps: getPartialTimestamps(s.values),
 		});
 	});
 }

frontend/src/pages/DashboardPage/DashboardContainer/queryV5/__tests__/uplotData.test.ts

@@ -1,5 +1,6 @@
 import type { PanelSeries } from '../types';
 import {
+	getPartialTimestamps,
 	hasSingleVisiblePoint,
 	prepareAlignedData,
 	toClickPluginPayload,
@@ -85,6 +86,22 @@ describe('hasSingleVisiblePoint', () => {
 	});
 });
 
+describe('getPartialTimestamps', () => {
+	it('returns partial timestamps in epoch seconds', () => {
+		expect(
+			getPartialTimestamps([
+				{ timestamp: 1_000_500, value: 1, partial: true },
+				{ timestamp: 2_000_000, value: 2 },
+				{ timestamp: 3_000_000, value: 3, partial: true },
+			]),
+		).toStrictEqual(new Set([1000, 3000]));
+	});
+
+	it('returns undefined when nothing is partial', () => {
+		expect(getPartialTimestamps([{ timestamp: 1000, value: 1 }])).toBeUndefined();
+	});
+});
+
 describe('toClickPluginPayload', () => {
 	it('produces the tuple-shaped legacy result the shared click plugin reads', () => {
 		const payload = toClickPluginPayload([

frontend/src/pages/DashboardPage/DashboardContainer/queryV5/uplotData.ts

@@ -41,6 +41,19 @@ export function prepareAlignedData(series: PanelSeries[]): uPlot.AlignedData {
 	return [timestamps, ...yValues] as uPlot.AlignedData;
 }
 
+/** Epoch-second x values of the series' partial buckets; `undefined` when none are partial. */
+export function getPartialTimestamps(
+	values: PanelSeriesPoint[],
+): Set<number> | undefined {
+	const timestamps = new Set<number>();
+	values.forEach((point) => {
+		if (point.partial) {
+			timestamps.add(Math.floor(point.timestamp / 1000));
+		}
+	});
+	return timestamps.size ? timestamps : undefined;
+}
+
 /**
  * True when the series has at most one finite point — can't draw a line, so renderers degrade to
  * points (V1 `hasSingleVisiblePoint` parity).

frontend/src/pages/TraceDetailsV3/AIThreadMessage/AIThreadMessage.module.scss

@@ -0,0 +1,381 @@
+// Design token Paragraph/Base/400.
+@mixin paragraph-base {
+	font-size: var(--periscope-font-size-base);
+	font-weight: var(--font-weight-normal);
+	line-height: var(--line-height-20);
+}
+
+.message {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	min-width: 0;
+}
+
+.roleHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--spacing-4);
+	color: var(--l1-foreground);
+}
+
+// Typography sets size, weight and line height; the mixin adds the rest.
+.roleLabel {
+	@include paragraph-base;
+}
+
+.parts {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-4);
+	min-width: 0;
+}
+
+.empty {
+	font-size: var(--periscope-font-size-base);
+	font-style: italic;
+	color: var(--l2-foreground);
+}
+
+.textBox {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	padding: var(--spacing-3) var(--spacing-5);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	background: var(--l2-background);
+	min-width: 0;
+}
+
+.text {
+	@include paragraph-base;
+
+	color: var(--l2-foreground);
+	word-break: break-word;
+
+	:global(p) {
+		margin: 0 0 var(--spacing-4);
+	}
+
+	:global(p:last-child) {
+		margin-bottom: 0;
+	}
+
+	:global(:is(ol, ul)) {
+		margin: 0 0 var(--spacing-4);
+		padding-left: var(--spacing-10);
+	}
+
+	:global(li::marker) {
+		color: var(--l2-foreground);
+	}
+
+	:global(:is(h1, h2, h3, h4, h5, h6)) {
+		margin: var(--spacing-6) 0 var(--spacing-4);
+		font-size: var(--periscope-font-size-base);
+		font-weight: var(--font-weight-semibold);
+		line-height: var(--line-height-20);
+		color: var(--l1-foreground);
+	}
+
+	:global(:is(h1, h2)) {
+		font-size: var(--periscope-font-size-medium);
+	}
+
+	:global(:is(h1, h2, h3, h4, h5, h6):first-child) {
+		margin-top: 0;
+	}
+
+	:global(strong) {
+		font-weight: var(--font-weight-semibold);
+		color: var(--l1-foreground);
+	}
+
+	:global(a) {
+		color: var(--accent-primary);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	:global(code:not(pre code)) {
+		padding: 0 var(--spacing-2);
+		border: 1px solid var(--l2-border);
+		border-radius: var(--radius-2);
+		background: var(--l3-background);
+		font-family: var(--font-mono);
+		font-size: 0.92em;
+		color: var(--l1-foreground);
+	}
+
+	:global(pre) {
+		position: relative;
+		margin: 0 0 var(--spacing-4);
+	}
+
+	// The highlighter sets its box with inline styles; syntax colours stay its own.
+	:global(pre > div:not(.code-copy-btn)) {
+		margin: 0 !important;
+		padding: var(--spacing-4) var(--spacing-5) !important;
+		border: 1px solid var(--l2-border);
+		border-radius: var(--radius-2) !important;
+		background: var(--l1-background) !important;
+		overflow-x: auto;
+	}
+
+	:global(pre code) {
+		font-family: var(--font-mono) !important;
+	}
+
+	:global(blockquote) {
+		margin: 0 0 var(--spacing-4);
+		padding-left: var(--spacing-5);
+		border-left: 2px solid var(--l3-border);
+		color: var(--l2-foreground);
+	}
+
+	:global(hr) {
+		margin: var(--spacing-6) 0;
+		border: none;
+		border-top: 1px solid var(--l2-border);
+	}
+}
+
+.plainText {
+	white-space: pre-wrap;
+}
+
+.showMore {
+	align-self: flex-start;
+	padding: 0;
+	border: none;
+	background: none;
+	font-size: var(--font-size-xs);
+	color: var(--primary);
+	cursor: pointer;
+}
+
+.chip {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--spacing-3);
+	align-self: flex-start;
+	max-width: 100%;
+	padding: var(--spacing-2) var(--spacing-4);
+	border-radius: var(--radius-2);
+	background: var(--l2-background);
+	color: var(--l2-foreground);
+	min-width: 0;
+
+	@include paragraph-base;
+
+	&.isPlain {
+		padding: 0;
+		background: none;
+	}
+}
+
+.dot {
+	flex-shrink: 0;
+	width: var(--spacing-3);
+	height: var(--spacing-3);
+	border-radius: var(--radius-round);
+
+	&[data-tone='success'] {
+		background: var(--accent-forest);
+	}
+
+	&[data-tone='warning'] {
+		background: var(--accent-amber);
+	}
+
+	&[data-tone='error'] {
+		background: var(--accent-cherry);
+	}
+
+	&[data-tone='info'] {
+		background: var(--accent-primary);
+	}
+}
+
+.chipLabel {
+	flex-shrink: 0;
+}
+
+.chipSeparator {
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+}
+
+.chipValue {
+	display: inline-flex;
+	gap: var(--spacing-2);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	min-width: 0;
+	color: var(--accent-primary);
+}
+
+.chipKey {
+	flex-shrink: 0;
+}
+
+.toolName {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	color: var(--accent-amber);
+}
+
+.toolCall,
+.toolResult {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	min-width: 0;
+}
+
+.toolCall {
+	border-radius: var(--radius-2);
+	transition: outline-color 0.3s ease;
+	outline: 1px solid transparent;
+	outline-offset: var(--spacing-1);
+
+	&.isHighlighted {
+		outline-color: var(--primary);
+	}
+}
+
+.toolLink {
+	display: inline-flex;
+	align-self: flex-start;
+	max-width: 100%;
+	min-width: 0;
+	padding: 0;
+	border: none;
+	border-radius: var(--radius-2);
+	background: none;
+	font: inherit;
+	color: inherit;
+	text-align: left;
+	cursor: pointer;
+
+	&:hover {
+		.chip {
+			background: var(--l3-background);
+		}
+
+		.toolLinkIcon {
+			color: var(--primary);
+		}
+	}
+}
+
+.toolLinkIcon {
+	flex-shrink: 0;
+	color: var(--l2-foreground);
+}
+
+.collapsible {
+	min-width: 0;
+
+	:global(.ant-collapse-item) {
+		border: none;
+	}
+
+	:global(.ant-collapse-header) {
+		align-items: center !important;
+		gap: var(--spacing-2);
+		padding: 0 !important;
+		font-size: var(--font-size-xs);
+		color: var(--l2-foreground);
+	}
+
+	// Unboxed: the chevron sits right after the label.
+	:global(.ant-collapse-header-text) {
+		flex: none !important;
+		margin-inline-end: 0 !important;
+		color: var(--l2-foreground);
+
+		@include paragraph-base;
+	}
+
+	:global(.ant-collapse-expand-icon) {
+		height: auto !important;
+		padding-inline-start: 0 !important;
+	}
+
+	:global(.ant-collapse-content-box) {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		padding: var(--spacing-4) 0 0 !important;
+	}
+
+	&.boxed {
+		border: 1px solid var(--l2-border);
+		border-radius: var(--radius-2);
+		background: var(--l2-background);
+
+		:global(.ant-collapse-header) {
+			padding: var(--spacing-3) var(--spacing-5) !important;
+		}
+
+		:global(.ant-collapse-header-text) {
+			flex: auto !important;
+		}
+
+		:global(.ant-collapse-content-box) {
+			padding: 0 var(--spacing-5) var(--spacing-4) !important;
+		}
+
+		// The block is the box; nested text drops its own.
+		.textBox {
+			padding: 0;
+			border: none;
+			background: none;
+		}
+	}
+}
+
+.collapsibleChevron {
+	display: flex;
+	color: var(--l2-foreground);
+}
+
+.jsonBlock {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3);
+	min-width: 0;
+}
+
+.json {
+	position: relative;
+	min-width: 0;
+	padding: var(--spacing-3) var(--spacing-4);
+	border: 1px solid var(--l2-border);
+	border-radius: var(--radius-2);
+	cursor: auto;
+
+	:global(.pretty-view) {
+		padding: 0;
+	}
+}
+
+.jsonCollapsed {
+	max-height: 240px;
+	overflow: hidden;
+}
+
+.jsonCopy {
+	position: absolute;
+	top: var(--spacing-2);
+	right: var(--spacing-2);
+	z-index: 1;
+}

frontend/src/pages/TraceDetailsV3/AIThreadMessage/AIThreadMessage.tsx

@@ -0,0 +1,97 @@
+import { Badge } from '@signozhq/ui/badge';
+
+import { ThreadMessage } from './types';
+import CollapsibleBlock from './CollapsibleBlock';
+import MessagePart from './MessagePart';
+import PartChip from './PartChip';
+import RoleLabel from './RoleLabel';
+import { getFinishReasonTone, getRoleLabel } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+export interface AIThreadMessageProps {
+	message: ThreadMessage;
+	isOutput?: boolean;
+	canLinkToToolCall?: (toolCallKey: string) => boolean;
+	onToolLinkClick?: (toolCallKey: string) => void;
+}
+
+function AIThreadMessage({
+	message,
+	isOutput,
+	canLinkToToolCall,
+	onToolLinkClick,
+}: AIThreadMessageProps): JSX.Element {
+	const { role, parts: messageParts, finish_reason: finishReason } = message;
+	const roleLabel = getRoleLabel(role);
+	const tone = getFinishReasonTone(finishReason);
+
+	const parts = (
+		<div className={styles.parts}>
+			{messageParts.length === 0 ? (
+				<span className={styles.empty}>No content</span>
+			) : (
+				messageParts.map((part, index) => (
+					<MessagePart
+						// Parts have no stable id and never reorder.
+						// eslint-disable-next-line react/no-array-index-key
+						key={index}
+						part={part}
+						canLinkToToolCall={canLinkToToolCall}
+						onToolLinkClick={onToolLinkClick}
+					/>
+				))
+			)}
+		</div>
+	);
+
+	return (
+		<div
+			className={styles.message}
+			data-testid={`ai-thread-message-${role || 'unknown'}`}
+		>
+			{role === 'system' || role === 'developer' ? (
+				<CollapsibleBlock
+					label={roleLabel && <RoleLabel label={roleLabel} />}
+					testId="ai-message-system-toggle"
+				>
+					{parts}
+				</CollapsibleBlock>
+			) : (
+				<>
+					{(roleLabel || isOutput) && (
+						<div className={styles.roleHeader}>
+							{roleLabel && <RoleLabel label={roleLabel} />}
+							{isOutput && (
+								<Badge
+									variant="solid"
+									color={tone === 'error' ? 'danger' : tone}
+									testId="ai-message-output-badge"
+								>
+									Output
+								</Badge>
+							)}
+						</div>
+					)}
+					{parts}
+				</>
+			)}
+			{finishReason && (
+				<PartChip
+					label="Finish Reason"
+					value={finishReason}
+					tone={tone}
+					testId="ai-message-finish-reason"
+				/>
+			)}
+		</div>
+	);
+}
+
+AIThreadMessage.defaultProps = {
+	isOutput: false,
+	canLinkToToolCall: undefined,
+	onToolLinkClick: undefined,
+};
+
+export default AIThreadMessage;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/CollapsibleBlock.tsx

@@ -0,0 +1,54 @@
+import { MouseEvent, ReactNode } from 'react';
+import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import { Collapse } from 'antd';
+import cx from 'classnames';
+
+import styles from './AIThreadMessage.module.scss';
+
+const PANEL_KEY = 'content';
+
+interface CollapsibleBlockProps {
+	label: ReactNode;
+	// Boxed: full-width bordered row with the chevron on the right.
+	isBoxed?: boolean;
+	testId?: string;
+	children: ReactNode;
+}
+
+function CollapsibleBlock({
+	label,
+	isBoxed = false,
+	testId,
+	children,
+}: CollapsibleBlockProps): JSX.Element {
+	// Toggling must not count as a click on the message card; the body still does.
+	const stopHeaderClick = (event: MouseEvent): void => {
+		if ((event.target as HTMLElement).closest('.ant-collapse-header')) {
+			event.stopPropagation();
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+		<div onClick={stopHeaderClick}>
+			<Collapse
+				ghost
+				className={cx(styles.collapsible, isBoxed && styles.boxed)}
+				expandIconPosition="end"
+				expandIcon={({ isActive }): JSX.Element => (
+					<span className={styles.collapsibleChevron} data-testid={testId}>
+						{isActive ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+					</span>
+				)}
+				items={[{ key: PANEL_KEY, label, children }]}
+			/>
+		</div>
+	);
+}
+
+CollapsibleBlock.defaultProps = {
+	isBoxed: false,
+	testId: undefined,
+};
+
+export default CollapsibleBlock;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/ExpandableText.tsx

@@ -0,0 +1,57 @@
+import { MouseEvent, useState } from 'react';
+import cx from 'classnames';
+import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
+
+import { MAX_TEXT_LENGTH } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+interface ExpandableTextProps {
+	text: string;
+	isMarkdown?: boolean;
+}
+
+function ExpandableText({
+	text,
+	isMarkdown = false,
+}: ExpandableTextProps): JSX.Element {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const isTruncated = !isExpanded && text.length > MAX_TEXT_LENGTH;
+	const visibleText = isTruncated ? `${text.slice(0, MAX_TEXT_LENGTH)}…` : text;
+
+	const handleToggle = (event: MouseEvent): void => {
+		event.stopPropagation();
+		setIsExpanded((prev) => !prev);
+	};
+
+	return (
+		<>
+			{isMarkdown ? (
+				<MarkdownRenderer
+					className={styles.text}
+					markdownContent={visibleText}
+					variables={{}}
+					isTrusted={false}
+				/>
+			) : (
+				<div className={cx(styles.text, styles.plainText)}>{visibleText}</div>
+			)}
+			{text.length > MAX_TEXT_LENGTH && (
+				<button
+					type="button"
+					className={styles.showMore}
+					onClick={handleToggle}
+					data-testid="ai-message-show-more"
+				>
+					{isExpanded ? 'Show less' : 'Show more'}
+				</button>
+			)}
+		</>
+	);
+}
+
+ExpandableText.defaultProps = {
+	isMarkdown: false,
+};
+
+export default ExpandableText;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/JsonBlock.tsx

@@ -0,0 +1,86 @@
+import { MouseEvent, useMemo, useState } from 'react';
+import cx from 'classnames';
+import CopyButton from 'periscope/components/CopyButton/CopyButton';
+import { PrettyView } from 'periscope/components/PrettyView';
+
+import { MAX_TEXT_LENGTH } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+// Branch toggles (arrow, key, summary); PrettyView already stops its actions menu.
+const TREE_TOGGLES = '.pretty-view__nested-row > :not(ul)';
+const NO_ACTIONS = { leaf: [], nested: [] };
+
+interface JsonBlockProps {
+	data: object;
+	/** Clamp JSON longer than `MAX_TEXT_LENGTH` behind Show more. */
+	isCollapsible?: boolean;
+	/** Tree levels open on first render; 1 shows top-level keys closed. */
+	expandDepth?: number;
+}
+
+// Expanding tree nodes must not count as a click on the message.
+function JsonBlock({
+	data,
+	isCollapsible = true,
+	expandDepth = 1,
+}: JsonBlockProps): JSX.Element {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const text = useMemo(() => JSON.stringify(data, null, 2), [data]);
+	const isLong = isCollapsible && text.length > MAX_TEXT_LENGTH;
+
+	const stopToggleClick = (event: MouseEvent): void => {
+		if ((event.target as HTMLElement).closest(TREE_TOGGLES)) {
+			event.stopPropagation();
+		}
+	};
+
+	const handleToggle = (event: MouseEvent): void => {
+		event.stopPropagation();
+		setIsExpanded((prev) => !prev);
+	};
+
+	return (
+		<div className={styles.jsonBlock}>
+			{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+			<div
+				className={cx(styles.json, isLong && !isExpanded && styles.jsonCollapsed)}
+				onClick={stopToggleClick}
+				data-testid="ai-json-block"
+			>
+				<span className={styles.jsonCopy}>
+					<CopyButton
+						value={text}
+						size={12}
+						ariaLabel="Copy JSON"
+						testId="ai-json-copy"
+					/>
+				</span>
+				<PrettyView
+					data={data as Record<string, unknown>}
+					searchable={false}
+					drawerKey="ai-thread-message"
+					visibleActions={NO_ACTIONS}
+					expandDepth={expandDepth}
+				/>
+			</div>
+			{isLong && (
+				<button
+					type="button"
+					className={styles.showMore}
+					onClick={handleToggle}
+					data-testid="ai-json-show-more"
+				>
+					{isExpanded ? 'Show less' : 'Show more'}
+				</button>
+			)}
+		</div>
+	);
+}
+
+JsonBlock.defaultProps = {
+	isCollapsible: true,
+	expandDepth: 1,
+};
+
+export default JsonBlock;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/MessagePart.tsx

@@ -0,0 +1,105 @@
+import { MessagePart as MessagePartType } from './types';
+import JsonBlock from './JsonBlock';
+import ThinkingPart from './parts/ThinkingPart';
+import ToolCallPart from './parts/ToolCallPart';
+import ToolResultPart from './parts/ToolResultPart';
+import TextContent from './TextContent';
+import {
+	isEmptyPart,
+	toDisplayText,
+	toToolCallKey,
+	truncateBlobContent,
+} from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+const EMPTY_PART = (
+	<span className={styles.empty} data-testid="ai-message-empty-part">
+		No content
+	</span>
+);
+
+interface MessagePartProps {
+	part: MessagePartType;
+	canLinkToToolCall?: (toolCallKey: string) => boolean;
+	onToolLinkClick?: (toolCallKey: string) => void;
+}
+
+function MessagePart({
+	part,
+	canLinkToToolCall,
+	onToolLinkClick,
+}: MessagePartProps): JSX.Element {
+	if (isEmptyPart(part)) {
+		return EMPTY_PART;
+	}
+	switch (part.type) {
+		case 'text':
+			return <TextContent text={part.content} isMarkdown />;
+		case 'reasoning':
+			return <ThinkingPart content={part.content} />;
+		case 'compaction':
+			return (
+				<ThinkingPart
+					label="Compaction"
+					content={part.content ?? undefined}
+					testId="ai-message-compaction-toggle"
+				/>
+			);
+		case 'tool_call':
+			return (
+				<ToolCallPart
+					id={part.id ?? ''}
+					name={part.name ?? ''}
+					args={part.arguments}
+					type={part.type}
+				/>
+			);
+		case 'server_tool_call':
+			return (
+				<ToolCallPart
+					id={part.id ?? ''}
+					name={part.name ?? ''}
+					args={part.server_tool_call}
+					type={part.type}
+				/>
+			);
+		case 'tool_call_response':
+		case 'server_tool_call_response': {
+			const toolCallId = part.id ?? '';
+			const toolCallKey = toToolCallKey(
+				toolCallId,
+				part.type === 'server_tool_call_response',
+			);
+			return (
+				<ToolResultPart
+					toolCallId={toolCallId}
+					toolCallKey={toolCallKey}
+					type={part.type}
+					content={toDisplayText(
+						part.type === 'tool_call_response'
+							? part.response
+							: part.server_tool_call_response,
+					)}
+					isLinkEnabled={!!toolCallId && !!canLinkToToolCall?.(toolCallKey)}
+					onLinkClick={onToolLinkClick}
+				/>
+			);
+		}
+		case 'blob':
+		case 'file':
+		case 'uri':
+			return <JsonBlock data={truncateBlobContent(part)} />;
+		case 'generic':
+			return <TextContent text={toDisplayText(part.content)} />;
+		default:
+			return EMPTY_PART;
+	}
+}
+
+MessagePart.defaultProps = {
+	canLinkToToolCall: undefined,
+	onToolLinkClick: undefined,
+};
+
+export default MessagePart;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/PartChip.tsx

@@ -0,0 +1,52 @@
+import { ReactNode } from 'react';
+import cx from 'classnames';
+
+import { MessageTone } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+interface PartChipProps {
+	label: string;
+	value?: ReactNode;
+	tone?: MessageTone;
+	// Plain: no chip background, for headers like a tool call's.
+	isPlain?: boolean;
+	testId?: string;
+	children?: ReactNode;
+}
+
+function PartChip({
+	label,
+	value,
+	tone = 'success',
+	isPlain = false,
+	testId,
+	children,
+}: PartChipProps): JSX.Element {
+	return (
+		<span
+			className={cx(styles.chip, isPlain && styles.isPlain)}
+			data-testid={testId}
+		>
+			<span className={styles.dot} data-tone={tone} />
+			<span className={styles.chipLabel}>{label}</span>
+			{value !== undefined && (
+				<>
+					<span className={styles.chipSeparator}>—</span>
+					<span className={styles.chipValue}>{value}</span>
+				</>
+			)}
+			{children}
+		</span>
+	);
+}
+
+PartChip.defaultProps = {
+	value: undefined,
+	tone: 'success',
+	isPlain: false,
+	testId: undefined,
+	children: undefined,
+};
+
+export default PartChip;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/RoleLabel.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import styles from './AIThreadMessage.module.scss';
+
+interface RoleLabelProps {
+	label: string;
+}
+
+/** Message role in the design's Paragraph/Base/400 style. */
+function RoleLabel({ label }: RoleLabelProps): JSX.Element {
+	return (
+		<Typography.Text size="base" weight="normal" className={styles.roleLabel}>
+			{label}
+		</Typography.Text>
+	);
+}
+
+export default RoleLabel;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/TextContent.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import ExpandableText from './ExpandableText';
+import JsonBlock from './JsonBlock';
+import { parseJsonObject } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+interface TextContentProps {
+	text: string;
+	isMarkdown?: boolean;
+}
+
+/** Renders JSON text as a tree, anything else as (markdown) text. */
+function TextContent({
+	text,
+	isMarkdown = false,
+}: TextContentProps): JSX.Element {
+	const json = useMemo(() => parseJsonObject(text), [text]);
+
+	if (json) {
+		return <JsonBlock data={json} />;
+	}
+	return (
+		<div className={styles.textBox}>
+			<ExpandableText text={text} isMarkdown={isMarkdown} />
+		</div>
+	);
+}
+
+TextContent.defaultProps = {
+	isMarkdown: false,
+};
+
+export default TextContent;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/__tests__/AIThreadMessage.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render, screen } from 'tests/test-utils';
+
+import AIThreadMessage from '../AIThreadMessage';
+import JsonBlock from '../JsonBlock';
+import { MAX_TEXT_LENGTH } from '../utils';
+
+describe('AIThreadMessage', () => {
+	it('shows the Output badge when the message has no role', () => {
+		render(
+			<AIThreadMessage
+				message={{ parts: [{ type: 'text', content: 'hi' }] }}
+				isOutput
+			/>,
+		);
+
+		expect(screen.getByTestId('ai-message-output-badge')).toBeInTheDocument();
+	});
+
+	it.each([
+		['blank text', { type: 'text' as const, content: '  ' }],
+		['empty generic', { type: 'generic' as const, content: '' }],
+	])('renders No content for a %s part', (_label, part) => {
+		render(<AIThreadMessage message={{ role: 'user', parts: [part] }} />);
+
+		expect(screen.getByTestId('ai-message-empty-part')).toHaveTextContent(
+			'No content',
+		);
+	});
+});
+
+describe('JsonBlock', () => {
+	const big = { value: 'x'.repeat(MAX_TEXT_LENGTH) };
+
+	it('collapses large JSON behind Show more', () => {
+		render(<JsonBlock data={big} />);
+
+		const toggle = screen.getByTestId('ai-json-show-more');
+		expect(toggle).toHaveTextContent('Show more');
+		fireEvent.click(toggle);
+		expect(toggle).toHaveTextContent('Show less');
+	});
+
+	it('does not collapse small or non-collapsible JSON', () => {
+		const { rerender } = render(<JsonBlock data={{ a: 1 }} />);
+		expect(screen.queryByTestId('ai-json-show-more')).not.toBeInTheDocument();
+
+		rerender(<JsonBlock data={big} isCollapsible={false} />);
+		expect(screen.queryByTestId('ai-json-show-more')).not.toBeInTheDocument();
+	});
+
+	it('starts with nested keys collapsed', () => {
+		render(<JsonBlock data={{ outer: { inner: 'hidden-value' } }} />);
+
+		expect(screen.getByText(/outer/)).toBeInTheDocument();
+		expect(screen.queryByText(/hidden-value/)).not.toBeInTheDocument();
+	});
+
+	it('renders a copy button', () => {
+		render(<JsonBlock data={{ a: 1 }} />);
+
+		expect(screen.getByTestId('ai-json-copy')).toBeInTheDocument();
+	});
+});

frontend/src/pages/TraceDetailsV3/AIThreadMessage/messageUtils.ts

@@ -0,0 +1,77 @@
+import { MessagePart, MessagePartType, ThreadMessage } from './types';
+import { toDisplayText } from './utils';
+
+const PART_TYPES = new Set<string>([
+	'text',
+	'reasoning',
+	'compaction',
+	'tool_call',
+	'tool_call_response',
+	'server_tool_call',
+	'server_tool_call_response',
+	'blob',
+	'file',
+	'uri',
+	'generic',
+] satisfies MessagePartType[]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function optionalString(value: unknown): string | undefined {
+	return typeof value === 'string' && value !== '' ? value : undefined;
+}
+
+function toPart(part: unknown): MessagePart {
+	if (typeof part === 'string') {
+		return { type: 'text', content: part };
+	}
+	if (
+		!isRecord(part) ||
+		typeof part.type !== 'string' ||
+		!PART_TYPES.has(part.type)
+	) {
+		return { type: 'generic', content: part };
+	}
+	switch (part.type) {
+		case 'text': {
+			// Some SDKs write "text" in place of the schema's "content".
+			const text = part.content ?? part.text;
+			return {
+				type: 'text',
+				content: typeof text === 'string' ? text : toDisplayText(text),
+			};
+		}
+		case 'reasoning':
+			return {
+				type: 'reasoning',
+				content: optionalString(part.content ?? part.text),
+			};
+		case 'generic':
+			return { type: 'generic', content: part.content ?? part };
+		default:
+			return part as MessagePart;
+	}
+}
+
+function toThreadMessage(item: unknown): ThreadMessage {
+	if (!isRecord(item)) {
+		return { parts: [toPart(item)] };
+	}
+	const body = item.parts ?? item.content;
+	return {
+		role: optionalString(item.role),
+		name: optionalString(item.name),
+		finish_reason: optionalString(item.finish_reason),
+		parts: Array.isArray(body) ? body.map(toPart) : [toPart(body ?? item)],
+	};
+}
+
+/** Normalises formatted or raw `gen_ai.*.messages` values into thread messages. */
+export function toThreadMessages(value: unknown): ThreadMessage[] {
+	if (value === undefined || value === null) {
+		return [];
+	}
+	return (Array.isArray(value) ? value : [value]).map(toThreadMessage);
+}

frontend/src/pages/TraceDetailsV3/AIThreadMessage/parts/ThinkingPart.tsx

@@ -0,0 +1,34 @@
+import CollapsibleBlock from '../CollapsibleBlock';
+import TextContent from '../TextContent';
+
+import styles from '../AIThreadMessage.module.scss';
+
+interface ThinkingPartProps {
+	content?: string;
+	label?: string;
+	testId?: string;
+}
+
+function ThinkingPart({
+	content,
+	label = 'Thinking',
+	testId = 'ai-message-thinking-toggle',
+}: ThinkingPartProps): JSX.Element {
+	return (
+		<CollapsibleBlock label={label} isBoxed testId={testId}>
+			{content ? (
+				<TextContent text={content} isMarkdown />
+			) : (
+				<span className={styles.empty}>Content not captured</span>
+			)}
+		</CollapsibleBlock>
+	);
+}
+
+ThinkingPart.defaultProps = {
+	content: undefined,
+	label: 'Thinking',
+	testId: 'ai-message-thinking-toggle',
+};
+
+export default ThinkingPart;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/parts/ToolCallPart.tsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react';
+
+import JsonBlock from '../JsonBlock';
+import PartChip from '../PartChip';
+import TextContent from '../TextContent';
+import { parseJsonObject, TOOL_CALL_ID_ATTR, toToolCallKey } from '../utils';
+
+import styles from '../AIThreadMessage.module.scss';
+
+interface ToolCallPartProps {
+	id: string;
+	name: string;
+	args: unknown;
+	type: 'tool_call' | 'server_tool_call';
+}
+
+function ToolCallPart({
+	id,
+	name,
+	args,
+	type,
+}: ToolCallPartProps): JSX.Element {
+	// Streamed calls can carry truncated, unparseable argument strings.
+	const json = useMemo(() => {
+		if (typeof args === 'string') {
+			return parseJsonObject(args);
+		}
+		return typeof args === 'object' && args !== null ? args : undefined;
+	}, [args]);
+
+	const toolCallAttr = {
+		[TOOL_CALL_ID_ATTR]: toToolCallKey(id, type === 'server_tool_call'),
+	};
+
+	return (
+		<div className={styles.toolCall} {...toolCallAttr} data-testid="ai-tool-call">
+			<PartChip
+				label={type}
+				tone="info"
+				isPlain
+				value={
+					<>
+						<span className={styles.chipKey}>name :</span>
+						<span className={styles.toolName}>{name}</span>
+					</>
+				}
+			/>
+			{json ? (
+				<JsonBlock data={json} />
+			) : (
+				args !== undefined &&
+				args !== null && (
+					<TextContent
+						text={typeof args === 'string' ? args : JSON.stringify(args)}
+					/>
+				)
+			)}
+		</div>
+	);
+}
+
+export default ToolCallPart;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/parts/ToolResultPart.tsx

@@ -0,0 +1,80 @@
+import { MouseEvent, useMemo } from 'react';
+import { CornerUpRight } from '@signozhq/icons';
+
+import PartChip from '../PartChip';
+import TextContent from '../TextContent';
+import { MAX_INLINE_RESULT_LENGTH, parseJsonObject } from '../utils';
+
+import styles from '../AIThreadMessage.module.scss';
+
+interface ToolResultPartProps {
+	toolCallId: string;
+	toolCallKey: string;
+	type: 'tool_call_response' | 'server_tool_call_response';
+	name?: string;
+	content: string;
+	isError?: boolean;
+	isLinkEnabled: boolean;
+	onLinkClick?: (toolCallKey: string) => void;
+}
+
+function ToolResultPart({
+	toolCallId,
+	toolCallKey,
+	type,
+	name,
+	content,
+	isError,
+	isLinkEnabled,
+	onLinkClick,
+}: ToolResultPartProps): JSX.Element {
+	// Short plain results fit in the chip; JSON or long ones render below it.
+	const isInline = useMemo(
+		() => content.length <= MAX_INLINE_RESULT_LENGTH && !parseJsonObject(content),
+		[content],
+	);
+
+	const handleLinkClick = (event: MouseEvent): void => {
+		event.stopPropagation();
+		onLinkClick?.(toolCallKey);
+	};
+
+	const chip = (
+		<PartChip
+			label={type}
+			value={isInline ? content || '…' : name || toolCallId}
+			tone={isError ? 'error' : 'success'}
+		>
+			{isLinkEnabled && (
+				<CornerUpRight size={12} className={styles.toolLinkIcon} />
+			)}
+		</PartChip>
+	);
+
+	return (
+		<div className={styles.toolResult} data-testid="ai-tool-result">
+			{isLinkEnabled ? (
+				<button
+					type="button"
+					className={styles.toolLink}
+					onClick={handleLinkClick}
+					title="Go to tool call"
+					data-testid="ai-tool-result-link"
+				>
+					{chip}
+				</button>
+			) : (
+				chip
+			)}
+			{!isInline && <TextContent text={content} />}
+		</div>
+	);
+}
+
+ToolResultPart.defaultProps = {
+	name: undefined,
+	isError: false,
+	onLinkClick: undefined,
+};
+
+export default ToolResultPart;

frontend/src/pages/TraceDetailsV3/AIThreadMessage/types.ts

@@ -0,0 +1,52 @@
+import type {
+	AiobservabilitytypesBlobPartDTO,
+	AiobservabilitytypesCompactionPartDTO,
+	AiobservabilitytypesFilePartDTO,
+	AiobservabilitytypesOutputMessageDTO,
+	AiobservabilitytypesReasoningPartDTO,
+	AiobservabilitytypesServerToolCallPartDTO,
+	AiobservabilitytypesServerToolCallResponsePartDTO,
+	AiobservabilitytypesTextPartDTO,
+	AiobservabilitytypesToolCallRequestPartDTO,
+	AiobservabilitytypesToolCallResponsePartDTO,
+	AiobservabilitytypesUriPartDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Generated enum `type`s as string literals, so `part.type === 'text'` narrows.
+type Part<T extends { type: string }> = Omit<T, 'type'> & {
+	type: `${T['type']}`;
+};
+
+// Keys the schema marks required may still be missing.
+type LoosePart<T extends { type: string }> = Partial<Omit<T, 'type'>> & {
+	type: `${T['type']}`;
+};
+
+/** OTel GenAI message part; `text` content is always normalised to a string. */
+export type MessagePart =
+	| Part<AiobservabilitytypesTextPartDTO>
+	| LoosePart<AiobservabilitytypesReasoningPartDTO>
+	| LoosePart<AiobservabilitytypesCompactionPartDTO>
+	| LoosePart<AiobservabilitytypesToolCallRequestPartDTO>
+	| LoosePart<AiobservabilitytypesToolCallResponsePartDTO>
+	| LoosePart<AiobservabilitytypesServerToolCallPartDTO>
+	| LoosePart<AiobservabilitytypesServerToolCallResponsePartDTO>
+	| LoosePart<AiobservabilitytypesBlobPartDTO>
+	| LoosePart<AiobservabilitytypesFilePartDTO>
+	| LoosePart<AiobservabilitytypesUriPartDTO>
+	| { type: 'generic'; content?: unknown };
+
+export type MessagePartType = MessagePart['type'];
+
+export type MediaMessagePart = Extract<
+	MessagePart,
+	{ type: 'blob' | 'file' | 'uri' }
+>;
+
+// role: system | developer | user | assistant | tool; any other value renders headerless.
+// finish_reason: stop | tool_call | length | content_filter | compaction | error, or provider-specific.
+export type ThreadMessage = Partial<
+	Omit<AiobservabilitytypesOutputMessageDTO, 'parts'>
+> & {
+	parts: MessagePart[];
+};

frontend/src/pages/TraceDetailsV3/AIThreadMessage/useToolCallLinks.ts

@@ -0,0 +1,43 @@
+import { RefObject, useCallback } from 'react';
+
+import { TOOL_CALL_ID_ATTR } from './utils';
+
+import styles from './AIThreadMessage.module.scss';
+
+const HIGHLIGHT_MS = 1500;
+
+interface ToolCallLinks {
+	canLinkToToolCall: (toolCallKey: string) => boolean;
+	onToolLinkClick: (toolCallKey: string) => void;
+}
+
+/** Links tool results to their calls in `rootRef`; enabled only for keys in `toolCallKeys`. */
+export function useToolCallLinks(
+	rootRef: RefObject<HTMLElement>,
+	toolCallKeys: Set<string>,
+): ToolCallLinks {
+	const canLinkToToolCall = useCallback(
+		(toolCallKey: string): boolean => toolCallKeys.has(toolCallKey),
+		[toolCallKeys],
+	);
+
+	const onToolLinkClick = useCallback(
+		(toolCallKey: string): void => {
+			const target = rootRef.current?.querySelector<HTMLElement>(
+				`[${TOOL_CALL_ID_ATTR}="${CSS.escape(toolCallKey)}"]`,
+			);
+			if (!target) {
+				return;
+			}
+			target.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			target.classList.add(styles.isHighlighted);
+			window.setTimeout(
+				() => target.classList.remove(styles.isHighlighted),
+				HIGHLIGHT_MS,
+			);
+		},
+		[rootRef],
+	);
+
+	return { canLinkToToolCall, onToolLinkClick };
+}

frontend/src/pages/TraceDetailsV3/AIThreadMessage/utils.ts

@@ -0,0 +1,96 @@
+import { attempt, isError, isObjectLike } from 'lodash-es';
+
+import { MediaMessagePart, MessagePart, ThreadMessage } from './types';
+
+export const MAX_TEXT_LENGTH = 1000;
+
+const MAX_BLOB_PREVIEW_LENGTH = 100;
+
+export const MAX_INLINE_RESULT_LENGTH = 80;
+
+export const TOOL_CALL_ID_ATTR = 'data-tool-call-id';
+
+const ROLE_LABELS: Record<string, string> = {
+	system: 'System',
+	developer: 'Developer',
+	user: 'User',
+	assistant: 'Assistant',
+	tool: 'Tool',
+};
+
+export type MessageTone = 'success' | 'warning' | 'error' | 'info';
+
+// Provider values the backend could not map fall back to info.
+const FINISH_REASON_TONES: Record<string, MessageTone> = {
+	stop: 'success',
+	tool_call: 'success',
+	length: 'warning',
+	content_filter: 'warning',
+	compaction: 'info',
+	error: 'error',
+};
+
+/** Undefined for missing or unknown roles, which render headerless. */
+export function getRoleLabel(role?: string): string | undefined {
+	return role ? ROLE_LABELS[role] : undefined;
+}
+
+export function getFinishReasonTone(reason?: string | null): MessageTone {
+	return (reason && FINISH_REASON_TONES[reason.toLowerCase()]) || 'info';
+}
+
+/** Parses objects and arrays only; scalars and invalid JSON return undefined. */
+export function parseJsonObject(text: string): object | undefined {
+	const parsed: unknown = attempt(JSON.parse, text);
+	return isObjectLike(parsed) && !isError(parsed)
+		? (parsed as object)
+		: undefined;
+}
+
+export function toDisplayText(value: unknown): string {
+	if (value === undefined || value === null) {
+		return '';
+	}
+	return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+}
+
+/** Text and generic parts with only whitespace have nothing to render. */
+export function isEmptyPart(part: MessagePart): boolean {
+	if (part.type === 'text') {
+		return part.content.trim() === '';
+	}
+	if (part.type === 'generic') {
+		return toDisplayText(part.content).trim() === '';
+	}
+	return false;
+}
+
+/** Blob content is inline base64; only a prefix is shown. */
+export function truncateBlobContent(part: MediaMessagePart): MediaMessagePart {
+	if (
+		part.type !== 'blob' ||
+		!part.content ||
+		part.content.length <= MAX_BLOB_PREVIEW_LENGTH
+	) {
+		return part;
+	}
+	return {
+		...part,
+		content: `${part.content.slice(0, MAX_BLOB_PREVIEW_LENGTH)}…`,
+	};
+}
+
+// Server and client calls can share an id, so links match on kind too.
+export function toToolCallKey(id: string, isServer: boolean): string {
+	return `${isServer ? 'server' : 'client'}:${id}`;
+}
+
+export function collectToolCallKeys(messages: ThreadMessage[]): string[] {
+	return messages.flatMap((message) =>
+		message.parts.flatMap((part) =>
+			(part.type === 'tool_call' || part.type === 'server_tool_call') && part.id
+				? [toToolCallKey(part.id, part.type === 'server_tool_call')]
+				: [],
+		),
+	);
+}

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataItem.tsx

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { Tooltip } from '@signozhq/ui/tooltip';
+import { Tooltip, TooltipProps } from '@signozhq/ui/tooltip';
 import { Typography } from '@signozhq/ui/typography';
 
 import styles from './EntityMetadataItem.module.scss';
 
 interface EntityMetadataItemProps {
-	tooltip: string;
+	tooltip: TooltipProps['title'];
 	icon?: ReactNode;
 	children: ReactNode;
 }
@@ -16,7 +16,8 @@ function EntityMetadataItem({
 	children,
 }: EntityMetadataItemProps): JSX.Element {
 	return (
-		<Tooltip title={tooltip}>
+		// Below the row: above it the tooltip covers the Overview / Thread tabs.
+		<Tooltip title={tooltip} side="bottom">
 			<span className={styles.item}>
 				{icon}
 				<Typography.Text as="span">{children}</Typography.Text>

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataRow.module.scss

@@ -8,3 +8,12 @@
 	// Keep Typography.Text at the row's size (it reads this var, not inherited font-size).
 	--typography-font-size: var(--periscope-font-size-base);
 }
+
+.tokenTooltip {
+	composes: tooltipBody from '../shared.module.scss';
+	min-width: 180px;
+}
+
+.tokenTooltipTitle {
+	padding-bottom: var(--spacing-4);
+}

frontend/src/pages/TraceDetailsV3/EntityMetadata/EntityMetadataRow.tsx

@@ -1,10 +1,18 @@
-import { CalendarClock, Server, Timer } from '@signozhq/icons';
+import { CalendarClock, Coins, Landmark, Server, Timer } from '@signozhq/icons';
 import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import HttpStatusBadge from 'components/HttpStatusBadge/HttpStatusBadge';
 
+import {
+	AiTokenCounts,
+	formatCost,
+	formatTokens,
+	getTotalInputTokens,
+	hasValue,
+} from '../utils/aiTraceUtils';
 import EntityMetadataItem from './EntityMetadataItem';
+import TokenUsageTooltip from './TokenUsageTooltip';
 
 import styles from './EntityMetadataRow.module.scss';
 
@@ -16,6 +24,8 @@ interface EntityMetadataRowProps {
 	execTimePercent?: number;
 	timestamp?: string;
 	statusCode?: string | number;
+	tokens?: AiTokenCounts;
+	cost?: number | null;
 }
 
 const ICON_SIZE = 14;
@@ -32,8 +42,11 @@ function EntityMetadataRow({
 	execTimePercent,
 	timestamp,
 	statusCode,
+	tokens,
+	cost,
 }: EntityMetadataRowProps): JSX.Element {
 	const entityLabel = entity === 'trace' ? 'Trace' : 'Span';
+	const totalInput = tokens && getTotalInputTokens(tokens);
 	const durationTooltip =
 		entity === 'trace' ? 'Trace Duration' : 'Span Duration';
 	// Single source of duration formatting so both rows label units identically.
@@ -91,6 +104,24 @@ function EntityMetadataRow({
 					<HttpStatusBadge statusCode={statusCode} />
 				</EntityMetadataItem>
 			)}
+
+			{tokens && (
+				<EntityMetadataItem
+					tooltip={<TokenUsageTooltip tokens={tokens} />}
+					icon={<Coins size={ICON_SIZE} />}
+				>
+					Tokens: {formatTokens(totalInput)} → {formatTokens(tokens.output)}
+				</EntityMetadataItem>
+			)}
+
+			{hasValue(cost) && (
+				<EntityMetadataItem
+					tooltip="Total cost"
+					icon={<Landmark size={ICON_SIZE} />}
+				>
+					Cost — {formatCost(cost)}
+				</EntityMetadataItem>
+			)}
 		</div>
 	);
 }
@@ -102,6 +133,8 @@ EntityMetadataRow.defaultProps = {
 	execTimePercent: undefined,
 	timestamp: undefined,
 	statusCode: undefined,
+	tokens: undefined,
+	cost: undefined,
 };
 
 export default EntityMetadataRow;

frontend/src/pages/TraceDetailsV3/EntityMetadata/TokenUsageTooltip.tsx

@@ -0,0 +1,35 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import TokenBreakdown from '../TokenBreakdown/TokenBreakdown';
+import { AiTokenCounts } from '../utils/aiTraceUtils';
+
+import styles from './EntityMetadataRow.module.scss';
+
+interface TokenUsageTooltipProps {
+	tokens: AiTokenCounts;
+}
+
+function TokenUsageTooltip({ tokens }: TokenUsageTooltipProps): JSX.Element {
+	const { input, output, cacheRead, cacheWrite, reasoning } = tokens;
+
+	return (
+		<div className={styles.tokenTooltip}>
+			<Typography.Text
+				size="small"
+				weight="normal"
+				className={styles.tokenTooltipTitle}
+			>
+				Usage Breakdown
+			</Typography.Text>
+			<TokenBreakdown
+				input={input}
+				output={output}
+				cacheRead={cacheRead}
+				cacheWrite={cacheWrite}
+				reasoning={reasoning}
+			/>
+		</div>
+	);
+}
+
+export default TokenUsageTooltip;