fix: added fix for tooltip prox on hover in uplot

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

README.de-de.md

@@ -176,25 +176,6 @@ Wir haben Benchmarks veröffentlicht, die Loki mit SigNoz vergleichen. Schauen S
 Wir ❤️ Beiträge zum Projekt, egal ob große oder kleine. Bitte lies dir zuerst die [CONTRIBUTING.md](CONTRIBUTING.md), durch, bevor du anfängst, Beiträge zu SigNoz zu machen.
 Du bist dir nicht sicher, wie du anfangen sollst? Schreib uns einfach auf dem #contributing Kanal in unserer [slack community](https://signoz.io/slack)
 
-### Unsere Projektbetreuer
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### Frontend
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## Dokumentation

README.md

@@ -221,34 +221,6 @@ We ❤️ contributions big or small. Please read [CONTRIBUTING.md](CONTRIBUTING
 
 Not sure how to get started? Just ping us on `#contributing` in our [slack community](https://signoz.io/slack)
 
-### Project maintainers
-
-#### Backend
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-- [Shivanshu Raj Shrivastava](https://github.com/shivanshuraj1333)
-- [Ekansh Gupta](https://github.com/eKuG)
-- [Aniket Agarwal](https://github.com/aniketio-ctrl)
-
-#### Frontend
-
-- [Yunus M](https://github.com/YounixM)
-- [Vikrant Gupta](https://github.com/vikrantgupta25)
-- [Sagar Rajput](https://github.com/SagarRajput-7)
-- [Shaheer Kochai](https://github.com/ahmadshaheer)
-- [Amlan Kumar Nandy](https://github.com/amlannandy)
-- [Sahil Khan](https://github.com/sawhil)
-- [Aditya Singh](https://github.com/aks07)
-- [Abhi Kumar](https://github.com/ahrefabhi)
-
-#### DevOps
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-- [Vibhu Pandey](https://github.com/therealpandey)
-
 <br /><br />
 
 

README.zh-cn.md

@@ -187,25 +187,6 @@ Jaeger 仅仅是一个分布式追踪系统。 但是 SigNoz 可以提供 metric
 
 如果你不知道如何开始？ 只需要在 [slack 社区](https://signoz.io/slack) 通过 `#contributing` 频道联系我们。
 
-### 项目维护人员
-
-#### 后端
-
-- [Ankit Nayan](https://github.com/ankitnayan)
-- [Nityananda Gohain](https://github.com/nityanandagohain)
-- [Srikanth Chekuri](https://github.com/srikanthccv)
-- [Vishal Sharma](https://github.com/makeavish)
-
-#### 前端
-
-- [Palash Gupta](https://github.com/palashgdev)
-- [Yunus M](https://github.com/YounixM)
-- [Rajat Dabade](https://github.com/Rajat-Dabade)
-
-#### 运维开发
-
-- [Prashant Shahi](https://github.com/prashant-shahi)
-
 <br /><br />
 
 ## 文档

conf/example.yaml

@@ -294,7 +294,6 @@ flagger:
   config:
     boolean:
       use_span_metrics: true
-      interpolation_enabled: false
       kafka_span_eval: false
     string:
     float:
@@ -309,3 +308,14 @@ user:
       allow_self: true
       # The duration within which a user can reset their password.
       max_token_lifetime: 6h
+  root:
+    # Whether to enable the root user. When enabled, a root user is provisioned
+    # on startup using the email and password below. The root user cannot be
+    # deleted, updated, or have their password changed through the UI.
+    enabled: false
+    # The email address of the root user.
+    email: ""
+    # The password of the root user. Must meet password requirements.
+    password: ""
+    # The name of the organization to create or look up for the root user.
+    org_name: default

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

@@ -176,7 +176,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker-swarm/docker-compose.yaml

@@ -117,7 +117,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.111.0
+    image: signoz/signoz:v0.112.0
     command:
       - --config=/root/config/prometheus.yml
     ports:

deploy/docker/docker-compose.ha.yaml

@@ -179,7 +179,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

deploy/docker/docker-compose.yaml

@@ -111,7 +111,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.111.0}
+    image: signoz/signoz:${VERSION:-v0.112.0}
     container_name: signoz
     command:
       - --config=/root/config/prometheus.yml

docs/api/openapi.yml

@@ -4678,6 +4678,8 @@ components:
           type: string
         id:
           type: string
+        isRoot:
+          type: boolean
         orgId:
           type: string
         role:

ee/query-service/app/api/api.go

@@ -45,7 +45,7 @@ type APIHandler struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz, config signoz.Config) (*APIHandler, error) {
 	baseHandler, err := baseapp.NewAPIHandler(baseapp.APIHandlerOpts{
 		Reader:                        opts.DataConnector,
 		RuleManager:                   opts.RulesManager,
@@ -58,7 +58,7 @@ func NewAPIHandler(opts APIHandlerOptions, signoz *signoz.SigNoz) (*APIHandler,
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	})
+	}, config)
 
 	if err != nil {
 		return nil, err

ee/query-service/app/server.go

@@ -175,7 +175,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		GlobalConfig:                  config.Global,
 	}
 
-	apiHandler, err := api.NewAPIHandler(apiOpts, signoz)
+	apiHandler, err := api.NewAPIHandler(apiOpts, signoz, config)
 	if err != nil {
 		return nil, err
 	}

frontend/package.json

@@ -55,6 +55,7 @@
 		"@signozhq/icons": "0.1.0",
 		"@signozhq/input": "0.0.2",
 		"@signozhq/popover": "0.0.0",
+		"@signozhq/radio-group": "0.0.2",
 		"@signozhq/resizable": "0.0.0",
 		"@signozhq/sonner": "0.1.0",
 		"@signozhq/table": "0.3.7",

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

@@ -1542,6 +1542,10 @@ export interface TypesUserDTO {
 	 * @type string
 	 */
 	id?: string;
+	/**
+	 * @type boolean
+	 */
+	isRoot?: boolean;
 	/**
 	 * @type string
 	 */

frontend/src/auto-import-registry.d.ts

@@ -21,6 +21,7 @@ import '@signozhq/design-tokens';
 import '@signozhq/icons';
 import '@signozhq/input';
 import '@signozhq/popover';
+import '@signozhq/radio-group';
 import '@signozhq/resizable';
 import '@signozhq/sonner';
 import '@signozhq/table';

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -10,6 +11,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -28,6 +31,15 @@ interface Props {
 }
 
 function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getHostLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -72,29 +84,40 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 		setIsPaginating(false);
 	}, [data, setIsPaginating]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const renderFooter = useCallback(
@@ -118,6 +141,7 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 					<Virtuoso
 						className="host-metrics-logs-virtuoso"
 						key="host-metrics-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -139,7 +163,24 @@ function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
 			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="host-metrics-logs-list-container">{renderContent}</div>
+				<div
+					className="host-metrics-logs-list-container"
+					data-log-detail-ignore="true"
+				>
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/components/LogDetail/LogDetail.interfaces.ts

@@ -13,6 +13,9 @@ export type LogDetailProps = {
 	handleChangeSelectedView?: ChangeViewFunctionType;
 	isListViewPanel?: boolean;
 	listViewPanelSelectedFields?: IField[] | null;
+	logs?: ILog[];
+	onNavigateLog?: (log: ILog) => void;
+	onScrollToLog?: (logId: string) => void;
 } & Pick<AddToQueryHOCProps, 'onAddToQuery'> &
 	Partial<Pick<ActionItemProps, 'onClickActionItem'>> &
 	Pick<DrawerProps, 'onClose'>;

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -15,6 +15,8 @@
 		}
 
 		.log-detail-drawer__title-right {
+			display: flex;
+			align-items: center;
 			.ant-btn {
 				display: flex;
 				align-items: center;
@@ -66,6 +68,10 @@
 		margin-bottom: 16px;
 	}
 
+	.log-detail-drawer__content {
+		height: 100%;
+	}
+
 	.log-detail-drawer__log {
 		width: 100%;
 		display: flex;
@@ -183,9 +189,115 @@
 	.ant-drawer-close {
 		padding: 0px;
 	}
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-200);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
+	.log-arrows {
+		display: flex;
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
+		border-radius: 6px;
+		padding: 2px 6px;
+		align-items: center;
+		margin-left: 8px;
+	}
+
+	.log-arrow-btn {
+		padding: 0;
+		min-width: 28px;
+		height: 28px;
+		border-radius: 4px;
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-ink-400);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
+	}
+
+	.log-arrow-btn[disabled] {
+		opacity: 0.5;
+		cursor: not-allowed;
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);
+
+		.log-arrow-btn:hover:not([disabled]) {
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
 }
 
 .lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
 	.ant-drawer-header {
 		border-bottom: 1px solid var(--bg-vanilla-400);
 		background: var(--bg-vanilla-100);
@@ -252,4 +364,33 @@
 			color: var(--text-ink-300);
 		}
 	}
+
+	.log-detail-drawer__footer-hint {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
+		}
+	}
 }

frontend/src/components/LogDetail/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable sonarjs/cognitive-complexity */
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useCopyToClipboard, useLocation } from 'react-use';
 import { Color, Spacing } from '@signozhq/design-tokens';
@@ -32,8 +32,12 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import createQueryParams from 'lib/createQueryParams';
 import { cloneDeep } from 'lodash-es';
 import {
+	ArrowDown,
+	ArrowUp,
 	BarChart2,
 	Braces,
+	ChevronDown,
+	ChevronUp,
 	Compass,
 	Copy,
 	Filter,
@@ -60,6 +64,9 @@ function LogDetailInner({
 	isListViewPanel = false,
 	listViewPanelSelectedFields,
 	handleChangeSelectedView,
+	logs,
+	onNavigateLog,
+	onScrollToLog,
 }: LogDetailInnerProps): JSX.Element {
 	const initialContextQuery = useInitialQuery(log);
 	const [contextQuery, setContextQuery] = useState<Query | undefined>(
@@ -74,6 +81,78 @@ function LogDetailInner({
 	const [isEdit, setIsEdit] = useState<boolean>(false);
 	const { stagedQuery, updateAllQueriesOperators } = useQueryBuilder();
 
+	// Handle clicks outside to close drawer, except on explicitly ignored regions
+	useEffect(() => {
+		const handleClickOutside = (e: MouseEvent): void => {
+			const target = e.target as HTMLElement;
+
+			// Don't close if clicking on explicitly ignored regions
+			if (target.closest('[data-log-detail-ignore="true"]')) {
+				return;
+			}
+
+			// Close the drawer for any other outside click
+			onClose?.(e as any);
+		};
+
+		document.addEventListener('mousedown', handleClickOutside);
+
+		return (): void => {
+			document.removeEventListener('mousedown', handleClickOutside);
+		};
+	}, [onClose]);
+
+	// Keyboard navigation - handle up/down arrow keys
+	// Only listen when in OVERVIEW tab
+	useEffect(() => {
+		if (
+			!logs ||
+			!onNavigateLog ||
+			logs.length === 0 ||
+			selectedView !== VIEW_TYPES.OVERVIEW
+		) {
+			return;
+		}
+
+		const handleKeyDown = (e: KeyboardEvent): void => {
+			const currentIndex = logs.findIndex((l) => l.id === log.id);
+			if (currentIndex === -1) {
+				return;
+			}
+
+			if (e.key === 'ArrowUp') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to previous log
+				if (currentIndex > 0) {
+					const prevLog = logs[currentIndex - 1];
+					onNavigateLog(prevLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(prevLog.id);
+					}
+				}
+			} else if (e.key === 'ArrowDown') {
+				e.preventDefault();
+				e.stopPropagation();
+				// Navigate to next log
+				if (currentIndex < logs.length - 1) {
+					const nextLog = logs[currentIndex + 1];
+					onNavigateLog(nextLog);
+					// Trigger scroll to the log element
+					if (onScrollToLog) {
+						onScrollToLog(nextLog.id);
+					}
+				}
+			}
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+		return (): void => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [log.id, logs, onNavigateLog, onScrollToLog, selectedView]);
+
 	const listQuery = useMemo(() => {
 		if (!stagedQuery || stagedQuery.builder.queryData.length < 1) {
 			return null;
@@ -227,32 +306,87 @@ function LogDetailInner({
 	);
 
 	const logType = log?.attributes_string?.log_level || LogType.INFO;
+	const currentLogIndex = logs ? logs.findIndex((l) => l.id === log.id) : -1;
+	const isPrevDisabled =
+		!logs || !onNavigateLog || logs.length === 0 || currentLogIndex <= 0;
+	const isNextDisabled =
+		!logs ||
+		!onNavigateLog ||
+		logs.length === 0 ||
+		currentLogIndex === logs.length - 1;
+
+	type HandleNavigateLogParams = {
+		direction: 'next' | 'previous';
+	};
+
+	const handleNavigateLog = ({ direction }: HandleNavigateLogParams): void => {
+		if (!logs || !onNavigateLog || currentLogIndex === -1) {
+			return;
+		}
+		if (direction === 'previous' && !isPrevDisabled) {
+			const prevLog = logs[currentLogIndex - 1];
+			onNavigateLog(prevLog);
+			onScrollToLog?.(prevLog.id);
+		} else if (direction === 'next' && !isNextDisabled) {
+			const nextLog = logs[currentLogIndex + 1];
+			onNavigateLog(nextLog);
+			onScrollToLog?.(nextLog.id);
+		}
+	};
 
 	return (
 		<Drawer
 			width="60%"
-			maskStyle={{ background: 'none' }}
+			mask={false}
+			maskClosable={false}
 			title={
-				<div className="log-detail-drawer__title">
+				<div className="log-detail-drawer__title" data-log-detail-ignore="true">
 					<div className="log-detail-drawer__title-left">
 						<Divider type="vertical" className={cx('log-type-indicator', LogType)} />
 						<Typography.Text className="title">Log details</Typography.Text>
 					</div>
-					{showOpenInExplorerBtn && (
-						<div className="log-detail-drawer__title-right">
-							<Button
-								className="open-in-explorer-btn"
-								icon={<Compass size={16} />}
-								onClick={handleOpenInExplorer}
+					<div className="log-detail-drawer__title-right">
+						<div className="log-arrows">
+							<Tooltip
+								title={isPrevDisabled ? '' : 'Move to previous log'}
+								placement="top"
+								mouseLeaveDelay={0}
 							>
-								Open in Explorer
-							</Button>
+								<Button
+									icon={<ChevronUp size={14} />}
+									className="log-arrow-btn log-arrow-btn-up"
+									disabled={isPrevDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'previous' })}
+								/>
+							</Tooltip>
+							<Tooltip
+								title={isNextDisabled ? '' : 'Move to next log'}
+								placement="top"
+								mouseLeaveDelay={0}
+							>
+								<Button
+									icon={<ChevronDown size={14} />}
+									className="log-arrow-btn log-arrow-btn-down"
+									disabled={isNextDisabled}
+									onClick={(): void => handleNavigateLog({ direction: 'next' })}
+								/>
+							</Tooltip>
 						</div>
-					)}
+						{showOpenInExplorerBtn && (
+							<div>
+								<Button
+									className="open-in-explorer-btn"
+									icon={<Compass size={16} />}
+									onClick={handleOpenInExplorer}
+								>
+									Open in Explorer
+								</Button>
+							</div>
+						)}
+					</div>
 				</div>
 			}
 			placement="right"
-			// closable
 			onClose={drawerCloseHandler}
 			open={log !== null}
 			style={{
@@ -263,138 +397,164 @@ function LogDetailInner({
 			destroyOnClose
 			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
-			<div className="log-detail-drawer__log">
-				<Divider type="vertical" className={cx('log-type-indicator', logType)} />
-				<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
-					<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
-				</Tooltip>
+			<div className="log-detail-drawer__content" data-log-detail-ignore="true">
+				<div className="log-detail-drawer__log">
+					<Divider type="vertical" className={cx('log-type-indicator', logType)} />
+					<Tooltip title={removeEscapeCharacters(log?.body)} placement="left">
+						<div className="log-body" dangerouslySetInnerHTML={htmlBody} />
+					</Tooltip>
 
-				<div className="log-overflow-shadow">&nbsp;</div>
-			</div>
+					<div className="log-overflow-shadow">&nbsp;</div>
+				</div>
 
-			<div className="tabs-and-search">
-				<Radio.Group
-					className="views-tabs"
-					onChange={handleModeChange}
-					value={selectedView}
-				>
-					<Radio.Button
-						className={
-							// eslint-disable-next-line sonarjs/no-duplicate-string
-							selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.OVERVIEW}
+				<div className="tabs-and-search">
+					<Radio.Group
+						className="views-tabs"
+						onChange={handleModeChange}
+						value={selectedView}
 					>
-						<div className="view-title">
-							<Table size={14} />
-							Overview
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'}
-						value={VIEW_TYPES.JSON}
-					>
-						<div className="view-title">
-							<Braces size={14} />
-							JSON
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.CONTEXT}
-					>
-						<div className="view-title">
-							<TextSelect size={14} />
-							Context
-						</div>
-					</Radio.Button>
-					<Radio.Button
-						className={
-							selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
-						}
-						value={VIEW_TYPES.INFRAMETRICS}
-					>
-						<div className="view-title">
-							<BarChart2 size={14} />
-							Metrics
-						</div>
-					</Radio.Button>
-				</Radio.Group>
+						<Radio.Button
+							className={
+								// eslint-disable-next-line sonarjs/no-duplicate-string
+								selectedView === VIEW_TYPES.OVERVIEW ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.OVERVIEW}
+						>
+							<div className="view-title">
+								<Table size={14} />
+								Overview
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.JSON ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.JSON}
+						>
+							<div className="view-title">
+								<Braces size={14} />
+								JSON
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.CONTEXT ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.CONTEXT}
+						>
+							<div className="view-title">
+								<TextSelect size={14} />
+								Context
+							</div>
+						</Radio.Button>
+						<Radio.Button
+							className={
+								selectedView === VIEW_TYPES.INFRAMETRICS ? 'selected_view tab' : 'tab'
+							}
+							value={VIEW_TYPES.INFRAMETRICS}
+						>
+							<div className="view-title">
+								<BarChart2 size={14} />
+								Metrics
+							</div>
+						</Radio.Button>
+					</Radio.Group>
+
+					<div className="log-detail-drawer__actions">
+						{selectedView === VIEW_TYPES.CONTEXT && (
+							<Tooltip
+								title="Show Filters"
+								placement="topLeft"
+								aria-label="Show Filters"
+							>
+								<Button
+									className="action-btn"
+									icon={<Filter size={16} />}
+									onClick={handleFilterVisible}
+								/>
+							</Tooltip>
+						)}
 
-				<div className="log-detail-drawer__actions">
-					{selectedView === VIEW_TYPES.CONTEXT && (
 						<Tooltip
-							title="Show Filters"
+							title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
 							placement="topLeft"
-							aria-label="Show Filters"
+							aria-label={
+								selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
+							}
 						>
 							<Button
 								className="action-btn"
-								icon={<Filter size={16} />}
-								onClick={handleFilterVisible}
+								icon={<Copy size={16} />}
+								onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
 							/>
 						</Tooltip>
-					)}
-
-					<Tooltip
-						title={selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'}
-						placement="topLeft"
-						aria-label={
-							selectedView === VIEW_TYPES.JSON ? 'Copy JSON' : 'Copy Log Link'
-						}
-					>
-						<Button
-							className="action-btn"
-							icon={<Copy size={16} />}
-							onClick={selectedView === VIEW_TYPES.JSON ? handleJSONCopy : onLogCopy}
+					</div>
+				</div>
+				{isFilterVisible && contextQuery?.builder.queryData[0] && (
+					<div className="log-detail-drawer-query-container">
+						<QuerySearch
+							onChange={(value): void => handleQueryExpressionChange(value, 0)}
+							dataSource={DataSource.LOGS}
+							queryData={contextQuery?.builder.queryData[0]}
+							onRun={handleRunQuery}
 						/>
-					</Tooltip>
-				</div>
-			</div>
-			{isFilterVisible && contextQuery?.builder.queryData[0] && (
-				<div className="log-detail-drawer-query-container">
-					<QuerySearch
-						onChange={(value): void => handleQueryExpressionChange(value, 0)}
-						dataSource={DataSource.LOGS}
-						queryData={contextQuery?.builder.queryData[0]}
-						onRun={handleRunQuery}
+					</div>
+				)}
+
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<Overview
+						logData={log}
+						onAddToQuery={onAddToQuery}
+						onClickActionItem={onClickActionItem}
+						isListViewPanel={isListViewPanel}
+						selectedOptions={options}
+						listViewPanelSelectedFields={listViewPanelSelectedFields}
+						handleChangeSelectedView={handleChangeSelectedView}
 					/>
-				</div>
-			)}
+				)}
+				{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
 
-			{selectedView === VIEW_TYPES.OVERVIEW && (
-				<Overview
-					logData={log}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onClickActionItem}
-					isListViewPanel={isListViewPanel}
-					selectedOptions={options}
-					listViewPanelSelectedFields={listViewPanelSelectedFields}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.JSON && <JSONView logData={log} />}
+				{selectedView === VIEW_TYPES.CONTEXT && (
+					<ContextView
+						log={log}
+						filters={filters}
+						contextQuery={contextQuery}
+						isEdit={isEdit}
+					/>
+				)}
+				{selectedView === VIEW_TYPES.INFRAMETRICS && (
+					<InfraMetrics
+						clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
+						podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
+						nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
+						hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
+						timestamp={log.timestamp.toString()}
+						dataSource={DataSource.LOGS}
+					/>
+				)}
 
-			{selectedView === VIEW_TYPES.CONTEXT && (
-				<ContextView
-					log={log}
-					filters={filters}
-					contextQuery={contextQuery}
-					isEdit={isEdit}
-				/>
-			)}
-			{selectedView === VIEW_TYPES.INFRAMETRICS && (
-				<InfraMetrics
-					clusterName={log.resources_string?.[RESOURCE_KEYS.CLUSTER_NAME] || ''}
-					podName={log.resources_string?.[RESOURCE_KEYS.POD_NAME] || ''}
-					nodeName={log.resources_string?.[RESOURCE_KEYS.NODE_NAME] || ''}
-					hostName={log.resources_string?.[RESOURCE_KEYS.HOST_NAME] || ''}
-					timestamp={log.timestamp.toString()}
-					dataSource={DataSource.LOGS}
-				/>
-			)}
+				{selectedView === VIEW_TYPES.OVERVIEW && (
+					<div className="log-detail-drawer__footer-hint">
+						<div className="log-detail-drawer__footer-hint-content">
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								Use
+							</Typography.Text>
+							<ArrowUp size={14} className="log-detail-drawer__footer-hint-icon" />
+							<span>/</span>
+							<ArrowDown size={14} className="log-detail-drawer__footer-hint-icon" />
+							<Typography.Text
+								type="secondary"
+								className="log-detail-drawer__footer-hint-text"
+							>
+								to view previous/next log
+							</Typography.Text>
+						</div>
+					</div>
+				)}
+			</div>
 		</Drawer>
 	);
 }

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

@@ -2,13 +2,11 @@ import { memo, useCallback, useMemo } from 'react';
 import { blue } from '@ant-design/colors';
 import { Typography } from 'antd';
 import cx from 'classnames';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 // utils
@@ -104,12 +102,17 @@ function LogSelectedField({
 type ListLogViewProps = {
 	logData: ILog;
 	selectedFields: IField[];
-	onSetActiveLog: (log: ILog) => void;
+	onSetActiveLog: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	onAddToQuery: AddToQueryHOCProps['onAddToQuery'];
 	activeLog?: ILog | null;
 	linesPerRow: number;
 	fontSize: FontSize;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 };
 
 function ListLogView({
@@ -120,7 +123,8 @@ function ListLogView({
 	activeLog,
 	linesPerRow,
 	fontSize,
-	handleChangeSelectedView,
+	isActiveLog,
+	onClearActiveLog,
 }: ListLogViewProps): JSX.Element {
 	const flattenLogData = useMemo(() => FlatLogData(logData), [logData]);
 
@@ -129,35 +133,24 @@ function ListLogView({
 	);
 	const isReadOnlyLog = !isLogsExplorerPage;
 
-	const {
-		activeLog: activeContextLog,
-		onAddToQuery: handleAddToQuery,
-		onSetActiveLog: handleSetActiveContextLog,
-		onClearActiveLog: handleClearActiveContextLog,
-	} = useActiveLog();
-
 	const isDarkMode = useIsDarkMode();
 
-	const handlerClearActiveContextLog = useCallback(
-		(event: React.MouseEvent | React.KeyboardEvent) => {
-			event.preventDefault();
-			event.stopPropagation();
-			handleClearActiveContextLog();
-		},
-		[handleClearActiveContextLog],
-	);
-
 	const handleDetailedView = useCallback(() => {
+		if (isActiveLog) {
+			onClearActiveLog?.();
+			return;
+		}
+
 		onSetActiveLog(logData);
-	}, [logData, onSetActiveLog]);
+	}, [logData, onSetActiveLog, isActiveLog, onClearActiveLog]);
 
 	const handleShowContext = useCallback(
 		(event: React.MouseEvent) => {
 			event.preventDefault();
 			event.stopPropagation();
-			handleSetActiveContextLog(logData);
+			onSetActiveLog(logData, VIEW_TYPES.CONTEXT);
 		},
-		[logData, handleSetActiveContextLog],
+		[logData, onSetActiveLog],
 	);
 
 	const updatedSelecedFields = useMemo(
@@ -186,11 +179,7 @@ function ListLogView({
 	return (
 		<>
 			<Container
-				$isActiveLog={
-					isHighlighted ||
-					activeLog?.id === logData.id ||
-					activeContextLog?.id === logData.id
-				}
+				$isActiveLog={isHighlighted || activeLog?.id === logData.id}
 				$isDarkMode={isDarkMode}
 				$logType={logType}
 				onClick={handleDetailedView}
@@ -251,15 +240,6 @@ function ListLogView({
 					/>
 				)}
 			</Container>
-			{activeContextLog && (
-				<LogDetail
-					log={activeContextLog}
-					onAddToQuery={handleAddToQuery}
-					selectedTab={VIEW_TYPES.CONTEXT}
-					onClose={handlerClearActiveContextLog}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</>
 	);
 }

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

@@ -1,19 +1,15 @@
 import {
-	KeyboardEvent,
 	memo,
 	MouseEvent,
 	MouseEventHandler,
 	useCallback,
 	useMemo,
-	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { DrawerProps, Tooltip } from 'antd';
-import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES, VIEWS } from 'components/LogDetail/constants';
+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 { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -39,7 +35,8 @@ function RawLogView({
 	selectedFields = [],
 	fontSize,
 	onLogClick,
-	handleChangeSelectedView,
+	onSetActiveLog,
+	onClearActiveLog,
 }: RawLogViewProps): JSX.Element {
 	const {
 		isHighlighted: isUrlHighlighted,
@@ -48,15 +45,6 @@ function RawLogView({
 	} = useCopyLogLink(data.id);
 	const flattenLogData = useMemo(() => FlatLogData(data), [data]);
 
-	const {
-		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
-		onAddToQuery,
-	} = useActiveLog();
-
-	const [selectedTab, setSelectedTab] = useState<VIEWS | undefined>();
-
 	const isDarkMode = useIsDarkMode();
 	const isReadOnlyLog = !isLogsExplorerPage || isReadOnly;
 
@@ -134,34 +122,24 @@ function RawLogView({
 			// Use custom click handler if provided, otherwise use default behavior
 			if (onLogClick) {
 				onLogClick(data, event);
-			} else {
-				onSetActiveLog(data);
-				setSelectedTab(VIEW_TYPES.OVERVIEW);
+				return;
+			}
+			if (isActiveLog) {
+				onClearActiveLog?.();
+				return;
 			}
-		},
-		[isReadOnly, data, onSetActiveLog, onLogClick],
-	);
 
-	const handleCloseLogDetail: DrawerProps['onClose'] = useCallback(
-		(
-			event: MouseEvent<Element, globalThis.MouseEvent> | KeyboardEvent<Element>,
-		) => {
-			event.preventDefault();
-			event.stopPropagation();
-
-			onClearActiveLog();
-			setSelectedTab(undefined);
+			onSetActiveLog?.(data);
 		},
-		[onClearActiveLog],
+		[isReadOnly, onLogClick, isActiveLog, onSetActiveLog, data, onClearActiveLog],
 	);
 
 	const handleShowContext: MouseEventHandler<HTMLElement> = useCallback(
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			// handleSetActiveContextLog(data);
-			setSelectedTab(VIEW_TYPES.CONTEXT);
-			onSetActiveLog(data);
+
+			onSetActiveLog?.(data, VIEW_TYPES.CONTEXT);
 		},
 		[data, onSetActiveLog],
 	);
@@ -181,7 +159,7 @@ function RawLogView({
 			$isDarkMode={isDarkMode}
 			$isReadOnly={isReadOnly}
 			$isHightlightedLog={isUrlHighlighted}
-			$isActiveLog={activeLog?.id === data.id || isActiveLog}
+			$isActiveLog={isActiveLog}
 			$isCustomHighlighted={isHighlighted}
 			$logType={logType}
 			fontSize={fontSize}
@@ -218,17 +196,6 @@ function RawLogView({
 					onLogCopy={onLogCopy}
 				/>
 			)}
-
-			{selectedTab && (
-				<LogDetail
-					selectedTab={selectedTab}
-					log={activeLog}
-					onClose={handleCloseLogDetail}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
-			)}
 		</RawLogViewContainer>
 	);
 }

frontend/src/components/Logs/RawLogView/styles.ts

@@ -45,9 +45,6 @@ export const RawLogViewContainer = styled(Row)<{
 				: `margin: 2px 0;`}
 	}
 
-	${({ $isActiveLog, $logType }): string =>
-		getActiveLogBackground($isActiveLog, true, $logType)}
-
 	${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string =>
 		$isActiveLog
 			? getActiveLogBackground($isActiveLog, $isDarkMode, $logType)

frontend/src/components/Logs/RawLogView/types.ts

@@ -1,4 +1,5 @@
 import { MouseEvent } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
 import { FontSize } from 'container/OptionsMenu/types';
 import { IField } from 'types/api/logs/fields';
@@ -16,6 +17,11 @@ export interface RawLogViewProps {
 	selectedFields?: IField[];
 	onLogClick?: (log: ILog, event: MouseEvent) => void;
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
 }
 
 export interface RawLogContentProps {

frontend/src/container/DashboardContainer/DashboardDescription/Description.styles.scss

@@ -9,74 +9,6 @@
 		padding: 0px;
 	}
 
-	.dashboard-header {
-		border-bottom: 1px solid var(--bg-slate-400);
-		display: flex;
-		justify-content: space-between;
-		gap: 16px;
-		align-items: center;
-		padding: 0 8px;
-		box-sizing: border-box;
-
-		.dashboard-breadcrumbs {
-			width: 100%;
-			height: 48px;
-			display: flex;
-			gap: 6px;
-			align-items: center;
-			max-width: 80%;
-
-			.dashboard-btn {
-				display: flex;
-				align-items: center;
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: -0.07px;
-				padding: 0px;
-				height: 20px;
-			}
-
-			.dashboard-btn:hover {
-				background-color: unset;
-			}
-
-			.id-btn {
-				display: flex;
-				align-items: center;
-				padding: 0px 2px;
-				border-radius: 2px;
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-400);
-				font-family: Inter;
-				font-size: 14px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: 20px; /* 142.857% */
-				height: 20px;
-
-				max-width: calc(100% - 120px);
-
-				span {
-					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-				}
-
-				.ant-btn-icon {
-					margin-inline-end: 4px;
-				}
-			}
-			.id-btn:hover {
-				background: rgba(113, 144, 249, 0.1);
-				color: var(--bg-robin-300);
-			}
-		}
-	}
-
 	.dashboard-details {
 		display: flex;
 		justify-content: space-between;
@@ -535,15 +467,6 @@
 	.dashboard-description-container {
 		color: var(--bg-ink-400);
 
-		.dashboard-header {
-			border-bottom: 1px solid var(--bg-vanilla-300);
-			.dashboard-breadcrumbs {
-				.dashboard-btn {
-					color: var(--bg-ink-400);
-				}
-			}
-		}
-
 		.dashboard-details {
 			.left-section {
 				.dashboard-title {

frontend/src/container/DashboardContainer/DashboardDescription/index.tsx

@@ -16,9 +16,7 @@ import {
 } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
-import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
@@ -27,7 +25,6 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import { isEmpty } from 'lodash-es';
 import {
 	Check,
@@ -37,7 +34,6 @@ import {
 	FolderKanban,
 	Fullscreen,
 	Globe,
-	LayoutGrid,
 	LockKeyhole,
 	PenLine,
 	X,
@@ -51,6 +47,7 @@ import { ROLES, USER_ROLES } from 'types/roles';
 import { ComponentTypes } from 'utils/permission';
 import { v4 as uuid } from 'uuid';
 
+import DashboardHeader from '../components/DashboardHeader/DashboardHeader';
 import DashboardGraphSlider from '../ComponentsSlider';
 import DashboardSettings from '../DashboardSettings';
 import { Base64Icons } from '../DashboardSettings/General/utils';
@@ -71,7 +68,6 @@ interface DashboardDescriptionProps {
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
 	const { handle } = props;
 	const {
 		selectedDashboard,
@@ -80,7 +76,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		layouts,
 		setLayouts,
 		isDashboardLocked,
-		listSortOrder,
 		setSelectedDashboard,
 		handleToggleDashboardSlider,
 		setSelectedRowWidgetId,
@@ -292,17 +287,6 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		});
 	}
 
-	function goToListPage(): void {
-		const urlParams = new URLSearchParams();
-		urlParams.set('columnKey', listSortOrder.columnKey as string);
-		urlParams.set('order', listSortOrder.order as string);
-		urlParams.set('page', listSortOrder.pagination as string);
-		urlParams.set('search', listSortOrder.search as string);
-
-		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
-		safeNavigate(generatedUrl);
-	}
-
 	const {
 		data: publicDashboardResponse,
 		isLoading: isLoadingPublicDashboardData,
@@ -351,32 +335,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 
 	return (
 		<Card className="dashboard-description-container">
-			<div className="dashboard-header">
-				<section className="dashboard-breadcrumbs">
-					<Button
-						type="text"
-						icon={<LayoutGrid size={14} />}
-						className="dashboard-btn"
-						onClick={(): void => goToListPage()}
-					>
-						Dashboard /
-					</Button>
-					<Button type="text" className="id-btn dashboard-name-btn">
-						<img
-							src={image}
-							alt="dashboard-icon"
-							style={{ height: '14px', width: '14px' }}
-						/>
-						{title}
-					</Button>
-				</section>
-
-				<HeaderRightSection
-					enableAnnouncements={false}
-					enableShare
-					enableFeedback
-				/>
-			</div>
+			<DashboardHeader />
 			<section className="dashboard-details">
 				<div className="left-section">
 					<img src={image} alt="dashboard-img" className="dashboard-img" />

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.styles.scss

@@ -0,0 +1,71 @@
+.dashboard-breadcrumbs {
+	width: 100%;
+	height: 48px;
+	display: flex;
+	gap: 6px;
+	align-items: center;
+	max-width: 80%;
+
+	.dashboard-btn {
+		display: flex;
+		align-items: center;
+		color: var(--bg-vanilla-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+		padding: 0px;
+		height: 20px;
+	}
+
+	.dashboard-btn:hover {
+		background-color: unset;
+	}
+
+	.id-btn {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding: 0px 2px;
+		border-radius: 2px;
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+		height: 20px;
+
+		max-width: calc(100% - 120px);
+
+		span {
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+
+		.ant-btn-icon {
+			margin-inline-end: 4px;
+		}
+	}
+	.id-btn:hover {
+		background: rgba(113, 144, 249, 0.1);
+		color: var(--bg-robin-300);
+	}
+
+	.dashboard-icon-image {
+		height: 14px;
+		width: 14px;
+	}
+}
+
+.lightMode {
+	.dashboard-breadcrumbs {
+		.dashboard-btn {
+			color: var(--bg-ink-400);
+		}
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardBreadcrumbs.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import { Button } from 'antd';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { LayoutGrid } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { DashboardData } from 'types/api/dashboard/getAll';
+
+import { Base64Icons } from '../../DashboardSettings/General/utils';
+
+import './DashboardBreadcrumbs.styles.scss';
+
+function DashboardBreadcrumbs(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { selectedDashboard, listSortOrder } = useDashboard();
+
+	const selectedData = selectedDashboard
+		? {
+				...selectedDashboard.data,
+				uuid: selectedDashboard.id,
+		  }
+		: ({} as DashboardData);
+
+	const { title = '', image = Base64Icons[0] } = selectedData || {};
+
+	const goToListPage = useCallback(() => {
+		const urlParams = new URLSearchParams();
+		urlParams.set('columnKey', listSortOrder.columnKey as string);
+		urlParams.set('order', listSortOrder.order as string);
+		urlParams.set('page', listSortOrder.pagination as string);
+		urlParams.set('search', listSortOrder.search as string);
+
+		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlParams.toString()}`;
+		safeNavigate(generatedUrl);
+	}, [listSortOrder, safeNavigate]);
+
+	return (
+		<div className="dashboard-breadcrumbs">
+			<Button
+				type="text"
+				icon={<LayoutGrid size={14} />}
+				className="dashboard-btn"
+				onClick={goToListPage}
+			>
+				Dashboard /
+			</Button>
+			<Button type="text" className="id-btn dashboard-name-btn">
+				<img src={image} alt="dashboard-icon" className="dashboard-icon-image" />
+				{title}
+			</Button>
+		</div>
+	);
+}
+
+export default DashboardBreadcrumbs;

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.styles.scss

@@ -0,0 +1,15 @@
+.dashboard-header {
+	border-bottom: 1px solid var(--bg-slate-400);
+	display: flex;
+	justify-content: space-between;
+	gap: 16px;
+	align-items: center;
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
+.lightMode {
+	.dashboard-header {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/container/DashboardContainer/components/DashboardHeader/DashboardHeader.tsx

@@ -0,0 +1,17 @@
+import { memo } from 'react';
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+
+import DashboardBreadcrumbs from './DashboardBreadcrumbs';
+
+import './DashboardHeader.styles.scss';
+
+function DashboardHeader(): JSX.Element {
+	return (
+		<div className="dashboard-header">
+			<DashboardBreadcrumbs />
+			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
+		</div>
+	);
+}
+
+export default memo(DashboardHeader);

frontend/src/container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper.tsx

@@ -23,6 +23,7 @@ export default function ChartWrapper({
 	width: containerWidth,
 	height: containerHeight,
 	showTooltip = true,
+	showLegend = true,
 	canPinTooltip = false,
 	syncMode,
 	syncKey,
@@ -36,6 +37,9 @@ export default function ChartWrapper({
 
 	const legendComponent = useCallback(
 		(averageLegendWidth: number): React.ReactNode => {
+			if (!showLegend) {
+				return null;
+			}
 			return (
 				<Legend
 					config={config}
@@ -44,7 +48,7 @@ export default function ChartWrapper({
 				/>
 			);
 		},
-		[config, legendConfig.position],
+		[config, legendConfig.position, showLegend],
 	);
 
 	const renderTooltipCallback = useCallback(
@@ -60,6 +64,7 @@ export default function ChartWrapper({
 	return (
 		<PlotContextProvider>
 			<ChartLayout
+				showLegend={showLegend}
 				config={config}
 				containerWidth={containerWidth}
 				containerHeight={containerHeight}

frontend/src/container/DashboardContainer/visualization/charts/Histogram/Histogram.tsx

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+import ChartWrapper from 'container/DashboardContainer/visualization/charts/ChartWrapper/ChartWrapper';
+import HistogramTooltip from 'lib/uPlotV2/components/Tooltip/HistogramTooltip';
+import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
+import {
+	HistogramTooltipProps,
+	TooltipRenderArgs,
+} from 'lib/uPlotV2/components/types';
+
+import { HistogramChartProps } from '../types';
+
+export default function Histogram(props: HistogramChartProps): JSX.Element {
+	const {
+		children,
+		renderTooltip: customRenderTooltip,
+		isQueriesMerged,
+		...rest
+	} = props;
+
+	const renderTooltip = useCallback(
+		(props: TooltipRenderArgs): React.ReactNode => {
+			if (customRenderTooltip) {
+				return customRenderTooltip(props);
+			}
+			const content = buildTooltipContent({
+				data: props.uPlotInstance.data,
+				series: props.uPlotInstance.series,
+				dataIndexes: props.dataIndexes,
+				activeSeriesIndex: props.seriesIndex,
+				uPlotInstance: props.uPlotInstance,
+				yAxisUnit: rest.yAxisUnit ?? '',
+				decimalPrecision: rest.decimalPrecision,
+			});
+			const tooltipProps: HistogramTooltipProps = {
+				...props,
+				timezone: rest.timezone,
+				yAxisUnit: rest.yAxisUnit,
+				decimalPrecision: rest.decimalPrecision,
+				content,
+			};
+			return <HistogramTooltip {...tooltipProps} />;
+		},
+		[customRenderTooltip, rest.timezone, rest.yAxisUnit, rest.decimalPrecision],
+	);
+
+	return (
+		<ChartWrapper
+			showLegend={!isQueriesMerged}
+			{...rest}
+			renderTooltip={renderTooltip}
+		>
+			{children}
+		</ChartWrapper>
+	);
+}

frontend/src/container/DashboardContainer/visualization/charts/types.ts

@@ -7,6 +7,7 @@ interface BaseChartProps {
 	width: number;
 	height: number;
 	showTooltip?: boolean;
+	showLegend?: boolean;
 	timezone: string;
 	canPinTooltip?: boolean;
 	yAxisUnit?: string;
@@ -17,6 +18,7 @@ interface BaseChartProps {
 interface UPlotBasedChartProps {
 	config: UPlotConfigBuilder;
 	data: uPlot.AlignedData;
+	legendConfig: LegendConfig;
 	syncMode?: DashboardCursorSync;
 	syncKey?: string;
 	plotRef?: (plot: uPlot | null) => void;
@@ -26,14 +28,20 @@ interface UPlotBasedChartProps {
 }
 
 export interface TimeSeriesChartProps
+	extends BaseChartProps,
+		UPlotBasedChartProps {}
+
+export interface HistogramChartProps
 	extends BaseChartProps,
 		UPlotBasedChartProps {
-	legendConfig: LegendConfig;
+	isQueriesMerged?: boolean;
 }
 
 export interface BarChartProps extends BaseChartProps, UPlotBasedChartProps {
-	legendConfig: LegendConfig;
 	isStackedBarChart?: boolean;
 }
 
-export type ChartProps = TimeSeriesChartProps | BarChartProps;
+export type ChartProps =
+	| TimeSeriesChartProps
+	| BarChartProps
+	| HistogramChartProps;

frontend/src/container/DashboardContainer/visualization/hooks/__tests__/useScrollWidgetIntoView.test.ts

@@ -0,0 +1,69 @@
+import { renderHook } from '@testing-library/react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
+
+jest.mock('providers/Dashboard/Dashboard');
+
+type MockHTMLElement = {
+	scrollIntoView: jest.Mock;
+	focus: jest.Mock;
+};
+
+function createMockElement(): MockHTMLElement {
+	return {
+		scrollIntoView: jest.fn(),
+		focus: jest.fn(),
+	};
+}
+
+describe('useScrollWidgetIntoView', () => {
+	const mockedUseDashboard = useDashboard as jest.MockedFunction<
+		typeof useDashboard
+	>;
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'widget-id',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).toHaveBeenCalledWith({
+			behavior: 'smooth',
+			block: 'center',
+		});
+		expect(mockElement.focus).toHaveBeenCalled();
+		expect(setToScrollWidgetId).toHaveBeenCalledWith('');
+	});
+
+	it('does nothing when toScrollWidgetId does not match widget id', () => {
+		const setToScrollWidgetId = jest.fn();
+		const mockElement = createMockElement();
+		const ref = ({
+			current: mockElement,
+		} as unknown) as React.RefObject<HTMLDivElement>;
+
+		mockedUseDashboard.mockReturnValue(({
+			toScrollWidgetId: 'other-widget',
+			setToScrollWidgetId,
+		} as unknown) as ReturnType<typeof useDashboard>);
+
+		renderHook(() => useScrollWidgetIntoView('widget-id', ref));
+
+		expect(mockElement.scrollIntoView).not.toHaveBeenCalled();
+		expect(mockElement.focus).not.toHaveBeenCalled();
+		expect(setToScrollWidgetId).not.toHaveBeenCalled();
+	});
+});

frontend/src/container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView.ts

@@ -0,0 +1,26 @@
+import { RefObject, useEffect } from 'react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+/**
+ * Scrolls the given widget container into view when the dashboard
+ * requests it via `toScrollWidgetId`.
+ *
+ * Intended for use in panel components that render a single widget.
+ */
+export function useScrollWidgetIntoView<T extends HTMLElement>(
+	widgetId: string,
+	widgetContainerRef: RefObject<T>,
+): void {
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widgetId) {
+			widgetContainerRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			widgetContainerRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widgetId, widgetContainerRef]);
+}

frontend/src/container/DashboardContainer/visualization/layout/ChartLayout/ChartLayout.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
 import cx from 'classnames';
 import { calculateChartDimensions } from 'container/DashboardContainer/visualization/charts/utils';
+import { MAX_LEGEND_WIDTH } from 'lib/uPlotV2/components/Legend/Legend';
 import { LegendConfig, LegendPosition } from 'lib/uPlotV2/components/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 
 import './ChartLayout.styles.scss';
 
 export interface ChartLayoutProps {
+	showLegend?: boolean;
 	legendComponent: (legendPerSet: number) => React.ReactNode;
 	children: (props: {
 		chartWidth: number;
@@ -20,6 +22,7 @@ export interface ChartLayoutProps {
 	config: UPlotConfigBuilder;
 }
 export default function ChartLayout({
+	showLegend = true,
 	legendComponent,
 	children,
 	layoutChildren,
@@ -30,6 +33,15 @@ export default function ChartLayout({
 }: ChartLayoutProps): JSX.Element {
 	const chartDimensions = useMemo(
 		() => {
+			if (!showLegend) {
+				return {
+					width: containerWidth,
+					height: containerHeight,
+					legendWidth: 0,
+					legendHeight: 0,
+					averageLegendWidth: MAX_LEGEND_WIDTH,
+				};
+			}
 			const legendItemsMap = config.getLegendItems();
 			const seriesLabels = Object.values(legendItemsMap)
 				.map((item) => item.label)
@@ -42,7 +54,7 @@ export default function ChartLayout({
 			});
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[containerWidth, containerHeight, legendConfig],
+		[containerWidth, containerHeight, legendConfig, showLegend],
 	);
 
 	return (
@@ -60,15 +72,17 @@ export default function ChartLayout({
 						averageLegendWidth: chartDimensions.averageLegendWidth,
 					})}
 				</div>
-				<div
-					className="chart-layout__legend-wrapper"
-					style={{
-						height: chartDimensions.legendHeight,
-						width: chartDimensions.legendWidth,
-					}}
-				>
-					{legendComponent(chartDimensions.averageLegendWidth)}
-				</div>
+				{showLegend && (
+					<div
+						className="chart-layout__legend-wrapper"
+						style={{
+							height: chartDimensions.legendHeight,
+							width: chartDimensions.legendWidth,
+						}}
+					>
+						{legendComponent(chartDimensions.averageLegendWidth)}
+					</div>
+				)}
 			</div>
 			{layoutChildren}
 		</div>

frontend/src/container/DashboardContainer/visualization/panels/BarPanel/BarPanel.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import ContextMenu from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -27,7 +27,6 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 		onToggleModelHandler,
 	} = props;
 	const uPlotRef = useRef<uPlot | null>(null);
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -36,16 +35,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel.tsx

@@ -0,0 +1,114 @@
+import { useMemo, useRef } from 'react';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
+import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { DashboardCursorSync } from 'lib/uPlotV2/plugins/TooltipPlugin/types';
+import { useTimezone } from 'providers/Timezone';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import uPlot from 'uplot';
+
+import Histogram from '../../charts/Histogram/Histogram';
+import ChartManager from '../../components/ChartManager/ChartManager';
+import {
+	prepareHistogramPanelConfig,
+	prepareHistogramPanelData,
+} from './utils';
+
+import '../Panel.styles.scss';
+
+function HistogramPanel(props: PanelWrapperProps): JSX.Element {
+	const {
+		panelMode,
+		queryResponse,
+		widget,
+		isFullViewMode,
+		onToggleModelHandler,
+	} = props;
+	const uPlotRef = useRef<uPlot | null>(null);
+	const graphRef = useRef<HTMLDivElement>(null);
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const isDarkMode = useIsDarkMode();
+	const { timezone } = useTimezone();
+
+	useScrollWidgetIntoView(widget.id, graphRef);
+
+	const config = useMemo(() => {
+		return prepareHistogramPanelConfig({
+			widget,
+			isDarkMode,
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			panelMode,
+		});
+	}, [widget, isDarkMode, queryResponse?.data?.payload, panelMode]);
+
+	const chartData = useMemo(() => {
+		if (!queryResponse?.data?.payload) {
+			return [];
+		}
+		return prepareHistogramPanelData({
+			apiResponse: queryResponse?.data?.payload as MetricRangePayloadProps,
+			bucketWidth: widget?.bucketWidth,
+			bucketCount: widget?.bucketCount,
+			mergeAllActiveQueries: widget?.mergeAllActiveQueries,
+		});
+	}, [
+		queryResponse?.data?.payload,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	]);
+
+	const layoutChildren = useMemo(() => {
+		if (!isFullViewMode || widget.mergeAllActiveQueries) {
+			return null;
+		}
+		return (
+			<ChartManager
+				config={config}
+				alignedData={chartData}
+				yAxisUnit={widget.yAxisUnit}
+				onCancel={onToggleModelHandler}
+			/>
+		);
+	}, [
+		isFullViewMode,
+		config,
+		chartData,
+		widget.yAxisUnit,
+		onToggleModelHandler,
+		widget.mergeAllActiveQueries,
+	]);
+
+	return (
+		<div className="panel-container" ref={graphRef}>
+			{containerDimensions.width > 0 && containerDimensions.height > 0 && (
+				<Histogram
+					config={config}
+					legendConfig={{
+						position: widget?.legendPosition ?? LegendPosition.BOTTOM,
+					}}
+					plotRef={(plot: uPlot | null): void => {
+						uPlotRef.current = plot;
+					}}
+					onDestroy={(): void => {
+						uPlotRef.current = null;
+					}}
+					isQueriesMerged={widget.mergeAllActiveQueries}
+					yAxisUnit={widget.yAxisUnit}
+					decimalPrecision={widget.decimalPrecision}
+					syncMode={DashboardCursorSync.Crosshair}
+					timezone={timezone.value}
+					data={chartData as uPlot.AlignedData}
+					width={containerDimensions.width}
+					height={containerDimensions.height}
+					layoutChildren={layoutChildren}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanel;

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/__tests__/HistogramPanel.test.tsx

@@ -0,0 +1,223 @@
+/* eslint-disable simple-import-sort/imports */
+import type { UseQueryResult } from 'react-query';
+import { render, screen } from 'tests/test-utils';
+
+import { PanelMode } from 'container/DashboardContainer/visualization/panels/types';
+import { LegendPosition } from 'lib/uPlotV2/components/types';
+import { Widgets } from 'types/api/dashboard/getAll';
+import {
+	MetricQueryRangeSuccessResponse,
+	MetricRangePayloadProps,
+} from 'types/api/metrics/getQueryRange';
+
+import HistogramPanel from '../HistogramPanel';
+import { HistogramChartProps } from 'container/DashboardContainer/visualization/charts/types';
+
+jest.mock('hooks/useDimensions', () => ({
+	useResizeObserver: jest.fn().mockReturnValue({ width: 800, height: 400 }),
+}));
+
+jest.mock('hooks/useDarkMode', () => ({
+	useIsDarkMode: jest.fn().mockReturnValue(false),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	__esModule: true,
+	// Provide a no-op provider component so AllTheProviders can render
+	default: ({ children }: { children: React.ReactNode }): JSX.Element => (
+		<>{children}</>
+	),
+	// And mock the hook used by HistogramPanel
+	useTimezone: jest.fn().mockReturnValue({
+		timezone: { value: 'UTC' },
+	}),
+}));
+
+jest.mock(
+	'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView',
+	() => ({
+		useScrollWidgetIntoView: jest.fn(),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/charts/Histogram/Histogram',
+	() => ({
+		__esModule: true,
+		default: (props: HistogramChartProps): JSX.Element => (
+			<div data-testid="histogram-chart">
+				<div data-testid="histogram-props">
+					{JSON.stringify({
+						legendPosition: props.legendConfig?.position,
+						isQueriesMerged: props.isQueriesMerged,
+						yAxisUnit: props.yAxisUnit,
+						decimalPrecision: props.decimalPrecision,
+					})}
+				</div>
+				{props.layoutChildren}
+			</div>
+		),
+	}),
+);
+
+jest.mock(
+	'container/DashboardContainer/visualization/components/ChartManager/ChartManager',
+	() => ({
+		__esModule: true,
+		default: (): JSX.Element => (
+			<div data-testid="chart-manager">ChartManager</div>
+		),
+	}),
+);
+
+function createQueryResponse(
+	payloadOverrides: Partial<MetricRangePayloadProps> = {},
+): { data: { payload: MetricRangePayloadProps } } {
+	const basePayload: MetricRangePayloadProps = {
+		data: {
+			result: [
+				{
+					metric: {},
+					queryName: 'A',
+					legend: 'Series A',
+					values: [
+						[1, '10'],
+						[2, '20'],
+					],
+				},
+			],
+			resultType: 'matrix',
+			newResult: {
+				data: {
+					result: [],
+					resultType: 'matrix',
+				},
+			},
+		},
+	};
+
+	return {
+		data: {
+			payload: {
+				...basePayload,
+				...payloadOverrides,
+			},
+		},
+	};
+}
+
+type WidgetLike = {
+	id: string;
+	yAxisUnit: string;
+	decimalPrecision: number;
+	legendPosition: LegendPosition;
+	mergeAllActiveQueries: boolean;
+};
+
+function createWidget(overrides: Partial<WidgetLike> = {}): WidgetLike {
+	return {
+		id: 'widget-id',
+		yAxisUnit: 'ms',
+		decimalPrecision: 2,
+		legendPosition: LegendPosition.BOTTOM,
+		mergeAllActiveQueries: false,
+		...overrides,
+	};
+}
+
+describe('HistogramPanel', () => {
+	it('renders Histogram when container has dimensions', () => {
+		const widget = (createWidget() as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('histogram-chart')).toBeInTheDocument();
+	});
+
+	it('passes legend position and other props to Histogram', () => {
+		const widget = (createWidget({
+			legendPosition: LegendPosition.RIGHT,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode={false}
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		const propsJson = screen.getByTestId('histogram-props').textContent || '{}';
+		const parsed = JSON.parse(propsJson);
+
+		expect(parsed.legendPosition).toBe(LegendPosition.RIGHT);
+		expect(parsed.yAxisUnit).toBe('ms');
+		expect(parsed.decimalPrecision).toBe(2);
+	});
+
+	it('renders ChartManager in full view when queries are not merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: false,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.getByTestId('chart-manager')).toBeInTheDocument();
+	});
+
+	it('does not render ChartManager when queries are merged', () => {
+		const widget = (createWidget({
+			mergeAllActiveQueries: true,
+		}) as unknown) as Widgets;
+		const queryResponse = (createQueryResponse() as unknown) as UseQueryResult<
+			MetricQueryRangeSuccessResponse,
+			Error
+		>;
+
+		render(
+			<HistogramPanel
+				panelMode={PanelMode.DASHBOARD_VIEW}
+				widget={widget}
+				queryResponse={queryResponse}
+				isFullViewMode
+				onToggleModelHandler={jest.fn()}
+				onDragSelect={jest.fn()}
+			/>,
+		);
+
+		expect(screen.queryByTestId('chart-manager')).not.toBeInTheDocument();
+	});
+});

frontend/src/container/DashboardContainer/visualization/panels/HistogramPanel/utils.ts

@@ -0,0 +1,231 @@
+import { histogramBucketSizes } from '@grafana/data';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { DEFAULT_BUCKET_COUNT } from 'container/PanelWrapper/constants';
+import { getLegend } from 'lib/dashboard/getQueryResults';
+import getLabelName from 'lib/getLabelName';
+import { DrawStyle } from 'lib/uPlotV2/config/types';
+import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
+import { Widgets } from 'types/api/dashboard/getAll';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { AlignedData } from 'uplot';
+import { incrRoundDn, roundDecimals } from 'utils/round';
+
+import { PanelMode } from '../types';
+import { buildBaseConfig } from '../utils/baseConfigBuilder';
+import {
+	buildHistogramBuckets,
+	mergeAlignedDataTables,
+	prependNullBinToFirstHistogramSeries,
+	replaceUndefinedWithNullInAlignedData,
+} from '../utils/histogram';
+
+export interface PrepareHistogramPanelDataParams {
+	apiResponse: MetricRangePayloadProps;
+	bucketWidth?: number;
+	bucketCount?: number;
+	mergeAllActiveQueries?: boolean;
+}
+
+const BUCKET_OFFSET = 0;
+const HIST_SORT = (a: number, b: number): number => a - b;
+
+function extractNumericValues(
+	result: MetricRangePayloadProps['data']['result'],
+): number[] {
+	const values: number[] = [];
+	for (const item of result) {
+		for (const [, valueStr] of item.values) {
+			values.push(Number.parseFloat(valueStr) || 0);
+		}
+	}
+	return values;
+}
+
+function computeSmallestDelta(sortedValues: number[]): number {
+	if (sortedValues.length <= 1) {
+		return 0;
+	}
+	let smallest = Infinity;
+	for (let i = 1; i < sortedValues.length; i++) {
+		const delta = sortedValues[i] - sortedValues[i - 1];
+		if (delta > 0) {
+			smallest = Math.min(smallest, delta);
+		}
+	}
+	return smallest === Infinity ? 0 : smallest;
+}
+
+function selectBucketSize({
+	range,
+	bucketCount,
+	smallestDelta,
+	bucketWidthOverride,
+}: {
+	range: number;
+	bucketCount: number;
+	smallestDelta: number;
+	bucketWidthOverride?: number;
+}): number {
+	if (bucketWidthOverride != null && bucketWidthOverride > 0) {
+		return bucketWidthOverride;
+	}
+	const targetSize = range / bucketCount;
+	for (const candidate of histogramBucketSizes) {
+		if (targetSize < candidate && candidate >= smallestDelta) {
+			return candidate;
+		}
+	}
+	return 0;
+}
+
+function buildFrames(
+	result: MetricRangePayloadProps['data']['result'],
+	mergeAllActiveQueries: boolean,
+): number[][] {
+	const frames: number[][] = result.map((item) =>
+		item.values.map(([, valueStr]) => Number.parseFloat(valueStr) || 0),
+	);
+	if (mergeAllActiveQueries && frames.length > 1) {
+		const first = frames[0];
+		for (let i = 1; i < frames.length; i++) {
+			first.push(...frames[i]);
+			frames[i] = [];
+		}
+	}
+	return frames;
+}
+
+export function prepareHistogramPanelData({
+	apiResponse,
+	bucketWidth,
+	bucketCount: bucketCountProp = DEFAULT_BUCKET_COUNT,
+	mergeAllActiveQueries = false,
+}: PrepareHistogramPanelDataParams): AlignedData {
+	const bucketCount = bucketCountProp ?? DEFAULT_BUCKET_COUNT;
+	const result = apiResponse.data.result;
+
+	const seriesValues = extractNumericValues(result);
+	if (seriesValues.length === 0) {
+		return [[]];
+	}
+
+	const sorted = [...seriesValues].sort((a, b) => a - b);
+	const min = sorted[0];
+	const max = sorted[sorted.length - 1];
+	const range = max - min;
+	const smallestDelta = computeSmallestDelta(sorted);
+	let bucketSize = selectBucketSize({
+		range,
+		bucketCount,
+		smallestDelta,
+		bucketWidthOverride: bucketWidth,
+	});
+	if (bucketSize <= 0) {
+		bucketSize = range > 0 ? range / bucketCount : 1;
+	}
+
+	const getBucket = (v: number): number =>
+		roundDecimals(incrRoundDn(v - BUCKET_OFFSET, bucketSize) + BUCKET_OFFSET, 9);
+
+	const frames = buildFrames(result, mergeAllActiveQueries);
+	const histogramsPerSeries: AlignedData[] = frames
+		.filter((frame) => frame.length > 0)
+		.map((frame) => buildHistogramBuckets(frame, getBucket, HIST_SORT));
+
+	if (histogramsPerSeries.length === 0) {
+		return [[]];
+	}
+
+	const mergedHistogramData = mergeAlignedDataTables(histogramsPerSeries);
+	replaceUndefinedWithNullInAlignedData(mergedHistogramData);
+	prependNullBinToFirstHistogramSeries(mergedHistogramData, bucketSize);
+	return mergedHistogramData;
+}
+
+export function prepareHistogramPanelConfig({
+	widget,
+	apiResponse,
+	panelMode,
+	isDarkMode,
+}: {
+	widget: Widgets;
+	apiResponse: MetricRangePayloadProps;
+	panelMode: PanelMode;
+	isDarkMode: boolean;
+}): UPlotConfigBuilder {
+	const builder = buildBaseConfig({
+		widget,
+		isDarkMode,
+		apiResponse,
+		panelMode,
+		panelType: PANEL_TYPES.HISTOGRAM,
+	});
+	builder.setCursor({
+		drag: {
+			x: false,
+			y: false,
+			setScale: true,
+		},
+		focus: {
+			prox: 1e3,
+		},
+	});
+
+	builder.addScale({
+		scaleKey: 'x',
+		time: false,
+		auto: true,
+	});
+	builder.addScale({
+		scaleKey: 'y',
+		time: false,
+		auto: true,
+		min: 0,
+	});
+
+	const currentQuery = widget.query;
+	const mergeAllActiveQueries = widget?.mergeAllActiveQueries ?? false;
+
+	// When merged, data has only one y column; add one series to match. Otherwise add one per result.
+	if (mergeAllActiveQueries) {
+		builder.addSeries({
+			label: '',
+			scaleKey: 'y',
+			drawStyle: DrawStyle.Bar,
+			panelType: PANEL_TYPES.HISTOGRAM,
+			colorMapping: widget.customLegendColors ?? {},
+			spanGaps: false,
+			barWidthFactor: 1,
+			pointSize: 5,
+			lineColor: '#3f5ecc',
+			fillColor: '#4E74F8',
+			isDarkMode,
+		});
+	} else {
+		apiResponse.data.result.forEach((series) => {
+			const baseLabelName = getLabelName(
+				series.metric,
+				series.queryName || '', // query
+				series.legend || '',
+			);
+
+			const label = currentQuery
+				? getLegend(series, currentQuery, baseLabelName)
+				: baseLabelName;
+
+			builder.addSeries({
+				label: label,
+				scaleKey: 'y',
+				drawStyle: DrawStyle.Bar,
+				panelType: PANEL_TYPES.HISTOGRAM,
+				colorMapping: widget.customLegendColors ?? {},
+				spanGaps: false,
+				barWidthFactor: 1,
+				pointSize: 5,
+				isDarkMode,
+			});
+		});
+	}
+
+	return builder;
+}

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel.tsx

@@ -2,12 +2,12 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import TimeSeries from 'container/DashboardContainer/visualization/charts/TimeSeries/TimeSeries';
 import ChartManager from 'container/DashboardContainer/visualization/components/ChartManager/ChartManager';
 import { usePanelContextMenu } from 'container/DashboardContainer/visualization/hooks/usePanelContextMenu';
+import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { PanelWrapperProps } from 'container/PanelWrapper/panelWrapper.types';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { LegendPosition } from 'lib/uPlotV2/components/types';
 import { ContextMenu } from 'periscope/components/ContextMenu';
-import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useTimezone } from 'providers/Timezone';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import uPlot from 'uplot';
@@ -26,7 +26,6 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 		isFullViewMode,
 		onToggleModelHandler,
 	} = props;
-	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const graphRef = useRef<HTMLDivElement>(null);
 	const [minTimeScale, setMinTimeScale] = useState<number>();
 	const [maxTimeScale, setMaxTimeScale] = useState<number>();
@@ -35,16 +34,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
-	useEffect(() => {
-		if (toScrollWidgetId === widget.id) {
-			graphRef.current?.scrollIntoView({
-				behavior: 'smooth',
-				block: 'center',
-			});
-			graphRef.current?.focus();
-			setToScrollWidgetId('');
-		}
-	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	useScrollWidgetIntoView(widget.id, graphRef);
 
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);

frontend/src/container/DashboardContainer/visualization/panels/TimeSeriesPanel/utils.ts

@@ -67,7 +67,17 @@ export const prepareUPlotConfig = ({
 		maxTimeScale,
 	});
 
-	apiResponse.data?.result?.forEach((series) => {
+	const seriesList = apiResponse.data?.result || [];
+
+	if (seriesList.length === 1) {
+		builder.setCursor({
+			focus: {
+				prox: 1e3,
+			},
+		});
+	}
+
+	seriesList.forEach((series) => {
 		const baseLabelName = getLabelName(
 			series.metric,
 			series.queryName || '', // query

frontend/src/container/DashboardContainer/visualization/panels/types.ts

@@ -14,11 +14,6 @@ export interface GraphVisibilityState {
 	dataIndex: SeriesVisibilityItem[];
 }
 
-export interface SeriesVisibilityState {
-	labels: string[];
-	visibility: boolean[];
-}
-
 /**
  * Context in which a panel is rendered. Used to vary behavior (e.g. persistence,
  * interactions) per context.

frontend/src/container/DashboardContainer/visualization/panels/utils/__tests__/legendVisibilityUtils.test.ts

@@ -62,10 +62,10 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns visibility by index including duplicate labels', () => {
@@ -85,10 +85,11 @@ describe('legendVisibilityUtils', () => {
 			const result = getStoredSeriesVisibility('widget-1');
 
 			expect(result).not.toBeNull();
-			expect(result).toEqual({
-				labels: ['CPU', 'CPU', 'Memory'],
-				visibility: [true, false, false],
-			});
+			expect(result).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('returns null on malformed JSON in localStorage', () => {
@@ -127,10 +128,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: true },
+				{ label: 'Memory', show: false },
+			]);
 		});
 
 		it('adds a new widget entry when other widgets already exist', () => {
@@ -149,7 +150,7 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-new');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({ labels: ['CPU'], visibility: [false] });
+			expect(stored).toEqual([{ label: 'CPU', show: false }]);
 		});
 
 		it('updates existing widget visibility when entry already exists', () => {
@@ -175,10 +176,10 @@ describe('legendVisibilityUtils', () => {
 			const stored = getStoredSeriesVisibility('widget-1');
 
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['CPU', 'Memory'],
-				visibility: [false, true],
-			});
+			expect(stored).toEqual([
+				{ label: 'CPU', show: false },
+				{ label: 'Memory', show: true },
+			]);
 		});
 
 		it('silently handles malformed existing JSON without throwing', () => {
@@ -201,10 +202,10 @@ describe('legendVisibilityUtils', () => {
 
 			const stored = getStoredSeriesVisibility('widget-1');
 			expect(stored).not.toBeNull();
-			expect(stored).toEqual({
-				labels: ['x-axis', 'CPU'],
-				visibility: [true, false],
-			});
+			expect(stored).toEqual([
+				{ label: 'x-axis', show: true },
+				{ label: 'CPU', show: false },
+			]);
 			const expected = [
 				{
 					name: 'widget-1',
@@ -231,14 +232,12 @@ describe('legendVisibilityUtils', () => {
 				{ label: 'B', show: true },
 			]);
 
-			expect(getStoredSeriesVisibility('widget-a')).toEqual({
-				labels: ['A'],
-				visibility: [true],
-			});
-			expect(getStoredSeriesVisibility('widget-b')).toEqual({
-				labels: ['B'],
-				visibility: [true],
-			});
+			expect(getStoredSeriesVisibility('widget-a')).toEqual([
+				{ label: 'A', show: true },
+			]);
+			expect(getStoredSeriesVisibility('widget-b')).toEqual([
+				{ label: 'B', show: true },
+			]);
 		});
 
 		it('calls setItem with storage key and stringified visibility states', () => {

frontend/src/container/DashboardContainer/visualization/panels/utils/baseConfigBuilder.ts

@@ -19,9 +19,9 @@ export interface BaseConfigBuilderProps {
 	widget: Widgets;
 	apiResponse: MetricRangePayloadProps;
 	isDarkMode: boolean;
-	onClick: OnClickPluginOpts['onClick'];
-	onDragSelect: (startTime: number, endTime: number) => void;
-	timezone: Timezone;
+	onClick?: OnClickPluginOpts['onClick'];
+	onDragSelect?: (startTime: number, endTime: number) => void;
+	timezone?: Timezone;
 	panelMode: PanelMode;
 	panelType: PANEL_TYPES;
 	minTimeScale?: number;
@@ -40,8 +40,10 @@ export function buildBaseConfig({
 	minTimeScale,
 	maxTimeScale,
 }: BaseConfigBuilderProps): UPlotConfigBuilder {
-	const tzDate = (timestamp: number): Date =>
-		uPlot.tzDate(new Date(timestamp * 1e3), timezone.value);
+	const tzDate = timezone
+		? (timestamp: number): Date =>
+				uPlot.tzDate(new Date(timestamp * 1e3), timezone.value)
+		: undefined;
 
 	const builder = new UPlotConfigBuilder({
 		onDragSelect,

frontend/src/container/DashboardContainer/visualization/panels/utils/histogram.ts

@@ -0,0 +1,225 @@
+import {
+	NULL_EXPAND,
+	NULL_REMOVE,
+	NULL_RETAIN,
+} from 'container/PanelWrapper/constants';
+import { AlignedData } from 'uplot';
+
+/**
+ * Expands contiguous runs of `null` values to the left and right of their
+ * original positions so that visual gaps in the series are continuous.
+ *
+ * This is used when `NULL_EXPAND` mode is selected while joining series.
+ */
+function propagateNullsAcrossNeighbors(
+	seriesValues: Array<number | null>,
+	nullIndices: number[],
+	alignedLength: number,
+): void {
+	for (
+		let i = 0, currentIndex, lastExpandedNullIndex = -1;
+		i < nullIndices.length;
+		i++
+	) {
+		const nullIndex = nullIndices[i];
+
+		if (nullIndex > lastExpandedNullIndex) {
+			// expand left until we hit a non-null value
+			currentIndex = nullIndex - 1;
+			while (currentIndex >= 0 && seriesValues[currentIndex] == null) {
+				seriesValues[currentIndex--] = null;
+			}
+
+			// expand right until we hit a non-null value
+			currentIndex = nullIndex + 1;
+			while (currentIndex < alignedLength && seriesValues[currentIndex] == null) {
+				seriesValues[(lastExpandedNullIndex = currentIndex++)] = null;
+			}
+		}
+	}
+}
+
+/**
+ * Merges multiple uPlot `AlignedData` tables into a single aligned table.
+ *
+ * - Merges and sorts all distinct x-values from each table.
+ * - Re-aligns every series onto the merged x-axis.
+ * - Applies per-series null handling (`NULL_REMOVE`, `NULL_RETAIN`, `NULL_EXPAND`).
+ */
+/* eslint-disable sonarjs/cognitive-complexity */
+export function mergeAlignedDataTables(
+	alignedTables: AlignedData[],
+	nullModes?: number[][],
+): AlignedData {
+	let mergedXValues: Set<number>;
+
+	// eslint-disable-next-line prefer-const
+	mergedXValues = new Set();
+
+	// Collect all unique x-values from every table.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+		const xLength = xValues.length;
+
+		for (let i = 0; i < xLength; i++) {
+			mergedXValues.add(xValues[i]);
+		}
+	}
+
+	// Sorted, merged x-axis used by the final result.
+	const alignedData: (number | null | undefined)[][] = [
+		Array.from(mergedXValues).sort((a, b) => a - b),
+	];
+
+	const alignedLength = alignedData[0].length;
+
+	// Map from x-value to its index in the merged x-axis.
+	const xValueToIndexMap = new Map<number, number>();
+
+	for (let i = 0; i < alignedLength; i++) {
+		xValueToIndexMap.set(alignedData[0][i] as number, i);
+	}
+
+	// Re-align all series from all tables onto the merged x-axis.
+	for (let tableIndex = 0; tableIndex < alignedTables.length; tableIndex++) {
+		const table = alignedTables[tableIndex];
+		const xValues = table[0];
+
+		for (let seriesIndex = 1; seriesIndex < table.length; seriesIndex++) {
+			const seriesValues = table[seriesIndex];
+
+			const alignedSeriesValues = Array(alignedLength).fill(undefined);
+
+			const nullHandlingMode = nullModes
+				? nullModes[tableIndex][seriesIndex]
+				: NULL_RETAIN;
+
+			const nullIndices: number[] = [];
+
+			for (let i = 0; i < seriesValues.length; i++) {
+				const valueAtPoint = seriesValues[i];
+				const alignedIndex = xValueToIndexMap.get(xValues[i]);
+
+				if (alignedIndex == null) {
+					continue;
+				}
+
+				if (valueAtPoint === null) {
+					if (nullHandlingMode !== NULL_REMOVE) {
+						alignedSeriesValues[alignedIndex] = valueAtPoint;
+
+						if (nullHandlingMode === NULL_EXPAND) {
+							nullIndices.push(alignedIndex);
+						}
+					}
+				} else {
+					alignedSeriesValues[alignedIndex] = valueAtPoint;
+				}
+			}
+
+			// Optionally expand nulls to visually preserve gaps.
+			propagateNullsAcrossNeighbors(
+				alignedSeriesValues,
+				nullIndices,
+				alignedLength,
+			);
+
+			alignedData.push(alignedSeriesValues);
+		}
+	}
+
+	return alignedData as AlignedData;
+}
+
+/**
+ * Builds histogram buckets from raw values.
+ *
+ * - Each value is mapped into a bucket via `getBucketForValue`.
+ * - Counts how many values fall into each bucket.
+ * - Optionally sorts buckets using the provided comparator.
+ */
+export function buildHistogramBuckets(
+	values: number[],
+	getBucketForValue: (value: number) => number,
+	sortBuckets?: ((a: number, b: number) => number) | null,
+): AlignedData {
+	const bucketMap = new Map<number, { value: number; count: number }>();
+
+	for (let i = 0; i < values.length; i++) {
+		let value = values[i];
+
+		if (value != null) {
+			value = getBucketForValue(value);
+		}
+
+		const bucket = bucketMap.get(value);
+
+		if (bucket) {
+			bucket.count++;
+		} else {
+			bucketMap.set(value, { value, count: 1 });
+		}
+	}
+
+	const buckets = [...bucketMap.values()];
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	sortBuckets && buckets.sort((a, b) => sortBuckets(a.value, b.value));
+
+	const bucketValues = Array(buckets.length);
+	const bucketCounts = Array(buckets.length);
+
+	for (let i = 0; i < buckets.length; i++) {
+		bucketValues[i] = buckets[i].value;
+		bucketCounts[i] = buckets[i].count;
+	}
+
+	return [bucketValues, bucketCounts];
+}
+
+/**
+ * Mutates an `AlignedData` instance, replacing all `undefined` entries
+ * with explicit `null` values so uPlot treats them as gaps.
+ */
+export function replaceUndefinedWithNullInAlignedData(
+	data: AlignedData,
+): AlignedData {
+	const seriesList = data as (number | null | undefined)[][];
+	for (let seriesIndex = 0; seriesIndex < seriesList.length; seriesIndex++) {
+		for (
+			let pointIndex = 0;
+			pointIndex < seriesList[seriesIndex].length;
+			pointIndex++
+		) {
+			if (seriesList[seriesIndex][pointIndex] === undefined) {
+				seriesList[seriesIndex][pointIndex] = null;
+			}
+		}
+	}
+	return data;
+}
+
+/**
+ * Ensures the first histogram series has a leading "empty" bin so that
+ * all series line up visually when rendered as bars.
+ *
+ * - Prepends a new x-value (first x - `bucketSize`) to the first series.
+ * - Prepends `null` to all subsequent series at the same index.
+ */
+export function prependNullBinToFirstHistogramSeries(
+	alignedData: AlignedData,
+	bucketSize: number,
+): void {
+	const seriesList = alignedData as (number | null)[][];
+	if (
+		seriesList.length > 0 &&
+		seriesList[0].length > 0 &&
+		seriesList[0][0] !== null
+	) {
+		seriesList[0].unshift(seriesList[0][0] - bucketSize);
+		for (let seriesIndex = 1; seriesIndex < seriesList.length; seriesIndex++) {
+			seriesList[seriesIndex].unshift(null);
+		}
+	}
+}

frontend/src/container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils.ts

@@ -1,10 +1,6 @@
 import { LOCALSTORAGE } from 'constants/localStorage';
 
-import {
-	GraphVisibilityState,
-	SeriesVisibilityItem,
-	SeriesVisibilityState,
-} from '../types';
+import { GraphVisibilityState, SeriesVisibilityItem } from '../types';
 
 /**
  * Retrieves the stored series visibility for a specific widget from localStorage by index.
@@ -14,7 +10,7 @@ import {
  */
 export function getStoredSeriesVisibility(
 	widgetId: string,
-): SeriesVisibilityState | null {
+): SeriesVisibilityItem[] | null {
 	try {
 		const storedData = localStorage.getItem(LOCALSTORAGE.GRAPH_VISIBILITY_STATES);
 
@@ -29,10 +25,7 @@ export function getStoredSeriesVisibility(
 			return null;
 		}
 
-		return {
-			labels: widgetState.dataIndex.map((item) => item.label),
-			visibility: widgetState.dataIndex.map((item) => item.show),
-		};
+		return widgetState.dataIndex;
 	} catch (error) {
 		if (error instanceof SyntaxError) {
 			// If the stored data is malformed, remove it

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

@@ -1,8 +1,9 @@
 /* eslint-disable no-nested-ternary */
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useQuery } from 'react-query';
-import { Virtuoso } from 'react-virtuoso';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
@@ -11,6 +12,8 @@ import LogsError from 'container/LogsError/LogsError';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { FontSize } from 'container/OptionsMenu/types';
 import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
 import { ILog } from 'types/api/logs/log';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
@@ -40,6 +43,15 @@ function EntityLogs({
 	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
 	const basePayload = getEntityEventsOrLogsQueryPayload(
 		timeRange.startTime,
 		timeRange.endTime,
@@ -62,29 +74,40 @@ function EntityLogs({
 		basePayload,
 	});
 
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
 	const getItemContent = useCallback(
-		(_: number, logToRender: ILog): JSX.Element => (
-			<RawLogView
-				isTextOverflowEllipsisDisabled
-				key={logToRender.id}
-				data={logToRender}
-				linesPerRow={5}
-				fontSize={FontSize.MEDIUM}
-				selectedFields={[
-					{
-						dataType: 'string',
-						type: '',
-						name: 'body',
-					},
-					{
-						dataType: 'string',
-						type: '',
-						name: 'timestamp',
-					},
-				]}
-			/>
-		),
-		[],
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
 	);
 
 	const { data, isLoading, isFetching, isError } = useQuery({
@@ -131,6 +154,7 @@ function EntityLogs({
 					<Virtuoso
 						className="entity-logs-virtuoso"
 						key="entity-logs-virtuoso"
+						ref={virtuosoRef}
 						data={logs}
 						endReached={loadMoreLogs}
 						totalCount={logs.length}
@@ -154,7 +178,21 @@ function EntityLogs({
 			)}
 			{isError && !isLoading && <LogsError />}
 			{!isLoading && !isError && logs.length > 0 && (
-				<div className="entity-logs-list-container">{renderContent}</div>
+				<div className="entity-logs-list-container" data-log-detail-ignore="true">
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
 			)}
 		</div>
 	);

frontend/src/container/LiveLogs/LiveLogsList/index.tsx

@@ -2,7 +2,6 @@ import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
 import { Card, Typography } from 'antd';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
@@ -14,8 +13,9 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { defaultLogsSelectedColumns } from 'container/OptionsMenu/constants';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useEventSource } from 'providers/EventSource';
 // interfaces
 import { ILog } from 'types/api/logs/log';
@@ -38,10 +38,11 @@ function LiveLogsList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	// get only data from the logs object
 	const formattedLogs: ILog[] = useMemo(
@@ -65,42 +66,56 @@ function LiveLogsList({
 		...options.selectColumns,
 	]);
 
+	const handleScrollToLog = useScrollToLog({
+		logs: formattedLogs,
+		virtuosoRef: ref,
+	});
+
 	const getItemContent = useCallback(
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					linesPerRow={options.maxLines}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					fontSize={options.fontSize}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						linesPerRow={options.maxLines}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						fontSize={options.fontSize}
+						handleChangeSelectedView={handleChangeSelectedView}
+					/>
+				</div>
 			);
 		},
 		[
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
 			options.maxLines,
+			options.fontSize,
+			activeLog?.id,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleCloseLogDetail,
+			handleChangeSelectedView,
 		],
 	);
 
@@ -156,6 +171,10 @@ function LiveLogsList({
 								activeLogIndex,
 							}}
 							handleChangeSelectedView={handleChangeSelectedView}
+							logs={formattedLogs}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+							activeLog={activeLog}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
@@ -173,14 +192,17 @@ function LiveLogsList({
 				</InfinityWrapperStyled>
 			)}
 
-			{activeLog && (
+			{activeLog && selectedTab && (
 				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
+					selectedTab={selectedTab}
 					log={activeLog}
-					onClose={onClearActiveLog}
+					onClose={handleCloseLogDetail}
 					onAddToQuery={onAddToQuery}
 					onClickActionItem={onAddToQuery}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={formattedLogs}
+					onNavigateLog={handleSetActiveLog}
+					onScrollToLog={handleScrollToLog}
 				/>
 			)}
 		</div>

frontend/src/container/LogDetailedView/TableView/TableViewActions.tsx

@@ -395,7 +395,7 @@ export default function TableViewActions(
 								onOpenChange={setIsOpen}
 								arrow={false}
 								content={
-									<div>
+									<div data-log-detail-ignore="true">
 										<Button
 											className="more-filter-actions"
 											type="text"
@@ -481,7 +481,7 @@ export default function TableViewActions(
 							onOpenChange={setIsOpen}
 							arrow={false}
 							content={
-								<div>
+								<div data-log-detail-ignore="true">
 									<Button
 										className="more-filter-actions"
 										type="text"

frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx

@@ -7,6 +7,7 @@ import {
 	useMemo,
 } from 'react';
 import { ColumnsType } from 'antd/es/table';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import LogLinesActionButtons from 'components/Logs/LogLinesActionButtons/LogLinesActionButtons';
 import { ColumnTypeRender } from 'components/Logs/TableView/types';
 import { FontSize } from 'container/OptionsMenu/types';
@@ -22,22 +23,27 @@ interface TableRowProps {
 	tableColumns: ColumnsType<Record<string, unknown>>;
 	index: number;
 	log: Record<string, unknown>;
-	handleSetActiveContextLog: (log: ILog) => void;
-	onShowLogDetails: (log: ILog) => void;
+	onShowLogDetails?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
 	logs: ILog[];
 	hasActions: boolean;
 	fontSize: FontSize;
+	isActiveLog?: boolean;
+	onClearActiveLog?: () => void;
 }
 
 export default function TableRow({
 	tableColumns,
 	index,
 	log,
-	handleSetActiveContextLog,
 	onShowLogDetails,
 	logs,
 	hasActions,
 	fontSize,
+	isActiveLog,
+	onClearActiveLog,
 }: TableRowProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
@@ -52,21 +58,31 @@ export default function TableRow({
 		(event) => {
 			event.preventDefault();
 			event.stopPropagation();
-			if (!handleSetActiveContextLog || !currentLog) {
+			if (!currentLog) {
 				return;
 			}
 
-			handleSetActiveContextLog(currentLog);
+			onShowLogDetails?.(currentLog, VIEW_TYPES.CONTEXT);
 		},
-		[currentLog, handleSetActiveContextLog],
+		[currentLog, onShowLogDetails],
 	);
 
 	const handleShowLogDetails = useCallback(() => {
-		if (!onShowLogDetails || !currentLog) {
+		if (!currentLog) {
 			return;
 		}
-		onShowLogDetails(currentLog);
-	}, [currentLog, onShowLogDetails]);
+
+		// If this log is already active, close the detail drawer
+		if (isActiveLog && onClearActiveLog) {
+			onClearActiveLog();
+			return;
+		}
+
+		// Otherwise, open the detail drawer for this log
+		if (onShowLogDetails) {
+			onShowLogDetails(currentLog);
+		}
+	}, [currentLog, onShowLogDetails, isActiveLog, onClearActiveLog]);
 
 	const hasSingleColumn =
 		tableColumns.filter((column) => column.key !== 'state-indicator').length ===

frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx

@@ -4,7 +4,6 @@ import {
 	TableVirtuoso,
 	TableVirtuosoHandle,
 } from 'react-virtuoso';
-import LogDetail from 'components/LogDetail';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils';
 import { useTableView } from 'components/Logs/TableView/useTableView';
@@ -58,26 +57,40 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
 
 const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 	function InfinityTableView(
-		{ isLoading, tableViewProps, infitiyTableProps, handleChangeSelectedView },
-		ref,
-	): JSX.Element | null {
-		const {
-			activeLog: activeContextLog,
-			onSetActiveLog: handleSetActiveContextLog,
-			onClearActiveLog: handleClearActiveContextLog,
-			onAddToQuery: handleAddToQuery,
-		} = useActiveLog();
-		const {
-			activeLog,
+		{
+			isLoading,
+			tableViewProps,
+			infitiyTableProps,
 			onSetActiveLog,
 			onClearActiveLog,
-			onAddToQuery,
-		} = useActiveLog();
+			activeLog,
+		},
+		ref,
+	): JSX.Element | null {
+		const { activeLog: activeContextLog } = useActiveLog();
+
+		const onSetActiveLogExpand = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log);
+			},
+			[onSetActiveLog],
+		);
+
+		const onSetActiveLogContext = useCallback(
+			(log: ILog) => {
+				onSetActiveLog?.(log, VIEW_TYPES.CONTEXT);
+			},
+			[onSetActiveLog],
+		);
+
+		const onCloseActiveLog = useCallback(() => {
+			onClearActiveLog?.();
+		}, [onClearActiveLog]);
 
 		const { dataSource, columns } = useTableView({
 			...tableViewProps,
-			onClickExpand: onSetActiveLog,
-			onOpenLogsContext: handleSetActiveContextLog,
+			onClickExpand: onSetActiveLogExpand,
+			onOpenLogsContext: onSetActiveLogContext,
 		});
 
 		const { draggedColumns, onDragColumns } = useDragColumns<
@@ -98,27 +111,32 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		);
 
 		const itemContent = useCallback(
-			(index: number, log: Record<string, unknown>): JSX.Element => (
-				<TableRow
-					tableColumns={tableColumns}
-					index={index}
-					log={log}
-					handleSetActiveContextLog={handleSetActiveContextLog}
-					logs={tableViewProps.logs}
-					hasActions
-					fontSize={tableViewProps.fontSize}
-					onShowLogDetails={onSetActiveLog}
-				/>
-			),
+			(index: number, log: Record<string, unknown>): JSX.Element => {
+				return (
+					<div key={log.id as string}>
+						<TableRow
+							tableColumns={tableColumns}
+							index={index}
+							log={log}
+							logs={tableViewProps.logs}
+							hasActions
+							fontSize={tableViewProps.fontSize}
+							onShowLogDetails={onSetActiveLog}
+							isActiveLog={activeLog?.id === log.id}
+							onClearActiveLog={onCloseActiveLog}
+						/>
+					</div>
+				);
+			},
 			[
-				handleSetActiveContextLog,
 				tableColumns,
-				tableViewProps.fontSize,
-				tableViewProps.logs,
 				onSetActiveLog,
+				tableViewProps.logs,
+				tableViewProps.fontSize,
+				activeLog?.id,
+				onCloseActiveLog,
 			],
 		);
-
 		const tableHeader = useCallback(
 			() => (
 				<tr>
@@ -179,24 +197,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 						? { endReached: infitiyTableProps.onEndReached }
 						: {})}
 				/>
-
-				{activeContextLog && (
-					<LogDetail
-						log={activeContextLog}
-						onClose={handleClearActiveContextLog}
-						onAddToQuery={handleAddToQuery}
-						selectedTab={VIEW_TYPES.CONTEXT}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
-				)}
-				<LogDetail
-					selectedTab={VIEW_TYPES.OVERVIEW}
-					log={activeLog}
-					onClose={onClearActiveLog}
-					onAddToQuery={onAddToQuery}
-					onClickActionItem={onAddToQuery}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
 			</>
 		);
 	},

frontend/src/container/LogsExplorerList/InfinityTableView/types.ts

@@ -1,5 +1,7 @@
+import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { UseTableViewProps } from 'components/Logs/TableView/types';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
+import { ILog } from 'types/api/logs/log';
 
 export type InfinityTableProps = {
 	isLoading?: boolean;
@@ -8,4 +10,11 @@ export type InfinityTableProps = {
 		onEndReached: (index: number) => void;
 	};
 	handleChangeSelectedView?: ChangeViewFunctionType;
+	logs?: ILog[];
+	onSetActiveLog?: (
+		log: ILog,
+		selectedTab?: typeof VIEW_TYPES[keyof typeof VIEW_TYPES],
+	) => void;
+	onClearActiveLog?: () => void;
+	activeLog?: ILog | null;
 };

frontend/src/container/LogsExplorerList/index.tsx

@@ -4,7 +4,6 @@ import { Card } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ErrorInPlace from 'components/ErrorInPlace/ErrorInPlace';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
@@ -16,8 +15,9 @@ import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import { LogsLoading } from 'container/LogsLoading/LogsLoading';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import { FontSize } from 'container/OptionsMenu/types';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import APIError from 'types/api/error';
 // interfaces
@@ -55,10 +55,11 @@ function LogsExplorerList({
 
 	const {
 		activeLog,
-		onClearActiveLog,
 		onAddToQuery,
-		onSetActiveLog,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const { options } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -82,6 +83,12 @@ function LogsExplorerList({
 		() => convertKeysToColumnFields(options.selectColumns),
 		[options],
 	);
+
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef: ref,
+	});
+
 	useEffect(() => {
 		if (!isLoading && !isFetching && !isError && logs.length !== 0) {
 			logEvent('Logs Explorer: Data present', {
@@ -94,40 +101,48 @@ function LogsExplorerList({
 		(_: number, log: ILog): JSX.Element => {
 			if (options.format === 'raw') {
 				return (
-					<RawLogView
-						key={log.id}
-						data={log}
-						linesPerRow={options.maxLines}
-						selectedFields={selectedFields}
-						fontSize={options.fontSize}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					<div key={log.id}>
+						<RawLogView
+							data={log}
+							isActiveLog={activeLog?.id === log.id}
+							linesPerRow={options.maxLines}
+							selectedFields={selectedFields}
+							fontSize={options.fontSize}
+							handleChangeSelectedView={handleChangeSelectedView}
+							onSetActiveLog={handleSetActiveLog}
+							onClearActiveLog={handleCloseLogDetail}
+						/>
+					</div>
 				);
 			}
 
 			return (
-				<ListLogView
-					key={log.id}
-					logData={log}
-					selectedFields={selectedFields}
-					onAddToQuery={onAddToQuery}
-					onSetActiveLog={onSetActiveLog}
-					activeLog={activeLog}
-					fontSize={options.fontSize}
-					linesPerRow={options.maxLines}
-					handleChangeSelectedView={handleChangeSelectedView}
-				/>
+				<div key={log.id}>
+					<ListLogView
+						logData={log}
+						isActiveLog={activeLog?.id === log.id}
+						selectedFields={selectedFields}
+						onAddToQuery={onAddToQuery}
+						onSetActiveLog={handleSetActiveLog}
+						activeLog={activeLog}
+						fontSize={options.fontSize}
+						linesPerRow={options.maxLines}
+						handleChangeSelectedView={handleChangeSelectedView}
+						onClearActiveLog={handleCloseLogDetail}
+					/>
+				</div>
 			);
 		},
 		[
-			activeLog,
-			handleChangeSelectedView,
-			onAddToQuery,
-			onSetActiveLog,
-			options.fontSize,
 			options.format,
+			options.fontSize,
 			options.maxLines,
+			activeLog,
 			selectedFields,
+			onAddToQuery,
+			handleSetActiveLog,
+			handleChangeSelectedView,
+			handleCloseLogDetail,
 		],
 	);
 
@@ -153,6 +168,10 @@ function LogsExplorerList({
 					}}
 					infitiyTableProps={{ onEndReached }}
 					handleChangeSelectedView={handleChangeSelectedView}
+					logs={logs}
+					onSetActiveLog={handleSetActiveLog}
+					onClearActiveLog={handleCloseLogDetail}
+					activeLog={activeLog}
 				/>
 			);
 		}
@@ -199,6 +218,9 @@ function LogsExplorerList({
 		getItemContent,
 		selectedFields,
 		handleChangeSelectedView,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+		activeLog,
 	]);
 
 	const isTraceToLogsNavigation = useMemo(() => {
@@ -278,14 +300,19 @@ function LogsExplorerList({
 						{renderContent}
 					</InfinityWrapperStyled>
 
-					<LogDetail
-						selectedTab={VIEW_TYPES.OVERVIEW}
-						log={activeLog}
-						onClose={onClearActiveLog}
-						onAddToQuery={onAddToQuery}
-						onClickActionItem={onAddToQuery}
-						handleChangeSelectedView={handleChangeSelectedView}
-					/>
+					{selectedTab && activeLog && (
+						<LogDetail
+							selectedTab={selectedTab}
+							log={activeLog}
+							onClose={handleCloseLogDetail}
+							onAddToQuery={onAddToQuery}
+							onClickActionItem={onAddToQuery}
+							handleChangeSelectedView={handleChangeSelectedView}
+							logs={logs}
+							onNavigateLog={handleSetActiveLog}
+							onScrollToLog={handleScrollToLog}
+						/>
+					)}
 				</>
 			)}
 		</div>

frontend/src/container/LogsExplorerViews/index.tsx

@@ -466,7 +466,10 @@ function LogsExplorerViewsContainer({
 						</div>
 					)}
 
-				<div className="logs-explorer-views-type-content">
+				<div
+					className="logs-explorer-views-type-content"
+					data-log-detail-ignore="true"
+				>
 					{showLiveLogs && (
 						<LiveLogs handleChangeSelectedView={handleChangeSelectedView} />
 					)}

frontend/src/container/LogsPanelTable/LogsPanelComponent.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 import { UseQueryResult } from 'react-query';
 import LogDetail from 'components/LogDetail';
-import { VIEW_TYPES } from 'components/LogDetail/constants';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { ResizeTable } from 'components/ResizeTable';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -16,7 +15,7 @@ import { PANEL_TYPES } from 'constants/queryBuilder';
 import Controls from 'container/Controls';
 import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
 import { tableStyles } from 'container/TracesExplorer/ListView/styles';
-import { useActiveLog } from 'hooks/logs/useActiveLog';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
 import { useLogsData } from 'hooks/useLogsData';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { FlatLogData } from 'lib/logs/flatLogData';
@@ -83,24 +82,24 @@ function LogsPanelComponent({
 		() => logs.map((log) => FlatLogData(log) as RowData),
 		[logs],
 	);
-
 	const {
 		activeLog,
-		onSetActiveLog,
-		onClearActiveLog,
 		onAddToQuery,
-	} = useActiveLog();
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
 
 	const handleRow = useCallback(
 		(record: RowData): HTMLAttributes<RowData> => ({
 			onClick: (): void => {
 				const log = logs.find((item) => item.id === record.id);
 				if (log) {
-					onSetActiveLog(log);
+					handleSetActiveLog(log);
 				}
 			},
 		}),
-		[logs, onSetActiveLog],
+		[handleSetActiveLog, logs],
 	);
 
 	const handleRequestData = (newOffset: number): void => {
@@ -132,7 +131,7 @@ function LogsPanelComponent({
 
 	return (
 		<>
-			<div className="logs-table">
+			<div className="logs-table" data-log-detail-ignore="true">
 				<div className="resize-table">
 					<OverlayScrollbar>
 						<ResizeTable
@@ -166,15 +165,19 @@ function LogsPanelComponent({
 					</div>
 				)}
 			</div>
-			<LogDetail
-				selectedTab={VIEW_TYPES.OVERVIEW}
-				log={activeLog}
-				onClose={onClearActiveLog}
-				onAddToQuery={onAddToQuery}
-				onClickActionItem={onAddToQuery}
-				isListViewPanel
-				listViewPanelSelectedFields={widget?.selectedLogFields}
-			/>
+			{selectedTab && activeLog && (
+				<LogDetail
+					selectedTab={selectedTab}
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					isListViewPanel
+					listViewPanelSelectedFields={widget?.selectedLogFields}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+				/>
+			)}
 		</>
 	);
 }

frontend/src/container/OnboardingQuestionaire/OnboardingQuestionaire.styles.scss

@@ -477,47 +477,67 @@
 			}
 		}
 
-		.opentelemetry-radio-container {
+		.observability-tools-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
 			width: 528px;
 
-			.opentelemetry-radio-group {
-				width: 100%;
+			.observability-tool-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
 
-				.opentelemetry-radio-items-wrapper {
-					display: flex;
-					flex-direction: row;
-					flex-wrap: nowrap;
-					gap: 12px;
-					width: 100%;
+				label {
+					color: var(--l1-foreground);
+					font-size: 13px;
+					cursor: pointer;
 				}
 
-				.opentelemetry-radio-item {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					height: 32px;
-					width: calc((528px - 12px) / 2);
-					min-width: 258px;
-					flex: 0 0 calc((528px - 12px) / 2);
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
+					}
+				}
+
+				&.observability-tool-others-item {
+					.onboarding-questionaire-other-input {
+						flex: 1;
+					}
+				}
+			}
+		}
+
+		.migration-timeline-radio-container,
+		.opentelemetry-radio-container {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0 12px;
+			width: 528px;
+
+			.migration-timeline-radio-item,
+			.opentelemetry-radio-item {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				height: 32px;
+				width: calc((528px - 12px) / 2);
+				flex: 0 0 calc((528px - 12px) / 2);
+
+				label {
 					color: var(--l1-foreground);
-					font-family: Inter, sans-serif;
 					font-size: 13px;
-					font-weight: 400;
-					line-height: 1;
-					letter-spacing: -0.065px;
-					box-sizing: border-box;
+					cursor: pointer;
+				}
 
-					.ant-radio {
-						.ant-radio-inner {
-							width: 16px;
-							height: 16px;
-							border-color: var(--l3-border);
-						}
-
-						&.ant-radio-checked .ant-radio-inner {
-							border-color: var(--bg-robin-500);
-							background-color: var(--bg-robin-500);
-						}
+				button[role='radio'] {
+					&[data-state='unchecked'] {
+						border-color: var(--l3-border) !important;
+						border-width: 1px !important;
 					}
 				}
 			}
@@ -977,27 +997,6 @@
 				color: var(--bg-slate-300);
 			}
 
-			.opentelemetry-radio-container {
-				.opentelemetry-radio-group {
-					.opentelemetry-radio-items-wrapper {
-						.opentelemetry-radio-item {
-							color: var(--l1-foreground);
-
-							.ant-radio {
-								.ant-radio-inner {
-									border-color: var(--l3-border);
-								}
-
-								&.ant-radio-checked .ant-radio-inner {
-									border-color: var(--bg-robin-500);
-									background-color: var(--bg-robin-500);
-								}
-							}
-						}
-					}
-				}
-			}
-
 			.onboarding-back-button {
 				border-color: var(--text-vanilla-300);
 				color: var(--l3-foreground);

frontend/src/container/OnboardingQuestionaire/OrgQuestions/OrgQuestions.tsx

@@ -1,34 +1,27 @@
 /* eslint-disable sonarjs/cognitive-complexity */
 import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Button } from '@signozhq/button';
-import { Checkbox } from '@signozhq/checkbox';
 import { Input } from '@signozhq/input';
-import { Radio, Typography } from 'antd';
-import { RadioChangeEvent } from 'antd/es/radio';
+import {
+	RadioGroup,
+	RadioGroupItem,
+	RadioGroupLabel,
+} from '@signozhq/radio-group';
+import { Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
-import editOrg from 'api/organization/editOrg';
-import { useNotifications } from 'hooks/useNotifications';
-import { ArrowRight, Loader2 } from 'lucide-react';
-import { useAppContext } from 'providers/App/App';
+import { ArrowRight } from 'lucide-react';
 
 import '../OnboardingQuestionaire.styles.scss';
 
-export interface OrgData {
-	id: string;
-	displayName: string;
-}
-
 export interface OrgDetails {
-	organisationName: string;
 	usesObservability: boolean | null;
 	observabilityTool: string | null;
 	otherTool: string | null;
 	usesOtel: boolean | null;
+	migrationTimeline: string | null;
 }
 
 interface OrgQuestionsProps {
-	currentOrgData: OrgData | null;
 	orgDetails: OrgDetails;
 	onNext: (details: OrgDetails) => void;
 }
@@ -45,19 +38,14 @@ const observabilityTools = {
 	Others: 'Others',
 };
 
-function OrgQuestions({
-	currentOrgData,
-	orgDetails,
-	onNext,
-}: OrgQuestionsProps): JSX.Element {
-	const { updateOrg } = useAppContext();
-	const { notifications } = useNotifications();
+const migrationTimelineOptions = {
+	lessThanMonth: 'Less than a month',
+	oneToThreeMonths: '1-3 months',
+	greaterThanThreeMonths: 'Greater than 3 months',
+	justExploring: 'Just exploring',
+};
 
-	const { t } = useTranslation(['organizationsettings', 'common']);
-
-	const [organisationName, setOrganisationName] = useState<string>(
-		orgDetails?.organisationName || '',
-	);
+function OrgQuestions({ orgDetails, onNext }: OrgQuestionsProps): JSX.Element {
 	const [observabilityTool, setObservabilityTool] = useState<string | null>(
 		orgDetails?.observabilityTool || null,
 	);
@@ -66,92 +54,33 @@ function OrgQuestions({
 	);
 	const [isNextDisabled, setIsNextDisabled] = useState<boolean>(true);
 
-	useEffect(() => {
-		setOrganisationName(orgDetails.organisationName);
-	}, [orgDetails.organisationName]);
-
-	const [isLoading, setIsLoading] = useState<boolean>(false);
-
 	const [usesOtel, setUsesOtel] = useState<boolean | null>(orgDetails.usesOtel);
+	const [migrationTimeline, setMigrationTimeline] = useState<string | null>(
+		orgDetails?.migrationTimeline || null,
+	);
 
-	const handleOrgNameUpdate = async (): Promise<void> => {
+	const showMigrationQuestion =
+		observabilityTool !== null && observabilityTool !== 'None';
+
+	const handleNext = (): void => {
 		const usesObservability =
 			!observabilityTool?.includes('None') && observabilityTool !== null;
 
-		/* Early bailout if orgData is not set or if the organisation name is not set or if the organisation name is empty or if the organisation name is the same as the one in the orgData */
-		if (
-			!currentOrgData ||
-			!organisationName ||
-			organisationName === '' ||
-			orgDetails.organisationName === organisationName
-		) {
-			logEvent('Org Onboarding: Answered', {
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
+		logEvent('Org Onboarding: Answered', {
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 
-			onNext({
-				organisationName,
-				usesObservability,
-				observabilityTool,
-				otherTool,
-				usesOtel,
-			});
-
-			return;
-		}
-
-		try {
-			setIsLoading(true);
-			const { statusCode, error } = await editOrg({
-				displayName: organisationName,
-				orgId: currentOrgData.id,
-			});
-			if (statusCode === 204) {
-				updateOrg(currentOrgData?.id, organisationName);
-
-				logEvent('Org Onboarding: Org Name Updated', {
-					organisationName,
-				});
-
-				logEvent('Org Onboarding: Answered', {
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-
-				onNext({
-					organisationName,
-					usesObservability,
-					observabilityTool,
-					otherTool,
-					usesOtel,
-				});
-			} else {
-				logEvent('Org Onboarding: Org Name Update Failed', {
-					organisationName: orgDetails.organisationName,
-				});
-
-				notifications.error({
-					message:
-						error ||
-						t('something_went_wrong', {
-							ns: 'common',
-						}),
-				});
-			}
-			setIsLoading(false);
-		} catch (error) {
-			setIsLoading(false);
-			notifications.error({
-				message: t('something_went_wrong', {
-					ns: 'common',
-				}),
-			});
-		}
+		onNext({
+			usesObservability,
+			observabilityTool,
+			otherTool,
+			usesOtel,
+			migrationTimeline,
+		});
 	};
 
 	const isValidUsesObservability = (): boolean => {
@@ -173,22 +102,29 @@ function OrgQuestions({
 
 	useEffect(() => {
 		const isValidObservability = isValidUsesObservability();
+		const isMigrationValid = !showMigrationQuestion || migrationTimeline !== null;
 
-		if (organisationName !== '' && usesOtel !== null && isValidObservability) {
+		if (usesOtel !== null && isValidObservability && isMigrationValid) {
 			setIsNextDisabled(false);
 		} else {
 			setIsNextDisabled(true);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [organisationName, usesOtel, observabilityTool, otherTool]);
+	}, [
+		usesOtel,
+		observabilityTool,
+		otherTool,
+		migrationTimeline,
+		showMigrationQuestion,
+	]);
 
-	const createObservabilityToolHandler = (tool: string) => (
-		checked: boolean,
-	): void => {
-		if (checked) {
-			setObservabilityTool(tool);
-		} else if (observabilityTool === tool) {
-			setObservabilityTool(null);
+	const handleObservabilityToolChange = (value: string): void => {
+		setObservabilityTool(value);
+		if (value !== 'Others') {
+			setOtherTool('');
+		}
+		if (value === 'None') {
+			setMigrationTimeline(null);
 		}
 	};
 
@@ -196,10 +132,6 @@ function OrgQuestions({
 		setUsesOtel(value === 'yes');
 	};
 
-	const handleOnNext = (): void => {
-		handleOrgNameUpdate();
-	};
-
 	return (
 		<div className="questions-container">
 			<div className="onboarding-header-section">
@@ -214,40 +146,24 @@ function OrgQuestions({
 
 			<div className="questions-form-container">
 				<div className="questions-form">
-					<div className="form-group">
-						<label className="question" htmlFor="organisationName">
-							Name of your company
-						</label>
-						<Input
-							type="text"
-							name="organisationName"
-							id="organisationName"
-							placeholder="e.g. Simpsonville"
-							autoComplete="off"
-							value={organisationName}
-							onChange={(e): void => setOrganisationName(e.target.value)}
-						/>
-					</div>
-
 					<div className="form-group">
 						<label className="question" htmlFor="observabilityTool">
 							Which observability tool do you currently use?
 						</label>
-						<div className="observability-tools-checkbox-container">
+						<RadioGroup
+							value={observabilityTool || ''}
+							onValueChange={handleObservabilityToolChange}
+							className="observability-tools-radio-container"
+						>
 							{Object.entries(observabilityTools).map(([tool, label]) => {
 								if (tool === 'Others') {
 									return (
 										<div
 											key={tool}
-											className="checkbox-item observability-tool-checkbox-item observability-tool-others-item"
+											className="radio-item observability-tool-radio-item observability-tool-others-item"
 										>
-											<Checkbox
-												id={`checkbox-${tool}`}
-												checked={observabilityTool === tool}
-												onCheckedChange={createObservabilityToolHandler(tool)}
-												labelName={observabilityTool === 'Others' ? '' : label}
-											/>
-											{observabilityTool === 'Others' && (
+											<RadioGroupItem value={tool} id={`radio-${tool}`} />
+											{observabilityTool === 'Others' ? (
 												<Input
 													type="text"
 													className="onboarding-questionaire-other-input"
@@ -256,55 +172,60 @@ function OrgQuestions({
 													autoFocus
 													onChange={(e): void => setOtherTool(e.target.value)}
 												/>
+											) : (
+												<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 											)}
 										</div>
 									);
 								}
 								return (
-									<div
-										key={tool}
-										className="checkbox-item observability-tool-checkbox-item"
-									>
-										<Checkbox
-											id={`checkbox-${tool}`}
-											checked={observabilityTool === tool}
-											onCheckedChange={createObservabilityToolHandler(tool)}
-											labelName={label}
-										/>
+									<div key={tool} className="radio-item observability-tool-radio-item">
+										<RadioGroupItem value={tool} id={`radio-${tool}`} />
+										<RadioGroupLabel htmlFor={`radio-${tool}`}>{label}</RadioGroupLabel>
 									</div>
 								);
 							})}
-						</div>
+						</RadioGroup>
 					</div>
 
+					{showMigrationQuestion && (
+						<div className="form-group">
+							<div className="question">
+								What is your timeline for migrating to SigNoz?
+							</div>
+							<RadioGroup
+								value={migrationTimeline || ''}
+								onValueChange={setMigrationTimeline}
+								className="migration-timeline-radio-container"
+							>
+								{Object.entries(migrationTimelineOptions).map(([key, label]) => (
+									<div key={key} className="radio-item migration-timeline-radio-item">
+										<RadioGroupItem value={key} id={`radio-migration-${key}`} />
+										<RadioGroupLabel htmlFor={`radio-migration-${key}`}>
+											{label}
+										</RadioGroupLabel>
+									</div>
+								))}
+							</RadioGroup>
+						</div>
+					)}
+
 					<div className="form-group">
 						<div className="question">Do you already use OpenTelemetry?</div>
-						<div className="opentelemetry-radio-container">
-							<Radio.Group
-								value={((): string | undefined => {
-									if (usesOtel === true) {
-										return 'yes';
-									}
-									if (usesOtel === false) {
-										return 'no';
-									}
-									return undefined;
-								})()}
-								onChange={(e: RadioChangeEvent): void =>
-									handleOtelChange(e.target.value)
-								}
-								className="opentelemetry-radio-group"
-							>
-								<div className="opentelemetry-radio-items-wrapper">
-									<Radio value="yes" className="opentelemetry-radio-item">
-										Yes
-									</Radio>
-									<Radio value="no" className="opentelemetry-radio-item">
-										No
-									</Radio>
-								</div>
-							</Radio.Group>
-						</div>
+						<RadioGroup
+							value={usesOtel === true ? 'yes' : usesOtel === false ? 'no' : ''}
+							onValueChange={handleOtelChange}
+							className="opentelemetry-radio-container"
+						>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="yes" id="radio-otel-yes" />
+								<RadioGroupLabel htmlFor="radio-otel-yes">Yes</RadioGroupLabel>
+							</div>
+							<div className="radio-item opentelemetry-radio-item">
+								<RadioGroupItem value="no" id="radio-otel-no" />
+								<RadioGroupLabel htmlFor="radio-otel-no">No</RadioGroupLabel>
+							</div>
+						</RadioGroup>
 					</div>
 				</div>
 
@@ -312,15 +233,9 @@ function OrgQuestions({
 					variant="solid"
 					color="primary"
 					className={`onboarding-next-button ${isNextDisabled ? 'disabled' : ''}`}
-					onClick={handleOnNext}
+					onClick={handleNext}
 					disabled={isNextDisabled}
-					suffixIcon={
-						isLoading ? (
-							<Loader2 className="animate-spin" size={12} />
-						) : (
-							<ArrowRight size={12} />
-						)
-					}
+					suffixIcon={<ArrowRight size={12} />}
 				>
 					Next
 				</Button>

frontend/src/container/OnboardingQuestionaire/__tests__/OnboardingQuestionaire.test.tsx

@@ -69,7 +69,7 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			expect(screen.getByText(/welcome to signoz cloud/i)).toBeInTheDocument();
-			expect(screen.getByLabelText(/name of your company/i)).toBeInTheDocument();
+
 			expect(
 				screen.getByText(/which observability tool do you currently use/i),
 			).toBeInTheDocument();
@@ -86,15 +86,12 @@ describe('OnboardingQuestionaire Component', () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-
 			const datadogCheckbox = screen.getByLabelText(/datadog/i);
 			await user.click(datadogCheckbox);
 
 			const otelYes = screen.getByRole('radio', { name: /yes/i });
 			await user.click(otelYes);
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = await screen.findByRole('button', { name: /next/i });
 			expect(nextButton).not.toBeDisabled();
@@ -112,15 +109,38 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 
+		it('shows migration timeline options only when specific observability tools are selected', async () => {
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+			render(<OnboardingQuestionaire />);
+
+			// Initially not visible
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+
+			const datadogCheckbox = screen.getByLabelText(/datadog/i);
+			await user.click(datadogCheckbox);
+
+			expect(
+				await screen.findByText(/What is your timeline for migrating to SigNoz/i),
+			).toBeInTheDocument();
+
+			// Not visible when None is selected
+			const noneCheckbox = screen.getByLabelText(/none\/starting fresh/i);
+			await user.click(noneCheckbox);
+
+			expect(
+				screen.queryByText(/What is your timeline for migrating to SigNoz/i),
+			).not.toBeInTheDocument();
+		});
+
 		it('proceeds to step 2 when next is clicked', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 			render(<OnboardingQuestionaire />);
 
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 
 			const nextButton = screen.getByRole('button', { name: /next/i });
 			await user.click(nextButton);
@@ -137,11 +157,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -157,11 +176,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			await waitFor(() => {
@@ -175,11 +193,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -203,11 +220,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -232,11 +248,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate through steps 1 and 2
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -267,11 +282,10 @@ describe('OnboardingQuestionaire Component', () => {
 			render(<OnboardingQuestionaire />);
 
 			// Navigate to step 3
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
+
 			await user.click(screen.getByLabelText(/datadog/i));
 			await user.click(screen.getByRole('radio', { name: /yes/i }));
+			await user.click(screen.getByLabelText(/just exploring/i));
 			await user.click(screen.getByRole('button', { name: /next/i }));
 
 			expect(
@@ -290,40 +304,4 @@ describe('OnboardingQuestionaire Component', () => {
 			).toBeInTheDocument();
 		});
 	});
-
-	describe('Error Handling', () => {
-		it('handles organization update error gracefully', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-			server.use(
-				rest.put(EDIT_ORG_ENDPOINT, (_, res, ctx) =>
-					res(
-						ctx.status(500),
-						ctx.json({
-							error: {
-								code: 'INTERNAL_ERROR',
-								message: 'Failed to update organization',
-							},
-						}),
-					),
-				),
-			);
-
-			render(<OnboardingQuestionaire />);
-
-			const orgNameInput = screen.getByLabelText(/name of your company/i);
-			await user.clear(orgNameInput);
-			await user.type(orgNameInput, 'Test Company');
-			await user.click(screen.getByLabelText(/datadog/i));
-			await user.click(screen.getByRole('radio', { name: /yes/i }));
-
-			const nextButton = screen.getByRole('button', { name: /next/i });
-			await user.click(nextButton);
-
-			// Component should still be functional
-			await waitFor(() => {
-				expect(nextButton).not.toBeDisabled();
-			});
-		});
-	});
 });

frontend/src/container/OnboardingQuestionaire/index.tsx

@@ -23,7 +23,7 @@ import InviteTeamMembers from './InviteTeamMembers/InviteTeamMembers';
 import OptimiseSignozNeeds, {
 	OptimiseSignozDetails,
 } from './OptimiseSignozNeeds/OptimiseSignozNeeds';
-import OrgQuestions, { OrgData, OrgDetails } from './OrgQuestions/OrgQuestions';
+import OrgQuestions, { OrgDetails } from './OrgQuestions/OrgQuestions';
 
 import './OnboardingQuestionaire.styles.scss';
 
@@ -37,11 +37,11 @@ export const showErrorNotification = (
 };
 
 const INITIAL_ORG_DETAILS: OrgDetails = {
-	organisationName: '',
 	usesObservability: true,
 	observabilityTool: '',
 	otherTool: '',
 	usesOtel: null,
+	migrationTimeline: null,
 };
 
 const INITIAL_SIGNOZ_DETAILS: SignozDetails = {
@@ -79,25 +79,11 @@ function OnboardingQuestionaire(): JSX.Element {
 		InviteTeamMembersProps[] | null
 	>(null);
 
-	const [currentOrgData, setCurrentOrgData] = useState<OrgData | null>(null);
-
 	const [
 		updatingOrgOnboardingStatus,
 		setUpdatingOrgOnboardingStatus,
 	] = useState<boolean>(false);
 
-	useEffect(() => {
-		if (org) {
-			setCurrentOrgData(org[0]);
-
-			setOrgDetails({
-				...orgDetails,
-				organisationName: org[0].displayName,
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [org]);
-
 	useEffect(() => {
 		logEvent('Org Onboarding: Started', {
 			org_id: org?.[0]?.id,
@@ -175,6 +161,7 @@ function OnboardingQuestionaire(): JSX.Element {
 					? (orgDetails?.otherTool as string)
 					: (orgDetails?.observabilityTool as string),
 			where_did_you_discover_signoz: signozDetails?.discoverSignoz as string,
+			timeline_for_migrating_to_signoz: orgDetails?.migrationTimeline as string,
 			reasons_for_interest_in_signoz: signozDetails?.interestInSignoz?.includes(
 				'Others',
 			)
@@ -208,7 +195,6 @@ function OnboardingQuestionaire(): JSX.Element {
 			<div className="onboarding-questionaire-content">
 				{currentStep === 1 && (
 					<OrgQuestions
-						currentOrgData={currentOrgData}
 						orgDetails={{
 							...orgDetails,
 							usesOtel: orgDetails.usesOtel ?? null,

frontend/src/container/PanelWrapper/constants.ts

@@ -1,11 +1,11 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
+import BarPanel from 'container/DashboardContainer/visualization/panels/BarPanel/BarPanel';
+import HistogramPanel from 'container/DashboardContainer/visualization/panels/HistogramPanel/HistogramPanel';
 
 import TimeSeriesPanel from '../DashboardContainer/visualization/panels/TimeSeriesPanel/TimeSeriesPanel';
-import HistogramPanelWrapper from './HistogramPanelWrapper';
 import ListPanelWrapper from './ListPanelWrapper';
 import PiePanelWrapper from './PiePanelWrapper';
 import TablePanelWrapper from './TablePanelWrapper';
-import UplotPanelWrapper from './UplotPanelWrapper';
 import ValuePanelWrapper from './ValuePanelWrapper';
 
 export const PanelTypeVsPanelWrapper = {
@@ -16,8 +16,8 @@ export const PanelTypeVsPanelWrapper = {
 	[PANEL_TYPES.TRACE]: null,
 	[PANEL_TYPES.EMPTY_WIDGET]: null,
 	[PANEL_TYPES.PIE]: PiePanelWrapper,
-	[PANEL_TYPES.BAR]: UplotPanelWrapper,
-	[PANEL_TYPES.HISTOGRAM]: HistogramPanelWrapper,
+	[PANEL_TYPES.BAR]: BarPanel,
+	[PANEL_TYPES.HISTOGRAM]: HistogramPanel,
 };
 
 export const DEFAULT_BUCKET_COUNT = 30;

frontend/src/hooks/logs/useLogDetailHandlers.ts

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react';
+import { VIEW_TYPES } from 'components/LogDetail/constants';
+import type { UseActiveLog } from 'hooks/logs/types';
+import { useActiveLog } from 'hooks/logs/useActiveLog';
+import { ILog } from 'types/api/logs/log';
+
+type SelectedTab = typeof VIEW_TYPES[keyof typeof VIEW_TYPES] | undefined;
+
+type UseLogDetailHandlersParams = {
+	defaultTab?: SelectedTab;
+};
+
+type UseLogDetailHandlersResult = {
+	activeLog: UseActiveLog['activeLog'];
+	onAddToQuery: UseActiveLog['onAddToQuery'];
+	selectedTab: SelectedTab;
+	handleSetActiveLog: (log: ILog, selectedTab?: SelectedTab) => void;
+	handleCloseLogDetail: () => void;
+};
+
+function useLogDetailHandlers({
+	defaultTab = VIEW_TYPES.OVERVIEW,
+}: UseLogDetailHandlersParams = {}): UseLogDetailHandlersResult {
+	const {
+		activeLog,
+		onSetActiveLog,
+		onClearActiveLog,
+		onAddToQuery,
+	} = useActiveLog();
+	const [selectedTab, setSelectedTab] = useState<SelectedTab>(defaultTab);
+
+	const handleSetActiveLog = useCallback(
+		(log: ILog, nextTab: SelectedTab = defaultTab): void => {
+			if (activeLog?.id === log.id) {
+				onClearActiveLog();
+				setSelectedTab(undefined);
+				return;
+			}
+			onSetActiveLog(log);
+			setSelectedTab(nextTab ?? defaultTab);
+		},
+		[activeLog?.id, defaultTab, onClearActiveLog, onSetActiveLog],
+	);
+
+	const handleCloseLogDetail = useCallback((): void => {
+		onClearActiveLog();
+		setSelectedTab(undefined);
+	}, [onClearActiveLog]);
+
+	return {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	};
+}
+
+export default useLogDetailHandlers;

frontend/src/hooks/logs/useScrollToLog.ts

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+type UseScrollToLogParams = {
+	logs: Array<{ id: string }>;
+	virtuosoRef: React.RefObject<VirtuosoHandle | null>;
+};
+
+function useScrollToLog({
+	logs,
+	virtuosoRef,
+}: UseScrollToLogParams): (logId: string) => void {
+	return useCallback(
+		(logId: string): void => {
+			const logIndex = logs.findIndex(({ id }) => id === logId);
+			if (logIndex !== -1 && virtuosoRef.current) {
+				virtuosoRef.current.scrollToIndex({
+					index: logIndex,
+					align: 'center',
+					behavior: 'smooth',
+				});
+			}
+		},
+		[logs, virtuosoRef],
+	);
+}
+
+export default useScrollToLog;

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

@@ -0,0 +1,8 @@
+import { HistogramTooltipProps } from '../types';
+import Tooltip from './Tooltip';
+
+export default function HistogramTooltip(
+	props: HistogramTooltipProps,
+): JSX.Element {
+	return <Tooltip {...props} showTooltipHeader={false} />;
+}

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

@@ -16,12 +16,16 @@ export default function Tooltip({
 	uPlotInstance,
 	timezone,
 	content,
+	showTooltipHeader = true,
 }: TooltipProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const tooltipContent = content ?? [];
 
 	const headerTitle = useMemo(() => {
+		if (!showTooltipHeader) {
+			return null;
+		}
 		const data = uPlotInstance.data;
 		const cursorIdx = uPlotInstance.cursor.idx;
 		if (cursorIdx == null) {
@@ -30,7 +34,12 @@ export default function Tooltip({
 		return dayjs(data[0][cursorIdx] * 1000)
 			.tz(timezone)
 			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
-	}, [timezone, uPlotInstance.data, uPlotInstance.cursor.idx]);
+	}, [
+		timezone,
+		uPlotInstance.data,
+		uPlotInstance.cursor.idx,
+		showTooltipHeader,
+	]);
 
 	return (
 		<div
@@ -39,9 +48,11 @@ export default function Tooltip({
 				isDarkMode ? 'darkMode' : 'lightMode',
 			)}
 		>
-			<div className="uplot-tooltip-header">
-				<span>{headerTitle}</span>
-			</div>
+			{showTooltipHeader && (
+				<div className="uplot-tooltip-header">
+					<span>{headerTitle}</span>
+				</div>
+			)}
 			<div
 				style={{
 					height: Math.min(

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

@@ -60,6 +60,7 @@ export interface TooltipRenderArgs {
 }
 
 export interface BaseTooltipProps {
+	showTooltipHeader?: boolean;
 	timezone: string;
 	yAxisUnit?: string;
 	decimalPrecision?: PrecisionOption;
@@ -74,7 +75,14 @@ export interface BarTooltipProps extends BaseTooltipProps, TooltipRenderArgs {
 	isStackedBarChart?: boolean;
 }
 
-export type TooltipProps = TimeSeriesTooltipProps | BarTooltipProps;
+export interface HistogramTooltipProps
+	extends BaseTooltipProps,
+		TooltipRenderArgs {}
+
+export type TooltipProps =
+	| TimeSeriesTooltipProps
+	| BarTooltipProps
+	| HistogramTooltipProps;
 
 export enum LegendPosition {
 	BOTTOM = 'bottom',

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

@@ -1,4 +1,4 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
+import { SeriesVisibilityItem } from 'container/DashboardContainer/visualization/panels/types';
 import { getStoredSeriesVisibility } from 'container/DashboardContainer/visualization/panels/utils/legendVisibilityUtils';
 import { ThresholdsDrawHookOptions } from 'lib/uPlotV2/hooks/types';
 import { thresholdsDrawHook } from 'lib/uPlotV2/hooks/useThresholdsDrawHook';
@@ -7,11 +7,10 @@ import { merge } from 'lodash-es';
 import noop from 'lodash-es/noop';
 import uPlot, { Cursor, Hooks, Options } from 'uplot';
 
+import { DEFAULT_CURSOR_CONFIG, DEFAULT_PLOT_CONFIG } from '../constants';
 import {
 	ConfigBuilder,
 	ConfigBuilderProps,
-	DEFAULT_CURSOR_CONFIG,
-	DEFAULT_PLOT_CONFIG,
 	LegendItem,
 	SelectionPreferencesSource,
 } from './types';
@@ -238,7 +237,7 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 	/**
 	 * Returns stored series visibility by index from localStorage when preferences source is LOCAL_STORAGE, otherwise null.
 	 */
-	private getStoredVisibility(): SeriesVisibilityState | null {
+	private getStoredVisibility(): SeriesVisibilityItem[] | null {
 		if (
 			this.widgetId &&
 			this.selectionPreferencesSource === SelectionPreferencesSource.LOCAL_STORAGE
@@ -248,14 +247,98 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 		return null;
 	}
 
+	/**
+	 * Derive visibility resolution state from stored preferences and current series:
+	 * - visibleStoredLabels: labels that should always be visible
+	 * - hiddenStoredLabels: labels that should always be hidden
+	 * - hasActivePreference: whether a "mix" preference applies to new labels
+	 */
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	private getVisibilityResolutionState(): {
+		visibleStoredLabels: Set<string>;
+		hiddenStoredLabels: Set<string>;
+		hasActivePreference: boolean;
+	} {
+		const seriesVisibilityState = this.getStoredVisibility();
+		if (!seriesVisibilityState || seriesVisibilityState.length === 0) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference: false,
+			};
+		}
+
+		// Single pass over stored items to derive:
+		// - visibleStoredLabels: any label that is ever stored as visible
+		// - hiddenStoredLabels: labels that are only ever stored as hidden
+		// - hasMixPreference: there is at least one visible and one hidden entry
+		const visibleStoredLabels = new Set<string>();
+		const hiddenStoredLabels = new Set<string>();
+		let hasAnyVisible = false;
+		let hasAnyHidden = false;
+
+		for (const { label, show } of seriesVisibilityState) {
+			if (show) {
+				hasAnyVisible = true;
+				visibleStoredLabels.add(label);
+				// If a label is ever visible, it should not be treated as "only hidden"
+				if (hiddenStoredLabels.has(label)) {
+					hiddenStoredLabels.delete(label);
+				}
+			} else {
+				hasAnyHidden = true;
+				// Only track as hidden if we have not already seen it as visible
+				if (!visibleStoredLabels.has(label)) {
+					hiddenStoredLabels.add(label);
+				}
+			}
+		}
+
+		const hasMixPreference = hasAnyVisible && hasAnyHidden;
+
+		// Current series labels in this chart.
+		const currentSeriesLabels = this.series.map(
+			(s: UPlotSeriesBuilder) => s.getConfig().label ?? '',
+		);
+
+		// Check if any stored "visible" label exists in the current series list.
+		const hasVisibleIntersection =
+			visibleStoredLabels.size > 0 &&
+			currentSeriesLabels.some((label) => visibleStoredLabels.has(label));
+
+		// Active preference only when there is a mix AND at least one visible
+		// stored label is present in the current series list.
+		const hasActivePreference = hasMixPreference && hasVisibleIntersection;
+
+		// We apply stored visibility in two cases:
+		// - There is an active preference (mix + intersection), OR
+		// - There is no mix (all true or all false) – preserve legacy behavior.
+		const shouldApplyStoredVisibility = !hasMixPreference || hasActivePreference;
+
+		if (!shouldApplyStoredVisibility) {
+			return {
+				visibleStoredLabels: new Set<string>(),
+				hiddenStoredLabels: new Set<string>(),
+				hasActivePreference,
+			};
+		}
+
+		return {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		};
+	}
+
 	/**
 	 * Get legend items with visibility state restored from localStorage if available
 	 */
 	getLegendItems(): Record<number, LegendItem> {
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		return this.series.reduce((acc, s: UPlotSeriesBuilder, index: number) => {
 			const seriesConfig = s.getConfig();
@@ -263,11 +346,11 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			// +1 because uPlot series 0 is x-axis/time; data series are at 1, 2, ... (also matches stored visibility[0]=time, visibility[1]=first data, ...)
 			const seriesIndex = index + 1;
 			const show = resolveSeriesVisibility({
-				seriesIndex,
 				seriesShow: seriesConfig.show,
 				seriesLabel: label,
-				seriesVisibilityState,
-				isAnySeriesHidden,
+				visibleStoredLabels,
+				hiddenStoredLabels,
+				hasActivePreference,
 			});
 
 			acc[seriesIndex] = {
@@ -296,22 +379,23 @@ export class UPlotConfigBuilder extends ConfigBuilder<
 			...DEFAULT_PLOT_CONFIG,
 		};
 
-		const seriesVisibilityState = this.getStoredVisibility();
-		const isAnySeriesHidden = !!seriesVisibilityState?.visibility?.some(
-			(show) => !show,
-		);
+		const {
+			visibleStoredLabels,
+			hiddenStoredLabels,
+			hasActivePreference,
+		} = this.getVisibilityResolutionState();
 
 		config.series = [
-			{ value: (): string => '' }, // Base series for timestamp
-			...this.series.map((s, index) => {
+			{ value: (): string => '', label: 'Timestamp' }, // Base series for timestamp
+			...this.series.map((s) => {
 				const series = s.getConfig();
 				// Stored visibility[0] is x-axis/time; data series start at visibility[1]
 				const visible = resolveSeriesVisibility({
-					seriesIndex: index + 1,
 					seriesShow: series.show,
 					seriesLabel: series.label ?? '',
-					seriesVisibilityState,
-					isAnySeriesHidden,
+					visibleStoredLabels,
+					hiddenStoredLabels,
+					hasActivePreference,
 				});
 				return {
 					...series,

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

@@ -1,6 +1,7 @@
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { themeColors } from 'constants/theme';
 import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
 import {
@@ -49,7 +50,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? 2,
@@ -63,8 +64,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			lineConfig.cap = lineCap;
 		}
 
-		if (this.props.panelType === PANEL_TYPES.BAR) {
+		if (fillColor) {
+			lineConfig.fill = fillColor;
+		} else if (this.props.panelType === PANEL_TYPES.BAR) {
 			lineConfig.fill = resolvedLineColor;
+		} else if (this.props.panelType === PANEL_TYPES.HISTOGRAM) {
+			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
 		return lineConfig;
@@ -147,6 +152,8 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			pointsConfig.show = false;
 		} else if (showPoints === VisibilityMode.Always) {
 			pointsConfig.show = true;
+		} else {
+			pointsConfig.show = false; // default to hidden
 		}
 
 		return pointsConfig;
@@ -285,21 +292,16 @@ function getBarPathBuilder({
 			idx1: number,
 		): Series.Paths | null => {
 			let effectiveBarMaxWidth = barMaxWidth;
+			const widthBasedOnStepInterval = calculateWidthBasedOnStepInterval({
+				uPlotInstance: self,
+				stepInterval,
+			});
 
-			const xScale = self.scales.x as uPlot.Scale | undefined;
-			if (xScale && typeof xScale.min === 'number') {
-				const start = xScale.min as number;
-				const end = start + stepInterval;
-				const startPx = self.valToPos(start, 'x');
-				const endPx = self.valToPos(end, 'x');
-				const intervalPx = Math.abs(endPx - startPx);
-
-				if (intervalPx > 0) {
-					effectiveBarMaxWidth =
-						typeof barMaxWidth === 'number'
-							? Math.min(barMaxWidth, intervalPx)
-							: intervalPx;
-				}
+			if (widthBasedOnStepInterval > 0) {
+				effectiveBarMaxWidth = Math.min(
+					effectiveBarMaxWidth,
+					widthBasedOnStepInterval,
+				);
 			}
 
 			const barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${effectiveBarMaxWidth}`;

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

@@ -186,11 +186,10 @@ describe('UPlotConfigBuilder', () => {
 	});
 
 	it('restores visibility state from localStorage when selectionPreferencesSource is LOCAL_STORAGE', () => {
-		// Index 0 = x-axis/time; indices 1,2 = data series (Requests, Errors). resolveSeriesVisibility matches by seriesIndex + seriesLabel.
-		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue({
-			labels: ['x-axis', 'Requests', 'Errors'],
-			visibility: [true, true, false],
-		});
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
 
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',
@@ -202,7 +201,7 @@ describe('UPlotConfigBuilder', () => {
 
 		const legendItems = builder.getLegendItems();
 
-		// When any series is hidden, legend visibility is driven by the stored map
+		// When any series is hidden, visibility is driven by stored label-based preferences
 		expect(legendItems[1].show).toBe(true);
 		expect(legendItems[2].show).toBe(false);
 
@@ -213,6 +212,109 @@ describe('UPlotConfigBuilder', () => {
 		expect(secondSeries?.show).toBe(false);
 	});
 
+	it('hides new series by default when there is a mixed preference and a visible label matches current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'Requests', show: true },
+			{ label: 'Errors', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		builder.addSeries(createSeriesProps({ label: 'Requests' }));
+		builder.addSeries(createSeriesProps({ label: 'Errors' }));
+		builder.addSeries(createSeriesProps({ label: 'Latency' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Stored labels: Requests (visible), Errors (hidden).
+		// New label "Latency" should be hidden because there is a mixed preference
+		// and "Requests" (a visible stored label) is present in the current series.
+		expect(legendItems[1].label).toBe('Requests');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Errors');
+		expect(legendItems[2].show).toBe(false);
+		expect(legendItems[3].label).toBe('Latency');
+		expect(legendItems[3].show).toBe(false);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries, thirdSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('Requests');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Errors');
+		expect(secondSeries?.show).toBe(false);
+		expect(thirdSeries?.label).toBe('Latency');
+		expect(thirdSeries?.show).toBe(false);
+	});
+
+	it('shows all series when there is a mixed preference but no visible stored labels match current series', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'StoredVisible', show: true },
+			{ label: 'StoredHidden', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-1',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// None of these labels intersect with the stored visible label "StoredVisible"
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'Memory' }));
+
+		const legendItems = builder.getLegendItems();
+
+		// Mixed preference exists in storage, but since no visible labels intersect
+		// with current series, stored preferences are ignored and all are visible.
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('Memory');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('Memory');
+		expect(secondSeries?.show).toBe(true);
+	});
+
+	it('treats duplicate labels as visible when any stored entry for that label is visible', () => {
+		getStoredSeriesVisibilityMock.getStoredSeriesVisibility.mockReturnValue([
+			{ label: 'CPU', show: true },
+			{ label: 'CPU', show: false },
+		]);
+
+		const builder = new UPlotConfigBuilder({
+			widgetId: 'widget-dup',
+			selectionPreferencesSource: SelectionPreferencesSource.LOCAL_STORAGE,
+		});
+
+		// Two series with the same label; both should be visible because at least
+		// one stored entry for "CPU" is visible.
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+		builder.addSeries(createSeriesProps({ label: 'CPU' }));
+
+		const legendItems = builder.getLegendItems();
+
+		expect(legendItems[1].label).toBe('CPU');
+		expect(legendItems[1].show).toBe(true);
+		expect(legendItems[2].label).toBe('CPU');
+		expect(legendItems[2].show).toBe(true);
+
+		const config = builder.getConfig();
+		const [, firstSeries, secondSeries] = config.series ?? [];
+
+		expect(firstSeries?.label).toBe('CPU');
+		expect(firstSeries?.show).toBe(true);
+		expect(secondSeries?.label).toBe('CPU');
+		expect(secondSeries?.show).toBe(true);
+	});
+
 	it('does not attempt to read stored visibility when using in-memory preferences', () => {
 		const builder = new UPlotConfigBuilder({
 			widgetId: 'widget-1',

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

@@ -1,6 +1,6 @@
 import { PrecisionOption } from 'components/Graph/types';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import uPlot, { Cursor, Options, Series } from 'uplot';
+import uPlot, { Series } from 'uplot';
 
 import { ThresholdsDrawHookOptions } from '../hooks/types';
 
@@ -175,6 +175,7 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	pointsBuilder?: Series.Points.Show;
 	show?: boolean;
 	spanGaps?: boolean;
+	fillColor?: string;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 }
@@ -185,47 +186,3 @@ export interface LegendItem {
 	color: uPlot.Series['stroke'];
 	show: boolean;
 }
-
-export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
-	focus: {
-		alpha: 0.3,
-	},
-	cursor: {
-		focus: {
-			prox: 30,
-		},
-	},
-	legend: {
-		show: false,
-	},
-	padding: [16, 16, 8, 8],
-	series: [],
-	hooks: {},
-};
-
-const POINTS_FILL_COLOR = '#FFFFFF';
-
-export const DEFAULT_CURSOR_CONFIG: Cursor = {
-	drag: { setScale: true },
-	points: {
-		one: true,
-		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
-		width: (_u, _seriesIdx, size) => size / 4,
-		stroke: (u, seriesIdx): string => {
-			const points = u.series[seriesIdx]?.points;
-			const strokeFn =
-				typeof points?.stroke === 'function' ? points.stroke : undefined;
-			const strokeValue =
-				strokeFn !== undefined
-					? strokeFn(u, seriesIdx)
-					: typeof points?.stroke === 'string'
-					? points.stroke
-					: '';
-			return `${strokeValue}90`;
-		},
-		fill: (): string => POINTS_FILL_COLOR,
-	},
-	focus: {
-		prox: 30,
-	},
-};

frontend/src/lib/uPlotV2/constants.ts

@@ -0,0 +1,47 @@
+import { Cursor, Options } from 'uplot';
+
+const POINTS_FILL_COLOR = '#FFFFFF';
+
+export const DEFAULT_HOVER_PROX_VALUE = 30; // only snap if within 30px horizontally
+export const DEFAULT_FOCUS_PROX_VALUE = 30; // enable focus when the cursor is within 30px of the series
+
+export const DEFAULT_PLOT_CONFIG: Partial<Options> = {
+	focus: {
+		alpha: 0.3,
+	},
+	legend: {
+		show: false,
+	},
+	padding: [16, 16, 8, 8],
+	series: [],
+	hooks: {},
+};
+
+export const DEFAULT_CURSOR_CONFIG: Cursor = {
+	drag: { setScale: true },
+	points: {
+		one: true,
+		size: (u, seriesIdx) => (u.series[seriesIdx]?.points?.size ?? 0) * 3,
+		width: (_u, _seriesIdx, size) => size / 4,
+		stroke: (u, seriesIdx): string => {
+			const points = u.series[seriesIdx]?.points;
+			const strokeFn =
+				typeof points?.stroke === 'function' ? points.stroke : undefined;
+			const strokeValue =
+				strokeFn !== undefined
+					? strokeFn(u, seriesIdx)
+					: typeof points?.stroke === 'string'
+					? points.stroke
+					: '';
+			return `${strokeValue}90`;
+		},
+		fill: (): string => POINTS_FILL_COLOR,
+	},
+	focus: {
+		prox: DEFAULT_FOCUS_PROX_VALUE,
+	},
+	hover: {
+		prox: DEFAULT_HOVER_PROX_VALUE,
+		bias: 0,
+	},
+};

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

@@ -0,0 +1,17 @@
+export function calculateWidthBasedOnStepInterval({
+	uPlotInstance,
+	stepInterval,
+}: {
+	uPlotInstance: uPlot;
+	stepInterval: number;
+}): number {
+	const xScale = uPlotInstance.scales.x;
+	if (xScale && typeof xScale.min === 'number') {
+		const start = xScale.min as number;
+		const end = start + stepInterval;
+		const startPx = uPlotInstance.valToPos(start, 'x');
+		const endPx = uPlotInstance.valToPos(end, 'x');
+		return Math.abs(endPx - startPx);
+	}
+	return 0;
+}

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

@@ -11,22 +11,6 @@ import { Threshold } from '../hooks/types';
 import { findMinMaxThresholdValues } from './threshold';
 import { LogScaleLimits, RangeFunctionParams } from './types';
 
-/**
- * Rounds a number down to the nearest multiple of incr.
- * Used for linear scale min so the axis starts on a clean tick.
- */
-export function incrRoundDn(num: number, incr: number): number {
-	return Math.floor(num / incr) * incr;
-}
-
-/**
- * Rounds a number up to the nearest multiple of incr.
- * Used for linear scale max so the axis ends on a clean tick.
- */
-export function incrRoundUp(num: number, incr: number): number {
-	return Math.ceil(num / incr) * incr;
-}
-
 /**
  * Snaps min/max/softMin/softMax to valid log-scale values (powers of logBase).
  * Only applies when distribution is logarithmic; otherwise returns limits unchanged.
@@ -213,25 +197,6 @@ function getLogScaleRange(
 	);
 }
 
-/**
- * Snaps linear scale min down and max up to whole numbers so axis bounds are clean.
- */
-function roundLinearRange(minMax: Range.MinMax): Range.MinMax {
-	const [currentMin, currentMax] = minMax;
-	let roundedMin = currentMin;
-	let roundedMax = currentMax;
-
-	if (roundedMin != null) {
-		roundedMin = incrRoundDn(roundedMin, 1);
-	}
-
-	if (roundedMax != null) {
-		roundedMax = incrRoundUp(roundedMax, 1);
-	}
-
-	return [roundedMin, roundedMax];
-}
-
 /**
  * Snaps log-scale [min, max] to exact powers of logBase (nearest magnitude below/above).
  * If min and max would be equal after snapping, max is increased by one magnitude so the range is valid.
@@ -330,7 +295,6 @@ export function createRangeFunction(
 
 		if (scale.distr === 1) {
 			minMax = getLinearScaleRange(minMax, params, dataMin, dataMax);
-			minMax = roundLinearRange(minMax);
 		} else if (scale.distr === 3) {
 			minMax = getLogScaleRange(minMax, params, dataMin, dataMax, logBase);
 			const logFn = scale.log === 2 ? Math.log2 : Math.log10;

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

@@ -1,25 +1,44 @@
-import { SeriesVisibilityState } from 'container/DashboardContainer/visualization/panels/types';
-
+/**
+ * Resolve the visibility of a single series based on:
+ * - Stored per-series visibility (when applicable)
+ * - Whether there is an "active preference" (mix of visible/hidden that matches current series)
+ * - The series' own default show flag
+ */
 export function resolveSeriesVisibility({
-	seriesIndex,
 	seriesShow,
 	seriesLabel,
-	seriesVisibilityState,
-	isAnySeriesHidden,
+	visibleStoredLabels,
+	hiddenStoredLabels,
+	hasActivePreference,
 }: {
-	seriesIndex: number;
 	seriesShow: boolean | undefined | null;
 	seriesLabel: string;
-	seriesVisibilityState: SeriesVisibilityState | null;
-	isAnySeriesHidden: boolean;
+	visibleStoredLabels: Set<string> | null;
+	hiddenStoredLabels: Set<string> | null;
+	hasActivePreference: boolean;
 }): boolean {
-	if (
-		isAnySeriesHidden &&
-		seriesVisibilityState?.visibility &&
-		seriesVisibilityState.labels.length > seriesIndex &&
-		seriesVisibilityState.labels[seriesIndex] === seriesLabel
-	) {
-		return seriesVisibilityState.visibility[seriesIndex] ?? false;
+	const isStoredVisible = !!visibleStoredLabels?.has(seriesLabel);
+	const isStoredHidden = !!hiddenStoredLabels?.has(seriesLabel);
+
+	// If the label is explicitly stored as visible, always show it.
+	if (isStoredVisible) {
+		return true;
 	}
+
+	// If the label is explicitly stored as hidden (and never stored as visible),
+	// always hide it.
+	if (isStoredHidden) {
+		return false;
+	}
+
+	// "Active preference" means:
+	// - There is a mix of visible/hidden in storage, AND
+	// - At least one stored *visible* label exists in the current series list.
+	// For such a preference, any new/unknown series should be hidden by default.
+	if (hasActivePreference) {
+		return false;
+	}
+
+	// Otherwise fall back to the series' own config or show by default.
 	return seriesShow ?? true;
 }

frontend/src/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStore.test.ts

@@ -204,6 +204,78 @@ describe('dashboardVariablesStore', () => {
 			expect(doAllVariablesHaveValuesSelected).toBe(true);
 		});
 
+		it('should treat DYNAMIC variable with allSelected=true and selectedValue=undefined as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: undefined,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty string selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: '',
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
+		it('should treat DYNAMIC variable with allSelected=true and empty array selectedValue as having a value', () => {
+			setDashboardVariablesStore({
+				dashboardId: 'dash-1',
+				variables: {
+					dyn1: createVariable({
+						name: 'dyn1',
+						type: 'DYNAMIC',
+						order: 0,
+						selectedValue: [] as any,
+						allSelected: true,
+					}),
+					env: createVariable({
+						name: 'env',
+						type: 'QUERY',
+						order: 1,
+						selectedValue: 'prod',
+					}),
+				},
+			});
+
+			const { doAllVariablesHaveValuesSelected } = getVariableDependencyContext();
+			expect(doAllVariablesHaveValuesSelected).toBe(true);
+		});
+
 		it('should report false when a DYNAMIC variable has empty selectedValue and allSelected is not true', () => {
 			setDashboardVariablesStore({
 				dashboardId: 'dash-1',

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStore.ts

@@ -76,7 +76,7 @@ export function getVariableDependencyContext(): VariableFetchContext {
 		(variable) => {
 			if (
 				variable.type === 'DYNAMIC' &&
-				variable.selectedValue === null &&
+				(variable.selectedValue === null || isEmpty(variable.selectedValue)) &&
 				variable.allSelected === true
 			) {
 				return true;

frontend/src/styles.scss

@@ -567,6 +567,15 @@ body {
 		border: 1px solid var(--bg-vanilla-300);
 	}
 
+	.ant-tooltip {
+		--antd-arrow-background-color: var(--bg-vanilla-100);
+
+		.ant-tooltip-inner {
+			background-color: var(--bg-vanilla-100);
+			color: var(---bg-ink-500);
+		}
+	}
+
 	.ant-dropdown-menu {
 		border: 1px solid var(--bg-vanilla-300);
 		background: var(--bg-vanilla-100);

frontend/src/types/api/onboarding/types.ts

@@ -7,4 +7,5 @@ export interface UpdateProfileProps {
 	number_of_services: number;
 	number_of_hosts: number;
 	where_did_you_discover_signoz: string;
+	timeline_for_migrating_to_signoz: string;
 }

frontend/src/utils/logs.ts

@@ -9,10 +9,9 @@ export const getDefaultLogBackground = (
 	if (isReadOnly) {
 		return '';
 	}
-	// TODO handle the light mode here
 	return `&:hover {
     background-color: ${
-					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'var(--bg-vanilla-200)'
+					isDarkMode ? 'rgba(171, 189, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'
 				};
     }`;
 };
@@ -28,22 +27,38 @@ export const getActiveLogBackground = (
 	if (isDarkMode) {
 		switch (logType) {
 			case LogType.INFO:
-				return `background-color: ${Color.BG_ROBIN_500}10 !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
 			case LogType.WARN:
-				return `background-color: ${Color.BG_AMBER_500}10 !important;`;
+				return `background-color: ${Color.BG_AMBER_500}40 !important;`;
 			case LogType.ERROR:
-				return `background-color: ${Color.BG_CHERRY_500}10 !important;`;
+				return `background-color: ${Color.BG_CHERRY_500}40 !important;`;
 			case LogType.TRACE:
-				return `background-color: ${Color.BG_FOREST_400}10 !important;`;
+				return `background-color: ${Color.BG_FOREST_400}40 !important;`;
 			case LogType.DEBUG:
-				return `background-color: ${Color.BG_AQUA_500}10 !important;`;
+				return `background-color: ${Color.BG_AQUA_500}40 !important;`;
 			case LogType.FATAL:
-				return `background-color: ${Color.BG_SAKURA_500}10 !important;`;
+				return `background-color: ${Color.BG_SAKURA_500}40 !important;`;
 			default:
-				return `background-color: ${Color.BG_SLATE_200} !important;`;
+				return `background-color: ${Color.BG_ROBIN_500}40 !important;`;
 		}
 	}
-	return `background-color: ${Color.BG_VANILLA_400}!important; color: ${Color.TEXT_SLATE_400} !important;`;
+	// Light mode - use lighter background colors
+	switch (logType) {
+		case LogType.INFO:
+			return `background-color: ${Color.BG_ROBIN_100} !important;`;
+		case LogType.WARN:
+			return `background-color: ${Color.BG_AMBER_100} !important;`;
+		case LogType.ERROR:
+			return `background-color: ${Color.BG_CHERRY_100} !important;`;
+		case LogType.TRACE:
+			return `background-color: ${Color.BG_FOREST_200} !important;`;
+		case LogType.DEBUG:
+			return `background-color: ${Color.BG_AQUA_100} !important;`;
+		case LogType.FATAL:
+			return `background-color: ${Color.BG_SAKURA_100} !important;`;
+		default:
+			return `background-color: ${Color.BG_VANILLA_300} !important;`;
+	}
 };
 
 export const getHightLightedLogBackground = (

frontend/src/utils/round.ts

@@ -3,3 +3,33 @@
  * Example: 1.5 → 2, 1.49 → 1
  */
 export const roundHalfUp = (value: number): number => Math.floor(value + 0.5);
+
+/**
+ * Rounds a number down to the nearest multiple of incr.
+ * Used for linear scale min so the axis starts on a clean tick.
+ */
+export function incrRoundDn(num: number, incr: number): number {
+	return Math.floor(num / incr) * incr;
+}
+
+/**
+ * Rounds a number up to the nearest multiple of incr.
+ * Used for linear scale max so the axis ends on a clean tick.
+ */
+export function incrRoundUp(num: number, incr: number): number {
+	return Math.ceil(num / incr) * incr;
+}
+
+/**
+ * Rounds a number to the nearest multiple of 10^dec.
+ * Used for decimal precision.
+ */
+export function roundDecimals(val: number, dec = 0): number {
+	if (Number.isInteger(val)) {
+		return val;
+	}
+
+	const p = 10 ** dec;
+	const n = val * p * (1 + Number.EPSILON);
+	return Math.round(n) / p;
+}

frontend/yarn.lock

@@ -4073,6 +4073,16 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-collection@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
+  integrity sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-compose-refs@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -4159,6 +4169,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.1.tgz#39e5a5769e676c753204b792fbe6cf508e550a14"
+  integrity sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==
+
 "@radix-ui/react-dismissable-layer@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
@@ -4387,6 +4402,22 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.4"
 
+"@radix-ui/react-radio-group@^1.3.4":
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz#93f102b5b948d602c2f2adb1bc5c347cbaf64bd9"
+  integrity sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-use-size" "1.1.1"
+
 "@radix-ui/react-roving-focus@1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
@@ -4403,6 +4434,21 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.1"
 
+"@radix-ui/react-roving-focus@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz#ef54384b7361afc6480dcf9907ef2fedb5080fd9"
+  integrity sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-slot@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
@@ -5075,6 +5121,20 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
+"@signozhq/radio-group@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@signozhq/radio-group/-/radio-group-0.0.2.tgz#4b13567bfee2645226f2cf41f261bbb288e1be4b"
+  integrity sha512-ahykmA5hPujOC964CFveMlQ12tWSyut2CUiFRqT1QxRkOLS2R44Qn2hh2psqJJ18JMX/24ZYCAIh9Bdd5XW+7g==
+  dependencies:
+    "@radix-ui/react-icons" "^1.3.0"
+    "@radix-ui/react-radio-group" "^1.3.4"
+    "@radix-ui/react-slot" "^1.1.0"
+    class-variance-authority "^0.7.0"
+    clsx "^2.1.1"
+    lucide-react "^0.445.0"
+    tailwind-merge "^2.5.2"
+    tailwindcss-animate "^1.0.7"
+
 "@signozhq/resizable@0.0.0":
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/@signozhq/resizable/-/resizable-0.0.0.tgz#a517818b9f9bcdaeafc55ae134be86522bc90e9f"

pkg/flagger/registry.go

@@ -3,9 +3,8 @@ package flagger
 import "github.com/SigNoz/signoz/pkg/types/featuretypes"
 
 var (
-	FeatureUseSpanMetrics       = featuretypes.MustNewName("use_span_metrics")
-	FeatureInterpolationEnabled = featuretypes.MustNewName("interpolation_enabled")
-	FeatureKafkaSpanEval        = featuretypes.MustNewName("kafka_span_eval")
+	FeatureUseSpanMetrics = featuretypes.MustNewName("use_span_metrics")
+	FeatureKafkaSpanEval  = featuretypes.MustNewName("kafka_span_eval")
 )
 
 func MustNewRegistry() featuretypes.Registry {
@@ -18,14 +17,6 @@ func MustNewRegistry() featuretypes.Registry {
 			DefaultVariant: featuretypes.MustNewName("disabled"),
 			Variants:       featuretypes.NewBooleanVariants(),
 		},
-		&featuretypes.Feature{
-			Name:           FeatureInterpolationEnabled,
-			Kind:           featuretypes.KindBoolean,
-			Stage:          featuretypes.StageExperimental,
-			Description:    "Controls whether to enable interpolation",
-			DefaultVariant: featuretypes.MustNewName("disabled"),
-			Variants:       featuretypes.NewBooleanVariants(),
-		},
 		&featuretypes.Feature{
 			Name:           FeatureKafkaSpanEval,
 			Kind:           featuretypes.KindBoolean,

pkg/modules/organization/implorganization/getter.go

@@ -30,3 +30,7 @@ func (module *getter) ListByOwnedKeyRange(ctx context.Context) ([]*types.Organiz
 
 	return module.store.ListByKeyRange(ctx, start, end)
 }
+
+func (module *getter) GetByName(ctx context.Context, name string) (*types.Organization, error) {
+	return module.store.GetByName(ctx, name)
+}

pkg/modules/organization/implorganization/store.go

@@ -47,6 +47,22 @@ func (store *store) Get(ctx context.Context, id valuer.UUID) (*types.Organizatio
 	return organization, nil
 }
 
+func (store *store) GetByName(ctx context.Context, name string) (*types.Organization, error) {
+	organization := new(types.Organization)
+	err := store.
+		sqlstore.
+		BunDB().
+		NewSelect().
+		Model(organization).
+		Where("name = ?", name).
+		Scan(ctx)
+	if err != nil {
+		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrOrganizationNotFound, "organization with name %s does not exist", name)
+	}
+
+	return organization, nil
+}
+
 func (store *store) GetAll(ctx context.Context) ([]*types.Organization, error) {
 	organizations := make([]*types.Organization, 0)
 	err := store.

pkg/modules/organization/organization.go

@@ -14,6 +14,9 @@ type Getter interface {
 
 	// ListByOwnedKeyRange gets all the organizations owned by the instance
 	ListByOwnedKeyRange(context.Context) ([]*types.Organization, error)
+
+	// Gets the organization by name
+	GetByName(context.Context, string) (*types.Organization, error)
 }
 
 type Setter interface {

pkg/modules/session/implsession/module.go

@@ -151,6 +151,10 @@ func (module *module) CreateCallbackAuthNSession(ctx context.Context, authNProvi
 		return "", err
 	}
 
+	if err := user.ErrIfRoot(); err != nil {
+		return "", errors.WithAdditionalf(err, "root user can only authenticate via password")
+	}
+
 	token, err := module.tokenizer.CreateToken(ctx, authtypes.NewIdentity(user.ID, user.OrgID, user.Email, user.Role), map[string]string{})
 	if err != nil {
 		return "", err

pkg/modules/user/config.go

@@ -5,11 +5,26 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/valuer"
 )
 
 type Config struct {
 	Password PasswordConfig `mapstructure:"password"`
+	Root     RootConfig     `mapstructure:"root"`
 }
+
+type RootConfig struct {
+	Enabled  bool         `mapstructure:"enabled"`
+	Email    valuer.Email `mapstructure:"email"`
+	Password string       `mapstructure:"password"`
+	Org      OrgConfig    `mapstructure:"org"`
+}
+
+type OrgConfig struct {
+	Name string `mapstructure:"name"`
+}
+
 type PasswordConfig struct {
 	Reset ResetConfig `mapstructure:"reset"`
 }
@@ -31,6 +46,12 @@ func newConfig() factory.Config {
 				MaxTokenLifetime: 6 * time.Hour,
 			},
 		},
+		Root: RootConfig{
+			Enabled: false,
+			Org: OrgConfig{
+				Name: "default",
+			},
+		},
 	}
 }
 
@@ -39,5 +60,17 @@ func (c Config) Validate() error {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::password::reset::max_token_lifetime must be positive")
 	}
 
+	if c.Root.Enabled {
+		if c.Root.Email.IsZero() {
+			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::email is required when root user is enabled")
+		}
+		if c.Root.Password == "" {
+			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::password is required when root user is enabled")
+		}
+		if !types.IsPasswordValid(c.Root.Password) {
+			return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "user::root::password does not meet password requirements")
+		}
+	}
+
 	return nil
 }

pkg/modules/user/impluser/getter.go

@@ -16,6 +16,10 @@ func NewGetter(store types.UserStore) user.Getter {
 	return &getter{store: store}
 }
 
+func (module *getter) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
+	return module.store.GetRootUserByOrgID(ctx, orgID)
+}
+
 func (module *getter) ListByOrgID(ctx context.Context, orgID valuer.UUID) ([]*types.User, error) {
 	users, err := module.store.ListUsersByOrgID(ctx, orgID)
 	if err != nil {

pkg/modules/user/impluser/module.go

@@ -103,6 +103,12 @@ func (m *Module) CreateBulkInvite(ctx context.Context, orgID valuer.UUID, userID
 			return nil, err
 		}
 
+		if existingUser != nil {
+			if err := existingUser.ErrIfRoot(); err != nil {
+				return nil, errors.WithAdditionalf(err, "cannot send invite to root user")
+			}
+		}
+
 		if existingUser != nil {
 			return nil, errors.New(errors.TypeAlreadyExists, errors.CodeAlreadyExists, "User already exists with the same email")
 		}
@@ -202,27 +208,21 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		return nil, err
 	}
 
+	if err := existingUser.ErrIfRoot(); err != nil {
+		return nil, errors.WithAdditionalf(err, "cannot update root user")
+	}
+
 	requestor, err := m.store.GetUser(ctx, valuer.MustNewUUID(updatedBy))
 	if err != nil {
 		return nil, err
 	}
 
-	// only displayName, role can be updated
-	if user.DisplayName == "" {
-		user.DisplayName = existingUser.DisplayName
-	}
-
-	if user.Role == "" {
-		user.Role = existingUser.Role
-	}
-
-	if user.Role != existingUser.Role && requestor.Role != types.RoleAdmin {
+	if user.Role != "" && user.Role != existingUser.Role && requestor.Role != types.RoleAdmin {
 		return nil, errors.New(errors.TypeForbidden, errors.CodeForbidden, "only admins can change roles")
 	}
 
-	// Make sure that th e request is not demoting the last admin user.
-	// also an admin user can only change role of their own or other user
-	if user.Role != existingUser.Role && existingUser.Role == types.RoleAdmin {
+	// Make sure that the request is not demoting the last admin user.
+	if user.Role != "" && user.Role != existingUser.Role && existingUser.Role == types.RoleAdmin {
 		adminUsers, err := m.store.GetUsersByRoleAndOrgID(ctx, types.RoleAdmin, orgID)
 		if err != nil {
 			return nil, err
@@ -233,7 +233,7 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		}
 	}
 
-	if user.Role != existingUser.Role {
+	if user.Role != "" && user.Role != existingUser.Role {
 		err = m.authz.ModifyGrant(ctx,
 			orgID,
 			roletypes.MustGetSigNozManagedRoleFromExistingRole(existingUser.Role),
@@ -245,23 +245,28 @@ func (m *Module) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, u
 		}
 	}
 
-	user.UpdatedAt = time.Now()
-	updatedUser, err := m.store.UpdateUser(ctx, orgID, id, user)
-	if err != nil {
+	existingUser.Update(user.DisplayName, user.Role)
+	if err := m.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
 		return nil, err
 	}
 
-	traits := types.NewTraitsFromUser(updatedUser)
-	m.analytics.IdentifyUser(ctx, user.OrgID.String(), user.ID.String(), traits)
+	return existingUser, nil
+}
 
-	traits["updated_by"] = updatedBy
-	m.analytics.TrackUser(ctx, user.OrgID.String(), user.ID.String(), "User Updated", traits)
-
-	if err := m.tokenizer.DeleteIdentity(ctx, valuer.MustNewUUID(id)); err != nil {
-		return nil, err
+func (module *Module) UpdateAnyUser(ctx context.Context, orgID valuer.UUID, user *types.User) error {
+	if err := module.store.UpdateUser(ctx, orgID, user); err != nil {
+		return err
 	}
 
-	return updatedUser, nil
+	traits := types.NewTraitsFromUser(user)
+	module.analytics.IdentifyUser(ctx, user.OrgID.String(), user.ID.String(), traits)
+	module.analytics.TrackUser(ctx, user.OrgID.String(), user.ID.String(), "User Updated", traits)
+
+	if err := module.tokenizer.DeleteIdentity(ctx, user.ID); err != nil {
+		return err
+	}
+
+	return nil
 }
 
 func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id string, deletedBy string) error {
@@ -270,6 +275,10 @@ func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id stri
 		return err
 	}
 
+	if err := user.ErrIfRoot(); err != nil {
+		return errors.WithAdditionalf(err, "cannot delete root user")
+	}
+
 	if slices.Contains(types.AllIntegrationUserEmails, types.IntegrationUserEmail(user.Email.String())) {
 		return errors.New(errors.TypeForbidden, errors.CodeForbidden, "integration user cannot be deleted")
 	}
@@ -302,6 +311,15 @@ func (module *Module) DeleteUser(ctx context.Context, orgID valuer.UUID, id stri
 }
 
 func (module *Module) GetOrCreateResetPasswordToken(ctx context.Context, userID valuer.UUID) (*types.ResetPasswordToken, error) {
+	user, err := module.store.GetUser(ctx, userID)
+	if err != nil {
+		return nil, err
+	}
+
+	if err := user.ErrIfRoot(); err != nil {
+		return nil, errors.WithAdditionalf(err, "cannot reset password for root user")
+	}
+
 	password, err := module.store.GetPasswordByUserID(ctx, userID)
 	if err != nil {
 		if !errors.Ast(err, errors.TypeNotFound) {
@@ -364,6 +382,10 @@ func (module *Module) ForgotPassword(ctx context.Context, orgID valuer.UUID, ema
 		return err
 	}
 
+	if err := user.ErrIfRoot(); err != nil {
+		return errors.WithAdditionalf(err, "cannot reset password for root user")
+	}
+
 	token, err := module.GetOrCreateResetPasswordToken(ctx, user.ID)
 	if err != nil {
 		module.settings.Logger().ErrorContext(ctx, "failed to create reset password token", "error", err)
@@ -407,6 +429,15 @@ func (module *Module) UpdatePasswordByResetPasswordToken(ctx context.Context, to
 		return err
 	}
 
+	user, err := module.store.GetUser(ctx, valuer.MustNewUUID(password.UserID))
+	if err != nil {
+		return err
+	}
+
+	if err := user.ErrIfRoot(); err != nil {
+		return errors.WithAdditionalf(err, "cannot reset password for root user")
+	}
+
 	if err := password.Update(passwd); err != nil {
 		return err
 	}
@@ -415,6 +446,15 @@ func (module *Module) UpdatePasswordByResetPasswordToken(ctx context.Context, to
 }
 
 func (module *Module) UpdatePassword(ctx context.Context, userID valuer.UUID, oldpasswd string, passwd string) error {
+	user, err := module.store.GetUser(ctx, userID)
+	if err != nil {
+		return err
+	}
+
+	if err := user.ErrIfRoot(); err != nil {
+		return errors.WithAdditionalf(err, "cannot change password for root user")
+	}
+
 	password, err := module.store.GetPasswordByUserID(ctx, userID)
 	if err != nil {
 		return err
@@ -476,7 +516,7 @@ func (m *Module) RevokeAPIKey(ctx context.Context, id, removedByUserID valuer.UU
 }
 
 func (module *Module) CreateFirstUser(ctx context.Context, organization *types.Organization, name string, email valuer.Email, passwd string) (*types.User, error) {
-	user, err := types.NewUser(name, email, types.RoleAdmin, organization.ID)
+	user, err := types.NewRootUser(name, email, organization.ID)
 	if err != nil {
 		return nil, err
 	}

pkg/modules/user/impluser/service.go

@@ -0,0 +1,187 @@
+package impluser
+
+import (
+	"context"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/authz"
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/modules/organization"
+	"github.com/SigNoz/signoz/pkg/modules/user"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/roletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type service struct {
+	settings  factory.ScopedProviderSettings
+	store     types.UserStore
+	module    user.Module
+	orgGetter organization.Getter
+	authz     authz.AuthZ
+	config    user.RootConfig
+	stopC     chan struct{}
+}
+
+func NewService(
+	providerSettings factory.ProviderSettings,
+	store types.UserStore,
+	module user.Module,
+	orgGetter organization.Getter,
+	authz authz.AuthZ,
+	config user.RootConfig,
+) user.Service {
+	return &service{
+		settings:  factory.NewScopedProviderSettings(providerSettings, "go.signoz.io/pkg/modules/user"),
+		store:     store,
+		module:    module,
+		orgGetter: orgGetter,
+		authz:     authz,
+		config:    config,
+		stopC:     make(chan struct{}),
+	}
+}
+
+func (s *service) Start(ctx context.Context) error {
+	if !s.config.Enabled {
+		<-s.stopC
+		return nil
+	}
+
+	ticker := time.NewTicker(10 * time.Second)
+	defer ticker.Stop()
+
+	for {
+		err := s.reconcile(ctx)
+		if err == nil {
+			s.settings.Logger().InfoContext(ctx, "root user reconciliation completed successfully")
+			<-s.stopC
+			return nil
+		}
+
+		s.settings.Logger().WarnContext(ctx, "root user reconciliation failed, retrying", "error", err)
+
+		select {
+		case <-s.stopC:
+			return nil
+		case <-ticker.C:
+			continue
+		}
+	}
+}
+
+func (s *service) Stop(ctx context.Context) error {
+	close(s.stopC)
+	return nil
+}
+
+func (s *service) reconcile(ctx context.Context) error {
+	org, err := s.orgGetter.GetByName(ctx, s.config.Org.Name)
+	if err != nil {
+		if errors.Ast(err, errors.TypeNotFound) {
+			newOrg := types.NewOrganization(s.config.Org.Name, s.config.Org.Name)
+			_, err := s.module.CreateFirstUser(ctx, newOrg, s.config.Email.String(), s.config.Email, s.config.Password)
+			return err
+		}
+
+		return err
+	}
+
+	return s.reconcileRootUser(ctx, org.ID)
+}
+
+func (s *service) reconcileRootUser(ctx context.Context, orgID valuer.UUID) error {
+	existingRoot, err := s.store.GetRootUserByOrgID(ctx, orgID)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return err
+	}
+
+	if existingRoot == nil {
+		return s.createOrPromoteRootUser(ctx, orgID)
+	}
+
+	return s.updateExistingRootUser(ctx, orgID, existingRoot)
+}
+
+func (s *service) createOrPromoteRootUser(ctx context.Context, orgID valuer.UUID) error {
+	existingUser, err := s.store.GetUserByEmailAndOrgID(ctx, s.config.Email, orgID)
+	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
+		return err
+	}
+
+	if existingUser != nil {
+		oldRole := existingUser.Role
+
+		existingUser.PromoteToRoot()
+		if err := s.module.UpdateAnyUser(ctx, orgID, existingUser); err != nil {
+			return err
+		}
+
+		if oldRole != types.RoleAdmin {
+			if err := s.authz.ModifyGrant(ctx,
+				orgID,
+				roletypes.MustGetSigNozManagedRoleFromExistingRole(oldRole),
+				roletypes.MustGetSigNozManagedRoleFromExistingRole(types.RoleAdmin),
+				authtypes.MustNewSubject(authtypes.TypeableUser, existingUser.ID.StringValue(), orgID, nil),
+			); err != nil {
+				return err
+			}
+		}
+
+		return s.setPassword(ctx, existingUser.ID)
+	}
+
+	// Create new root user
+	newUser, err := types.NewRootUser(s.config.Email.String(), s.config.Email, orgID)
+	if err != nil {
+		return err
+	}
+
+	factorPassword, err := types.NewFactorPassword(s.config.Password, newUser.ID.StringValue())
+	if err != nil {
+		return err
+	}
+
+	return s.module.CreateUser(ctx, newUser, user.WithFactorPassword(factorPassword))
+}
+
+func (s *service) updateExistingRootUser(ctx context.Context, orgID valuer.UUID, existingRoot *types.User) error {
+	existingRoot.PromoteToRoot()
+
+	if existingRoot.Email != s.config.Email {
+		existingRoot.UpdateEmail(s.config.Email)
+		if err := s.module.UpdateAnyUser(ctx, orgID, existingRoot); err != nil {
+			return err
+		}
+	}
+
+	return s.setPassword(ctx, existingRoot.ID)
+}
+
+func (s *service) setPassword(ctx context.Context, userID valuer.UUID) error {
+	password, err := s.store.GetPasswordByUserID(ctx, userID)
+	if err != nil {
+		if !errors.Ast(err, errors.TypeNotFound) {
+			return err
+		}
+
+		factorPassword, err := types.NewFactorPassword(s.config.Password, userID.StringValue())
+		if err != nil {
+			return err
+		}
+
+		return s.store.CreatePassword(ctx, factorPassword)
+	}
+
+	if !password.Equals(s.config.Password) {
+		if err := password.Update(s.config.Password); err != nil {
+			return err
+		}
+
+		return s.store.UpdatePassword(ctx, password)
+	}
+
+	return nil
+}

pkg/modules/user/impluser/store.go

@@ -210,20 +210,24 @@ func (store *store) GetUsersByRoleAndOrgID(ctx context.Context, role types.Role,
 	return users, nil
 }
 
-func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, id string, user *types.User) (*types.User, error) {
-	user.UpdatedAt = time.Now()
-	_, err := store.sqlstore.BunDB().NewUpdate().
+func (store *store) UpdateUser(ctx context.Context, orgID valuer.UUID, user *types.User) error {
+	_, err := store.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewUpdate().
 		Model(user).
 		Column("display_name").
+		Column("email").
 		Column("role").
+		Column("is_root").
 		Column("updated_at").
-		Where("id = ?", id).
 		Where("org_id = ?", orgID).
+		Where("id = ?", user.ID).
 		Exec(ctx)
 	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "user with id: %s does not exist in org: %s", id, orgID)
+		return store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "user does not exist in org: %s", orgID)
 	}
-	return user, nil
+	return nil
 }
 
 func (store *store) ListUsersByOrgID(ctx context.Context, orgID valuer.UUID) ([]*types.GettableUser, error) {
@@ -602,6 +606,22 @@ func (store *store) RunInTx(ctx context.Context, cb func(ctx context.Context) er
 	})
 }
 
+func (store *store) GetRootUserByOrgID(ctx context.Context, orgID valuer.UUID) (*types.User, error) {
+	user := new(types.User)
+	err := store.
+		sqlstore.
+		BunDBCtx(ctx).
+		NewSelect().
+		Model(user).
+		Where("org_id = ?", orgID).
+		Where("is_root = ?", true).
+		Scan(ctx)
+	if err != nil {
+		return nil, store.sqlstore.WrapNotFoundErrf(err, types.ErrCodeUserNotFound, "root user for org %s not found", orgID)
+	}
+	return user, nil
+}
+
 func (store *store) ListUsersByEmailAndOrgIDs(ctx context.Context, email valuer.Email, orgIDs []valuer.UUID) ([]*types.User, error) {
 	users := []*types.User{}
 	err := store.

pkg/modules/user/service.go

@@ -0,0 +1,7 @@
+package user
+
+import "github.com/SigNoz/signoz/pkg/factory"
+
+type Service interface {
+	factory.Service
+}

pkg/modules/user/user.go

@@ -34,6 +34,9 @@ type Module interface {
 	ForgotPassword(ctx context.Context, orgID valuer.UUID, email valuer.Email, frontendBaseURL string) error
 
 	UpdateUser(ctx context.Context, orgID valuer.UUID, id string, user *types.User, updatedBy string) (*types.User, error)
+
+	// UpdateAnyUser updates a user and persists the changes to the database along with the analytics and identity deletion.
+	UpdateAnyUser(ctx context.Context, orgID valuer.UUID, user *types.User) error
 	DeleteUser(ctx context.Context, orgID valuer.UUID, id string, deletedBy string) error
 
 	// invite
@@ -54,6 +57,9 @@ type Module interface {
 }
 
 type Getter interface {
+	// Get root user by org id.
+	GetRootUserByOrgID(context.Context, valuer.UUID) (*types.User, error)
+
 	// Get gets the users based on the given id
 	ListByOrgID(context.Context, valuer.UUID) ([]*types.User, error)
 

pkg/query-service/app/http_handler.go

@@ -183,7 +183,7 @@ type APIHandlerOpts struct {
 }
 
 // NewAPIHandler returns an APIHandler
-func NewAPIHandler(opts APIHandlerOpts) (*APIHandler, error) {
+func NewAPIHandler(opts APIHandlerOpts, config signoz.Config) (*APIHandler, error) {
 	querierOpts := querier.QuerierOptions{
 		Reader:       opts.Reader,
 		Cache:        opts.Signoz.Cache,
@@ -270,6 +270,11 @@ func NewAPIHandler(opts APIHandlerOpts) (*APIHandler, error) {
 		}
 	}
 
+	// If the root user is enabled, the setup is complete
+	if config.User.Root.Enabled {
+		aH.SetupCompleted = true
+	}
+
 	aH.Upgrader = &websocket.Upgrader{
 		CheckOrigin: func(r *http.Request) bool {
 			return true
@@ -2045,7 +2050,7 @@ func (aH *APIHandler) registerUser(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	organization := types.NewOrganization(req.OrgDisplayName)
+	organization := types.NewOrganization(req.OrgDisplayName, req.OrgName)
 	user, errv2 := aH.Signoz.Modules.User.CreateFirstUser(r.Context(), organization, req.Name, req.Email, req.Password)
 	if errv2 != nil {
 		render.Error(w, errv2)

pkg/query-service/app/server.go

@@ -135,7 +135,7 @@ func NewServer(config signoz.Config, signoz *signoz.SigNoz) (*Server, error) {
 		Signoz:                        signoz,
 		QuerierAPI:                    querierAPI.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.Querier, signoz.Analytics),
 		QueryParserAPI:                queryparser.NewAPI(signoz.Instrumentation.ToProviderSettings(), signoz.QueryParser),
-	})
+	}, config)
 	if err != nil {
 		return nil, err
 	}

pkg/query-service/converter/converter.go

@@ -43,11 +43,11 @@ var (
 // FromUnit returns a converter for the given unit
 func FromUnit(u Unit) Converter {
 	switch u {
-	case "ns", "us", "µs", "ms", "s", "m", "h", "d", "min":
+	case "ns", "us", "µs", "ms", "s", "m", "h", "d", "min", "w", "wk":
 		return DurationConverter
-	case "bytes", "decbytes", "bits", "decbits", "kbytes", "decKbytes", "deckbytes", "mbytes", "decMbytes", "decmbytes", "gbytes", "decGbytes", "decgbytes", "tbytes", "decTbytes", "dectbytes", "pbytes", "decPbytes", "decpbytes", "By", "kBy", "MBy", "GBy", "TBy", "PBy":
+	case "bytes", "decbytes", "bits", "bit", "decbits", "kbytes", "decKbytes", "deckbytes", "mbytes", "decMbytes", "decmbytes", "gbytes", "decGbytes", "decgbytes", "tbytes", "decTbytes", "dectbytes", "pbytes", "decPbytes", "decpbytes", "By", "kBy", "MBy", "GBy", "TBy", "PBy", "EBy", "ZBy", "YBy", "KiBy", "MiBy", "GiBy", "TiBy", "PiBy", "EiBy", "ZiBy", "YiBy", "kbit", "Mbit", "Gbit", "Tbit", "Pbit", "Ebit", "Zbit", "Ybit", "Kibit", "Mibit", "Gibit", "Tibit", "Pibit":
 		return DataConverter
-	case "binBps", "Bps", "binbps", "bps", "KiBs", "Kibits", "KBs", "Kbits", "MiBs", "Mibits", "MBs", "Mbits", "GiBs", "Gibits", "GBs", "Gbits", "TiBs", "Tibits", "TBs", "Tbits", "PiBs", "Pibits", "PBs", "Pbits", "By/s", "kBy/s", "MBy/s", "GBy/s", "TBy/s", "PBy/s", "bit/s", "kbit/s", "Mbit/s", "Gbit/s", "Tbit/s", "Pbit/s":
+	case "binBps", "Bps", "binbps", "bps", "KiBs", "Kibits", "KBs", "Kbits", "MiBs", "Mibits", "MBs", "Mbits", "GiBs", "Gibits", "GBs", "Gbits", "TiBs", "Tibits", "TBs", "Tbits", "PiBs", "Pibits", "PBs", "Pbits", "By/s", "kBy/s", "MBy/s", "GBy/s", "TBy/s", "PBy/s", "EBy/s", "ZBy/s", "YBy/s", "bit/s", "kbit/s", "Mbit/s", "Gbit/s", "Tbit/s", "Pbit/s", "Ebit/s", "Zbit/s", "Ybit/s", "KiBy/s", "MiBy/s", "GiBy/s", "TiBy/s", "PiBy/s", "EiBy/s", "ZiBy/s", "YiBy/s", "Kibit/s", "Mibit/s", "Gibit/s", "Tibit/s", "Pibit/s", "Eibit/s", "Zibit/s", "Yibit/s":
 		return DataRateConverter
 	case "percent", "percentunit", "%":
 		return PercentConverter

pkg/query-service/converter/data.go

@@ -58,36 +58,80 @@ func (*dataConverter) Name() string {
 	return "data"
 }
 
+// Notation followed by UCUM:
+// https://ucum.org/ucum
+// kibi = Ki, mebi = Mi, gibi = Gi, tebi = Ti, pibi = Pi
+// kilo = k, mega = M, giga = G, tera = T, peta = P
+// exa = E, zetta = Z, yotta = Y
+// byte = By, bit = bit
 func FromDataUnit(u Unit) float64 {
 	switch u {
 	case "bytes", "By": // base 2
 		return Byte
 	case "decbytes": // base 10
 		return Byte
-	case "bits": // base 2
+	case "bits", "bit": // base 2
 		return Bit
 	case "decbits": // base 10
 		return Bit
-	case "kbytes", "kBy": // base 2
+	case "kbytes", "KiBy": // base 2
 		return Kibibyte
-	case "decKbytes", "deckbytes": // base 10
+	case "decKbytes", "deckbytes", "kBy": // base 10
 		return Kilobyte
-	case "mbytes", "MBy": // base 2
+	case "mbytes", "MiBy": // base 2
 		return Mebibyte
-	case "decMbytes", "decmbytes": // base 10
+	case "decMbytes", "decmbytes", "MBy": // base 10
 		return Megabyte
-	case "gbytes", "GBy": // base 2
+	case "gbytes", "GiBy": // base 2
 		return Gibibyte
-	case "decGbytes", "decgbytes": // base 10
+	case "decGbytes", "decgbytes", "GBy": // base 10
 		return Gigabyte
-	case "tbytes", "TBy": // base 2
+	case "tbytes", "TiBy": // base 2
 		return Tebibyte
-	case "decTbytes", "dectbytes": // base 10
+	case "decTbytes", "dectbytes", "TBy": // base 10
 		return Terabyte
-	case "pbytes", "PBy": // base 2
+	case "pbytes", "PiBy": // base 2
 		return Pebibyte
-	case "decPbytes", "decpbytes": // base 10
+	case "decPbytes", "decpbytes", "PBy": // base 10
 		return Petabyte
+	case "EBy": // base 10
+		return Exabyte
+	case "ZBy": // base 10
+		return Zettabyte
+	case "YBy": // base 10
+		return Yottabyte
+	case "Kibit": // base 2
+		return Kibibit
+	case "Mibit": // base 2
+		return Mebibit
+	case "Gibit": // base 2
+		return Gibibit
+	case "Tibit": // base 2
+		return Tebibit
+	case "Pibit": // base 2
+		return Pebibit
+	case "EiBy": // base 2
+		return Exbibyte
+	case "ZiBy": // base 2
+		return Zebibyte
+	case "YiBy": // base 2
+		return Yobibyte
+	case "kbit": // base 10
+		return Kilobit
+	case "Mbit": // base 10
+		return Megabit
+	case "Gbit": // base 10
+		return Gigabit
+	case "Tbit": // base 10
+		return Terabit
+	case "Pbit": // base 10
+		return Petabit
+	case "Ebit": // base 10
+		return Exabit
+	case "Zbit": // base 10
+		return Zettabit
+	case "Ybit": // base 10
+		return Yottabit
 	default:
 		return 1
 	}

pkg/query-service/converter/data_rate.go

@@ -54,6 +54,12 @@ func (*dataRateConverter) Name() string {
 	return "data_rate"
 }
 
+// Notation followed by UCUM:
+// https://ucum.org/ucum
+// kibi = Ki, mebi = Mi, gibi = Gi, tebi = Ti, pibi = Pi
+// kilo = k, mega = M, giga = G, tera = T, peta = P
+// exa = E, zetta = Z, yotta = Y
+// byte = By, bit = bit
 func FromDataRateUnit(u Unit) float64 {
 	// See https://github.com/SigNoz/signoz/blob/5a81f5f90b34845f5b4b3bdd46acf29d04bf3987/frontend/src/container/NewWidget/RightContainer/dataFormatCategories.ts#L62-L85
 	switch u {
@@ -65,46 +71,70 @@ func FromDataRateUnit(u Unit) float64 {
 		return BitPerSecond
 	case "bps", "bit/s": // bits/sec(SI)
 		return BitPerSecond
-	case "KiBs": // kibibytes/sec
+	case "KiBs", "KiBy/s": // kibibytes/sec
 		return KibibytePerSecond
-	case "Kibits": // kibibits/sec
+	case "Kibits", "Kibit/s": // kibibits/sec
 		return KibibitPerSecond
 	case "KBs", "kBy/s": // kilobytes/sec
 		return KilobytePerSecond
 	case "Kbits", "kbit/s": // kilobits/sec
 		return KilobitPerSecond
-	case "MiBs": // mebibytes/sec
+	case "MiBs", "MiBy/s": // mebibytes/sec
 		return MebibytePerSecond
-	case "Mibits": // mebibits/sec
+	case "Mibits", "Mibit/s": // mebibits/sec
 		return MebibitPerSecond
 	case "MBs", "MBy/s": // megabytes/sec
 		return MegabytePerSecond
 	case "Mbits", "Mbit/s": // megabits/sec
 		return MegabitPerSecond
-	case "GiBs": // gibibytes/sec
+	case "GiBs", "GiBy/s": // gibibytes/sec
 		return GibibytePerSecond
-	case "Gibits": // gibibits/sec
+	case "Gibits", "Gibit/s": // gibibits/sec
 		return GibibitPerSecond
 	case "GBs", "GBy/s": // gigabytes/sec
 		return GigabytePerSecond
 	case "Gbits", "Gbit/s": // gigabits/sec
 		return GigabitPerSecond
-	case "TiBs": // tebibytes/sec
+	case "TiBs", "TiBy/s": // tebibytes/sec
 		return TebibytePerSecond
-	case "Tibits": // tebibits/sec
+	case "Tibits", "Tibit/s": // tebibits/sec
 		return TebibitPerSecond
 	case "TBs", "TBy/s": // terabytes/sec
 		return TerabytePerSecond
 	case "Tbits", "Tbit/s": // terabits/sec
 		return TerabitPerSecond
-	case "PiBs": // pebibytes/sec
+	case "PiBs", "PiBy/s": // pebibytes/sec
 		return PebibytePerSecond
-	case "Pibits": // pebibits/sec
+	case "Pibits", "Pibit/s": // pebibits/sec
 		return PebibitPerSecond
 	case "PBs", "PBy/s": // petabytes/sec
 		return PetabytePerSecond
 	case "Pbits", "Pbit/s": // petabits/sec
 		return PetabitPerSecond
+	case "EBy/s": // exabytes/sec
+		return ExabytePerSecond
+	case "Ebit/s": // exabits/sec
+		return ExabitPerSecond
+	case "EiBy/s": // exbibytes/sec
+		return ExbibytePerSecond
+	case "Eibit/s": // exbibits/sec
+		return ExbibitPerSecond
+	case "ZBy/s": // zettabytes/sec
+		return ZettabytePerSecond
+	case "Zbit/s": // zettabits/sec
+		return ZettabitPerSecond
+	case "ZiBy/s": // zebibytes/sec
+		return ZebibytePerSecond
+	case "Zibit/s": // zebibits/sec
+		return ZebibitPerSecond
+	case "YBy/s": // yottabytes/sec
+		return YottabytePerSecond
+	case "Ybit/s": // yottabits/sec
+		return YottabitPerSecond
+	case "YiBy/s": // yobibytes/sec
+		return YobibytePerSecond
+	case "Yibit/s": // yobibits/sec
+		return YobibitPerSecond
 	default:
 		return 1
 	}

pkg/query-service/converter/data_rate_test.go

@@ -75,3 +75,83 @@ func TestDataRate(t *testing.T) {
 	// 1024 * 1024 * 1024 bytes = 1 gbytes
 	assert.Equal(t, Value{F: 1, U: "GiBs"}, dataRateConverter.Convert(Value{F: 1024 * 1024 * 1024, U: "binBps"}, "GiBs"))
 }
+
+func TestDataRateConversionUCUMUnit(t *testing.T) {
+	dataRateConverter := NewDataRateConverter()
+
+	tests := []struct {
+		name     string
+		input    Value
+		toUnit   Unit
+		expected Value
+	}{
+		// Binary byte scaling
+		{name: "Binary byte scaling: 1024 By/s = 1 KiBy/s", input: Value{F: 1024, U: "By/s"}, toUnit: "KiBy/s", expected: Value{F: 1, U: "KiBy/s"}},
+		{name: "Kibibyte to bytes: 1 KiBy/s = 1024 By/s", input: Value{F: 1, U: "KiBy/s"}, toUnit: "By/s", expected: Value{F: 1024, U: "By/s"}},
+		{name: "Binary byte scaling: 1024 KiBy/s = 1 MiBy/s", input: Value{F: 1024, U: "KiBy/s"}, toUnit: "MiBy/s", expected: Value{F: 1, U: "MiBy/s"}},
+		{name: "Gibibyte to bytes: 1 GiBy/s = 1073741824 By/s", input: Value{F: 1, U: "GiBy/s"}, toUnit: "By/s", expected: Value{F: 1024 * 1024 * 1024, U: "By/s"}},
+		{name: "Binary byte scaling: 1024 MiBy/s = 1 GiBy/s", input: Value{F: 1024, U: "MiBy/s"}, toUnit: "GiBy/s", expected: Value{F: 1, U: "GiBy/s"}},
+		{name: "Gibibyte to mebibyte: 1 GiBy/s = 1024 MiBy/s", input: Value{F: 1, U: "GiBy/s"}, toUnit: "MiBy/s", expected: Value{F: 1024, U: "MiBy/s"}},
+		{name: "Binary byte scaling: 1024 GiBy/s = 1 TiBy/s", input: Value{F: 1024, U: "GiBy/s"}, toUnit: "TiBy/s", expected: Value{F: 1, U: "TiBy/s"}},
+		{name: "Tebibyte to bytes: 1 TiBy/s = 1099511627776 By/s", input: Value{F: 1, U: "TiBy/s"}, toUnit: "By/s", expected: Value{F: 1024 * 1024 * 1024 * 1024, U: "By/s"}},
+		{name: "Binary byte scaling: 1024 TiBy/s = 1 PiBy/s", input: Value{F: 1024, U: "TiBy/s"}, toUnit: "PiBy/s", expected: Value{F: 1, U: "PiBy/s"}},
+		{name: "Pebibyte to tebibyte: 1 PiBy/s = 1024 TiBy/s", input: Value{F: 1, U: "PiBy/s"}, toUnit: "TiBy/s", expected: Value{F: 1024, U: "TiBy/s"}},
+		// Binary bit scaling
+		{name: "Binary bit scaling: 1024 bit/s = 1 Kibit/s", input: Value{F: 1024, U: "bit/s"}, toUnit: "Kibit/s", expected: Value{F: 1, U: "Kibit/s"}},
+		{name: "Kibibit to bits: 1 Kibit/s = 1024 bit/s", input: Value{F: 1, U: "Kibit/s"}, toUnit: "bit/s", expected: Value{F: 1024, U: "bit/s"}},
+		{name: "Binary bit scaling: 1024 Kibit/s = 1 Mibit/s", input: Value{F: 1024, U: "Kibit/s"}, toUnit: "Mibit/s", expected: Value{F: 1, U: "Mibit/s"}},
+		{name: "Gibibit to bits: 1 Gibit/s = 1073741824 bit/s", input: Value{F: 1, U: "Gibit/s"}, toUnit: "bit/s", expected: Value{F: 1024 * 1024 * 1024, U: "bit/s"}},
+		{name: "Binary bit scaling: 1024 Mibit/s = 1 Gibit/s", input: Value{F: 1024, U: "Mibit/s"}, toUnit: "Gibit/s", expected: Value{F: 1, U: "Gibit/s"}},
+		{name: "Gibibit to mebibit: 1 Gibit/s = 1024 Mibit/s", input: Value{F: 1, U: "Gibit/s"}, toUnit: "Mibit/s", expected: Value{F: 1024, U: "Mibit/s"}},
+		{name: "Binary bit scaling: 1024 Gibit/s = 1 Tibit/s", input: Value{F: 1024, U: "Gibit/s"}, toUnit: "Tibit/s", expected: Value{F: 1, U: "Tibit/s"}},
+		{name: "Tebibit to gibibit: 1 Tibit/s = 1024 Gibit/s", input: Value{F: 1, U: "Tibit/s"}, toUnit: "Gibit/s", expected: Value{F: 1024, U: "Gibit/s"}},
+		{name: "Binary bit scaling: 1024 Tibit/s = 1 Pibit/s", input: Value{F: 1024, U: "Tibit/s"}, toUnit: "Pibit/s", expected: Value{F: 1, U: "Pibit/s"}},
+		{name: "Pebibit to tebibit: 1 Pibit/s = 1024 Tibit/s", input: Value{F: 1, U: "Pibit/s"}, toUnit: "Tibit/s", expected: Value{F: 1024, U: "Tibit/s"}},
+		// Bytes to bits
+		{name: "Bytes to bits: 1 KiBy/s = 8 Kibit/s", input: Value{F: 1, U: "KiBy/s"}, toUnit: "Kibit/s", expected: Value{F: 8, U: "Kibit/s"}},
+		{name: "Bytes to bits: 1 MiBy/s = 8 Mibit/s", input: Value{F: 1, U: "MiBy/s"}, toUnit: "Mibit/s", expected: Value{F: 8, U: "Mibit/s"}},
+		{name: "Bytes to bits: 1 GiBy/s = 8 Gibit/s", input: Value{F: 1, U: "GiBy/s"}, toUnit: "Gibit/s", expected: Value{F: 8, U: "Gibit/s"}},
+		// Unit alias
+		{name: "Unit alias: 1 KiBs = 1 KiBy/s", input: Value{F: 1, U: "KiBs"}, toUnit: "KiBy/s", expected: Value{F: 1, U: "KiBy/s"}},
+		{name: "Unit alias: 1 Kibits = 1 Kibit/s", input: Value{F: 1, U: "Kibits"}, toUnit: "Kibit/s", expected: Value{F: 1, U: "Kibit/s"}},
+		// SI byte scaling (Exa, Zetta, Yotta)
+		{name: "SI byte scaling: 1000 PBy/s = 1 EBy/s", input: Value{F: 1000, U: "PBy/s"}, toUnit: "EBy/s", expected: Value{F: 1, U: "EBy/s"}},
+		{name: "Exabyte to bytes: 1 EBy/s = 1e18 By/s", input: Value{F: 1, U: "EBy/s"}, toUnit: "By/s", expected: Value{F: 1e18, U: "By/s"}},
+		{name: "SI byte scaling: 1000 EBy/s = 1 ZBy/s", input: Value{F: 1000, U: "EBy/s"}, toUnit: "ZBy/s", expected: Value{F: 1, U: "ZBy/s"}},
+		{name: "Zettabyte to petabytes: 1 ZBy/s = 1000000 PBy/s", input: Value{F: 1, U: "ZBy/s"}, toUnit: "PBy/s", expected: Value{F: 1e6, U: "PBy/s"}},
+		{name: "SI byte scaling: 1000 ZBy/s = 1 YBy/s", input: Value{F: 1000, U: "ZBy/s"}, toUnit: "YBy/s", expected: Value{F: 1, U: "YBy/s"}},
+		{name: "Yottabyte to zettabyte: 1 YBy/s = 1000 ZBy/s", input: Value{F: 1, U: "YBy/s"}, toUnit: "ZBy/s", expected: Value{F: 1000, U: "ZBy/s"}},
+		// Binary byte scaling (Exbi, Zebi, Yobi)
+		{name: "Binary byte scaling: 1024 PiBy/s = 1 EiBy/s", input: Value{F: 1024, U: "PiBy/s"}, toUnit: "EiBy/s", expected: Value{F: 1, U: "EiBy/s"}},
+		{name: "Exbibyte to tebibytes: 1 EiBy/s = 1048576 TiBy/s", input: Value{F: 1, U: "EiBy/s"}, toUnit: "TiBy/s", expected: Value{F: 1024 * 1024, U: "TiBy/s"}},
+		{name: "Binary byte scaling: 1024 EiBy/s = 1 ZiBy/s", input: Value{F: 1024, U: "EiBy/s"}, toUnit: "ZiBy/s", expected: Value{F: 1, U: "ZiBy/s"}},
+		{name: "Zebibyte to exbibyte: 1 ZiBy/s = 1024 EiBy/s", input: Value{F: 1, U: "ZiBy/s"}, toUnit: "EiBy/s", expected: Value{F: 1024, U: "EiBy/s"}},
+		{name: "Binary byte scaling: 1024 ZiBy/s = 1 YiBy/s", input: Value{F: 1024, U: "ZiBy/s"}, toUnit: "YiBy/s", expected: Value{F: 1, U: "YiBy/s"}},
+		{name: "Yobibyte to zebibyte: 1 YiBy/s = 1024 ZiBy/s", input: Value{F: 1, U: "YiBy/s"}, toUnit: "ZiBy/s", expected: Value{F: 1024, U: "ZiBy/s"}},
+		// SI bit scaling (Exa, Zetta, Yotta)
+		{name: "SI bit scaling: 1000 Pbit/s = 1 Ebit/s", input: Value{F: 1000, U: "Pbit/s"}, toUnit: "Ebit/s", expected: Value{F: 1, U: "Ebit/s"}},
+		{name: "Exabit to gigabits: 1 Ebit/s = 1e9 Gbit/s", input: Value{F: 1, U: "Ebit/s"}, toUnit: "Gbit/s", expected: Value{F: 1e9, U: "Gbit/s"}},
+		{name: "SI bit scaling: 1000 Ebit/s = 1 Zbit/s", input: Value{F: 1000, U: "Ebit/s"}, toUnit: "Zbit/s", expected: Value{F: 1, U: "Zbit/s"}},
+		{name: "Zettabit to exabit: 1 Zbit/s = 1000 Ebit/s", input: Value{F: 1, U: "Zbit/s"}, toUnit: "Ebit/s", expected: Value{F: 1000, U: "Ebit/s"}},
+		{name: "SI bit scaling: 1000 Zbit/s = 1 Ybit/s", input: Value{F: 1000, U: "Zbit/s"}, toUnit: "Ybit/s", expected: Value{F: 1, U: "Ybit/s"}},
+		{name: "Yottabit to zettabit: 1 Ybit/s = 1000 Zbit/s", input: Value{F: 1, U: "Ybit/s"}, toUnit: "Zbit/s", expected: Value{F: 1000, U: "Zbit/s"}},
+		// Binary bit scaling (Exbi, Zebi, Yobi)
+		{name: "Binary bit scaling: 1024 Pibit/s = 1 Eibit/s", input: Value{F: 1024, U: "Pibit/s"}, toUnit: "Eibit/s", expected: Value{F: 1, U: "Eibit/s"}},
+		{name: "Exbibit to pebibit: 1 Eibit/s = 1024 Pibit/s", input: Value{F: 1, U: "Eibit/s"}, toUnit: "Pibit/s", expected: Value{F: 1024, U: "Pibit/s"}},
+		{name: "Binary bit scaling: 1024 Eibit/s = 1 Zibit/s", input: Value{F: 1024, U: "Eibit/s"}, toUnit: "Zibit/s", expected: Value{F: 1, U: "Zibit/s"}},
+		{name: "Zebibit to exbibit: 1 Zibit/s = 1024 Eibit/s", input: Value{F: 1, U: "Zibit/s"}, toUnit: "Eibit/s", expected: Value{F: 1024, U: "Eibit/s"}},
+		{name: "Binary bit scaling: 1024 Zibit/s = 1 Yibit/s", input: Value{F: 1024, U: "Zibit/s"}, toUnit: "Yibit/s", expected: Value{F: 1, U: "Yibit/s"}},
+		{name: "Yobibit to zebibit: 1 Yibit/s = 1024 Zibit/s", input: Value{F: 1, U: "Yibit/s"}, toUnit: "Zibit/s", expected: Value{F: 1024, U: "Zibit/s"}},
+		// Bytes to bits (Exbi, Zebi, Yobi)
+		{name: "Bytes to bits: 1 EiBy/s = 8 Eibit/s", input: Value{F: 1, U: "EiBy/s"}, toUnit: "Eibit/s", expected: Value{F: 8, U: "Eibit/s"}},
+		{name: "Bytes to bits: 1 ZiBy/s = 8 Zibit/s", input: Value{F: 1, U: "ZiBy/s"}, toUnit: "Zibit/s", expected: Value{F: 8, U: "Zibit/s"}},
+		{name: "Bytes to bits: 1 YiBy/s = 8 Yibit/s", input: Value{F: 1, U: "YiBy/s"}, toUnit: "Yibit/s", expected: Value{F: 8, U: "Yibit/s"}},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := dataRateConverter.Convert(tt.input, tt.toUnit)
+			assert.Equal(t, tt.expected, got)
+		})
+	}
+}

pkg/query-service/converter/data_test.go

@@ -13,7 +13,7 @@ func TestData(t *testing.T) {
 	assert.Equal(t, Value{F: 1, U: "By"}, dataConverter.Convert(Value{F: 8, U: "bits"}, "By"))
 	// 1024 bytes = 1 kbytes
 	assert.Equal(t, Value{F: 1, U: "kbytes"}, dataConverter.Convert(Value{F: 1024, U: "bytes"}, "kbytes"))
-	assert.Equal(t, Value{F: 1, U: "kBy"}, dataConverter.Convert(Value{F: 1024, U: "bytes"}, "kBy"))
+	assert.Equal(t, Value{F: 1, U: "kBy"}, dataConverter.Convert(Value{F: 1000, U: "bytes"}, "kBy"))
 	// 1 byte = 8 bits
 	assert.Equal(t, Value{F: 8, U: "bits"}, dataConverter.Convert(Value{F: 1, U: "bytes"}, "bits"))
 	// 1 mbytes = 1024 kbytes
@@ -22,7 +22,7 @@ func TestData(t *testing.T) {
 	assert.Equal(t, Value{F: 1024, U: "bytes"}, dataConverter.Convert(Value{F: 1, U: "kbytes"}, "bytes"))
 	// 1024 kbytes = 1 mbytes
 	assert.Equal(t, Value{F: 1, U: "mbytes"}, dataConverter.Convert(Value{F: 1024, U: "kbytes"}, "mbytes"))
-	assert.Equal(t, Value{F: 1, U: "MBy"}, dataConverter.Convert(Value{F: 1024, U: "kbytes"}, "MBy"))
+	assert.Equal(t, Value{F: 1, U: "MBy"}, dataConverter.Convert(Value{F: 1000, U: "kBy"}, "MBy"))
 	// 1 mbytes = 1024 * 1024 bytes
 	assert.Equal(t, Value{F: 1024 * 1024, U: "bytes"}, dataConverter.Convert(Value{F: 1, U: "mbytes"}, "bytes"))
 	// 1024 mbytes = 1 gbytes
@@ -45,10 +45,90 @@ func TestData(t *testing.T) {
 	assert.Equal(t, Value{F: 1024 * 1024 * 1024 * 1024, U: "bytes"}, dataConverter.Convert(Value{F: 1, U: "tbytes"}, "bytes"))
 	// 1024 tbytes = 1 pbytes
 	assert.Equal(t, Value{F: 1, U: "pbytes"}, dataConverter.Convert(Value{F: 1024, U: "tbytes"}, "pbytes"))
-	// 1024 tbytes = 1 pbytes
-	assert.Equal(t, Value{F: 1, U: "PBy"}, dataConverter.Convert(Value{F: 1024, U: "tbytes"}, "PBy"))
+	// 1024 tbytes = 1 PiBy
+	assert.Equal(t, Value{F: 1, U: "PiBy"}, dataConverter.Convert(Value{F: 1024, U: "tbytes"}, "PiBy"))
 	// 1 pbytes = 1024 tbytes
 	assert.Equal(t, Value{F: 1024, U: "tbytes"}, dataConverter.Convert(Value{F: 1, U: "pbytes"}, "tbytes"))
-	// 1024 pbytes = 1 tbytes
-	assert.Equal(t, Value{F: 1024, U: "TBy"}, dataConverter.Convert(Value{F: 1, U: "pbytes"}, "TBy"))
+	// 1024 TiBy = 1 pbytes
+	assert.Equal(t, Value{F: 1024, U: "TiBy"}, dataConverter.Convert(Value{F: 1, U: "pbytes"}, "TiBy"))
+}
+
+func TestDataConversionUCUMUnit(t *testing.T) {
+	dataConverter := NewDataConverter()
+
+	tests := []struct {
+		name     string
+		input    Value
+		toUnit   Unit
+		expected Value
+	}{
+		// Bits to bytes
+		{name: "Bits to bytes: 8 bit = 1 By", input: Value{F: 8, U: "bit"}, toUnit: "By", expected: Value{F: 1, U: "By"}},
+		{name: "Byte to bits: 1 By = 8 bit", input: Value{F: 1, U: "By"}, toUnit: "bit", expected: Value{F: 8, U: "bit"}},
+		// Binary byte scaling
+		{name: "Binary byte scaling: 1024 By = 1 KiBy", input: Value{F: 1024, U: "By"}, toUnit: "KiBy", expected: Value{F: 1, U: "KiBy"}},
+		{name: "Kibibyte to bytes: 1 KiBy = 1024 By", input: Value{F: 1, U: "KiBy"}, toUnit: "By", expected: Value{F: 1024, U: "By"}},
+		{name: "Binary byte scaling: 1024 KiBy = 1 MiBy", input: Value{F: 1024, U: "KiBy"}, toUnit: "MiBy", expected: Value{F: 1, U: "MiBy"}},
+		{name: "Binary byte scaling: 1024 MiBy = 1 GiBy", input: Value{F: 1024, U: "MiBy"}, toUnit: "GiBy", expected: Value{F: 1, U: "GiBy"}},
+		{name: "Gibibyte to mebibyte: 1 GiBy = 1024 MiBy", input: Value{F: 1, U: "GiBy"}, toUnit: "MiBy", expected: Value{F: 1024, U: "MiBy"}},
+		{name: "Binary byte scaling: 1024 GiBy = 1 TiBy", input: Value{F: 1024, U: "GiBy"}, toUnit: "TiBy", expected: Value{F: 1, U: "TiBy"}},
+		{name: "Binary byte scaling: 1024 TiBy = 1 PiBy", input: Value{F: 1024, U: "TiBy"}, toUnit: "PiBy", expected: Value{F: 1, U: "PiBy"}},
+		{name: "Pebibyte to tebibyte: 1 PiBy = 1024 TiBy", input: Value{F: 1, U: "PiBy"}, toUnit: "TiBy", expected: Value{F: 1024, U: "TiBy"}},
+		{name: "Gibibyte to bytes: 1 GiBy = 1073741824 By", input: Value{F: 1, U: "GiBy"}, toUnit: "By", expected: Value{F: 1024 * 1024 * 1024, U: "By"}},
+		{name: "Tebibyte to bytes: 1 TiBy = 1099511627776 By", input: Value{F: 1, U: "TiBy"}, toUnit: "By", expected: Value{F: 1024 * 1024 * 1024 * 1024, U: "By"}},
+		// SI bit scaling
+		{name: "SI bit scaling: 1000 bit = 1 kbit", input: Value{F: 1000, U: "bit"}, toUnit: "kbit", expected: Value{F: 1, U: "kbit"}},
+		{name: "Kilobit to bits: 1 kbit = 1000 bit", input: Value{F: 1, U: "kbit"}, toUnit: "bit", expected: Value{F: 1000, U: "bit"}},
+		{name: "SI bit scaling: 1000 kbit = 1 Mbit", input: Value{F: 1000, U: "kbit"}, toUnit: "Mbit", expected: Value{F: 1, U: "Mbit"}},
+		{name: "Gigabit to bits: 1 Gbit = 1000000000 bit", input: Value{F: 1, U: "Gbit"}, toUnit: "bit", expected: Value{F: 1000 * 1000 * 1000, U: "bit"}},
+		{name: "SI bit scaling: 1000 Mbit = 1 Gbit", input: Value{F: 1000, U: "Mbit"}, toUnit: "Gbit", expected: Value{F: 1, U: "Gbit"}},
+		{name: "Gigabit to megabit: 1 Gbit = 1000 Mbit", input: Value{F: 1, U: "Gbit"}, toUnit: "Mbit", expected: Value{F: 1000, U: "Mbit"}},
+		{name: "SI bit scaling: 1000 Gbit = 1 Tbit", input: Value{F: 1000, U: "Gbit"}, toUnit: "Tbit", expected: Value{F: 1, U: "Tbit"}},
+		{name: "Terabit to gigabit: 1 Tbit = 1000 Gbit", input: Value{F: 1, U: "Tbit"}, toUnit: "Gbit", expected: Value{F: 1000, U: "Gbit"}},
+		{name: "SI bit scaling: 1000 Tbit = 1 Pbit", input: Value{F: 1000, U: "Tbit"}, toUnit: "Pbit", expected: Value{F: 1, U: "Pbit"}},
+		{name: "Petabit to terabit: 1 Pbit = 1000 Tbit", input: Value{F: 1, U: "Pbit"}, toUnit: "Tbit", expected: Value{F: 1000, U: "Tbit"}},
+		// Binary bit scaling
+		{name: "Binary bit scaling: 1024 bit = 1 Kibit", input: Value{F: 1024, U: "bit"}, toUnit: "Kibit", expected: Value{F: 1, U: "Kibit"}},
+		{name: "Kibibit to bits: 1 Kibit = 1024 bit", input: Value{F: 1, U: "Kibit"}, toUnit: "bit", expected: Value{F: 1024, U: "bit"}},
+		{name: "Binary bit scaling: 1024 Kibit = 1 Mibit", input: Value{F: 1024, U: "Kibit"}, toUnit: "Mibit", expected: Value{F: 1, U: "Mibit"}},
+		{name: "Mebibit to kibibit: 1 Mibit = 1024 Kibit", input: Value{F: 1, U: "Mibit"}, toUnit: "Kibit", expected: Value{F: 1024, U: "Kibit"}},
+		{name: "Binary bit scaling: 1024 Mibit = 1 Gibit", input: Value{F: 1024, U: "Mibit"}, toUnit: "Gibit", expected: Value{F: 1, U: "Gibit"}},
+		{name: "Gibibit to mebibit: 1 Gibit = 1024 Mibit", input: Value{F: 1, U: "Gibit"}, toUnit: "Mibit", expected: Value{F: 1024, U: "Mibit"}},
+		{name: "Binary bit scaling: 1024 Gibit = 1 Tibit", input: Value{F: 1024, U: "Gibit"}, toUnit: "Tibit", expected: Value{F: 1, U: "Tibit"}},
+		{name: "Tebibit to gibibit: 1 Tibit = 1024 Gibit", input: Value{F: 1, U: "Tibit"}, toUnit: "Gibit", expected: Value{F: 1024, U: "Gibit"}},
+		{name: "Binary bit scaling: 1024 Tibit = 1 Pibit", input: Value{F: 1024, U: "Tibit"}, toUnit: "Pibit", expected: Value{F: 1, U: "Pibit"}},
+		{name: "Pebibit to tebibit: 1 Pibit = 1024 Tibit", input: Value{F: 1, U: "Pibit"}, toUnit: "Tibit", expected: Value{F: 1024, U: "Tibit"}},
+		// Bytes to bits
+		{name: "Bytes to bits: 1 KiBy = 8 Kibit", input: Value{F: 1, U: "KiBy"}, toUnit: "Kibit", expected: Value{F: 8, U: "Kibit"}},
+		{name: "Bytes to bits: 1 MiBy = 8 Mibit", input: Value{F: 1, U: "MiBy"}, toUnit: "Mibit", expected: Value{F: 8, U: "Mibit"}},
+		{name: "Bytes to bits: 1 GiBy = 8 Gibit", input: Value{F: 1, U: "GiBy"}, toUnit: "Gibit", expected: Value{F: 8, U: "Gibit"}},
+		// SI byte scaling (Exa, Zetta, Yotta)
+		{name: "SI byte scaling: 1000 PBy = 1 EBy", input: Value{F: 1000, U: "PBy"}, toUnit: "EBy", expected: Value{F: 1, U: "EBy"}},
+		{name: "Exabyte to bytes: 1 EBy = 1e18 By", input: Value{F: 1, U: "EBy"}, toUnit: "By", expected: Value{F: 1e18, U: "By"}},
+		{name: "SI byte scaling: 1000 EBy = 1 ZBy", input: Value{F: 1000, U: "EBy"}, toUnit: "ZBy", expected: Value{F: 1, U: "ZBy"}},
+		{name: "Zettabyte to petabytes: 1 ZBy = 1000000 PBy", input: Value{F: 1, U: "ZBy"}, toUnit: "PBy", expected: Value{F: 1e6, U: "PBy"}},
+		{name: "SI byte scaling: 1000 ZBy = 1 YBy", input: Value{F: 1000, U: "ZBy"}, toUnit: "YBy", expected: Value{F: 1, U: "YBy"}},
+		{name: "Yottabyte to zettabyte: 1 YBy = 1000 ZBy", input: Value{F: 1, U: "YBy"}, toUnit: "ZBy", expected: Value{F: 1000, U: "ZBy"}},
+		// Binary byte scaling (Exbi, Zebi, Yobi)
+		{name: "Binary byte scaling: 1024 PiBy = 1 EiBy", input: Value{F: 1024, U: "PiBy"}, toUnit: "EiBy", expected: Value{F: 1, U: "EiBy"}},
+		{name: "Exbibyte to tebibytes: 1 EiBy = 1048576 TiBy", input: Value{F: 1, U: "EiBy"}, toUnit: "TiBy", expected: Value{F: 1024 * 1024, U: "TiBy"}},
+		{name: "Binary byte scaling: 1024 EiBy = 1 ZiBy", input: Value{F: 1024, U: "EiBy"}, toUnit: "ZiBy", expected: Value{F: 1, U: "ZiBy"}},
+		{name: "Zebibyte to exbibyte: 1 ZiBy = 1024 EiBy", input: Value{F: 1, U: "ZiBy"}, toUnit: "EiBy", expected: Value{F: 1024, U: "EiBy"}},
+		{name: "Binary byte scaling: 1024 ZiBy = 1 YiBy", input: Value{F: 1024, U: "ZiBy"}, toUnit: "YiBy", expected: Value{F: 1, U: "YiBy"}},
+		{name: "Yobibyte to zebibyte: 1 YiBy = 1024 ZiBy", input: Value{F: 1, U: "YiBy"}, toUnit: "ZiBy", expected: Value{F: 1024, U: "ZiBy"}},
+		// SI bit scaling (Exa, Zetta, Yotta)
+		{name: "SI bit scaling: 1000 Pbit = 1 Ebit", input: Value{F: 1000, U: "Pbit"}, toUnit: "Ebit", expected: Value{F: 1, U: "Ebit"}},
+		{name: "Exabit to gigabits: 1 Ebit = 1e9 Gbit", input: Value{F: 1, U: "Ebit"}, toUnit: "Gbit", expected: Value{F: 1e9, U: "Gbit"}},
+		{name: "SI bit scaling: 1000 Ebit = 1 Zbit", input: Value{F: 1000, U: "Ebit"}, toUnit: "Zbit", expected: Value{F: 1, U: "Zbit"}},
+		{name: "Zettabit to exabit: 1 Zbit = 1000 Ebit", input: Value{F: 1, U: "Zbit"}, toUnit: "Ebit", expected: Value{F: 1000, U: "Ebit"}},
+		{name: "SI bit scaling: 1000 Zbit = 1 Ybit", input: Value{F: 1000, U: "Zbit"}, toUnit: "Ybit", expected: Value{F: 1, U: "Ybit"}},
+		{name: "Yottabit to zettabit: 1 Ybit = 1000 Zbit", input: Value{F: 1, U: "Ybit"}, toUnit: "Zbit", expected: Value{F: 1000, U: "Zbit"}},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got := dataConverter.Convert(tt.input, tt.toUnit)
+			assert.Equal(t, tt.expected, got)
+		})
+	}
 }

pkg/query-service/converter/time.go

@@ -47,7 +47,7 @@ func FromTimeUnit(u Unit) Duration {
 		return Hour
 	case "d":
 		return Day
-	case "w":
+	case "w", "wk":
 		return Week
 	default:
 		return Second

pkg/query-service/converter/time_test.go

@@ -54,4 +54,13 @@ func TestDurationConvert(t *testing.T) {
 	assert.Equal(t, Value{F: 1, U: "ms"}, timeConverter.Convert(Value{F: 1000, U: "us"}, "ms"))
 	// 1000000000 ns = 1 s
 	assert.Equal(t, Value{F: 1, U: "s"}, timeConverter.Convert(Value{F: 1000000000, U: "ns"}, "s"))
+
+	// 7 d = 1 wk
+	assert.Equal(t, Value{F: 1, U: "wk"}, timeConverter.Convert(Value{F: 7, U: "d"}, "wk"))
+	// 1 wk = 7 d
+	assert.Equal(t, Value{F: 7, U: "d"}, timeConverter.Convert(Value{F: 1, U: "wk"}, "d"))
+	// 1 wk = 168 h
+	assert.Equal(t, Value{F: 168, U: "h"}, timeConverter.Convert(Value{F: 1, U: "wk"}, "h"))
+	// 604800 s = 1 wk
+	assert.Equal(t, Value{F: 1, U: "wk"}, timeConverter.Convert(Value{F: 604800, U: "s"}, "wk"))
 }