test: unit tests update

.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
 

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/package.json

@@ -64,7 +64,7 @@
     "@signozhq/sonner": "0.1.0",
     "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
-    "@signozhq/toggle-group": "0.0.1",
+    "@signozhq/toggle-group": "^0.0.1",
     "@signozhq/tooltip": "0.0.2",
     "@tanstack/react-table": "8.20.6",
     "@tanstack/react-virtual": "3.11.2",

frontend/src/AppRoutes/Private.tsx

@@ -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);
 

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/CustomTimePicker/CustomTimePicker.styles.scss

@@ -1,6 +1,31 @@
 .custom-time-picker {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	align-items: center;
+	gap: 4px;
+
+	.zoom-out-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		color: var(--foreground);
+		border: 1px solid var(--border);
+		border-radius: 2px;
+		box-shadow: none;
+		padding: 10px;
+		height: 33px;
+
+		&:hover:not(:disabled) {
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
+		}
+
+		&:disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+	}
 
 	.timeSelection-input {
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.test.tsx

@@ -16,6 +16,15 @@ jest.mock('react-router-dom', () => {
 	};
 });
 
+jest.mock('react-redux', () => ({
+	...jest.requireActual('react-redux'),
+	useDispatch: jest.fn(() => jest.fn()),
+	useSelector: jest.fn(() => ({
+		minTime: 0,
+		maxTime: Date.now(),
+	})),
+}));
+
 jest.mock('providers/Timezone', () => {
 	const actual = jest.requireActual('providers/Timezone');
 

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -7,9 +7,11 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import { Button } from '@signozhq/button';
 import { Input, InputRef, Popover, Tooltip } from 'antd';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { QueryParams } from 'constants/query';
 import { DateTimeRangeType } from 'container/TopNav/CustomDateTimeModal';
 import {
 	FixedDurationSuggestionOptions,
@@ -17,9 +19,11 @@ import {
 	RelativeDurationSuggestionOptions,
 } from 'container/TopNav/DateTimeSelectionV2/constants';
 import dayjs from 'dayjs';
+import { useZoomOut } from 'hooks/useZoomOut';
 import { isValidShortHandDateTimeFormat } from 'lib/getMinMax';
+import { isZoomOutDisabled } from 'lib/zoomOutUtils';
 import { defaultTo, isFunction, noop } from 'lodash-es';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, ZoomOut } from 'lucide-react';
 import { useTimezone } from 'providers/Timezone';
 import { getTimeDifference, validateEpochRange } from 'utils/epochUtils';
 import { popupContainer } from 'utils/selectPopupContainer';
@@ -66,6 +70,8 @@ interface CustomTimePickerProps {
 	showRecentlyUsed?: boolean;
 	minTime: number;
 	maxTime: number;
+	/** When true, zoom-out button is hidden (e.g. in drawer/modal time selection) */
+	isModalTimeSelection?: boolean;
 }
 
 function CustomTimePicker({
@@ -88,6 +94,7 @@ function CustomTimePicker({
 	showRecentlyUsed = true,
 	minTime,
 	maxTime,
+	isModalTimeSelection = false,
 }: CustomTimePickerProps): JSX.Element {
 	const [
 		selectedTimePlaceholderValue,
@@ -116,6 +123,14 @@ function CustomTimePicker({
 
 	const [isOpenedFromFooter, setIsOpenedFromFooter] = useState(false);
 
+	const durationMs = (maxTime - minTime) / 1e6;
+	const zoomOutDisabled = showLiveLogs || isZoomOutDisabled(durationMs);
+
+	const handleZoomOut = useZoomOut({
+		isDisabled: zoomOutDisabled,
+		urlParamsToDelete: [QueryParams.activeLogId],
+	});
+
 	// function to get selected time in Last 1m, Last 2h, Last 3d, Last 4w format
 	// 1m, 2h, 3d, 4w -> Last 1 minute, Last 2 hours, Last 3 days, Last 4 weeks
 	const getSelectedTimeRangeLabelInRelativeFormat = (
@@ -631,6 +646,23 @@ function CustomTimePicker({
 					/>
 				</Popover>
 			</Tooltip>
+			{!showLiveLogs && !isModalTimeSelection && (
+				<Tooltip
+					title={
+						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
+					}
+				>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
+				</Tooltip>
+			)}
 		</div>
 	);
 }

frontend/src/components/CustomTimePicker/__tests__/customTimePickerZoomOut.test.tsx

@@ -0,0 +1,169 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import CustomTimePicker from '../CustomTimePicker';
+
+const MS_PER_MIN = 60 * 1000;
+const NOW_MS = 1705312800000;
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: (selector: (state: MockAppState) => unknown): unknown => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: (NOW_MS - 15 * MS_PER_MIN) * 1e6,
+				maxTime: NOW_MS * 1e6,
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: jest.Mock } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: () => string;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: (): string => 'relativeTime=45m',
+	}),
+}));
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: (): { timezone: { value: string; offset: string } } => ({
+		timezone: { value: 'UTC', offset: 'UTC' },
+	}),
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+const now = Date.now();
+const defaultProps = {
+	onSelect: jest.fn(),
+	onError: jest.fn(),
+	selectedValue: '15m',
+	selectedTime: '15m',
+	onValidCustomDateChange: jest.fn(),
+	open: false,
+	setOpen: jest.fn(),
+	items: [
+		{ value: '15m', label: 'Last 15 minutes' },
+		{ value: '1h', label: 'Last 1 hour' },
+	],
+	minTime: (now - 15 * 60 * 1000) * 1e6,
+	maxTime: now * 1e6,
+};
+
+describe('CustomTimePicker - zoom out button', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('should render zoom out button when showLiveLogs is false', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		expect(screen.getByTestId('zoom-out-btn')).toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when showLiveLogs is true', () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={true} />);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should not render zoom out button when isModalTimeSelection is true', () => {
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				showLiveLogs={false}
+				isModalTimeSelection={true}
+			/>,
+		);
+
+		expect(screen.queryByTestId('zoom-out-btn')).not.toBeInTheDocument();
+	});
+
+	it('should call handleZoomOut when zoom out button is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockDispatch).toHaveBeenCalled();
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+	});
+
+	it('should use real ladder logic: 15m range zooms to 45m preset and updates URL', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringMatching(/\/logs-explorer\?relativeTime=45m/),
+		);
+		expect(mockDispatch).toHaveBeenCalled();
+	});
+
+	it('should delete activeLogId when zoom out is clicked', async () => {
+		render(<CustomTimePicker {...defaultProps} showLiveLogs={false} />);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		await userEvent.click(zoomOutBtn);
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+
+	it('should disable zoom button when time range is >= 1 month', () => {
+		const now = Date.now();
+		render(
+			<CustomTimePicker
+				{...defaultProps}
+				minTime={(now - 31 * MS_PER_DAY) * 1e6}
+				maxTime={now * 1e6}
+				showLiveLogs={false}
+			/>,
+		);
+
+		const zoomOutBtn = screen.getByTestId('zoom-out-btn');
+		expect(zoomOutBtn).toBeDisabled();
+	});
+});

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/DashboardContainer/visualization/panels/TimeSeriesPanel/__tests__/utils.test.ts

@@ -224,7 +224,7 @@ describe('TimeSeriesPanel utils', () => {
 			});
 		});
 
-		it('uses DrawStyle.Line and showPoints false when series has multiple valid points', () => {
+		it('uses DrawStyle.Line and VisibilityMode.Never when series has multiple valid points', () => {
 			const apiResponse = createApiResponse([
 				{
 					metric: {},

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

@@ -10,9 +10,9 @@ import getLabelName from 'lib/getLabelName';
 import { OnClickPluginOpts } from 'lib/uPlotLib/plugins/onClickPlugin';
 import {
 	DrawStyle,
-	FillMode,
 	LineInterpolation,
 	LineStyle,
+	VisibilityMode,
 } from 'lib/uPlotV2/config/types';
 import { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
 import { isInvalidPlotValue } from 'lib/uPlotV2/utils/dataUtils';
@@ -124,12 +124,12 @@ export const prepareUPlotConfig = ({
 			label: label,
 			colorMapping: widget.customLegendColors ?? {},
 			spanGaps: true,
-			lineStyle: widget.lineStyle || LineStyle.Solid,
-			lineInterpolation: widget.lineInterpolation || LineInterpolation.Spline,
-			showPoints:
-				widget.showPoints || hasSingleValidPoint ? true : !!widget.showPoints,
+			lineStyle: LineStyle.Solid,
+			lineInterpolation: LineInterpolation.Spline,
+			showPoints: hasSingleValidPoint
+				? VisibilityMode.Always
+				: VisibilityMode.Never,
 			pointSize: 5,
-			fillMode: widget.fillMode || FillMode.None,
 			isDarkMode,
 		});
 	});

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/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/NewWidget.styles.scss

@@ -65,22 +65,6 @@
 	}
 }
 
-.new-widget-container {
-	.resizable-panel-left-container {
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
-	.resizable-panel-right-container {
-		overflow-y: auto;
-		min-width: 350px;
-	}
-
-	.widget-resizable-handle {
-		height: 100vh;
-	}
-}
-
 .lightMode {
 	.edit-header {
 		border-bottom: 1px solid var(--bg-vanilla-300);

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.styles.scss

@@ -1,7 +1,5 @@
 .column-unit-selector {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+	margin-top: 16px;
 
 	.heading {
 		color: var(--bg-vanilla-400);
@@ -32,11 +30,6 @@
 			width: 100%;
 		}
 	}
-	&-content {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-	}
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/ColumnUnitSelector/ColumnUnitSelector.tsx

@@ -72,24 +72,22 @@ export function ColumnUnitSelector(
 	return (
 		<section className="column-unit-selector">
 			<Typography.Text className="heading">Column Units</Typography.Text>
-			<div className="column-unit-selector-content">
-				{aggregationQueries.map(({ value, label }) => {
-					const baseQueryName = value.split('.')[0];
-					return (
-						<YAxisUnitSelectorV2
-							value={columnUnits[value] || ''}
-							onSelect={(unitValue: string): void =>
-								handleColumnUnitSelect(value, unitValue)
-							}
-							fieldLabel={label}
-							key={value}
-							selectedQueryName={baseQueryName}
-							// Update the column unit value automatically only in create mode
-							shouldUpdateYAxisUnit={isNewDashboard}
-						/>
-					);
-				})}
-			</div>
+			{aggregationQueries.map(({ value, label }) => {
+				const baseQueryName = value.split('.')[0];
+				return (
+					<YAxisUnitSelectorV2
+						value={columnUnits[value] || ''}
+						onSelect={(unitValue: string): void =>
+							handleColumnUnitSelect(value, unitValue)
+						}
+						fieldLabel={label}
+						key={value}
+						selectedQueryName={baseQueryName}
+						// Update the column unit value automatically only in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
+					/>
+				);
+			})}
 		</section>
 	);
 }

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

@@ -56,6 +56,9 @@ describe('ContextLinks Component', () => {
 				/>,
 			);
 
+			// Check that the component renders
+			expect(screen.getByText('Context Links')).toBeInTheDocument();
+
 			// Check that the add button is present
 			expect(
 				screen.getByRole('button', { name: /context link/i }),

frontend/src/container/NewWidget/RightContainer/ContextLinks/index.tsx

@@ -14,7 +14,7 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Button, Modal } from 'antd';
+import { Button, Modal, Typography } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical, Pencil, Plus, Trash2 } from 'lucide-react';
 import {
@@ -134,16 +134,11 @@ function ContextLinks({
 
 	return (
 		<div className="context-links-container">
+			<Typography.Text className="context-links-text">
+				Context Links
+			</Typography.Text>
+
 			<div className="context-links-list">
-				<Button
-					type="default"
-					className="add-context-link-button"
-					icon={<Plus size={12} />}
-					style={{ width: '100%' }}
-					onClick={handleAddContextLink}
-				>
-					Add Context Link
-				</Button>
 				<OverlayScrollbar>
 					<DndContext
 						sensors={sensors}
@@ -165,6 +160,16 @@ function ContextLinks({
 						</SortableContext>
 					</DndContext>
 				</OverlayScrollbar>
+
+				{/* button to add context link */}
+				<Button
+					type="primary"
+					className="add-context-link-button"
+					icon={<Plus size={12} />}
+					onClick={handleAddContextLink}
+				>
+					Context Link
+				</Button>
 			</div>
 
 			<Modal

frontend/src/container/NewWidget/RightContainer/ContextLinks/styles.scss

@@ -2,6 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
+	margin: 12px;
 }
 
 .context-links-text {
@@ -109,7 +110,10 @@
 }
 
 .add-context-link-button {
-	width: 100%;
+	display: flex;
+	align-items: center;
+	margin: auto;
+	width: fit-content;
 }
 
 .lightMode {

frontend/src/container/NewWidget/RightContainer/RightContainer.styles.scss

@@ -2,28 +2,6 @@
 	display: flex;
 	flex-direction: column;
 
-	.section-heading {
-		font-family: 'Space Mono';
-		color: var(--bg-vanilla-400);
-		font-size: 13px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 138.462% */
-		letter-spacing: 0.52px;
-		text-transform: uppercase;
-	}
-
-	.section-heading-small {
-		font-family: 'Space Mono';
-		color: var(--bg-vanilla-400);
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 400;
-		word-break: initial;
-		line-height: 16px; /* 133.333% */
-		letter-spacing: 0.48px;
-	}
-
 	.header {
 		display: flex;
 		padding: 14px 14px 14px 12px;
@@ -46,35 +24,86 @@
 			letter-spacing: -0.07px;
 		}
 	}
-	.control-container {
+
+	.name-description {
 		display: flex;
 		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		border-top: 1px solid var(--bg-slate-500);
+		border-bottom: 1px solid var(--bg-slate-500);
 		gap: 8px;
+
+		.typography {
+			color: var(--bg-vanilla-400);
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
+		}
+
+		.name-input {
+			display: flex;
+			padding: 6px 6px 6px 8px;
+			align-items: center;
+			gap: 4px;
+			flex: 1 0 0;
+			align-self: stretch;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			color: var(--bg-vanilla-100);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 128.571% */
+			letter-spacing: -0.07px;
+		}
+
+		.description-input {
+			border-style: unset;
+			.ant-input {
+				display: flex;
+				height: 80px;
+				padding: 6px 6px 6px 8px;
+				align-items: flex-start;
+				gap: 4px;
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+				color: var(--bg-vanilla-100);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 128.571% */
+				letter-spacing: -0.07px;
+			}
+		}
 	}
 
 	.panel-config {
 		display: flex;
 		flex-direction: column;
+		padding: 12px 12px 16px 12px;
+		gap: 8px;
+		border-bottom: 1px solid var(--bg-slate-500);
 
-		.toggle-card {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-			padding: 12px;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-400);
-		}
-
-		.toggle-card-text-container {
-			display: flex;
-			flex-direction: column;
-			gap: 4px;
+		.typography {
+			color: var(--bg-vanilla-400);
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
 		}
 
 		.panel-type-select {
-			width: 100%;
 			.ant-select-selector {
 				display: flex;
 				height: 32px;
@@ -86,32 +115,98 @@
 				border: 1px solid var(--bg-slate-400);
 				background: var(--bg-ink-300);
 			}
+
+			.select-option {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				.icon {
+					display: flex;
+					align-items: center;
+				}
+
+				.display {
+					color: var(--bg-vanilla-100);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 16px; /* 133.333% */
+				}
+			}
 		}
 
-		.toggle-card-description {
-			color: var(--bg-vanilla-400);
-			font-family: Inter;
-			font-size: 12px;
-			font-style: normal;
-			font-weight: 400;
-			opacity: 0.6;
-			line-height: 16px; /* 133.333% */
+		.fill-gaps {
+			margin-top: 16px;
+			display: flex;
+			padding: 12px;
+			justify-content: space-between;
+			align-items: center;
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+
+			.fill-gaps-text {
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
 		}
 
 		.log-scale,
-		.decimal-precision-selector,
-		.legend-position {
+		.decimal-precision-selector {
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-position {
+			margin-top: 16px;
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+			gap: 8px;
+		}
+
+		.legend-colors {
+			margin-top: 16px;
+		}
+
+		.panel-time-text {
+			margin-top: 16px;
+			color: var(--bg-vanilla-400);
+			font-family: 'Space Mono';
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 138.462% */
+			letter-spacing: 0.52px;
+			text-transform: uppercase;
 		}
 
 		.y-axis-unit-selector,
 		.y-axis-unit-selector-v2 {
+			margin-top: 16px;
 			display: flex;
 			flex-direction: column;
 			gap: 8px;
 
 			.heading {
-				@extend .section-heading;
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
 			}
 
 			.input {
@@ -164,6 +259,7 @@
 
 				.text {
 					color: var(--bg-vanilla-400);
+					font-family: 'Space Mono';
 					font-size: 12px;
 					font-style: normal;
 					font-weight: 400;
@@ -182,8 +278,113 @@
 		}
 
 		.stack-chart {
-			flex-direction: row;
+			margin-top: 16px;
+			display: flex;
 			justify-content: space-between;
+			gap: 8px;
+
+			.label {
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
+		}
+
+		.bucket-config {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+
+			.label {
+				color: var(--bg-vanilla-400);
+				font-family: 'Space Mono';
+				font-size: 13px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 18px; /* 138.462% */
+				letter-spacing: 0.52px;
+				text-transform: uppercase;
+			}
+
+			.bucket-size-label {
+				margin-top: 8px;
+			}
+
+			.bucket-input {
+				display: flex;
+				width: 100%;
+				height: 32px;
+				padding: 6px 6px 6px 8px;
+				align-items: center;
+				gap: 4px;
+				align-self: stretch;
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+
+				.ant-input {
+					background: var(--bg-ink-300);
+				}
+			}
+
+			.combine-hist {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 8px;
+
+				.label {
+					color: var(--bg-vanilla-400);
+					font-family: 'Space Mono';
+					font-size: 13px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 138.462% */
+					letter-spacing: 0.52px;
+					text-transform: uppercase;
+				}
+			}
+		}
+	}
+
+	.context-links {
+		border-bottom: 1px solid var(--bg-slate-500);
+	}
+
+	.alerts {
+		display: flex;
+		padding: 12px;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid var(--bg-slate-500);
+		cursor: pointer;
+
+		.left-section {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+
+			.bell-icon {
+				color: var(--bg-vanilla-400);
+			}
+
+			.alerts-text {
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: 0.14px;
+			}
+		}
+		.plus-icon {
+			color: var(--bg-vanilla-400);
 		}
 	}
 }
@@ -210,16 +411,42 @@
 .lightMode {
 	.right-container {
 		background-color: var(--bg-vanilla-100);
-		.section-heading {
-			color: var(--bg-ink-400);
-		}
 		.header {
 			.header-text {
 				color: var(--bg-ink-400);
 			}
 		}
 
+		.name-description {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.typography {
+				color: var(--bg-ink-400);
+			}
+
+			.name-input {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-300);
+			}
+
+			.description-input {
+				.ant-input {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-300);
+					color: var(--bg-ink-300);
+				}
+			}
+		}
+
 		.panel-config {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.typography {
+				color: var(--bg-ink-400);
+			}
+
 			.panel-type-select {
 				.ant-select-selector {
 					border: 1px solid var(--bg-vanilla-300);
@@ -244,16 +471,28 @@
 				}
 			}
 
-			.toggle-card {
+			.fill-gaps {
 				border: 1px solid var(--bg-vanilla-300);
 				background: var(--bg-vanilla-300);
 
 				.fill-gaps-text {
 					color: var(--bg-ink-400);
 				}
-				.toggle-card-description {
+			}
+
+			.bucket-config {
+				.label {
 					color: var(--bg-ink-400);
 				}
+
+				.bucket-input {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-300);
+
+					.ant-input {
+						background: var(--bg-vanilla-300);
+					}
+				}
 			}
 
 			.panel-time-text {
@@ -289,6 +528,27 @@
 				}
 			}
 		}
+
+		.alerts {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.left-section {
+				.bell-icon {
+					color: var(--bg-ink-300);
+				}
+
+				.alerts-text {
+					color: var(--bg-ink-300);
+				}
+			}
+			.plus-icon {
+				color: var(--bg-ink-300);
+			}
+		}
+
+		.context-links {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+		}
 	}
 
 	.select-option {

frontend/src/container/NewWidget/RightContainer/SettingSections/AlertsSection/AlertsSection.styles.scss

@@ -1,50 +0,0 @@
-.alerts-section {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	padding: 12px;
-	min-height: 44px;
-	border-top: 1px solid var(--bg-slate-500);
-	cursor: pointer;
-
-	.alerts-section__left {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-
-		.alerts-section__bell-icon {
-			color: var(--bg-vanilla-400);
-		}
-
-		.alerts-section__text {
-			color: var(--bg-vanilla-400);
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 20px; /* 142.857% */
-			letter-spacing: 0.14px;
-		}
-	}
-	.alerts-section__plus-icon {
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.alerts-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-
-		.alerts-section__left {
-			.alerts-section__bell-icon {
-				color: var(--bg-ink-300);
-			}
-
-			.alerts-section__text {
-				color: var(--bg-ink-300);
-			}
-		}
-		.alerts-section__plus-icon {
-			color: var(--bg-ink-300);
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/AlertsSection/AlertsSection.tsx

@@ -1,23 +0,0 @@
-import { Typography } from 'antd';
-import { ConciergeBell, Plus, SquareArrowOutUpRight } from 'lucide-react';
-
-import './AlertsSection.styles.scss';
-
-interface AlertsSectionProps {
-	onCreateAlertsHandler: () => void;
-}
-
-export function AlertsSection({
-	onCreateAlertsHandler,
-}: AlertsSectionProps): JSX.Element {
-	return (
-		<section className="alerts-section" onClick={onCreateAlertsHandler}>
-			<div className="alerts-section__left">
-				<ConciergeBell size={14} className="alerts-section__bell-icon" />
-				<Typography.Text className="alerts-section__text">Alerts</Typography.Text>
-				<SquareArrowOutUpRight size={10} className="info-icon" />
-			</div>
-			<Plus size={14} className="alerts-section__plus-icon" />
-		</section>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/AxesSection/AxesSection.tsx

@@ -1,99 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Select, Typography } from 'antd';
-import { Axis3D, LineChart, Spline } from 'lucide-react';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-
-enum LogScale {
-	LINEAR = 'linear',
-	LOGARITHMIC = 'logarithmic',
-}
-
-const { Option } = Select;
-
-interface AxesSectionProps {
-	allowSoftMinMax: boolean;
-	allowLogScale: boolean;
-	softMin: number | null;
-	softMax: number | null;
-	setSoftMin: Dispatch<SetStateAction<number | null>>;
-	setSoftMax: Dispatch<SetStateAction<number | null>>;
-	isLogScale: boolean;
-	setIsLogScale: Dispatch<SetStateAction<boolean>>;
-}
-
-export function AxesSection({
-	allowSoftMinMax,
-	allowLogScale,
-	softMin,
-	softMax,
-	setSoftMin,
-	setSoftMax,
-	isLogScale,
-	setIsLogScale,
-}: AxesSectionProps): JSX.Element {
-	const softMinHandler = (value: number | null): void => {
-		setSoftMin(value);
-	};
-
-	const softMaxHandler = (value: number | null): void => {
-		setSoftMax(value);
-	};
-
-	return (
-		<SettingsSection title="Axes" icon={<Axis3D size={14} />}>
-			{allowSoftMinMax && (
-				<section className="soft-min-max">
-					<section className="container">
-						<Typography.Text className="text">Soft Min</Typography.Text>
-						<InputNumber
-							type="number"
-							value={softMin}
-							onChange={softMinHandler}
-							rootClassName="input"
-						/>
-					</section>
-					<section className="container">
-						<Typography.Text className="text">Soft Max</Typography.Text>
-						<InputNumber
-							value={softMax}
-							type="number"
-							rootClassName="input"
-							onChange={softMaxHandler}
-						/>
-					</section>
-				</section>
-			)}
-
-			{allowLogScale && (
-				<section className="log-scale control-container">
-					<Typography.Text className="section-heading">Y Axis Scale</Typography.Text>
-					<Select
-						onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
-						value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
-						style={{ width: '100%' }}
-						className="panel-type-select"
-						defaultValue={LogScale.LINEAR}
-					>
-						<Option value={LogScale.LINEAR}>
-							<div className="select-option">
-								<div className="icon">
-									<LineChart size={16} />
-								</div>
-								<Typography.Text className="display">Linear</Typography.Text>
-							</div>
-						</Option>
-						<Option value={LogScale.LOGARITHMIC}>
-							<div className="select-option">
-								<div className="icon">
-									<Spline size={16} />
-								</div>
-								<Typography.Text className="display">Logarithmic</Typography.Text>
-							</div>
-						</Option>
-					</Select>
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/ChartAppearanceSection/ChartAppearanceSection.tsx

@@ -1,71 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Switch, Typography } from 'antd';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
-import { Paintbrush } from 'lucide-react';
-
-import { FillModeSelector } from '../../components/FillModeSelector/FillModeSelector';
-import { LineInterpolationSelector } from '../../components/LineInterpolationSelector/LineInterpolationSelector';
-import { LineStyleSelector } from '../../components/LineStyleSelector/LineStyleSelector';
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-
-interface ChartAppearanceSectionProps {
-	fillMode: FillMode;
-	setFillMode: Dispatch<SetStateAction<FillMode>>;
-	lineStyle: LineStyle;
-	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
-	lineInterpolation: LineInterpolation;
-	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
-	showPoints: boolean;
-	setShowPoints: Dispatch<SetStateAction<boolean>>;
-	allowFillMode: boolean;
-	allowLineStyle: boolean;
-	allowLineInterpolation: boolean;
-	allowShowPoints: boolean;
-}
-
-export function ChartAppearanceSection({
-	fillMode,
-	setFillMode,
-	lineStyle,
-	setLineStyle,
-	lineInterpolation,
-	setLineInterpolation,
-	showPoints,
-	setShowPoints,
-	allowFillMode,
-	allowLineStyle,
-	allowLineInterpolation,
-	allowShowPoints,
-}: ChartAppearanceSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Chart Appearance" icon={<Paintbrush size={14} />}>
-			{allowFillMode && (
-				<FillModeSelector value={fillMode} onChange={setFillMode} />
-			)}
-			{allowLineStyle && (
-				<LineStyleSelector value={lineStyle} onChange={setLineStyle} />
-			)}
-			{allowLineInterpolation && (
-				<LineInterpolationSelector
-					value={lineInterpolation}
-					onChange={setLineInterpolation}
-				/>
-			)}
-			{allowShowPoints && (
-				<section className="show-points toggle-card">
-					<div className="toggle-card-text-container">
-						<Typography.Text className="section-heading">Show points</Typography.Text>
-						<Typography.Text className="toggle-card-description">
-							Display individual data points on the chart
-						</Typography.Text>
-					</div>
-					<Switch size="small" checked={showPoints} onChange={setShowPoints} />
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/ContextLinksSection/ContextLinksSection.styles.scss

@@ -1,10 +0,0 @@
-.context-links-section {
-	padding: 12px 12px 16px 12px;
-	border-bottom: 1px solid var(--bg-slate-500);
-}
-
-.lightMode {
-	.context-links-section {
-		border-bottom: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/ContextLinksSection/ContextLinksSection.tsx

@@ -1,36 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { Link as LinkIcon } from 'lucide-react';
-import { ContextLinksData, Widgets } from 'types/api/dashboard/getAll';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-import ContextLinks from '../../ContextLinks';
-
-import './ContextLinksSection.styles.scss';
-
-interface ContextLinksSectionProps {
-	contextLinks: ContextLinksData;
-	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
-	selectedWidget?: Widgets;
-}
-
-export function ContextLinksSection({
-	contextLinks,
-	setContextLinks,
-	selectedWidget,
-}: ContextLinksSectionProps): JSX.Element {
-	return (
-		<SettingsSection
-			title="Context Links"
-			icon={<LinkIcon size={14} />}
-			defaultOpen={!!contextLinks.linksData.length}
-		>
-			<div className="context-links-section">
-				<ContextLinks
-					contextLinks={contextLinks}
-					setContextLinks={setContextLinks}
-					selectedWidget={selectedWidget}
-				/>
-			</div>
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/FormattingUnitsSection/FormattingUnitsSection.tsx

@@ -1,92 +0,0 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
-import { Select, Typography } from 'antd';
-import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
-import { PanelDisplay } from 'constants/queryBuilder';
-import { SlidersHorizontal } from 'lucide-react';
-import { ColumnUnit } from 'types/api/dashboard/getAll';
-
-import { ColumnUnitSelector } from '../../ColumnUnitSelector/ColumnUnitSelector';
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-import DashboardYAxisUnitSelectorWrapper from '../../DashboardYAxisUnitSelectorWrapper';
-
-interface FormattingUnitsSectionProps {
-	selectedGraphType: PanelDisplay | '';
-	yAxisUnit: string;
-	setYAxisUnit: Dispatch<SetStateAction<string>>;
-	isNewDashboard: boolean;
-	decimalPrecision: PrecisionOption;
-	setDecimalPrecision: Dispatch<SetStateAction<PrecisionOption>>;
-	columnUnits: ColumnUnit;
-	setColumnUnits: Dispatch<SetStateAction<ColumnUnit>>;
-	allowYAxisUnit: boolean;
-	allowDecimalPrecision: boolean;
-	allowPanelColumnPreference: boolean;
-}
-
-export function FormattingUnitsSection({
-	selectedGraphType,
-	yAxisUnit,
-	setYAxisUnit,
-	isNewDashboard,
-	decimalPrecision,
-	setDecimalPrecision,
-	columnUnits,
-	setColumnUnits,
-	allowYAxisUnit,
-	allowDecimalPrecision,
-	allowPanelColumnPreference,
-}: FormattingUnitsSectionProps): JSX.Element {
-	const decimapPrecisionOptions = useMemo(
-		() => [
-			{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
-			{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
-			{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
-			{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
-		],
-		[],
-	);
-	return (
-		<SettingsSection
-			title="Formatting & Units"
-			icon={<SlidersHorizontal size={14} />}
-		>
-			{allowYAxisUnit && (
-				<DashboardYAxisUnitSelectorWrapper
-					onSelect={setYAxisUnit}
-					value={yAxisUnit || ''}
-					fieldLabel={
-						selectedGraphType === PanelDisplay.VALUE ||
-						selectedGraphType === PanelDisplay.PIE
-							? 'Unit'
-							: 'Y Axis Unit'
-					}
-					shouldUpdateYAxisUnit={isNewDashboard}
-				/>
-			)}
-
-			{allowDecimalPrecision && (
-				<section className="decimal-precision-selector control-container">
-					<Typography.Text className="section-heading">
-						Decimal Precision
-					</Typography.Text>
-					<Select
-						options={decimapPrecisionOptions}
-						value={decimalPrecision}
-						style={{ width: '100%' }}
-						className="panel-type-select"
-						defaultValue={decimapPrecisionOptions[0]?.value}
-						onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
-					/>
-				</section>
-			)}
-
-			{allowPanelColumnPreference && (
-				<ColumnUnitSelector
-					columnUnits={columnUnits}
-					setColumnUnits={setColumnUnits}
-					isNewDashboard={isNewDashboard}
-				/>
-			)}
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.styles.scss

@@ -1,64 +0,0 @@
-.general-settings__name-description {
-	padding: 0 0 4px 0;
-
-	.general-settings__name-input {
-		display: flex;
-		padding: 6px 6px 6px 8px;
-		align-items: center;
-		gap: 4px;
-		flex: 1 0 0;
-		align-self: stretch;
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-		color: var(--bg-vanilla-100);
-		font-family: Inter;
-		font-size: 14px;
-		font-style: normal;
-		font-weight: 400;
-		line-height: 18px; /* 128.571% */
-		letter-spacing: -0.07px;
-	}
-
-	.general-settings__description-input {
-		border-style: unset;
-		.ant-input {
-			display: flex;
-			height: 80px;
-			padding: 6px 6px 6px 8px;
-			align-items: flex-start;
-			gap: 4px;
-			border-radius: 2px;
-			border: 1px solid var(--bg-slate-400);
-			background: var(--bg-ink-300);
-			color: var(--bg-vanilla-100);
-			font-family: Inter;
-			font-size: 14px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 128.571% */
-			letter-spacing: -0.07px;
-		}
-	}
-}
-
-.lightMode {
-	.general-settings__name-description {
-		border-top: 1px solid var(--bg-vanilla-300);
-		border-bottom: 1px solid var(--bg-vanilla-300);
-
-		.general-settings__name-input {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-			color: var(--bg-ink-300);
-		}
-
-		.general-settings__description-input {
-			.ant-input {
-				border: 1px solid var(--bg-vanilla-300);
-				background: var(--bg-vanilla-300);
-				color: var(--bg-ink-300);
-			}
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/GeneralSettingsSection/GeneralSettingsSection.tsx

@@ -1,148 +0,0 @@
-import {
-	Dispatch,
-	SetStateAction,
-	useCallback,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import type { InputRef } from 'antd';
-import { AutoComplete, Input, Typography } from 'antd';
-import { popupContainer } from 'utils/selectPopupContainer';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-
-import './GeneralSettingsSection.styles.scss';
-
-const { TextArea } = Input;
-
-interface VariableOption {
-	value: string;
-	label: string;
-}
-
-interface GeneralSettingsSectionProps {
-	title: string;
-	setTitle: Dispatch<SetStateAction<string>>;
-	description: string;
-	setDescription: Dispatch<SetStateAction<string>>;
-	dashboardVariables: Record<string, { name?: string }>;
-}
-
-export function GeneralSettingsSection({
-	title,
-	setTitle,
-	description,
-	setDescription,
-	dashboardVariables,
-}: GeneralSettingsSectionProps): JSX.Element {
-	const [inputValue, setInputValue] = useState(title);
-	const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
-	const [cursorPos, setCursorPos] = useState(0);
-	const inputRef = useRef<InputRef>(null);
-
-	const onChangeHandler = useCallback(
-		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
-			setFunc(value);
-		},
-		[],
-	);
-
-	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
-		return Object.entries(dashboardVariables).map(([, value]) => ({
-			value: value.name || '',
-			label: value.name || '',
-		}));
-	}, [dashboardVariables]);
-
-	const updateCursorAndDropdown = (value: string, pos: number): void => {
-		setCursorPos(pos);
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		setAutoCompleteOpen(lastDollar !== -1 && pos >= lastDollar + 1);
-	};
-
-	const onInputChange = (value: string): void => {
-		setInputValue(value);
-		onChangeHandler(setTitle, value);
-		setTimeout(() => {
-			const pos = inputRef.current?.input?.selectionStart ?? 0;
-			updateCursorAndDropdown(value, pos);
-		}, 0);
-	};
-
-	const onSelect = (selectedValue: string): void => {
-		const pos = cursorPos;
-		const value = inputValue;
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		const textBeforeDollar = value.substring(0, lastDollar);
-		const textAfterDollar = value.substring(lastDollar + 1);
-		const match = textAfterDollar.match(/^([a-zA-Z0-9_.]*)/);
-		const rest = textAfterDollar.substring(match ? match[1].length : 0);
-		const newValue = `${textBeforeDollar}$${selectedValue}${rest}`;
-		setInputValue(newValue);
-		onChangeHandler(setTitle, newValue);
-		setAutoCompleteOpen(false);
-		setTimeout(() => {
-			const newCursor = `${textBeforeDollar}$${selectedValue}`.length;
-			inputRef.current?.input?.setSelectionRange(newCursor, newCursor);
-			setCursorPos(newCursor);
-		}, 0);
-	};
-
-	const filterOption = (
-		currentInputValue: string,
-		option?: VariableOption,
-	): boolean => {
-		const pos = cursorPos;
-		const value = currentInputValue;
-		const lastDollar = value.lastIndexOf('$', pos - 1);
-		if (lastDollar === -1) {
-			return false;
-		}
-		const afterDollar = value.substring(lastDollar + 1, pos).toLowerCase();
-		return option?.value.toLowerCase().startsWith(afterDollar) || false;
-	};
-
-	const handleInputCursor = (): void => {
-		const pos = inputRef.current?.input?.selectionStart ?? 0;
-		updateCursorAndDropdown(inputValue, pos);
-	};
-
-	return (
-		<SettingsSection title="General" defaultOpen icon={null}>
-			<section className="general-settings__name-description control-container">
-				<Typography.Text className="section-heading">Name</Typography.Text>
-				<AutoComplete
-					options={dashboardVariableOptions}
-					value={inputValue}
-					onChange={onInputChange}
-					onSelect={onSelect}
-					filterOption={filterOption}
-					style={{ width: '100%' }}
-					getPopupContainer={popupContainer}
-					placeholder="Enter the panel name here..."
-					open={autoCompleteOpen}
-				>
-					<Input
-						rootClassName="general-settings__name-input"
-						ref={inputRef}
-						onSelect={handleInputCursor}
-						onClick={handleInputCursor}
-						onBlur={(): void => setAutoCompleteOpen(false)}
-					/>
-				</AutoComplete>
-				<Typography.Text className="section-heading">Description</Typography.Text>
-				<TextArea
-					placeholder="Enter the panel description here..."
-					bordered
-					allowClear
-					value={description}
-					onChange={(event): void =>
-						onChangeHandler(setDescription, event.target.value)
-					}
-					rootClassName="general-settings__description-input"
-				/>
-			</section>
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.styles.scss

@@ -1,55 +0,0 @@
-.histogram-settings__bucket-config {
-	.histogram-settings__bucket-size-label {
-		margin-top: 8px;
-	}
-
-	.histogram-settings__bucket-input {
-		display: flex;
-		width: 100%;
-		height: 32px;
-		padding: 6px 6px 6px 8px;
-		align-items: center;
-		gap: 4px;
-		align-self: stretch;
-		border-radius: 2px;
-		border: 1px solid var(--bg-slate-400);
-		background: var(--bg-ink-300);
-
-		.ant-input {
-			background: var(--bg-ink-300);
-		}
-	}
-
-	.histogram-settings__combine-hist {
-		display: flex;
-		justify-content: space-between;
-		margin-top: 8px;
-
-		.histogram-settings__merge-label {
-			color: var(--bg-vanilla-400);
-			font-size: 13px;
-			font-style: normal;
-			font-weight: 400;
-			line-height: 18px; /* 138.462% */
-			letter-spacing: 0.52px;
-			text-transform: uppercase;
-		}
-	}
-}
-
-.lightMode {
-	.histogram-settings__bucket-config {
-		.histogram-settings__merge-label {
-			color: var(--bg-ink-400);
-		}
-
-		.histogram-settings__bucket-input {
-			border: 1px solid var(--bg-vanilla-300);
-			background: var(--bg-vanilla-300);
-
-			.ant-input {
-				background: var(--bg-vanilla-300);
-			}
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/HistogramBucketsSection/HistogramBucketsSection.tsx

@@ -1,71 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { InputNumber, Switch, Typography } from 'antd';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-
-import './HistogramBucketsSection.styles.scss';
-
-interface HistogramBucketsSectionProps {
-	bucketCount: number;
-	setBucketCount: Dispatch<SetStateAction<number>>;
-	bucketWidth: number;
-	setBucketWidth: Dispatch<SetStateAction<number>>;
-	combineHistogram: boolean;
-	setCombineHistogram: Dispatch<SetStateAction<boolean>>;
-}
-
-export function HistogramBucketsSection({
-	bucketCount,
-	setBucketCount,
-	bucketWidth,
-	setBucketWidth,
-	combineHistogram,
-	setCombineHistogram,
-}: HistogramBucketsSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Histogram / Buckets">
-			<section className="histogram-settings__bucket-config control-container">
-				<Typography.Text className="section-heading">
-					Number of buckets
-				</Typography.Text>
-				<InputNumber
-					value={bucketCount || null}
-					type="number"
-					min={0}
-					rootClassName="bucket-input"
-					placeholder="Default: 30"
-					onChange={(val): void => {
-						setBucketCount(val || 0);
-					}}
-				/>
-				<Typography.Text className="section-heading histogram-settings__bucket-size-label">
-					Bucket width
-				</Typography.Text>
-				<InputNumber
-					value={bucketWidth || null}
-					type="number"
-					precision={2}
-					placeholder="Default: Auto"
-					step={0.1}
-					min={0.0}
-					rootClassName="histogram-settings__bucket-input"
-					onChange={(val): void => {
-						setBucketWidth(val || 0);
-					}}
-				/>
-				<section className="histogram-settings__combine-hist">
-					<Typography.Text className="section-heading">
-						<span className="histogram-settings__merge-label">
-							Merge all series into one
-						</span>
-					</Typography.Text>
-					<Switch
-						checked={combineHistogram}
-						size="small"
-						onChange={(checked): void => setCombineHistogram(checked)}
-					/>
-				</section>
-			</section>
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/LegendSection/LegendSection.tsx

@@ -1,73 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import type { UseQueryResult } from 'react-query';
-import { Select, Typography } from 'antd';
-import { Layers } from 'lucide-react';
-import { SuccessResponse } from 'types/api';
-import { LegendPosition } from 'types/api/dashboard/getAll';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-import LegendColors from '../../LegendColors/LegendColors';
-
-const { Option } = Select;
-
-interface LegendSectionProps {
-	allowLegendPosition: boolean;
-	allowLegendColors: boolean;
-	legendPosition: LegendPosition;
-	setLegendPosition: Dispatch<SetStateAction<LegendPosition>>;
-	customLegendColors: Record<string, string>;
-	setCustomLegendColors: Dispatch<SetStateAction<Record<string, string>>>;
-	queryResponse?: UseQueryResult<
-		SuccessResponse<MetricRangePayloadProps, unknown>,
-		Error
-	>;
-}
-
-export function LegendSection({
-	allowLegendPosition,
-	allowLegendColors,
-	legendPosition,
-	setLegendPosition,
-	customLegendColors,
-	setCustomLegendColors,
-	queryResponse,
-}: LegendSectionProps): JSX.Element {
-	return (
-		<SettingsSection title="Legend" icon={<Layers size={14} />}>
-			{allowLegendPosition && (
-				<section className="legend-position control-container">
-					<Typography.Text className="section-heading">Position</Typography.Text>
-					<Select
-						onChange={(value: LegendPosition): void => setLegendPosition(value)}
-						value={legendPosition}
-						style={{ width: '100%' }}
-						className="panel-type-select"
-						defaultValue={LegendPosition.BOTTOM}
-					>
-						<Option value={LegendPosition.BOTTOM}>
-							<div className="select-option">
-								<Typography.Text className="display">Bottom</Typography.Text>
-							</div>
-						</Option>
-						<Option value={LegendPosition.RIGHT}>
-							<div className="select-option">
-								<Typography.Text className="display">Right</Typography.Text>
-							</div>
-						</Option>
-					</Select>
-				</section>
-			)}
-
-			{allowLegendColors && (
-				<section className="legend-colors">
-					<LegendColors
-						customLegendColors={customLegendColors}
-						setCustomLegendColors={setCustomLegendColors}
-						queryResponse={queryResponse}
-					/>
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/ThresholdsSection/ThresholdsSection.styles.scss

@@ -1,10 +0,0 @@
-.thresholds-section {
-	padding: 12px 12px 16px 12px;
-	border-top: 1px solid var(--bg-slate-500);
-}
-
-.lightMode {
-	.thresholds-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/ThresholdsSection/ThresholdsSection.tsx

@@ -1,42 +0,0 @@
-import { Dispatch, SetStateAction } from 'react';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { Antenna } from 'lucide-react';
-import { ColumnUnit } from 'types/api/dashboard/getAll';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-import ThresholdSelector from '../../Threshold/ThresholdSelector';
-import { ThresholdProps } from '../../Threshold/types';
-
-import './ThresholdsSection.styles.scss';
-
-interface ThresholdsSectionProps {
-	thresholds: ThresholdProps[];
-	setThresholds: Dispatch<SetStateAction<ThresholdProps[]>>;
-	yAxisUnit: string;
-	selectedGraph: PANEL_TYPES;
-	columnUnits: ColumnUnit;
-}
-
-export function ThresholdsSection({
-	thresholds,
-	setThresholds,
-	yAxisUnit,
-	selectedGraph,
-	columnUnits,
-}: ThresholdsSectionProps): JSX.Element {
-	return (
-		<SettingsSection
-			title="Thresholds"
-			icon={<Antenna size={14} />}
-			defaultOpen={!!thresholds.length}
-		>
-			<ThresholdSelector
-				thresholds={thresholds}
-				setThresholds={setThresholds}
-				yAxisUnit={yAxisUnit}
-				selectedGraph={selectedGraph}
-				columnUnits={columnUnits}
-			/>
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/SettingSections/VisualizationSettingsSection/VisualizationSettingsSection.tsx

@@ -1,129 +0,0 @@
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Select, Switch, Typography } from 'antd';
-import TimePreference from 'components/TimePreferenceDropDown';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import GraphTypes, {
-	ItemsProps,
-} from 'container/DashboardContainer/ComponentsSlider/menuItems';
-import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
-import { LayoutDashboard } from 'lucide-react';
-import { DataSource } from 'types/common/queryBuilder';
-
-import SettingsSection from '../../components/SettingsSection/SettingsSection';
-import { timePreferance } from '../../timeItems';
-
-const { Option } = Select;
-
-interface VisualizationSettingsSectionProps {
-	selectedGraph: PANEL_TYPES;
-	setGraphHandler: (type: PANEL_TYPES) => void;
-	selectedTime: timePreferance;
-	setSelectedTime: Dispatch<SetStateAction<timePreferance>>;
-	stackedBarChart: boolean;
-	setStackedBarChart: Dispatch<SetStateAction<boolean>>;
-	isFillSpans: boolean;
-	setIsFillSpans: Dispatch<SetStateAction<boolean>>;
-	allowPanelTimePreference: boolean;
-	allowStackingBarChart: boolean;
-	allowFillSpans: boolean;
-}
-
-export function VisualizationSettingsSection({
-	selectedGraph,
-	setGraphHandler,
-	selectedTime,
-	setSelectedTime,
-	stackedBarChart,
-	setStackedBarChart,
-	isFillSpans,
-	setIsFillSpans,
-	allowPanelTimePreference,
-	allowStackingBarChart,
-	allowFillSpans,
-}: VisualizationSettingsSectionProps): JSX.Element {
-	const { currentQuery } = useQueryBuilder();
-	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
-
-	useEffect(() => {
-		const queryContainsMetricsDataSource = currentQuery.builder.queryData.some(
-			(query) => query.dataSource === DataSource.METRICS,
-		);
-
-		if (queryContainsMetricsDataSource) {
-			setGraphTypes((prev) =>
-				prev.filter((graph) => graph.name !== PANEL_TYPES.LIST),
-			);
-		} else {
-			setGraphTypes(GraphTypes);
-		}
-	}, [currentQuery]);
-
-	return (
-		<SettingsSection
-			title="Visualization"
-			defaultOpen
-			icon={<LayoutDashboard size={14} />}
-		>
-			<section className="panel-type control-container">
-				<Typography.Text className="section-heading">Panel Type</Typography.Text>
-				<Select
-					onChange={setGraphHandler}
-					value={selectedGraph}
-					className="panel-type-select"
-					data-testid="panel-change-select"
-					data-stacking-state={stackedBarChart ? 'true' : 'false'}
-				>
-					{graphTypes.map((item) => (
-						<Option key={item.name} value={item.name}>
-							<div className="select-option">
-								<div className="icon">{item.icon}</div>
-								<Typography.Text className="display">{item.display}</Typography.Text>
-							</div>
-						</Option>
-					))}
-				</Select>
-			</section>
-
-			{allowPanelTimePreference && (
-				<section className="panel-time-preference control-container">
-					<Typography.Text className="section-heading">
-						Panel Time Preference
-					</Typography.Text>
-					<TimePreference
-						{...{
-							selectedTime,
-							setSelectedTime,
-						}}
-					/>
-				</section>
-			)}
-
-			{allowStackingBarChart && (
-				<section className="stack-chart control-container">
-					<Typography.Text className="section-heading">Stack series</Typography.Text>
-					<Switch
-						checked={stackedBarChart}
-						size="small"
-						onChange={(checked): void => setStackedBarChart(checked)}
-					/>
-				</section>
-			)}
-
-			{allowFillSpans && (
-				<section className="fill-gaps toggle-card">
-					<div className="toggle-card-text-container">
-						<Typography className="section-heading">Fill gaps</Typography>
-						<Typography.Text className="toggle-card-description">
-							Fill gaps in data with 0 for continuity
-						</Typography.Text>
-					</div>
-					<Switch
-						checked={isFillSpans}
-						size="small"
-						onChange={(checked): void => setIsFillSpans(checked)}
-					/>
-				</section>
-			)}
-		</SettingsSection>
-	);
-}

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.styles.scss

@@ -1,4 +1,5 @@
 .threshold-selector-container {
+	padding: 12px;
 	padding-bottom: 80px;
 
 	.threshold-select {

frontend/src/container/NewWidget/RightContainer/Threshold/ThresholdSelector.tsx

@@ -1,10 +1,10 @@
 import { useCallback } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Button } from 'antd';
+import { Typography } from 'antd';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useGetQueryLabels } from 'hooks/useGetQueryLabels';
-import { Plus } from 'lucide-react';
+import { Antenna, Plus } from 'lucide-react';
 import { v4 as uuid } from 'uuid';
 
 import Threshold from './Threshold';
@@ -68,14 +68,11 @@ function ThresholdSelector({
 		<DndProvider backend={HTML5Backend}>
 			<div className="threshold-selector-container">
 				<div className="threshold-select" onClick={addThresholdHandler}>
-					<Button
-						type="default"
-						icon={<Plus size={14} />}
-						style={{ width: '100%' }}
-						onClick={addThresholdHandler}
-					>
-						Add Threshold
-					</Button>
+					<div className="left-section">
+						<Antenna size={14} className="icon" />
+						<Typography.Text className="text">Thresholds</Typography.Text>
+					</div>
+					<Plus size={14} onClick={addThresholdHandler} className="icon" />
 				</div>
 				{thresholds.map((threshold, idx) => (
 					<Threshold

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

@@ -6,13 +6,9 @@ import { MemoryRouter } from 'react-router-dom';
 import { render as rtlRender, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PANEL_TYPES } from 'constants/queryBuilder';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
 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';
@@ -100,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>
@@ -170,14 +168,6 @@ describe('RightContainer - Alerts Section', () => {
 		setContextLinks: jest.fn(),
 		enableDrillDown: false,
 		isNewDashboard: false,
-		lineInterpolation: LineInterpolation.Spline,
-		fillMode: FillMode.None,
-		lineStyle: LineStyle.Solid,
-		setLineInterpolation: jest.fn(),
-		setFillMode: jest.fn(),
-		setLineStyle: jest.fn(),
-		showPoints: false,
-		setShowPoints: jest.fn(),
 	};
 
 	beforeEach(() => {

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.styles.scss

@@ -1,21 +0,0 @@
-.fill-mode-selector {
-	.fill-mode-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.fill-mode-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.fill-mode-selector {
-		.fill-mode-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/FillModeSelector/FillModeSelector.tsx

@@ -1,94 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { FillMode } from 'lib/uPlotV2/config/types';
-
-import './FillModeSelector.styles.scss';
-
-interface FillModeSelectorProps {
-	value: FillMode;
-	onChange: (value: FillMode) => void;
-}
-
-export function FillModeSelector({
-	value,
-	onChange,
-}: FillModeSelectorProps): JSX.Element {
-	return (
-		<section className="fill-mode-selector control-container">
-			<Typography.Text className="section-heading">Fill mode</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as FillMode);
-					}
-				}}
-			>
-				<ToggleGroupItem value={FillMode.None} aria-label="None" title="None">
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<rect x="8" y="16" width="32" height="16" stroke="#888" fill="none" />
-					</svg>
-					<Typography.Text className="section-heading-small">None</Typography.Text>
-				</ToggleGroupItem>
-				<ToggleGroupItem value={FillMode.Solid} aria-label="Solid" title="Solid">
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<rect x="8" y="16" width="32" height="16" fill="#888" />
-					</svg>
-					<Typography.Text className="section-heading-small">Solid</Typography.Text>
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={FillMode.Gradient}
-					aria-label="Gradient"
-					title="Gradient"
-				>
-					<svg
-						className="fill-mode-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<defs>
-							<linearGradient id="fill-gradient" x1="0" y1="0" x2="1" y2="0">
-								<stop offset="0%" stopColor="#888" stopOpacity="0.2" />
-								<stop offset="100%" stopColor="#888" stopOpacity="0.8" />
-							</linearGradient>
-						</defs>
-						<rect
-							x="8"
-							y="16"
-							width="32"
-							height="16"
-							fill="url(#fill-gradient)"
-							stroke="#888"
-						/>
-					</svg>
-					<Typography.Text className="section-heading-small">
-						Gradient
-					</Typography.Text>
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.styles.scss

@@ -1,21 +0,0 @@
-.line-interpolation-selector {
-	.line-interpolation-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.line-interpolation-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.line-interpolation-selector {
-		.line-interpolation-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/LineInterpolationSelector/LineInterpolationSelector.tsx

@@ -1,110 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { LineInterpolation } from 'lib/uPlotV2/config/types';
-
-import './LineInterpolationSelector.styles.scss';
-
-interface LineInterpolationSelectorProps {
-	value: LineInterpolation;
-	onChange: (value: LineInterpolation) => void;
-}
-
-export function LineInterpolationSelector({
-	value,
-	onChange,
-}: LineInterpolationSelectorProps): JSX.Element {
-	return (
-		<section className="line-interpolation-selector control-container">
-			<Typography.Text className="section-heading">
-				Line interpolation
-			</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as LineInterpolation);
-					}
-				}}
-			>
-				<ToggleGroupItem
-					value={LineInterpolation.Linear}
-					aria-label="Linear"
-					title="Linear"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 L24 16 L40 32" stroke="#888" />
-					</svg>
-				</ToggleGroupItem>
-				<ToggleGroupItem value={LineInterpolation.Spline} aria-label="Spline">
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 C16 8, 32 8, 40 32" />
-					</svg>
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={LineInterpolation.StepAfter}
-					aria-label="Step After"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 V16 H24 V32 H40" />
-					</svg>
-				</ToggleGroupItem>
-
-				<ToggleGroupItem
-					value={LineInterpolation.StepBefore}
-					aria-label="Step Before"
-				>
-					<svg
-						className="line-interpolation-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<circle cx="8" cy="32" r="3" fill="#888" />
-						<circle cx="24" cy="16" r="3" fill="#888" />
-						<circle cx="40" cy="32" r="3" fill="#888" />
-						<path d="M8 32 H24 V16 H40 V32" />
-					</svg>
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.styles.scss

@@ -1,21 +0,0 @@
-.line-style-selector {
-	.line-style-icon {
-		width: 24px;
-		height: 24px;
-	}
-
-	.line-style-label {
-		text-transform: uppercase;
-		font-size: 12px;
-		font-weight: 500;
-		color: var(--bg-vanilla-400);
-	}
-}
-
-.lightMode {
-	.line-style-selector {
-		.line-style-label {
-			color: var(--bg-ink-400);
-		}
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/LineStyleSelector/LineStyleSelector.tsx

@@ -1,66 +0,0 @@
-import { ToggleGroup, ToggleGroupItem } from '@signozhq/toggle-group';
-import { Typography } from 'antd';
-import { LineStyle } from 'lib/uPlotV2/config/types';
-
-import './LineStyleSelector.styles.scss';
-
-interface LineStyleSelectorProps {
-	value: LineStyle;
-	onChange: (value: LineStyle) => void;
-}
-
-export function LineStyleSelector({
-	value,
-	onChange,
-}: LineStyleSelectorProps): JSX.Element {
-	return (
-		<section className="line-style-selector control-container">
-			<Typography.Text className="section-heading">Line style</Typography.Text>
-			<ToggleGroup
-				type="single"
-				value={value}
-				variant="outline"
-				size="lg"
-				onValueChange={(newValue): void => {
-					if (newValue) {
-						onChange(newValue as LineStyle);
-					}
-				}}
-			>
-				<ToggleGroupItem value={LineStyle.Solid} aria-label="Solid" title="Solid">
-					<svg
-						className="line-style-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-					>
-						<path d="M8 24 L40 24" />
-					</svg>
-					<Typography.Text className="section-heading-small">Solid</Typography.Text>
-				</ToggleGroupItem>
-				<ToggleGroupItem
-					value={LineStyle.Dashed}
-					aria-label="Dashed"
-					title="Dashed"
-				>
-					<svg
-						className="line-style-icon"
-						viewBox="0 0 48 48"
-						fill="none"
-						stroke="#888"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeDasharray="6 4"
-					>
-						<path d="M8 24 L40 24" />
-					</svg>
-					<Typography.Text className="section-heading-small">Dashed</Typography.Text>
-				</ToggleGroupItem>
-			</ToggleGroup>
-		</section>
-	);
-}

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.styles.scss

@@ -1,68 +0,0 @@
-.settings-section {
-	border-top: 1px solid var(--bg-slate-500);
-}
-
-.settings-section-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	padding: 12px 12px;
-	min-height: 44px;
-	background: transparent;
-	border: none;
-	outline: none;
-	cursor: pointer;
-
-	.settings-section-title {
-		display: flex;
-		align-items: center;
-		gap: 8px;
-		color: var(--bg-vanilla-400);
-		font-family: 'Space Mono';
-		font-size: 13px;
-		font-weight: 400;
-		text-transform: uppercase;
-	}
-
-	.chevron-icon {
-		color: var(--bg-vanilla-400);
-		transition: transform 0.2s ease-in-out;
-
-		&.open {
-			transform: rotate(180deg);
-		}
-	}
-}
-
-.settings-section-content {
-	padding: 0 12px 0 12px;
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
-	max-height: 0;
-	overflow: hidden;
-	opacity: 0;
-	transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
-
-	&.open {
-		padding-bottom: 24px;
-		max-height: 1000px;
-		opacity: 1;
-	}
-}
-
-.lightMode {
-	.settings-section-header {
-		.chevron-icon {
-			color: var(--bg-ink-400);
-		}
-		.settings-section-title {
-			color: var(--bg-ink-400);
-		}
-	}
-
-	.settings-section {
-		border-top: 1px solid var(--bg-vanilla-300);
-	}
-}

frontend/src/container/NewWidget/RightContainer/components/SettingsSection/SettingsSection.tsx

@@ -1,51 +0,0 @@
-import { ReactNode, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-
-import './SettingsSection.styles.scss';
-
-export interface SettingsSectionProps {
-	title: string;
-	defaultOpen?: boolean;
-	children: ReactNode;
-	icon?: ReactNode;
-}
-
-function SettingsSection({
-	title,
-	defaultOpen = false,
-	children,
-	icon,
-}: SettingsSectionProps): JSX.Element {
-	const [isOpen, setIsOpen] = useState(defaultOpen);
-
-	const toggleOpen = (): void => {
-		setIsOpen((prev) => !prev);
-	};
-
-	return (
-		<section className="settings-section">
-			<button
-				type="button"
-				className="settings-section-header"
-				onClick={toggleOpen}
-			>
-				<span className="settings-section-title">
-					{icon ? icon : null} {title}
-				</span>
-				<ChevronDown
-					size={16}
-					className={isOpen ? 'chevron-icon open' : 'chevron-icon'}
-				/>
-			</button>
-			<div
-				className={
-					isOpen ? 'settings-section-content open' : 'settings-section-content'
-				}
-			>
-				{children}
-			</div>
-		</section>
-	);
-}
-
-export default SettingsSection;

frontend/src/container/NewWidget/RightContainer/constants.ts

@@ -206,59 +206,3 @@ export const panelTypeVsDecimalPrecision: {
 	[PANEL_TYPES.TRACE]: false,
 	[PANEL_TYPES.EMPTY_WIDGET]: false,
 } as const;
-
-export const panelTypeVsLineInterpolation: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsLineStyle: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsFillMode: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;
-
-export const panelTypeVsShowPoints: {
-	[key in PANEL_TYPES]: boolean;
-} = {
-	[PANEL_TYPES.TIME_SERIES]: true,
-	[PANEL_TYPES.VALUE]: false,
-	[PANEL_TYPES.TABLE]: false,
-	[PANEL_TYPES.LIST]: false,
-	[PANEL_TYPES.PIE]: false,
-	[PANEL_TYPES.BAR]: false,
-	[PANEL_TYPES.HISTOGRAM]: false,
-	[PANEL_TYPES.TRACE]: false,
-	[PANEL_TYPES.EMPTY_WIDGET]: false,
-} as const;

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

@@ -1,16 +1,39 @@
-import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
 import { UseQueryResult } from 'react-query';
-import { Typography } from 'antd';
-import { PrecisionOption } from 'components/Graph/types';
+import type { InputRef } from 'antd';
+import {
+	AutoComplete,
+	Input,
+	InputNumber,
+	Select,
+	Space,
+	Switch,
+	Typography,
+} from 'antd';
+import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
+import TimePreference from 'components/TimePreferenceDropDown';
 import { PANEL_TYPES, PanelDisplay } from 'constants/queryBuilder';
-import GraphTypes from 'container/DashboardContainer/ComponentsSlider/menuItems';
+import GraphTypes, {
+	ItemsProps,
+} from 'container/DashboardContainer/ComponentsSlider/menuItems';
 import { useDashboardVariables } from 'hooks/dashboard/useDashboardVariables';
 import useCreateAlerts from 'hooks/queryBuilder/useCreateAlerts';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
+	ConciergeBell,
+	LineChart,
+	Plus,
+	Spline,
+	SquareArrowOutUpRight,
+} from 'lucide-react';
 import { SuccessResponse } from 'types/api';
 import {
 	ColumnUnit,
@@ -19,55 +42,55 @@ import {
 	Widgets,
 } from 'types/api/dashboard/getAll';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+import { DataSource } from 'types/common/queryBuilder';
+import { popupContainer } from 'utils/selectPopupContainer';
 
+import { ColumnUnitSelector } from './ColumnUnitSelector/ColumnUnitSelector';
 import {
 	panelTypeVsBucketConfig,
 	panelTypeVsColumnUnitPreferences,
 	panelTypeVsContextLinks,
 	panelTypeVsCreateAlert,
 	panelTypeVsDecimalPrecision,
-	panelTypeVsFillMode,
 	panelTypeVsFillSpan,
 	panelTypeVsLegendColors,
 	panelTypeVsLegendPosition,
-	panelTypeVsLineInterpolation,
-	panelTypeVsLineStyle,
 	panelTypeVsLogScale,
 	panelTypeVsPanelTimePreferences,
-	panelTypeVsShowPoints,
 	panelTypeVsSoftMinMax,
 	panelTypeVsStackingChartPreferences,
 	panelTypeVsThreshold,
 	panelTypeVsYAxisUnit,
 } from './constants';
-import { AlertsSection } from './SettingSections/AlertsSection/AlertsSection';
-import { AxesSection } from './SettingSections/AxesSection/AxesSection';
-import { ChartAppearanceSection } from './SettingSections/ChartAppearanceSection/ChartAppearanceSection';
-import { ContextLinksSection } from './SettingSections/ContextLinksSection/ContextLinksSection';
-import { FormattingUnitsSection } from './SettingSections/FormattingUnitsSection/FormattingUnitsSection';
-import { GeneralSettingsSection } from './SettingSections/GeneralSettingsSection/GeneralSettingsSection';
-import { HistogramBucketsSection } from './SettingSections/HistogramBucketsSection/HistogramBucketsSection';
-import { LegendSection } from './SettingSections/LegendSection/LegendSection';
-import { ThresholdsSection } from './SettingSections/ThresholdsSection/ThresholdsSection';
-import { VisualizationSettingsSection } from './SettingSections/VisualizationSettingsSection/VisualizationSettingsSection';
+import ContextLinks from './ContextLinks';
+import DashboardYAxisUnitSelectorWrapper from './DashboardYAxisUnitSelectorWrapper';
+import LegendColors from './LegendColors/LegendColors';
+import ThresholdSelector from './Threshold/ThresholdSelector';
 import { ThresholdProps } from './Threshold/types';
 import { timePreferance } from './timeItems';
 
 import './RightContainer.styles.scss';
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+enum LogScale {
+	LINEAR = 'linear',
+	LOGARITHMIC = 'logarithmic',
+}
+
+interface VariableOption {
+	value: string;
+	label: string;
+}
+
+// eslint-disable-next-line sonarjs/cognitive-complexity
 function RightContainer({
 	description,
 	setDescription,
 	setTitle,
 	title,
 	selectedGraph,
-	lineInterpolation,
-	setLineInterpolation,
-	fillMode,
-	setFillMode,
-	lineStyle,
-	setLineStyle,
-	showPoints,
-	setShowPoints,
 	bucketCount,
 	bucketWidth,
 	stackedBarChart,
@@ -107,9 +130,20 @@ function RightContainer({
 	isNewDashboard,
 }: RightContainerProps): JSX.Element {
 	const { dashboardVariables } = useDashboardVariables();
+	const [inputValue, setInputValue] = useState(title);
+	const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
+	const [cursorPos, setCursorPos] = useState(0);
+	const inputRef = useRef<InputRef>(null);
 
-	const selectedGraphType = GraphTypes.find((e) => e.name === selectedGraph)
-		?.display as PanelDisplay;
+	const onChangeHandler = useCallback(
+		(setFunc: Dispatch<SetStateAction<string>>, value: string) => {
+			setFunc(value);
+		},
+		[],
+	);
+
+	const selectedGraphType =
+		GraphTypes.find((e) => e.name === selectedGraph)?.display || '';
 
 	const onCreateAlertsHandler = useCreateAlerts(selectedWidget, 'panelView');
 
@@ -133,162 +167,399 @@ function RightContainer({
 		panelTypeVsContextLinks[selectedGraph] && enableDrillDown;
 	const allowDecimalPrecision = panelTypeVsDecimalPrecision[selectedGraph];
 
-	const allowLineInterpolation = panelTypeVsLineInterpolation[selectedGraph];
-	const allowLineStyle = panelTypeVsLineStyle[selectedGraph];
-	const allowFillMode = panelTypeVsFillMode[selectedGraph];
-	const allowShowPoints = panelTypeVsShowPoints[selectedGraph];
+	const { currentQuery } = useQueryBuilder();
 
-	const isAxisSectionVisible = useMemo(() => allowSoftMinMax || allowLogScale, [
-		allowSoftMinMax,
-		allowLogScale,
-	]);
+	const [graphTypes, setGraphTypes] = useState<ItemsProps[]>(GraphTypes);
 
-	const isFormattingSectionVisible = useMemo(
-		() => allowYAxisUnit || allowDecimalPrecision || allowPanelColumnPreference,
-		[allowYAxisUnit, allowDecimalPrecision, allowPanelColumnPreference],
+	const dashboardVariableOptions = useMemo<VariableOption[]>(() => {
+		return Object.entries(dashboardVariables).map(([, value]) => ({
+			value: value.name || '',
+			label: value.name || '',
+		}));
+	}, [dashboardVariables]);
+
+	const updateCursorAndDropdown = (value: string, pos: number): void => {
+		setCursorPos(pos);
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		setAutoCompleteOpen(lastDollar !== -1 && pos >= lastDollar + 1);
+	};
+
+	const onInputChange = (value: string): void => {
+		setInputValue(value);
+		onChangeHandler(setTitle, value);
+		setTimeout(() => {
+			const pos = inputRef.current?.input?.selectionStart ?? 0;
+			updateCursorAndDropdown(value, pos);
+		}, 0);
+	};
+
+	const handleInputCursor = (): void => {
+		const pos = inputRef.current?.input?.selectionStart ?? 0;
+		updateCursorAndDropdown(inputValue, pos);
+	};
+
+	const onSelect = (selectedValue: string): void => {
+		const pos = cursorPos;
+		const value = inputValue;
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		const textBeforeDollar = value.substring(0, lastDollar);
+		const textAfterDollar = value.substring(lastDollar + 1);
+		const match = textAfterDollar.match(/^([a-zA-Z0-9_.]*)/);
+		const rest = textAfterDollar.substring(match ? match[1].length : 0);
+		const newValue = `${textBeforeDollar}$${selectedValue}${rest}`;
+		setInputValue(newValue);
+		onChangeHandler(setTitle, newValue);
+		setAutoCompleteOpen(false);
+		setTimeout(() => {
+			const newCursor = `${textBeforeDollar}$${selectedValue}`.length;
+			inputRef.current?.input?.setSelectionRange(newCursor, newCursor);
+			setCursorPos(newCursor);
+		}, 0);
+	};
+
+	const filterOption = (
+		inputValue: string,
+		option?: VariableOption,
+	): boolean => {
+		const pos = cursorPos;
+		const value = inputValue;
+		const lastDollar = value.lastIndexOf('$', pos - 1);
+		if (lastDollar === -1) {
+			return false;
+		}
+		const afterDollar = value.substring(lastDollar + 1, pos).toLowerCase();
+		return option?.value.toLowerCase().startsWith(afterDollar) || false;
+	};
+
+	useEffect(() => {
+		const queryContainsMetricsDataSource = currentQuery.builder.queryData.some(
+			(query) => query.dataSource === DataSource.METRICS,
+		);
+
+		if (queryContainsMetricsDataSource) {
+			setGraphTypes((prev) =>
+				prev.filter((graph) => graph.name !== PANEL_TYPES.LIST),
+			);
+		} else {
+			setGraphTypes(GraphTypes);
+		}
+	}, [currentQuery]);
+
+	const softMinHandler = useCallback(
+		(value: number | null) => {
+			setSoftMin(value);
+		},
+		[setSoftMin],
 	);
 
-	const isLegendSectionVisible = useMemo(
-		() => allowLegendPosition || allowLegendColors,
-		[allowLegendPosition, allowLegendColors],
-	);
-
-	const isChartAppearanceSectionVisible = useMemo(
-		() =>
-			/**
-			 * Disabled for now as we are not done with other settings in chart appearance section
-			 * TODO: @ahrefabhi Enable this after we are done other settings in chart appearance section
-			 */
-
-			// eslint-disable-next-line sonarjs/no-redundant-boolean
-			false &&
-			(allowFillMode ||
-				allowLineStyle ||
-				allowLineInterpolation ||
-				allowShowPoints),
-		[allowFillMode, allowLineStyle, allowLineInterpolation, allowShowPoints],
+	const softMaxHandler = useCallback(
+		(value: number | null) => {
+			setSoftMax(value);
+		},
+		[setSoftMax],
 	);
 
 	return (
 		<div className="right-container">
 			<section className="header">
 				<div className="purple-dot" />
-				<Typography.Text className="header-text">Panel Settings</Typography.Text>
+				<Typography.Text className="header-text">Panel details</Typography.Text>
 			</section>
-
-			<GeneralSettingsSection
-				title={title}
-				setTitle={setTitle}
-				description={description}
-				setDescription={setDescription}
-				dashboardVariables={dashboardVariables}
-			/>
-
-			<section className="panel-config">
-				<VisualizationSettingsSection
-					selectedGraph={selectedGraph}
-					setGraphHandler={setGraphHandler}
-					selectedTime={selectedTime}
-					setSelectedTime={setSelectedTime}
-					stackedBarChart={stackedBarChart}
-					setStackedBarChart={setStackedBarChart}
-					isFillSpans={isFillSpans}
-					setIsFillSpans={setIsFillSpans}
-					allowPanelTimePreference={allowPanelTimePreference}
-					allowStackingBarChart={allowStackingBarChart}
-					allowFillSpans={allowFillSpans}
+			<section className="name-description">
+				<Typography.Text className="typography">Name</Typography.Text>
+				<AutoComplete
+					options={dashboardVariableOptions}
+					value={inputValue}
+					onChange={onInputChange}
+					onSelect={onSelect}
+					filterOption={filterOption}
+					style={{ width: '100%' }}
+					getPopupContainer={popupContainer}
+					placeholder="Enter the panel name here..."
+					open={autoCompleteOpen}
+				>
+					<Input
+						rootClassName="name-input"
+						ref={inputRef}
+						onSelect={handleInputCursor}
+						onClick={handleInputCursor}
+						onBlur={(): void => setAutoCompleteOpen(false)}
+					/>
+				</AutoComplete>
+				<Typography.Text className="typography">Description</Typography.Text>
+				<TextArea
+					placeholder="Enter the panel description here..."
+					bordered
+					allowClear
+					value={description}
+					onChange={(event): void =>
+						onChangeHandler(setDescription, event.target.value)
+					}
+					rootClassName="description-input"
 				/>
+			</section>
+			<section className="panel-config">
+				<Typography.Text className="typography">Panel Type</Typography.Text>
+				<Select
+					onChange={setGraphHandler}
+					value={selectedGraph}
+					style={{ width: '100%' }}
+					className="panel-type-select"
+					data-testid="panel-change-select"
+					data-stacking-state={stackedBarChart ? 'true' : 'false'}
+				>
+					{graphTypes.map((item) => (
+						<Option key={item.name} value={item.name}>
+							<div className="select-option">
+								<div className="icon">{item.icon}</div>
+								<Typography.Text className="display">{item.display}</Typography.Text>
+							</div>
+						</Option>
+					))}
+				</Select>
 
-				{isFormattingSectionVisible && (
-					<FormattingUnitsSection
-						selectedGraphType={selectedGraphType}
-						yAxisUnit={yAxisUnit}
-						setYAxisUnit={setYAxisUnit}
-						isNewDashboard={isNewDashboard}
-						decimalPrecision={decimalPrecision}
-						setDecimalPrecision={setDecimalPrecision}
+				{allowFillSpans && (
+					<Space className="fill-gaps">
+						<Typography className="fill-gaps-text">Fill gaps</Typography>
+						<Switch
+							checked={isFillSpans}
+							size="small"
+							onChange={(checked): void => setIsFillSpans(checked)}
+						/>
+					</Space>
+				)}
+
+				{allowPanelTimePreference && (
+					<>
+						<Typography.Text className="panel-time-text">
+							Panel Time Preference
+						</Typography.Text>
+						<TimePreference
+							{...{
+								selectedTime,
+								setSelectedTime,
+							}}
+						/>
+					</>
+				)}
+
+				{allowPanelColumnPreference && (
+					<ColumnUnitSelector
 						columnUnits={columnUnits}
 						setColumnUnits={setColumnUnits}
-						allowYAxisUnit={allowYAxisUnit}
-						allowDecimalPrecision={allowDecimalPrecision}
-						allowPanelColumnPreference={allowPanelColumnPreference}
+						isNewDashboard={isNewDashboard}
 					/>
 				)}
 
-				{isChartAppearanceSectionVisible && (
-					<ChartAppearanceSection
-						fillMode={fillMode}
-						setFillMode={setFillMode}
-						lineStyle={lineStyle}
-						setLineStyle={setLineStyle}
-						lineInterpolation={lineInterpolation}
-						setLineInterpolation={setLineInterpolation}
-						showPoints={showPoints}
-						setShowPoints={setShowPoints}
-						allowFillMode={allowFillMode}
-						allowLineStyle={allowLineStyle}
-						allowLineInterpolation={allowLineInterpolation}
-						allowShowPoints={allowShowPoints}
+				{allowYAxisUnit && (
+					<DashboardYAxisUnitSelectorWrapper
+						onSelect={setYAxisUnit}
+						value={yAxisUnit || ''}
+						fieldLabel={
+							selectedGraphType === PanelDisplay.VALUE ||
+							selectedGraphType === PanelDisplay.PIE
+								? 'Unit'
+								: 'Y Axis Unit'
+						}
+						// Only update the y-axis unit value automatically in create mode
+						shouldUpdateYAxisUnit={isNewDashboard}
 					/>
 				)}
 
-				{isAxisSectionVisible && (
-					<AxesSection
-						allowSoftMinMax={allowSoftMinMax}
-						allowLogScale={allowLogScale}
-						softMin={softMin}
-						softMax={softMax}
-						setSoftMin={setSoftMin}
-						setSoftMax={setSoftMax}
-						isLogScale={isLogScale}
-						setIsLogScale={setIsLogScale}
-					/>
+				{allowDecimalPrecision && (
+					<section className="decimal-precision-selector">
+						<Typography.Text className="typography">
+							Decimal Precision
+						</Typography.Text>
+						<Select
+							options={[
+								{ label: '0 decimals', value: PrecisionOptionsEnum.ZERO },
+								{ label: '1 decimal', value: PrecisionOptionsEnum.ONE },
+								{ label: '2 decimals', value: PrecisionOptionsEnum.TWO },
+								{ label: '3 decimals', value: PrecisionOptionsEnum.THREE },
+								{ label: '4 decimals', value: PrecisionOptionsEnum.FOUR },
+								{ label: 'Full Precision', value: PrecisionOptionsEnum.FULL },
+							]}
+							value={decimalPrecision}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={PrecisionOptionsEnum.TWO}
+							onChange={(val: PrecisionOption): void => setDecimalPrecision(val)}
+						/>
+					</section>
 				)}
 
-				{isLegendSectionVisible && (
-					<LegendSection
-						allowLegendPosition={allowLegendPosition}
-						allowLegendColors={allowLegendColors}
-						legendPosition={legendPosition}
-						setLegendPosition={setLegendPosition}
-						customLegendColors={customLegendColors}
-						setCustomLegendColors={setCustomLegendColors}
-						queryResponse={queryResponse}
-					/>
+				{allowSoftMinMax && (
+					<section className="soft-min-max">
+						<section className="container">
+							<Typography.Text className="text">Soft Min</Typography.Text>
+							<InputNumber
+								type="number"
+								value={softMin}
+								onChange={softMinHandler}
+								rootClassName="input"
+							/>
+						</section>
+						<section className="container">
+							<Typography.Text className="text">Soft Max</Typography.Text>
+							<InputNumber
+								value={softMax}
+								type="number"
+								rootClassName="input"
+								onChange={softMaxHandler}
+							/>
+						</section>
+					</section>
+				)}
+
+				{allowStackingBarChart && (
+					<section className="stack-chart">
+						<Typography.Text className="label">Stack series</Typography.Text>
+						<Switch
+							checked={stackedBarChart}
+							size="small"
+							onChange={(checked): void => setStackedBarChart(checked)}
+						/>
+					</section>
 				)}
 
 				{allowBucketConfig && (
-					<HistogramBucketsSection
-						bucketCount={bucketCount}
-						setBucketCount={setBucketCount}
-						bucketWidth={bucketWidth}
-						setBucketWidth={setBucketWidth}
-						combineHistogram={combineHistogram}
-						setCombineHistogram={setCombineHistogram}
-					/>
+					<section className="bucket-config">
+						<Typography.Text className="label">Number of buckets</Typography.Text>
+						<InputNumber
+							value={bucketCount || null}
+							type="number"
+							min={0}
+							rootClassName="bucket-input"
+							placeholder="Default: 30"
+							onChange={(val): void => {
+								setBucketCount(val || 0);
+							}}
+						/>
+						<Typography.Text className="label bucket-size-label">
+							Bucket width
+						</Typography.Text>
+						<InputNumber
+							value={bucketWidth || null}
+							type="number"
+							precision={2}
+							placeholder="Default: Auto"
+							step={0.1}
+							min={0.0}
+							rootClassName="bucket-input"
+							onChange={(val): void => {
+								setBucketWidth(val || 0);
+							}}
+						/>
+						<section className="combine-hist">
+							<Typography.Text className="label">
+								Merge all series into one
+							</Typography.Text>
+							<Switch
+								checked={combineHistogram}
+								size="small"
+								onChange={(checked): void => setCombineHistogram(checked)}
+							/>
+						</section>
+					</section>
+				)}
+
+				{allowLogScale && (
+					<section className="log-scale">
+						<Typography.Text className="typography">Y Axis Scale</Typography.Text>
+						<Select
+							onChange={(value): void => setIsLogScale(value === LogScale.LOGARITHMIC)}
+							value={isLogScale ? LogScale.LOGARITHMIC : LogScale.LINEAR}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LogScale.LINEAR}
+						>
+							<Option value={LogScale.LINEAR}>
+								<div className="select-option">
+									<div className="icon">
+										<LineChart size={16} />
+									</div>
+									<Typography.Text className="display">Linear</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LogScale.LOGARITHMIC}>
+								<div className="select-option">
+									<div className="icon">
+										<Spline size={16} />
+									</div>
+									<Typography.Text className="display">Logarithmic</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendPosition && (
+					<section className="legend-position">
+						<Typography.Text className="typography">Legend Position</Typography.Text>
+						<Select
+							onChange={(value: LegendPosition): void => setLegendPosition(value)}
+							value={legendPosition}
+							style={{ width: '100%' }}
+							className="panel-type-select"
+							defaultValue={LegendPosition.BOTTOM}
+						>
+							<Option value={LegendPosition.BOTTOM}>
+								<div className="select-option">
+									<Typography.Text className="display">Bottom</Typography.Text>
+								</div>
+							</Option>
+							<Option value={LegendPosition.RIGHT}>
+								<div className="select-option">
+									<Typography.Text className="display">Right</Typography.Text>
+								</div>
+							</Option>
+						</Select>
+					</section>
+				)}
+
+				{allowLegendColors && (
+					<section className="legend-colors">
+						<LegendColors
+							customLegendColors={customLegendColors}
+							setCustomLegendColors={setCustomLegendColors}
+							queryResponse={queryResponse}
+						/>
+					</section>
 				)}
 			</section>
 
 			{allowCreateAlerts && (
-				<AlertsSection onCreateAlertsHandler={onCreateAlertsHandler} />
+				<section className="alerts" onClick={onCreateAlertsHandler}>
+					<div className="left-section">
+						<ConciergeBell size={14} className="bell-icon" />
+						<Typography.Text className="alerts-text">Alerts</Typography.Text>
+						<SquareArrowOutUpRight size={10} className="info-icon" />
+					</div>
+					<Plus size={14} className="plus-icon" />
+				</section>
 			)}
 
 			{allowContextLinks && (
-				<ContextLinksSection
-					contextLinks={contextLinks}
-					setContextLinks={setContextLinks}
-					selectedWidget={selectedWidget}
-				/>
+				<section className="context-links">
+					<ContextLinks
+						contextLinks={contextLinks}
+						setContextLinks={setContextLinks}
+						selectedWidget={selectedWidget}
+					/>
+				</section>
 			)}
 
 			{allowThreshold && (
-				<ThresholdsSection
-					thresholds={thresholds}
-					setThresholds={setThresholds}
-					yAxisUnit={yAxisUnit}
-					selectedGraph={selectedGraph}
-					columnUnits={columnUnits}
-				/>
+				<section>
+					<ThresholdSelector
+						thresholds={thresholds}
+						setThresholds={setThresholds}
+						yAxisUnit={yAxisUnit}
+						selectedGraph={selectedGraph}
+						columnUnits={columnUnits}
+					/>
+				</section>
 			)}
 		</div>
 	);
@@ -344,14 +615,6 @@ export interface RightContainerProps {
 	setContextLinks: Dispatch<SetStateAction<ContextLinksData>>;
 	enableDrillDown?: boolean;
 	isNewDashboard: boolean;
-	lineInterpolation: LineInterpolation;
-	setLineInterpolation: Dispatch<SetStateAction<LineInterpolation>>;
-	fillMode: FillMode;
-	setFillMode: Dispatch<SetStateAction<FillMode>>;
-	lineStyle: LineStyle;
-	setLineStyle: Dispatch<SetStateAction<LineStyle>>;
-	showPoints: boolean;
-	setShowPoints: Dispatch<SetStateAction<boolean>>;
 }
 
 RightContainer.defaultProps = {

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

@@ -36,7 +36,7 @@ const checkStackSeriesState = (
 	expect(getByTextUtil(container, 'Stack series')).toBeInTheDocument();
 
 	const stackSeriesSection = container.querySelector(
-		'.stack-chart',
+		'section > .stack-chart',
 	) as HTMLElement;
 	expect(stackSeriesSection).toBeInTheDocument();
 
@@ -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>
@@ -326,7 +326,7 @@ describe('Stacking bar in new panel', () => {
 		expect(getByText('Stack series')).toBeInTheDocument();
 
 		// Verify section exists
-		const section = container.querySelector('.stack-chart');
+		const section = container.querySelector('section > .stack-chart');
 		expect(section).toBeInTheDocument();
 
 		// Verify switch is present and enabled (ant-switch-checked)
@@ -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,13 +4,8 @@ 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 {
-	ResizableHandle,
-	ResizablePanel,
-	ResizablePanelGroup,
-} from '@signozhq/resizable';
 import { Button, Flex, Modal, Space, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
@@ -35,14 +30,10 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
 import { getDashboardVariables } from 'lib/dashboardVariables/getDashboardVariables';
-import {
-	FillMode,
-	LineInterpolation,
-	LineStyle,
-} from 'lib/uPlotV2/config/types';
 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,
@@ -91,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();
 
@@ -144,6 +136,8 @@ function NewWidget({
 
 	const query = useUrlQuery();
 
+	const { dashboardId } = useParams<DashboardWidgetPageParams>();
+
 	const [isNewDashboard, setIsNewDashboard] = useState<boolean>(false);
 
 	const logEventCalledRef = useRef(false);
@@ -214,18 +208,6 @@ function NewWidget({
 	const [legendPosition, setLegendPosition] = useState<LegendPosition>(
 		selectedWidget?.legendPosition || LegendPosition.BOTTOM,
 	);
-	const [lineInterpolation, setLineInterpolation] = useState<LineInterpolation>(
-		selectedWidget?.lineInterpolation || LineInterpolation.Spline,
-	);
-	const [fillMode, setFillMode] = useState<FillMode>(
-		selectedWidget?.fillMode || FillMode.None,
-	);
-	const [lineStyle, setLineStyle] = useState<LineStyle>(
-		selectedWidget?.lineStyle || LineStyle.Solid,
-	);
-	const [showPoints, setShowPoints] = useState<boolean>(
-		selectedWidget?.showPoints ?? false,
-	);
 	const [customLegendColors, setCustomLegendColors] = useState<
 		Record<string, string>
 	>(selectedWidget?.customLegendColors || {});
@@ -291,10 +273,6 @@ function NewWidget({
 				softMin,
 				softMax,
 				fillSpans: isFillSpans,
-				lineInterpolation,
-				fillMode,
-				lineStyle,
-				showPoints,
 				columnUnits,
 				bucketCount,
 				stackedBarChart,
@@ -305,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,
@@ -330,13 +309,9 @@ function NewWidget({
 		stackedBarChart,
 		isLogScale,
 		legendPosition,
-		lineInterpolation,
-		fillMode,
-		lineStyle,
-		showPoints,
 		customLegendColors,
+		columnWidths,
 		contextLinks,
-		selectedWidget.columnWidths,
 	]);
 
 	const closeModal = (): void => {
@@ -469,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;
@@ -595,9 +557,12 @@ function NewWidget({
 		};
 
 		updateDashboardMutation.mutateAsync(dashboard, {
-			onSuccess: () => {
+			onSuccess: (updatedDashboard) => {
+				setSelectedDashboard(updatedDashboard.data);
 				setToScrollWidgetId(selectedWidget?.id || '');
-				navigateToDashboardPage();
+				safeNavigate({
+					pathname: generatePath(ROUTES.DASHBOARD, { dashboardId }),
+				});
 			},
 		});
 	}, [
@@ -612,8 +577,9 @@ function NewWidget({
 		preWidgets,
 		updateDashboardMutation,
 		widgets,
+		setSelectedDashboard,
 		setToScrollWidgetId,
-		navigateToDashboardPage,
+		safeNavigate,
 		dashboardId,
 	]);
 
@@ -622,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);
@@ -661,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 &&
@@ -769,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);
@@ -787,7 +748,7 @@ function NewWidget({
 	}, [query, safeNavigate, dashboardId, currentQuery]);
 
 	return (
-		<Container className="new-widget-container">
+		<Container>
 			<div className="edit-header">
 				<div className="left-header">
 					<X
@@ -841,104 +802,79 @@ function NewWidget({
 			</div>
 
 			<PanelContainer>
-				<ResizablePanelGroup direction="horizontal" autoSaveId="panel-editor">
-					<ResizablePanel
-						minSize={70}
-						maxSize={80}
-						defaultSize={80}
-						className="resizable-panel-left-container"
-					>
-						<OverlayScrollbar>
-							<LeftContainerWrapper isDarkMode={useIsDarkMode()}>
-								{selectedWidget && (
-									<LeftContainer
-										selectedDashboard={selectedDashboard}
-										selectedGraph={graphType}
-										selectedLogFields={selectedLogFields}
-										setSelectedLogFields={setSelectedLogFields}
-										selectedTracesFields={selectedTracesFields}
-										setSelectedTracesFields={setSelectedTracesFields}
-										selectedWidget={selectedWidget}
-										selectedTime={selectedTime}
-										requestData={requestData}
-										setRequestData={setRequestData}
-										isLoadingPanelData={isLoadingPanelData}
-										setQueryResponse={setQueryResponse}
-										enableDrillDown={enableDrillDown}
-									/>
-								)}
-							</LeftContainerWrapper>
-						</OverlayScrollbar>
-					</ResizablePanel>
-					<ResizableHandle withHandle className="widget-resizable-handle" />
-					<ResizablePanel
-						minSize={20}
-						maxSize={30}
-						defaultSize={20}
-						className="resizable-panel-right-container"
-					>
-						<OverlayScrollbar>
-							<RightContainerWrapper>
-								<RightContainer
-									setGraphHandler={setGraphHandler}
-									title={title}
-									setTitle={setTitle}
-									description={description}
-									setDescription={setDescription}
-									stackedBarChart={stackedBarChart}
-									setStackedBarChart={setStackedBarChart}
-									lineInterpolation={lineInterpolation}
-									setLineInterpolation={setLineInterpolation}
-									fillMode={fillMode}
-									setFillMode={setFillMode}
-									lineStyle={lineStyle}
-									setLineStyle={setLineStyle}
-									showPoints={showPoints}
-									setShowPoints={setShowPoints}
-									opacity={opacity}
-									yAxisUnit={yAxisUnit}
-									columnUnits={columnUnits}
-									setColumnUnits={setColumnUnits}
-									bucketCount={bucketCount}
-									bucketWidth={bucketWidth}
-									combineHistogram={combineHistogram}
-									setCombineHistogram={setCombineHistogram}
-									setBucketWidth={setBucketWidth}
-									setBucketCount={setBucketCount}
-									setOpacity={setOpacity}
-									selectedNullZeroValue={selectedNullZeroValue}
-									setSelectedNullZeroValue={setSelectedNullZeroValue}
-									selectedGraph={graphType}
-									setSelectedTime={setSelectedTime}
-									selectedTime={selectedTime}
-									setYAxisUnit={setYAxisUnit}
-									decimalPrecision={decimalPrecision}
-									setDecimalPrecision={setDecimalPrecision}
-									thresholds={thresholds}
-									setThresholds={setThresholds}
-									selectedWidget={selectedWidget}
-									isFillSpans={isFillSpans}
-									setIsFillSpans={setIsFillSpans}
-									isLogScale={isLogScale}
-									setIsLogScale={setIsLogScale}
-									legendPosition={legendPosition}
-									setLegendPosition={setLegendPosition}
-									customLegendColors={customLegendColors}
-									setCustomLegendColors={setCustomLegendColors}
-									queryResponse={queryResponse}
-									softMin={softMin}
-									setSoftMin={setSoftMin}
-									softMax={softMax}
-									setSoftMax={setSoftMax}
-									contextLinks={contextLinks}
-									setContextLinks={setContextLinks}
-									enableDrillDown={enableDrillDown}
-									isNewDashboard={isNewDashboard}
-								/>
-							</RightContainerWrapper>
-						</OverlayScrollbar>
-					</ResizablePanel>
-				</ResizablePanelGroup>
+				<LeftContainerWrapper isDarkMode={useIsDarkMode()}>
+					<OverlayScrollbar>
+						{selectedWidget && (
+							<LeftContainer
+								selectedGraph={graphType}
+								selectedLogFields={selectedLogFields}
+								setSelectedLogFields={setSelectedLogFields}
+								selectedTracesFields={selectedTracesFields}
+								setSelectedTracesFields={setSelectedTracesFields}
+								selectedWidget={selectedWidget}
+								selectedTime={selectedTime}
+								requestData={requestData}
+								setRequestData={setRequestData}
+								isLoadingPanelData={isLoadingPanelData}
+								setQueryResponse={setQueryResponse}
+								enableDrillDown={enableDrillDown}
+							/>
+						)}
+					</OverlayScrollbar>
+				</LeftContainerWrapper>
+
+				<RightContainerWrapper>
+					<OverlayScrollbar>
+						<RightContainer
+							setGraphHandler={setGraphHandler}
+							title={title}
+							setTitle={setTitle}
+							description={description}
+							setDescription={setDescription}
+							stackedBarChart={stackedBarChart}
+							setStackedBarChart={setStackedBarChart}
+							opacity={opacity}
+							yAxisUnit={yAxisUnit}
+							columnUnits={columnUnits}
+							setColumnUnits={setColumnUnits}
+							bucketCount={bucketCount}
+							bucketWidth={bucketWidth}
+							combineHistogram={combineHistogram}
+							setCombineHistogram={setCombineHistogram}
+							setBucketWidth={setBucketWidth}
+							setBucketCount={setBucketCount}
+							setOpacity={setOpacity}
+							selectedNullZeroValue={selectedNullZeroValue}
+							setSelectedNullZeroValue={setSelectedNullZeroValue}
+							selectedGraph={graphType}
+							setSelectedTime={setSelectedTime}
+							selectedTime={selectedTime}
+							setYAxisUnit={setYAxisUnit}
+							decimalPrecision={decimalPrecision}
+							setDecimalPrecision={setDecimalPrecision}
+							thresholds={thresholds}
+							setThresholds={setThresholds}
+							selectedWidget={selectedWidget}
+							isFillSpans={isFillSpans}
+							setIsFillSpans={setIsFillSpans}
+							isLogScale={isLogScale}
+							setIsLogScale={setIsLogScale}
+							legendPosition={legendPosition}
+							setLegendPosition={setLegendPosition}
+							customLegendColors={customLegendColors}
+							setCustomLegendColors={setCustomLegendColors}
+							queryResponse={queryResponse}
+							softMin={softMin}
+							setSoftMin={setSoftMin}
+							softMax={softMax}
+							setSoftMax={setSoftMax}
+							contextLinks={contextLinks}
+							setContextLinks={setContextLinks}
+							enableDrillDown={enableDrillDown}
+							isNewDashboard={isNewDashboard}
+						/>
+					</OverlayScrollbar>
+				</RightContainerWrapper>
 			</PanelContainer>
 			<Modal
 				title={

frontend/src/container/NewWidget/styles.ts

@@ -10,7 +10,8 @@ export const Container = styled.div`
 
 export const RightContainerWrapper = styled(Col)`
 	&&& {
-		width: 100%;
+		max-width: 400px;
+		width: 30%;
 		overflow-y: auto;
 	}
 	&::-webkit-scrollbar {

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/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -30,6 +30,7 @@ import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { GlobalReducer } from 'types/reducer/globalTime';
 import { addCustomTimeRange } from 'utils/customTimeRangeUtils';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
 import { normalizeTimeToMs } from 'utils/timeUtils';
 import { v4 as uuid } from 'uuid';
 
@@ -234,20 +235,7 @@ function DateTimeSelection({
 
 	const updateLocalStorageForRoutes = useCallback(
 		(value: Time | string): void => {
-			const preRoutes = getLocalStorageKey(LOCALSTORAGE.METRICS_TIME_IN_DURATION);
-			if (preRoutes !== null) {
-				const preRoutesObject = JSON.parse(preRoutes);
-
-				const preRoute = {
-					...preRoutesObject,
-				};
-				preRoute[location.pathname] = value;
-
-				setLocalStorageKey(
-					LOCALSTORAGE.METRICS_TIME_IN_DURATION,
-					JSON.stringify(preRoute),
-				);
-			}
+			persistTimeDurationForRoute(location.pathname, String(value));
 		},
 		[location.pathname],
 	);
@@ -738,6 +726,7 @@ function DateTimeSelection({
 						showRecentlyUsed={showRecentlyUsed}
 						minTime={minTimeForDateTimePicker}
 						maxTime={maxTimeForDateTimePicker}
+						isModalTimeSelection={isModalTimeSelection}
 					/>
 
 					{showAutoRefresh && selectedTime !== 'custom' && (

frontend/src/hooks/__tests__/useZoomOut.test.ts

@@ -0,0 +1,160 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryParams } from 'constants/query';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import { useZoomOut } from '../useZoomOut';
+
+const mockDispatch = jest.fn();
+const mockSafeNavigate = jest.fn();
+const mockUrlQueryDelete = jest.fn();
+const mockUrlQuerySet = jest.fn();
+const mockUrlQueryToString = jest.fn(() => '');
+
+interface MockAppState {
+	globalTime: Pick<GlobalReducer, 'minTime' | 'maxTime'>;
+}
+
+jest.mock('react-redux', () => ({
+	useDispatch: (): jest.Mock => mockDispatch,
+	useSelector: <T>(selector: (state: MockAppState) => T): T => {
+		const mockState: MockAppState = {
+			globalTime: {
+				minTime: 15 * 60 * 1000 * 1e6, // 15 min in nanoseconds
+				maxTime: 30 * 60 * 1000 * 1e6, // 30 min in nanoseconds (mock for getNextZoomOutRange)
+			},
+		};
+		return selector(mockState);
+	},
+}));
+
+jest.mock('react-router-dom', () => ({
+	useLocation: (): { pathname: string } => ({ pathname: '/logs-explorer' }),
+}));
+
+jest.mock('hooks/useSafeNavigate', () => ({
+	useSafeNavigate: (): { safeNavigate: typeof mockSafeNavigate } => ({
+		safeNavigate: mockSafeNavigate,
+	}),
+}));
+
+interface MockUrlQuery {
+	delete: typeof mockUrlQueryDelete;
+	set: typeof mockUrlQuerySet;
+	get: () => null;
+	toString: typeof mockUrlQueryToString;
+}
+
+jest.mock('hooks/useUrlQuery', () => ({
+	__esModule: true,
+	default: (): MockUrlQuery => ({
+		delete: mockUrlQueryDelete,
+		set: mockUrlQuerySet,
+		get: (): null => null,
+		toString: mockUrlQueryToString,
+	}),
+}));
+
+const mockGetNextZoomOutRange = jest.fn();
+jest.mock('lib/zoomOutUtils', () => ({
+	getNextZoomOutRange: (
+		...args: unknown[]
+	): ReturnType<typeof mockGetNextZoomOutRange> =>
+		mockGetNextZoomOutRange(...args),
+}));
+
+describe('useZoomOut', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockUrlQueryToString.mockReturnValue('relativeTime=45m');
+	});
+
+	it('should do nothing when isDisabled is true', () => {
+		const { result } = renderHook(() => useZoomOut({ isDisabled: true }));
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).not.toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should do nothing when getNextZoomOutRange returns null', () => {
+		mockGetNextZoomOutRange.mockReturnValue(null);
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockGetNextZoomOutRange).toHaveBeenCalled();
+		expect(mockDispatch).not.toHaveBeenCalled();
+		expect(mockSafeNavigate).not.toHaveBeenCalled();
+	});
+
+	it('should dispatch preset and update URL when result has preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.startTime);
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.endTime);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.relativeTime, '45m');
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should dispatch custom range and update URL when result has no preset', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000000, 2000000],
+			preset: null,
+		});
+
+		const { result } = renderHook(() => useZoomOut());
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.any(Function));
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(
+			QueryParams.startTime,
+			'1000000',
+		);
+		expect(mockUrlQuerySet).toHaveBeenCalledWith(QueryParams.endTime, '2000000');
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.relativeTime);
+		expect(mockSafeNavigate).toHaveBeenCalledWith(
+			expect.stringContaining('/logs-explorer'),
+		);
+	});
+
+	it('should delete urlParamsToDelete when provided', () => {
+		mockGetNextZoomOutRange.mockReturnValue({
+			range: [1000, 2000],
+			preset: '45m',
+		});
+
+		const { result } = renderHook(() =>
+			useZoomOut({
+				urlParamsToDelete: [QueryParams.activeLogId],
+			}),
+		);
+
+		act(() => {
+			result.current();
+		});
+
+		expect(mockUrlQueryDelete).toHaveBeenCalledWith(QueryParams.activeLogId);
+	});
+});

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/hooks/useZoomOut.ts

@@ -0,0 +1,79 @@
+import { useCallback, useRef } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useDispatch, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+import { QueryParams } from 'constants/query';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { getNextZoomOutRange } from 'lib/zoomOutUtils';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { persistTimeDurationForRoute } from 'utils/metricsTimeStorageUtils';
+
+export interface UseZoomOutOptions {
+	/** When true, the zoom out handler does nothing (e.g. when live logs are enabled) */
+	isDisabled?: boolean;
+	/** URL params to delete when zooming out (e.g. [QueryParams.activeLogId] for logs) */
+	urlParamsToDelete?: string[];
+}
+
+/**
+ * Reusable hook for zoom-out functionality in explorers (logs, traces, etc.).
+ * Computes the next time range using the zoom-out ladder, updates Redux global time,
+ * and navigates with the new URL params.
+ */
+const EMPTY_PARAMS: string[] = [];
+
+export function useZoomOut(options: UseZoomOutOptions = {}): () => void {
+	const { isDisabled = false, urlParamsToDelete = EMPTY_PARAMS } = options;
+	const urlParamsToDeleteRef = useRef(urlParamsToDelete);
+	urlParamsToDeleteRef.current = urlParamsToDelete;
+
+	const dispatch = useDispatch();
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+	const urlQuery = useUrlQuery();
+	const location = useLocation();
+	const { safeNavigate } = useSafeNavigate();
+
+	return useCallback((): void => {
+		if (isDisabled) {
+			return;
+		}
+		const minMs = Math.floor((minTime ?? 0) / 1e6);
+		const maxMs = Math.floor((maxTime ?? 0) / 1e6);
+		const result = getNextZoomOutRange(minMs, maxMs);
+		if (!result) {
+			return;
+		}
+		const [newStartMs, newEndMs] = result.range;
+		const { preset } = result;
+
+		if (preset) {
+			dispatch(UpdateTimeInterval(preset));
+			urlQuery.delete(QueryParams.startTime);
+			urlQuery.delete(QueryParams.endTime);
+			urlQuery.set(QueryParams.relativeTime, preset);
+			persistTimeDurationForRoute(location.pathname, preset);
+		} else {
+			dispatch(UpdateTimeInterval('custom', [newStartMs, newEndMs]));
+			urlQuery.set(QueryParams.startTime, String(newStartMs));
+			urlQuery.set(QueryParams.endTime, String(newEndMs));
+			urlQuery.delete(QueryParams.relativeTime);
+		}
+		for (const param of urlParamsToDeleteRef.current) {
+			urlQuery.delete(param);
+		}
+		safeNavigate(`${location.pathname}?${urlQuery.toString()}`);
+	}, [
+		dispatch,
+		isDisabled,
+		location.pathname,
+		maxTime,
+		minTime,
+		safeNavigate,
+		urlQuery,
+	]);
+}

frontend/src/lib/__tests__/zoomOutUtils.test.ts

@@ -0,0 +1,147 @@
+import {
+	getNextDurationInLadder,
+	getNextZoomOutRange,
+	isZoomOutDisabled,
+	ZoomOutResult,
+} from '../zoomOutUtils';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+// Fixed "now" for deterministic tests: 2024-01-15 12:00:00 UTC
+const NOW_MS = 1705312800000;
+
+describe('zoomOutUtils', () => {
+	beforeEach(() => {
+		jest.spyOn(Date, 'now').mockReturnValue(NOW_MS);
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	describe('getNextDurationInLadder', () => {
+		it('should use 3x zoom out below 15m until reaching 15m', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_MIN)).toBe(3 * MS_PER_MIN);
+			expect(getNextDurationInLadder(2 * MS_PER_MIN)).toBe(6 * MS_PER_MIN);
+			expect(getNextDurationInLadder(3 * MS_PER_MIN)).toBe(9 * MS_PER_MIN);
+			expect(getNextDurationInLadder(4 * MS_PER_MIN)).toBe(12 * MS_PER_MIN);
+			expect(getNextDurationInLadder(5 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // cap at 15m
+			expect(getNextDurationInLadder(6 * MS_PER_MIN)).toBe(15 * MS_PER_MIN); // 18m capped
+		});
+
+		it('should return next step for each ladder rung from 15m onward', () => {
+			expect(getNextDurationInLadder(10 * MS_PER_MIN)).toBe(15 * MS_PER_MIN);
+			expect(getNextDurationInLadder(15 * MS_PER_MIN)).toBe(45 * MS_PER_MIN);
+			expect(getNextDurationInLadder(45 * MS_PER_MIN)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(2 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(7 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(21 * MS_PER_HOUR)).toBe(1 * MS_PER_DAY);
+			expect(getNextDurationInLadder(1 * MS_PER_DAY)).toBe(2 * MS_PER_DAY);
+			expect(getNextDurationInLadder(2 * MS_PER_DAY)).toBe(3 * MS_PER_DAY);
+			expect(getNextDurationInLadder(3 * MS_PER_DAY)).toBe(1 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(1 * MS_PER_WEEK)).toBe(2 * MS_PER_WEEK);
+			expect(getNextDurationInLadder(2 * MS_PER_WEEK)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return MAX when at or past 1 month (no wrap)', () => {
+			expect(getNextDurationInLadder(30 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+			expect(getNextDurationInLadder(31 * MS_PER_DAY)).toBe(30 * MS_PER_DAY);
+		});
+
+		it('should return next step for duration between ladder rungs', () => {
+			expect(getNextDurationInLadder(1 * MS_PER_HOUR)).toBe(2 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(5 * MS_PER_HOUR)).toBe(7 * MS_PER_HOUR);
+			expect(getNextDurationInLadder(12 * MS_PER_HOUR)).toBe(21 * MS_PER_HOUR);
+		});
+	});
+
+	describe('getNextZoomOutRange', () => {
+		it('should return null when duration is zero or negative', () => {
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS)).toBeNull();
+			expect(getNextZoomOutRange(NOW_MS, NOW_MS - 1000)).toBeNull();
+		});
+
+		it('should return center-anchored range and preset=null when new end does not exceed now (Phase 1)', () => {
+			// 15m range centered well before now so zoom to 45m keeps end <= now
+			// Center at now-30m: end = center + 22.5m = now - 7.5m <= now
+			const centerMs = NOW_MS - 30 * MS_PER_MIN;
+			const start15m = centerMs - 7.5 * MS_PER_MIN;
+			const end15m = centerMs + 7.5 * MS_PER_MIN;
+			const result = getNextZoomOutRange(start15m, end15m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBeNull(); // Phase 1: preserve center-anchored range, avoid GetMinMax "last X from now"
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(45 * MS_PER_MIN);
+			const newCenter = (newStart + newEnd) / 2;
+			expect(Math.abs(newCenter - centerMs)).toBeLessThan(2000);
+			expect(newEnd).toBeLessThanOrEqual(NOW_MS + 1000);
+		});
+
+		it('should return end-anchored range when new end would exceed now (Phase 2)', () => {
+			// 22hr range ending at now - zoom to 1d (24hr) would push end past now
+			// Next ladder step from 22hr is 1d
+			const start22h = NOW_MS - 22 * MS_PER_HOUR;
+			const end22h = NOW_MS;
+			const result = getNextZoomOutRange(start22h, end22h) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('1d');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd).toBe(NOW_MS); // End anchored at now
+			expect(newStart).toBe(NOW_MS - 1 * MS_PER_DAY);
+		});
+
+		it('should return correct preset for each ladder step', () => {
+			const presets: [number, number, string][] = [
+				[15 * MS_PER_MIN, 0, '45m'],
+				[45 * MS_PER_MIN, 0, '2h'],
+				[2 * MS_PER_HOUR, 0, '7h'],
+				[7 * MS_PER_HOUR, 0, '21h'],
+				[21 * MS_PER_HOUR, 0, '1d'],
+				[1 * MS_PER_DAY, 0, '2d'],
+				[2 * MS_PER_DAY, 0, '3d'],
+				[3 * MS_PER_DAY, 0, '1w'],
+				[1 * MS_PER_WEEK, 0, '2w'],
+				[2 * MS_PER_WEEK, 0, '1month'],
+			];
+
+			presets.forEach(([durationMs, offset, expectedPreset]) => {
+				const end = NOW_MS - offset;
+				const start = end - durationMs;
+				const result = getNextZoomOutRange(start, end);
+				expect(result?.preset).toBe(expectedPreset);
+			});
+		});
+
+		it('isZoomOutDisabled returns true when duration >= 1 month', () => {
+			expect(isZoomOutDisabled(30 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(31 * MS_PER_DAY)).toBe(true);
+			expect(isZoomOutDisabled(29 * MS_PER_DAY)).toBe(false);
+			expect(isZoomOutDisabled(15 * MS_PER_MIN)).toBe(false);
+		});
+
+		it('should return null when at 1 month (no zoom out beyond max)', () => {
+			const start1m = NOW_MS - 30 * MS_PER_DAY;
+			const end1m = NOW_MS;
+			const result = getNextZoomOutRange(start1m, end1m);
+
+			expect(result).toBeNull();
+		});
+
+		it('should zoom out 3x from 5m range to 15m then continue with ladder', () => {
+			// 5m range ending at now → 3x = 15m
+			const start5m = NOW_MS - 5 * MS_PER_MIN;
+			const end5m = NOW_MS;
+			const result = getNextZoomOutRange(start5m, end5m) as ZoomOutResult;
+
+			expect(result).not.toBeNull();
+			expect(result.preset).toBe('15m');
+			const [newStart, newEnd] = result.range;
+			expect(newEnd - newStart).toBe(15 * MS_PER_MIN);
+		});
+	});
+});

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

@@ -3,15 +3,14 @@ import { generateColor } from 'lib/uPlotLib/utils/generateColor';
 import { calculateWidthBasedOnStepInterval } from 'lib/uPlotV2/utils';
 import uPlot, { Series } from 'uplot';
 
-import { generateGradientFill } from '../utils/generateGradientFill';
 import {
 	BarAlignment,
 	ConfigBuilder,
 	DrawStyle,
-	FillMode,
 	LineInterpolation,
 	LineStyle,
 	SeriesProps,
+	VisibilityMode,
 } from './types';
 
 /**
@@ -53,7 +52,7 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 	}: {
 		resolvedLineColor: string;
 	}): Partial<Series> {
-		const { lineWidth, lineStyle, lineCap, fillColor, fillMode } = this.props;
+		const { lineWidth, lineStyle, lineCap, fillColor } = this.props;
 		const lineConfig: Partial<Series> = {
 			stroke: resolvedLineColor,
 			width: lineWidth ?? DEFAULT_LINE_WIDTH,
@@ -67,19 +66,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			lineConfig.cap = lineCap;
 		}
 
-		const finalFillColor = fillColor ?? resolvedLineColor;
-
-		if (this.props.drawStyle === DrawStyle.Bar) {
-			lineConfig.fill = finalFillColor;
+		if (fillColor) {
+			lineConfig.fill = fillColor;
+		} else if (this.props.drawStyle === DrawStyle.Bar) {
+			lineConfig.fill = resolvedLineColor;
 		} else if (this.props.drawStyle === DrawStyle.Histogram) {
-			lineConfig.fill = `${finalFillColor}40`;
-		} else if (fillMode && fillMode !== FillMode.None) {
-			if (fillMode === FillMode.Solid) {
-				lineConfig.fill = finalFillColor;
-			} else if (fillMode === FillMode.Gradient) {
-				lineConfig.fill = (self: uPlot): CanvasGradient =>
-					generateGradientFill(self, finalFillColor, 'rgba(0, 0, 0, 0)');
-			}
+			lineConfig.fill = `${resolvedLineColor}40`;
 		}
 
 		return lineConfig;
@@ -167,8 +159,12 @@ export class UPlotSeriesBuilder extends ConfigBuilder<SeriesProps, Series> {
 			pointsConfig.show = pointsBuilder;
 		} else if (drawStyle === DrawStyle.Points) {
 			pointsConfig.show = true;
+		} else if (showPoints === VisibilityMode.Never) {
+			pointsConfig.show = false;
+		} else if (showPoints === VisibilityMode.Always) {
+			pointsConfig.show = true;
 		} else {
-			pointsConfig.show = !!showPoints;
+			pointsConfig.show = false; // default to hidden
 		}
 
 		return pointsConfig;

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

@@ -2,7 +2,12 @@ import { themeColors } from 'constants/theme';
 import uPlot from 'uplot';
 
 import type { SeriesProps } from '../types';
-import { DrawStyle, LineInterpolation, LineStyle } from '../types';
+import {
+	DrawStyle,
+	LineInterpolation,
+	LineStyle,
+	VisibilityMode,
+} from '../types';
 import { POINT_SIZE_FACTOR, UPlotSeriesBuilder } from '../UPlotSeriesBuilder';
 
 const createBaseProps = (
@@ -163,17 +168,17 @@ describe('UPlotSeriesBuilder', () => {
 		expect(config.points?.show).toBe(pointsBuilder);
 	});
 
-	it('respects showPoints for point visibility when no custom pointsBuilder is given', () => {
+	it('respects VisibilityMode for point visibility when no custom pointsBuilder is given', () => {
 		const neverPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: false,
+				showPoints: VisibilityMode.Never,
 			}),
 		);
 		const alwaysPointsBuilder = new UPlotSeriesBuilder(
 			createBaseProps({
 				drawStyle: DrawStyle.Line,
-				showPoints: true,
+				showPoints: VisibilityMode.Always,
 			}),
 		);
 

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

@@ -122,6 +122,12 @@ export enum LineInterpolation {
 	StepBefore = 'stepBefore',
 }
 
+export enum VisibilityMode {
+	Always = 'always',
+	Auto = 'auto',
+	Never = 'never',
+}
+
 /**
  * Props for configuring lines
  */
@@ -157,13 +163,7 @@ export interface BarConfig {
 export interface PointsConfig {
 	pointColor?: string;
 	pointSize?: number;
-	showPoints?: boolean;
-}
-
-export enum FillMode {
-	Solid = 'solid',
-	Gradient = 'gradient',
-	None = 'none',
+	showPoints?: VisibilityMode;
 }
 
 export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
@@ -177,7 +177,6 @@ export interface SeriesProps extends LineConfig, PointsConfig, BarConfig {
 	show?: boolean;
 	spanGaps?: boolean;
 	fillColor?: string;
-	fillMode?: FillMode;
 	isDarkMode?: boolean;
 	stepInterval?: number;
 }

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

@@ -1,18 +0,0 @@
-import uPlot from 'uplot';
-
-export function generateGradientFill(
-	uPlotInstance: uPlot,
-	startColor: string,
-	endColor: string,
-): CanvasGradient {
-	const g = uPlotInstance.ctx.createLinearGradient(
-		0,
-		0,
-		0,
-		uPlotInstance.bbox.height,
-	);
-	g.addColorStop(0, `${startColor}70`);
-	g.addColorStop(0.6, `${startColor}40`);
-	g.addColorStop(1, endColor);
-	return g;
-}

frontend/src/lib/zoomOutUtils.ts

@@ -0,0 +1,139 @@
+/**
+ * Custom Time Picker zoom-out ladder:
+ * - Until 1 day: 15m → 45m → 2hr → 7hr → 21hr
+ * - Then fixed: 1d → 2d → 3d → 1w → 2w → 1m
+ * - At 1 month: zoom out is disabled (max range)
+ */
+
+import type {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+
+const MS_PER_MIN = 60 * 1000;
+const MS_PER_HOUR = 60 * MS_PER_MIN;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const MS_PER_WEEK = 7 * MS_PER_DAY;
+
+const ZOOM_OUT_LADDER_MS: number[] = [
+	15 * MS_PER_MIN, // 15m
+	45 * MS_PER_MIN, // 45m
+	2 * MS_PER_HOUR, // 2hr
+	7 * MS_PER_HOUR, // 7hr
+	21 * MS_PER_HOUR, // 21hr
+	1 * MS_PER_DAY, // 1d
+	2 * MS_PER_DAY, // 2d
+	3 * MS_PER_DAY, // 3d
+	1 * MS_PER_WEEK, // 1w
+	2 * MS_PER_WEEK, // 2w
+	30 * MS_PER_DAY, // 1m
+];
+
+const LADDER_LAST_INDEX = ZOOM_OUT_LADDER_MS.length - 1;
+const MAX_DURATION = ZOOM_OUT_LADDER_MS[LADDER_LAST_INDEX];
+const MIN_LADDER_DURATION_MS = ZOOM_OUT_LADDER_MS[0]; // 15m - below this we use 3x
+
+export const MAX_ZOOM_OUT_DURATION_MS = MAX_DURATION;
+
+/** Returns true when zoom out should be disabled (range at or beyond 1 month) */
+export function isZoomOutDisabled(durationMs: number): boolean {
+	return durationMs >= MAX_ZOOM_OUT_DURATION_MS;
+}
+
+/** Preset labels for ladder steps supported by GetMinMax (shows "Last 15 minutes" etc. instead of "Custom") */
+const PRESET_FOR_DURATION_MS: Record<number, Time | CustomTimeType> = {
+	[15 * MS_PER_MIN]: '15m',
+	[45 * MS_PER_MIN]: '45m',
+	[2 * MS_PER_HOUR]: '2h',
+	[7 * MS_PER_HOUR]: '7h',
+	[21 * MS_PER_HOUR]: '21h',
+	[1 * MS_PER_DAY]: '1d',
+	[2 * MS_PER_DAY]: '2d',
+	[3 * MS_PER_DAY]: '3d',
+	[1 * MS_PER_WEEK]: '1w',
+	[2 * MS_PER_WEEK]: '2w',
+	[30 * MS_PER_DAY]: '1month',
+};
+
+/**
+ * Returns the next duration in the zoom-out ladder for the given current duration.
+ * Below 15m: zoom out 3x until we reach 15m, then continue with the ladder.
+ * If at or past 1 month, returns MAX_DURATION (no zoom out - button is disabled).
+ */
+export function getNextDurationInLadder(durationMs: number): number {
+	if (durationMs >= MAX_DURATION) {
+		return MAX_DURATION; // No zoom out beyond 1 month
+	}
+
+	// Below 15m: zoom out 3x until we reach 15m
+	if (durationMs < MIN_LADDER_DURATION_MS) {
+		const next = durationMs * 3;
+		return Math.min(next, MIN_LADDER_DURATION_MS);
+	}
+
+	// At or above 15m: use the fixed ladder
+	for (let i = 0; i < ZOOM_OUT_LADDER_MS.length; i++) {
+		if (ZOOM_OUT_LADDER_MS[i] > durationMs) {
+			return ZOOM_OUT_LADDER_MS[i];
+		}
+	}
+
+	return MAX_DURATION;
+}
+
+export interface ZoomOutResult {
+	range: [number, number];
+	/** Preset key (e.g. '15m') when range matches a preset - use for display instead of "Custom Date Range" */
+	preset: Time | CustomTimeType | null;
+}
+
+/**
+ * Computes the next zoomed-out time range.
+ * Phase 1 (center-anchored): While new end <= now, expand from center.
+ * Phase 2 (end-anchored at now): When new end would exceed now, anchor end at now and move start backward.
+ *
+ * @returns ZoomOutResult with range and preset (or null if no change)
+ */
+export function getNextZoomOutRange(
+	startMs: number,
+	endMs: number,
+): ZoomOutResult | null {
+	const nowMs = Date.now();
+	const durationMs = endMs - startMs;
+
+	if (durationMs <= 0) {
+		return null;
+	}
+
+	const newDurationMs = getNextDurationInLadder(durationMs);
+
+	// No zoom out when already at max (1 month)
+	if (newDurationMs <= durationMs) {
+		return null;
+	}
+	const centerMs = startMs + durationMs / 2;
+	const computedEndMs = centerMs + newDurationMs / 2;
+
+	let newStartMs: number;
+	let newEndMs: number;
+
+	const isPhase1 = computedEndMs <= nowMs;
+	if (isPhase1) {
+		// Phase 1: center-anchored (historical range not ending at now)
+		newStartMs = centerMs - newDurationMs / 2;
+		newEndMs = computedEndMs;
+	} else {
+		// Phase 2: end-anchored at now
+		newStartMs = nowMs - newDurationMs;
+		newEndMs = nowMs;
+	}
+
+	// Phase 2 only: use preset so GetMinMax produces "last X from now".
+	// Phase 1: preset=null so the center-anchored range is preserved (GetMinMax would discard it).
+	const preset = isPhase1 ? null : PRESET_FOR_DURATION_MS[newDurationMs] ?? null;
+
+	return {
+		range: [Math.round(newStartMs), Math.round(newEndMs)],
+		preset,
+	};
+}

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/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 });