Merge branch 'main' into feat/span-details-vqa

frontend/src/components/cmdKPalette/cmdKPalette.scss

@@ -1,12 +1,12 @@
 /* Overlay stays below content */
 [data-slot='dialog-overlay'] {
-	z-index: 50;
+	z-index: 1000 !important;
 }
 
 /* Dialog content always above overlay */
 [data-slot='dialog-content'] {
 	position: fixed;
-	z-index: 60;
+	z-index: 1001 !important;
 	background: var(--l1-background);
 	color: var(--l1-foreground);
 

frontend/src/periscope/components/DataViewer/DataViewer.styles.scss

@@ -12,16 +12,6 @@
 		padding-bottom: 8px;
 	}
 
-	&__mode-select {
-		min-width: 90px;
-	}
-
-	// Dropdown content is rendered in a portal; bump above FloatingPanel
-	// (z-index 999) so it stays visible when the consumer panel is floating.
-	&__mode-dropdown {
-		--dropdown-menu-content-z-index: 1000;
-	}
-
 	&__copy-btn {
 		display: flex;
 		align-items: center;
@@ -45,8 +35,7 @@
 		display: flex;
 		flex-direction: column;
 		border: 1px solid var(--l2-border);
-		border-radius: 4px;
-		padding: 8px;
+		border-top: 0px;
 		min-height: 0;
 	}
 }

frontend/src/periscope/components/DataViewer/DataViewer.tsx

@@ -1,23 +1,24 @@
 import { useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { ChevronDown, Copy } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple as Dropdown } from '@signozhq/ui/dropdown-menu';
+import { Copy } from '@signozhq/icons';
 import { toast } from '@signozhq/ui/sonner';
+import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import logEvent from 'api/common/logEvent';
 import { JsonView } from 'periscope/components/JsonView';
-import { PrettyView } from 'periscope/components/PrettyView';
-import { PrettyViewProps } from 'periscope/components/PrettyView';
+import { PrettyView, PrettyViewProps } from 'periscope/components/PrettyView';
 
 import './DataViewer.styles.scss';
 
-type ViewMode = 'pretty' | 'json';
+enum ViewMode {
+	Pretty = 'pretty',
+	Json = 'json',
+}
 
 const VIEW_MODE_CHANGED_EVENT = 'Data Viewer: View mode changed';
 
 const VIEW_MODE_OPTIONS: { label: string; value: ViewMode }[] = [
-	{ label: 'Pretty', value: 'pretty' },
-	{ label: 'JSON', value: 'json' },
+	{ label: 'Pretty', value: ViewMode.Pretty },
+	{ label: 'JSON', value: ViewMode.Json },
 ];
 
 export interface DataViewerProps {
@@ -32,13 +33,18 @@ function DataViewer({
 	drawerKey = 'default',
 	prettyViewProps,
 }: DataViewerProps): JSX.Element {
-	const [viewMode, setViewMode] = useState<ViewMode>('pretty');
+	const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Pretty);
 	const [, setCopy] = useCopyToClipboard();
 
 	const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
 	const handleViewModeChange = (value: string): void => {
 		const next = value as ViewMode;
+		// A single-select toggle can emit '' when the active item is toggled off;
+		// ignore it so one mode is always selected.
+		if (next !== ViewMode.Pretty && next !== ViewMode.Json) {
+			return;
+		}
 		setViewMode(next);
 		try {
 			logEvent(VIEW_MODE_CHANGED_EVENT, {
@@ -59,41 +65,17 @@ function DataViewer({
 		});
 	};
 
-	const currentLabel =
-		VIEW_MODE_OPTIONS.find((opt) => opt.value === viewMode)?.label ?? 'Pretty';
-
 	return (
 		<div className="data-viewer">
 			<div className="data-viewer__toolbar">
-				<Dropdown
-					align="start"
-					className="data-viewer__mode-dropdown"
-					menu={{
-						items: [
-							{
-								type: 'radio-group',
-								value: viewMode,
-								onChange: handleViewModeChange,
-								children: VIEW_MODE_OPTIONS.map((opt) => ({
-									type: 'radio',
-									key: opt.value,
-									value: opt.value,
-									label: opt.label,
-								})),
-							},
-						],
-					}}
-				>
-					<Button
-						variant="outlined"
-						size="sm"
-						color="secondary"
-						className="data-viewer__mode-select"
-						suffix={<ChevronDown size={12} />}
-					>
-						{currentLabel}
-					</Button>
-				</Dropdown>
+				<ToggleGroupSimple
+					type="single"
+					size="sm"
+					value={viewMode}
+					onChange={handleViewModeChange}
+					items={VIEW_MODE_OPTIONS}
+					testId="data-viewer-view-mode"
+				/>
 				<button
 					type="button"
 					className="data-viewer__copy-btn"
@@ -105,10 +87,10 @@ function DataViewer({
 			</div>
 
 			<div className="data-viewer__content">
-				{viewMode === 'pretty' && (
+				{viewMode === ViewMode.Pretty && (
 					<PrettyView data={data} drawerKey={drawerKey} {...prettyViewProps} />
 				)}
-				{viewMode === 'json' && <JsonView data={jsonString} />}
+				{viewMode === ViewMode.Json && <JsonView data={jsonString} />}
 			</div>
 		</div>
 	);

frontend/src/periscope/components/JsonView/JsonView.tsx

@@ -23,6 +23,9 @@ const editorOptions: EditorProps['options'] = {
 	lineHeight: 18,
 	colorDecorators: true,
 	scrollBeyondLastLine: false,
+	// Disabled: the transparent editor background leaves the sticky-scroll widget
+	// without an opaque backing, so scrolling lines bleed through and overlap it.
+	stickyScroll: { enabled: false },
 	scrollbar: {
 		vertical: 'hidden',
 		horizontal: 'hidden',
@@ -63,7 +66,7 @@ function JsonView({ data, height = '575px' }: JsonViewProps): JSX.Element {
 				value={data}
 				language="json"
 				options={{ ...editorOptions, wordWrap: isWrapWord ? 'on' : 'off' }}
-				onChange={(): void => {}}
+				onChange={(): void => { }}
 				height={height}
 				theme={isDarkMode ? 'signoz-dark' : 'light'}
 				beforeMount={setEditorTheme}

frontend/src/periscope/components/PrettyView/PrettyView.styles.scss

@@ -12,8 +12,10 @@
 
 	&__search-input {
 		width: 100%;
-		border: 1px solid var(--l2-border) !important;
-		border-radius: 4px;
+		border: 0 !important;
+		border-top: 1px solid var(--l2-border) !important;
+		border-bottom: 1px solid var(--l2-border) !important;
+		border-radius: 0 !important;
 		font-family: 'SF Mono', 'Geist Mono', 'Fira Code', monospace !important;
 		font-size: 12px !important;
 		line-height: 18px !important;
@@ -22,6 +24,7 @@
 		box-shadow: none !important;
 
 		&:focus {
+			border: 1px solid var(--l2-border) !important;
 			border-color: var(--primary) !important;
 			outline: none !important;
 			box-shadow: none !important;
@@ -47,6 +50,9 @@
 	> ul,
 	&__pinned > ul {
 		padding-left: 0 !important;
+		// Clip the hover bleed to the panel width. `clip` (not `hidden`) does
+		// not create a scroll container, so the sticky search stays working.
+		overflow-x: clip;
 	}
 
 	// Force font on all tree elements
@@ -71,45 +77,87 @@
 		margin-right: 16px;
 	}
 
-	// Leaf node row — hover highlights only this row
+	// Leaf node row — full-width hover highlight
 	&__row {
-		border-radius: 2px;
 		display: flex !important;
 		align-items: baseline;
+		position: relative;
+		isolation: isolate; // own stacking context so ::before sits behind content, not the panel bg
 
-		&:hover {
-			background-color: var(--l3-background);
+		// Keep actions visible on hover, or while this row's menu is open
+		&:hover .pretty-view__actions,
+		&:has(> span [data-state='open']) .pretty-view__actions {
+			opacity: 1;
+		}
 
-			.pretty-view__actions {
-				opacity: 1;
-			}
+		// Edge-to-edge highlight, bled past indentation, clipped by `> ul`.
+		// Persists while this row's ... menu is open (the trigger stays in the
+		// row and carries data-state=open, even though the menu is portaled out).
+		&:hover::before,
+		&:has(> span [data-state='open'])::before {
+			content: '';
+			position: absolute;
+			inset: 0 -9999px;
+			background: var(--l3-background);
+			z-index: -1;
 		}
 
 		// Push actions to the right edge
 		> span {
 			flex: 1;
 		}
+
+		// Brighten the value text from its default grey to foreground-hover
+		// while the row is active (hover, or its ... menu open). !important
+		// overrides react-json-tree's per-type inline color on the value span.
+		&:hover > span,
+		&:has(> span [data-state='open']) > span {
+			color: var(--l1-foreground-hover) !important;
+		}
 	}
 
-	// Nested node (object/array) — hover only on the label line, not children
+	// Nested node (object/array) — full-width hover on the header line only
 	&__nested-row {
+		position: relative;
+		isolation: isolate;
+
 		> label,
 		> span:not(ul span) {
-			border-radius: 2px;
 			padding: 1px 2px;
 			display: inline !important; // keep item string inline with label
 		}
 
-		// Highlight label + item string on hover, show actions
-		&:hover > label,
-		&:hover > label + span {
-			background-color: var(--l3-background);
+		// Edge-to-edge highlight, capped to the header line so it doesn't
+		// cover the children this <li> contains. Persists while this row's own
+		// menu is open — `> span` scopes it so a child row's open menu (nested
+		// in `> ul`) doesn't light up this parent.
+		&:hover::before,
+		&:has(> span [data-state='open'])::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			height: 20px; // 18px line-height + 2px top padding
+			left: -9999px;
+			right: -9999px;
+			background: var(--l3-background);
+			z-index: -1;
 		}
 
-		&:hover > label + span .pretty-view__actions {
+		&:hover > label + span .pretty-view__actions,
+		&:has(> span [data-state='open']) > label + span .pretty-view__actions {
 			opacity: 1;
 		}
 
+		// Push the ... to the right edge of the row instead of hugging the key.
+		// Absolute (not flex) so the arrow/label/children layout stays intact;
+		// the row <li> is position: relative (react-json-tree sets it inline).
+		.pretty-view__actions {
+			position: absolute;
+			top: 2px; // align with the header line (li padding-top)
+			right: 0;
+			height: 18px; // line-height — centers the icon (span is align-items: center)
+		}
+
 		// In nested rows, value-row should not take full width
 		.pretty-view__value-row {
 			width: auto;
@@ -172,6 +220,7 @@
 		display: inline-flex;
 		align-items: baseline;
 		gap: 6px;
+		padding-left: 6px !important;
 	}
 
 	&__pinned-icon {