Merge branch 'main' into postprocess-json-logs

* fix: return span start time similar to waterfall v2

* chore: update openapi specs

* chore: rename timestamp field to match style of other fields

* chore: rename the struct field to keep json and field same

docs/api/openapi.yml

@@ -5321,6 +5321,9 @@ components:
         sub_tree_node_count:
           minimum: 0
           type: integer
+        time_unix:
+          minimum: 0
+          type: integer
         trace_id:
           type: string
         trace_state:

frontend/package.json

@@ -36,7 +36,6 @@
     "@ant-design/icons": "4.8.0",
     "@codemirror/autocomplete": "6.18.6",
     "@codemirror/lang-javascript": "6.2.3",
-    "@dagrejs/dagre": "3.0.0",
     "@dnd-kit/core": "6.1.0",
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
@@ -64,7 +63,6 @@
     "@visx/shape": "3.5.0",
     "@visx/tooltip": "3.3.0",
     "@vitejs/plugin-react": "5.1.4",
-    "@xyflow/react": "12.10.2",
     "ansi-to-html": "0.7.2",
     "antd": "5.11.0",
     "antd-table-saveas-excel": "2.2.1",
@@ -117,6 +115,7 @@
     "react-dom": "18.2.0",
     "react-drag-listview": "2.0.0",
     "react-error-boundary": "4.0.11",
+    "react-force-graph-2d": "^1.29.1",
     "react-full-screen": "1.1.1",
     "react-grid-layout": "^1.3.4",
     "react-helmet-async": "1.3.0",

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

@@ -7714,6 +7714,11 @@ export interface TracedetailtypesWaterfallSpanDTO {
 	 * @minimum 0
 	 */
 	sub_tree_node_count?: number;
+	/**
+	 * @type integer
+	 * @minimum 0
+	 */
+	time_unix?: number;
 	/**
 	 * @type string
 	 */

frontend/src/components/LogDetail/index.tsx

@@ -49,6 +49,7 @@ import {
 } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
+import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -216,20 +217,17 @@ function LogDetailInner({
 
 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return log?.body || '';
+			return (log?.body as string) ?? '';
 		}
-
-		try {
-			const json = JSON.parse(log?.body || '');
-
-			if (typeof json?.message === 'string' && json.message !== '') {
-				return json.message;
-			}
-
-			return log?.body || '';
-		} catch (error) {
-			return log?.body || '';
+		// Feature enabled: body is always a map; message is always a string
+		const bodyObj = log?.body as ILogBody;
+		if (!bodyObj) {
+			return '';
 		}
+		if (bodyObj.message) {
+			return bodyObj.message;
+		}
+		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(

frontend/src/components/Logs/RawLogView/index.tsx

@@ -9,7 +9,10 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -99,7 +102,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${data.body}`);
+			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
 		} else {
 			parts.push(attributesText);
 		}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -2,7 +2,10 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
+import {
+	getBodyDisplayString,
+	getSanitizedLogBody,
+} from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -87,7 +90,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => log.body,
+					accessorFn: (log): string => getBodyDisplayString(log.body),
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.tsx

@@ -19,6 +19,7 @@ import {
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { isArray } from 'lodash-es';
+import { getBodyDisplayString } from 'container/LogDetailedView/utils';
 import { ChevronDown, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -173,7 +174,7 @@ export default function Events({
 				(event): EventDataType => ({
 					timestamp: event.timestamp,
 					severity: event.data.severity_text,
-					body: event.data.body,
+					body: getBodyDisplayString(event.data.body),
 					id: event.data.id,
 					key: event.data.id,
 					resources_string: event.data.resources_string,

frontend/src/container/LogDetailedView/Overview.tsx

@@ -13,7 +13,7 @@ import { ILog } from 'types/api/logs/log';
 
 import { ActionItemProps } from './ActionItem';
 import TableView from './TableView';
-import { removeEscapeCharacters } from './utils';
+import { getBodyDisplayString, removeEscapeCharacters } from './utils';
 
 import './Overview.styles.scss';
 
@@ -112,7 +112,7 @@ function Overview({
 						children: (
 							<div className="logs-body-content">
 								<MEditor
-									value={removeEscapeCharacters(logData.body)}
+									value={removeEscapeCharacters(getBodyDisplayString(logData.body))}
 									language="json"
 									options={options}
 									onChange={(): void => {}}

frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts

@@ -10,7 +10,7 @@ const MAX_BODY_BYTES = 100 * 1024; // 100 KB
 
 // Hook for async JSON processing
 const useAsyncJSONProcessing = (
-	value: string,
+	value: string | Record<string, unknown>,
 	shouldProcess: boolean,
 	handleChangeSelectedView?: ChangeViewFunctionType,
 ): {
@@ -40,11 +40,17 @@ const useAsyncJSONProcessing = (
 			return (): void => {};
 		}
 
-		// Avoid processing if the json is too large
-		const byteSize = new Blob([value]).size;
-		if (byteSize > MAX_BODY_BYTES) {
-			return (): void => {};
-		}
+		// When value is already a parsed object skip the size check and JSON parsing
+		const parseBody = (): Record<string, unknown> | null => {
+			if (typeof value === 'object' && value !== null) {
+				return value as Record<string, unknown>;
+			}
+			const byteSize = new Blob([value as string]).size;
+			if (byteSize > MAX_BODY_BYTES) {
+				return null;
+			}
+			return recursiveParseJSON(value as string);
+		};
 
 		processingRef.current = true;
 		setJsonState({ isLoading: true, treeData: null, error: null });
@@ -53,8 +59,8 @@ const useAsyncJSONProcessing = (
 		const processAsync = (): void => {
 			setTimeout(() => {
 				try {
-					const parsedBody = recursiveParseJSON(value);
-					if (!isEmpty(parsedBody)) {
+					const parsedBody = parseBody();
+					if (parsedBody && !isEmpty(parsedBody)) {
 						const treeData = jsonToDataNodes(parsedBody, {
 							isBodyJsonQueryEnabled,
 							handleChangeSelectedView,
@@ -82,8 +88,8 @@ const useAsyncJSONProcessing = (
 					// eslint-disable-next-line sonarjs/no-identical-functions
 					(): void => {
 						try {
-							const parsedBody = recursiveParseJSON(value);
-							if (!isEmpty(parsedBody)) {
+							const parsedBody = parseBody();
+							if (parsedBody && !isEmpty(parsedBody)) {
 								const treeData = jsonToDataNodes(parsedBody, {
 									isBodyJsonQueryEnabled,
 									handleChangeSelectedView,

frontend/src/container/LogDetailedView/utils.tsx

@@ -4,7 +4,11 @@ import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
-import { ILog, ILogAggregateAttributesResources } from 'types/api/logs/log';
+import {
+	ILog,
+	ILogAggregateAttributesResources,
+	ILogBody,
+} from 'types/api/logs/log';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { FORBID_DOM_PURIFY_ATTR, FORBID_DOM_PURIFY_TAGS } from 'utils/app';
 
@@ -433,3 +437,24 @@ export const getSanitizedLogBody = (
 		return '{}';
 	}
 };
+
+// Returns a plain string for display contexts (Monaco editor, table cells, raw log row).
+export function getBodyDisplayString(body: string | ILogBody): string {
+	return typeof body === 'string' ? body : JSON.stringify(body as ILogBody);
+}
+
+// Returns the primary "message" text for compact log row previews.
+export function getBodyMessage(
+	body: string | ILogBody,
+	isBodyJsonEnabled: boolean,
+): string {
+	if (!isBodyJsonEnabled) {
+		return (body as string) ?? '';
+	}
+	// Feature enabled: body is always a map; message is always a string
+	const msg = (body as ILogBody).message;
+	if (msg) {
+		return msg;
+	}
+	return JSON.stringify(body);
+}

frontend/src/container/PipelinePage/PipelineListsView/Preview/components/LogsList/index.tsx

@@ -2,6 +2,7 @@ import { ExpandAltOutlined } from '@ant-design/icons';
 import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { getBodyDisplayString } from 'container/LogDetailedView/utils';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useTimezone } from 'providers/Timezone';
 import { ILog } from 'types/api/logs/log';
@@ -26,7 +27,9 @@ function LogsList({ logs }: LogsListProps): JSX.Element {
 							DATE_TIME_FORMATS.UTC_MONTH_SHORT,
 						)}
 					</div>
-					<div className="logs-preview-list-item-body">{log.body}</div>
+					<div className="logs-preview-list-item-body">
+						{getBodyDisplayString(log.body)}
+					</div>
 					<div
 						className="logs-preview-list-item-expand"
 						onClick={makeLogDetailsHandler(log)}

frontend/src/modules/Servicemap/Map.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable  */
+//@ts-nocheck
+import { memo } from 'react';
+import ForceGraph2D from 'react-force-graph-2d';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { getGraphData, getTooltip, transformLabel } from './utils';
+
+function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	const { nodes, links } = getGraphData(serviceMap, isDarkMode);
+
+	const graphData = { nodes, links };
+
+	let zoomLevel = 1;
+
+	return (
+		<ForceGraph2D
+			ref={fgRef}
+			cooldownTicks={100}
+			graphData={graphData}
+			linkLabel={getTooltip}
+			linkAutoColorBy={(d) => d.target}
+			linkDirectionalParticles="value"
+			linkDirectionalParticleSpeed={(d) => d.value}
+			nodeCanvasObject={(node, ctx) => {
+				const label = transformLabel(node.id, zoomLevel);
+				let { fontSize } = node;
+				fontSize = (fontSize * 3) / zoomLevel;
+				ctx.font = `${fontSize}px Roboto`;
+				const { width } = node;
+
+				ctx.fillStyle = node.color;
+				ctx.beginPath();
+				ctx.arc(node.x, node.y, width, 0, 2 * Math.PI, false);
+				ctx.fill();
+				ctx.textAlign = 'center';
+				ctx.textBaseline = 'middle';
+				ctx.fillStyle = isDarkMode ? '#ffffff' : '#000000';
+				ctx.fillText(label, node.x, node.y);
+			}}
+			onLinkHover={(node) => {
+				const tooltip = document.querySelector('.graph-tooltip');
+				if (tooltip && node) {
+					tooltip.innerHTML = getTooltip(node);
+				}
+			}}
+			onZoom={(zoom) => {
+				zoomLevel = zoom.k;
+			}}
+			nodePointerAreaPaint={(node, color, ctx) => {
+				ctx.fillStyle = color;
+				ctx.beginPath();
+				ctx.arc(node.x, node.y, 5, 0, 2 * Math.PI, false);
+				ctx.fill();
+			}}
+		/>
+	);
+}
+
+export default memo(ServiceMap);

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -1,6 +1,6 @@
 //@ts-nocheck
 
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { connect } from 'react-redux';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
@@ -16,9 +16,27 @@ import { AppState } from 'store/reducers';
 import styled from 'styled-components';
 import { GlobalTime } from 'types/actions/globalTime';
 
-import Map from './components/Map/Map';
+import Map from './Map';
 
-const Container = styled.div``;
+const Container = styled.div`
+	.force-graph-container {
+		overflow: scroll;
+	}
+
+	.force-graph-container .graph-tooltip {
+		background: black;
+		padding: 1px;
+		.keyval {
+			display: flex;
+			.key {
+				margin-right: 4px;
+			}
+			.val {
+				margin-left: auto;
+			}
+		}
+	}
+`;
 
 interface ServiceMapProps extends RouteComponentProps<any> {
 	serviceMap: ServiceMapStore;
@@ -30,8 +48,7 @@ interface ServiceMapProps extends RouteComponentProps<any> {
 }
 interface graphNode {
 	id: string;
-	color: string;
-	name: string;
+	group: number;
 }
 interface graphLink {
 	source: string;
@@ -47,6 +64,8 @@ export interface graphDataType {
 }
 
 function ServiceMap(props: ServiceMapProps): JSX.Element {
+	const fgRef = useRef();
+
 	const { getDetailedServiceMapItems, globalTime, serviceMap } = props;
 
 	const { queries } = useResourceAttribute();
@@ -59,6 +78,10 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 		getDetailedServiceMapItems(globalTime, queries);
 	}, [globalTime, getDetailedServiceMapItems, queries]);
 
+	useEffect(() => {
+		fgRef.current && fgRef.current.d3Force('charge').strength(-400);
+	});
+
 	if (serviceMap.loading) {
 		return <Spinner size="large" tip="Loading..." />;
 	}
@@ -85,7 +108,7 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 				}
 			/>
 
-			<Map serviceMap={serviceMap} />
+			<Map fgRef={fgRef} serviceMap={serviceMap} />
 		</div>
 	);
 }

frontend/src/modules/Servicemap/components/FlowEdge/FlowEdge.tsx

@@ -1,89 +0,0 @@
-import { BaseEdge, Edge, EdgeProps, getBezierPath } from '@xyflow/react';
-
-import { getParticleAnimation } from '../Map/Map.constants';
-
-export interface FlowEdgeData extends Record<string, unknown> {
-	p99: number;
-	callRate: number;
-	errorRate: number;
-	particleColor: string;
-	maxCallRate: number;
-}
-
-const DEFAULT_PARTICLE_COLOR = 'var(--accent-primary)';
-
-function FlowEdge({
-	id,
-	sourceX,
-	sourceY,
-	targetX,
-	targetY,
-	sourcePosition,
-	targetPosition,
-	style,
-	markerEnd,
-	data,
-}: EdgeProps<Edge<FlowEdgeData>>): JSX.Element {
-	const [edgePath] = getBezierPath({
-		sourceX,
-		sourceY,
-		targetX,
-		targetY,
-		sourcePosition,
-		targetPosition,
-	});
-
-	// Particles flow callee -> caller (child -> parent), opposite to the edge's
-	// source -> target direction. Computing a reversed bezier instead of just
-	// playing the same path backward keeps the curve handles correct on both
-	// ends and avoids relying on `keyPoints`/`calcMode` quirks.
-	const [particlePath] = getBezierPath({
-		sourceX: targetX,
-		sourceY: targetY,
-		targetX: sourceX,
-		targetY: sourceY,
-		sourcePosition: targetPosition,
-		targetPosition: sourcePosition,
-	});
-
-	const callRate = data?.callRate ?? 0;
-	const maxCallRate = data?.maxCallRate ?? 0;
-	const { particleCount, duration } = getParticleAnimation(
-		callRate,
-		maxCallRate,
-	);
-	const fill = data?.particleColor || DEFAULT_PARTICLE_COLOR;
-
-	// Stagger each particle's `begin` so they're evenly distributed around the
-	// loop; the result is a continuous moving stream rather than synchronized
-	// dots stacking on top of each other.
-	const particles = Array.from({ length: particleCount }, (_, i) => {
-		const offset = (duration * i) / particleCount;
-		return (
-			<circle
-				key={`${id}-p${i}`}
-				className="flow-edge__particle"
-				r={2.75}
-				fill={fill}
-				pointerEvents="none"
-			>
-				<animateMotion
-					dur={`${duration}s`}
-					begin={`-${offset.toFixed(3)}s`}
-					repeatCount="indefinite"
-					path={particlePath}
-					rotate="auto"
-				/>
-			</circle>
-		);
-	});
-
-	return (
-		<>
-			<BaseEdge id={id} path={edgePath} style={style} markerEnd={markerEnd} />
-			{particles}
-		</>
-	);
-}
-
-export default FlowEdge;

frontend/src/modules/Servicemap/components/LinkTooltip/LinkTooltip.module.scss

@@ -1,27 +0,0 @@
-.tooltip {
-	position: fixed;
-	pointer-events: none;
-	z-index: 1000;
-	padding: 12px;
-	min-width: 160px;
-	font-size: 12px;
-	font-family: Inter, sans-serif;
-	border-radius: 4px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-	color: var(--popover-foreground);
-	background: var(--popover);
-	border: 1px solid var(--secondary-border);
-}
-
-.row {
-	display: flex;
-	justify-content: space-between;
-}
-
-.label {
-	margin-right: 8px;
-}
-
-.value {
-	margin-left: auto;
-}

frontend/src/modules/Servicemap/components/LinkTooltip/LinkTooltip.tsx

@@ -1,39 +0,0 @@
-import styles from './LinkTooltip.module.scss';
-
-export interface LinkTooltipData {
-	p99: string | number;
-	callRate: string | number;
-	errorRate: string | number;
-}
-
-export interface LinkTooltipProps {
-	tooltip: LinkTooltipData;
-	x: number;
-	y: number;
-}
-
-const POINTER_OFFSET = 12;
-
-function LinkTooltip({ tooltip, x, y }: LinkTooltipProps): JSX.Element {
-	return (
-		<div
-			className={styles.tooltip}
-			style={{ top: y + POINTER_OFFSET, left: x + POINTER_OFFSET }}
-		>
-			<div className={styles.row}>
-				<span className={styles.label}>P99 latency:</span>
-				<span className={styles.value}>{tooltip.p99}ms</span>
-			</div>
-			<div className={styles.row}>
-				<span className={styles.label}>Request:</span>
-				<span className={styles.value}>{tooltip.callRate}/sec</span>
-			</div>
-			<div className={styles.row}>
-				<span className={styles.label}>Error Rate:</span>
-				<span className={styles.value}>{tooltip.errorRate}%</span>
-			</div>
-		</div>
-	);
-}
-
-export default LinkTooltip;

frontend/src/modules/Servicemap/components/Map/Map.constants.ts

@@ -1,41 +0,0 @@
-// Geometry of a service node as drawn on the map. The dagre layout uses a
-// taller bounding box (label + circle) than the circle itself, so the outer
-// height is exposed for the position centering calc.
-export const NODE_DIAMETER = 64;
-export const LABEL_HEIGHT = 18;
-export const NODE_LABEL_GAP = 6;
-export const NODE_OUTER_HEIGHT = NODE_DIAMETER + LABEL_HEIGHT + NODE_LABEL_GAP;
-
-// Per-edge animated stream of dots. Speed and particle count scale with the
-// edge's call rate *relative to the busiest edge in the current graph*, on a
-// log10 ladder. The busiest edge always pegs the fastest/most-dense
-// visualisation; the slowest gets a single drifting particle. This keeps the
-// stream legible whether the busiest service handles 5 req/sec or 5k.
-export const PARTICLE_FAST_SECS = 0.6;
-export const PARTICLE_SLOW_SECS = 5;
-export const MAX_PARTICLES = 8;
-
-// Compute particle count + per-loop duration for an edge's call rate, scaled
-// against the max call rate observed across the graph. Pure so it can be
-// unit-tested without rendering the edge.
-export function getParticleAnimation(
-	callRate: number,
-	maxCallRate: number,
-): { particleCount: number; duration: number } {
-	if (callRate <= 0) {
-		return { particleCount: 0, duration: PARTICLE_SLOW_SECS };
-	}
-	// Defensive: if a stale/zero max sneaks in, treat this edge as the max so
-	// `factor` stays in [0, 1] rather than going to Infinity or NaN.
-	const effectiveMax = Math.max(maxCallRate, callRate);
-	const logRate = Math.log10(callRate + 1);
-	const logMax = Math.log10(effectiveMax + 1);
-	const factor = logMax > 0 ? logRate / logMax : 1;
-	const duration =
-		PARTICLE_SLOW_SECS - factor * (PARTICLE_SLOW_SECS - PARTICLE_FAST_SECS);
-	const particleCount = Math.max(
-		1,
-		Math.min(MAX_PARTICLES, Math.ceil(factor * MAX_PARTICLES)),
-	);
-	return { particleCount, duration };
-}

frontend/src/modules/Servicemap/components/Map/Map.module.scss

@@ -1,21 +0,0 @@
-.container {
-	width: 100%;
-	height: calc(100vh - 124px);
-	position: relative;
-	border: 1px solid var(--l3-border);
-	border-radius: 8px;
-	overflow: hidden;
-
-	// ReactFlow defaults edge pointer-events to `visibleStroke`, which means
-	// our thin dashed line only captures hover on the painted dash segments.
-	// Force `stroke` on the wide invisible interaction path so the entire edge
-	// length is hoverable for the tooltip.
-	:global(.react-flow__edge-interaction) {
-		pointer-events: stroke;
-		cursor: default;
-	}
-
-	:global(.react-flow__edge) {
-		pointer-events: stroke;
-	}
-}

frontend/src/modules/Servicemap/components/Map/Map.tsx

@@ -1,185 +0,0 @@
-import '@xyflow/react/dist/style.css';
-
-import { memo, useEffect, useMemo, useState } from 'react';
-import {
-	Background,
-	BackgroundVariant,
-	Controls,
-	Edge,
-	Node,
-	ReactFlow,
-	useEdgesState,
-	useNodesState,
-} from '@xyflow/react';
-
-import { useIsDarkMode } from 'hooks/useDarkMode';
-
-import FlowEdge, { FlowEdgeData } from '../FlowEdge/FlowEdge';
-import { NODE_DIAMETER, NODE_OUTER_HEIGHT } from './Map.constants';
-import styles from './Map.module.scss';
-import ServiceNode, { ServiceNodeData } from '../ServiceNode/ServiceNode';
-import LinkTooltip from '../LinkTooltip/LinkTooltip';
-import {
-	computeNodePositions,
-	getEdgeColor,
-	getGraphData,
-	getLinkTooltip,
-	LinkTooltip as LinkTooltipData,
-} from '../../utils';
-
-const nodeTypes = { service: ServiceNode };
-const edgeTypes = { flow: FlowEdge };
-
-const PARTICLE_COLOR = 'var(--l1-foreground)';
-const BG_COLOR = 'var(--l2-background)';
-
-const BASE_EDGE_STYLE = {
-	strokeWidth: 1.25,
-	strokeDasharray: '5 4',
-};
-interface HoverState {
-	tooltip: LinkTooltipData;
-	x: number;
-	y: number;
-}
-
-function ServiceMap({ serviceMap }: any): JSX.Element {
-	const isDarkMode = useIsDarkMode();
-	const [hovered, setHovered] = useState<HoverState | null>(null);
-
-	const { nodes: rawNodes, links } = useMemo(
-		() => getGraphData(serviceMap, isDarkMode),
-		[serviceMap, isDarkMode],
-	);
-
-	const positions = useMemo(
-		() => computeNodePositions(rawNodes, links),
-		[rawNodes, links],
-	);
-
-	const initialNodes: Node<ServiceNodeData>[] = useMemo(
-		() =>
-			rawNodes.map((node) => {
-				const center = positions[node.id] ?? { x: 0, y: 0 };
-				return {
-					id: node.id,
-					type: 'service',
-					// `position` is the top-left of the node bounding box; centre the
-					// circle on the simulated coordinate.
-					position: {
-						x: center.x - NODE_DIAMETER / 2,
-						y: center.y - NODE_OUTER_HEIGHT / 2,
-					},
-					data: { label: node.id, color: node.color },
-					draggable: true,
-					selectable: false,
-				};
-			}),
-		[rawNodes, positions],
-	);
-
-	// Particle visualisation is scaled relative to the busiest edge in the
-	// current graph, so each render of the edge layer needs the per-graph max.
-	const maxCallRate = useMemo(
-		() => links.reduce((max, link) => Math.max(max, link.callRate ?? 0), 0),
-		[links],
-	);
-
-	const initialEdges: Edge<FlowEdgeData>[] = useMemo(
-		() =>
-			links.map((link, i) => ({
-				id: `${link.source}->${link.target}-${i}`,
-				source: link.source,
-				target: link.target,
-				type: 'flow',
-				data: {
-					p99: link.p99,
-					callRate: link.callRate,
-					errorRate: link.errorRate,
-					particleColor: PARTICLE_COLOR,
-					maxCallRate,
-				},
-				// markerEnd: EDGE_MARKER,
-				// Stroke is hashed off the target so edges sharing a destination read
-				// as a single visual fan-in (matches the pre-rewrite behaviour).
-				style: { ...BASE_EDGE_STYLE, stroke: getEdgeColor(link.target) },
-			})),
-		[links, maxCallRate],
-	);
-
-	const [flowNodes, setFlowNodes, onNodesChange] =
-		useNodesState<Node<ServiceNodeData>>(initialNodes);
-	const [flowEdges, setFlowEdges, onEdgesChange] =
-		useEdgesState<Edge<FlowEdgeData>>(initialEdges);
-
-	// Reset internal node/edge state when the source graph changes (filters,
-	// time range, theme). User drag positions during a stable graph are kept.
-	useEffect(() => {
-		setFlowNodes(initialNodes);
-	}, [initialNodes, setFlowNodes]);
-
-	useEffect(() => {
-		setFlowEdges(initialEdges);
-	}, [initialEdges, setFlowEdges]);
-
-	const handleEdgeMouseEnter = (event: React.MouseEvent, edge: Edge): void => {
-		setHovered({
-			tooltip: getLinkTooltip(edge.data as any),
-			x: event.clientX,
-			y: event.clientY,
-		});
-	};
-
-	const handleEdgeMouseMove = (event: React.MouseEvent, edge: Edge): void => {
-		setHovered((prev) =>
-			prev
-				? { ...prev, x: event.clientX, y: event.clientY }
-				: {
-						tooltip: getLinkTooltip(edge.data as any),
-						x: event.clientX,
-						y: event.clientY,
-					},
-		);
-	};
-
-	const handleEdgeMouseLeave = (): void => {
-		setHovered(null);
-	};
-
-	return (
-		<div className={styles.container}>
-			<ReactFlow
-				nodes={flowNodes}
-				edges={flowEdges}
-				onNodesChange={onNodesChange}
-				onEdgesChange={onEdgesChange}
-				nodeTypes={nodeTypes}
-				edgeTypes={edgeTypes}
-				fitView
-				minZoom={0.2}
-				maxZoom={4}
-				nodesDraggable
-				nodesConnectable={false}
-				elementsSelectable={false}
-				proOptions={{ hideAttribution: true }}
-				colorMode={isDarkMode ? 'dark' : 'light'}
-				onEdgeMouseEnter={handleEdgeMouseEnter}
-				onEdgeMouseMove={handleEdgeMouseMove}
-				onEdgeMouseLeave={handleEdgeMouseLeave}
-			>
-				<Background
-					bgColor={BG_COLOR}
-					variant={BackgroundVariant.Dots}
-					gap={24}
-					size={1}
-				/>
-				<Controls showInteractive={false} />
-			</ReactFlow>
-			{hovered && (
-				<LinkTooltip tooltip={hovered.tooltip} x={hovered.x} y={hovered.y} />
-			)}
-		</div>
-	);
-}
-
-export default memo(ServiceMap);

frontend/src/modules/Servicemap/components/ServiceNode/ServiceNode.module.scss

@@ -1,39 +0,0 @@
-.node {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	overflow: visible;
-}
-
-.circle {
-	border-radius: 50%;
-	border: 1px solid var(--l3-border);
-	box-sizing: border-box;
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	color: var(--l1-foreground);
-}
-
-.handle {
-	opacity: 0;
-	width: 1px;
-	height: 1px;
-	pointer-events: none;
-	border: none;
-}
-
-.label {
-	margin-top: 6px;
-	max-width: 120px;
-	font-size: 12px;
-	line-height: 14px;
-	text-align: center;
-	color: var(--l1-foreground);
-	font-family: Inter, sans-serif;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	user-select: none;
-}

frontend/src/modules/Servicemap/components/ServiceNode/ServiceNode.tsx

@@ -1,38 +0,0 @@
-import { Handle, Node, NodeProps, Position } from '@xyflow/react';
-import { Cpu } from 'lucide-react';
-
-import { NODE_DIAMETER } from '../Map/Map.constants';
-import styles from './ServiceNode.module.scss';
-
-// Icon takes ~35% of the circle diameter — large enough to read at typical
-// zoom, small enough to leave the colored ring visible as the health signal.
-const ICON_SIZE = Math.round(NODE_DIAMETER * 0.35);
-
-export interface ServiceNodeData extends Record<string, unknown> {
-	label: string;
-	color: string;
-}
-
-function ServiceNode({ data }: NodeProps<Node<ServiceNodeData>>): JSX.Element {
-	return (
-		<div className={styles.node}>
-			<div
-				className={styles.circle}
-				style={{
-					width: NODE_DIAMETER,
-					height: NODE_DIAMETER,
-					background: data.color,
-				}}
-			>
-				<Cpu size={ICON_SIZE} strokeWidth={1.5} aria-hidden />
-				<Handle type="target" position={Position.Left} className={styles.handle} />
-				<Handle type="source" position={Position.Right} className={styles.handle} />
-			</div>
-			<div className={styles.label} title={data.label}>
-				{data.label}
-			</div>
-		</div>
-	);
-}
-
-export default ServiceNode;

frontend/src/modules/Servicemap/components/__tests__/FlowEdge.test.tsx

@@ -1,185 +0,0 @@
-import { Position } from '@xyflow/react';
-import { render } from '@testing-library/react';
-
-import FlowEdge, { FlowEdgeData } from '../FlowEdge/FlowEdge';
-
-// Stub BaseEdge / getBezierPath so assertions don't depend on the internal
-// path geometry — we only care that FlowEdge wires its inputs through and
-// renders the right number of particles for the given call rate.
-jest.mock('@xyflow/react', () => {
-	const actual = jest.requireActual('@xyflow/react');
-	return {
-		...actual,
-		BaseEdge: ({
-			id,
-			path,
-			style,
-			markerEnd,
-		}: {
-			id: string;
-			path: string;
-			style?: React.CSSProperties;
-			markerEnd?: string;
-		}): JSX.Element => (
-			<path
-				data-testid="base-edge"
-				data-id={id}
-				data-path={path}
-				data-marker-end={markerEnd ?? ''}
-				style={style}
-			/>
-		),
-		// Encode the inputs into the returned path so tests can distinguish
-		// between the forward edge path and the reversed particle path.
-		getBezierPath: ({
-			sourceX,
-			sourceY,
-			targetX,
-			targetY,
-		}: {
-			sourceX: number;
-			sourceY: number;
-			targetX: number;
-			targetY: number;
-		}): [string, number, number, number, number] => [
-			`M${sourceX},${sourceY} L${targetX},${targetY}`,
-			(sourceX + targetX) / 2,
-			(sourceY + targetY) / 2,
-			0,
-			0,
-		],
-	};
-});
-
-const baseEdgeProps = {
-	id: 'edge-1',
-	source: 'a',
-	target: 'b',
-	sourceX: 0,
-	sourceY: 0,
-	targetX: 100,
-	targetY: 0,
-	sourcePosition: Position.Right,
-	targetPosition: Position.Left,
-	style: { stroke: '#000' },
-	markerEnd: 'url(#arrow)',
-} as const;
-
-function renderEdge(data: FlowEdgeData | undefined): ReturnType<typeof render> {
-	return render(<FlowEdge {...(baseEdgeProps as any)} data={data} />);
-}
-
-const SAMPLE_DATA: FlowEdgeData = {
-	p99: 1000000,
-	callRate: 25,
-	errorRate: 0,
-	particleColor: 'rgb(0, 200, 0)',
-	maxCallRate: 1000,
-};
-
-describe('FlowEdge', () => {
-	it('forwards id, path, style, and markerEnd to BaseEdge', () => {
-		const { getByTestId } = renderEdge(SAMPLE_DATA);
-
-		const baseEdge = getByTestId('base-edge');
-		expect(baseEdge).toHaveAttribute('data-id', 'edge-1');
-		// BaseEdge gets the forward path (source -> target).
-		expect(baseEdge).toHaveAttribute('data-path', 'M0,0 L100,0');
-		expect(baseEdge).toHaveAttribute('data-marker-end', 'url(#arrow)');
-		expect(baseEdge).toHaveStyle({ stroke: '#000' });
-	});
-
-	it('renders no particles when callRate is zero', () => {
-		const { container } = renderEdge({ ...SAMPLE_DATA, callRate: 0 });
-
-		expect(container.querySelectorAll('circle')).toHaveLength(0);
-	});
-
-	it('renders no particles when data is missing', () => {
-		const { container } = renderEdge(undefined);
-
-		expect(container.querySelectorAll('circle')).toHaveLength(0);
-	});
-
-	it('renders multiple staggered particles for mid-range traffic', () => {
-		// callRate=25 against maxCallRate=1000:
-		//   factor = log10(26) / log10(1001) ≈ 0.4716
-		//   particleCount = ceil(0.4716 * 8) = 4
-		const { container } = renderEdge({
-			...SAMPLE_DATA,
-			callRate: 25,
-			maxCallRate: 1000,
-		});
-
-		const circles = container.querySelectorAll('circle');
-		expect(circles).toHaveLength(4);
-
-		// Each particle's animateMotion `begin` should be a distinct negative
-		// offset; identical offsets would stack particles on top of each other.
-		const begins = Array.from(container.querySelectorAll('animateMotion')).map(
-			(el) => el.getAttribute('begin'),
-		);
-		expect(new Set(begins).size).toBe(begins.length);
-		begins.forEach((begin) => {
-			expect(begin).toMatch(/^-\d+\.\d{3}s$/);
-		});
-	});
-
-	it('saturates at MAX_PARTICLES (8) when the edge is the busiest in the graph', () => {
-		// Relative scaling: whichever absolute rate is the max pegs at 8.
-		const { container } = renderEdge({
-			...SAMPLE_DATA,
-			callRate: 50,
-			maxCallRate: 50,
-		});
-
-		expect(container.querySelectorAll('circle')).toHaveLength(8);
-	});
-
-	it('uses data.particleColor as the particle fill', () => {
-		const { container } = renderEdge({
-			...SAMPLE_DATA,
-			callRate: 5,
-			particleColor: 'rgb(123, 45, 67)',
-		});
-
-		const circle = container.querySelector('circle');
-		expect(circle).toHaveAttribute('fill', 'rgb(123, 45, 67)');
-	});
-
-	it('falls back to the default particle color when particleColor is empty', () => {
-		const { container } = renderEdge({
-			...SAMPLE_DATA,
-			callRate: 5,
-			particleColor: '',
-		});
-
-		const circle = container.querySelector('circle');
-		expect(circle).toHaveAttribute('fill', 'var(--accent-primary)');
-	});
-
-	it('marks particles as non-interactive so they do not show a grab cursor', () => {
-		// Without pointer-events:none, react-flow's edge layer cursor (grab)
-		// cascades onto the SVG circles. Particles are decorative.
-		const { container } = renderEdge({ ...SAMPLE_DATA, callRate: 5 });
-
-		const circles = container.querySelectorAll('circle');
-		expect(circles.length).toBeGreaterThan(0);
-		circles.forEach((circle) => {
-			expect(circle).toHaveAttribute('pointer-events', 'none');
-		});
-	});
-
-	it('animates particles along the reversed path so they flow callee -> caller', () => {
-		// Edge goes (0,0) -> (100,0) but particles must travel back the other
-		// way to visualise the call-graph response direction.
-		const { container } = renderEdge({ ...SAMPLE_DATA, callRate: 5 });
-
-		const motions = container.querySelectorAll('animateMotion');
-		expect(motions.length).toBeGreaterThan(0);
-		motions.forEach((el) => {
-			expect(el).toHaveAttribute('path', 'M100,0 L0,0');
-			expect(el).toHaveAttribute('repeatCount', 'indefinite');
-		});
-	});
-});

frontend/src/modules/Servicemap/components/__tests__/LinkTooltip.test.tsx

@@ -1,58 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import LinkTooltip, { LinkTooltipData } from '../LinkTooltip/LinkTooltip';
-
-const baseTooltip: LinkTooltipData = {
-	p99: 12.34,
-	callRate: 5.6,
-	errorRate: 0.1,
-};
-
-describe('LinkTooltip', () => {
-	it('renders p99, request, and error rate rows with their suffixes', () => {
-		render(<LinkTooltip tooltip={baseTooltip} x={0} y={0} />);
-
-		expect(screen.getByText('P99 latency:')).toBeInTheDocument();
-		expect(screen.getByText('12.34ms')).toBeInTheDocument();
-
-		expect(screen.getByText('Request:')).toBeInTheDocument();
-		expect(screen.getByText('5.6/sec')).toBeInTheDocument();
-
-		expect(screen.getByText('Error Rate:')).toBeInTheDocument();
-		expect(screen.getByText('0.1%')).toBeInTheDocument();
-	});
-
-	it('renders string-typed metric values verbatim', () => {
-		render(
-			<LinkTooltip
-				tooltip={{ p99: '0', callRate: '0', errorRate: '0' }}
-				x={0}
-				y={0}
-			/>,
-		);
-
-		expect(screen.getByText('0ms')).toBeInTheDocument();
-		expect(screen.getByText('0/sec')).toBeInTheDocument();
-		expect(screen.getByText('0%')).toBeInTheDocument();
-	});
-
-	it('positions itself offset from the cursor coordinates', () => {
-		const { container } = render(
-			<LinkTooltip tooltip={baseTooltip} x={100} y={200} />,
-		);
-
-		// POINTER_OFFSET is 12 in the component; the tooltip should sit at
-		// (x + 12, y + 12) so it does not occlude the hovered edge segment.
-		const tooltip = container.firstChild as HTMLElement;
-		expect(tooltip).toHaveStyle({ top: '212px', left: '112px' });
-	});
-
-	it('handles negative coordinates without breaking the offset math', () => {
-		const { container } = render(
-			<LinkTooltip tooltip={baseTooltip} x={-50} y={-30} />,
-		);
-
-		const tooltip = container.firstChild as HTMLElement;
-		expect(tooltip).toHaveStyle({ top: '-18px', left: '-38px' });
-	});
-});

frontend/src/modules/Servicemap/components/__tests__/Map.constants.test.ts

@@ -1,91 +0,0 @@
-import {
-	getParticleAnimation,
-	MAX_PARTICLES,
-	PARTICLE_FAST_SECS,
-	PARTICLE_SLOW_SECS,
-} from '../Map/Map.constants';
-
-describe('getParticleAnimation', () => {
-	it('returns zero particles and the slow duration for non-positive call rates', () => {
-		expect(getParticleAnimation(0, 1000)).toStrictEqual({
-			particleCount: 0,
-			duration: PARTICLE_SLOW_SECS,
-		});
-		expect(getParticleAnimation(-5, 1000)).toStrictEqual({
-			particleCount: 0,
-			duration: PARTICLE_SLOW_SECS,
-		});
-	});
-
-	it('produces at least one particle for any positive call rate', () => {
-		expect(getParticleAnimation(0.1, 1000).particleCount).toBeGreaterThanOrEqual(
-			1,
-		);
-		expect(getParticleAnimation(1, 1000).particleCount).toBeGreaterThanOrEqual(1);
-	});
-
-	it('saturates at MAX_PARTICLES and PARTICLE_FAST_SECS when callRate equals max', () => {
-		// Whatever the absolute scale, the busiest edge should peg the
-		// visualisation — that's the point of the relative scaling.
-		const EPS = 1e-9;
-		[5, 50, 500, 5_000, 1_000_000].forEach((rate) => {
-			const { particleCount, duration } = getParticleAnimation(rate, rate);
-			expect(particleCount).toBe(MAX_PARTICLES);
-			expect(duration).toBeGreaterThanOrEqual(PARTICLE_FAST_SECS - EPS);
-			expect(duration).toBeLessThanOrEqual(PARTICLE_FAST_SECS + EPS);
-		});
-	});
-
-	it('caps particleCount at MAX_PARTICLES even if max is stale or zero', () => {
-		// Defensive: if max somehow lags behind callRate, factor still clamps to 1.
-		expect(getParticleAnimation(1000, 0).particleCount).toBe(MAX_PARTICLES);
-		expect(getParticleAnimation(1000, 100).particleCount).toBe(MAX_PARTICLES);
-	});
-
-	it('produces different particle counts for the same callRate at different scales', () => {
-		// 50 req/sec is "busy" in a 50-max graph but "trickle" in a 5k-max graph.
-		const busy = getParticleAnimation(50, 50);
-		const trickle = getParticleAnimation(50, 5000);
-		expect(busy.particleCount).toBeGreaterThan(trickle.particleCount);
-		expect(busy.duration).toBeLessThan(trickle.duration);
-	});
-
-	it('monotonically increases particle count as rate climbs toward max', () => {
-		const max = 5000;
-		const rates = [0.5, 5, 50, 500, max];
-		const counts = rates.map((r) => getParticleAnimation(r, max).particleCount);
-		for (let i = 1; i < counts.length; i += 1) {
-			expect(counts[i]).toBeGreaterThanOrEqual(counts[i - 1]);
-		}
-	});
-
-	it('monotonically decreases per-loop duration as rate climbs toward max', () => {
-		const max = 5000;
-		const rates = [0.5, 5, 50, 500, max];
-		const durations = rates.map((r) => getParticleAnimation(r, max).duration);
-		for (let i = 1; i < durations.length; i += 1) {
-			expect(durations[i]).toBeLessThanOrEqual(durations[i - 1]);
-		}
-	});
-
-	it('keeps duration bounded between PARTICLE_FAST_SECS and PARTICLE_SLOW_SECS', () => {
-		// At saturation the formula computes to PARTICLE_FAST_SECS up to
-		// floating-point error (~1e-16), so allow a small epsilon.
-		const EPS = 1e-9;
-		const cases: Array<[number, number]> = [
-			[0, 1000],
-			[0.01, 1000],
-			[1, 1000],
-			[10, 1000],
-			[100, 1000],
-			[1000, 1000],
-			[1000, 0], // defensive max
-			[1_000_000, 1_000_000],
-		];
-		cases.forEach(([rate, max]) => {
-			const { duration } = getParticleAnimation(rate, max);
-			expect(duration).toBeGreaterThanOrEqual(PARTICLE_FAST_SECS - EPS);
-			expect(duration).toBeLessThanOrEqual(PARTICLE_SLOW_SECS + EPS);
-		});
-	});
-});

frontend/src/modules/Servicemap/components/__tests__/ServiceNode.test.tsx

@@ -1,93 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import ServiceNode from '../ServiceNode/ServiceNode';
-import { NODE_DIAMETER } from '../Map/Map.constants';
-
-// `Handle` requires a ReactFlowProvider to mount. We don't exercise its
-// connection logic from this component, so a stub keeps the test isolated to
-// ServiceNode's own rendering responsibilities.
-jest.mock('@xyflow/react', () => {
-	const actual = jest.requireActual('@xyflow/react');
-	return {
-		...actual,
-		Handle: ({
-			type,
-			position,
-		}: {
-			type: string;
-			position: string;
-		}): JSX.Element => (
-			<div data-testid={`handle-${type}`} data-position={position} />
-		),
-	};
-});
-
-const baseNodeProps = {
-	id: 'frontend',
-	type: 'service',
-	dragging: false,
-	isConnectable: true,
-	positionAbsoluteX: 0,
-	positionAbsoluteY: 0,
-	zIndex: 0,
-	selectable: false,
-	deletable: false,
-	draggable: true,
-	selected: false,
-} as const;
-
-function renderNode(data: {
-	label: string;
-	color: string;
-}): ReturnType<typeof render> {
-	return render(<ServiceNode {...(baseNodeProps as any)} data={data} />);
-}
-
-describe('ServiceNode', () => {
-	it('renders the label text from data', () => {
-		renderNode({ label: 'checkout-service', color: 'red' });
-
-		expect(screen.getByText('checkout-service')).toBeInTheDocument();
-	});
-
-	it('exposes the label as a title attribute for full-name hover-disclosure', () => {
-		// The visible label is truncated for layout, so the full service name is
-		// surfaced via title — assert the attribute round-trips data.label.
-		renderNode({
-			label: 'a-very-long-service-name-that-truncates',
-			color: 'red',
-		});
-
-		const label = screen.getByText('a-very-long-service-name-that-truncates');
-		expect(label).toHaveAttribute(
-			'title',
-			'a-very-long-service-name-that-truncates',
-		);
-	});
-
-	it('applies data.color as the circle background and uses the configured diameter', () => {
-		// All nodes render at NODE_DIAMETER — there is no per-node sizing.
-		const { container } = renderNode({
-			label: 'frontend',
-			color: 'rgb(255, 0, 0)',
-		});
-
-		const wrapper = container.firstChild as HTMLElement;
-		const circle = wrapper.firstChild as HTMLElement;
-		expect(circle).toHaveStyle({
-			background: 'rgb(255, 0, 0)',
-			width: `${NODE_DIAMETER}px`,
-			height: `${NODE_DIAMETER}px`,
-		});
-	});
-
-	it('renders a target handle on the left and a source handle on the right', () => {
-		renderNode({ label: 'frontend', color: 'red' });
-
-		const target = screen.getByTestId('handle-target');
-		const source = screen.getByTestId('handle-source');
-
-		expect(target).toHaveAttribute('data-position', 'left');
-		expect(source).toHaveAttribute('data-position', 'right');
-	});
-});

frontend/src/modules/Servicemap/utils.ts

@@ -1,8 +1,5 @@
 //@ts-nocheck
 
-import dagre from '@dagrejs/dagre';
-import { themeColors } from 'constants/theme';
-import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import {
 	cloneDeep,
 	find,
@@ -15,7 +12,27 @@ import {
 
 import { graphDataType } from './ServiceMap';
 
-export const getGraphData = (serviceMap, _isDarkMode): graphDataType => {
+const MIN_WIDTH = 10;
+const MAX_WIDTH = 20;
+const DEFAULT_FONT_SIZE = 6;
+
+export const getDimensions = (
+	num: number,
+	highest: number,
+): {
+	fontSize: number;
+	width: number;
+} => {
+	const percentage = (num / highest) * 100;
+	const width = (percentage * (MAX_WIDTH - MIN_WIDTH)) / 100 + MIN_WIDTH;
+	const fontSize = DEFAULT_FONT_SIZE;
+	return {
+		fontSize,
+		width,
+	};
+};
+
+export const getGraphData = (serviceMap, isDarkMode): graphDataType => {
 	const { items } = serviceMap;
 	const services = Object.values(groupBy(items, 'child')).map((e) => {
 		return {
@@ -25,6 +42,7 @@ export const getGraphData = (serviceMap, _isDarkMode): graphDataType => {
 		};
 	});
 	const highestCallCount = maxBy(items, (e) => e?.callCount)?.callCount;
+	const highestCallRate = maxBy(services, (e) => e?.callRate)?.callRate;
 
 	const divNum = Number(
 		String(1).padEnd(highestCallCount.toString().length, '0'),
@@ -44,19 +62,31 @@ export const getGraphData = (serviceMap, _isDarkMode): graphDataType => {
 	const uniqParent = uniqBy(cloneDeep(items), 'parent').map((e) => e.parent);
 	const uniqChild = uniqBy(cloneDeep(items), 'child').map((e) => e.child);
 	const uniqNodes = uniq([...uniqParent, ...uniqChild]);
-	// Semantic tokens auto-flip with theme; passed as CSS variable strings so
-	// the consuming component can apply them directly via `style.background`.
-	const HEALTHY_COLOR = 'var(--l3-background)';
-	const ERROR_COLOR = 'var(--danger-background)';
-	const nodes = uniqNodes.map((node) => {
+	const nodes = uniqNodes.map((node, i) => {
 		const service = find(services, (service) => service.serviceName === node);
-		let color = HEALTHY_COLOR;
-		if (service && service.errorRate > 0) {
-			color = ERROR_COLOR;
+		let color = isDarkMode ? '#7CA568' : '#D5F2BB';
+		if (!service) {
+			return {
+				id: node,
+				group: i + 1,
+				fontSize: DEFAULT_FONT_SIZE,
+				width: MIN_WIDTH,
+				color,
+				nodeVal: MIN_WIDTH,
+				name: node,
+			};
 		}
+		if (service.errorRate > 0) {
+			color = isDarkMode ? '#DB836E' : '#F98989';
+		}
+		const { fontSize, width } = getDimensions(service.callRate, highestCallRate);
 		return {
 			id: node,
+			group: i + 1,
+			fontSize,
+			width,
 			color,
+			nodeVal: width,
 			name: node,
 		};
 	});
@@ -66,6 +96,20 @@ export const getGraphData = (serviceMap, _isDarkMode): graphDataType => {
 	};
 };
 
+export const getZoomPx = (): number => {
+	const { width } = window.screen;
+	if (width < 1400) {
+		return 190;
+	}
+	if (width > 1400 && width < 1700) {
+		return 380;
+	}
+	if (width > 1700) {
+		return 470;
+	}
+	return 190;
+};
+
 const getRound2DigitsAfterDecimal = (num: number): number => {
 	if (num === 0) {
 		return 0;
@@ -73,28 +117,27 @@ const getRound2DigitsAfterDecimal = (num: number): number => {
 	return num.toFixed(20).match(/^-?\d*\.?0*\d{0,2}/)[0];
 };
 
-export interface LinkTooltip {
-	p99: string | number;
-	callRate: string | number;
-	errorRate: string | number;
-}
-
-export const getLinkTooltip = (link: {
+export const getTooltip = (link: {
 	p99: number;
 	errorRate: number;
 	callRate: number;
-}): LinkTooltip => ({
-	p99: getRound2DigitsAfterDecimal(link.p99 / 1000000),
-	callRate: getRound2DigitsAfterDecimal(link.callRate),
-	errorRate: getRound2DigitsAfterDecimal(link.errorRate),
-});
-
-// Edges share a color with every other edge pointing at the same destination
-// service (mirrors the original `linkAutoColorBy={(d) => d.target}` behaviour).
-// Hashing onto the existing chart palette keeps it visually consistent with
-// the rest of the app and stable across renders for a given target id.
-export const getEdgeColor = (targetId: string): string =>
-	generateColor(targetId, themeColors.chartcolors);
+	id: string;
+}): string => {
+	return `<div style="color:#333333;padding:12px;background: white;border-radius: 2px;">
+								<div class="keyval">
+									<div class="key">P99 latency:</div>
+									<div class="val">${getRound2DigitsAfterDecimal(link.p99 / 1000000)}ms</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Request:</div>
+									<div class="val">${getRound2DigitsAfterDecimal(link.callRate)}/sec</div>
+								</div>
+								<div class="keyval">
+									<div class="key">Error Rate:</div>
+									<div class="val">${getRound2DigitsAfterDecimal(link.errorRate)}%</div>
+								</div>
+							</div>`;
+};
 
 export const transformLabel = (label: string, zoomLevel: number): string => {
 	//? 13 is the minimum label length. Scaling factor of 0.9 which is slightly less than 1
@@ -107,51 +150,3 @@ export const transformLabel = (label: string, zoomLevel: number): string => {
 	}
 	return label;
 };
-
-// Layered DAG layout via dagre. For service maps the data flows
-// caller -> callee, so a left-to-right rank direction reads naturally and
-// minimises edge crossings vs. a force-directed simulation.
-//
-// `nodeBoxWidth` reserves space for the label rendered below each circle —
-// the visible label can be up to ~120px wide, so dagre needs to know that
-// horizontally adjacent ranks must keep that distance.
-export const computeNodePositions = (
-	nodes: { id: string }[],
-	links: { source: string; target: string }[],
-	nodeBoxWidth = 130,
-	nodeBoxHeight = 100,
-): Record<string, { x: number; y: number }> => {
-	const result: Record<string, { x: number; y: number }> = {};
-	if (nodes.length === 0) {
-		return result;
-	}
-
-	const g = new dagre.graphlib.Graph({ multigraph: true, compound: false });
-	g.setGraph({
-		rankdir: 'LR',
-		nodesep: 40,
-		ranksep: 90,
-		marginx: 40,
-		marginy: 40,
-	});
-	g.setDefaultEdgeLabel(() => ({}));
-
-	nodes.forEach((node) => {
-		g.setNode(node.id, { width: nodeBoxWidth, height: nodeBoxHeight });
-	});
-	links.forEach((link, i) => {
-		// `name` makes parallel edges (same source+target, different metrics)
-		// safe under multigraph mode.
-		g.setEdge(link.source, link.target, {}, `${link.source}-${link.target}-${i}`);
-	});
-
-	dagre.layout(g);
-
-	nodes.forEach((node) => {
-		const laidOut = g.node(node.id);
-		if (laidOut) {
-			result[node.id] = { x: laidOut.x, y: laidOut.y };
-		}
-	});
-	return result;
-};

frontend/src/types/api/logs/log.ts

@@ -1,3 +1,8 @@
+export interface ILogBody {
+	message?: string | null;
+	[key: string]: unknown;
+}
+
 export interface ILog {
 	date: string;
 	timestamp: number | string;
@@ -8,7 +13,7 @@ export interface ILog {
 	traceFlags: number;
 	severityText: string;
 	severityNumber: number;
-	body: string;
+	body: string | ILogBody;
 	resources_string: Record<string, never>;
 	scope_string: Record<string, never>;
 	attributesString: Record<string, never>;

frontend/yarn.lock

@@ -2953,18 +2953,6 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
-"@dagrejs/dagre@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@dagrejs/dagre/-/dagre-3.0.0.tgz#543f20188f7494db0f45d634f7b3760747f87f23"
-  integrity sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==
-  dependencies:
-    "@dagrejs/graphlib" "4.0.1"
-
-"@dagrejs/graphlib@4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@dagrejs/graphlib/-/graphlib-4.0.1.tgz#a9cf907cc5ddf9140a64360ad487766f17d1ee36"
-  integrity sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==
-
 "@date-fns/tz@^1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@date-fns/tz/-/tz-1.4.1.tgz#2d905f282304630e07bef6d02d2e7dbf3f0cc4e4"
@@ -6014,6 +6002,11 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.3.tgz"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
+"@tweenjs/tween.js@18 - 25":
+  version "25.0.0"
+  resolved "https://registry.yarnpkg.com/@tweenjs/tween.js/-/tween.js-25.0.0.tgz#7266baebcc3affe62a3a54318a3ea82d904cd0b9"
+  integrity sha512-XKLA6syeBUaPzx4j3qwMqzzq+V4uo72BnlbOjmuljLrRqdsd3qnzvZZoxvMHZ23ndsRS4aufU6JOZYpCbU6T1A==
+
 "@tybys/wasm-util@^0.10.0", "@tybys/wasm-util@^0.10.1":
   version "0.10.1"
   resolved "https://registry.yarnpkg.com/@tybys/wasm-util/-/wasm-util-0.10.1.tgz#ecddd3205cf1e2d5274649ff0eedd2991ed7f414"
@@ -6131,13 +6124,6 @@
   resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz#006b7bd838baec1511270cb900bf4fc377bbbf41"
   integrity sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==
 
-"@types/d3-drag@^3.0.7":
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
-  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
-  dependencies:
-    "@types/d3-selection" "*"
-
 "@types/d3-format@3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.1.tgz#194f1317a499edd7e58766f96735bdc0216bb89d"
@@ -6155,13 +6141,6 @@
   resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-1.1.11.tgz#c3bd70d025621f73cb3319e97e08ae4c9051c791"
   integrity sha512-lnQiU7jV+Gyk9oQYk0GGYccuexmQPTp08E0+4BidgFdiJivjEvf+esPSdZqCZ2C7UwTWejWpqetVaU8A+eX3FA==
 
-"@types/d3-interpolate@*", "@types/d3-interpolate@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
-  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
-  dependencies:
-    "@types/d3-color" "*"
-
 "@types/d3-interpolate@3.0.1", "@types/d3-interpolate@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc"
@@ -6181,11 +6160,6 @@
   dependencies:
     "@types/d3-time" "*"
 
-"@types/d3-selection@*", "@types/d3-selection@^3.0.10":
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.11.tgz#bd7a45fc0a8c3167a631675e61bc2ca2b058d4a3"
-  integrity sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==
-
 "@types/d3-shape@^1.3.1":
   version "1.3.12"
   resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-1.3.12.tgz#8f2f9f7a12e631ce6700d6d55b84795ce2c8b259"
@@ -6208,21 +6182,6 @@
   resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819"
   integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==
 
-"@types/d3-transition@^3.0.8":
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.9.tgz#1136bc57e9ddb3c390dccc9b5ff3b7d2b8d94706"
-  integrity sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==
-  dependencies:
-    "@types/d3-selection" "*"
-
-"@types/d3-zoom@^3.0.8":
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
-  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
-  dependencies:
-    "@types/d3-interpolate" "*"
-    "@types/d3-selection" "*"
-
 "@types/debug@^4.0.0":
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.8.tgz#cef723a5d0a90990313faec2d1e22aee5eecb317"
@@ -7113,30 +7072,6 @@
   resolved "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
-"@xyflow/react@12.10.2":
-  version "12.10.2"
-  resolved "https://registry.yarnpkg.com/@xyflow/react/-/react-12.10.2.tgz#40f6d71944f674f0ffbb83c660f9473018adbe61"
-  integrity sha512-CgIi6HwlcHXwlkTpr0fxLv/0sRVNZ8IdwKLzzeCscaYBwpvfcH1QFOCeaTCuEn1FQEs/B8CjnTSjhs8udgmBgQ==
-  dependencies:
-    "@xyflow/system" "0.0.76"
-    classcat "^5.0.3"
-    zustand "^4.4.0"
-
-"@xyflow/system@0.0.76":
-  version "0.0.76"
-  resolved "https://registry.yarnpkg.com/@xyflow/system/-/system-0.0.76.tgz#57da5e4d230cdbec56548a6d5eec115f22858259"
-  integrity sha512-hvwvnRS1B3REwVDlWexsq7YQaPZeG3/mKo1jv38UmnpWmxihp14bW6VtEOuHEwJX2FvzFw8k77LyKSk/wiZVNA==
-  dependencies:
-    "@types/d3-drag" "^3.0.7"
-    "@types/d3-interpolate" "^3.0.4"
-    "@types/d3-selection" "^3.0.10"
-    "@types/d3-transition" "^3.0.8"
-    "@types/d3-zoom" "^3.0.8"
-    d3-drag "^3.0.0"
-    d3-interpolate "^3.0.1"
-    d3-selection "^3.0.0"
-    d3-zoom "^3.0.0"
-
 "@zxing/text-encoding@0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
@@ -7162,6 +7097,11 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
+accessor-fn@1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/accessor-fn/-/accessor-fn-1.4.1.tgz"
+  integrity sha512-P7yNKfmpuWLUwiRVk9RkRIPGjngemjZ7yANc0DL7otgDqEIWkEByMhShzfgQ5ZwCPEUmba4v1kOqCdGhpzY3ew==
+
 acorn-globals@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
@@ -8059,6 +7999,11 @@ better-xlsx@^0.7.5:
     jszip "^3.2.2"
     kind-of "^6.0.3"
 
+"bezier-js@3 - 6":
+  version "6.1.3"
+  resolved "https://registry.npmjs.org/bezier-js/-/bezier-js-6.1.3.tgz"
+  integrity sha512-VPFvkyO98oCJ1Tsi+bFBrKEWLdefAj4DJVaWp3xTEsdCbunC7Pt/nTeIgu/UdskBNcmHv8TOfsgdMZb1GsICmg==
+
 big-integer@^1.6.16:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
@@ -8328,6 +8273,13 @@ caniuse-lite@^1.0.30001759:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001767.tgz#0279c498e862efb067938bba0a0aabafe8d0b730"
   integrity sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==
 
+canvas-color-tracker@^1.3:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/canvas-color-tracker/-/canvas-color-tracker-1.3.2.tgz#b924cf94b33441b82692938fca5b936be971a46d"
+  integrity sha512-ryQkDX26yJ3CXzb3hxUVNlg1NKE4REc5crLBq661Nxzr8TNd236SaEf2ffYLXyI5tSABSeguHLqcVq4vf9L3Zg==
+  dependencies:
+    tinycolor2 "^1.6.0"
+
 ccount@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
@@ -8469,11 +8421,6 @@ class-variance-authority@^0.7.0:
   dependencies:
     clsx "^2.1.1"
 
-classcat@^5.0.3:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.5.tgz#8c209f359a93ac302404a10161b501eba9c09c77"
-  integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
-
 classnames@2.3.2, classnames@2.x, classnames@^2.2.1, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz"
@@ -9108,7 +9055,7 @@ csstype@^3.1.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
-"d3-array@2 - 3", "d3-array@2.10.0 - 3":
+"d3-array@1 - 3", "d3-array@2 - 3", "d3-array@2.10.0 - 3":
   version "3.2.3"
   resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.2.3.tgz"
   integrity sha512-JRHwbQQ84XuAESWhvIPaUV4/1UYTBOLiOPGWqgFDHZS1D5QN9c57FbH3QpEnQMYiOXNzKUQyGTZf+EVO7RT5TQ==
@@ -9134,6 +9081,11 @@ d3-array@^1.2.0:
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f"
   integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw==
 
+d3-binarytree@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/d3-binarytree/-/d3-binarytree-1.0.2.tgz"
+  integrity sha512-cElUNH+sHu95L04m92pG73t2MEJXKu+GeKUN1TJkFsu93E5W8E9Sc3kHEGJKgenGvj19m6upSn2EunvMgMD2Yw==
+
 "d3-color@1 - 3", d3-color@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz"
@@ -9151,7 +9103,7 @@ d3-delaunay@6.0.2:
   resolved "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz"
   integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-"d3-drag@2 - 3", d3-drag@^3.0.0:
+"d3-drag@2 - 3":
   version "3.0.0"
   resolved "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz"
   integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
@@ -9164,6 +9116,17 @@ d3-delaunay@6.0.2:
   resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
+"d3-force-3d@2 - 3":
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/d3-force-3d/-/d3-force-3d-3.0.5.tgz"
+  integrity sha512-tdwhAhoTYZY/a6eo9nR7HP3xSW/C6XvJTbeRpR92nlPzH6OiE+4MliN9feuSFd0tPtEUo+191qOhCTWx3NYifg==
+  dependencies:
+    d3-binarytree "1"
+    d3-dispatch "1 - 3"
+    d3-octree "1"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
 "d3-format@1 - 3", d3-format@3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz"
@@ -9186,13 +9149,18 @@ d3-hierarchy@^1.1.4:
   resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.9.tgz#2f6bee24caaea43f8dc37545fa01628559647a83"
   integrity sha512-j8tPxlqh1srJHAtxfvOUwKNYJkQuBFdM1+JAUfq6xqH5eAqf93L7oG1NVqDa4CpFZNvnNKtCYEUC8KY9yEn9lQ==
 
-"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3.0.1, d3-interpolate@^3.0.1:
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
   dependencies:
     d3-color "1 - 3"
 
+d3-octree@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/d3-octree/-/d3-octree-1.0.2.tgz"
+  integrity sha512-Qxg4oirJrNXauiuC94uKMbgxwnhdda9xRLl9ihq45srlJ4Ga3CSgqGcAL8iW7N5CIv4Oz8x3E734ulxyvHPvwA==
+
 d3-path@1, d3-path@^1.0.5:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf"
@@ -9203,7 +9171,20 @@ d3-polygon@^1.0.3:
   resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.6.tgz#0bf8cb8180a6dc107f518ddf7975e12abbfbd38e"
   integrity sha512-k+RF7WvI08PC8reEoXa/w2nSg5AUMTi+peBD9cmFc+0ixHfbs4QmxxkarVal1IkVkgxVuk9JSHhJURHiyHKAuQ==
 
-d3-scale@4.0.2:
+"d3-quadtree@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+"d3-scale-chromatic@1 - 3":
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+"d3-scale@1 - 4", d3-scale@4.0.2:
   version "4.0.2"
   resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
@@ -9214,9 +9195,9 @@ d3-scale@4.0.2:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+"d3-selection@2 - 3", d3-selection@3:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  resolved "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz"
   integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
 d3-shape@^1.0.6, d3-shape@^1.2.0:
@@ -9256,9 +9237,9 @@ d3-shape@^1.0.6, d3-shape@^1.2.0:
     d3-interpolate "1 - 3"
     d3-timer "1 - 3"
 
-d3-zoom@^3.0.0:
+"d3-zoom@2 - 3":
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  resolved "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz"
   integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
   dependencies:
     d3-dispatch "1 - 3"
@@ -10479,6 +10460,15 @@ flatted@^3.4.2:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.4.2.tgz#f5c23c107f0f37de8dbdf24f13722b3b98d52726"
   integrity sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==
 
+float-tooltip@^1.7:
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.7.5.tgz#7083bf78f0de5a97f9c2d6aa8e90d2139f34047f"
+  integrity sha512-/kXzuDnnBqyyWyhDMH7+PfP8J/oXiAavGzcRxASOMRHFuReDtofizLLJsf7nnDLAfEaMW4pVWaXrAjtnglpEkg==
+  dependencies:
+    d3-selection "2 - 3"
+    kapsule "^1.16"
+    preact "10"
+
 flubber@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/flubber/-/flubber-0.4.2.tgz#14452d4a838cc3b9f2fb6175da94e35acd55fbaa"
@@ -10515,6 +10505,27 @@ for-each@^0.3.5:
   dependencies:
     is-callable "^1.2.7"
 
+force-graph@^1.51:
+  version "1.51.1"
+  resolved "https://registry.yarnpkg.com/force-graph/-/force-graph-1.51.1.tgz#c967249bf6ad2cb4a3ba89ed4c6d79895bd70fe1"
+  integrity sha512-uEEX8iRzgq1IKRISOw6RrB2RLMhcI25xznQYrCTVvxZHZZ+A2jH6qIolYuwavVxAMi64pFp2yZm4KFVdD993cg==
+  dependencies:
+    "@tweenjs/tween.js" "18 - 25"
+    accessor-fn "1"
+    bezier-js "3 - 6"
+    canvas-color-tracker "^1.3"
+    d3-array "1 - 3"
+    d3-drag "2 - 3"
+    d3-force-3d "2 - 3"
+    d3-scale "1 - 4"
+    d3-scale-chromatic "1 - 3"
+    d3-selection "2 - 3"
+    d3-zoom "2 - 3"
+    float-tooltip "^1.7"
+    index-array-by "1"
+    kapsule "^1.16"
+    lodash-es "4"
+
 foreground-child@^3.1.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.1.tgz#32e8e9ed1b68a3497befb9ac2b6adf92a638576f"
@@ -11662,6 +11673,11 @@ indent-string@^4.0.0:
   resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
+index-array-by@1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/index-array-by/-/index-array-by-1.4.1.tgz"
+  integrity sha512-Zu6THdrxQdyTuT2uA5FjUoBEsFHPzHcPIj18FszN6yXKHxSfGcR4TPLabfuT//E25q1Igyx9xta2WMvD/x9P/g==
+
 inflected@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/inflected/-/inflected-2.1.0.tgz#2816ac17a570bbbc8303ca05bca8bf9b3f959687"
@@ -12367,6 +12383,11 @@ jake@^10.8.5:
     filelist "^1.0.4"
     picocolors "^1.1.1"
 
+jerrypick@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/jerrypick/-/jerrypick-1.1.1.tgz"
+  integrity sha512-XTtedPYEyVp4t6hJrXuRKr/jHj8SC4z+4K0b396PMkov6muL+i8IIamJIvZWe3jUspgIJak0P+BaWKawMYNBLg==
+
 jest-changed-files@30.2.0:
   version "30.2.0"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-30.2.0.tgz#602266e478ed554e1e1469944faa7efd37cee61c"
@@ -13082,6 +13103,13 @@ junk@^3.1.0:
   resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
   integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
 
+kapsule@^1.16:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/kapsule/-/kapsule-1.16.3.tgz#5684ed89838b6658b30d0f2cc056dffc3ba68c30"
+  integrity sha512-4+5mNNf4vZDSwPhKprKwz3330iisPrb08JyMgbsdFrimBCKNHecua/WBwvVg3n7vwx0C1ARjfhwIpbrbd9n5wg==
+  dependencies:
+    lodash-es "4"
+
 keyv@^4.0.0:
   version "4.5.4"
   resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
@@ -13306,7 +13334,7 @@ locate-path@^7.1.0:
   dependencies:
     p-locate "^6.0.0"
 
-lodash-es@^4.17.21:
+lodash-es@4, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -15617,6 +15645,11 @@ powershell-utils@^0.1.0:
   resolved "https://registry.yarnpkg.com/powershell-utils/-/powershell-utils-0.1.0.tgz#5a42c9a824fb4f2f251ccb41aaae73314f5d6ac2"
   integrity sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==
 
+preact@10:
+  version "10.28.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.28.4.tgz#8ffab01c5c0590535bdaecdd548801f44c6e483a"
+  integrity sha512-uKFfOHWuSNpRFVTnljsCluEFq57OKT+0QdOiQo8XWnQ/pSvg7OpX5eNOejELXJMWy+BwM2nobz0FkvzmnpCNsQ==
+
 preact@^10.19.3:
   version "10.22.0"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.22.0.tgz#a50f38006ae438d255e2631cbdaf7488e6dd4e16"
@@ -15678,7 +15711,7 @@ progress@^2.0.3:
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@15.8.1, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@15, prop-types@15.8.1, prop-types@15.x, prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -16302,6 +16335,15 @@ react-fast-compare@^3.2.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-force-graph-2d@^1.29.1:
+  version "1.29.1"
+  resolved "https://registry.yarnpkg.com/react-force-graph-2d/-/react-force-graph-2d-1.29.1.tgz#a0784d4387b12b28e2b552058ec09d092b4e8cda"
+  integrity sha512-1Rl/1Z3xy2iTHKj6a0jRXGyiI86xUti81K+jBQZ+Oe46csaMikp47L5AjrzA9hY9fNGD63X8ffrqnvaORukCuQ==
+  dependencies:
+    force-graph "^1.51"
+    prop-types "15"
+    react-kapsule "^2.5"
+
 react-full-screen@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/react-full-screen/-/react-full-screen-1.1.1.tgz#b707d56891015a71c503a65dbab3086d75be97d7"
@@ -16371,6 +16413,13 @@ react-is@^18.3.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-kapsule@^2.5:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/react-kapsule/-/react-kapsule-2.5.7.tgz#dcd957ae8e897ff48055fc8ff48ed04ebe3c5bd2"
+  integrity sha512-kifAF4ZPD77qZKc4CKLmozq6GY1sBzPEJTIJb0wWFK6HsePJatK3jXplZn2eeAt3x67CDozgi7/rO8fNQ/AL7A==
+  dependencies:
+    jerrypick "^1.1.1"
+
 react-lottie@1.2.10:
   version "1.2.10"
   resolved "https://registry.yarnpkg.com/react-lottie/-/react-lottie-1.2.10.tgz#399f78a448a7833b2380d74fc489ecf15f8d18c7"
@@ -18440,7 +18489,7 @@ tiny-warning@^1.0.0:
   resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
-tinycolor2@1.6.0:
+tinycolor2@1.6.0, tinycolor2@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
@@ -19145,7 +19194,7 @@ use-sidecar@^1.1.3:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@1.6.0, use-sync-external-store@^1.2.2:
+use-sync-external-store@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz#b174bfa65cb2b526732d9f2ac0a408027876f32d"
   integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
@@ -19788,13 +19837,6 @@ zustand@5.0.11:
   resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.11.tgz#99f912e590de1ca9ce6c6d1cab6cdb1f034ab494"
   integrity sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==
 
-zustand@^4.4.0:
-  version "4.5.7"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.7.tgz#7d6bb2026a142415dd8be8891d7870e6dbe65f55"
-  integrity sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==
-  dependencies:
-    use-sync-external-store "^1.2.2"
-
 zwitch@^2.0.0, zwitch@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-2.0.4.tgz#c827d4b0acb76fc3e685a4c6ec2902d51070e9d7"

go.mod

@@ -11,6 +11,7 @@ require (
 	github.com/SigNoz/signoz-otel-collector v0.144.3
 	github.com/antlr4-go/antlr/v4 v4.13.1
 	github.com/antonmedv/expr v1.15.3
+	github.com/bytedance/sonic v1.14.1
 	github.com/cespare/xxhash/v2 v2.3.0
 	github.com/coreos/go-oidc/v3 v3.17.0
 	github.com/dgraph-io/ristretto/v2 v2.3.0
@@ -112,7 +113,6 @@ require (
 	github.com/aws/aws-sdk-go-v2/service/sts v1.41.6 // indirect
 	github.com/aws/smithy-go v1.24.2 // indirect
 	github.com/bytedance/gopkg v0.1.3 // indirect
-	github.com/bytedance/sonic v1.14.1 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/emersion/go-sasl v0.0.0-20241020182733-b788ff22d5a6 // indirect

pkg/querier/consume.go

@@ -12,8 +12,10 @@ import (
 	"time"
 
 	"github.com/ClickHouse/clickhouse-go/v2/lib/driver"
+	"github.com/SigNoz/signoz/pkg/errors"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/bytedance/sonic"
 )
 
 var (
@@ -22,6 +24,8 @@ var (
 	// written clickhouse query. The column alias indcate which value is
 	// to be considered as final result (or target).
 	legacyReservedColumnTargetAliases = []string{"__result", "__value", "result", "res", "value"}
+
+	CodeFailUnmarshalJSONColumn = errors.MustNewCode("fail_unmarshal_json_column")
 )
 
 // consume reads every row and shapes it into the payload expected for the
@@ -393,11 +397,16 @@ func readAsRaw(rows driver.Rows, queryName string) (*qbtypes.RawData, error) {
 
 			// de-reference the typed pointer to any
 			val := reflect.ValueOf(cellPtr).Elem().Interface()
-			// Post-process JSON columns: normalize into String value
+			// Post-process JSON columns: unmarshal bytes into map[string]any
 			if strings.HasPrefix(strings.ToUpper(colTypes[i].DatabaseTypeName()), "JSON") {
 				switch x := val.(type) {
 				case []byte:
-					val = string(x)
+					var m map[string]any
+					err := sonic.Unmarshal(x, &m)
+					if err != nil {
+						return nil, errors.WrapInternalf(err, CodeFailUnmarshalJSONColumn, "failed to unmarshal JSON column %s", name)
+					}
+					val = m
 				default:
 					// already a structured type (map[string]any, []any, etc.)
 				}

pkg/querier/postprocess.go

@@ -12,8 +12,11 @@ import (
 	"github.com/SigNoz/govaluate"
 
 	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/flagger"
+	"github.com/SigNoz/signoz/pkg/types/featuretypes"
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 // queryInfo holds common query properties.
@@ -49,7 +52,7 @@ func getQueryName(spec any) string {
 	return getqueryInfo(spec).Name
 }
 
-func (q *querier) postProcessResults(ctx context.Context, results map[string]any, req *qbtypes.QueryRangeRequest) (map[string]any, error) {
+func (q *querier) postProcessResults(ctx context.Context, orgID valuer.UUID, results map[string]any, req *qbtypes.QueryRangeRequest) (map[string]any, error) {
 	// Convert results to typed format for processing
 	typedResults := make(map[string]*qbtypes.Result)
 	for name, result := range results {
@@ -68,6 +71,7 @@ func (q *querier) postProcessResults(ctx context.Context, results map[string]any
 		case qbtypes.QueryBuilderQuery[qbtypes.LogAggregation]:
 			if result, ok := typedResults[spec.Name]; ok {
 				result = postProcessBuilderQuery(q, result, spec, req)
+				result = q.postProcessLogBody(ctx, orgID, result, req)
 				typedResults[spec.Name] = result
 			}
 		case qbtypes.QueryBuilderQuery[qbtypes.MetricAggregation]:
@@ -1026,3 +1030,33 @@ func (q *querier) calculateFormulaStep(expression string, req *qbtypes.QueryRang
 
 	return result
 }
+
+// postProcessLogBody removes the "message" key from the body map when it is empty.
+// Only runs for raw list queries with the use_json_body feature enabled.
+func (q *querier) postProcessLogBody(ctx context.Context, orgID valuer.UUID, result *qbtypes.Result, req *qbtypes.QueryRangeRequest) *qbtypes.Result {
+	if req.RequestType != qbtypes.RequestTypeRaw {
+		return result
+	}
+	if !q.fl.BooleanOrEmpty(ctx, flagger.FeatureUseJSONBody, featuretypes.NewFlaggerEvaluationContext(orgID)) {
+		return result
+	}
+	rawData, ok := result.Value.(*qbtypes.RawData)
+	if !ok {
+		return result
+	}
+	for _, row := range rawData.Rows {
+		bodyMap, ok := row.Data["body"].(map[string]any)
+		if !ok {
+			continue
+		}
+		if msg, exists := bodyMap["message"]; exists {
+			switch v := msg.(type) {
+			case string:
+				if v == "" {
+					delete(bodyMap, "message")
+				}
+			}
+		}
+	}
+	return result
+}

pkg/querier/querier.go

@@ -16,6 +16,7 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/flagger"
 	"github.com/SigNoz/signoz/pkg/prometheus"
 	"github.com/SigNoz/signoz/pkg/query-service/utils"
 	"github.com/SigNoz/signoz/pkg/querybuilder"
@@ -35,6 +36,7 @@ var (
 
 type querier struct {
 	logger                   *slog.Logger
+	fl                       flagger.Flagger
 	telemetryStore           telemetrystore.TelemetryStore
 	metadataStore            telemetrytypes.MetadataStore
 	promEngine               prometheus.Prometheus
@@ -62,10 +64,12 @@ func New(
 	meterStmtBuilder qbtypes.StatementBuilder[qbtypes.MetricAggregation],
 	traceOperatorStmtBuilder qbtypes.TraceOperatorStatementBuilder,
 	bucketCache BucketCache,
+	flagger flagger.Flagger,
 ) *querier {
 	querierSettings := factory.NewScopedProviderSettings(settings, "github.com/SigNoz/signoz/pkg/querier")
 	return &querier{
 		logger:                   querierSettings.Logger(),
+		fl:                       flagger,
 		telemetryStore:           telemetryStore,
 		metadataStore:            metadataStore,
 		promEngine:               promEngine,
@@ -684,7 +688,7 @@ func (q *querier) run(
 	}
 
 	gomaps.Copy(results, preseededResults)
-	processedResults, err := q.postProcessResults(ctx, results, req)
+	processedResults, err := q.postProcessResults(ctx, orgID, results, req)
 	if err != nil {
 		return nil, err
 	}

pkg/querier/querier_test.go

@@ -7,6 +7,7 @@ import (
 
 	cmock "github.com/srikanthccv/ClickHouse-go-mock"
 
+	"github.com/SigNoz/signoz/pkg/flagger/flaggertest"
 	"github.com/SigNoz/signoz/pkg/instrumentation/instrumentationtest"
 	"github.com/SigNoz/signoz/pkg/telemetrystore"
 	"github.com/SigNoz/signoz/pkg/telemetrystore/telemetrystoretest"
@@ -44,14 +45,15 @@ func TestQueryRange_MetricTypeMissing(t *testing.T) {
 		providerSettings,
 		nil, // telemetryStore
 		metadataStore,
-		nil, // prometheus
-		nil, // traceStmtBuilder
-		nil, // logStmtBuilder
-		nil, // auditStmtBuilder
-		nil, // metricStmtBuilder
-		nil, // meterStmtBuilder
-		nil, // traceOperatorStmtBuilder
-		nil, // bucketCache
+		nil,                // prometheus
+		nil,                // traceStmtBuilder
+		nil,                // logStmtBuilder
+		nil,                // auditStmtBuilder
+		nil,                // metricStmtBuilder
+		nil,                // meterStmtBuilder
+		nil,                // traceOperatorStmtBuilder
+		nil,                // bucketCache
+		flaggertest.New(t), // flagger
 	)
 
 	req := &qbtypes.QueryRangeRequest{
@@ -116,6 +118,7 @@ func TestQueryRange_MetricTypeFromStore(t *testing.T) {
 		nil,                      // meterStmtBuilder
 		nil,                      // traceOperatorStmtBuilder
 		nil,                      // bucketCache
+		flaggertest.New(t),       // flagger
 	)
 
 	req := &qbtypes.QueryRangeRequest{

pkg/querier/signozquerier/provider.go

@@ -186,5 +186,6 @@ func newProvider(
 		meterStmtBuilder,
 		traceOperatorStmtBuilder,
 		bucketCache,
+		flagger,
 	), nil
 }

pkg/query-service/rules/setups_test.go

@@ -53,6 +53,7 @@ func prepareQuerierForMetrics(t *testing.T, telemetryStore telemetrystore.Teleme
 		nil, // meterStmtBuilder
 		nil, // traceOperatorStmtBuilder
 		nil, // bucketCache
+		flagger,
 	), metadataStore
 }
 
@@ -102,6 +103,7 @@ func prepareQuerierForLogs(t *testing.T, telemetryStore telemetrystore.Telemetry
 		nil,            // meterStmtBuilder
 		nil,            // traceOperatorStmtBuilder
 		nil,            // bucketCache
+		fl,
 	)
 }
 
@@ -146,5 +148,6 @@ func prepareQuerierForTraces(t *testing.T, telemetryStore telemetrystore.Telemet
 		nil,              // meterStmtBuilder
 		nil,              // traceOperatorStmtBuilder
 		nil,              // bucketCache
+		fl,
 	)
 }

pkg/types/tracedetailtypes/aggregation_test.go

@@ -13,7 +13,7 @@ func mkASpan(id string, resource map[string]string, attributes map[string]any, s
 		SpanID:       id,
 		Resource:     resource,
 		Attributes:   attributes,
-		TimeUnixNano: startNs,
+		TimeUnix:     startNs,
 		DurationNano: durationNs,
 		Children:     make([]*WaterfallSpan, 0),
 	}
@@ -25,11 +25,11 @@ func buildTraceFromSpans(spans ...*WaterfallSpan) *WaterfallTrace {
 	initialized := false
 	for _, s := range spans {
 		spanMap[s.SpanID] = s
-		if !initialized || s.TimeUnixNano < startTime {
-			startTime = s.TimeUnixNano
+		if !initialized || s.TimeUnix < startTime {
+			startTime = s.TimeUnix
 			initialized = true
 		}
-		if end := s.TimeUnixNano + s.DurationNano; end > endTime {
+		if end := s.TimeUnix + s.DurationNano; end > endTime {
 			endTime = end
 		}
 	}

pkg/types/tracedetailtypes/waterfall_span.go

@@ -71,7 +71,7 @@ type WaterfallSpan struct {
 	ParentSpanID string            `json:"parent_span_id"`
 	Resource     map[string]string `json:"resource"`
 	SpanID       string            `json:"span_id"`
-	TimeUnixNano uint64            `json:"-"`
+	TimeUnix     uint64            `json:"time_unix"`
 	TraceID      string            `json:"trace_id"`
 	TraceState   string            `json:"trace_state"`
 
@@ -138,7 +138,7 @@ func NewMissingWaterfallSpan(spanID, traceID string, timeUnixNano, durationNano
 		SpanID:       spanID,
 		TraceID:      traceID,
 		Name:         "Missing Span",
-		TimeUnixNano: timeUnixNano,
+		TimeUnix:     timeUnixNano,
 		DurationNano: durationNano,
 		Events:       make([]Event, 0),
 		Children:     make([]*WaterfallSpan, 0),
@@ -150,10 +150,10 @@ func NewMissingWaterfallSpan(spanID, traceID string, timeUnixNano, durationNano
 // SortChildren recursively sorts children of each span by TimeUnixNano then Name.
 func (ws *WaterfallSpan) SortChildren() {
 	sort.Slice(ws.Children, func(i, j int) bool {
-		if ws.Children[i].TimeUnixNano == ws.Children[j].TimeUnixNano {
+		if ws.Children[i].TimeUnix == ws.Children[j].TimeUnix {
 			return ws.Children[i].Name < ws.Children[j].Name
 		}
-		return ws.Children[i].TimeUnixNano < ws.Children[j].TimeUnixNano
+		return ws.Children[i].TimeUnix < ws.Children[j].TimeUnix
 	})
 	for _, child := range ws.Children {
 		child.SortChildren()
@@ -292,7 +292,7 @@ func (item *StorableSpan) ToWaterfallSpan() *WaterfallSpan {
 		TraceID:            item.TraceID,
 		TraceState:         item.TraceState,
 		Children:           make([]*WaterfallSpan, 0),
-		TimeUnixNano:       uint64(item.StartTime.UnixNano()),
+		TimeUnix:           uint64(item.StartTime.UnixNano()),
 		ServiceName:        item.ServiceName,
 	}
 }

pkg/types/tracedetailtypes/waterfall_trace.go

@@ -95,7 +95,7 @@ func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
 			if parentNode, exists := spanIDToSpanNodeMap[spanNode.ParentSpanID]; exists {
 				parentNode.Children = append(parentNode.Children, spanNode)
 			} else {
-				missingSpan := NewMissingWaterfallSpan(spanNode.ParentSpanID, spanNode.TraceID, spanNode.TimeUnixNano, spanNode.DurationNano)
+				missingSpan := NewMissingWaterfallSpan(spanNode.ParentSpanID, spanNode.TraceID, spanNode.TimeUnix, spanNode.DurationNano)
 				missingSpan.Children = append(missingSpan.Children, spanNode)
 				spanIDToSpanNodeMap[missingSpan.SpanID] = missingSpan
 				traceRoots = append(traceRoots, missingSpan)
@@ -112,10 +112,10 @@ func NewWaterfallTraceFromSpans(spans []StorableSpan) *WaterfallTrace {
 	}
 
 	sort.Slice(traceRoots, func(i, j int) bool {
-		if traceRoots[i].TimeUnixNano == traceRoots[j].TimeUnixNano {
+		if traceRoots[i].TimeUnix == traceRoots[j].TimeUnix {
 			return traceRoots[i].Name < traceRoots[j].Name
 		}
-		return traceRoots[i].TimeUnixNano < traceRoots[j].TimeUnixNano
+		return traceRoots[i].TimeUnix < traceRoots[j].TimeUnix
 	})
 
 	return NewWaterfallTrace(
@@ -264,7 +264,7 @@ func NewGettableWaterfallTrace(
 
 	// convert start timestamp to millis because client is expecting it in millis
 	for _, span := range selectedSpans {
-		span.TimeUnixNano = span.TimeUnixNano / 1_000_000
+		span.TimeUnix = span.TimeUnix / 1_000_000
 	}
 
 	// duration values are in nanoseconds; convert in-place to milliseconds.
@@ -332,15 +332,15 @@ func mergeSpanIntervals(spans []*WaterfallSpan) uint64 {
 		return 0
 	}
 	sort.Slice(spans, func(i, j int) bool {
-		return spans[i].TimeUnixNano < spans[j].TimeUnixNano
+		return spans[i].TimeUnix < spans[j].TimeUnix
 	})
 
-	currentStart := spans[0].TimeUnixNano
+	currentStart := spans[0].TimeUnix
 	currentEnd := currentStart + spans[0].DurationNano
 	total := uint64(0)
 
 	for _, span := range spans[1:] {
-		startNano := span.TimeUnixNano
+		startNano := span.TimeUnix
 		endNano := startNano + span.DurationNano
 		if currentEnd >= startNano {
 			if endNano > currentEnd {

tests/integration/tests/querier_json_body/01_logs_json_body_new_qb.py

@@ -20,7 +20,7 @@ from fixtures.querier import (
 
 
 def _get_bodies(response: requests.Response) -> list[dict[str, Any]]:
-    return [json.loads(row["data"]["body"]) for row in get_rows(response)]
+    return [row["data"]["body"] for row in get_rows(response)]
 
 
 def _run_query_case(signoz: types.SigNoz, token: str, now: datetime, case: dict[str, Any]) -> None:
@@ -1183,7 +1183,7 @@ def test_message_searches(
     token = get_token(email=USER_ADMIN_EMAIL, password=USER_ADMIN_PASSWORD)
 
     def _body_messages(response: requests.Response) -> list[str]:
-        return [json.loads(row["data"]["body"]).get("message", "") for row in get_rows(response)]
+        return [row["data"]["body"].get("message", "") for row in get_rows(response)]
 
     payment_messages = {
         "Payment processed successfully",