Fix span label text colors for dark and light modes

.devenv/docker/clickhouse/compose.yaml

@@ -1,22 +1,4 @@
 services:
-  init-clickhouse:
-    image: clickhouse/clickhouse-server:25.5.6
-    container_name: init-clickhouse
-    command:
-      - bash
-      - -c
-      - |
-        version="v0.0.1"
-        node_os=$$(uname -s | tr '[:upper:]' '[:lower:]')
-        node_arch=$$(uname -m | sed s/aarch64/arm64/ | sed s/x86_64/amd64/)
-        echo "Fetching histogram-binary for $${node_os}/$${node_arch}"
-        cd /tmp
-        wget -O histogram-quantile.tar.gz "https://github.com/SigNoz/signoz/releases/download/histogram-quantile%2F$${version}/histogram-quantile_$${node_os}_$${node_arch}.tar.gz"
-        tar -xvzf histogram-quantile.tar.gz
-        mv histogram-quantile /var/lib/clickhouse/user_scripts/histogramQuantile
-    restart: on-failure
-    volumes:
-      - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
   clickhouse:
     image: clickhouse/clickhouse-server:25.5.6
     container_name: clickhouse
@@ -25,7 +7,6 @@ services:
       - ${PWD}/fs/etc/clickhouse-server/users.d/users.xml:/etc/clickhouse-server/users.d/users.xml
       - ${PWD}/fs/tmp/var/lib/clickhouse/:/var/lib/clickhouse/
       - ${PWD}/fs/tmp/var/lib/clickhouse/user_scripts/:/var/lib/clickhouse/user_scripts/
-      - ${PWD}/../../../deploy/common/clickhouse/custom-function.xml:/etc/clickhouse-server/custom-function.xml
     ports:
       - '127.0.0.1:8123:8123'
       - '127.0.0.1:9000:9000'
@@ -41,10 +22,7 @@ services:
       timeout: 5s
       retries: 3
     depends_on:
-      init-clickhouse:
-        condition: service_completed_successfully
-      zookeeper:
-        condition: service_healthy
+      - zookeeper
     environment:
       - CLICKHOUSE_SKIP_USER_SETUP=1
   zookeeper:

.devenv/docker/clickhouse/fs/etc/clickhouse-server/config.d/config.xml

@@ -44,6 +44,4 @@
         <shard>01</shard>
         <replica>01</replica>
     </macros>
-    <user_defined_executable_functions_config>*function.xml</user_defined_executable_functions_config>
-    <user_scripts_path>/var/lib/clickhouse/user_scripts/</user_scripts_path>
 </clickhouse>

.github/CODEOWNERS

@@ -127,15 +127,12 @@
 /frontend/src/pages/DashboardsListPage/ @SigNoz/pulse-frontend
 /frontend/src/container/ListOfDashboard/ @SigNoz/pulse-frontend
 
-# Dashboard Widget Page
-/frontend/src/pages/DashboardWidget/ @SigNoz/pulse-frontend
-/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
-
 ## Dashboard Page
 
 /frontend/src/pages/DashboardPage/ @SigNoz/pulse-frontend
 /frontend/src/container/DashboardContainer/ @SigNoz/pulse-frontend
 /frontend/src/container/GridCardLayout/ @SigNoz/pulse-frontend
+/frontend/src/container/NewWidget/ @SigNoz/pulse-frontend
 
 ## Public Dashboard Page
 

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

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.115.0
+    image: signoz/signoz:v0.114.1
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

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.115.0
+    image: signoz/signoz:v0.114.1
     ports:
       - "8080:8080" # signoz port
     volumes:

deploy/docker/docker-compose.ha.yaml

@@ -181,7 +181,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.115.0}
+    image: signoz/signoz:${VERSION:-v0.114.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

deploy/docker/docker-compose.yaml

@@ -109,7 +109,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:${VERSION:-v0.115.0}
+    image: signoz/signoz:${VERSION:-v0.114.1}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -1768,19 +1768,19 @@ components:
         createdAt:
           format: date-time
           type: string
-        expiresAt:
+        expires_at:
           minimum: 0
           type: integer
         id:
           type: string
         key:
           type: string
-        lastObservedAt:
+        last_used:
           format: date-time
           type: string
         name:
           type: string
-        serviceAccountId:
+        service_account_id:
           type: string
         updatedAt:
           format: date-time
@@ -1788,9 +1788,9 @@ components:
       required:
       - id
       - key
-      - expiresAt
-      - lastObservedAt
-      - serviceAccountId
+      - expires_at
+      - last_used
+      - service_account_id
       type: object
     ServiceaccounttypesGettableFactorAPIKeyWithKey:
       properties:
@@ -1804,14 +1804,14 @@ components:
       type: object
     ServiceaccounttypesPostableFactorAPIKey:
       properties:
-        expiresAt:
+        expires_at:
           minimum: 0
           type: integer
         name:
           type: string
       required:
       - name
-      - expiresAt
+      - expires_at
       type: object
     ServiceaccounttypesPostableServiceAccount:
       properties:
@@ -1833,16 +1833,13 @@ components:
         createdAt:
           format: date-time
           type: string
-        deletedAt:
-          format: date-time
-          type: string
         email:
           type: string
         id:
           type: string
         name:
           type: string
-        orgId:
+        orgID:
           type: string
         roles:
           items:
@@ -1859,19 +1856,18 @@ components:
       - email
       - roles
       - status
-      - orgId
-      - deletedAt
+      - orgID
       type: object
     ServiceaccounttypesUpdatableFactorAPIKey:
       properties:
-        expiresAt:
+        expires_at:
           minimum: 0
           type: integer
         name:
           type: string
       required:
       - name
-      - expiresAt
+      - expires_at
       type: object
     ServiceaccounttypesUpdatableServiceAccount:
       properties:

ee/authz/openfgaschema/base.fga

@@ -2,45 +2,39 @@ module base
 
 type organisation 
   relations
-    define read: [user, serviceaccount, role#assignee]
-    define update: [user, serviceaccount, role#assignee]
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
 
 type user
   relations
-    define read: [user, serviceaccount, role#assignee]
-    define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]
-
-type serviceaccount 
-  relations
-    define read: [user, serviceaccount, role#assignee]
-    define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]  
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+    define delete: [user, role#assignee]
 
 type anonymous
 
 type role 
   relations
-    define assignee: [user, serviceaccount, anonymous]
+    define assignee: [user, anonymous]
 
-    define read: [user, serviceaccount, role#assignee]
-    define update: [user, serviceaccount, role#assignee]
-    define delete: [user, serviceaccount, role#assignee]
+    define read: [user, role#assignee]
+    define update: [user, role#assignee]
+    define delete: [user, role#assignee]
 
 type metaresources
   relations
-    define create: [user, serviceaccount, role#assignee]
-    define list: [user, serviceaccount, role#assignee]
+    define create: [user, role#assignee]
+    define list: [user, role#assignee]
 
 type metaresource
   relations
-      define read: [user, serviceaccount, anonymous, role#assignee]
-      define update: [user, serviceaccount, role#assignee]
-      define delete: [user, serviceaccount, role#assignee]
+      define read: [user, anonymous, role#assignee]
+      define update: [user, role#assignee]
+      define delete: [user, role#assignee]
 
-      define block: [user, serviceaccount, role#assignee]
+      define block: [user, role#assignee]
 
 
 type telemetryresource
   relations
-      define read: [user, serviceaccount, role#assignee]
+      define read: [user, role#assignee]

frontend/src/AppRoutes/Private.tsx

@@ -1,6 +1,6 @@
 import { ReactChild, useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { matchPath, Redirect, useLocation } from 'react-router-dom';
+import { matchPath, useLocation } from 'react-router-dom';
 import getLocalStorageApi from 'api/browser/localstorage/get';
 import setLocalStorageApi from 'api/browser/localstorage/set';
 import getAll from 'api/v1/user/get';
@@ -128,7 +128,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 			isAdmin &&
 			(path === ROUTES.SETTINGS ||
 				path === ROUTES.ORG_SETTINGS ||
-				path === ROUTES.MEMBERS_SETTINGS ||
 				path === ROUTES.BILLING ||
 				path === ROUTES.MY_SETTINGS);
 
@@ -237,7 +236,13 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 	useEffect(() => {
 		// if it is an old route navigate to the new route
 		if (isOldRoute) {
-			// this will be handled by the redirect component below
+			const redirectUrl = oldNewRoutesMapping[pathname];
+
+			const newLocation = {
+				...location,
+				pathname: redirectUrl,
+			};
+			history.replace(newLocation);
 			return;
 		}
 
@@ -291,19 +296,6 @@ function PrivateRoute({ children }: PrivateRouteProps): JSX.Element {
 		}
 	}, [isLoggedInState, pathname, user, isOldRoute, currentRoute, location]);
 
-	if (isOldRoute) {
-		const redirectUrl = oldNewRoutesMapping[pathname];
-		return (
-			<Redirect
-				to={{
-					pathname: redirectUrl,
-					search: location.search,
-					hash: location.hash,
-				}}
-			/>
-		);
-	}
-
 	// NOTE: disabling this rule as there is no need to have div
 	return <>{children}</>;
 }

frontend/src/AppRoutes/index.tsx

@@ -29,6 +29,7 @@ import posthog from 'posthog-js';
 import { useAppContext } from 'providers/App/App';
 import { IUser } from 'providers/App/types';
 import { CmdKProvider } from 'providers/cmdKProvider';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
@@ -320,19 +321,6 @@ function App(): JSX.Element {
 					// Session Replay
 					replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
 					replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
-					beforeSend(event) {
-						const sessionReplayUrl = posthog.get_session_replay_url?.({
-							withTimestamp: true,
-						});
-						if (sessionReplayUrl) {
-							// eslint-disable-next-line no-param-reassign
-							event.contexts = {
-								...event.contexts,
-								posthog: { session_replay_url: sessionReplayUrl },
-							};
-						}
-						return event;
-					},
 				});
 
 				setIsSentryInitialized(true);
@@ -383,26 +371,28 @@ function App(): JSX.Element {
 									<PrivateRoute>
 										<ResourceProvider>
 											<QueryBuilderProvider>
-												<KeyboardHotkeysProvider>
-													<AppLayout>
-														<PreferenceContextProvider>
-															<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
-																<Switch>
-																	{routes.map(({ path, component, exact }) => (
-																		<Route
-																			key={`${path}`}
-																			exact={exact}
-																			path={path}
-																			component={component}
-																		/>
-																	))}
-																	<Route exact path="/" component={Home} />
-																	<Route path="*" component={NotFound} />
-																</Switch>
-															</Suspense>
-														</PreferenceContextProvider>
-													</AppLayout>
-												</KeyboardHotkeysProvider>
+												<DashboardProvider>
+													<KeyboardHotkeysProvider>
+														<AppLayout>
+															<PreferenceContextProvider>
+																<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
+																	<Switch>
+																		{routes.map(({ path, component, exact }) => (
+																			<Route
+																				key={`${path}`}
+																				exact={exact}
+																				path={path}
+																				component={component}
+																			/>
+																		))}
+																		<Route exact path="/" component={Home} />
+																		<Route path="*" component={NotFound} />
+																	</Switch>
+																</Suspense>
+															</PreferenceContextProvider>
+														</AppLayout>
+													</KeyboardHotkeysProvider>
+												</DashboardProvider>
 											</QueryBuilderProvider>
 										</ResourceProvider>
 									</PrivateRoute>

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

@@ -2100,7 +2100,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expiresAt: number;
+	expires_at: number;
 	/**
 	 * @type string
 	 */
@@ -2113,7 +2113,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	lastObservedAt: Date;
+	last_used: Date;
 	/**
 	 * @type string
 	 */
@@ -2121,7 +2121,7 @@ export interface ServiceaccounttypesFactorAPIKeyDTO {
 	/**
 	 * @type string
 	 */
-	serviceAccountId: string;
+	service_account_id: string;
 	/**
 	 * @type string
 	 * @format date-time
@@ -2145,7 +2145,7 @@ export interface ServiceaccounttypesPostableFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expiresAt: number;
+	expires_at: number;
 	/**
 	 * @type string
 	 */
@@ -2173,11 +2173,6 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	 * @format date-time
 	 */
 	createdAt?: Date;
-	/**
-	 * @type string
-	 * @format date-time
-	 */
-	deletedAt: Date;
 	/**
 	 * @type string
 	 */
@@ -2193,7 +2188,7 @@ export interface ServiceaccounttypesServiceAccountDTO {
 	/**
 	 * @type string
 	 */
-	orgId: string;
+	orgID: string;
 	/**
 	 * @type array
 	 */
@@ -2214,7 +2209,7 @@ export interface ServiceaccounttypesUpdatableFactorAPIKeyDTO {
 	 * @type integer
 	 * @minimum 0
 	 */
-	expiresAt: number;
+	expires_at: number;
 	/**
 	 * @type string
 	 */

frontend/src/components/TimelineV3/TimelineV3.styles.scss

@@ -0,0 +1,4 @@
+.timeline-v3-container {
+	// flex: 1;
+	overflow: visible;
+}

frontend/src/components/TimelineV3/TimelineV3.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import {
+	getIntervals,
+	getMinimumIntervalsBasedOnWidth,
+	Interval,
+} from './utils';
+
+import './TimelineV3.styles.scss';
+
+interface ITimelineV3Props {
+	startTimestamp: number;
+	endTimestamp: number;
+	timelineHeight: number;
+	offsetTimestamp: number;
+}
+
+function TimelineV3(props: ITimelineV3Props): JSX.Element {
+	const {
+		startTimestamp,
+		endTimestamp,
+		timelineHeight,
+		offsetTimestamp,
+	} = props;
+	const [intervals, setIntervals] = useState<Interval[]>([]);
+	const [ref, { width }] = useMeasure<HTMLDivElement>();
+	const isDarkMode = useIsDarkMode();
+
+	useEffect(() => {
+		const spread = endTimestamp - startTimestamp;
+		if (spread < 0) {
+			return;
+		}
+
+		const minIntervals = getMinimumIntervalsBasedOnWidth(width);
+		const intervalisedSpread = (spread / minIntervals) * 1.0;
+		const intervals = getIntervals(intervalisedSpread, spread, offsetTimestamp);
+
+		setIntervals(intervals);
+	}, [startTimestamp, endTimestamp, width, offsetTimestamp]);
+
+	if (endTimestamp < startTimestamp) {
+		console.error(
+			'endTimestamp cannot be less than startTimestamp',
+			startTimestamp,
+			endTimestamp,
+		);
+		return <div />;
+	}
+
+	const strokeColor = isDarkMode ? ' rgb(192,193,195,0.8)' : 'black';
+
+	return (
+		<div ref={ref as never} className="timeline-v3-container">
+			<svg
+				width={width}
+				height={timelineHeight * 2.5}
+				xmlns="http://www.w3.org/2000/svg"
+				overflow="visible"
+			>
+				{intervals &&
+					intervals.length > 0 &&
+					intervals.map((interval, index) => (
+						<g
+							transform={`translate(${(interval.percentage * width) / 100},0)`}
+							key={`${interval.percentage + interval.label + index}`}
+							textAnchor="middle"
+							fontSize="0.6rem"
+						>
+							<text
+								x={index === intervals.length - 1 ? -10 : 0}
+								y={timelineHeight * 2}
+								fill={strokeColor}
+							>
+								{interval.label}
+							</text>
+							<line y1={0} y2={timelineHeight} stroke={strokeColor} strokeWidth="1" />
+						</g>
+					))}
+			</svg>
+		</div>
+	);
+}
+
+export default TimelineV3;

frontend/src/components/TimelineV3/utils.ts

@@ -0,0 +1,93 @@
+import {
+	IIntervalUnit,
+	Interval,
+	INTERVAL_UNITS,
+	resolveTimeFromInterval,
+} from 'components/TimelineV2/utils';
+import { toFixed } from 'utils/toFixed';
+
+export type { Interval };
+
+/** Fewer intervals than TimelineV2 for a cleaner flamegraph ruler. */
+export function getMinimumIntervalsBasedOnWidth(width: number): number {
+	if (width < 640) {
+		return 3;
+	}
+	if (width < 768) {
+		return 4;
+	}
+	if (width < 1024) {
+		return 5;
+	}
+	return 6;
+}
+
+/**
+ * Computes timeline intervals with offset-aware labels.
+ * Labels reflect absolute time from trace start (offsetTimestamp + elapsed),
+ * so when zoomed into a window, the first tick shows e.g. "50ms" not "0ms".
+ */
+export function getIntervals(
+	intervalSpread: number,
+	baseSpread: number,
+	offsetTimestamp: number,
+): Interval[] {
+	const integerPartString = intervalSpread.toString().split('.')[0];
+	const integerPartLength = integerPartString.length;
+
+	const intervalSpreadNormalized =
+		intervalSpread < 1.0
+			? intervalSpread
+			: Math.floor(Number(integerPartString) / 10 ** (integerPartLength - 1)) *
+			  10 ** (integerPartLength - 1);
+
+	// Unit must suit both: (1) tick granularity (intervalSpread) and (2) label magnitude
+	// (offsetTimestamp). When zoomed deep into a trace, labels show offsetTimestamp + elapsed,
+	// so we must pick a unit where that value is readable (e.g. "500.00s" not "500000.00ms").
+	const valueForUnitSelection = Math.max(offsetTimestamp, intervalSpread);
+	let intervalUnit: IIntervalUnit = INTERVAL_UNITS[0];
+	for (let idx = INTERVAL_UNITS.length - 1; idx >= 0; idx -= 1) {
+		const standardInterval = INTERVAL_UNITS[idx];
+		if (valueForUnitSelection * standardInterval.multiplier >= 1) {
+			intervalUnit = INTERVAL_UNITS[idx];
+			break;
+		}
+	}
+
+	const intervals: Interval[] = [
+		{
+			label: `${toFixed(
+				resolveTimeFromInterval(offsetTimestamp, intervalUnit),
+				2,
+			)}${intervalUnit.name}`,
+			percentage: 0,
+		},
+	];
+
+	let tempBaseSpread = baseSpread;
+	let elapsedIntervals = 0;
+
+	while (tempBaseSpread && intervals.length < 20) {
+		let intervalTime: number;
+
+		if (tempBaseSpread <= 1.5 * intervalSpreadNormalized) {
+			intervalTime = elapsedIntervals + tempBaseSpread;
+			tempBaseSpread = 0;
+		} else {
+			intervalTime = elapsedIntervals + intervalSpreadNormalized;
+			tempBaseSpread -= intervalSpreadNormalized;
+		}
+
+		elapsedIntervals = intervalTime;
+		const labelTime = offsetTimestamp + intervalTime;
+
+		intervals.push({
+			label: `${toFixed(resolveTimeFromInterval(labelTime, intervalUnit), 2)}${
+				intervalUnit.name
+			}`,
+			percentage: (intervalTime / baseSpread) * 100,
+		});
+	}
+
+	return intervals;
+}

frontend/src/constants/theme.ts

@@ -33,6 +33,125 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
+	traceDetailColorsV3: {
+		// Blues
+		dodgerBlue: '#2F80ED',
+		royalBlue: '#3366E6',
+		steelBlue: '#4682B4',
+
+		// Teals / Cyans
+		turquoise: '#00CEC9',
+		lagoon: '#1ABC9C',
+		cyanBright: '#22A6F2',
+
+		// Greens
+		emeraldGreen: '#27AE60',
+		mediumSeaGreen: '#3CB371',
+		limeGreen: '#A3E635',
+
+		// Yellows / Golds
+		festivalYellow: '#F2C94C',
+		sunflower: '#FFD93D',
+		warmAmber: '#FFCA28',
+
+		// Purples / Violets
+		mediumPurple: '#BB6BD9',
+		royalPurple: '#9B51E0',
+		orchid: '#DA77F2',
+
+		// Accent
+		neonViolet: '#C77DFF',
+		electricPurple: '#6C5CE7',
+		arcticBlue: '#48DBFB',
+
+		// Blues extended
+		blue1: '#1F63E0',
+		blue2: '#3A7AED',
+		blue3: '#5A9DF5',
+		blue4: '#2874A6',
+		blue5: '#2E86C1',
+		blue6: '#3498DB',
+
+		// Cyans
+		cyan1: '#00B0AA',
+		cyan2: '#33D6C2',
+		cyan3: '#66E9DA',
+
+		// Greens extended
+		green1: '#1E8449',
+		green2: '#2ECC71',
+		green3: '#58D68D',
+		green4: '#229954',
+		green5: '#27AE60',
+		green6: '#52BE80',
+
+		// Forest
+		forest1: '#27AE60',
+		forest2: '#2ECC71',
+		forest3: '#58D68D',
+
+		// Lime
+		lime1: '#A3E635',
+		lime2: '#B9F18D',
+		lime3: '#D4FFB0',
+
+		// Teals
+		teal1: '#009688',
+		teal2: '#1ABC9C',
+		teal3: '#48C9B0',
+		teal4: '#1ABC9C',
+		teal5: '#48C9B0',
+		teal6: '#76D7C4',
+
+		// Yellows
+		yellow1: '#F1C40F',
+		yellow2: '#F7DC6F',
+		yellow3: '#F9E79F',
+
+		// Gold
+		gold1: '#F39C12',
+		gold2: '#F1C40F',
+		gold3: '#F7DC6F',
+		gold4: '#B7950B',
+		gold5: '#F1C40F',
+		gold6: '#F4D03F',
+
+		// Mustard
+		mustard1: '#F1C40F',
+		mustard2: '#F7DC6F',
+		mustard3: '#F9E79F',
+
+		// Aqua
+		aqua1: '#00BFFF',
+		aqua2: '#1E90FF',
+		aqua3: '#63B8FF',
+
+		// Purple extended
+		purple1: '#8E44AD',
+		purple2: '#9B59B6',
+		purple3: '#BB8FCE',
+
+		violet1: '#8E44AD',
+		violet2: '#9B59B6',
+		violet3: '#BB8FCE',
+		violet4: '#7D3C98',
+		violet5: '#8E44AD',
+		violet6: '#9B59B6',
+
+		// Lavender
+		lavender1: '#9B59B6',
+		lavender2: '#AF7AC5',
+		lavender3: '#C39BD3',
+
+		// Oranges (safe ones, not red-ish)
+		orange4: '#D35400',
+		orange5: '#E67E22',
+		orange6: '#EB984E',
+
+		coral1: '#E67E22',
+		coral2: '#F39C12',
+		coral3: '#F5B041',
+	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

frontend/src/container/CustomDomainSettings/CustomDomainEditModal.tsx

@@ -30,15 +30,14 @@ export default function CustomDomainEditModal({
 	onClearError,
 	onSubmit,
 }: CustomDomainEditModalProps): JSX.Element {
-	const initialSubdomain = customDomainSubdomain ?? '';
-	const [value, setValue] = useState(initialSubdomain);
+	const [value, setValue] = useState(customDomainSubdomain ?? '');
 	const [validationError, setValidationError] = useState<string | null>(null);
 
 	useEffect(() => {
 		if (isOpen) {
-			setValue(initialSubdomain);
+			setValue(customDomainSubdomain ?? '');
 		}
-	}, [isOpen, initialSubdomain]);
+	}, [isOpen, customDomainSubdomain]);
 
 	const handleClose = (): void => {
 		setValidationError(null);
@@ -59,11 +58,6 @@ export default function CustomDomainEditModal({
 	};
 
 	const handleSubmit = (): void => {
-		if (value === initialSubdomain) {
-			setValidationError('Input is unchanged');
-			return;
-		}
-
 		if (!value) {
 			setValidationError('This field is required');
 			return;
@@ -90,7 +84,7 @@ export default function CustomDomainEditModal({
 
 	const hasError = Boolean(errorMessage);
 
-	const statusIcon = ((): JSX.Element | null => {
+	const statusIcon = ((): JSX.Element => {
 		if (isLoading) {
 			return (
 				<LoaderCircle size={16} className="animate-spin edit-modal-status-icon" />
@@ -101,9 +95,7 @@ export default function CustomDomainEditModal({
 			return <CircleAlert size={16} color={Color.BG_CHERRY_500} />;
 		}
 
-		return value && value.length >= 3 ? (
-			<CircleCheck size={16} color={Color.BG_FOREST_500} />
-		) : null;
+		return <CircleCheck size={16} color={Color.BG_FOREST_500} />;
 	})();
 
 	return (
@@ -197,7 +189,7 @@ export default function CustomDomainEditModal({
 							color="primary"
 							className="edit-modal-apply-btn"
 							onClick={handleSubmit}
-							disabled={isLoading || value === initialSubdomain}
+							disabled={isLoading}
 							loading={isLoading}
 						>
 							Apply Changes

frontend/src/container/CustomDomainSettings/CustomDomainSettings.styles.scss

@@ -81,10 +81,6 @@
 		padding-left: 26px;
 	}
 
-	.custom-domain-card-meta-row.workspace-name-hidden {
-		padding-left: 0;
-	}
-
 	.custom-domain-card-meta-timezone {
 		display: inline-flex;
 		align-items: center;
@@ -121,6 +117,32 @@
 		background: var(--l2-border);
 		margin: 0;
 	}
+
+	.custom-domain-card-bottom {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-5);
+		padding: var(--padding-3);
+	}
+
+	.custom-domain-card-license {
+		color: var(--l1-foreground);
+		font-size: var(--paragraph-base-400-font-size);
+		line-height: var(--line-height-20);
+		letter-spacing: -0.07px;
+	}
+
+	.custom-domain-plan-badge {
+		display: inline-flex;
+		align-items: center;
+		padding: 0 2px;
+		border-radius: 2px;
+		background: var(--l2-background);
+		color: var(--l2-foreground);
+		font-family: 'SF Mono', 'Fira Code', monospace;
+		font-size: var(--paragraph-base-400-font-size);
+		line-height: var(--line-height-20);
+	}
 }
 
 .workspace-url-trigger {

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -69,9 +69,8 @@ function DomainUpdateToast({
 }
 
 export default function CustomDomainSettings(): JSX.Element {
-	const { org } = useAppContext();
+	const { org, activeLicense } = useAppContext();
 	const { timezone } = useTimezone();
-
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isPollingEnabled, setIsPollingEnabled] = useState(false);
 	const [hosts, setHosts] = useState<ZeustypesHostDTO[] | null>(null);
@@ -176,8 +175,7 @@ export default function CustomDomainSettings(): JSX.Element {
 		[hosts, activeHost],
 	);
 
-	const workspaceName =
-		org?.[0]?.displayName || customDomainSubdomain || activeHost?.name;
+	const planName = activeLicense?.plan?.name;
 
 	if (isLoadingHosts) {
 		return (
@@ -193,97 +191,105 @@ export default function CustomDomainSettings(): JSX.Element {
 
 	return (
 		<>
-			<div className="custom-domain-card-top">
-				<div className="custom-domain-card-info">
-					{!!workspaceName && (
+			<div className="custom-domain-card">
+				<div className="custom-domain-card-top">
+					<div className="custom-domain-card-info">
 						<div className="custom-domain-card-name-row">
 							<span className="beacon" />
-							<span className="custom-domain-card-org-name">{workspaceName}</span>
+							<span className="custom-domain-card-org-name">
+								{org?.[0]?.displayName ? org?.[0]?.displayName : customDomainSubdomain}
+							</span>
 						</div>
-					)}
 
-					<div
-						className={`custom-domain-card-meta-row ${
-							!workspaceName ? 'workspace-name-hidden' : ''
-						}`}
-					>
-						<Dropdown
-							trigger={['click']}
-							dropdownRender={(): JSX.Element => (
-								<div className="workspace-url-dropdown">
-									<span className="workspace-url-dropdown-header">
-										All Workspace URLs
-									</span>
-									<div className="workspace-url-dropdown-divider" />
-									{sortedHosts.map((host) => {
-										const isActive = host.name === activeHost?.name;
-										return (
-											<a
-												key={host.name}
-												href={host.url}
-												target="_blank"
-												rel="noopener noreferrer"
-												className={`workspace-url-dropdown-item${
-													isActive ? ' workspace-url-dropdown-item--active' : ''
-												}`}
-											>
-												<span className="workspace-url-dropdown-item-label">
-													{stripProtocol(host.url ?? '')}
-												</span>
-												{isActive ? (
-													<Check size={14} className="workspace-url-dropdown-item-check" />
-												) : (
-													<ExternalLink
-														size={12}
-														className="workspace-url-dropdown-item-external"
-													/>
-												)}
-											</a>
-										);
-									})}
-								</div>
-							)}
-						>
-							<Button
-								type="button"
-								size="xs"
-								className="workspace-url-trigger"
-								disabled={isFetchingHosts}
+						<div className="custom-domain-card-meta-row">
+							<Dropdown
+								trigger={['click']}
+								dropdownRender={(): JSX.Element => (
+									<div className="workspace-url-dropdown">
+										<span className="workspace-url-dropdown-header">
+											All Workspace URLs
+										</span>
+										<div className="workspace-url-dropdown-divider" />
+										{sortedHosts.map((host) => {
+											const isActive = host.name === activeHost?.name;
+											return (
+												<a
+													key={host.name}
+													href={host.url}
+													target="_blank"
+													rel="noopener noreferrer"
+													className={`workspace-url-dropdown-item${
+														isActive ? ' workspace-url-dropdown-item--active' : ''
+													}`}
+												>
+													<span className="workspace-url-dropdown-item-label">
+														{stripProtocol(host.url ?? '')}
+													</span>
+													{isActive ? (
+														<Check size={14} className="workspace-url-dropdown-item-check" />
+													) : (
+														<ExternalLink
+															size={12}
+															className="workspace-url-dropdown-item-external"
+														/>
+													)}
+												</a>
+											);
+										})}
+									</div>
+								)}
 							>
-								<Link2 size={12} />
-								<span>{stripProtocol(activeHost?.url ?? '')}</span>
-								<ChevronDown size={12} />
-							</Button>
-						</Dropdown>
-						<span className="custom-domain-card-meta-timezone">
-							<Clock size={11} />
-							{timezone.offset}
-						</span>
+								<Button
+									type="button"
+									size="xs"
+									className="workspace-url-trigger"
+									disabled={isFetchingHosts}
+								>
+									<Link2 size={12} />
+									<span>{stripProtocol(activeHost?.url ?? '')}</span>
+									<ChevronDown size={12} />
+								</Button>
+							</Dropdown>
+							<span className="custom-domain-card-meta-timezone">
+								<Clock size={11} />
+								{timezone.offset}
+							</span>
+						</div>
 					</div>
+
+					<Button
+						variant="solid"
+						size="sm"
+						className="custom-domain-edit-button"
+						prefixIcon={<FilePenLine size={12} />}
+						disabled={isFetchingHosts || isPollingEnabled}
+						onClick={(): void => setIsEditModalOpen(true)}
+					>
+						Edit workspace link
+					</Button>
 				</div>
 
-				<Button
-					variant="solid"
-					size="sm"
-					className="custom-domain-edit-button"
-					prefixIcon={<FilePenLine size={12} />}
-					disabled={isFetchingHosts || isPollingEnabled}
-					onClick={(): void => setIsEditModalOpen(true)}
-				>
-					Edit workspace link
-				</Button>
-			</div>
+				{isPollingEnabled && (
+					<Callout
+						type="info"
+						showIcon
+						className="custom-domain-callout"
+						size="small"
+						icon={<SolidAlertCircle size={13} color="primary" />}
+						message={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
+					/>
+				)}
 
-			{isPollingEnabled && (
-				<Callout
-					type="info"
-					showIcon
-					className="custom-domain-callout"
-					size="small"
-					icon={<SolidAlertCircle size={13} color="primary" />}
-					message={`Updating your URL to ⎯ ${customDomainSubdomain}.${dnsSuffix}. This may take a few mins.`}
-				/>
-			)}
+				<div className="custom-domain-card-divider" />
+
+				<div className="custom-domain-card-bottom">
+					<span className="beacon" />
+					<span className="custom-domain-card-license">
+						{planName && <code className="custom-domain-plan-badge">{planName}</code>}{' '}
+						license is currently active
+					</span>
+				</div>
+			</div>
 
 			<CustomDomainEditModal
 				isOpen={isEditModalOpen}

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

@@ -239,87 +239,4 @@ describe('CustomDomainSettings', () => {
 		const { container } = render(toastRenderer('test-id'));
 		expect(container).toHaveTextContent(/myteam\.test\.cloud/i);
 	});
-
-	describe('Workspace Name rendering', () => {
-		it('renders org displayName when available from appContext', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
-			render(<CustomDomainSettings />, undefined, {
-				appContextOverrides: {
-					org: [{ id: 'xyz', displayName: 'My Org Name', createdAt: 0 }],
-				},
-			});
-
-			expect(await screen.findByText('My Org Name')).toBeInTheDocument();
-		});
-
-		it('falls back to customDomainSubdomain when org displayName is missing', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
-			render(<CustomDomainSettings />, undefined, {
-				appContextOverrides: { org: [] },
-			});
-
-			expect(await screen.findByText('custom-host')).toBeInTheDocument();
-		});
-
-		it('falls back to activeHost.name when neither org name nor custom domain exists', async () => {
-			const onlyDefaultHostResponse = {
-				...mockHostsResponse,
-				data: {
-					...mockHostsResponse.data,
-					hosts: mockHostsResponse.data.hosts
-						? [mockHostsResponse.data.hosts[0]]
-						: [],
-				},
-			};
-
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(onlyDefaultHostResponse)),
-				),
-			);
-
-			render(<CustomDomainSettings />, undefined, {
-				appContextOverrides: { org: [] },
-			});
-
-			// 'accepted-starfish' is the default host's name
-			expect(await screen.findByText('accepted-starfish')).toBeInTheDocument();
-		});
-
-		it('does not render the card name row if workspaceName is totally falsy', async () => {
-			const emptyHostsResponse = {
-				...mockHostsResponse,
-				data: {
-					...mockHostsResponse.data,
-					hosts: [],
-				},
-			};
-
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(emptyHostsResponse)),
-				),
-			);
-
-			const { container } = render(<CustomDomainSettings />, undefined, {
-				appContextOverrides: { org: [] },
-			});
-
-			await screen.findByRole('button', { name: /edit workspace link/i });
-
-			expect(
-				container.querySelector('.custom-domain-card-name-row'),
-			).not.toBeInTheDocument();
-		});
-	});
 });

frontend/src/container/DashboardContainer/DashboardDescription/__tests__/DashboardDescription.test.tsx

@@ -34,6 +34,11 @@ const mockSafeNavigate = jest.fn();
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
+	useRouteMatch: jest.fn().mockReturnValue({
+		params: {
+			dashboardId: 4,
+		},
+	}),
 }));
 
 jest.mock(
@@ -64,7 +69,7 @@ describe('Dashboard landing page actions header tests', () => {
 		(useLocation as jest.Mock).mockReturnValue(mockLocation);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -105,7 +110,7 @@ describe('Dashboard landing page actions header tests', () => {
 		);
 		const { getByTestId } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -144,7 +149,7 @@ describe('Dashboard landing page actions header tests', () => {
 
 		const { getByText } = render(
 			<MemoryRouter initialEntries={[DASHBOARD_PATH]}>
-				<DashboardProvider dashboardId="4">
+				<DashboardProvider>
 					<DashboardDescription
 						handle={{
 							active: false,
@@ -194,6 +199,8 @@ describe('Dashboard landing page actions header tests', () => {
 			setLayouts: jest.fn(),
 			setSelectedDashboard: jest.fn(),
 			updatedTimeRef: { current: null },
+			toScrollWidgetId: '',
+			setToScrollWidgetId: jest.fn(),
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),

frontend/src/container/DashboardContainer/DashboardVariablesSelection/DashboardVariableSelection.tsx

@@ -9,6 +9,7 @@ import {
 } from 'hooks/dashboard/useDashboardVariables';
 import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
 import { updateDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
 import {
 	enqueueDescendantsOfVariable,
@@ -29,7 +30,7 @@ function DashboardVariableSelection(): JSX.Element | null {
 		updateLocalStorageDashboardVariables,
 	} = useDashboard();
 
-	const { updateUrlVariable } = useVariablesFromUrl();
+	const { updateUrlVariable, getUrlVariables } = useVariablesFromUrl();
 
 	const { dashboardVariables } = useDashboardVariables();
 	const dashboardId = useDashboardVariablesSelector(
@@ -49,6 +50,15 @@ function DashboardVariableSelection(): JSX.Element | null {
 		(state) => state.globalTime,
 	);
 
+	useEffect(() => {
+		// Initialize variables with default values if not in URL
+		initializeDefaultVariables(
+			dashboardVariables,
+			getUrlVariables,
+			updateUrlVariable,
+		);
+	}, [getUrlVariables, updateUrlVariable, dashboardVariables]);
+
 	// Memoize the order key to avoid unnecessary triggers
 	const variableOrderKey = useMemo(() => {
 		const queryVariableOrderKey = dependencyData?.order?.join(',') ?? '';

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

@@ -1,9 +1,9 @@
 import { renderHook } from '@testing-library/react';
-import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 
 import { useScrollWidgetIntoView } from '../useScrollWidgetIntoView';
 
-jest.mock('providers/Dashboard/helpers/scrollToWidgetIdHelper');
+jest.mock('providers/Dashboard/Dashboard');
 
 type MockHTMLElement = {
 	scrollIntoView: jest.Mock;
@@ -18,35 +18,25 @@ function createMockElement(): MockHTMLElement {
 }
 
 describe('useScrollWidgetIntoView', () => {
-	const mockedUseScrollToWidgetIdStore = useScrollToWidgetIdStore as jest.MockedFunction<
-		typeof useScrollToWidgetIdStore
+	const mockedUseDashboard = useDashboard as jest.MockedFunction<
+		typeof useDashboard
 	>;
 
-	let mockElement: MockHTMLElement;
-	let ref: React.RefObject<HTMLDivElement>;
-	let setToScrollWidgetId: jest.Mock;
-
-	function mockStore(toScrollWidgetId: string): void {
-		const storeState = { toScrollWidgetId, setToScrollWidgetId };
-		mockedUseScrollToWidgetIdStore.mockImplementation(
-			(selector) =>
-				selector(
-					(storeState as unknown) as Parameters<typeof selector>[0],
-				) as ReturnType<typeof useScrollToWidgetIdStore>,
-		);
-	}
-
 	beforeEach(() => {
 		jest.clearAllMocks();
-		mockElement = createMockElement();
-		ref = ({
-			current: mockElement,
-		} as unknown) as React.RefObject<HTMLDivElement>;
-		setToScrollWidgetId = jest.fn();
 	});
 
 	it('scrolls into view and focuses when toScrollWidgetId matches widget id', () => {
-		mockStore('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));
 
@@ -59,7 +49,16 @@ describe('useScrollWidgetIntoView', () => {
 	});
 
 	it('does nothing when toScrollWidgetId does not match widget id', () => {
-		mockStore('other-widget');
+		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));
 

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

@@ -1,5 +1,5 @@
 import { RefObject, useEffect } from 'react';
-import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 
 /**
  * Scrolls the given widget container into view when the dashboard
@@ -11,10 +11,7 @@ export function useScrollWidgetIntoView<T extends HTMLElement>(
 	widgetId: string,
 	widgetContainerRef: RefObject<T>,
 ): void {
-	const toScrollWidgetId = useScrollToWidgetIdStore((s) => s.toScrollWidgetId);
-	const setToScrollWidgetId = useScrollToWidgetIdStore(
-		(s) => s.setToScrollWidgetId,
-	);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 
 	useEffect(() => {
 		if (toScrollWidgetId === widgetId) {

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

@@ -1,4 +1,5 @@
 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';
@@ -33,6 +34,8 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	useScrollWidgetIntoView(widget.id, graphRef);
+
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 

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

@@ -1,4 +1,5 @@
 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';
@@ -31,6 +32,8 @@ function HistogramPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	useScrollWidgetIntoView(widget.id, graphRef);
+
 	const config = useMemo(() => {
 		return prepareHistogramPanelConfig({
 			widget,

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

@@ -2,6 +2,7 @@ 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';
@@ -32,6 +33,8 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 	const { timezone } = useTimezone();
 
+	useScrollWidgetIntoView(widget.id, graphRef);
+
 	useEffect((): void => {
 		const { startTime, endTime } = getTimeRange(queryResponse);
 

frontend/src/container/GeneralSettings/GeneralSettings.tsx

@@ -10,7 +10,6 @@ import setRetentionApi from 'api/settings/setRetention';
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
 import TextToolTip from 'components/TextToolTip';
 import CustomDomainSettings from 'container/CustomDomainSettings';
-import LicenseKeyRow from 'container/GeneralSettings/LicenseKeyRow/LicenseKeyRow';
 import GeneralSettingsCloud from 'container/GeneralSettingsCloud';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -82,7 +81,7 @@ function GeneralSettings({
 		logsTtlValuesPayload,
 	);
 
-	const { user, activeLicense } = useAppContext();
+	const { user } = useAppContext();
 
 	const [setRetentionPermission] = useComponentPermission(
 		['set_retention_period'],
@@ -681,15 +680,7 @@ function GeneralSettings({
 				</span>
 			</div>
 
-			{(showCustomDomainSettings || activeLicense?.key) && (
-				<div className="custom-domain-card">
-					{showCustomDomainSettings && <CustomDomainSettings />}
-					{showCustomDomainSettings && activeLicense?.key && (
-						<div className="custom-domain-card-divider" />
-					)}
-					{activeLicense?.key && <LicenseKeyRow />}
-				</div>
-			)}
+			{showCustomDomainSettings && <CustomDomainSettings />}
 
 			<div className="retention-controls-container">
 				<div className="retention-controls-header">

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseKeyRow.styles.scss

@@ -1,65 +0,0 @@
-.license-key-row {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: var(--padding-2) var(--padding-3);
-	gap: var(--spacing-5);
-
-	&__left {
-		display: inline-flex;
-		align-items: center;
-		gap: 12px;
-		color: var(--l2-foreground);
-
-		svg {
-			flex-shrink: 0;
-		}
-	}
-
-	&__label {
-		color: var(--l2-foreground);
-		font-size: var(--paragraph-base-400-font-size);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		flex-shrink: 0;
-	}
-
-	&__value {
-		display: inline-flex;
-		align-items: stretch;
-	}
-
-	&__code {
-		display: inline-flex;
-		align-items: center;
-		padding: 1px 2px;
-		border-radius: 2px 0 0 2px;
-		background: var(--l3-background);
-		border: 1px solid var(--l2-border);
-		color: var(--l2-foreground);
-		font-family: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;
-		font-size: var(--paragraph-base-400-font-size);
-		line-height: var(--line-height-20);
-		white-space: nowrap;
-		margin-right: -1px;
-	}
-
-	&__copy-btn {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		width: 26px;
-		padding: 1px 2px;
-		border-radius: 0 2px 2px 0;
-		background: var(--l3-background);
-		border: 1px solid var(--l2-border);
-		color: var(--l2-foreground);
-		cursor: pointer;
-		flex-shrink: 0;
-		height: 24px;
-
-		&:hover {
-			background: var(--l3-background-hover);
-		}
-	}
-}

frontend/src/container/GeneralSettings/LicenseKeyRow/LicenseKeyRow.tsx

@@ -1,48 +0,0 @@
-import { useCopyToClipboard } from 'react-use';
-import { Button } from '@signozhq/button';
-import { Copy, KeyRound } from '@signozhq/icons';
-import { toast } from '@signozhq/sonner';
-import { useAppContext } from 'providers/App/App';
-import { getMaskedKey } from 'utils/maskedKey';
-
-import './LicenseKeyRow.styles.scss';
-
-function LicenseKeyRow(): JSX.Element | null {
-	const { activeLicense } = useAppContext();
-	const [, copyToClipboard] = useCopyToClipboard();
-
-	if (!activeLicense?.key) {
-		return null;
-	}
-
-	const handleCopyLicenseKey = (text: string): void => {
-		copyToClipboard(text);
-		toast.success('License key copied to clipboard.', { richColors: true });
-	};
-
-	return (
-		<div className="license-key-row">
-			<span className="license-key-row__left">
-				<KeyRound size={14} />
-				<span className="license-key-row__label">SigNoz License Key</span>
-			</span>
-			<span className="license-key-row__value">
-				<code className="license-key-row__code">
-					{getMaskedKey(activeLicense.key)}
-				</code>
-				<Button
-					type="button"
-					size="xs"
-					aria-label="Copy license key"
-					data-testid="license-key-row-copy-btn"
-					className="license-key-row__copy-btn"
-					onClick={(): void => handleCopyLicenseKey(activeLicense.key)}
-				>
-					<Copy size={12} />
-				</Button>
-			</span>
-		</div>
-	);
-}
-
-export default LicenseKeyRow;

frontend/src/container/GeneralSettings/LicenseKeyRow/__tests__/LicenseKeyRow.test.tsx

@@ -1,61 +0,0 @@
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
-
-import LicenseKeyRow from '../LicenseKeyRow';
-
-const mockCopyToClipboard = jest.fn();
-
-jest.mock('react-use', () => ({
-	__esModule: true,
-	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopyToClipboard],
-}));
-
-const mockToastSuccess = jest.fn();
-
-jest.mock('@signozhq/sonner', () => ({
-	toast: {
-		success: (...args: unknown[]): unknown => mockToastSuccess(...args),
-	},
-}));
-
-describe('LicenseKeyRow', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders nothing when activeLicense key is absent', () => {
-		const { container } = render(<LicenseKeyRow />, undefined, {
-			appContextOverrides: { activeLicense: null },
-		});
-
-		expect(container).toBeEmptyDOMElement();
-	});
-
-	it('renders label and masked key when activeLicense key exists', () => {
-		render(<LicenseKeyRow />, undefined, {
-			appContextOverrides: {
-				activeLicense: { key: 'abcdefghij' } as any,
-			},
-		});
-
-		expect(screen.getByText('SigNoz License Key')).toBeInTheDocument();
-		expect(screen.getByText('ab·······ij')).toBeInTheDocument();
-	});
-
-	it('calls copyToClipboard and shows success toast when clipboard is available', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
-		render(<LicenseKeyRow />);
-
-		await user.click(screen.getByRole('button', { name: /copy license key/i }));
-
-		await waitFor(() => {
-			expect(mockCopyToClipboard).toHaveBeenCalledWith('test-key');
-			expect(mockToastSuccess).toHaveBeenCalledWith(
-				'License key copied to clipboard.',
-				{
-					richColors: true,
-				},
-			);
-		});
-	});
-});

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -5,7 +5,6 @@ import logEvent from 'api/common/logEvent';
 import { DEFAULT_ENTITY_VERSION, ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { useScrollWidgetIntoView } from 'container/DashboardContainer/visualization/hooks/useScrollWidgetIntoView';
 import { populateMultipleResults } from 'container/NewWidget/LeftContainer/WidgetGraph/util';
 import { CustomTimeType } from 'container/TopNav/DateTimeSelectionV2/types';
 import { useIsPanelWaitingOnVariable } from 'hooks/dashboard/useVariableFetchState';
@@ -68,7 +67,11 @@ function GridCardGraph({
 	const [isInternalServerError, setIsInternalServerError] = useState<boolean>(
 		false,
 	);
-	const { setDashboardQueryRangeCalled } = useDashboard();
+	const {
+		toScrollWidgetId,
+		setToScrollWidgetId,
+		setDashboardQueryRangeCalled,
+	} = useDashboard();
 
 	const {
 		minTime,
@@ -106,11 +109,20 @@ function GridCardGraph({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const widgetContainerRef = useRef<HTMLDivElement>(null);
+	const graphRef = useRef<HTMLDivElement>(null);
 
-	const isVisible = useIntersectionObserver(widgetContainerRef, undefined, true);
+	const isVisible = useIntersectionObserver(graphRef, undefined, true);
 
-	useScrollWidgetIntoView(widget?.id || '', widgetContainerRef);
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
 
 	const updatedQuery = widget?.query;
 
@@ -294,7 +306,7 @@ function GridCardGraph({
 			: headerMenuList;
 
 	return (
-		<div style={{ height: '100%', width: '100%' }} ref={widgetContainerRef}>
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
 			{isEmptyLayout ? (
 				<EmptyWidget />
 			) : (

frontend/src/container/LogsExplorerChart/__tests__/frequencyGraphColor.test.ts

@@ -4,8 +4,8 @@ import { getColorsForSeverityLabels, isRedLike } from '../utils';
 
 describe('getColorsForSeverityLabels', () => {
 	it('should return slate for blank labels', () => {
-		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_VANILLA_400);
-		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_VANILLA_400);
+		expect(getColorsForSeverityLabels('', 0)).toBe(Color.BG_SLATE_300);
+		expect(getColorsForSeverityLabels('   ', 0)).toBe(Color.BG_SLATE_300);
 	});
 
 	it('should return correct colors for known severity variants', () => {

frontend/src/container/LogsExplorerChart/utils.ts

@@ -79,7 +79,7 @@ export function getColorsForSeverityLabels(
 	const trimmed = label.trim();
 
 	if (!trimmed) {
-		return Color.BG_VANILLA_400; // Default color for empty labels
+		return Color.BG_SLATE_300;
 	}
 
 	const variantColor = SEVERITY_VARIANT_COLORS[trimmed];
@@ -119,6 +119,6 @@ export function getColorsForSeverityLabels(
 
 	return (
 		SAFE_FALLBACK_COLORS[index % SAFE_FALLBACK_COLORS.length] ||
-		Color.BG_VANILLA_400
+		Color.BG_SLATE_400
 	);
 }

frontend/src/container/LogsPanelTable/__tests__/LogsPanelComponent.test.tsx

@@ -5,6 +5,7 @@ import NewWidget from 'container/NewWidget';
 import { logsPaginationQueryRangeSuccessResponse } from 'mocks-server/__mockdata__/logs_query_range';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { PreferenceContextProvider } from 'providers/preferences/context/PreferenceContextProvider';
 import i18n from 'ReactI18';
 import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
@@ -103,13 +104,15 @@ describe('LogsPanelComponent', () => {
 	const renderComponent = async (): Promise<void> => {
 		render(
 			<I18nextProvider i18n={i18n}>
-				<PreferenceContextProvider>
-					<NewWidget
-						dashboardId=""
-						selectedDashboard={undefined}
-						selectedGraph={PANEL_TYPES.LIST}
-					/>
-				</PreferenceContextProvider>
+				<DashboardProvider>
+					<PreferenceContextProvider>
+						<NewWidget
+							selectedGraph={PANEL_TYPES.LIST}
+							fillSpans={undefined}
+							yAxisUnit={undefined}
+						/>
+					</PreferenceContextProvider>
+				</DashboardProvider>
 			</I18nextProvider>,
 		);
 

frontend/src/container/MySettings/LicenseSection/LicenseSection.tsx

@@ -4,7 +4,6 @@ import { Typography } from 'antd';
 import { useNotifications } from 'hooks/useNotifications';
 import { Copy } from 'lucide-react';
 import { useAppContext } from 'providers/App/App';
-import { getMaskedKey } from 'utils/maskedKey';
 
 import './LicenseSection.styles.scss';
 
@@ -13,6 +12,15 @@ function LicenseSection(): JSX.Element | null {
 	const { notifications } = useNotifications();
 	const [, handleCopyToClipboard] = useCopyToClipboard();
 
+	const getMaskedKey = (key: string): string => {
+		if (!key || key.length < 4) {
+			return key || 'N/A';
+		}
+		return `${key.substring(0, 2)}********${key
+			.substring(key.length - 2)
+			.trim()}`;
+	};
+
 	const handleCopyKey = (text: string): void => {
 		handleCopyToClipboard(text);
 		notifications.success({

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

@@ -271,7 +271,7 @@ describe('MySettings Flows', () => {
 				},
 			});
 
-			expect(within(container).getByText('ab·······cd')).toBeInTheDocument();
+			expect(within(container).getByText('ab********cd')).toBeInTheDocument();
 		});
 
 		it('Should not mask license key if it is too short', () => {

frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx

@@ -8,15 +8,28 @@ import { QueryBuilderV2 } from 'components/QueryBuilderV2/QueryBuilderV2';
 import TextToolTip from 'components/TextToolTip';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { QBShortcuts } from 'constants/shortcuts/QBShortcuts';
-import { PANEL_TYPE_TO_QUERY_TYPES } from 'container/NewWidget/utils';
+import {
+	getDefaultWidgetData,
+	PANEL_TYPE_TO_QUERY_TYPES,
+} from 'container/NewWidget/utils';
 import RunQueryBtn from 'container/QueryBuilder/components/RunQueryBtn/RunQueryBtn';
+// import { QueryBuilder } from 'container/QueryBuilder';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { useKeyboardHotkeys } from 'hooks/hotkeys/useKeyboardHotkeys';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
 import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { defaultTo, isUndefined } from 'lodash-es';
 import { Atom, Terminal } from 'lucide-react';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import {
+	getNextWidgets,
+	getPreviousWidgets,
+	getSelectedWidgetIndex,
+} from 'providers/Dashboard/util';
 import { Widgets } from 'types/api/dashboard/getAll';
+import { Query } from 'types/api/queryBuilder/queryBuilderData';
 import { EQueryType } from 'types/common/dashboard';
 
 import ClickHouseQueryContainer from './QueryBuilder/clickHouse';
@@ -27,25 +40,77 @@ function QuerySection({
 	selectedGraph,
 	queryRangeKey,
 	isLoadingQueries,
-	selectedWidget,
-	dashboardVersion,
-	dashboardId,
-	dashboardName,
-	isNewPanel,
 }: QueryProps): JSX.Element {
 	const {
 		currentQuery,
 		handleRunQuery: handleRunQueryFromQueryBuilder,
 		redirectWithQueryBuilderData,
 	} = useQueryBuilder();
+	const urlQuery = useUrlQuery();
 	const { registerShortcut, deregisterShortcut } = useKeyboardHotkeys();
 
+	const { selectedDashboard, setSelectedDashboard } = useDashboard();
+
 	const isDarkMode = useIsDarkMode();
 
+	const { widgets } = selectedDashboard?.data || {};
+
+	const getWidget = useCallback(() => {
+		const widgetId = urlQuery.get('widgetId');
+		return defaultTo(
+			widgets?.find((e) => e.id === widgetId),
+			getDefaultWidgetData(widgetId || '', selectedGraph),
+		);
+	}, [urlQuery, widgets, selectedGraph]);
+
+	const selectedWidget = getWidget() as Widgets;
+
 	const { query } = selectedWidget;
 
 	useShareBuilderUrl({ defaultValue: query });
 
+	const handleStageQuery = useCallback(
+		(query: Query): void => {
+			if (selectedDashboard === undefined) {
+				return;
+			}
+
+			const selectedWidgetIndex = getSelectedWidgetIndex(
+				selectedDashboard,
+				selectedWidget.id,
+			);
+
+			const previousWidgets = getPreviousWidgets(
+				selectedDashboard,
+				selectedWidgetIndex,
+			);
+
+			const nextWidgets = getNextWidgets(selectedDashboard, selectedWidgetIndex);
+
+			setSelectedDashboard({
+				...selectedDashboard,
+				data: {
+					...selectedDashboard?.data,
+					widgets: [
+						...previousWidgets,
+						{
+							...selectedWidget,
+							query,
+						},
+						...nextWidgets,
+					],
+				},
+			});
+			handleRunQueryFromQueryBuilder();
+		},
+		[
+			selectedDashboard,
+			selectedWidget,
+			setSelectedDashboard,
+			handleRunQueryFromQueryBuilder,
+		],
+	);
+
 	const handleQueryCategoryChange = useCallback(
 		(qCategory: string): void => {
 			const currentQueryType = qCategory as EQueryType;
@@ -58,16 +123,19 @@ function QuerySection({
 	);
 
 	const handleRunQuery = (): void => {
+		const widgetId = urlQuery.get('widgetId');
+		const isNewPanel = isUndefined(widgets?.find((e) => e.id === widgetId));
+
 		logEvent('Panel Edit: Stage and run query', {
 			dataSource: currentQuery.builder?.queryData?.[0]?.dataSource,
 			panelType: selectedWidget.panelTypes,
 			queryType: currentQuery.queryType,
 			widgetId: selectedWidget.id,
-			dashboardId,
-			dashboardName,
+			dashboardId: selectedDashboard?.id,
+			dashboardName: selectedDashboard?.data.title,
 			isNewPanel,
 		});
-		handleRunQueryFromQueryBuilder();
+		handleStageQuery(currentQuery);
 	};
 
 	const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
@@ -96,7 +164,7 @@ function QuerySection({
 							panelType={selectedGraph}
 							filterConfigs={filterConfigs}
 							showTraceOperator={selectedGraph !== PANEL_TYPES.LIST}
-							version={dashboardVersion || 'v3'}
+							version={selectedDashboard?.data?.version || 'v3'}
 							isListViewPanel={selectedGraph === PANEL_TYPES.LIST}
 							queryComponents={queryComponents}
 							signalSourceChangeEnabled
@@ -136,7 +204,7 @@ function QuerySection({
 		queryComponents,
 		selectedGraph,
 		filterConfigs,
-		dashboardVersion,
+		selectedDashboard?.data?.version,
 		isDarkMode,
 	]);
 
@@ -193,11 +261,6 @@ interface QueryProps {
 	selectedGraph: PANEL_TYPES;
 	queryRangeKey?: QueryKey;
 	isLoadingQueries?: boolean;
-	selectedWidget: Widgets;
-	dashboardVersion?: string;
-	dashboardId?: string;
-	dashboardName?: string;
-	isNewPanel?: boolean;
 }
 
 export default QuerySection;

frontend/src/container/NewWidget/LeftContainer/index.tsx

@@ -30,8 +30,6 @@ function LeftContainer({
 	setRequestData,
 	setQueryResponse,
 	enableDrillDown = false,
-	selectedDashboard,
-	isNewPanel = false,
 }: WidgetGraphProps): JSX.Element {
 	const { stagedQuery } = useQueryBuilder();
 
@@ -77,11 +75,6 @@ function LeftContainer({
 					selectedGraph={selectedGraph}
 					queryRangeKey={queryRangeKey}
 					isLoadingQueries={queryResponse.isFetching}
-					selectedWidget={selectedWidget}
-					dashboardVersion={ENTITY_VERSION_V5}
-					dashboardId={selectedDashboard?.id}
-					dashboardName={selectedDashboard?.data.title}
-					isNewPanel={isNewPanel}
 				/>
 				{selectedGraph === PANEL_TYPES.LIST && (
 					<ExplorerColumnsRenderer

frontend/src/container/NewWidget/RightContainer/__tests__/RightContainer.test.tsx

@@ -8,6 +8,7 @@ import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { AppContext } from 'providers/App/App';
 import { IAppContext } from 'providers/App/types';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { ErrorModalProvider } from 'providers/ErrorModalProvider';
 import { QueryBuilderProvider } from 'providers/QueryBuilder';
 import configureStore from 'redux-mock-store';
@@ -95,7 +96,9 @@ const render = (ui: React.ReactElement): ReturnType<typeof rtlRender> =>
 				<Provider store={createMockStore()}>
 					<AppContext.Provider value={createMockAppContext() as IAppContext}>
 						<ErrorModalProvider>
-							<QueryBuilderProvider>{ui}</QueryBuilderProvider>
+							<DashboardProvider>
+								<QueryBuilderProvider>{ui}</QueryBuilderProvider>
+							</DashboardProvider>
 						</ErrorModalProvider>
 					</AppContext.Provider>
 				</Provider>

frontend/src/container/NewWidget/__test__/NewWidget.test.tsx

@@ -310,12 +310,12 @@ describe('Stacking bar in new panel', () => {
 
 		const { container, getByText } = render(
 			<I18nextProvider i18n={i18n}>
-				<DashboardProvider dashboardId="">
+				<DashboardProvider>
 					<PreferenceContextProvider>
 						<NewWidget
-							dashboardId=""
-							selectedDashboard={undefined}
 							selectedGraph={PANEL_TYPES.BAR}
+							fillSpans={undefined}
+							yAxisUnit={undefined}
 						/>
 					</PreferenceContextProvider>
 				</DashboardProvider>
@@ -356,11 +356,11 @@ describe('when switching to BAR panel type', () => {
 
 	it('should preserve saved stacking value of true', async () => {
 		const { getByTestId, getByText, container } = render(
-			<DashboardProvider dashboardId="">
+			<DashboardProvider>
 				<NewWidget
-					dashboardId=""
-					selectedDashboard={undefined}
 					selectedGraph={PANEL_TYPES.BAR}
+					fillSpans={undefined}
+					yAxisUnit={undefined}
 				/>
 			</DashboardProvider>,
 		);

frontend/src/container/NewWidget/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath, useParams } from 'react-router-dom';
 import { WarningOutlined } from '@ant-design/icons';
 import { Button, Flex, Modal, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
@@ -32,7 +32,8 @@ import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
 import { cloneDeep, defaultTo, isEmpty, isUndefined } from 'lodash-es';
 import { Check, X } from 'lucide-react';
-import { useScrollToWidgetIdStore } from 'providers/Dashboard/helpers/scrollToWidgetIdHelper';
+import { DashboardWidgetPageParams } from 'pages/DashboardWidget';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
 	clearSelectedRowWidgetId,
 	getSelectedRowWidgetId,
@@ -81,15 +82,16 @@ import {
 import './NewWidget.styles.scss';
 
 function NewWidget({
-	selectedDashboard,
-	dashboardId,
 	selectedGraph,
 	enableDrillDown = false,
 }: NewWidgetProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
-	const setToScrollWidgetId = useScrollToWidgetIdStore(
-		(s) => s.setToScrollWidgetId,
-	);
+	const {
+		selectedDashboard,
+		setSelectedDashboard,
+		setToScrollWidgetId,
+		columnWidths,
+	} = useDashboard();
 
 	const { dashboardVariables } = useDashboardVariables();
 
@@ -134,6 +136,8 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
+	const { dashboardId } = useParams<DashboardWidgetPageParams>();
+
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -279,10 +283,11 @@ function NewWidget({
 				isLogScale,
 				legendPosition,
 				customLegendColors,
-				columnWidths: selectedWidget.columnWidths,
+				columnWidths: columnWidths?.[selectedWidget?.id],
 				contextLinks,
 			};
 		});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [
 		columnUnits,
 		currentQuery,
@@ -305,8 +310,8 @@ function NewWidget({
 		isLogScale,
 		legendPosition,
 		customLegendColors,
+		columnWidths,
 		contextLinks,
-		selectedWidget.columnWidths,
 	]);
 
 	const closeModal = (): void => {
@@ -439,19 +444,6 @@ function NewWidget({
 		globalSelectedInterval,
 	]);
 
-	const navigateToDashboardPage = useCallback(() => {
-		const params = new URLSearchParams();
-
-		const urlVariablesQueryString = query.get(QueryParams.variables);
-		if (urlVariablesQueryString) {
-			params.set(QueryParams.variables, urlVariablesQueryString);
-		}
-
-		const search = params.toString() ? `?${params.toString()}` : '';
-
-		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }) + search);
-	}, [dashboardId, query, safeNavigate]);
-
 	const onClickSaveHandler = useCallback(() => {
 		if (!selectedDashboard) {
 			return;
@@ -565,9 +557,12 @@ function NewWidget({
 		};
 
 		updateDashboardMutation.mutateAsync(dashboard, {
-			onSuccess: () => {
+			onSuccess: (updatedDashboard) => {
+				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
-				navigateToDashboardPage();
+				safeNavigate({
+					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
+				});
 			},
 		});
 	}, [
@@ -582,8 +577,9 @@ function NewWidget({
 		preWidgets,
 		updateDashboardMutation,
 		widgets,
+		setSelectedDashboard,
 		setToScrollWidgetId,
-		navigateToDashboardPage,
+		safeNavigate,
 		dashboardId,
 	]);
 
@@ -592,12 +588,12 @@ function NewWidget({
 			setDiscardModal(true);
 			return;
 		}
-		navigateToDashboardPage();
-	}, [isQueryModified, navigateToDashboardPage]);
+		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
+	}, [dashboardId, isQueryModified, safeNavigate]);
 
 	const discardChanges = useCallback(() => {
-		navigateToDashboardPage();
-	}, [navigateToDashboardPage]);
+		safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
+	}, [dashboardId, safeNavigate]);
 
 	const setGraphHandler = (type: PANEL_TYPES): void => {
 		setIsLoadingPanelData(true);
@@ -631,25 +627,22 @@ function NewWidget({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [query]);
 
-	const isNewPanel = useMemo(() => {
-		const widgetId = query.get('widgetId');
-		const selectedWidget = widgets?.find((e) => e.id === widgetId);
-		return isUndefined(selectedWidget);
-	}, [query, widgets]);
-
 	const onSaveDashboard = useCallback((): void => {
+		const widgetId = query.get('widgetId');
+		const selectWidget = widgets?.find((e) => e.id === widgetId);
+
 		logEvent('Panel Edit: Save changes', {
 			panelType: selectedWidget.panelTypes,
 			dashboardId: selectedDashboard?.id,
 			widgetId: selectedWidget.id,
 			dashboardName: selectedDashboard?.data.title,
 			queryType: currentQuery.queryType,
-			isNewPanel,
+			isNewPanel: isUndefined(selectWidget),
 			dataSource: currentQuery?.builder?.queryData?.[0]?.dataSource,
 		});
 		setSaveModal(true);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [isNewPanel]);
+	}, []);
 
 	const isNewTraceLogsAvailable =
 		currentQuery.queryType === EQueryType.QUERY_BUILDER &&
@@ -739,14 +732,12 @@ function NewWidget({
 		}
 		const widgetId = query.get('widgetId') || '';
 		const graphType = query.get('graphType') || '';
-		const variables = query.get(QueryParams.variables) || '';
 		const queryParams = {
 			[QueryParams.expandedWidgetId]: widgetId,
 			[QueryParams.graphType]: graphType,
 			[QueryParams.compositeQuery]: encodeURIComponent(
 				JSON.stringify(currentQuery),
 			),
-			[QueryParams.variables]: variables,
 		};
 
 		const updatedSearch = createQueryParams(queryParams);
@@ -827,8 +818,6 @@ function NewWidget({
 								isLoadingPanelData={isLoadingPanelData}
 								setQueryResponse={setQueryResponse}
 								enableDrillDown={enableDrillDown}
-								selectedDashboard={selectedDashboard}
-								isNewPanel={isNewPanel}
 							/>
 						)}
 					</OverlayScrollbar>

frontend/src/container/NewWidget/types.ts

@@ -2,7 +2,6 @@ import { Dispatch, SetStateAction } from 'react';
 import { UseQueryResult } from 'react-query';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
-import { IDashboardContext } from 'providers/Dashboard/types';
 import { SuccessResponse, Warning } from 'types/api';
 import { Widgets } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -10,9 +9,9 @@ import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 import { timePreferance } from './RightContainer/timeItems';
 
 export interface NewWidgetProps {
-	dashboardId: string;
-	selectedDashboard: IDashboardContext['selectedDashboard'];
 	selectedGraph: PANEL_TYPES;
+	yAxisUnit: Widgets['yAxisUnit'];
+	fillSpans: Widgets['fillSpans'];
 	enableDrillDown?: boolean;
 }
 
@@ -35,8 +34,6 @@ export interface WidgetGraphProps {
 		>
 	>;
 	enableDrillDown?: boolean;
-	selectedDashboard: IDashboardContext['selectedDashboard'];
-	isNewPanel?: boolean;
 }
 
 export type WidgetGraphContainerProps = {

frontend/src/container/PanelWrapper/HistogramPanelWrapper.tsx

@@ -0,0 +1,180 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { ToggleGraphProps } from 'components/Graph/types';
+import Uplot from 'components/Uplot';
+import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
+import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
+import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { getUplotHistogramChartOptions } from 'lib/uPlotLib/getUplotHistogramChartOptions';
+import _noop from 'lodash-es/noop';
+import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+
+import { buildHistogramData } from './histogram';
+import { PanelWrapperProps } from './panelWrapper.types';
+
+function HistogramPanelWrapper({
+	queryResponse,
+	widget,
+	setGraphVisibility,
+	graphVisibility,
+	isFullViewMode,
+	onToggleModelHandler,
+	onClickHandler,
+	enableDrillDown = false,
+}: PanelWrapperProps): JSX.Element {
+	const graphRef = useRef<HTMLDivElement>(null);
+	const legendScrollPositionRef = useRef<number>(0);
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const isDarkMode = useIsDarkMode();
+	const containerDimensions = useResizeObserver(graphRef);
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+	const { menuItemsConfig } = useGraphContextMenu({
+		widgetId: widget.id || '',
+		query: widget.query,
+		graphData: clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+		contextLinks: widget.contextLinks,
+		panelType: widget.panelTypes,
+		queryRange: queryResponse,
+	});
+
+	const clickHandlerWithContextMenu = useCallback(
+		(...args: any[]) => {
+			const [
+				,
+				,
+				,
+				,
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				,
+				focusedSeries,
+			] = args;
+			const data = getUplotClickData({
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				focusedSeries,
+			});
+			if (data && data?.record?.queryName) {
+				onClick(data.coord, { ...data.record, label: data.label });
+			}
+		},
+		[onClick],
+	);
+
+	const histogramData = buildHistogramData(
+		queryResponse.data?.payload.data.result,
+		widget?.bucketWidth,
+		widget?.bucketCount,
+		widget?.mergeAllActiveQueries,
+	);
+
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+	const lineChartRef = useRef<ToggleGraphProps>();
+
+	useEffect(() => {
+		const {
+			graphVisibilityStates: localStoredVisibilityState,
+		} = getLocalStorageGraphVisibilityState({
+			apiResponse: queryResponse.data?.payload.data.result || [],
+			name: widget.id,
+		});
+		if (setGraphVisibility) {
+			setGraphVisibility(localStoredVisibilityState);
+		}
+	}, [
+		queryResponse?.data?.payload?.data?.result,
+		setGraphVisibility,
+		widget.id,
+	]);
+
+	const histogramOptions = useMemo(
+		() =>
+			getUplotHistogramChartOptions({
+				id: widget.id,
+				dimensions: containerDimensions,
+				isDarkMode,
+				apiResponse: queryResponse.data?.payload,
+				histogramData,
+				panelType: widget.panelTypes,
+				setGraphsVisibilityStates: setGraphVisibility,
+				graphsVisibilityStates: graphVisibility,
+				mergeAllQueries: widget.mergeAllActiveQueries,
+				onClickHandler: enableDrillDown
+					? clickHandlerWithContextMenu
+					: onClickHandler ?? _noop,
+				legendScrollPosition: legendScrollPositionRef.current,
+				setLegendScrollPosition: (position: number) => {
+					legendScrollPositionRef.current = position;
+				},
+			}),
+		[
+			containerDimensions,
+			graphVisibility,
+			histogramData,
+			isDarkMode,
+			queryResponse.data?.payload,
+			setGraphVisibility,
+			widget.id,
+			widget.mergeAllActiveQueries,
+			widget.panelTypes,
+			clickHandlerWithContextMenu,
+			enableDrillDown,
+			onClickHandler,
+		],
+	);
+
+	return (
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+			<Uplot options={histogramOptions} data={histogramData} ref={lineChartRef} />
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				title={menuItemsConfig.header as string}
+				items={menuItemsConfig.items}
+				onClose={onClose}
+			/>
+			{isFullViewMode && setGraphVisibility && !widget.mergeAllActiveQueries && (
+				<GraphManager
+					data={histogramData}
+					name={widget.id}
+					options={histogramOptions}
+					yAxisUnit={widget.yAxisUnit}
+					onToggleModelHandler={onToggleModelHandler}
+					setGraphsVisibilityStates={setGraphVisibility}
+					graphsVisibilityStates={graphVisibility}
+					lineChartRef={lineChartRef}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HistogramPanelWrapper;

frontend/src/container/PanelWrapper/UplotPanelWrapper.styles.scss

@@ -0,0 +1,4 @@
+.info-text {
+	margin-top: 8px;
+	padding: 8px;
+}

frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx

@@ -0,0 +1,318 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Alert } from 'antd';
+import { ToggleGraphProps } from 'components/Graph/types';
+import Uplot from 'components/Uplot';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import GraphManager from 'container/GridCardLayout/GridCard/FullView/GraphManager';
+import { getLocalStorageGraphVisibilityState } from 'container/GridCardLayout/GridCard/utils';
+import { getUplotClickData } from 'container/QueryTable/Drilldown/drilldownUtils';
+import useGraphContextMenu from 'container/QueryTable/Drilldown/useGraphContextMenu';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { cloneDeep, isEqual, isUndefined } from 'lodash-es';
+import _noop from 'lodash-es/noop';
+import { ContextMenu, useCoordinates } from 'periscope/components/ContextMenu';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { useTimezone } from 'providers/Timezone';
+import { DataSource } from 'types/common/queryBuilder';
+import uPlot from 'uplot';
+import { getSortedSeriesData } from 'utils/getSortedSeriesData';
+import { getTimeRange } from 'utils/getTimeRange';
+
+import { PanelWrapperProps } from './panelWrapper.types';
+import { getTimeRangeFromStepInterval, isApmMetric } from './utils';
+
+import './UplotPanelWrapper.styles.scss';
+
+function UplotPanelWrapper({
+	queryResponse,
+	widget,
+	isFullViewMode,
+	setGraphVisibility,
+	graphVisibility,
+	onToggleModelHandler,
+	onClickHandler,
+	onDragSelect,
+	selectedGraph,
+	customTooltipElement,
+	customSeries,
+	enableDrillDown = false,
+}: PanelWrapperProps): JSX.Element {
+	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
+	const isDarkMode = useIsDarkMode();
+	const lineChartRef = useRef<ToggleGraphProps>();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
+	const [minTimeScale, setMinTimeScale] = useState<number>();
+	const [maxTimeScale, setMaxTimeScale] = useState<number>();
+	const { currentQuery } = useQueryBuilder();
+
+	const [hiddenGraph, setHiddenGraph] = useState<{ [key: string]: boolean }>();
+
+	useEffect(() => {
+		if (toScrollWidgetId === widget.id) {
+			graphRef.current?.scrollIntoView({
+				behavior: 'smooth',
+				block: 'center',
+			});
+			graphRef.current?.focus();
+			setToScrollWidgetId('');
+		}
+	}, [toScrollWidgetId, setToScrollWidgetId, widget.id]);
+
+	useEffect((): void => {
+		const { startTime, endTime } = getTimeRange(queryResponse);
+
+		setMinTimeScale(startTime);
+		setMaxTimeScale(endTime);
+	}, [queryResponse]);
+
+	const containerDimensions = useResizeObserver(graphRef);
+
+	const {
+		coordinates,
+		popoverPosition,
+		clickedData,
+		onClose,
+		onClick,
+		subMenu,
+		setSubMenu,
+	} = useCoordinates();
+	const { menuItemsConfig } = useGraphContextMenu({
+		widgetId: widget.id || '',
+		query: widget.query,
+		graphData: clickedData,
+		onClose,
+		coordinates,
+		subMenu,
+		setSubMenu,
+		contextLinks: widget.contextLinks,
+		panelType: widget.panelTypes,
+		queryRange: queryResponse,
+	});
+
+	useEffect(() => {
+		const {
+			graphVisibilityStates: localStoredVisibilityState,
+		} = getLocalStorageGraphVisibilityState({
+			apiResponse: queryResponse.data?.payload.data.result || [],
+			name: widget.id,
+		});
+		if (setGraphVisibility) {
+			setGraphVisibility(localStoredVisibilityState);
+		}
+	}, [
+		queryResponse?.data?.payload?.data?.result,
+		setGraphVisibility,
+		widget.id,
+	]);
+
+	if (queryResponse.data && widget.panelTypes === PANEL_TYPES.BAR) {
+		const sortedSeriesData = getSortedSeriesData(
+			queryResponse.data?.payload.data.result,
+		);
+		queryResponse.data.payload.data.result = sortedSeriesData;
+	}
+
+	const stackedBarChart = useMemo(
+		() =>
+			(selectedGraph
+				? selectedGraph === PANEL_TYPES.BAR
+				: widget?.panelTypes === PANEL_TYPES.BAR) && widget?.stackedBarChart,
+		[selectedGraph, widget?.panelTypes, widget?.stackedBarChart],
+	);
+
+	const chartData = useMemo(
+		() =>
+			getUPlotChartData(
+				queryResponse?.data?.payload,
+				widget.fillSpans,
+				stackedBarChart,
+				hiddenGraph,
+			),
+		[
+			queryResponse?.data?.payload,
+			widget.fillSpans,
+			stackedBarChart,
+			hiddenGraph,
+		],
+	);
+
+	useEffect(() => {
+		if (widget.panelTypes === PANEL_TYPES.BAR && stackedBarChart) {
+			const graphV = cloneDeep(graphVisibility)?.slice(1);
+			const isSomeSelectedLegend = graphV?.some((v) => v === false);
+			if (isSomeSelectedLegend) {
+				const hiddenIndex = graphV?.findIndex((v) => v === true);
+				if (!isUndefined(hiddenIndex) && hiddenIndex !== -1) {
+					const updatedHiddenGraph = { [hiddenIndex]: true };
+					if (!isEqual(hiddenGraph, updatedHiddenGraph)) {
+						setHiddenGraph(updatedHiddenGraph);
+					}
+				}
+			}
+		}
+	}, [graphVisibility, hiddenGraph, widget.panelTypes, stackedBarChart]);
+
+	const { timezone } = useTimezone();
+
+	const clickHandlerWithContextMenu = useCallback(
+		(...args: any[]) => {
+			const [
+				xValue,
+				,
+				,
+				,
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				axesData,
+				focusedSeries,
+			] = args;
+			const data = getUplotClickData({
+				metric,
+				queryData,
+				absoluteMouseX,
+				absoluteMouseY,
+				focusedSeries,
+			});
+			// Compute time range if needed and if axes data is available
+			let timeRange;
+			if (axesData && queryData?.queryName) {
+				// Get the compositeQuery from the response params
+				const compositeQuery = (queryResponse?.data?.params as any)?.compositeQuery;
+
+				if (compositeQuery?.queries) {
+					// Find the specific query by name from the queries array
+					const specificQuery = compositeQuery.queries.find(
+						(query: any) => query.spec?.name === queryData.queryName,
+					);
+
+					// Use the stepInterval from the specific query, fallback to default
+					const stepInterval = specificQuery?.spec?.stepInterval || 60;
+					timeRange = getTimeRangeFromStepInterval(
+						stepInterval,
+						metric?.clickedTimestamp || xValue, // Use the clicked timestamp if available, otherwise use the click position timestamp
+						specificQuery?.spec?.signal === DataSource.METRICS &&
+							isApmMetric(specificQuery?.spec?.aggregations[0]?.metricName),
+					);
+				}
+			}
+
+			if (data && data?.record?.queryName) {
+				onClick(data.coord, { ...data.record, label: data.label, timeRange });
+			}
+		},
+		[onClick, queryResponse],
+	);
+
+	const options = useMemo(
+		() =>
+			getUPlotChartOptions({
+				id: widget?.id,
+				apiResponse: queryResponse.data?.payload,
+				dimensions: containerDimensions,
+				isDarkMode,
+				onDragSelect,
+				yAxisUnit: widget?.yAxisUnit,
+				onClickHandler: enableDrillDown
+					? clickHandlerWithContextMenu
+					: onClickHandler ?? _noop,
+				thresholds: widget.thresholds,
+				minTimeScale,
+				maxTimeScale,
+				softMax: widget.softMax === undefined ? null : widget.softMax,
+				softMin: widget.softMin === undefined ? null : widget.softMin,
+				graphsVisibilityStates: graphVisibility,
+				setGraphsVisibilityStates: setGraphVisibility,
+				panelType: selectedGraph || widget.panelTypes,
+				currentQuery,
+				stackBarChart: stackedBarChart,
+				hiddenGraph,
+				setHiddenGraph,
+				customTooltipElement,
+				tzDate: (timestamp: number) =>
+					uPlot.tzDate(new Date(timestamp * 1e3), timezone.value),
+				timezone: timezone.value,
+				customSeries,
+				isLogScale: widget?.isLogScale,
+				colorMapping: widget?.customLegendColors,
+				enhancedLegend: true, // Enable enhanced legend
+				legendPosition: widget?.legendPosition,
+				query: widget?.query || currentQuery,
+				legendScrollPosition: legendScrollPositionRef.current,
+				setLegendScrollPosition: (position: {
+					scrollTop: number;
+					scrollLeft: number;
+				}) => {
+					legendScrollPositionRef.current = position;
+				},
+				decimalPrecision: widget.decimalPrecision,
+			}),
+		[
+			queryResponse.data?.payload,
+			containerDimensions,
+			isDarkMode,
+			onDragSelect,
+			clickHandlerWithContextMenu,
+			minTimeScale,
+			maxTimeScale,
+			graphVisibility,
+			setGraphVisibility,
+			selectedGraph,
+			currentQuery,
+			hiddenGraph,
+			customTooltipElement,
+			timezone.value,
+			customSeries,
+			enableDrillDown,
+			onClickHandler,
+			widget,
+			stackedBarChart,
+		],
+	);
+
+	return (
+		<div style={{ height: '100%', width: '100%' }} ref={graphRef}>
+			<Uplot options={options} data={chartData} ref={lineChartRef} />
+			<ContextMenu
+				coordinates={coordinates}
+				popoverPosition={popoverPosition}
+				title={menuItemsConfig.header as string}
+				items={menuItemsConfig.items}
+				onClose={onClose}
+			/>
+			{stackedBarChart && isFullViewMode && (
+				<Alert
+					message="Selecting multiple legends is currently not supported in case of stacked bar charts"
+					type="info"
+					className="info-text"
+				/>
+			)}
+			{isFullViewMode && setGraphVisibility && !stackedBarChart && (
+				<GraphManager
+					data={chartData}
+					name={widget.id}
+					options={options}
+					yAxisUnit={widget.yAxisUnit}
+					onToggleModelHandler={onToggleModelHandler}
+					setGraphsVisibilityStates={setGraphVisibility}
+					graphsVisibilityStates={graphVisibility}
+					lineChartRef={lineChartRef}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default UplotPanelWrapper;

frontend/src/container/SideNav/config.ts

@@ -38,7 +38,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.MY_SETTINGS]: [QueryParams.resourceAttributes],
 	[ROUTES.NOT_FOUND]: [QueryParams.resourceAttributes],
 	[ROUTES.ORG_SETTINGS]: [QueryParams.resourceAttributes],
-	[ROUTES.MEMBERS_SETTINGS]: [QueryParams.resourceAttributes],
 	[ROUTES.PASSWORD_RESET]: [QueryParams.resourceAttributes],
 	[ROUTES.SETTINGS]: [QueryParams.resourceAttributes],
 	[ROUTES.SIGN_UP]: [QueryParams.resourceAttributes],

frontend/src/hooks/dashboard/__test__/useTransformDashboardVariables.test.tsx

@@ -1,339 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
-import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
-
-jest.mock('hooks/dashboard/useDashboardFromLocalStorage');
-jest.mock('hooks/dashboard/useVariablesFromUrl');
-
-const mockUseDashboardVariablesFromLocalStorage = useDashboardVariablesFromLocalStorage as jest.MockedFunction<
-	typeof useDashboardVariablesFromLocalStorage
->;
-const mockUseVariablesFromUrl = useVariablesFromUrl as jest.MockedFunction<
-	typeof useVariablesFromUrl
->;
-
-const makeVariable = (
-	overrides: Partial<IDashboardVariable> = {},
-): IDashboardVariable => ({
-	id: 'existing-id',
-	name: 'env',
-	description: '',
-	type: 'QUERY',
-	sort: 'DISABLED',
-	multiSelect: false,
-	showALLOption: false,
-	selectedValue: 'prod',
-	...overrides,
-});
-
-const makeDashboard = (
-	variables: Record<string, IDashboardVariable>,
-): Dashboard => ({
-	id: 'dash-1',
-	createdAt: '',
-	updatedAt: '',
-	createdBy: '',
-	updatedBy: '',
-	data: {
-		title: 'Test',
-		variables,
-	},
-});
-
-const setupHook = (
-	currentDashboard: Record<string, any> = {},
-	urlVariables: Record<string, any> = {},
-): ReturnType<typeof useTransformDashboardVariables> => {
-	mockUseDashboardVariablesFromLocalStorage.mockReturnValue({
-		currentDashboard,
-		updateLocalStorageDashboardVariables: jest.fn(),
-	});
-	mockUseVariablesFromUrl.mockReturnValue({
-		getUrlVariables: () => urlVariables,
-		setUrlVariables: jest.fn(),
-		updateUrlVariable: jest.fn(),
-	});
-
-	const { result } = renderHook(() => useTransformDashboardVariables('dash-1'));
-	return result.current;
-};
-
-describe('useTransformDashboardVariables', () => {
-	beforeEach(() => jest.clearAllMocks());
-
-	describe('order assignment', () => {
-		it('assigns order starting from 0 to variables that have none', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
-				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			const orders = Object.values(result.data.variables).map((v) => v.order);
-			expect(orders).toContain(0);
-			expect(orders).toContain(1);
-		});
-
-		it('preserves existing order values', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: 5 }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.order).toBe(5);
-		});
-
-		it('assigns unique orders across multiple variables that all lack an order', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'v1', order: undefined }),
-				v2: makeVariable({ id: 'id2', name: 'v2', order: undefined }),
-				v3: makeVariable({ id: 'id3', name: 'v3', order: undefined }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			const orders = Object.values(result.data.variables).map((v) => v.order);
-			// All three newly assigned orders must be distinct
-			expect(new Set(orders).size).toBe(3);
-		});
-	});
-
-	describe('ID assignment', () => {
-		it('assigns a UUID to variables that have no id', () => {
-			const { transformDashboardVariables } = setupHook();
-			const variable = makeVariable({ name: 'v1' });
-			(variable as any).id = undefined;
-			const dashboard = makeDashboard({ v1: variable });
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.id).toMatch(
-				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
-			);
-		});
-
-		it('preserves existing IDs', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'keep-me', name: 'v1' }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.id).toBe('keep-me');
-		});
-	});
-
-	describe('TEXTBOX backward compatibility', () => {
-		it('copies textboxValue to defaultValue when defaultValue is missing', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'v1',
-					type: 'TEXTBOX',
-					textboxValue: 'hello',
-					defaultValue: undefined,
-					order: undefined,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.defaultValue).toBe('hello');
-		});
-
-		it('does not overwrite an existing defaultValue', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'v1',
-					type: 'TEXTBOX',
-					textboxValue: 'old',
-					defaultValue: 'keep',
-					order: undefined,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.defaultValue).toBe('keep');
-		});
-	});
-
-	describe('localStorage merge', () => {
-		it('applies localStorage selectedValue over DB value', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: 'staging', allSelected: false },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('staging');
-		});
-
-		it('applies localStorage allSelected over DB value', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: undefined, allSelected: true },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					allSelected: false,
-					showALLOption: true,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-	});
-
-	describe('URL variable override', () => {
-		it('sets allSelected=true when URL value is __ALL__', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: 'prod', allSelected: false } },
-				{ env: '__ALL__' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: true,
-					allSelected: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-
-		it('sets selectedValue from URL and clears allSelected when showALLOption is true', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: undefined, allSelected: true } },
-				{ env: 'dev' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: true,
-					allSelected: true,
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('dev');
-			expect(result.data.variables.v1.allSelected).toBe(false);
-		});
-
-		it('does not set allSelected=false when showALLOption is false', () => {
-			const { transformDashboardVariables } = setupHook(
-				{ env: { selectedValue: undefined, allSelected: true } },
-				{ env: 'dev' },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					showALLOption: false,
-					allSelected: true,
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('dev');
-			expect(result.data.variables.v1.allSelected).toBe(true);
-		});
-
-		it('normalizes array URL value to single value for single-select variable', () => {
-			const { transformDashboardVariables } = setupHook(
-				{},
-				{ env: ['prod', 'dev'] },
-			);
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					multiSelect: false,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('prod');
-		});
-
-		it('wraps single URL value in array for multi-select variable', () => {
-			const { transformDashboardVariables } = setupHook({}, { env: 'prod' });
-			const dashboard = makeDashboard({
-				v1: makeVariable({
-					id: 'id1',
-					name: 'env',
-					multiSelect: true,
-				}),
-			});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toEqual(['prod']);
-		});
-
-		it('looks up URL variable by variable id when name is absent', () => {
-			const { transformDashboardVariables } = setupHook(
-				{},
-				{ 'var-uuid': 'fallback' },
-			);
-			const variable = makeVariable({ id: 'var-uuid', multiSelect: false });
-			delete variable.name;
-			const dashboard = makeDashboard({ v1: variable });
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables.v1.selectedValue).toBe('fallback');
-		});
-	});
-
-	describe('edge cases', () => {
-		it('returns data unchanged when there are no variables', () => {
-			const { transformDashboardVariables } = setupHook();
-			const dashboard = makeDashboard({});
-
-			const result = transformDashboardVariables(dashboard);
-
-			expect(result.data.variables).toEqual({});
-		});
-
-		it('does not mutate the original dashboard', () => {
-			const { transformDashboardVariables } = setupHook({
-				env: { selectedValue: 'staging', allSelected: false },
-			});
-			const dashboard = makeDashboard({
-				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
-			});
-			const originalValue = dashboard.data.variables.v1.selectedValue;
-
-			transformDashboardVariables(dashboard);
-
-			expect(dashboard.data.variables.v1.selectedValue).toBe(originalValue);
-		});
-	});
-});

frontend/src/hooks/dashboard/useDashboardFromLocalStorage.tsx

@@ -15,7 +15,7 @@ interface DashboardLocalStorageVariables {
 	[id: string]: LocalStoreDashboardVariables;
 }
 
-export interface UseDashboardVariablesFromLocalStorageReturn {
+interface UseDashboardVariablesFromLocalStorageReturn {
 	currentDashboard: LocalStoreDashboardVariables;
 	updateLocalStorageDashboardVariables: (
 		id: string,

frontend/src/hooks/dashboard/useTransformDashboardVariables.ts

@@ -1,128 +0,0 @@
-import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
-import {
-	useDashboardVariablesFromLocalStorage,
-	UseDashboardVariablesFromLocalStorageReturn,
-} from 'hooks/dashboard/useDashboardFromLocalStorage';
-import useVariablesFromUrl, {
-	UseVariablesFromUrlReturn,
-} from 'hooks/dashboard/useVariablesFromUrl';
-import { isEmpty } from 'lodash-es';
-import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
-import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
-import { v4 as generateUUID } from 'uuid';
-
-export function useTransformDashboardVariables(
-	dashboardId: string,
-): Pick<UseVariablesFromUrlReturn, 'getUrlVariables' | 'updateUrlVariable'> &
-	UseDashboardVariablesFromLocalStorageReturn & {
-		transformDashboardVariables: (data: Dashboard) => Dashboard;
-	} {
-	const {
-		currentDashboard,
-		updateLocalStorageDashboardVariables,
-	} = useDashboardVariablesFromLocalStorage(dashboardId);
-	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
-
-	const mergeDBWithLocalStorage = (
-		data: Dashboard,
-		localStorageVariables: any,
-	): Dashboard => {
-		const updatedData = data;
-		if (data && localStorageVariables) {
-			const updatedVariables = data.data.variables;
-			const variablesFromUrl = getUrlVariables();
-			Object.keys(data.data.variables).forEach((variable) => {
-				const variableData = data.data.variables[variable];
-
-				// values from url
-				const urlVariable = variableData?.name
-					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
-					: variablesFromUrl[variableData.id];
-
-				let updatedVariable = {
-					...data.data.variables[variable],
-					...localStorageVariables[variableData.name as any],
-				};
-
-				// respect the url variable if it is set, override the others
-				if (!isEmpty(urlVariable)) {
-					if (urlVariable === ALL_SELECTED_VALUE) {
-						updatedVariable = {
-							...updatedVariable,
-							allSelected: true,
-						};
-					} else {
-						// Normalize URL value to match variable's multiSelect configuration
-						const normalizedValue = normalizeUrlValueForVariable(
-							urlVariable,
-							variableData,
-						);
-
-						updatedVariable = {
-							...updatedVariable,
-							selectedValue: normalizedValue,
-							// Only set allSelected to false if showALLOption is available
-							...(updatedVariable?.showALLOption && { allSelected: false }),
-						};
-					}
-				}
-
-				updatedVariables[variable] = updatedVariable;
-			});
-			updatedData.data.variables = updatedVariables;
-		}
-		return updatedData;
-	};
-
-	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
-	// eslint-disable-next-line sonarjs/cognitive-complexity
-	const transformDashboardVariables = (data: Dashboard): Dashboard => {
-		if (data && data.data && data.data.variables) {
-			const clonedDashboardData = mergeDBWithLocalStorage(
-				JSON.parse(JSON.stringify(data)),
-				currentDashboard,
-			);
-			const { variables } = clonedDashboardData.data;
-			const existingOrders: Set<number> = new Set();
-
-			for (const key in variables) {
-				// eslint-disable-next-line no-prototype-builtins
-				if (variables.hasOwnProperty(key)) {
-					const variable: IDashboardVariable = variables[key];
-
-					// Check if 'order' property doesn't exist or is undefined
-					if (variable.order === undefined) {
-						// Find a unique order starting from 0
-						let order = 0;
-						while (existingOrders.has(order)) {
-							order += 1;
-						}
-
-						variable.order = order;
-						existingOrders.add(order);
-						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
-						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
-							variable.defaultValue = variable.textboxValue || '';
-						}
-					}
-
-					if (variable.id === undefined) {
-						variable.id = generateUUID();
-					}
-				}
-			}
-
-			return clonedDashboardData;
-		}
-
-		return data;
-	};
-
-	return {
-		transformDashboardVariables,
-		getUrlVariables,
-		updateUrlVariable,
-		currentDashboard,
-		updateLocalStorageDashboardVariables,
-	};
-}

frontend/src/hooks/dashboard/useVariablesFromUrl.tsx

@@ -11,7 +11,7 @@ export interface LocalStoreDashboardVariables {
 		| IDashboardVariable['selectedValue'];
 }
 
-export interface UseVariablesFromUrlReturn {
+interface UseVariablesFromUrlReturn {
 	getUrlVariables: () => LocalStoreDashboardVariables;
 	setUrlVariables: (variables: LocalStoreDashboardVariables) => void;
 	updateUrlVariable: (

frontend/src/hooks/queryBuilder/useCreateAlerts.tsx

@@ -107,6 +107,7 @@ const useCreateAlerts = (widget?: Widgets, caller?: string): VoidFunction => {
 		queryRangeMutation,
 		dashboardVariables,
 		dashboardDynamicVariables,
+		selectedDashboard?.data.version,
 		widget,
 	]);
 };

frontend/src/hooks/useAuthZ/permissions.type.ts

@@ -23,10 +23,10 @@ export default {
 		relations: {
 			assignee: ['role'],
 			create: ['metaresources'],
-			delete: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
+			delete: ['user', 'role', 'organization', 'metaresource'],
 			list: ['metaresources'],
-			read: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
-			update: ['user', 'serviceaccount', 'role', 'organization', 'metaresource'],
+			read: ['user', 'role', 'organization', 'metaresource'],
+			update: ['user', 'role', 'organization', 'metaresource'],
 		},
 	},
 } as const;

frontend/src/pages/DashboardPage/index.tsx

@@ -1,16 +1,3 @@
-import { useParams } from 'react-router-dom';
-import { DashboardProvider } from 'providers/Dashboard/Dashboard';
-
 import DashboardPage from './DashboardPage';
 
-function DashboardPageWithProvider(): JSX.Element {
-	const { dashboardId } = useParams<{ dashboardId: string }>();
-
-	return (
-		<DashboardProvider dashboardId={dashboardId}>
-			<DashboardPage />
-		</DashboardProvider>
-	);
-}
-
-export default DashboardPageWithProvider;
+export default DashboardPage;

frontend/src/pages/DashboardWidget/__tests__/DashboardWidget.test.tsx

@@ -1,146 +0,0 @@
-import { Route } from 'react-router-dom';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { rest, server } from 'mocks-server/server';
-import { render, screen, waitFor } from 'tests/test-utils';
-
-import DashboardWidget from '../index';
-
-const DASHBOARD_ID = 'dash-1';
-const WIDGET_ID = 'widget-abc';
-
-const mockDashboardResponse = {
-	status: 'success',
-	data: {
-		id: DASHBOARD_ID,
-		createdAt: '2024-01-01T00:00:00Z',
-		createdBy: 'test',
-		updatedAt: '2024-01-01T00:00:00Z',
-		updatedBy: 'test',
-		isLocked: false,
-		data: {
-			collapsableRowsMigrated: true,
-			description: '',
-			name: '',
-			panelMap: {},
-			tags: [],
-			title: 'Test Dashboard',
-			uploadedGrafana: false,
-			uuid: '',
-			version: '',
-			variables: {},
-			widgets: [],
-			layout: [],
-		},
-	},
-};
-
-const mockSafeNavigate = jest.fn();
-
-jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
-		safeNavigate: mockSafeNavigate,
-	}),
-}));
-
-jest.mock('container/NewWidget', () => ({
-	__esModule: true,
-	default: (): JSX.Element => <div data-testid="new-widget">NewWidget</div>,
-}));
-
-// nuqs's useQueryState doesn't read from MemoryRouter, so we mock it to return
-// controlled values via the `mockQueryState` map below.
-const mockQueryState: Record<string, string | null> = {};
-
-jest.mock('nuqs', () => ({
-	...jest.requireActual('nuqs'),
-	useQueryState: (key: string): [string | null, jest.Mock] => [
-		mockQueryState[key] ?? null,
-		jest.fn(),
-	],
-}));
-
-// Wrap component in a Route so useParams can resolve dashboardId
-function renderAtRoute(
-	queryState: Record<string, string | null> = {},
-): ReturnType<typeof render> {
-	Object.assign(mockQueryState, queryState);
-	return render(
-		<Route path="/dashboard/:dashboardId/new">
-			<DashboardWidget />
-		</Route>,
-		undefined,
-		{ initialRoute: `/dashboard/${DASHBOARD_ID}/new` },
-	);
-}
-
-beforeEach(() => {
-	mockSafeNavigate.mockClear();
-	Object.keys(mockQueryState).forEach((k) => delete mockQueryState[k]);
-});
-
-describe('DashboardWidget', () => {
-	it('redirects to dashboard when widgetId is missing', async () => {
-		renderAtRoute({ graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
-		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
-	});
-
-	it('redirects to dashboard when graphType is missing', async () => {
-		renderAtRoute({ widgetId: WIDGET_ID });
-
-		await waitFor(() => {
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		const [navigatedTo] = mockSafeNavigate.mock.calls[0];
-		expect(navigatedTo).toContain(`/dashboard/${DASHBOARD_ID}`);
-	});
-
-	it('shows spinner while dashboard is loading', () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.delay('infinite')),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		expect(screen.getByRole('img', { name: 'loading' })).toBeInTheDocument();
-	});
-
-	it('shows error message when dashboard fetch fails', async () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.status(500), ctx.json({ status: 'error' })),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(screen.getByText('Something went wrong')).toBeInTheDocument();
-		});
-	});
-
-	it('renders NewWidget when dashboard loads successfully', async () => {
-		server.use(
-			rest.get(
-				`http://localhost/api/v1/dashboards/${DASHBOARD_ID}`,
-				(_req, res, ctx) => res(ctx.status(200), ctx.json(mockDashboardResponse)),
-			),
-		);
-
-		renderAtRoute({ widgetId: WIDGET_ID, graphType: PANEL_TYPES.TIME_SERIES });
-
-		await waitFor(() => {
-			expect(screen.getByTestId('new-widget')).toBeInTheDocument();
-		});
-	});
-});

frontend/src/pages/DashboardWidget/index.tsx

@@ -1,98 +1,50 @@
 import { useEffect, useState } from 'react';
-import { useQuery } from 'react-query';
-import { generatePath, useParams } from 'react-router-dom';
+import { generatePath, useLocation, useParams } from 'react-router-dom';
 import { Card, Typography } from 'antd';
-import getDashboard from 'api/v1/dashboards/id/get';
 import Spinner from 'components/Spinner';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import { DASHBOARD_CACHE_TIME } from 'constants/queryCacheTime';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
 import ROUTES from 'constants/routes';
 import NewWidget from 'container/NewWidget';
 import { isDrilldownEnabled } from 'container/QueryTable/Drilldown/drilldownUtils';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { parseAsStringEnum, useQueryState } from 'nuqs';
-import { setDashboardVariablesStore } from 'providers/Dashboard/store/dashboardVariables/dashboardVariablesStore';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useDashboard } from 'providers/Dashboard/Dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
 
 function DashboardWidget(): JSX.Element | null {
-	const { dashboardId } = useParams<{
-		dashboardId: string;
-	}>();
-	const [widgetId] = useQueryState('widgetId');
-	const [graphType] = useQueryState(
-		'graphType',
-		parseAsStringEnum<PANEL_TYPES>(Object.values(PANEL_TYPES)),
-	);
-
+	const { search } = useLocation();
+	const { dashboardId } = useParams<DashboardWidgetPageParams>();
 	const { safeNavigate } = useSafeNavigate();
 
+	const [selectedGraph, setSelectedGraph] = useState<PANEL_TYPES>();
+
+	const { selectedDashboard, dashboardResponse } = useDashboard();
+
+	const params = useUrlQuery();
+
+	const widgetId = params.get('widgetId');
+	const { data } = selectedDashboard || {};
+	const { widgets } = data || {};
+
+	const selectedWidget = widgets?.find((e) => e.id === widgetId) as Widgets;
+
 	useEffect(() => {
-		if (!graphType || !widgetId) {
+		const params = new URLSearchParams(search);
+		const graphType = params.get('graphType') as PANEL_TYPES | null;
+
+		if (graphType === null) {
 			safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
-		} else if (!dashboardId) {
-			safeNavigate(ROUTES.HOME);
+		} else {
+			setSelectedGraph(graphType);
 		}
-	}, [graphType, widgetId, dashboardId, safeNavigate]);
+	}, [dashboardId, safeNavigate, search]);
 
-	if (!widgetId || !graphType) {
-		return null;
-	}
-
-	return (
-		<DashboardWidgetInternal
-			dashboardId={dashboardId}
-			widgetId={widgetId}
-			graphType={graphType}
-		/>
-	);
-}
-
-function DashboardWidgetInternal({
-	dashboardId,
-	widgetId,
-	graphType,
-}: {
-	dashboardId: string;
-	widgetId: string;
-	graphType: PANEL_TYPES;
-}): JSX.Element | null {
-	const [selectedDashboard, setSelectedDashboard] = useState<
-		Dashboard | undefined
-	>(undefined);
-
-	const { transformDashboardVariables } = useTransformDashboardVariables(
-		dashboardId,
-	);
-
-	const {
-		isFetching: isFetchingDashboardResponse,
-		isError: isErrorDashboardResponse,
-	} = useQuery([REACT_QUERY_KEY.DASHBOARD_BY_ID, dashboardId, widgetId], {
-		enabled: true,
-		queryFn: async () =>
-			await getDashboard({
-				id: dashboardId,
-			}),
-		refetchOnWindowFocus: false,
-		cacheTime: DASHBOARD_CACHE_TIME,
-		onSuccess: (response) => {
-			const updatedDashboardData = transformDashboardVariables(response.data);
-			setSelectedDashboard(updatedDashboardData);
-			setDashboardVariablesStore({
-				dashboardId,
-				variables: updatedDashboardData.data.variables,
-			});
-		},
-	});
-
-	if (isFetchingDashboardResponse) {
+	if (selectedGraph === undefined || dashboardResponse.isLoading) {
 		return <Spinner tip="Loading.." />;
 	}
 
-	if (isErrorDashboardResponse) {
+	if (dashboardResponse.isError) {
 		return (
 			<Card>
 				<Typography>{SOMETHING_WENT_WRONG}</Typography>
@@ -102,11 +54,16 @@ function DashboardWidgetInternal({
 
 	return (
 		<NewWidget
-			dashboardId={dashboardId}
-			selectedGraph={graphType}
+			yAxisUnit={selectedWidget?.yAxisUnit}
+			selectedGraph={selectedGraph}
+			fillSpans={selectedWidget?.fillSpans}
 			enableDrillDown={isDrilldownEnabled()}
-			selectedDashboard={selectedDashboard}
 		/>
 	);
 }
+
+export interface DashboardWidgetPageParams {
+	dashboardId: string;
+}
+
 export default DashboardWidget;

frontend/src/pages/DashboardsListPage/__tests__/DashboardListPage.test.tsx

@@ -8,6 +8,7 @@ import {
 } from 'mocks-server/__mockdata__/dashboards';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
+import { DashboardProvider } from 'providers/Dashboard/Dashboard';
 import { fireEvent, render, waitFor } from 'tests/test-utils';
 
 jest.mock('container/DashboardContainer/DashboardDescription/utils', () => ({
@@ -18,6 +19,11 @@ jest.mock('container/DashboardContainer/DashboardDescription/utils', () => ({
 jest.mock('react-router-dom', () => ({
 	...jest.requireActual('react-router-dom'),
 	useLocation: jest.fn(),
+	useRouteMatch: jest.fn().mockReturnValue({
+		params: {
+			dashboardId: 4,
+		},
+	}),
 }));
 
 const mockWindowOpen = jest.fn();
@@ -41,7 +47,9 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=asgard&order=stones&page=1']}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -63,7 +71,9 @@ describe('dashboard list page', () => {
 			<MemoryRouter
 				initialEntries={['/dashbords?columnKey=createdAt&order=descend&page=1']}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -82,7 +92,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -123,7 +135,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -150,7 +164,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 
@@ -180,7 +196,9 @@ describe('dashboard list page', () => {
 					'/dashbords?columnKey=createdAt&order=descend&page=1&search=tho',
 				]}
 			>
-				<DashboardsList />
+				<DashboardProvider>
+					<DashboardsList />
+				</DashboardProvider>
 			</MemoryRouter>,
 		);
 

frontend/src/pages/Settings/Settings.tsx

@@ -63,7 +63,6 @@ function SettingsPage(): JSX.Element {
 						isAdmin &&
 						(item.key === ROUTES.BILLING ||
 							item.key === ROUTES.ORG_SETTINGS ||
-							item.key === ROUTES.MEMBERS_SETTINGS ||
 							item.key === ROUTES.MY_SETTINGS ||
 							item.key === ROUTES.SHORTCUTS)
 					),

frontend/src/pages/Settings/utils.ts

@@ -36,7 +36,6 @@ export const getRoutes = (
 	if (isWorkspaceBlocked && isAdmin) {
 		settings.push(
 			...organizationSettings(t),
-			...membersSettings(t),
 			...mySettings(t),
 			...billingSettings(t),
 			...keyboardShortcuts(t),

frontend/src/pages/TraceDetailV2/index.tsx

@@ -4,19 +4,11 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Compass, Cone, TowerControl } from 'lucide-react';
 
-import TraceDetailsV2 from './TraceDetailV2';
+import TraceDetailsV3 from '../TraceDetailsV3';
 
 import './TraceDetailV2.styles.scss';
 
-interface INewTraceDetailProps {
-	items: {
-		label: JSX.Element;
-		key: string;
-		children: JSX.Element;
-	}[];
-}
-
-function NewTraceDetail(props: INewTraceDetailProps): JSX.Element {
+function NewTraceDetail(props: any): JSX.Element {
 	const { items } = props;
 	return (
 		<div className="traces-module-container">
@@ -50,7 +42,7 @@ export default function TraceDetailsPage(): JSX.Element {
 				</div>
 			),
 			key: 'trace-details',
-			children: <TraceDetailsV2 />,
+			children: <TraceDetailsV3 />,
 		},
 		{
 			label: (

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.styles.scss

@@ -0,0 +1,91 @@
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 0px 16px;
+
+	.previous-btn {
+		display: flex;
+		height: 30px;
+		padding: 6px 8px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		background: var(--bg-slate-500);
+		border-radius: 4px;
+		box-shadow: none;
+	}
+
+	.trace-name {
+		display: flex;
+		padding: 6px 8px;
+		margin-left: 6px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 4px 0px 0px 4px;
+		background: var(--bg-slate-500);
+
+		.drafting {
+			color: white;
+		}
+
+		.trace-id {
+			color: #fff;
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.trace-id-value {
+		display: flex;
+		padding: 6px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		background: var(--bg-slate-400);
+		color: var(--Vanilla-400, #c0c1c3);
+		font-family: Inter;
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px;
+		letter-spacing: -0.07px;
+		border: 1px solid var(--bg-slate-300);
+		border-left: unset;
+		border-radius: 0px 4px 4px 0px;
+	}
+}
+
+.lightMode {
+	.trace-details-header {
+		.previous-btn {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+		}
+
+		.trace-name {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+			border-right: none;
+
+			.drafting {
+				color: var(--bg-ink-100);
+			}
+
+			.trace-id {
+				color: var(--bg-ink-100);
+			}
+		}
+
+		.trace-id-value {
+			background: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+}
+// TODO: move to new css module name system

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ArrowLeft } from 'lucide-react';
+import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+
+import './TraceDetailsHeader.styles.scss';
+
+function TraceDetailsHeader(): JSX.Element {
+	const { id: traceID } = useParams<TraceDetailV2URLProps>();
+
+	const handlePreviousBtnClick = useCallback((): void => {
+		const isSpaNavigate =
+			document.referrer &&
+			new URL(document.referrer).origin === window.location.origin;
+		if (isSpaNavigate) {
+			history.goBack();
+		} else {
+			history.push(ROUTES.TRACES_EXPLORER);
+		}
+	}, []);
+
+	return (
+		<div className="trace-details-header">
+			<Button className="previous-btn" onClick={handlePreviousBtnClick}>
+				<ArrowLeft size={14} />
+			</Button>
+			<div className="trace-name">
+				<Typography.Text className="trace-id">Trace ID</Typography.Text>
+			</div>
+			<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
+		</div>
+	);
+}
+
+export default TraceDetailsHeader;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TimelineV3 from 'components/TimelineV3/TimelineV3';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { DEFAULT_ROW_HEIGHT } from './constants';
+import { useCanvasSetup } from './hooks/useCanvasSetup';
+import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
+import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
+import { useFlamegraphHover } from './hooks/useFlamegraphHover';
+import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
+import { useScrollToSpan } from './hooks/useScrollToSpan';
+import { FlamegraphCanvasProps, SpanRect } from './types';
+import { formatDuration } from './utils';
+
+function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
+	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = props;
+
+	const isDarkMode = useIsDarkMode(); //TODO: see if can be removed or use a new hook
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const spanRectsRef = useRef<SpanRect[]>([]);
+
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+	const [scrollTop, setScrollTop] = useState<number>(0);
+	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
+
+	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
+	const viewStartRef = useRef(viewStartTs);
+	const viewEndRef = useRef(viewEndTs);
+	const rowHeightRef = useRef(rowHeight);
+	const scrollTopRef = useRef(scrollTop);
+
+	useEffect(() => {
+		viewStartRef.current = viewStartTs;
+	}, [viewStartTs]);
+
+	useEffect(() => {
+		viewEndRef.current = viewEndTs;
+	}, [viewEndTs]);
+
+	useEffect(() => {
+		rowHeightRef.current = rowHeight;
+	}, [rowHeight]);
+
+	useEffect(() => {
+		scrollTopRef.current = scrollTop;
+	}, [scrollTop]);
+
+	useEffect(() => {
+		//TODO: see if this can be removed as once loaded the view start and end ts will not change
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+	}, [traceMetadata.startTime, traceMetadata.endTime]);
+
+	const totalHeight = spans.length * rowHeight;
+
+	const { isOverFlamegraphRef } = useFlamegraphZoom({
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	});
+
+	const {
+		handleMouseDown,
+		handleMouseMove: handleDragMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		suppressClickRef,
+		isDraggingRef,
+	} = useFlamegraphDrag({
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	});
+
+	const {
+		hoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	} = useFlamegraphHover({
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	});
+
+	const { drawFlamegraph } = useFlamegraphDraw({
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId: firstSpanAtFetchLevel || undefined,
+		hoveredSpanId: hoveredSpanId ?? '',
+		isDarkMode,
+		spanRectsRef,
+	});
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	useCanvasSetup(canvasRef, containerRef, drawFlamegraph);
+
+	const handleMouseMove = useCallback(
+		(e: React.MouseEvent): void => {
+			handleDragMouseMove(e);
+			handleHoverMouseMove(e);
+		},
+		[handleDragMouseMove, handleHoverMouseMove],
+	);
+
+	const handleMouseLeave = useCallback((): void => {
+		isOverFlamegraphRef.current = false;
+		handleDragMouseLeave();
+		handleHoverMouseLeave();
+	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
+
+	// todo: move to a separate component/utils file
+	const tooltipElement = tooltipContent
+		? createPortal(
+				<div
+					style={{
+						position: 'fixed',
+						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
+						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
+						zIndex: 1000,
+						backgroundColor: 'rgba(30, 30, 30, 0.95)',
+						color: '#fff',
+						padding: '8px 12px',
+						borderRadius: 4,
+						fontSize: 12,
+						fontFamily: 'Inter, sans-serif',
+						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+						pointerEvents: 'none',
+					}}
+				>
+					<div
+						style={{
+							fontWeight: 600,
+							marginBottom: 4,
+							color: tooltipContent.spanColor,
+						}}
+					>
+						{tooltipContent.spanName}
+					</div>
+					<div>Status: {tooltipContent.status}</div>
+					<div>Start: {tooltipContent.startMs.toFixed(2)} ms</div>
+					<div>Duration: {formatDuration(tooltipContent.durationMs * 1e6)}</div>
+				</div>,
+				document.body,
+		  )
+		: null;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				padding: '0 15px',
+			}}
+		>
+			{tooltipElement}
+			<TimelineV3
+				startTimestamp={viewStartTs}
+				endTimestamp={viewEndTs}
+				offsetTimestamp={viewStartTs - traceMetadata.startTime}
+				timelineHeight={10}
+			/>
+			<div
+				ref={containerRef}
+				style={{
+					flex: 1,
+					overflow: 'hidden',
+					position: 'relative',
+				}}
+				onMouseEnter={(): void => {
+					isOverFlamegraphRef.current = true;
+				}}
+				onMouseLeave={handleMouseLeave}
+			>
+				<canvas
+					ref={canvasRef}
+					style={{
+						display: 'block',
+						width: '100%',
+						cursor: 'grab',
+					}}
+					onMouseDown={handleMouseDown}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onClick={handleClick}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default FlamegraphCanvas;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+
+import FlamegraphCanvas from './FlamegraphCanvas';
+
+//TODO: analyse if this is needed or not and move to separate file if needed else delete this enum.
+enum TraceFlamegraphState {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA = 'FETCHING_WITH_OLD_DATA',
+}
+
+function TraceFlamegraph(): JSX.Element {
+	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+	const { search } = useLocation();
+	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
+		urlQuery.get('spanId') || '',
+	);
+
+	useEffect(() => {
+		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
+	}, [urlQuery]);
+
+	const handleSpanClick = useCallback(
+		(spanId: string): void => {
+			setFirstSpanAtFetchLevel(spanId);
+			const searchParams = new URLSearchParams(search);
+			//tood: use from query params constants
+			if (searchParams.get('spanId') !== spanId) {
+				searchParams.set('spanId', spanId);
+				history.replace({ search: searchParams.toString() });
+			}
+		},
+		[history, search],
+	);
+
+	const { data, isFetching, error } = useGetTraceFlamegraph({
+		traceId,
+		selectedSpanId: firstSpanAtFetchLevel,
+	});
+
+	const flamegraphState = useMemo(() => {
+		if (isFetching) {
+			if (data?.payload?.spans && data.payload.spans.length > 0) {
+				return TraceFlamegraphState.FETCHING_WITH_OLD_DATA;
+			}
+			return TraceFlamegraphState.LOADING;
+		}
+		if (error) {
+			return TraceFlamegraphState.ERROR;
+		}
+		if (data?.payload?.spans && data.payload.spans.length === 0) {
+			return TraceFlamegraphState.NO_DATA;
+		}
+		return TraceFlamegraphState.SUCCESS;
+	}, [error, isFetching, data]);
+
+	const spans = useMemo(() => data?.payload?.spans || [], [
+		data?.payload?.spans,
+	]);
+
+	const content = useMemo(() => {
+		switch (flamegraphState) {
+			case TraceFlamegraphState.LOADING:
+				return <div>Loading...</div>;
+			case TraceFlamegraphState.ERROR:
+				return <div>Error loading flamegraph</div>;
+			case TraceFlamegraphState.NO_DATA:
+				return <div>No data found for trace {traceId}</div>;
+			case TraceFlamegraphState.SUCCESS:
+			case TraceFlamegraphState.FETCHING_WITH_OLD_DATA:
+				return (
+					<FlamegraphCanvas
+						spans={spans}
+						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+						onSpanClick={handleSpanClick}
+						traceMetadata={{
+							startTime: data?.payload?.startTimestampMillis || 0,
+							endTime: data?.payload?.endTimestampMillis || 0,
+						}}
+					/>
+				);
+			default:
+				return <div>Fetching the trace...</div>;
+		}
+	}, [
+		data?.payload?.endTimestampMillis,
+		data?.payload?.startTimestampMillis,
+		firstSpanAtFetchLevel,
+		flamegraphState,
+		spans,
+		traceId,
+		handleSpanClick,
+	]);
+
+	return <>{content}</>;
+}
+
+export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -0,0 +1,525 @@
+import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
+import type { FlamegraphRowMetrics } from '../utils';
+import { getFlamegraphRowMetrics } from '../utils';
+import { drawEventDot, drawSpanBar } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
+		time: 50,
+		timeUnitName: 'ms',
+	}),
+}));
+
+/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
+const mockPatternCanvasCtx = {
+	beginPath: jest.fn(),
+	moveTo: jest.fn(),
+	lineTo: jest.fn(),
+	stroke: jest.fn(),
+	globalAlpha: 1,
+};
+
+const originalCreateElement = document.createElement.bind(document);
+document.createElement = function (
+	tagName: string,
+): ReturnType<typeof originalCreateElement> {
+	const el = originalCreateElement(tagName);
+	if (tagName.toLowerCase() === 'canvas') {
+		(el as HTMLCanvasElement).getContext = (() =>
+			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
+	}
+	return el;
+};
+
+function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
+	return ({
+		beginPath: jest.fn(),
+		roundRect: jest.fn(),
+		fill: jest.fn(),
+		stroke: jest.fn(),
+		save: jest.fn(),
+		restore: jest.fn(),
+		translate: jest.fn(),
+		rotate: jest.fn(),
+		fillRect: jest.fn(),
+		strokeRect: jest.fn(),
+		setLineDash: jest.fn(),
+		measureText: jest.fn(
+			(text: string) => ({ width: text.length * 6 } as TextMetrics),
+		),
+		createPattern: jest.fn(() => ({} as CanvasPattern)),
+		clip: jest.fn(),
+		rect: jest.fn(),
+		fillText: jest.fn(),
+		font: '',
+		fillStyle: '',
+		strokeStyle: '',
+		textAlign: '',
+		textBaseline: '',
+		lineWidth: 0,
+		globalAlpha: 1,
+	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
+}
+
+const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
+
+describe('Canvas Draw Utils', () => {
+	describe('drawSpanBar', () => {
+		it('draws rect + fill for normal span (no selected/hovered)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, event: [] },
+				x: 10,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#1890ff',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.beginPath).toHaveBeenCalled();
+			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.stroke).not.toHaveBeenCalled();
+			expect(spanRectsArray).toHaveLength(1);
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 10,
+				y: 1,
+				width: 100,
+				height: 22,
+				level: 0,
+			});
+		});
+
+		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
+				x: 20,
+				y: 0,
+				width: 80,
+				levelIndex: 1,
+				spanRectsArray,
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'sel',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
+			expect(ctx.strokeStyle).toBe('#2F80ED');
+			expect(ctx.lineWidth).toBe(2);
+			expect(ctx.stroke).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
+		});
+
+		it('uses stripe pattern + solid stroke + 1px when hovered (not selected)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
+				x: 30,
+				y: 0,
+				width: 60,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'hov',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.setLineDash).not.toHaveBeenCalled();
+			expect(ctx.lineWidth).toBe(1);
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+
+		it('pushes spanRectsArray with correct dimensions', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
+				x: 5,
+				y: 24,
+				width: 200,
+				levelIndex: 2,
+				spanRectsArray,
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 5,
+				y: 25,
+				width: 200,
+				height: 22,
+				level: 2,
+			});
+			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
+		});
+	});
+
+	describe('drawSpanLabel (via drawSpanBar)', () => {
+		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).not.toHaveBeenCalled();
+			expect(ctx.fillText).not.toHaveBeenCalled();
+		});
+
+		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'foo', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).toHaveBeenCalled();
+			expect(ctx.fillText).toHaveBeenCalled();
+			expect(ctx.textAlign).toBe('left');
+		});
+
+		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledTimes(2);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'50ms',
+				expect.any(Number),
+				expect.any(Number),
+			);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'my-span',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+	});
+
+	describe('truncateText (via drawSpanBar)', () => {
+		it('uses full text when it fits', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 4 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'short', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'short',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+
+		it('truncates text when it exceeds available width', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) =>
+					({
+						width: t.includes('...') ? 24 : t.length * 10,
+					} as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
+			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
+			expect(nameArg).toBeDefined();
+			expect(nameArg).toMatch(/\.\.\.$/);
+		});
+	});
+
+	describe('drawEventDot', () => {
+		it('uses error styling when isError is true', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 50,
+				y: 11,
+				isError: true,
+				isDarkMode: false,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
+			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
+			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+
+		it('uses normal styling when isError is false', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: false,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
+			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
+		});
+
+		it('uses dark mode colors for error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: true,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
+			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
+		});
+
+		it('uses dark mode colors for non-error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(14, 165, 233)');
+			expect(ctx.strokeStyle).toBe('rgb(2, 132, 199)');
+		});
+
+		it('calls save, translate, rotate, restore', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 10,
+				y: 20,
+				isError: false,
+				isDarkMode: false,
+				eventDotSize: 4,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+	});
+
+	describe('createStripePattern (via drawSpanBar)', () => {
+		it('uses pattern when createPattern returns non-null', () => {
+			const ctx = createMockCtx();
+			const mockPattern = {} as CanvasPattern;
+			(ctx.createPattern as jest.Mock).mockReturnValue(mockPattern);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'p',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.fillStyle).toBe(mockPattern);
+			expect(ctx.fill).toHaveBeenCalled();
+		});
+
+		it('skips fill when createPattern returns null', () => {
+			const ctx = createMockCtx();
+			(ctx.createPattern as jest.Mock).mockReturnValue(null);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'p',
+			});
+
+			expect(ctx.fill).not.toHaveBeenCalled();
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+	});
+
+	describe('drawSpanBar with events', () => {
+		it('draws event dots for each span event', () => {
+			const ctx = createMockCtx();
+			const spanWithEvents = {
+				...MOCK_SPAN,
+				event: [
+					{
+						name: 'e1',
+						timeUnixNano: 1_010_000_000,
+						attributeMap: {},
+						isError: false,
+					},
+					{
+						name: 'e2',
+						timeUnixNano: 1_025_000_000,
+						attributeMap: {},
+						isError: true,
+					},
+				],
+			};
+
+			drawSpanBar({
+				ctx,
+				span: spanWithEvents,
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.save).toHaveBeenCalledTimes(3);
+			expect(ctx.translate).toHaveBeenCalledTimes(2);
+			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -0,0 +1,54 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+/** Minimal FlamegraphSpan for unit tests */
+export const MOCK_SPAN: FlamegraphSpan = {
+	timestamp: 1000,
+	durationNano: 50_000_000, // 50ms
+	spanId: 'span-1',
+	parentSpanId: '',
+	traceId: 'trace-1',
+	hasError: false,
+	serviceName: 'test-service',
+	name: 'test-span',
+	level: 0,
+	event: [],
+};
+
+/** Nested spans structure for findSpanById tests */
+export const MOCK_SPANS: FlamegraphSpan[][] = [
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'root',
+			parentSpanId: '',
+			level: 0,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'child-a',
+			parentSpanId: 'root',
+			level: 1,
+		},
+		{
+			...MOCK_SPAN,
+			spanId: 'child-b',
+			parentSpanId: 'root',
+			level: 1,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'grandchild',
+			parentSpanId: 'child-a',
+			level: 2,
+		},
+	],
+];
+
+export const MOCK_TRACE_METADATA = {
+	startTime: 0,
+	endTime: 1000,
+};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -0,0 +1,196 @@
+import React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+function createMockContainer(): HTMLDivElement {
+	const div = document.createElement('div');
+	Object.defineProperty(div, 'clientHeight', { value: 400 });
+	return div;
+}
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	containerRef: { current: createMockContainer() },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartRef: { current: 0 },
+	viewEndRef: { current: 1000 },
+	setViewStartTs: jest.fn(),
+	setViewEndTs: jest.fn(),
+	scrollTopRef: { current: 0 },
+	setScrollTop: jest.fn(),
+	totalHeight: 1000,
+};
+
+describe('useFlamegraphDrag', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		defaultArgs.viewStartRef.current = 0;
+		defaultArgs.viewEndRef.current = 1000;
+		defaultArgs.scrollTopRef.current = 0;
+	});
+
+	it('starts drag state on mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(true);
+	});
+
+	it('ignores non-left button mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 1,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('updates pan/scroll on mousemove', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 150,
+				clientY: 100,
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
+		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
+		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
+	});
+
+	it('does not set suppressClickRef when movement is below threshold', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 102,
+				clientY: 51,
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(false);
+	});
+
+	it('sets suppressClickRef when drag exceeds threshold', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 150,
+				clientY: 100,
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(true);
+	});
+
+	it('resets drag state on mouseup', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('cancels drag on mouseleave', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleDragMouseLeave();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -0,0 +1,174 @@
+import type React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
+import type { SpanRect } from '../types';
+import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+const spanRect: SpanRect = {
+	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
+	x: 100,
+	y: 50,
+	width: 200,
+	height: 22,
+	level: 0,
+};
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	spanRectsRef: { current: [spanRect] },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartTs: MOCK_TRACE_METADATA.startTime,
+	viewEndTs: MOCK_TRACE_METADATA.endTime,
+	isDraggingRef: { current: false },
+	suppressClickRef: { current: false },
+	onSpanClick: jest.fn(),
+	isDarkMode: false,
+};
+
+describe('useFlamegraphHover', () => {
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+		jest.clearAllMocks();
+		defaultArgs.spanRectsRef.current = [spanRect];
+		defaultArgs.isDraggingRef.current = false;
+		defaultArgs.suppressClickRef.current = false;
+	});
+
+	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+		expect(result.current.tooltipContent).not.toBeNull();
+		expect(result.current.tooltipContent?.spanName).toBe('test-span');
+		expect(result.current.tooltipContent?.clientX).toBe(150);
+		expect(result.current.tooltipContent?.clientY).toBe(61);
+	});
+
+	it('clears hover when moving to empty area', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 10,
+				clientY: 10,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('clears hover on mouse leave', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleHoverMouseLeave();
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('suppresses click when suppressClickRef is set', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.suppressClickRef.current = true;
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
+	});
+
+	it('calls onSpanClick when clicking on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
+	});
+
+	it('uses clientX/clientY for tooltip positioning', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 200,
+				clientY: 60,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.tooltipContent?.clientX).toBe(200);
+		expect(result.current.tooltipContent?.clientY).toBe(60);
+	});
+
+	it('does not update hover during drag', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.isDraggingRef.current = true;
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -0,0 +1,279 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
+import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+describe('useFlamegraphZoom', () => {
+	const traceMetadata = { ...MOCK_TRACE_METADATA };
+
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+	});
+
+	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: 100 };
+		const viewEndRef = { current: 500 };
+		const rowHeightRef = { current: 30 };
+		const canvasRef = { current: createMockCanvas() };
+
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		act(() => {
+			result.current.handleResetZoom();
+		});
+
+		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
+		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
+		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
+		expect(viewStartRef.current).toBe(traceMetadata.startTime);
+		expect(viewEndRef.current).toBe(traceMetadata.endTime);
+		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
+	});
+
+	it('wheel zoom in decreases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeLessThan(initialSpan);
+		}
+	});
+
+	it('wheel zoom out increases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
+		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
+		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
+		}
+	});
+
+	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.startTime + 100 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 10000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
+		}
+	});
+
+	it('clamps viewStart/viewEnd to trace bounds', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -5000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
+			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
+		}
+	});
+
+	it('returns isOverFlamegraphRef', () => {
+		const canvasRef = { current: createMockCanvas() };
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef: { current: 0 },
+				viewEndRef: { current: 1000 },
+				rowHeightRef: { current: 24 },
+				setViewStartTs: jest.fn(),
+				setViewEndTs: jest.fn(),
+				setRowHeight: jest.fn(),
+			}),
+		);
+
+		expect(result.current.isOverFlamegraphRef).toBeDefined();
+		expect(result.current.isOverFlamegraphRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -0,0 +1,212 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useRef } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { useScrollToSpan } from '../hooks/useScrollToSpan';
+import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
+
+function TestWrapper({
+	firstSpanAtFetchLevel,
+	spans,
+	traceMetadata,
+	setViewStartTs,
+	setViewEndTs,
+	setScrollTop,
+}: {
+	firstSpanAtFetchLevel: string;
+	spans: typeof MOCK_SPANS;
+	traceMetadata: typeof MOCK_TRACE_METADATA;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const viewStartRef = useRef(traceMetadata.startTime);
+	const viewEndRef = useRef(traceMetadata.endTime);
+	const scrollTopRef = useRef(0);
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight: 24,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	return <div ref={containerRef} data-testid="container" />;
+}
+
+describe('useScrollToSpan', () => {
+	beforeEach(() => {
+		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+			configurable: true,
+			value: 400,
+		});
+	});
+
+	it('does not update when firstSpanAtFetchLevel is empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel=""
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when spans are empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="root"
+				spans={[]}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when target span not found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="nonexistent"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('calls setters when target span found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		const { getByTestId } = render(
+			<TestWrapper
+				firstSpanAtFetchLevel="grandchild"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		expect(getByTestId('container')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+			expect(setScrollTop).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const [scrollTop] = setScrollTop.mock.calls[0];
+
+		expect(viewEnd - viewStart).toBeGreaterThan(0);
+		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
+		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
+		expect(scrollTop).toBeGreaterThanOrEqual(0);
+	});
+
+	it('centers span vertically (scrollTop centers span row)', async () => {
+		const setScrollTop = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="grandchild"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={jest.fn()}
+					setViewEndTs={jest.fn()}
+					setScrollTop={setScrollTop}
+				/>,
+			);
+		});
+
+		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
+
+		const [scrollTop] = setScrollTop.mock.calls[0];
+		const levelIndex = 2;
+		const rowHeight = 24;
+		const viewportHeight = 400;
+		const expectedCenter =
+			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
+		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
+	});
+
+	it('zooms horizontally to span with 2x duration padding', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="root"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={setViewStartTs}
+					setViewEndTs={setViewEndTs}
+					setScrollTop={jest.fn()}
+				/>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const visibleWindow = viewEnd - viewStart;
+		const rootSpan = MOCK_SPANS[0][0];
+		const spanDurationMs = rootSpan.durationNano / 1e6;
+		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -0,0 +1,135 @@
+import {
+	clamp,
+	findSpanById,
+	formatDuration,
+	getFlamegraphRowMetrics,
+} from '../utils';
+import { MOCK_SPANS } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (
+		valueMs: number,
+	): { time: number; timeUnitName: string } => {
+		if (valueMs === 0) {
+			return { time: 0, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1000) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 60_000) {
+			return { time: valueMs / 1000, timeUnitName: 's' };
+		}
+		if (valueMs < 3_600_000) {
+			return { time: valueMs / 60_000, timeUnitName: 'm' };
+		}
+		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
+	},
+}));
+
+describe('Pure Math and Data Utils', () => {
+	describe('clamp', () => {
+		it('returns value when within range', () => {
+			expect(clamp(5, 0, 10)).toBe(5);
+			expect(clamp(-3, -5, 5)).toBe(-3);
+		});
+
+		it('returns min when value is below min', () => {
+			expect(clamp(-1, 0, 10)).toBe(0);
+			expect(clamp(2, 5, 10)).toBe(5);
+		});
+
+		it('returns max when value is above max', () => {
+			expect(clamp(11, 0, 10)).toBe(10);
+			expect(clamp(100, 0, 50)).toBe(50);
+		});
+
+		it('handles min === max', () => {
+			expect(clamp(5, 7, 7)).toBe(7);
+			expect(clamp(7, 7, 7)).toBe(7);
+		});
+	});
+
+	describe('findSpanById', () => {
+		it('finds span in first level', () => {
+			const result = findSpanById(MOCK_SPANS, 'root');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('root');
+			expect(result?.levelIndex).toBe(0);
+		});
+
+		it('finds span in nested level', () => {
+			const result = findSpanById(MOCK_SPANS, 'grandchild');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('grandchild');
+			expect(result?.levelIndex).toBe(2);
+		});
+
+		it('returns null when span not found', () => {
+			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
+		});
+
+		it('handles empty spans', () => {
+			expect(findSpanById([], 'root')).toBeNull();
+			expect(findSpanById([[], []], 'root')).toBeNull();
+		});
+	});
+
+	describe('getFlamegraphRowMetrics', () => {
+		it('computes normal row height metrics (24px)', () => {
+			const m = getFlamegraphRowMetrics(24);
+			expect(m.ROW_HEIGHT).toBe(24);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
+			expect(m.EVENT_DOT_SIZE).toBe(6);
+		});
+
+		it('clamps span bar height to max for large row heights', () => {
+			const m = getFlamegraphRowMetrics(100);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
+		});
+
+		it('clamps span bar height to min for small row heights', () => {
+			const m = getFlamegraphRowMetrics(6);
+			expect(m.SPAN_BAR_HEIGHT).toBe(8);
+			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
+		});
+
+		it('clamps event dot size within min/max', () => {
+			const mSmall = getFlamegraphRowMetrics(6);
+			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
+
+			const mLarge = getFlamegraphRowMetrics(24);
+			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
+		});
+	});
+
+	describe('formatDuration', () => {
+		it('formats nanos as ms', () => {
+			// 1e6 nanos = 1ms
+			expect(formatDuration(1_000_000)).toBe('1ms');
+		});
+
+		it('formats larger durations as s/m/hr', () => {
+			// 2e9 nanos = 2000ms = 2s
+			expect(formatDuration(2_000_000_000)).toBe('2s');
+		});
+
+		it('formats zero duration', () => {
+			expect(formatDuration(0)).toBe('0ms');
+		});
+
+		it('formats very small values', () => {
+			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
+			expect(formatDuration(1000)).toBe('0ms');
+		});
+
+		it('formats decimal seconds correctly', () => {
+			expect(formatDuration(1_500_000_000)).toBe('1.5s');
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -0,0 +1,67 @@
+import { getSpanColor } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+const mockGenerateColor = jest.fn();
+
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: (key: string, colorMap: Record<string, string>): string =>
+		mockGenerateColor(key, colorMap),
+}));
+
+describe('Presentation / Styling Utils', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGenerateColor.mockReturnValue('#2F80ED');
+	});
+
+	describe('getSpanColor', () => {
+		it('uses generated service color for normal span', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: false },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				MOCK_SPAN.serviceName,
+				expect.any(Object),
+			);
+			expect(color).toBe('#1890ff');
+		});
+
+		it('overrides with error color in light mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: false,
+			});
+
+			expect(color).toBe('rgb(220, 38, 38)');
+		});
+
+		it('overrides with error color in dark mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: true,
+			});
+
+			expect(color).toBe('rgb(239, 68, 68)');
+		});
+
+		it('passes serviceName to generateColor', () => {
+			getSpanColor({
+				span: { ...MOCK_SPAN, serviceName: 'my-service' },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				'my-service',
+				expect.any(Object),
+			);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/constants.ts

@@ -0,0 +1,36 @@
+export const ROW_HEIGHT = 24;
+export const SPAN_BAR_HEIGHT = 22;
+export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
+export const EVENT_DOT_SIZE = 6;
+
+// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
+export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
+export const MIN_SPAN_BAR_HEIGHT = 8;
+export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
+
+// Event dot sizing relative to span bar height
+export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
+export const MIN_EVENT_DOT_SIZE = 4;
+export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
+
+export const LABEL_FONT = '11px Inter, sans-serif';
+export const LABEL_PADDING_X = 8;
+export const MIN_WIDTH_FOR_NAME = 30;
+export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
+
+// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
+export const MIN_ROW_HEIGHT = 24;
+export const MAX_ROW_HEIGHT = 24;
+export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
+
+// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
+export const PINCH_ZOOM_INTENSITY_H = 0.01;
+export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
+export const PINCH_ZOOM_INTENSITY_V = 0.008;
+export const SCROLL_ZOOM_INTENSITY_V = 0.001;
+
+// Minimum visible time span in ms (prevents zooming to sub-pixel)
+export const MIN_VISIBLE_SPAN_MS = 5;
+
+// Selected span style (dashed border)
+export const DASHED_BORDER_LINE_DASH = [4, 2];

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -0,0 +1,55 @@
+import { RefObject, useCallback, useEffect } from 'react';
+
+export function useCanvasSetup(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	containerRef: RefObject<HTMLDivElement>,
+	onDraw: () => void,
+): void {
+	const updateCanvasSize = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		const rect = container.getBoundingClientRect();
+		const viewportHeight = container.clientHeight;
+
+		canvas.style.width = `${rect.width}px`;
+		canvas.style.height = `${viewportHeight}px`;
+
+		const newWidth = Math.floor(rect.width * dpr);
+		const newHeight = Math.floor(viewportHeight * dpr);
+
+		if (canvas.width !== newWidth || canvas.height !== newHeight) {
+			canvas.width = newWidth;
+			canvas.height = newHeight;
+			onDraw();
+		}
+	}, [canvasRef, containerRef, onDraw]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return (): void => {};
+		}
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+		updateCanvasSize();
+
+		// when dpr changes, update the canvas size
+		const dprQuery = window.matchMedia('(resolution: 1dppx)');
+		dprQuery.addEventListener('change', updateCanvasSize);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			dprQuery.removeEventListener('change', updateCanvasSize);
+		};
+	}, [containerRef, updateCanvasSize]);
+
+	useEffect(() => {
+		onDraw();
+	}, [onDraw]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -0,0 +1,178 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useRef,
+} from 'react';
+
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphDragArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	scrollTopRef: MutableRefObject<number>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+	totalHeight: number;
+}
+
+interface UseFlamegraphDragResult {
+	handleMouseDown: (e: ReactMouseEvent) => void;
+	handleMouseMove: (e: ReactMouseEvent) => void;
+	handleMouseUp: () => void;
+	handleDragMouseLeave: () => void;
+	suppressClickRef: MutableRefObject<boolean>;
+	isDraggingRef: MutableRefObject<boolean>;
+}
+
+const DRAG_THRESHOLD = 5;
+
+export function useFlamegraphDrag(
+	args: UseFlamegraphDragArgs,
+): UseFlamegraphDragResult {
+	const {
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	} = args;
+
+	const isDraggingRef = useRef(false);
+	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+	const dragDistanceRef = useRef(0);
+	const suppressClickRef = useRef(false);
+
+	const clampScrollTop = useCallback(
+		(next: number): number => {
+			const container = containerRef.current;
+			if (!container) {
+				return 0;
+			}
+			const viewportHeight = container.clientHeight;
+			const maxScroll = Math.max(0, totalHeight - viewportHeight);
+			return clamp(next, 0, maxScroll);
+		},
+		[containerRef, totalHeight],
+	);
+
+	const handleMouseDown = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (event.button !== 0) {
+				return;
+			}
+			event.preventDefault();
+
+			isDraggingRef.current = true;
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+			dragDistanceRef.current = 0;
+
+			const canvas = canvasRef.current;
+			if (canvas) {
+				canvas.style.cursor = 'grabbing';
+			}
+		},
+		[canvasRef],
+	);
+
+	const handleMouseMove = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (!isDraggingRef.current || !dragStartRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const rect = canvas.getBoundingClientRect();
+			const deltaX = event.clientX - dragStartRef.current.x;
+			const deltaY = event.clientY - dragStartRef.current.y;
+
+			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+			// --- Horizontal pan ---
+			const timeSpan = viewEndRef.current - viewStartRef.current;
+			const deltaTime = (deltaX / rect.width) * timeSpan;
+
+			const newStart = viewStartRef.current - deltaTime;
+			const clampedStart = clamp(
+				newStart,
+				traceMetadata.startTime,
+				traceMetadata.endTime - timeSpan,
+			);
+			const clampedEnd = clampedStart + timeSpan;
+
+			viewStartRef.current = clampedStart;
+			viewEndRef.current = clampedEnd;
+			setViewStartTs(clampedStart);
+			setViewEndTs(clampedEnd);
+
+			// --- Vertical scroll pan ---
+			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
+			scrollTopRef.current = nextScrollTop;
+			setScrollTop(nextScrollTop);
+
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+		},
+		[
+			canvasRef,
+			traceMetadata,
+			viewStartRef,
+			viewEndRef,
+			setViewStartTs,
+			setViewEndTs,
+			scrollTopRef,
+			setScrollTop,
+			clampScrollTop,
+		],
+	);
+
+	const handleMouseUp = useCallback((): void => {
+		const wasDrag = dragDistanceRef.current > DRAG_THRESHOLD;
+		suppressClickRef.current = wasDrag;
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, [canvasRef]);
+
+	const handleDragMouseLeave = useCallback((): void => {
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, [canvasRef]);
+
+	return {
+		handleMouseDown,
+		handleMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		suppressClickRef,
+		isDraggingRef,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -0,0 +1,222 @@
+import React, { RefObject, useCallback, useRef } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import {
+	clamp,
+	drawSpanBar,
+	FlamegraphRowMetrics,
+	getFlamegraphRowMetrics,
+	getSpanColor,
+} from '../utils';
+
+interface UseFlamegraphDrawArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	spans: FlamegraphSpan[][];
+	viewStartTs: number;
+	viewEndTs: number;
+	scrollTop: number;
+	rowHeight: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
+}
+
+interface UseFlamegraphDrawResult {
+	drawFlamegraph: () => void;
+	spanRectsRef: RefObject<SpanRect[]>;
+}
+
+const OVERSCAN_ROWS = 4;
+
+interface DrawLevelArgs {
+	ctx: CanvasRenderingContext2D;
+	levelSpans: FlamegraphSpan[];
+	levelIndex: number;
+	y: number;
+	viewStartTs: number;
+	timeSpan: number;
+	cssWidth: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsArray: SpanRect[];
+	metrics: FlamegraphRowMetrics;
+}
+
+function drawLevel(args: DrawLevelArgs): void {
+	const {
+		ctx,
+		levelSpans,
+		levelIndex,
+		y,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsArray,
+		metrics,
+	} = args;
+
+	const viewEndTs = viewStartTs + timeSpan;
+
+	for (let i = 0; i < levelSpans.length; i++) {
+		const span = levelSpans[i];
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+		// Time culling -- skip spans entirely outside the visible time window
+		if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+			continue;
+		}
+
+		const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+		const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+		let width = rightEdge - leftOffset;
+
+		// Clamp to visible x-range
+		if (leftOffset < 0) {
+			width += leftOffset;
+			if (width <= 0) {
+				continue;
+			}
+		}
+		if (rightEdge > cssWidth) {
+			width = cssWidth - Math.max(0, leftOffset);
+			if (width <= 0) {
+				continue;
+			}
+		}
+
+		// Minimum 1px width so tiny spans remain visible
+		width = clamp(width, 1, Infinity);
+
+		const color = getSpanColor({ span, isDarkMode });
+
+		drawSpanBar({
+			ctx,
+			span,
+			x: Math.max(0, leftOffset),
+			y,
+			width,
+			levelIndex,
+			spanRectsArray,
+			color,
+			isDarkMode,
+			metrics,
+			selectedSpanId,
+			hoveredSpanId,
+		});
+	}
+}
+
+export function useFlamegraphDraw(
+	args: UseFlamegraphDrawArgs,
+): UseFlamegraphDrawResult {
+	const {
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsRef: spanRectsRefProp,
+	} = args;
+
+	const spanRectsRefInternal = useRef<SpanRect[]>([]);
+	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
+
+	const drawFlamegraph = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+
+		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
+		const firstLevel = Math.max(
+			0,
+			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
+		);
+		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
+
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		ctx.clearRect(0, 0, cssWidth, viewportHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			drawLevel({
+				ctx,
+				levelSpans,
+				levelIndex,
+				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
+				viewStartTs,
+				timeSpan,
+				cssWidth,
+				selectedSpanId,
+				hoveredSpanId,
+				isDarkMode,
+				spanRectsArray,
+				metrics,
+			});
+		}
+
+		spanRectsRef.current = spanRectsArray;
+	}, [
+		canvasRef,
+		containerRef,
+		spanRectsRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+	]);
+
+	// TODO: spanRectsRef is a flat array — hover scans all visible rects O(N).
+	// Upgrade to per-level buckets: spanRects[levelIndex] = [...] so hover can
+	// compute level from mouseY / ROW_HEIGHT and scan only that row.
+	// Further: binary search within a level by x (spans are sorted by start time)
+	// to reduce hover cost from O(N) to O(log N).
+	return { drawFlamegraph, spanRectsRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -0,0 +1,214 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useState,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import { ITraceMetadata } from '../types';
+import { getSpanColor } from '../utils';
+
+function getCanvasPointer(
+	canvas: HTMLCanvasElement,
+	clientX: number,
+	clientY: number,
+): { cssX: number; cssY: number } | null {
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssHeight = canvas.height / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
+	return { cssX, cssY };
+}
+
+function findSpanAtPosition(
+	cssX: number,
+	cssY: number,
+	spanRects: SpanRect[],
+): FlamegraphSpan | null {
+	for (let i = spanRects.length - 1; i >= 0; i--) {
+		const r = spanRects[i];
+		if (
+			cssX >= r.x &&
+			cssX <= r.x + r.width &&
+			cssY >= r.y &&
+			cssY <= r.y + r.height
+		) {
+			return r.span;
+		}
+	}
+	return null;
+}
+
+export interface TooltipContent {
+	spanName: string;
+	status: 'ok' | 'warning' | 'error';
+	startMs: number;
+	durationMs: number;
+	clientX: number;
+	clientY: number;
+	spanColor: string;
+}
+
+interface UseFlamegraphHoverArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	spanRectsRef: MutableRefObject<SpanRect[]>;
+	traceMetadata: ITraceMetadata;
+	viewStartTs: number;
+	viewEndTs: number;
+	isDraggingRef: MutableRefObject<boolean>;
+	suppressClickRef: MutableRefObject<boolean>;
+	onSpanClick: (spanId: string) => void;
+	isDarkMode: boolean;
+}
+
+interface UseFlamegraphHoverResult {
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+	handleHoverMouseMove: (e: ReactMouseEvent) => void;
+	handleHoverMouseLeave: () => void;
+	handleClick: (e: ReactMouseEvent) => void;
+	tooltipContent: TooltipContent | null;
+}
+
+export function useFlamegraphHover(
+	args: UseFlamegraphHoverArgs,
+): UseFlamegraphHoverResult {
+	const {
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	} = args;
+
+	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
+		null,
+	);
+
+	const isZoomed =
+		viewStartTs !== traceMetadata.startTime ||
+		viewEndTs !== traceMetadata.endTime;
+
+	const updateCursor = useCallback(
+		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
+			if (span) {
+				canvas.style.cursor = 'pointer';
+			} else if (isZoomed) {
+				canvas.style.cursor = 'grab';
+			} else {
+				canvas.style.cursor = 'default';
+			}
+		},
+		[isZoomed],
+	);
+
+	const handleHoverMouseMove = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (isDraggingRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				setHoveredSpanId(span.spanId);
+				setTooltipContent({
+					spanName: span.name || 'unknown',
+					status: span.hasError ? 'error' : 'ok',
+					startMs: span.timestamp - traceMetadata.startTime,
+					durationMs: span.durationNano / 1e6,
+					clientX: e.clientX,
+					clientY: e.clientY,
+					spanColor: getSpanColor({ span, isDarkMode }),
+				});
+				updateCursor(canvas, span);
+			} else {
+				setHoveredSpanId(null);
+				setTooltipContent(null);
+				updateCursor(canvas, null);
+			}
+		},
+		[
+			canvasRef,
+			spanRectsRef,
+			traceMetadata.startTime,
+			isDraggingRef,
+			updateCursor,
+			isDarkMode,
+		],
+	);
+
+	const handleHoverMouseLeave = useCallback((): void => {
+		setHoveredSpanId(null);
+		setTooltipContent(null);
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			updateCursor(canvas, null);
+		}
+	}, [canvasRef, updateCursor]);
+
+	const handleClick = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (suppressClickRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				onSpanClick(span.spanId);
+			}
+		},
+		[canvasRef, spanRectsRef, suppressClickRef, onSpanClick],
+	);
+
+	return {
+		hoveredSpanId,
+		setHoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -0,0 +1,224 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+
+import {
+	DEFAULT_ROW_HEIGHT,
+	MAX_ROW_HEIGHT,
+	MIN_ROW_HEIGHT,
+	MIN_VISIBLE_SPAN_MS,
+	PINCH_ZOOM_INTENSITY_H,
+	PINCH_ZOOM_INTENSITY_V,
+	SCROLL_ZOOM_INTENSITY_H,
+	SCROLL_ZOOM_INTENSITY_V,
+} from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphZoomArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	rowHeightRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setRowHeight: Dispatch<SetStateAction<number>>;
+}
+
+interface UseFlamegraphZoomResult {
+	handleResetZoom: () => void;
+	isOverFlamegraphRef: MutableRefObject<boolean>;
+}
+
+function getCanvasPointer(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	clientX: number,
+): { cssX: number; cssWidth: number } | null {
+	const canvas = canvasRef.current;
+	if (!canvas) {
+		return null;
+	}
+
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+
+	return { cssX, cssWidth };
+}
+
+export function useFlamegraphZoom(
+	args: UseFlamegraphZoomArgs,
+): UseFlamegraphZoomResult {
+	const {
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	} = args;
+
+	const isOverFlamegraphRef = useRef(false);
+	const wheelDeltaRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+	const lastCursorXRef = useRef(0);
+	const lastCssWidthRef = useRef(1);
+	const lastIsPinchRef = useRef(false);
+	const lastWheelClientXRef = useRef<number | null>(null);
+
+	// Prevent browser zoom when pinching over the flamegraph
+	useEffect(() => {
+		const onWheel = (e: WheelEvent): void => {
+			if (isOverFlamegraphRef.current && e.ctrlKey) {
+				e.preventDefault();
+			}
+		};
+
+		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+		return (): void => {
+			window.removeEventListener('wheel', onWheel, {
+				capture: true,
+			} as EventListenerOptions);
+		};
+	}, []);
+
+	const applyWheelZoom = useCallback(() => {
+		rafRef.current = null;
+
+		const cssWidth = lastCssWidthRef.current || 1;
+		const cursorX = lastCursorXRef.current;
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+
+		const oldStart = viewStartRef.current;
+		const oldEnd = viewEndRef.current;
+		const oldSpan = oldEnd - oldStart;
+
+		const deltaY = wheelDeltaRef.current;
+		wheelDeltaRef.current = 0;
+		if (deltaY === 0) {
+			return;
+		}
+
+		const zoomH = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_H
+			: SCROLL_ZOOM_INTENSITY_H;
+		const zoomV = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_V
+			: SCROLL_ZOOM_INTENSITY_V;
+
+		const factorH = Math.exp(deltaY * zoomH);
+		const factorV = Math.exp(deltaY * zoomV);
+
+		// --- Horizontal zoom ---
+		const desiredSpan = oldSpan * factorH;
+		const minSpanMs = Math.max(
+			MIN_VISIBLE_SPAN_MS,
+			oldSpan / Math.max(cssWidth, 1),
+		);
+		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
+
+		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
+		const anchorTs = oldStart + cursorRatio * oldSpan;
+
+		let nextStart = anchorTs - cursorRatio * clampedSpan;
+		nextStart = clamp(
+			nextStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedSpan,
+		);
+		const nextEnd = nextStart + clampedSpan;
+
+		// --- Vertical zoom (row height) ---
+		const desiredRow = rowHeightRef.current * (1 / factorV);
+		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
+
+		// Write refs immediately so rapid wheel events read fresh values
+		viewStartRef.current = nextStart;
+		viewEndRef.current = nextEnd;
+		rowHeightRef.current = nextRow;
+
+		setViewStartTs(nextStart);
+		setViewEndTs(nextEnd);
+		setRowHeight(nextRow);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return (): void => {};
+		}
+
+		const onWheel = (e: WheelEvent): void => {
+			e.preventDefault();
+
+			const pointer = getCanvasPointer(canvasRef, e.clientX);
+			if (!pointer) {
+				return;
+			}
+
+			// Flush accumulated delta if cursor moved significantly
+			if (lastWheelClientXRef.current !== null) {
+				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
+				if (moved > 6) {
+					wheelDeltaRef.current = 0;
+				}
+			}
+			lastWheelClientXRef.current = e.clientX;
+
+			lastIsPinchRef.current = e.ctrlKey;
+			lastCssWidthRef.current = pointer.cssWidth;
+			lastCursorXRef.current = pointer.cssX;
+			wheelDeltaRef.current += e.deltaY;
+
+			if (rafRef.current == null) {
+				rafRef.current = requestAnimationFrame(applyWheelZoom);
+			}
+		};
+
+		canvas.addEventListener('wheel', onWheel, { passive: false });
+
+		return (): void => {
+			canvas.removeEventListener('wheel', onWheel);
+		};
+	}, [canvasRef, applyWheelZoom]);
+
+	const handleResetZoom = useCallback(() => {
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
+
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		setRowHeight(DEFAULT_ROW_HEIGHT);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	return { handleResetZoom, isOverFlamegraphRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -0,0 +1,118 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useEffect,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { MIN_VISIBLE_SPAN_MS } from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
+
+interface UseScrollToSpanArgs {
+	firstSpanAtFetchLevel: string;
+	spans: FlamegraphSpan[][];
+	traceMetadata: ITraceMetadata;
+	containerRef: RefObject<HTMLDivElement>;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	scrollTopRef: MutableRefObject<number>;
+	rowHeight: number;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}
+
+/**
+ * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
+ * flamegraph so the selected span is centered in view.
+ */
+export function useScrollToSpan(args: UseScrollToSpanArgs): void {
+	const {
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	} = args;
+
+	useEffect(() => {
+		if (!firstSpanAtFetchLevel || spans.length === 0) {
+			return;
+		}
+
+		const result = findSpanById(spans, firstSpanAtFetchLevel);
+		if (!result) {
+			return;
+		}
+
+		const { span, levelIndex } = result;
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+		const viewportHeight = container.clientHeight;
+		const totalHeight = spans.length * metrics.ROW_HEIGHT;
+		const maxScroll = Math.max(0, totalHeight - viewportHeight);
+
+		// Vertical: center the span's row in the viewport
+		const targetScrollTop = clamp(
+			levelIndex * metrics.ROW_HEIGHT -
+				viewportHeight / 2 +
+				metrics.ROW_HEIGHT / 2,
+			0,
+			maxScroll,
+		);
+
+		// Horizontal: zoom to span with padding (2x span duration), center it
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+		const spanDurationMs = spanEndMs - spanStartMs;
+		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
+
+		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
+
+		let targetViewStart = spanCenterMs - clampedWindow / 2;
+		let targetViewEnd = spanCenterMs + clampedWindow / 2;
+
+		targetViewStart = clamp(
+			targetViewStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedWindow,
+		);
+		targetViewEnd = targetViewStart + clampedWindow;
+
+		// Apply immediately (instant jump)
+		viewStartRef.current = targetViewStart;
+		viewEndRef.current = targetViewEnd;
+		scrollTopRef.current = targetScrollTop;
+
+		setViewStartTs(targetViewStart);
+		setViewEndTs(targetViewEnd);
+		setScrollTop(targetScrollTop);
+	}, [
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	]);
+}

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

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+export interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface FlamegraphCanvasProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	onSpanClick: (spanId: string) => void;
+	traceMetadata: ITraceMetadata;
+}
+
+export interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}

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

@@ -0,0 +1,355 @@
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import {
+	DASHED_BORDER_LINE_DASH,
+	EVENT_DOT_SIZE_RATIO,
+	LABEL_FONT,
+	LABEL_PADDING_X,
+	MAX_EVENT_DOT_SIZE,
+	MAX_SPAN_BAR_HEIGHT,
+	MIN_EVENT_DOT_SIZE,
+	MIN_SPAN_BAR_HEIGHT,
+	MIN_WIDTH_FOR_NAME,
+	MIN_WIDTH_FOR_NAME_AND_DURATION,
+	SPAN_BAR_HEIGHT_RATIO,
+} from './constants';
+import { SpanRect } from './types';
+
+export function clamp(v: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, v));
+}
+
+/** Create diagonal stripe pattern for selected/hovered span (repeating-linear-gradient -45deg style). */
+function createStripePattern(
+	ctx: CanvasRenderingContext2D,
+	color: string,
+): CanvasPattern | null {
+	const size = 20;
+	const patternCanvas = document.createElement('canvas');
+	patternCanvas.width = size;
+	patternCanvas.height = size;
+	const pCtx = patternCanvas.getContext('2d');
+	if (!pCtx) {
+		return null;
+	}
+
+	// Diagonal stripes at -45deg: 10px transparent, 10px colored (0.04 opacity), repeat
+	pCtx.globalAlpha = 0.04;
+	pCtx.strokeStyle = color;
+	pCtx.lineWidth = 10;
+	pCtx.lineCap = 'butt';
+	for (let i = -size; i < size * 2; i += size) {
+		pCtx.beginPath();
+		pCtx.moveTo(i + size, 0);
+		pCtx.lineTo(i, size);
+		pCtx.stroke();
+	}
+	pCtx.globalAlpha = 1;
+
+	return ctx.createPattern(patternCanvas, 'repeat');
+}
+
+export function findSpanById(
+	spans: FlamegraphSpan[][],
+	spanId: string,
+): { span: FlamegraphSpan; levelIndex: number } | null {
+	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
+		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
+		if (span) {
+			return { span, levelIndex };
+		}
+	}
+	return null;
+}
+
+export interface FlamegraphRowMetrics {
+	ROW_HEIGHT: number;
+	SPAN_BAR_HEIGHT: number;
+	SPAN_BAR_Y_OFFSET: number;
+	EVENT_DOT_SIZE: number;
+}
+
+export function getFlamegraphRowMetrics(
+	rowHeight: number,
+): FlamegraphRowMetrics {
+	const spanBarHeight = clamp(
+		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
+		MIN_SPAN_BAR_HEIGHT,
+		MAX_SPAN_BAR_HEIGHT,
+	);
+	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
+	const eventDotSize = clamp(
+		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
+		MIN_EVENT_DOT_SIZE,
+		MAX_EVENT_DOT_SIZE,
+	);
+
+	return {
+		ROW_HEIGHT: rowHeight,
+		SPAN_BAR_HEIGHT: spanBarHeight,
+		SPAN_BAR_Y_OFFSET: spanBarYOffset,
+		EVENT_DOT_SIZE: eventDotSize,
+	};
+}
+
+interface GetSpanColorArgs {
+	span: FlamegraphSpan;
+	isDarkMode: boolean;
+}
+
+export function getSpanColor(args: GetSpanColorArgs): string {
+	const { span, isDarkMode } = args;
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+
+	if (span.hasError) {
+		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+	}
+
+	return color;
+}
+
+interface DrawEventDotArgs {
+	ctx: CanvasRenderingContext2D;
+	x: number;
+	y: number;
+	isError: boolean;
+	isDarkMode: boolean;
+	eventDotSize: number;
+}
+
+export function drawEventDot(args: DrawEventDotArgs): void {
+	const { ctx, x, y, isError, isDarkMode, eventDotSize } = args;
+
+	ctx.save();
+	ctx.translate(x, y);
+	ctx.rotate(Math.PI / 4);
+
+	if (isError) {
+		ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+	} else {
+		ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+	}
+
+	ctx.lineWidth = 1;
+	const half = eventDotSize / 2;
+	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.restore();
+}
+
+interface DrawSpanBarArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	levelIndex: number;
+	spanRectsArray: SpanRect[];
+	color: string;
+	isDarkMode: boolean;
+	metrics: FlamegraphRowMetrics;
+	selectedSpanId?: string | null;
+	hoveredSpanId?: string | null;
+}
+
+export function drawSpanBar(args: DrawSpanBarArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		levelIndex,
+		spanRectsArray,
+		color,
+		isDarkMode,
+		metrics,
+		selectedSpanId,
+		hoveredSpanId,
+	} = args;
+
+	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
+	const isSelected = selectedSpanId === span.spanId;
+	const isHovered = hoveredSpanId === span.spanId;
+	const isSelectedOrHovered = isSelected || isHovered;
+
+	ctx.beginPath();
+	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
+
+	if (isSelectedOrHovered) {
+		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
+		const pattern = createStripePattern(ctx, color);
+		if (pattern) {
+			ctx.fillStyle = pattern;
+			ctx.fill();
+		}
+		if (isSelected) {
+			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = isSelected ? 2 : 1;
+		ctx.stroke();
+		if (isSelected) {
+			ctx.setLineDash([]);
+		}
+	} else {
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	spanRectsArray.push({
+		span,
+		x,
+		y: spanY,
+		width,
+		height: metrics.SPAN_BAR_HEIGHT,
+		level: levelIndex,
+	});
+
+	span.event?.forEach((event) => {
+		const spanDurationMs = span.durationNano / 1e6;
+		if (spanDurationMs <= 0) {
+			return;
+		}
+
+		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventOffsetPercent =
+			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
+		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
+		const eventX = x + (clampedOffset / 100) * width;
+		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
+
+		drawEventDot({
+			ctx,
+			x: eventX,
+			y: eventY,
+			isError: event.isError,
+			isDarkMode,
+			eventDotSize: metrics.EVENT_DOT_SIZE,
+		});
+	});
+
+	drawSpanLabel({
+		ctx,
+		span,
+		x,
+		y: spanY,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
+	});
+}
+
+export function formatDuration(durationNano: number): string {
+	const durationMs = durationNano / 1e6;
+	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
+	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
+}
+
+interface DrawSpanLabelArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	color: string;
+	isSelectedOrHovered: boolean;
+	isDarkMode: boolean;
+	spanBarHeight: number;
+}
+
+function drawSpanLabel(args: DrawSpanLabelArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight,
+	} = args;
+
+	if (width < MIN_WIDTH_FOR_NAME) {
+		return;
+	}
+
+	const name = span.name;
+
+	ctx.save();
+
+	// Clip text to span bar bounds
+	ctx.beginPath();
+	ctx.rect(x, y, width, spanBarHeight);
+	ctx.clip();
+
+	ctx.font = LABEL_FONT;
+	ctx.fillStyle = isSelectedOrHovered
+		? color
+		: isDarkMode
+		? 'rgba(255, 255, 255, 0.9)'
+		: 'rgba(0, 0, 0, 0.9)';
+	ctx.textBaseline = 'middle';
+
+	const textY = y + spanBarHeight / 2;
+	const leftX = x + LABEL_PADDING_X;
+	const rightX = x + width - LABEL_PADDING_X;
+	const availableWidth = width - LABEL_PADDING_X * 2;
+
+	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
+		const duration = formatDuration(span.durationNano);
+		const durationWidth = ctx.measureText(duration).width;
+		const minGap = 6;
+		const nameSpace = availableWidth - durationWidth - minGap;
+
+		// Duration right-aligned
+		ctx.textAlign = 'right';
+		ctx.fillText(duration, rightX, textY);
+
+		// Name left-aligned, truncated to fit remaining space
+		if (nameSpace > 20) {
+			ctx.textAlign = 'left';
+			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
+		}
+	} else {
+		// Name only, truncated to fit
+		ctx.textAlign = 'left';
+		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
+	}
+
+	ctx.restore();
+}
+
+function truncateText(
+	ctx: CanvasRenderingContext2D,
+	text: string,
+	maxWidth: number,
+): string {
+	const ellipsis = '...';
+	const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+	if (ctx.measureText(text).width <= maxWidth) {
+		return text;
+	}
+
+	let lo = 0;
+	let hi = text.length;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -0,0 +1,37 @@
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from '@signozhq/resizable';
+
+import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
+import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
+
+function TraceDetailsV3(): JSX.Element {
+	return (
+		<div
+			style={{
+				height: 'calc(100vh - 90px)',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<TraceDetailsHeader />
+			<ResizablePanelGroup
+				direction="vertical"
+				autoSaveId="trace-details-v3-layout"
+				style={{ flex: 1 }}
+			>
+				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
+					<TraceFlamegraph />
+				</ResizablePanel>
+				<ResizableHandle withHandle />
+				<ResizablePanel defaultSize={60} minSize={20}>
+					<div />
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
+	);
+}
+
+export default TraceDetailsV3;

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -14,21 +14,26 @@ import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery, UseQueryResult } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
+import { useRouteMatch } from 'react-router-dom';
 import { Modal } from 'antd';
 import getDashboard from 'api/v1/dashboards/id/get';
 import locked from 'api/v1/dashboards/id/lock';
+import { ALL_SELECTED_VALUE } from 'components/NewSelect/utils';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ROUTES from 'constants/routes';
 import dayjs, { Dayjs } from 'dayjs';
-import { useTransformDashboardVariables } from 'hooks/dashboard/useTransformDashboardVariables';
+import { useDashboardVariablesFromLocalStorage } from 'hooks/dashboard/useDashboardFromLocalStorage';
+import useVariablesFromUrl from 'hooks/dashboard/useVariablesFromUrl';
 import useTabVisibility from 'hooks/useTabFocus';
 import { getUpdatedLayout } from 'lib/dashboard/getUpdatedLayout';
 import { getMinMaxForSelectedTime } from 'lib/getMinMax';
-import { defaultTo } from 'lodash-es';
+import { defaultTo, isEmpty } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
 import isUndefined from 'lodash-es/isUndefined';
 import omitBy from 'lodash-es/omitBy';
 import { useAppContext } from 'providers/App/App';
 import { initializeDefaultVariables } from 'providers/Dashboard/initializeDefaultVariables';
+import { normalizeUrlValueForVariable } from 'providers/Dashboard/normalizeUrlValue';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 // eslint-disable-next-line no-restricted-imports
 import { Dispatch } from 'redux';
@@ -36,9 +41,10 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { UPDATE_TIME_INTERVAL } from 'types/actions/globalTime';
 import { SuccessResponseV2 } from 'types/api';
-import { Dashboard } from 'types/api/dashboard/getAll';
+import { Dashboard, IDashboardVariable } from 'types/api/dashboard/getAll';
 import APIError from 'types/api/error';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { v4 as generateUUID } from 'uuid';
 
 import {
 	DASHBOARD_CACHE_TIME,
@@ -69,6 +75,8 @@ export const DashboardContext = createContext<IDashboardContext>({
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
 	updatedTimeRef: {} as React.MutableRefObject<Dayjs | null>,
+	toScrollWidgetId: '',
+	setToScrollWidgetId: () => {},
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
@@ -77,13 +85,18 @@ export const DashboardContext = createContext<IDashboardContext>({
 	setColumnWidths: () => {},
 });
 
+interface Props {
+	dashboardId: string;
+}
+
 // eslint-disable-next-line sonarjs/cognitive-complexity
 export function DashboardProvider({
 	children,
-	dashboardId,
-}: PropsWithChildren<{ dashboardId: string }>): JSX.Element {
+}: PropsWithChildren): JSX.Element {
 	const [isDashboardSliderOpen, setIsDashboardSlider] = useState<boolean>(false);
 
+	const [toScrollWidgetId, setToScrollWidgetId] = useState<string>('');
+
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
 	const [
@@ -91,6 +104,11 @@ export function DashboardProvider({
 		setDashboardQueryRangeCalled,
 	] = useState<boolean>(false);
 
+	const isDashboardPage = useRouteMatch<Props>({
+		path: ROUTES.DASHBOARD,
+		exact: true,
+	});
+
 	const { showErrorModal } = useErrorModal();
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();
@@ -101,6 +119,11 @@ export function DashboardProvider({
 
 	const [onModal, Content] = Modal.useModal();
 
+	const isDashboardWidgetPage = useRouteMatch<Props>({
+		path: ROUTES.DASHBOARD_WIDGET,
+		exact: true,
+	});
+
 	const [layouts, setLayouts] = useState<Layout[]>([]);
 
 	const [panelMap, setPanelMap] = useState<
@@ -109,6 +132,11 @@ export function DashboardProvider({
 
 	const { isLoggedIn } = useAppContext();
 
+	const dashboardId =
+		(isDashboardPage
+			? isDashboardPage.params.dashboardId
+			: isDashboardWidgetPage?.params.dashboardId) || '';
+
 	const [selectedDashboard, setSelectedDashboard] = useState<Dashboard>();
 	const dashboardVariables = useDashboardVariablesSelector((s) => s.variables);
 	const savedDashboardId = useDashboardVariablesSelector((s) => s.dashboardId);
@@ -133,10 +161,9 @@ export function DashboardProvider({
 	const {
 		currentDashboard,
 		updateLocalStorageDashboardVariables,
-		getUrlVariables,
-		updateUrlVariable,
-		transformDashboardVariables,
-	} = useTransformDashboardVariables(dashboardId);
+	} = useDashboardVariablesFromLocalStorage(dashboardId);
+
+	const { getUrlVariables, updateUrlVariable } = useVariablesFromUrl();
 
 	const updatedTimeRef = useRef<Dayjs | null>(null); // Using ref to store the updated time
 	const modalRef = useRef<any>(null);
@@ -148,14 +175,108 @@ export function DashboardProvider({
 
 	const [isDashboardFetching, setIsDashboardFetching] = useState<boolean>(false);
 
+	const mergeDBWithLocalStorage = (
+		data: Dashboard,
+		localStorageVariables: any,
+	): Dashboard => {
+		const updatedData = data;
+		if (data && localStorageVariables) {
+			const updatedVariables = data.data.variables;
+			const variablesFromUrl = getUrlVariables();
+			Object.keys(data.data.variables).forEach((variable) => {
+				const variableData = data.data.variables[variable];
+
+				// values from url
+				const urlVariable = variableData?.name
+					? variablesFromUrl[variableData?.name] || variablesFromUrl[variableData.id]
+					: variablesFromUrl[variableData.id];
+
+				let updatedVariable = {
+					...data.data.variables[variable],
+					...localStorageVariables[variableData.name as any],
+				};
+
+				// respect the url variable if it is set, override the others
+				if (!isEmpty(urlVariable)) {
+					if (urlVariable === ALL_SELECTED_VALUE) {
+						updatedVariable = {
+							...updatedVariable,
+							allSelected: true,
+						};
+					} else {
+						// Normalize URL value to match variable's multiSelect configuration
+						const normalizedValue = normalizeUrlValueForVariable(
+							urlVariable,
+							variableData,
+						);
+
+						updatedVariable = {
+							...updatedVariable,
+							selectedValue: normalizedValue,
+							// Only set allSelected to false if showALLOption is available
+							...(updatedVariable?.showALLOption && { allSelected: false }),
+						};
+					}
+				}
+
+				updatedVariables[variable] = updatedVariable;
+			});
+			updatedData.data.variables = updatedVariables;
+		}
+		return updatedData;
+	};
+	// As we do not have order and ID's in the variables object, we have to process variables to add order and ID if they do not exist in the variables object
+	// eslint-disable-next-line sonarjs/cognitive-complexity
+	const transformDashboardVariables = (data: Dashboard): Dashboard => {
+		if (data && data.data && data.data.variables) {
+			const clonedDashboardData = mergeDBWithLocalStorage(
+				JSON.parse(JSON.stringify(data)),
+				currentDashboard,
+			);
+			const { variables } = clonedDashboardData.data;
+			const existingOrders: Set<number> = new Set();
+
+			for (const key in variables) {
+				// eslint-disable-next-line no-prototype-builtins
+				if (variables.hasOwnProperty(key)) {
+					const variable: IDashboardVariable = variables[key];
+
+					// Check if 'order' property doesn't exist or is undefined
+					if (variable.order === undefined) {
+						// Find a unique order starting from 0
+						let order = 0;
+						while (existingOrders.has(order)) {
+							order += 1;
+						}
+
+						variable.order = order;
+						existingOrders.add(order);
+						// ! BWC - Specific case for backward compatibility where textboxValue was used instead of defaultValue
+						if (variable.type === 'TEXTBOX' && !variable.defaultValue) {
+							variable.defaultValue = variable.textboxValue || '';
+						}
+					}
+
+					if (variable.id === undefined) {
+						variable.id = generateUUID();
+					}
+				}
+			}
+
+			return clonedDashboardData;
+		}
+
+		return data;
+	};
 	const dashboardResponse = useQuery(
 		[
 			REACT_QUERY_KEY.DASHBOARD_BY_ID,
+			isDashboardPage?.params,
 			dashboardId,
 			globalTime.isAutoRefreshDisabled,
 		],
 		{
-			enabled: !!dashboardId && isLoggedIn,
+			enabled: (!!isDashboardPage || !!isDashboardWidgetPage) && isLoggedIn,
 			queryFn: async () => {
 				setIsDashboardFetching(true);
 				try {
@@ -178,14 +299,13 @@ export function DashboardProvider({
 			},
 
 			onSuccess: (data: SuccessResponseV2<Dashboard>) => {
-				const updatedDashboardData = transformDashboardVariables(data?.data);
-
-				// initialize URL variables after dashboard state is set to avoid race conditions
-				const variables = updatedDashboardData?.data?.variables;
+				// if the url variable is not set for any variable, set it to the default value
+				const variables = data?.data?.data?.variables;
 				if (variables) {
 					initializeDefaultVariables(variables, getUrlVariables, updateUrlVariable);
 				}
 
+				const updatedDashboardData = transformDashboardVariables(data?.data);
 				const updatedDate = dayjs(updatedDashboardData?.updatedAt);
 
 				setIsDashboardLocked(updatedDashboardData?.locked || false);
@@ -276,7 +396,11 @@ export function DashboardProvider({
 
 	useEffect(() => {
 		// make the call on tab visibility only if the user is on dashboard / widget page
-		if (isVisible && updatedTimeRef.current && !!dashboardId) {
+		if (
+			isVisible &&
+			updatedTimeRef.current &&
+			(!!isDashboardPage || !!isDashboardWidgetPage)
+		) {
 			dashboardResponse.refetch();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -319,6 +443,7 @@ export function DashboardProvider({
 
 	const value: IDashboardContext = useMemo(
 		() => ({
+			toScrollWidgetId,
 			isDashboardSliderOpen,
 			isDashboardLocked,
 			handleToggleDashboardSlider,
@@ -332,6 +457,7 @@ export function DashboardProvider({
 			setPanelMap,
 			setSelectedDashboard,
 			updatedTimeRef,
+			setToScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
@@ -348,6 +474,7 @@ export function DashboardProvider({
 			dashboardId,
 			layouts,
 			panelMap,
+			toScrollWidgetId,
 			updateLocalStorageDashboardVariables,
 			currentDashboard,
 			dashboardQueryRangeCalled,

frontend/src/providers/Dashboard/__tests__/Dashboard.test.tsx

@@ -2,10 +2,11 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { MemoryRouter } from 'react-router-dom';
-import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import getDashboard from 'api/v1/dashboards/id/get';
 import { DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED } from 'constants/queryCacheTime';
 import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import ROUTES from 'constants/routes';
 import { DashboardProvider, useDashboard } from 'providers/Dashboard/Dashboard';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
@@ -18,28 +19,30 @@ jest.mock('api/v1/dashboards/id/get');
 jest.mock('api/v1/dashboards/id/lock');
 const mockGetDashboard = jest.mocked(getDashboard);
 
+// Mock useRouteMatch to simulate different route scenarios
+const mockUseRouteMatch = jest.fn();
+jest.mock('react-router-dom', () => ({
+	...jest.requireActual('react-router-dom'),
+	useRouteMatch: (): any => mockUseRouteMatch(),
+}));
+
 // Mock other dependencies
 jest.mock('hooks/useSafeNavigate', () => ({
-	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+	useSafeNavigate: (): any => ({
 		safeNavigate: jest.fn(),
 	}),
 }));
 
 // Mock only the essential dependencies for Dashboard provider
 jest.mock('providers/App/App', () => ({
-	useAppContext: (): {
-		isLoggedIn: boolean;
-		user: { email: string; role: string };
-	} => ({
+	useAppContext: (): any => ({
 		isLoggedIn: true,
 		user: { email: 'test@example.com', role: 'ADMIN' },
 	}),
 }));
 
 jest.mock('providers/ErrorModalProvider', () => ({
-	useErrorModal: (): { showErrorModal: jest.Mock } => ({
-		showErrorModal: jest.fn(),
-	}),
+	useErrorModal: (): any => ({ showErrorModal: jest.fn() }),
 }));
 
 jest.mock('react-redux', () => ({
@@ -57,10 +60,11 @@ jest.mock('uuid', () => ({ v4: jest.fn(() => 'mock-uuid') }));
 function TestComponent(): JSX.Element {
 	const { dashboardResponse, selectedDashboard } = useDashboard();
 	const { dashboardVariables } = useDashboardVariables();
+	const dashboardId = selectedDashboard?.id;
 
 	return (
 		<div>
-			<div data-testid="dashboard-id">{selectedDashboard?.id}</div>
+			<div data-testid="dashboard-id">{dashboardId}</div>
 			<div data-testid="query-status">{dashboardResponse.status}</div>
 			<div data-testid="is-loading">{dashboardResponse.isLoading.toString()}</div>
 			<div data-testid="is-fetching">
@@ -90,15 +94,27 @@ function createTestQueryClient(): QueryClient {
 
 // Helper to render with dashboard provider
 function renderWithDashboardProvider(
-	dashboardId = 'test-dashboard-id',
-): RenderResult {
+	initialRoute = '/dashboard/test-dashboard-id',
+	routeMatchParams?: { dashboardId: string } | null,
+): any {
 	const queryClient = createTestQueryClient();
-	const initialRoute = dashboardId ? `/dashboard/${dashboardId}` : '/dashboard';
+
+	// Mock the route match
+	mockUseRouteMatch.mockReturnValue(
+		routeMatchParams
+			? {
+					path: ROUTES.DASHBOARD,
+					url: `/dashboard/${routeMatchParams.dashboardId}`,
+					isExact: true,
+					params: routeMatchParams,
+			  }
+			: null,
+	);
 
 	return render(
 		<QueryClientProvider client={queryClient}>
 			<MemoryRouter initialEntries={[initialRoute]}>
-				<DashboardProvider dashboardId={dashboardId}>
+				<DashboardProvider>
 					<TestComponent />
 				</DashboardProvider>
 			</MemoryRouter>
@@ -172,7 +188,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 	describe('Query Key Behavior', () => {
 		it('should include route params in query key when on dashboard page', async () => {
 			const dashboardId = 'test-dashboard-id';
-			renderWithDashboardProvider(dashboardId);
+			renderWithDashboardProvider(`/dashboard/${dashboardId}`, { dashboardId });
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId });
@@ -187,17 +203,30 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const newDashboardId = 'new-dashboard-id';
 
 			// First render with initial dashboard ID
-			const { rerender } = renderWithDashboardProvider(initialDashboardId);
+			const { rerender } = renderWithDashboardProvider(
+				`/dashboard/${initialDashboardId}`,
+				{
+					dashboardId: initialDashboardId,
+				},
+			);
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: initialDashboardId });
 			});
 
-			// Rerender with new dashboard ID prop
+			// Change route params to simulate navigation
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${newDashboardId}`,
+				isExact: true,
+				params: { dashboardId: newDashboardId },
+			});
+
+			// Rerender with new route
 			rerender(
 				<QueryClientProvider client={createTestQueryClient()}>
 					<MemoryRouter initialEntries={[`/dashboard/${newDashboardId}`]}>
-						<DashboardProvider dashboardId={newDashboardId}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -212,24 +241,50 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			expect(mockGetDashboard).toHaveBeenCalledTimes(2);
 		});
 
-		it('should not fetch when no dashboardId is provided', () => {
-			renderWithDashboardProvider('');
+		it('should not fetch when not on dashboard page', () => {
+			// Mock no route match (not on dashboard page)
+			mockUseRouteMatch.mockReturnValue(null);
+
+			renderWithDashboardProvider('/some-other-page', null);
 
 			// Should not call the API
 			expect(mockGetDashboard).not.toHaveBeenCalled();
 		});
+
+		it('should handle undefined route params gracefully', async () => {
+			// Mock route match with undefined params
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: '/dashboard/undefined',
+				isExact: true,
+				params: undefined,
+			});
+
+			renderWithDashboardProvider('/dashboard/undefined');
+
+			// Should not call API when params are undefined
+			expect(mockGetDashboard).not.toHaveBeenCalled();
+		});
 	});
 
 	describe('Cache Behavior', () => {
-		it('should create separate cache entries for different dashboardIds', async () => {
+		it('should create separate cache entries for different route params', async () => {
 			const queryClient = createTestQueryClient();
 			const dashboardId1 = 'dashboard-1';
 			const dashboardId2 = 'dashboard-2';
 
+			// First dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId1}`,
+				isExact: true,
+				params: { dashboardId: dashboardId1 },
+			});
+
 			const { rerender } = render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId1}`]}>
-						<DashboardProvider dashboardId={dashboardId1}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -240,10 +295,18 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: dashboardId1 });
 			});
 
+			// Second dashboard
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId2}`,
+				isExact: true,
+				params: { dashboardId: dashboardId2 },
+			});
+
 			rerender(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId2}`]}>
-						<DashboardProvider dashboardId={dashboardId2}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -262,11 +325,13 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			expect(cacheKeys).toHaveLength(2);
 			expect(cacheKeys[0]).toEqual([
 				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId1 },
 				dashboardId1,
 				true, // globalTime.isAutoRefreshDisabled
 			]);
 			expect(cacheKeys[1]).toEqual([
 				REACT_QUERY_KEY.DASHBOARD_BY_ID,
+				{ dashboardId: dashboardId2 },
 				dashboardId2,
 				true, // globalTime.isAutoRefreshDisabled
 			]);
@@ -283,10 +348,17 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 			const queryClient = createTestQueryClient();
 			const dashboardId = 'auto-refresh-dashboard';
 
+			mockUseRouteMatch.mockReturnValue({
+				path: ROUTES.DASHBOARD,
+				url: `/dashboard/${dashboardId}`,
+				isExact: true,
+				params: { dashboardId },
+			});
+
 			render(
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={[`/dashboard/${dashboardId}`]}>
-						<DashboardProvider dashboardId={dashboardId}>
+						<DashboardProvider>
 							<TestComponent />
 						</DashboardProvider>
 					</MemoryRouter>
@@ -303,7 +375,7 @@ describe('Dashboard Provider - Query Key with Route Params', () => {
 				.find(
 					(query) =>
 						query.queryKey[0] === REACT_QUERY_KEY.DASHBOARD_BY_ID &&
-						query.queryKey[2] === false,
+						query.queryKey[3] === false,
 				);
 			expect(dashboardQuery).toBeDefined();
 			expect((dashboardQuery as { cacheTime: number }).cacheTime).toBe(
@@ -365,7 +437,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 			// Empty URL variables - tests initialization flow
 			mockGetUrlVariables.mockReturnValue({});
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -381,7 +455,6 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: false,
 							allSelected: false,
 							showALLOption: true,
-							order: 0,
 						},
 						services: {
 							id: 'svc-id',
@@ -389,7 +462,6 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 							multiSelect: true,
 							allSelected: false,
 							showALLOption: true,
-							order: 1,
 						},
 					},
 					mockGetUrlVariables,
@@ -421,7 +493,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['db', 'cache']);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -481,7 +555,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 
 			mockGetUrlVariables.mockReturnValue(urlVariables);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -517,7 +593,9 @@ describe('Dashboard Provider - URL Variables Integration', () => {
 				.mockReturnValueOnce('development')
 				.mockReturnValueOnce(['api']);
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				// Verify normalization was called with the specific values and variable configs
@@ -584,7 +662,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -626,7 +706,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -669,7 +751,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });
@@ -711,7 +795,9 @@ describe('Dashboard Provider - Textbox Variable Backward Compatibility', () => {
 			} as any);
 			/* eslint-enable @typescript-eslint/no-explicit-any */
 
-			renderWithDashboardProvider(DASHBOARD_ID);
+			renderWithDashboardProvider(`/dashboard/${DASHBOARD_ID}`, {
+				dashboardId: DASHBOARD_ID,
+			});
 
 			await waitFor(() => {
 				expect(mockGetDashboard).toHaveBeenCalledWith({ id: DASHBOARD_ID });

frontend/src/providers/Dashboard/helpers/scrollToWidgetIdHelper.ts

@@ -1,13 +0,0 @@
-import { create } from 'zustand';
-
-interface ScrollToWidgetIdState {
-	toScrollWidgetId: string;
-	setToScrollWidgetId: (widgetId: string) => void;
-}
-
-export const useScrollToWidgetIdStore = create<ScrollToWidgetIdState>(
-	(set) => ({
-		toScrollWidgetId: '',
-		setToScrollWidgetId: (widgetId): void => set({ toScrollWidgetId: widgetId }),
-	}),
-);

frontend/src/providers/Dashboard/types.ts

@@ -23,6 +23,8 @@ export interface IDashboardContext {
 		React.SetStateAction<Dashboard | undefined>
 	>;
 	updatedTimeRef: React.MutableRefObject<dayjs.Dayjs | null>;
+	toScrollWidgetId: string;
+	setToScrollWidgetId: React.Dispatch<React.SetStateAction<string>>;
 	updateLocalStorageDashboardVariables: (
 		id: string,
 		selectedValue:

frontend/src/utils/maskedKey.ts

@@ -1,9 +0,0 @@
-/**
- * Masks a key string, showing only the first 2 and last 2 characters.
- */
-export function getMaskedKey(key: string): string {
-	if (!key || key.length < 4) {
-		return key || 'N/A';
-	}
-	return `${key.substring(0, 2)}·······${key.slice(-2).trim()}`;
-}

pkg/alertmanager/service.go

@@ -72,7 +72,7 @@ func (service *Service) SyncServers(ctx context.Context) error {
 
 	service.serversMtx.Lock()
 	for _, org := range orgs {
-		config, _, err := service.getConfig(ctx, org.ID.StringValue())
+		config, err := service.getConfig(ctx, org.ID.StringValue())
 		if err != nil {
 			service.settings.Logger().ErrorContext(ctx, "failed to get alertmanager config for org", "org_id", org.ID.StringValue(), "error", err)
 			continue
@@ -171,7 +171,7 @@ func (service *Service) Stop(ctx context.Context) error {
 }
 
 func (service *Service) newServer(ctx context.Context, orgID string) (*alertmanagerserver.Server, error) {
-	config, storedHash, err := service.getConfig(ctx, orgID)
+	config, err := service.getConfig(ctx, orgID)
 	if err != nil {
 		return nil, err
 	}
@@ -181,16 +181,13 @@ func (service *Service) newServer(ctx context.Context, orgID string) (*alertmana
 		return nil, err
 	}
 
+	beforeCompareAndSelectHash := config.StoreableConfig().Hash
 	config, err = service.compareAndSelectConfig(ctx, config)
 	if err != nil {
 		return nil, err
 	}
 
-	// compare against the hash of the config stored in the DB (before overlays
-	// were applied by getConfig). This ensures that overlay changes (e.g. new
-	// defaults from an upstream upgrade or something similar) trigger a DB update
-	// so that other code paths reading directly from the store see the up-to-date config.
-	if storedHash == config.StoreableConfig().Hash {
+	if beforeCompareAndSelectHash == config.StoreableConfig().Hash {
 		service.settings.Logger().DebugContext(ctx, "skipping config store update for org", "org_id", orgID, "hash", config.StoreableConfig().Hash)
 		return server, nil
 	}
@@ -203,33 +200,27 @@ func (service *Service) newServer(ctx context.Context, orgID string) (*alertmana
 	return server, nil
 }
 
-// getConfig returns the config for the given orgID with overlays applied, along
-// with the hash that was stored in the DB before overlays. When no config exists
-// in the store yet the stored hash is empty.
-func (service *Service) getConfig(ctx context.Context, orgID string) (*alertmanagertypes.Config, string, error) {
+func (service *Service) getConfig(ctx context.Context, orgID string) (*alertmanagertypes.Config, error) {
 	config, err := service.configStore.Get(ctx, orgID)
-	var storedHash string
 	if err != nil {
 		if !errors.Ast(err, errors.TypeNotFound) {
-			return nil, "", err
+			return nil, err
 		}
 
 		config, err = alertmanagertypes.NewDefaultConfig(service.config.Global, service.config.Route, orgID)
 		if err != nil {
-			return nil, "", err
+			return nil, err
 		}
-	} else {
-		storedHash = config.StoreableConfig().Hash
 	}
 
 	if err := config.SetGlobalConfig(service.config.Global); err != nil {
-		return nil, "", err
+		return nil, err
 	}
 	if err := config.SetRouteConfig(service.config.Route); err != nil {
-		return nil, "", err
+		return nil, err
 	}
 
-	return config, storedHash, nil
+	return config, nil
 }
 
 func (service *Service) compareAndSelectConfig(ctx context.Context, incomingConfig *alertmanagertypes.Config) (*alertmanagertypes.Config, error) {

pkg/authz/openfgaschema/base.fga

@@ -2,11 +2,9 @@ module base
 
 type user
 
-type serviceaccount 
-
 type role 
   relations
-    define assignee: [user, serviceaccount]
+    define assignee: [user]
 
 type organisation 
   relations

pkg/modules/serviceaccount/implserviceaccount/handler.go

@@ -111,12 +111,7 @@ func (handler *handler) Update(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err = serviceAccount.Update(req.Name, req.Email, req.Roles)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
+	serviceAccount.Update(req.Name, req.Email, req.Roles)
 	err = handler.module.Update(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount)
 	if err != nil {
 		render.Error(rw, err)
@@ -152,12 +147,7 @@ func (handler *handler) UpdateStatus(rw http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err = serviceAccount.UpdateStatus(req.Status)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
+	serviceAccount.UpdateStatus(req.Status)
 	err = handler.module.UpdateStatus(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount)
 	if err != nil {
 		render.Error(rw, err)
@@ -300,7 +290,7 @@ func (handler *handler) UpdateFactorAPIKey(rw http.ResponseWriter, r *http.Reque
 	}
 
 	factorAPIKey.Update(req.Name, req.ExpiresAt)
-	err = handler.module.UpdateFactorAPIKey(ctx, valuer.MustNewUUID(claims.OrgID), serviceAccount.ID, factorAPIKey)
+	err = handler.module.UpdateFactorAPIKey(ctx, serviceAccount.ID, factorAPIKey)
 	if err != nil {
 		render.Error(rw, err)
 		return

pkg/modules/serviceaccount/implserviceaccount/module.go

@@ -5,7 +5,6 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/authz"
 	"github.com/SigNoz/signoz/pkg/emailing"
-	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/factory"
 	"github.com/SigNoz/signoz/pkg/modules/serviceaccount"
 	"github.com/SigNoz/signoz/pkg/types/authtypes"
@@ -34,7 +33,7 @@ func (module *module) Create(ctx context.Context, orgID valuer.UUID, serviceAcco
 	}
 
 	// authz actions cannot run in sql transactions
-	err = module.authz.Grant(ctx, orgID, serviceAccount.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, serviceAccount.ID.String(), orgID, nil))
+	err = module.authz.Grant(ctx, orgID, serviceAccount.Roles, authtypes.MustNewSubject(authtypes.TypeableUser, serviceAccount.ID.String(), orgID, nil))
 	if err != nil {
 		return err
 	}
@@ -61,24 +60,6 @@ func (module *module) Create(ctx context.Context, orgID valuer.UUID, serviceAcco
 	return nil
 }
 
-func (module *module) GetOrCreate(ctx context.Context, serviceAccount *serviceaccounttypes.ServiceAccount) (*serviceaccounttypes.ServiceAccount, error) {
-	existingServiceAccount, err := module.store.GetActiveByOrgIDAndName(ctx, serviceAccount.OrgID, serviceAccount.Name)
-	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
-		return nil, err
-	}
-
-	if existingServiceAccount != nil {
-		return serviceAccount, nil
-	}
-
-	err = module.Create(ctx, serviceAccount.OrgID, serviceAccount)
-	if err != nil {
-		return nil, err
-	}
-
-	return serviceAccount, nil
-}
-
 func (module *module) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*serviceaccounttypes.ServiceAccount, error) {
 	storableServiceAccount, err := module.store.Get(ctx, orgID, id)
 	if err != nil {
@@ -157,7 +138,7 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, input *serv
 
 	// gets the role diff if any to modify grants.
 	grants, revokes := serviceAccount.PatchRoles(input)
-	err = module.authz.ModifyGrant(ctx, orgID, revokes, grants, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, serviceAccount.ID.String(), orgID, nil))
+	err = module.authz.ModifyGrant(ctx, orgID, revokes, grants, authtypes.MustNewSubject(authtypes.TypeableUser, serviceAccount.ID.String(), orgID, nil))
 	if err != nil {
 		return err
 	}
@@ -190,28 +171,26 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, input *serv
 }
 
 func (module *module) UpdateStatus(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
-	err := module.authz.Revoke(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, input.ID.String(), orgID, nil))
+	serviceAccount, err := module.Get(ctx, orgID, input.ID)
 	if err != nil {
 		return err
 	}
 
-	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
-		// revoke all the API keys on disable
-		err := module.store.RevokeAllFactorAPIKeys(ctx, input.ID)
-		if err != nil {
-			return err
-		}
-
-		// update the status but do not delete the role mappings as we will use them for audits
-		err = module.store.Update(ctx, orgID, serviceaccounttypes.NewStorableServiceAccount(input))
-		if err != nil {
-			return err
-		}
-
+	if input.Status == serviceAccount.Status {
 		return nil
-	})
-	if err != nil {
-		return err
+	}
+
+	switch input.Status {
+	case serviceaccounttypes.StatusActive:
+		err := module.activateServiceAccount(ctx, orgID, input)
+		if err != nil {
+			return err
+		}
+	case serviceaccounttypes.StatusDisabled:
+		err := module.disableServiceAccount(ctx, orgID, input)
+		if err != nil {
+			return err
+		}
 	}
 
 	return nil
@@ -224,7 +203,7 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 	}
 
 	// revoke from authz first as this cannot run in sql transaction
-	err = module.authz.Revoke(ctx, orgID, serviceAccount.Roles, authtypes.MustNewSubject(authtypes.TypeableServiceAccount, serviceAccount.ID.String(), orgID, nil))
+	err = module.authz.Revoke(ctx, orgID, serviceAccount.Roles, authtypes.MustNewSubject(authtypes.TypeableUser, serviceAccount.ID.String(), orgID, nil))
 	if err != nil {
 		return err
 	}
@@ -297,13 +276,8 @@ func (module *module) ListFactorAPIKey(ctx context.Context, serviceAccountID val
 	return serviceaccounttypes.NewFactorAPIKeyFromStorables(storables), nil
 }
 
-func (module *module) UpdateFactorAPIKey(ctx context.Context, _ valuer.UUID, serviceAccountID valuer.UUID, factorAPIKey *serviceaccounttypes.FactorAPIKey) error {
-	err := module.store.UpdateFactorAPIKey(ctx, serviceAccountID, serviceaccounttypes.NewStorableFactorAPIKey(factorAPIKey))
-	if err != nil {
-		return err
-	}
-
-	return nil
+func (module *module) UpdateFactorAPIKey(ctx context.Context, serviceAccountID valuer.UUID, factorAPIKey *serviceaccounttypes.FactorAPIKey) error {
+	return module.store.UpdateFactorAPIKey(ctx, serviceAccountID, serviceaccounttypes.NewStorableFactorAPIKey(factorAPIKey))
 }
 
 func (module *module) RevokeFactorAPIKey(ctx context.Context, serviceAccountID valuer.UUID, id valuer.UUID) error {
@@ -333,3 +307,45 @@ func (module *module) RevokeFactorAPIKey(ctx context.Context, serviceAccountID v
 
 	return nil
 }
+
+func (module *module) disableServiceAccount(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
+	err := module.authz.Revoke(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableUser, input.ID.String(), orgID, nil))
+	if err != nil {
+		return err
+	}
+
+	err = module.store.RunInTx(ctx, func(ctx context.Context) error {
+		// revoke all the API keys on disable
+		err := module.store.RevokeAllFactorAPIKeys(ctx, input.ID)
+		if err != nil {
+			return err
+		}
+
+		// update the status but do not delete the role mappings as we will reuse them on activation.
+		err = module.Update(ctx, orgID, input)
+		if err != nil {
+			return err
+		}
+
+		return nil
+	})
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
+func (module *module) activateServiceAccount(ctx context.Context, orgID valuer.UUID, input *serviceaccounttypes.ServiceAccount) error {
+	err := module.authz.Grant(ctx, orgID, input.Roles, authtypes.MustNewSubject(authtypes.TypeableUser, input.ID.String(), orgID, nil))
+	if err != nil {
+		return err
+	}
+
+	err = module.Update(ctx, orgID, input)
+	if err != nil {
+		return err
+	}
+
+	return nil
+}

pkg/modules/serviceaccount/implserviceaccount/store.go

@@ -48,25 +48,6 @@ func (store *store) Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID)
 	return storable, nil
 }
 
-func (store *store) GetActiveByOrgIDAndName(ctx context.Context, orgID valuer.UUID, name string) (*serviceaccounttypes.StorableServiceAccount, error) {
-	storable := new(serviceaccounttypes.StorableServiceAccount)
-
-	err := store.
-		sqlstore.
-		BunDBCtx(ctx).
-		NewSelect().
-		Model(storable).
-		Where("org_id = ?", orgID).
-		Where("name = ?", name).
-		Where("status = ?", serviceaccounttypes.StatusActive).
-		Scan(ctx)
-	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeServiceAccountNotFound, "service account with name: %s doesn't exist in org: %s", name, orgID.String())
-	}
-
-	return storable, nil
-}
-
 func (store *store) GetByID(ctx context.Context, id valuer.UUID) (*serviceaccounttypes.StorableServiceAccount, error) {
 	storable := new(serviceaccounttypes.StorableServiceAccount)
 
@@ -207,7 +188,7 @@ func (store *store) CreateFactorAPIKey(ctx context.Context, storable *serviceacc
 		Model(storable).
 		Exec(ctx)
 	if err != nil {
-		return store.sqlstore.WrapAlreadyExistsErrf(err, serviceaccounttypes.ErrCodeAPIKeyAlreadyExists, "api key with name: %s already exists for service account: %s", storable.Name, storable.ServiceAccountID)
+		return store.sqlstore.WrapAlreadyExistsErrf(err, serviceaccounttypes.ErrCodeServiceAccountFactorAPIKeyAlreadyExists, "api key with name: %s already exists for service account: %s", storable.Name, storable.ServiceAccountID)
 	}
 
 	return nil
@@ -225,7 +206,7 @@ func (store *store) GetFactorAPIKey(ctx context.Context, serviceAccountID valuer
 		Where("service_account_id = ?", serviceAccountID).
 		Scan(ctx)
 	if err != nil {
-		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeAPIKeytNotFound, "api key with id: %s doesn't exist for service account: %s", id, serviceAccountID)
+		return nil, store.sqlstore.WrapNotFoundErrf(err, serviceaccounttypes.ErrCodeServiceAccounFactorAPIKeytNotFound, "api key with id: %s doesn't exist for service account: %s", id, serviceAccountID)
 	}
 
 	return storable, nil

pkg/modules/serviceaccount/serviceaccount.go

@@ -15,9 +15,6 @@ type Module interface {
 	// Gets a service account by id.
 	Get(context.Context, valuer.UUID, valuer.UUID) (*serviceaccounttypes.ServiceAccount, error)
 
-	// Gets or creates a service account by name
-	GetOrCreate(context.Context, *serviceaccounttypes.ServiceAccount) (*serviceaccounttypes.ServiceAccount, error)
-
 	// Gets a service account by id without fetching roles.
 	GetWithoutRoles(context.Context, valuer.UUID, valuer.UUID) (*serviceaccounttypes.ServiceAccount, error)
 
@@ -43,7 +40,7 @@ type Module interface {
 	ListFactorAPIKey(context.Context, valuer.UUID) ([]*serviceaccounttypes.FactorAPIKey, error)
 
 	// Updates an existing API key for a service account
-	UpdateFactorAPIKey(context.Context, valuer.UUID, valuer.UUID, *serviceaccounttypes.FactorAPIKey) error
+	UpdateFactorAPIKey(context.Context, valuer.UUID, *serviceaccounttypes.FactorAPIKey) error
 
 	// Revokes an existing API key for a service account
 	RevokeFactorAPIKey(context.Context, valuer.UUID, valuer.UUID) error

pkg/telemetrytraces/const.go

@@ -1,50 +1,6 @@
 package telemetrytraces
 
-import (
-	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
-)
-
-const (
-
-	// Internal Columns
-	SpanTimestampBucketStartColumn = "ts_bucket_start"
-	SpanResourceFingerPrintColumn  = "resource_fingerprint"
-
-	// Intrinsic Columns
-	SpanTimestampColumn        = "timestamp"
-	SpanTraceIDColumn          = "trace_id"
-	SpanSpanIDColumn           = "span_id"
-	SpanTraceStateColumn       = "trace_state"
-	SpanParentSpanIDColumn     = "parent_span_id"
-	SpanFlagsColumn            = "flags"
-	SpanNameColumn             = "name"
-	SpanKindColumn             = "kind"
-	SpanKindStringColumn       = "kind_string"
-	SpanDurationNanoColumn     = "duration_nano"
-	SpanStatusCodeColumn       = "status_code"
-	SpanStatusMessageColumn    = "status_message"
-	SpanStatusCodeStringColumn = "status_code_string"
-	SpanEventsColumn           = "events"
-	SpanLinksColumn            = "links"
-
-	// Calculated Columns
-	SpanResponseStatusCodeColumn = "response_status_code"
-	SpanExternalHTTPURLColumn    = "external_http_url"
-	SpanHTTPURLColumn            = "http_url"
-	SpanExternalHTTPMethodColumn = "external_http_method"
-	SpanHTTPMethodColumn         = "http_method"
-	SpanHTTPHostColumn           = "http_host"
-	SpanDBNameColumn             = "db_name"
-	SpanDBOperationColumn        = "db_operation"
-	SpanHasErrorColumn           = "has_error"
-	SpanIsRemoteColumn           = "is_remote"
-
-	// Contextual Columns
-	SpanAttributesStringColumn = "attributes_string"
-	SpanAttributesNumberColumn = "attributes_number"
-	SpanAttributesBoolColumn   = "attributes_bool"
-	SpanResourcesStringColumn  = "resources_string"
-)
+import "github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 
 var (
 	IntrinsicFields = map[string]telemetrytypes.TelemetryFieldKey{

pkg/telemetrytraces/statement_builder.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"log/slog"
+	"slices"
 	"strings"
 
 	"github.com/SigNoz/signoz/pkg/errors"
@@ -13,6 +14,7 @@ import (
 	qbtypes "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/huandu/go-sqlbuilder"
+	"golang.org/x/exp/maps"
 )
 
 var (
@@ -72,6 +74,41 @@ func (b *traceQueryStatementBuilder) Build(
 		return nil, err
 	}
 
+	/*
+		Adding a tech debt note here:
+		This piece of code is a hot fix and should be removed once we close issue: engineering-pod/issues/3622
+	*/
+	/*
+		-------------------------------- Start of tech debt ----------------------------
+	*/
+	if requestType == qbtypes.RequestTypeRaw {
+
+		selectedFields := query.SelectFields
+
+		if len(selectedFields) == 0 {
+			sortedKeys := maps.Keys(DefaultFields)
+			slices.Sort(sortedKeys)
+			for _, key := range sortedKeys {
+				selectedFields = append(selectedFields, DefaultFields[key])
+			}
+			query.SelectFields = selectedFields
+		}
+
+		selectFieldKeys := []string{}
+		for _, field := range selectedFields {
+			selectFieldKeys = append(selectFieldKeys, field.Name)
+		}
+
+		for _, x := range []string{"timestamp", "span_id", "trace_id"} {
+			if !slices.Contains(selectFieldKeys, x) {
+				query.SelectFields = append(query.SelectFields, DefaultFields[x])
+			}
+		}
+	}
+	/*
+		-------------------------------- End of tech debt ----------------------------
+	*/
+
 	query = b.adjustKeys(ctx, keys, query, requestType)
 
 	// Check if filter contains trace_id(s) and optimize time range if needed
@@ -274,53 +311,13 @@ func (b *traceQueryStatementBuilder) buildListQuery(
 		cteArgs = append(cteArgs, args)
 	}
 
-	sb.SelectMore(SpanTimestampColumn)
-	sb.SelectMore(SpanTraceIDColumn)
-	sb.SelectMore(SpanSpanIDColumn)
-	// By default select all
-	if len(query.SelectFields) == 0 {
-		// Select all intrinsic columns
-		sb.SelectMore(SpanTraceStateColumn)
-		sb.SelectMore(SpanParentSpanIDColumn)
-		sb.SelectMore(SpanFlagsColumn)
-		sb.SelectMore(SpanNameColumn)
-		sb.SelectMore(SpanKindColumn)
-		sb.SelectMore(SpanKindStringColumn)
-		sb.SelectMore(SpanDurationNanoColumn)
-		sb.SelectMore(SpanStatusCodeColumn)
-		sb.SelectMore(SpanStatusMessageColumn)
-		sb.SelectMore(SpanStatusCodeStringColumn)
-		sb.SelectMore(SpanEventsColumn)
-		sb.SelectMore(SpanLinksColumn)
-
-		// select all calculated columns
-		sb.SelectMore(SpanResponseStatusCodeColumn)
-		sb.SelectMore(SpanExternalHTTPURLColumn)
-		sb.SelectMore(SpanHTTPURLColumn)
-		sb.SelectMore(SpanExternalHTTPMethodColumn)
-		sb.SelectMore(SpanHTTPMethodColumn)
-		sb.SelectMore(SpanHTTPHostColumn)
-		sb.SelectMore(SpanDBNameColumn)
-		sb.SelectMore(SpanDBOperationColumn)
-		sb.SelectMore(SpanHasErrorColumn)
-		sb.SelectMore(SpanIsRemoteColumn)
-
-		// select all contextual columns
-		sb.SelectMore(SpanAttributesStringColumn)
-		sb.SelectMore(SpanAttributesNumberColumn)
-		sb.SelectMore(SpanAttributesBoolColumn)
-		sb.SelectMore(SpanResourcesStringColumn)
-	} else {
-		for _, field := range query.SelectFields {
-			if field.Name == SpanTimestampColumn || field.Name == SpanTraceIDColumn || field.Name == SpanSpanIDColumn {
-				continue
-			}
-			colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
-			if err != nil {
-				return nil, err
-			}
-			sb.SelectMore(colExpr)
+	// TODO: should we deprecate `SelectFields` and return everything from a span like we do for logs?
+	for _, field := range query.SelectFields {
+		colExpr, err := b.fm.ColumnExpressionFor(ctx, &field, keys)
+		if err != nil {
+			return nil, err
 		}
+		sb.SelectMore(colExpr)
 	}
 
 	// From table

pkg/types/authtypes/relation.go

@@ -20,20 +20,19 @@ var (
 )
 
 var TypeableRelations = map[Type][]Relation{
-	TypeUser:           {RelationRead, RelationUpdate, RelationDelete},
-	TypeServiceAccount: {RelationRead, RelationUpdate, RelationDelete},
-	TypeRole:           {RelationAssignee, RelationRead, RelationUpdate, RelationDelete},
-	TypeOrganization:   {RelationRead, RelationUpdate, RelationDelete},
-	TypeMetaResource:   {RelationRead, RelationUpdate, RelationDelete},
-	TypeMetaResources:  {RelationCreate, RelationList},
+	TypeUser:          {RelationRead, RelationUpdate, RelationDelete},
+	TypeRole:          {RelationAssignee, RelationRead, RelationUpdate, RelationDelete},
+	TypeOrganization:  {RelationRead, RelationUpdate, RelationDelete},
+	TypeMetaResource:  {RelationRead, RelationUpdate, RelationDelete},
+	TypeMetaResources: {RelationCreate, RelationList},
 }
 
 var RelationsTypeable = map[Relation][]Type{
 	RelationCreate:   {TypeMetaResources},
-	RelationRead:     {TypeUser, TypeServiceAccount, TypeRole, TypeOrganization, TypeMetaResource},
+	RelationRead:     {TypeUser, TypeRole, TypeOrganization, TypeMetaResource},
 	RelationList:     {TypeMetaResources},
-	RelationUpdate:   {TypeUser, TypeServiceAccount, TypeRole, TypeOrganization, TypeMetaResource},
-	RelationDelete:   {TypeUser, TypeServiceAccount, TypeRole, TypeOrganization, TypeMetaResource},
+	RelationUpdate:   {TypeUser, TypeRole, TypeOrganization, TypeMetaResource},
+	RelationDelete:   {TypeUser, TypeRole, TypeOrganization, TypeMetaResource},
 	RelationAssignee: {TypeRole},
 }
 

pkg/types/authtypes/selector.go

@@ -23,12 +23,11 @@ var (
 )
 
 var (
-	typeUserSelectorRegex           = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
-	typeServiceAccountSelectorRegex = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
-	typeRoleSelectorRegex           = regexp.MustCompile(`^([a-z-]{1,50}|\*)$`)
-	typeAnonymousSelectorRegex      = regexp.MustCompile(`^\*$`)
-	typeOrganizationSelectorRegex   = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
-	typeMetaResourceSelectorRegex   = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
+	typeUserSelectorRegex         = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
+	typeRoleSelectorRegex         = regexp.MustCompile(`^([a-z-]{1,50}|\*)$`)
+	typeAnonymousSelectorRegex    = regexp.MustCompile(`^\*$`)
+	typeOrganizationSelectorRegex = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
+	typeMetaResourceSelectorRegex = regexp.MustCompile(`^(^[0-9a-f]{8}(?:\-[0-9a-f]{4}){3}-[0-9a-f]{12}$|\*)$`)
 	// metaresources selectors are used to select either all or none until we introduce some hierarchy here.
 	typeMetaResourcesSelectorRegex = regexp.MustCompile(`^\*$`)
 )
@@ -99,11 +98,6 @@ func IsValidSelector(typed Type, selector string) error {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeAuthZInvalidSelector, "selector must conform to regex %s", typeUserSelectorRegex.String())
 		}
 		return nil
-	case TypeServiceAccount:
-		if !typeServiceAccountSelectorRegex.MatchString(selector) {
-			return errors.Newf(errors.TypeInvalidInput, ErrCodeAuthZInvalidSelector, "selector must conform to regex %s", typeServiceAccountSelectorRegex.String())
-		}
-		return nil
 	case TypeRole:
 		if !typeRoleSelectorRegex.MatchString(selector) {
 			return errors.Newf(errors.TypeInvalidInput, ErrCodeAuthZInvalidSelector, "selector must conform to regex %s", typeRoleSelectorRegex.String())

pkg/types/authtypes/typeable.go

@@ -15,21 +15,19 @@ var (
 )
 
 var (
-	TypeUser           = Type{valuer.NewString("user")}
-	TypeServiceAccount = Type{valuer.NewString("serviceaccount")}
-	TypeAnonymous      = Type{valuer.NewString("anonymous")}
-	TypeRole           = Type{valuer.NewString("role")}
-	TypeOrganization   = Type{valuer.NewString("organization")}
-	TypeMetaResource   = Type{valuer.NewString("metaresource")}
-	TypeMetaResources  = Type{valuer.NewString("metaresources")}
+	TypeUser          = Type{valuer.NewString("user")}
+	TypeAnonymous     = Type{valuer.NewString("anonymous")}
+	TypeRole          = Type{valuer.NewString("role")}
+	TypeOrganization  = Type{valuer.NewString("organization")}
+	TypeMetaResource  = Type{valuer.NewString("metaresource")}
+	TypeMetaResources = Type{valuer.NewString("metaresources")}
 )
 
 var (
-	TypeableUser           = &typeableUser{}
-	TypeableServiceAccount = &typeableServiceAccount{}
-	TypeableAnonymous      = &typeableAnonymous{}
-	TypeableRole           = &typeableRole{}
-	TypeableOrganization   = &typeableOrganization{}
+	TypeableUser         = &typeableUser{}
+	TypeableAnonymous    = &typeableAnonymous{}
+	TypeableRole         = &typeableRole{}
+	TypeableOrganization = &typeableOrganization{}
 )
 
 type Typeable interface {
@@ -55,8 +53,6 @@ func NewType(input string) (Type, error) {
 	switch input {
 	case "user":
 		return TypeUser, nil
-	case "serviceaccount":
-		return TypeServiceAccount, nil
 	case "role":
 		return TypeRole, nil
 	case "organization":
@@ -92,8 +88,6 @@ func NewTypeableFromType(typed Type, name Name) (Typeable, error) {
 		return TypeableRole, nil
 	case TypeUser:
 		return TypeableUser, nil
-	case TypeServiceAccount:
-		return TypeableServiceAccount, nil
 	case TypeOrganization:
 		return TypeableOrganization, nil
 	case TypeMetaResource:

pkg/types/authtypes/typeable_serviceaccount.go

@@ -1,38 +0,0 @@
-package authtypes
-
-import (
-	"github.com/SigNoz/signoz/pkg/valuer"
-	openfgav1 "github.com/openfga/api/proto/openfga/v1"
-)
-
-var _ Typeable = new(typeableServiceAccount)
-
-type typeableServiceAccount struct{}
-
-func (typeableServiceAccount *typeableServiceAccount) Tuples(subject string, relation Relation, selectors []Selector, orgID valuer.UUID) ([]*openfgav1.TupleKey, error) {
-	tuples := make([]*openfgav1.TupleKey, 0)
-
-	for _, selector := range selectors {
-		object := typeableServiceAccount.Prefix(orgID) + "/" + selector.String()
-		tuples = append(tuples, &openfgav1.TupleKey{User: subject, Relation: relation.StringValue(), Object: object})
-	}
-
-	return tuples, nil
-}
-
-func (typeableServiceAccount *typeableServiceAccount) Type() Type {
-	return TypeServiceAccount
-}
-
-func (typeableServiceAccount *typeableServiceAccount) Name() Name {
-	return MustNewName("serviceaccount")
-}
-
-// example: serviceaccount:organization/0199c47d-f61b-7833-bc5f-c0730f12f046/serviceaccount
-func (typeableServiceAccount *typeableServiceAccount) Prefix(orgID valuer.UUID) string {
-	return typeableServiceAccount.Type().StringValue() + ":" + "organization" + "/" + orgID.StringValue() + "/" + typeableServiceAccount.Name().String()
-}
-
-func (typeableServiceAccount *typeableServiceAccount) Scope(relation Relation) string {
-	return typeableServiceAccount.Name().String() + ":" + relation.StringValue()
-}

pkg/types/serviceaccounttypes/factor_api_key.go

@@ -11,22 +11,20 @@ import (
 )
 
 var (
-	ErrCodeAPIkeyInvalidInput        = errors.MustNewCode("service_account_factor_api_key_invalid_input")
-	ErrCodeAPIKeyAlreadyExists       = errors.MustNewCode("service_account_factor_api_key_already_exists")
-	ErrCodeAPIKeytNotFound           = errors.MustNewCode("service_account_factor_api_key_not_found")
-	ErrCodeAPIKeyExpired             = errors.MustNewCode("api_key_expired")
-	ErrCodeAPIkeyOlderLastObservedAt = errors.MustNewCode("api_key_older_last_observed_at")
+	ErrCodeServiceAccountFactorAPIkeyInvalidInput  = errors.MustNewCode("service_account_factor_api_key_invalid_input")
+	ErrCodeServiceAccountFactorAPIKeyAlreadyExists = errors.MustNewCode("service_account_factor_api_key_already_exists")
+	ErrCodeServiceAccounFactorAPIKeytNotFound      = errors.MustNewCode("service_account_factor_api_key_not_found")
 )
 
 type StorableFactorAPIKey struct {
-	bun.BaseModel `bun:"table:factor_api_key,alias:factor_api_key"`
+	bun.BaseModel `bun:"table:factor_api_key"`
 
 	types.Identifiable
 	types.TimeAuditable
 	Name             string    `bun:"name"`
 	Key              string    `bun:"key"`
 	ExpiresAt        uint64    `bun:"expires_at"`
-	LastObservedAt   time.Time `bun:"last_observed_at"`
+	LastUsed         time.Time `bun:"last_used"`
 	ServiceAccountID string    `bun:"service_account_id"`
 }
 
@@ -35,9 +33,9 @@ type FactorAPIKey struct {
 	types.TimeAuditable
 	Name             string      `json:"name" requrired:"true"`
 	Key              string      `json:"key" required:"true"`
-	ExpiresAt        uint64      `json:"expiresAt" required:"true"`
-	LastObservedAt   time.Time   `json:"lastObservedAt" required:"true"`
-	ServiceAccountID valuer.UUID `json:"serviceAccountId" required:"true"`
+	ExpiresAt        uint64      `json:"expires_at" required:"true"`
+	LastUsed         time.Time   `json:"last_used" required:"true"`
+	ServiceAccountID valuer.UUID `json:"service_account_id" required:"true"`
 }
 
 type GettableFactorAPIKeyWithKey struct {
@@ -49,19 +47,19 @@ type GettableFactorAPIKey struct {
 	types.Identifiable
 	types.TimeAuditable
 	Name             string      `json:"name" requrired:"true"`
-	ExpiresAt        uint64      `json:"expiresAt" required:"true"`
-	LastObservedAt   time.Time   `json:"lastObservedAt" required:"true"`
-	ServiceAccountID valuer.UUID `json:"serviceAccountId" required:"true"`
+	ExpiresAt        uint64      `json:"expires_at" required:"true"`
+	LastUsed         time.Time   `json:"last_used" required:"true"`
+	ServiceAccountID valuer.UUID `json:"service_account_id" required:"true"`
 }
 
 type PostableFactorAPIKey struct {
 	Name      string `json:"name" required:"true"`
-	ExpiresAt uint64 `json:"expiresAt" required:"true"`
+	ExpiresAt uint64 `json:"expires_at" required:"true"`
 }
 
 type UpdatableFactorAPIKey struct {
 	Name      string `json:"name" required:"true"`
-	ExpiresAt uint64 `json:"expiresAt" required:"true"`
+	ExpiresAt uint64 `json:"expires_at" required:"true"`
 }
 
 func NewFactorAPIKeyFromStorable(storable *StorableFactorAPIKey) *FactorAPIKey {
@@ -71,7 +69,7 @@ func NewFactorAPIKeyFromStorable(storable *StorableFactorAPIKey) *FactorAPIKey {
 		Name:             storable.Name,
 		Key:              storable.Key,
 		ExpiresAt:        storable.ExpiresAt,
-		LastObservedAt:   storable.LastObservedAt,
+		LastUsed:         storable.LastUsed,
 		ServiceAccountID: valuer.MustNewUUID(storable.ServiceAccountID),
 	}
 }
@@ -93,7 +91,7 @@ func NewStorableFactorAPIKey(factorAPIKey *FactorAPIKey) *StorableFactorAPIKey {
 		Name:             factorAPIKey.Name,
 		Key:              factorAPIKey.Key,
 		ExpiresAt:        factorAPIKey.ExpiresAt,
-		LastObservedAt:   factorAPIKey.LastObservedAt,
+		LastUsed:         factorAPIKey.LastUsed,
 		ServiceAccountID: factorAPIKey.ServiceAccountID.String(),
 	}
 }
@@ -107,7 +105,7 @@ func NewGettableFactorAPIKeys(keys []*FactorAPIKey) []*GettableFactorAPIKey {
 			TimeAuditable:    key.TimeAuditable,
 			Name:             key.Name,
 			ExpiresAt:        key.ExpiresAt,
-			LastObservedAt:   key.LastObservedAt,
+			LastUsed:         key.LastUsed,
 			ServiceAccountID: key.ServiceAccountID,
 		}
 	}
@@ -130,29 +128,6 @@ func (apiKey *FactorAPIKey) Update(name string, expiresAt uint64) {
 	apiKey.UpdatedAt = time.Now()
 }
 
-func (apiKey *FactorAPIKey) IsExpired() error {
-	if apiKey.ExpiresAt == 0 {
-		return nil
-	}
-
-	if time.Now().After(time.Unix(int64(apiKey.ExpiresAt), 0)) {
-		return errors.New(errors.TypeUnauthenticated, ErrCodeAPIKeyExpired, "api key has been expired")
-	}
-
-	return nil
-}
-
-func (apiKey *FactorAPIKey) UpdateLastObservedAt(lastObservedAt time.Time) error {
-	if lastObservedAt.Before(apiKey.LastObservedAt) {
-		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyOlderLastObservedAt, "last observed at is before the current last observed at")
-	}
-
-	apiKey.LastObservedAt = lastObservedAt
-	apiKey.UpdatedAt = time.Now()
-
-	return nil
-}
-
 func (key *PostableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	type Alias PostableFactorAPIKey
 
@@ -162,7 +137,7 @@ func (key *PostableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	}
 
 	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyInvalidInput, "name cannot be empty")
+		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountFactorAPIkeyInvalidInput, "name cannot be empty")
 	}
 
 	*key = PostableFactorAPIKey(temp)
@@ -178,7 +153,7 @@ func (key *UpdatableFactorAPIKey) UnmarshalJSON(data []byte) error {
 	}
 
 	if temp.Name == "" {
-		return errors.New(errors.TypeInvalidInput, ErrCodeAPIkeyInvalidInput, "name cannot be empty")
+		return errors.New(errors.TypeInvalidInput, ErrCodeServiceAccountFactorAPIkeyInvalidInput, "name cannot be empty")
 	}
 
 	*key = UpdatableFactorAPIKey(temp)