chore: updated drilldown popup ui to match tooltip

feat: enable JSON body query support and add group by functionality (#11042 )
* feat: enable JSON body query support and add group by functionality * chore: update the FF
2026-04-27 14:10:30 +01:00 · 2026-04-27 14:17:37 +05:30 · 2026-04-27 07:24:03 +00:00 · 2026-04-27 03:11:38 +00:00
25 changed files with 20119 additions and 24002 deletions
--- a/.github/workflows/e2eci.yaml
+++ b/.github/workflows/e2eci.yaml
@@ -23,7 +23,7 @@ jobs:
          node-version: lts/*
      - name: install
        run: |
-          cd tests/e2e && yarn install --immutable
+          cd tests/e2e && yarn install --frozen-lockfile
      - name: fmt
        run: |
          cd tests/e2e && yarn fmt:check
@@ -59,7 +59,7 @@ jobs:
          cd tests && uv sync
      - name: yarn-install
        run: |
-          cd tests/e2e && yarn install --immutable
+          cd tests/e2e && yarn install --frozen-lockfile
      - name: playwright-browsers
        run: |
          cd tests/e2e && yarn playwright install --with-deps ${{ matrix.project }}
--- a/.github/workflows/jsci.yaml
+++ b/.github/workflows/jsci.yaml
@@ -79,8 +79,7 @@ jobs:
      - name: deps-install
        working-directory: ./frontend
        run: |
-          corepack enable
-          yarn install --immutable
+          yarn install
      - name: uv-install
        uses: astral-sh/setup-uv@v5
      - name: uv-deps
@@ -118,7 +117,7 @@ jobs:
        with:
          node-version: "22"
      - name: install-frontend
-        run: cd frontend && corepack enable && yarn install --immutable
+        run: cd frontend && yarn install
      - name: generate-api-clients
        run: |
          cd frontend && yarn generate:api
--- a/.gitignore
+++ b/.gitignore
@@ -10,14 +10,9 @@ node_modules
 deploy/docker/environment_tiny/common_test
 frontend/node_modules
 frontend/.pnp
-frontend/.pnp.*
 frontend/i18n-translations-hash.json
 *.pnp.js

-# Yarn Berry
-frontend/.yarn/cache
-frontend/.yarn/install-state.gz
-
 # testing
 frontend/coverage

--- a/frontend/.yarnrc
+++ b/frontend/.yarnrc
@@ -0,0 +1,2 @@
+network-timeout 600000
+save-prefix ""
--- a/frontend/.yarnrc.yml
+++ b/frontend/.yarnrc.yml
@@ -1,9 +0,0 @@
-nodeLinker: node-modules
-
-httpTimeout: 600000
-
-defaultSemverRangePrefix: ""
-
-enableGlobalCache: false
-
-enableScripts: true
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -246,8 +246,6 @@
  "resolutions": {
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.10",
-    "@types/styled-components": "5.1.26",
-    "@types/lodash": "4.14.194",
    "debug": "4.3.4",
    "semver": "7.5.4",
    "xml2js": "0.5.0",
@@ -264,6 +262,5 @@
    "on-headers": "^1.1.0",
    "tmp": "0.2.4",
    "vite": "npm:rolldown-vite@7.3.1"
-  },
-  "packageManager": "yarn@4.14.1"
-}
+  }
+}
--- a/frontend/src/assets/Logos/baseten.svg
+++ b/frontend/src/assets/Logos/baseten.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="34" viewBox="0 0 131 34">
+  <path fill="currentColor" 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>
--- a/frontend/src/assets/Logos/dbos.svg
+++ b/frontend/src/assets/Logos/dbos.svg
@@ -0,0 +1,13 @@
+<svg width="109" height="24" viewBox="0 0 109 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_125_22125)">
+<path d="M0 -2.08616e-07V24H17.9352C22.9911 24 26.0999 21.0858 26.0999 17.04V6.96C26.0999 2.91432 22.9911 -2.08616e-07 17.9352 -2.08616e-07H0ZM6.76413 5.82864H19.1992V18.1714H6.76413V5.82864Z" fill="currentColor"/>
+<path d="M46.7659 18.6172H35.0824V14.16H46.7659V18.6172ZM46.595 5.38296V9.5658H35.0824V5.38296H46.595ZM50.2846 12.1373V11.5886C52.5734 10.5258 53.7008 8.8458 53.7008 6.13728C53.7008 2.64012 50.9337 0.000116183 45.5361 0.000116183H28.3184V24H45.7752C51.1728 24 53.9399 21.8401 53.9399 18.0685C53.9399 15.0172 52.6418 13.2001 50.2846 12.1373Z" fill="currentColor"/>
+<path d="M62.397 18.1714H74.8319V5.82864H62.397V18.1714ZM63.6609 24C58.6049 24 55.4961 21.0858 55.4961 17.04V6.96012C55.4961 2.91432 58.6049 0.000116183 63.6609 0.000116183H73.568C78.6238 0.000116183 81.7326 2.91432 81.7326 6.96012V17.04C81.7326 21.0858 78.6238 24 73.568 24H63.6609Z" fill="currentColor"/>
+<path d="M101.66 15.12L90.8995 14.3658C85.5361 13.9886 83.418 11.1772 83.418 7.47432V6.96012C83.418 2.91432 86.5266 0.000116183 91.5827 0.000116183H100.157C105.214 0.000116183 108.323 2.91432 108.323 6.96012V7.98864H101.968V5.14284H90.2504V8.43432L100.601 9.18864C105.999 9.56568 108.493 12.8572 108.493 16.5257V17.04C108.493 20.7428 105.384 24 100.328 24H91.5827C86.5266 24 83.418 20.7428 83.418 17.04V16.0115H89.7722V18.8572H101.66V15.12Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_125_22125">
+<rect width="108.494" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/frontend/src/assets/Logos/opencode.svg
+++ b/frontend/src/assets/Logos/opencode.svg
@@ -0,0 +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>
--- a/frontend/src/components/LogDetail/index.tsx
+++ b/frontend/src/components/LogDetail/index.tsx
@@ -10,6 +10,7 @@ import cx from 'classnames';
 import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator';
 import QuerySearch from 'components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch';
 import { convertExpressionToFilters } from 'components/QueryBuilderV2/utils';
+import { FeatureKeys } from 'constants/features';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
@@ -46,6 +47,7 @@ import {
 	TextSelect,
 	X,
 } from 'lucide-react';
+import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
@@ -79,6 +81,10 @@ function LogDetailInner({
 	const [selectedView, setSelectedView] = useState<VIEWS>(selectedTab);

 	const [isFilterVisible, setIsFilterVisible] = useState<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;

 	const [filters, setFilters] = useState<TagFilter | null>(null);
 	const [isEdit, setIsEdit] = useState<boolean>(false);
@@ -208,11 +214,29 @@ function LogDetailInner({
 		}
 	};

+	const logBody = useMemo(() => {
+		if (!isBodyJsonQueryEnabled) {
+			return log?.body || '';
+		}
+
+		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 || '';
+		}
+	}, [isBodyJsonQueryEnabled, log?.body]);
+
 	const htmlBody = useMemo(
 		() => ({
-			__html: getSanitizedLogBody(log?.body || '', { shouldEscapeHtml: true }),
+			__html: getSanitizedLogBody(logBody || '', { shouldEscapeHtml: true }),
 		}),
-		[log?.body],
+		[logBody],
 	);

 	const handleJSONCopy = (): void => {
@@ -418,7 +442,7 @@ function LogDetailInner({
 				<div className="log-detail-drawer__log">
 					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
 					<Tooltip
-						title={removeEscapeCharacters(log?.body)}
+						title={removeEscapeCharacters(logBody)}
 						placement="left"
 						mouseLeaveDelay={0}
 					>
--- a/frontend/src/constants/features.ts
+++ b/frontend/src/constants/features.ts
@@ -9,4 +9,5 @@ export enum FeatureKeys {
 	ANOMALY_DETECTION = 'anomaly_detection',
 	ONBOARDING_V3 = 'onboarding_v3',
 	DOT_METRICS_ENABLED = 'dot_metrics_enabled',
+	BODY_JSON_ENABLED = 'body_json_enabled',
 }
--- a/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
+++ b/frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts
@@ -104,7 +104,12 @@ export const usePanelContextMenu = ({
 			}

 			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label, timeRange });
+				onClick(data.coord, {
+					...data.record,
+					label: data.label,
+					seriesColor: data.seriesColor,
+					timeRange,
+				});
 			}
 		},
 		[onClick, queryResponse],
--- a/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx
+++ b/frontend/src/container/LogDetailedView/BodyTitleRenderer.tsx
@@ -8,8 +8,19 @@ import {
 	OPERATORS,
 	QUERY_BUILDER_FUNCTIONS,
 } from 'constants/antlrQueryConstants';
+import { FeatureKeys } from 'constants/features';
+import { QueryParams } from 'constants/query';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { useGetSearchQueryParam } from 'hooks/queryBuilder/useGetSearchQueryParam';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { ICurrentQueryData } from 'hooks/useHandleExplorerTabChange';
 import { useNotifications } from 'hooks/useNotifications';
+import { ExplorerViews } from 'pages/LogsExplorer/utils';
+import { useAppContext } from 'providers/App/App';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';

 import { TitleWrapper } from './BodyTitleRenderer.styles';
 import { DROPDOWN_KEY } from './constant';
@@ -25,17 +36,32 @@ function BodyTitleRenderer({
 	parentIsArray = false,
 	nodeKey,
 	value,
+	handleChangeSelectedView,
 }: BodyTitleRendererProps): JSX.Element {
 	const { onAddToQuery } = useActiveLog();
+	const { stagedQuery, updateQueriesData } = useQueryBuilder();
+
+	const { featureFlags } = useAppContext();
 	const [, setCopy] = useCopyToClipboard();
 	const { notifications } = useNotifications();
+	const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
+
+	const cleanedNodeKey = removeObjectFromString(nodeKey);
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;
+
+	// Group by is supported only for body json query enabled and not for array elements
+	const isGroupBySupported =
+		isBodyJsonQueryEnabled && !cleanedNodeKey.includes('[]');

 	const filterHandler = (isFilterIn: boolean) => (): void => {
 		if (parentIsArray) {
 			onAddToQuery(
 				generateFieldKeyForArray(
-					removeObjectFromString(nodeKey),
+					cleanedNodeKey,
 					getDataTypes(value),
+					isBodyJsonQueryEnabled,
 				),
 				`${value}`,
 				isFilterIn
@@ -45,7 +71,7 @@ function BodyTitleRenderer({
 			);
 		} else {
 			onAddToQuery(
-				`body.${removeObjectFromString(nodeKey)}`,
+				`body.${cleanedNodeKey}`,
 				`${value}`,
 				isFilterIn ? OPERATORS['='] : OPERATORS['!='],
 				getDataTypes(value),
@@ -53,10 +79,67 @@ function BodyTitleRenderer({
 		}
 	};

+	const groupByHandler = useCallback((): void => {
+		if (!stagedQuery) {
+			return;
+		}
+
+		const groupByKey = parentIsArray
+			? generateFieldKeyForArray(
+					cleanedNodeKey,
+					getDataTypes(value),
+					isBodyJsonQueryEnabled,
+				)
+			: `body.${cleanedNodeKey}`;
+
+		const fieldDataType = getDataTypes(value);
+		const normalizedDataType: DataTypes | undefined = Object.values(
+			DataTypes,
+		).includes(fieldDataType as DataTypes)
+			? (fieldDataType as DataTypes)
+			: undefined;
+
+		const updatedQuery = updateQueriesData(
+			stagedQuery,
+			'queryData',
+			(item, index) => {
+				if (index === 0) {
+					const newGroupByItem: BaseAutocompleteData = {
+						key: groupByKey,
+						type: '',
+						dataType: normalizedDataType,
+					};
+
+					return { ...item, groupBy: [...(item.groupBy || []), newGroupByItem] };
+				}
+
+				return item;
+			},
+		);
+
+		const queryData: ICurrentQueryData = {
+			name: viewName,
+			id: updatedQuery.id,
+			query: updatedQuery,
+		};
+
+		handleChangeSelectedView?.(ExplorerViews.TIMESERIES, queryData);
+	}, [
+		cleanedNodeKey,
+		handleChangeSelectedView,
+		isBodyJsonQueryEnabled,
+		parentIsArray,
+		stagedQuery,
+		updateQueriesData,
+		value,
+		viewName,
+	]);
+
 	const onClickHandler: MenuProps['onClick'] = (props): void => {
 		const mapper = {
 			[DROPDOWN_KEY.FILTER_IN]: filterHandler(true),
 			[DROPDOWN_KEY.FILTER_OUT]: filterHandler(false),
+			[DROPDOWN_KEY.GROUP_BY]: groupByHandler,
 		};

 		const handler = mapper[props.key];
@@ -76,6 +159,14 @@ function BodyTitleRenderer({
 				key: DROPDOWN_KEY.FILTER_OUT,
 				label: `Filter out ${value}`,
 			},
+			...(isGroupBySupported
+				? [
+						{
+							key: DROPDOWN_KEY.GROUP_BY,
+							label: `Group by ${nodeKey}`,
+						},
+					]
+				: []),
 		],
 		onClick: onClickHandler,
 	};
@@ -84,7 +175,6 @@ function BodyTitleRenderer({
 		(e: React.MouseEvent): void => {
 			// Prevent tree node expansion/collapse
 			e.stopPropagation();
-			const cleanedKey = removeObjectFromString(nodeKey);
 			let copyText: string;

 			// Check if value is an object or array
@@ -106,8 +196,8 @@ function BodyTitleRenderer({

 			if (copyText) {
 				const notificationMessage = isObject
-					? `${cleanedKey} object copied to clipboard`
-					: `${cleanedKey} copied to clipboard`;
+					? `${cleanedNodeKey} object copied to clipboard`
+					: `${cleanedNodeKey} copied to clipboard`;

 				notifications.success({
 					message: notificationMessage,
@@ -115,7 +205,7 @@ function BodyTitleRenderer({
 				});
 			}
 		},
-		[nodeKey, parentIsArray, setCopy, value, notifications],
+		[cleanedNodeKey, parentIsArray, setCopy, value, notifications],
 	);

 	return (
--- a/frontend/src/container/LogDetailedView/LogDetailedView.types.ts
+++ b/frontend/src/container/LogDetailedView/LogDetailedView.types.ts
@@ -1,3 +1,4 @@
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import { ILog } from 'types/api/logs/log';

@@ -6,6 +7,7 @@ export interface BodyTitleRendererProps {
 	nodeKey: string;
 	value: unknown;
 	parentIsArray?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
 }

 export type AnyObject = { [key: string]: any };
--- a/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
+++ b/frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Popover, Spin, Tooltip, Tree } from 'antd';
+import type { DataNode } from 'antd/es/tree';
 import GroupByIcon from 'assets/CustomIcons/GroupByIcon';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';
@@ -57,7 +58,7 @@ interface ITableViewActionsProps {
 }

 // Memoized Tree Component
-const MemoizedTree = React.memo<{ treeData: any[] }>(({ treeData }) => (
+const MemoizedTree = React.memo<{ treeData: DataNode[] }>(({ treeData }) => (
 	<Tree
 		defaultExpandAll
 		showLine
@@ -74,50 +75,54 @@ const BodyContent: React.FC<{
 	record: DataType;
 	bodyHtml: { __html: string };
 	textToCopy: string;
-}> = React.memo(({ fieldData, record, bodyHtml, textToCopy }) => {
-	const { isLoading, treeData, error } = useAsyncJSONProcessing(
-		fieldData.value,
-		record.field === 'body',
-	);
-
-	// Show JSON tree if available, otherwise show HTML content
-	if (record.field === 'body' && treeData) {
-		return <MemoizedTree treeData={treeData} />;
-	}
-
-	if (record.field === 'body' && isLoading) {
-		return (
-			<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-				<Spin size="small" />
-				<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
-			</div>
+	handleChangeSelectedView?: ChangeViewFunctionType;
+}> = React.memo(
+	({ fieldData, record, bodyHtml, textToCopy, handleChangeSelectedView }) => {
+		const { isLoading, treeData, error } = useAsyncJSONProcessing(
+			fieldData.value,
+			record.field === 'body',
+			handleChangeSelectedView,
 		);
-	}

-	if (record.field === 'body' && error) {
-		return (
-			<span
-				style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
-			>
-				Error parsing Body JSON
-			</span>
-		);
-	}
+		// Show JSON tree if available, otherwise show HTML content
+		if (record.field === 'body' && treeData) {
+			return <MemoizedTree treeData={treeData} />;
+		}

-	if (record.field === 'body') {
-		return (
-			<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+		if (record.field === 'body' && isLoading) {
+			return (
+				<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+					<Spin size="small" />
+					<span style={{ color: Color.BG_SIENNA_400 }}>Processing JSON...</span>
+				</div>
+			);
+		}
+
+		if (record.field === 'body' && error) {
+			return (
 				<span
 					style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
 				>
-					<span dangerouslySetInnerHTML={bodyHtml} />
+					Error parsing Body JSON
 				</span>
-			</CopyClipboardHOC>
-		);
-	}
+			);
+		}

-	return null;
-});
+		if (record.field === 'body') {
+			return (
+				<CopyClipboardHOC entityKey="body" textToCopy={textToCopy}>
+					<span
+						style={{ color: Color.BG_SIENNA_400, whiteSpace: 'pre-wrap', tabSize: 4 }}
+					>
+						<span dangerouslySetInnerHTML={bodyHtml} />
+					</span>
+				</CopyClipboardHOC>
+			);
+		}
+
+		return null;
+	},
+);

 BodyContent.displayName = 'BodyContent';

@@ -319,6 +324,7 @@ export default function TableViewActions(
 						record={record}
 						bodyHtml={bodyHtml}
 						textToCopy={textToCopy}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				);

@@ -342,6 +348,7 @@ export default function TableViewActions(
 		fieldData,
 		bodyHtml,
 		textToCopy,
+		handleChangeSelectedView,
 		formatTimezoneAdjustedTimestamp,
 		cleanTimestamp,
 	]);
@@ -355,6 +362,7 @@ export default function TableViewActions(
 					record={record}
 					bodyHtml={bodyHtml}
 					textToCopy={textToCopy}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 				{!isListViewPanel &&
 					!RESTRICTED_SELECTED_FIELDS.includes(fieldFilterKey) && (
--- a/frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts
+++ b/frontend/src/container/LogDetailedView/TableView/useAsyncJSONProcessing.ts
@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
+import { FeatureKeys } from 'constants/features';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { isEmpty } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';

 import { jsonToDataNodes, recursiveParseJSON } from '../utils';

@@ -9,6 +12,7 @@ const MAX_BODY_BYTES = 100 * 1024; // 100 KB
 const useAsyncJSONProcessing = (
 	value: string,
 	shouldProcess: boolean,
+	handleChangeSelectedView?: ChangeViewFunctionType,
 ): {
 	isLoading: boolean;
 	treeData: any[] | null;
@@ -25,6 +29,10 @@ const useAsyncJSONProcessing = (
 	});

 	const processingRef = useRef<boolean>(false);
+	const { featureFlags } = useAppContext();
+	const isBodyJsonQueryEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.BODY_JSON_ENABLED)
+			?.active || false;

 	// eslint-disable-next-line sonarjs/cognitive-complexity
 	useEffect((): (() => void) => {
@@ -47,7 +55,10 @@ const useAsyncJSONProcessing = (
 				try {
 					const parsedBody = recursiveParseJSON(value);
 					if (!isEmpty(parsedBody)) {
-						const treeData = jsonToDataNodes(parsedBody);
+						const treeData = jsonToDataNodes(parsedBody, {
+							isBodyJsonQueryEnabled,
+							handleChangeSelectedView,
+						});
 						setJsonState({ isLoading: false, treeData, error: null });
 					} else {
 						setJsonState({ isLoading: false, treeData: null, error: null });
@@ -73,7 +84,10 @@ const useAsyncJSONProcessing = (
 						try {
 							const parsedBody = recursiveParseJSON(value);
 							if (!isEmpty(parsedBody)) {
-								const treeData = jsonToDataNodes(parsedBody);
+								const treeData = jsonToDataNodes(parsedBody, {
+									isBodyJsonQueryEnabled,
+									handleChangeSelectedView,
+								});
 								setJsonState({ isLoading: false, treeData, error: null });
 							} else {
 								setJsonState({ isLoading: false, treeData: null, error: null });
@@ -101,7 +115,7 @@ const useAsyncJSONProcessing = (
 		return (): void => {
 			processingRef.current = false;
 		};
-	}, [value, shouldProcess]);
+	}, [value, shouldProcess, isBodyJsonQueryEnabled, handleChangeSelectedView]);

 	return jsonState;
 };
--- a/frontend/src/container/LogDetailedView/constant.ts
+++ b/frontend/src/container/LogDetailedView/constant.ts
@@ -1,4 +1,5 @@
 export const DROPDOWN_KEY = {
 	FILTER_IN: 'filterIn',
 	FILTER_OUT: 'filterOut',
+	GROUP_BY: 'groupBy',
 };
--- a/frontend/src/container/LogDetailedView/utils.tsx
+++ b/frontend/src/container/LogDetailedView/utils.tsx
@@ -1,5 +1,6 @@
 import Convert from 'ansi-to-html';
 import type { DataNode } from 'antd/es/tree';
+import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { MetricsType } from 'container/MetricsApplication/constant';
 import dompurify from 'dompurify';
 import { uniqueId } from 'lodash-es';
@@ -34,13 +35,32 @@ export const recursiveParseJSON = (obj: string): Record<string, unknown> => {
 	}
 };

-export const computeDataNode = (
-	key: string,
-	valueIsArray: boolean,
-	value: unknown,
-	nodeKey: string,
-	parentIsArray: boolean,
-): DataNode => ({
+type JsonToDataNodesOptions = {
+	parentKey?: string;
+	parentIsArray?: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+type ComputeDataNodeOptions = {
+	key: string;
+	valueIsArray: boolean;
+	value: unknown;
+	nodeKey: string;
+	parentIsArray: boolean;
+	isBodyJsonQueryEnabled?: boolean;
+	handleChangeSelectedView?: ChangeViewFunctionType;
+};
+
+export const computeDataNode = ({
+	key,
+	valueIsArray,
+	value,
+	nodeKey,
+	parentIsArray,
+	isBodyJsonQueryEnabled = false,
+	handleChangeSelectedView,
+}: ComputeDataNodeOptions): DataNode => ({
 	key: uniqueId(),
 	title: (
 		<BodyTitleRenderer
@@ -48,20 +68,30 @@ export const computeDataNode = (
 			nodeKey={nodeKey}
 			value={value}
 			parentIsArray={parentIsArray}
+			handleChangeSelectedView={handleChangeSelectedView}
 		/>
 	),
-	children: jsonToDataNodes(
-		value as Record<string, unknown>,
-		valueIsArray ? `${nodeKey}[*]` : nodeKey,
-		valueIsArray,
-	),
+	children: jsonToDataNodes(value as Record<string, unknown>, {
+		parentKey: valueIsArray
+			? `${nodeKey}${isBodyJsonQueryEnabled ? '[]' : '[*]'}`
+			: nodeKey,
+		parentIsArray: valueIsArray,
+		isBodyJsonQueryEnabled,
+		handleChangeSelectedView,
+	}),
 });

 export function jsonToDataNodes(
 	json: Record<string, unknown>,
-	parentKey = '',
-	parentIsArray = false,
+	options: JsonToDataNodesOptions = {},
 ): DataNode[] {
+	const {
+		parentKey = '',
+		parentIsArray = false,
+		isBodyJsonQueryEnabled = false,
+		handleChangeSelectedView,
+	} = options;
+
 	return Object.entries(json).map(([key, value]) => {
 		let nodeKey = parentKey || key;
 		if (parentIsArray) {
@@ -74,7 +104,15 @@ export function jsonToDataNodes(

 		if (parentIsArray) {
 			if (typeof value === 'object' && value !== null) {
-				return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
+				return computeDataNode({
+					key,
+					valueIsArray,
+					value,
+					nodeKey,
+					parentIsArray,
+					isBodyJsonQueryEnabled,
+					handleChangeSelectedView,
+				});
 			}

 			return {
@@ -85,14 +123,31 @@ export function jsonToDataNodes(
 						nodeKey={nodeKey}
 						value={value}
 						parentIsArray={parentIsArray}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
 				),
-				children: jsonToDataNodes({}, nodeKey, valueIsArray),
+				children: jsonToDataNodes(
+					{},
+					{
+						parentKey: nodeKey,
+						parentIsArray: valueIsArray,
+						isBodyJsonQueryEnabled,
+						handleChangeSelectedView,
+					},
+				),
 			};
 		}

 		if (typeof value === 'object' && value !== null) {
-			return computeDataNode(key, valueIsArray, value, nodeKey, parentIsArray);
+			return computeDataNode({
+				key,
+				valueIsArray,
+				value,
+				nodeKey,
+				parentIsArray,
+				isBodyJsonQueryEnabled,
+				handleChangeSelectedView,
+			});
 		}
 		return {
 			key: uniqueId(),
@@ -102,6 +157,7 @@ export function jsonToDataNodes(
 					nodeKey={nodeKey}
 					value={value}
 					parentIsArray={parentIsArray}
+					handleChangeSelectedView={handleChangeSelectedView}
 				/>
 			),
 		};
@@ -123,6 +179,7 @@ export function flattenObject(obj: AnyObject, prefix = ''): AnyObject {
 export const generateFieldKeyForArray = (
 	fieldKey: string,
 	dataType: DataTypes,
+	isBodyJsonQueryEnabled = false,
 ): string => {
 	let lastDotIndex = fieldKey.lastIndexOf('.');
 	let resultNodeKey = fieldKey;
@@ -138,6 +195,16 @@ export const generateFieldKeyForArray = (
 			newResultNodeKey = resultNodeKey.substring(0, lastDotIndex);
 		}
 	}
+
+	// When filtering for a value inside an array, the query builder expects the
+	// last array segment to be referenced without the trailing `[]`.
+	// Examples:
+	// - has(body.config.features, 'fast_checkout')
+	// - has(body.config.features[].items, 'pen')
+	// - has(body.config.features[].items[].variants, 'ballpen')
+	if (isBodyJsonQueryEnabled && newResultNodeKey.endsWith('[]')) {
+		newResultNodeKey = newResultNodeKey.slice(0, -2);
+	}
 	return `body.${newResultNodeKey}`;
 };

--- a/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
+++ b/frontend/src/container/OnboardingV2Container/onboarding-configs/onboarding-config-with-links.ts
@@ -16,6 +16,7 @@ import azureMysqlUrl from '@/assets/Logos/azure-mysql.svg';
 import azureOpenaiUrl from '@/assets/Logos/azure-openai.svg';
 import azureSqlDatabaseMetricsUrl from '@/assets/Logos/azure-sql-database-metrics.svg';
 import azureVmUrl from '@/assets/Logos/azure-vm.svg';
+import basetenUrl from '@/assets/Logos/baseten.svg';
 import celeryUrl from '@/assets/Logos/celery.svg';
 import claudeCodeUrl from '@/assets/Logos/claude-code.svg';
 import clickhouseUrl from '@/assets/Logos/clickhouse.svg';
@@ -27,6 +28,7 @@ import cppUrl from '@/assets/Logos/cpp.svg';
 import crewAiUrl from '@/assets/Logos/crew-ai.svg';
 import dashboardsUrl from '@/assets/Logos/dashboards.svg';
 import datadogUrl from '@/assets/Logos/datadog.svg';
+import dbosUrl from '@/assets/Logos/dbos.svg';
 import deepseekUrl from '@/assets/Logos/deepseek.svg';
 import denoUrl from '@/assets/Logos/deno.svg';
 import dockerUrl from '@/assets/Logos/docker.svg';
@@ -105,6 +107,7 @@ import nvidiaDcgmUrl from '@/assets/Logos/nvidia-dcgm.svg';
 import ollamaUrl from '@/assets/Logos/ollama.svg';
 import openaiUrl from '@/assets/Logos/openai.svg';
 import openclawUrl from '@/assets/Logos/openclaw.svg';
+import opencodeUrl from '@/assets/Logos/opencode.svg';
 import openlitUrl from '@/assets/Logos/openlit.svg';
 import openrouterUrl from '@/assets/Logos/openrouter.svg';
 import opentelemetryUrl from '@/assets/Logos/opentelemetry.svg';
@@ -5168,6 +5171,79 @@ const onboardingConfigWithLinks = [
 		id: 'hasura',
 		link: '/docs/integrations/opentelemetry-hasura/',
 	},
+	{
+		dataSource: 'opencode-observability',
+		label: 'OpenCode',
+		imgUrl: opencodeUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'ai coding',
+			'ai editor',
+			'code editor',
+			'llm',
+			'llm monitoring',
+			'monitoring',
+			'observability',
+			'opencode',
+			'opencode logs',
+			'opencode metrics',
+			'opencode monitoring',
+			'opencode observability',
+			'opencode traces',
+			'opentelemetry opencode',
+		],
+		id: 'opencode-observability',
+		link: '/docs/opencode-observability/',
+	},
+	{
+		dataSource: 'baseten-monitoring',
+		label: 'Baseten',
+		imgUrl: basetenUrl,
+		tags: ['LLM Monitoring'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'baseten',
+			'baseten logs',
+			'baseten metrics',
+			'baseten monitoring',
+			'baseten observability',
+			'baseten traces',
+			'llm',
+			'llm monitoring',
+			'ml model serving',
+			'model inference',
+			'monitoring',
+			'observability',
+			'opentelemetry baseten',
+		],
+		id: 'baseten-monitoring',
+		link: '/docs/baseten-monitoring/',
+	},
+	{
+		dataSource: 'dbos',
+		label: 'DBOS',
+		imgUrl: dbosUrl,
+		tags: ['apm/traces'],
+		module: 'apm',
+		relatedSearchKeywords: [
+			'database oriented',
+			'dbos',
+			'dbos instrumentation',
+			'dbos logs',
+			'dbos metrics',
+			'dbos monitoring',
+			'dbos observability',
+			'dbos traces',
+			'monitoring',
+			'observability',
+			'opentelemetry dbos',
+			'transactional runtime',
+			'workflow monitoring',
+		],
+		id: 'dbos',
+		link: '/docs/integrations/opentelemetry-dbos/',
+	},
 	{
 		dataSource: 'supabase',
 		label: 'Supabase',
--- a/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx
@@ -196,6 +196,7 @@ export const getUplotClickData = ({
 	coord: { x: number; y: number };
 	record: { queryName: string; filters: FilterData[] };
 	label: string | React.ReactNode;
+	seriesColor?: string;
 } | null => {
 	if (!queryData?.queryName || !metric) {
 		return null;
@@ -208,6 +209,8 @@ export const getUplotClickData = ({

 	// Generate label from focusedSeries data
 	let label: string | React.ReactNode = '';
+	const seriesColor = focusedSeries?.color;
+
 	if (focusedSeries && focusedSeries.seriesName) {
 		label = (
 			<span style={{ color: focusedSeries.color }}>
@@ -223,6 +226,7 @@ export const getUplotClickData = ({
 		},
 		record,
 		label,
+		seriesColor,
 	};
 };

@@ -237,6 +241,7 @@ export const getPieChartClickData = (
 	queryName: string;
 	filters: FilterData[];
 	label: string | React.ReactNode;
+	seriesColor?: string;
 } | null => {
 	const { metric, queryName } = arc.data.record;
 	if (!queryName || !metric) {
@@ -248,6 +253,7 @@ export const getPieChartClickData = (
 		queryName,
 		filters: getFiltersFromMetric(metric), // TODO: add where clause query as well.
 		label,
+		seriesColor: arc.data.color,
 	};
 };

--- a/frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx
@@ -22,6 +22,7 @@ export interface AggregateData {
 		endTime: number;
 	};
 	label?: string | React.ReactNode;
+	seriesColor?: string;
 }

 const useAggregateDrilldown = ({
--- a/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
+++ b/frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx
@@ -228,7 +228,13 @@ const useBaseAggregateOptions = ({
 									return (
 										<ContextMenu.Item
 											key={key}
-											icon={isLoading ? <LoadingOutlined spin /> : icon}
+											icon={
+												isLoading ? (
+													<LoadingOutlined spin />
+												) : (
+													<span style={{ color: aggregateData?.seriesColor }}>{icon}</span>
+												)
+											}
 											onClick={(): void => onClick()}
 											disabled={isLoading}
 										>
--- a/frontend/src/periscope/components/ContextMenu/styles.scss
+++ b/frontend/src/periscope/components/ContextMenu/styles.scss
@@ -4,7 +4,7 @@
 	gap: 8px;
 	padding: 8px;
 	cursor: pointer;
-	color: var(--foreground);
+	color: var(--muted-foreground);
 	font-family: Inter;
 	font-size: var(--font-size-sm);
 	font-weight: 600;
@@ -20,13 +20,10 @@
 	overflow: hidden;
 	text-overflow: ellipsis;

-	&:hover {
-		background-color: var(--l1-background);
-	}
-
+	&:hover,
 	&:focus {
 		outline: none;
-		background-color: var(--l1-background);
+		background-color: var(--l2-background-hover);
 	}

 	&.disabled {
@@ -47,7 +44,8 @@
 		}

 		&:hover {
-			background-color: var(--bg-cherry-100);
+			background-color: var(--danger-background);
+			color: var(--l1-foreground);
 		}
 	}

@@ -74,73 +72,24 @@
 }

 .context-menu-header {
-	padding-bottom: 4px;
-	border-bottom: 1px solid var(--l1-border);
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--l2-border);
 	color: var(--muted-foreground);
 }

-// Target the popover inner specifically for context menu
 .context-menu .ant-popover-inner {
-	padding: 12px 8px !important;
-	// max-height: 254px !important;
-	max-width: 300px !important;
+	padding: 0;
+	border-radius: 6px;
+	max-width: 300px;
+	background: var(--l2-background) !important;
+	border: 1px solid var(--l2-border) !important;
 }

-// Dark mode support
-.darkMode {
-	.context-menu-item {
-		color: var(--muted-foreground);
-
-		&:hover,
-		&:focus {
-			background-color: var(--l2-background);
-		}
-
-		&.danger {
-			color: var(--bg-cherry-400);
-
-			.icon {
-				color: var(--bg-cherry-400);
-			}
-
-			&:hover {
-				background-color: var(--danger-background);
-				color: var(--l1-foreground);
-			}
-		}
-
-		.icon {
-			color: var(--bg-robin-400);
-		}
-	}
-
-	.context-menu-header {
-		border-bottom: 1px solid var(--l1-border);
-		color: var(--muted-foreground);
-	}
-
-	// Set the menu popover background
-	.context-menu .ant-popover-inner {
-		background: var(--l1-background) !important;
-		border: 1px solid var(--border) !important;
-	}
-}
-
-// Context menu backdrop overlay
 .context-menu-backdrop {
 	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
+	inset: 0;
 	z-index: 9999;
 	background: transparent;
 	cursor: default;
-
-	// Prevent any pointer events from reaching elements behind
 	pointer-events: auto;
-
-	// Ensure it covers the entire viewport including any scrollable areas
-	position: fixed !important;
-	inset: 0;
 }
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -32,9 +32,6 @@
 			],
 			"@/*": [
 				"./src/*"
-			],
-			"react-router": [
-				"./node_modules/@types/react-router"
 			]
 		},
 		"downlevelIteration": true,
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
Author	SHA1	Message	Date
Abhi Kumar	0115a3d51a	chore: updated drilldown popup ui to match tooltip	2026-04-27 14:17:37 +05:30
Yunus M	a4266fa703	feat: enable JSON body query support and add group by functionality (#11042 ) * feat: enable JSON body query support and add group by functionality * chore: update the FF	2026-04-27 07:24:03 +00:00
Shivam Gupta	44add7b7cd	feat(onboarding): add OpenCode, Baseten, and DBOS datasources (#11109 ) Some checks failed build-staging / prepare (push) Has been cancelled Details build-staging / js-build (push) Has been cancelled Details build-staging / go-build (push) Has been cancelled Details build-staging / staging (push) Has been cancelled Details Release Drafter / update_release_draft (push) Has been cancelled Details * feat(onboarding): add OpenCode, Baseten, and DBOS datasources Adds three new datasources to the onboarding config with logos and documentation links, closing signoz.io issues #3111, #3053, and #3040. Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com> * fix(onboarding): fix basetenUrl import alphabetical ordering --------- Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>	2026-04-27 03:11:38 +00:00
				`@@ -0,0 +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>